@atlaskit/link-datasource 1.10.3 → 1.11.0

package/dist/es2019/ui/assets-modal/modal/index.js

@@ -1,13 +1,19 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
+import { v4 as uuidv4 } from 'uuid';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button/standard-button';
 import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
-import { useDatasourceAnalyticsEvents } from '../../../analytics';
+import { EVENT_CHANNEL, useDatasourceAnalyticsEvents } from '../../../analytics';
+import { packageMetaData } from '../../../analytics/constants';
+import { DatasourceAction, DatasourceDisplay, DatasourceSearchMethod } from '../../../analytics/types';
+import { startUfoExperience } from '../../../analytics/ufoExperiences';
+import { useColumnPickerRenderedFailedUfoExperience } from '../../../analytics/ufoExperiences/hooks/useColumnPickerRenderedFailedUfoExperience';
+import { useDataRenderedUfoExperience } from '../../../analytics/ufoExperiences/hooks/useDataRenderedUfoExperience';
 import { fetchMessagesForLocale } from '../../../common/utils/locale/fetch-messages-for-locale';
 import { useAssetsClient } from '../../../hooks/useAssetsClient';
 import { useDatasourceTableState } from '../../../hooks/useDatasourceTableState';
@@ -38,6 +44,9 @@ const PlainAssetsConfigModal = props => {
   const {
     fireEvent
   } = useDatasourceAnalyticsEvents();
+  const {
+    current: modalRenderInstanceId
+  } = useRef(uuidv4());
 
   // If a workspaceError occurs this is a critical error
   const {
@@ -60,18 +69,74 @@ const PlainAssetsConfigModal = props => {
     loadDatasourceDetails,
     hasNextPage,
     columns,
-    defaultVisibleColumnKeys
+    defaultVisibleColumnKeys,
+    extensionKey = null,
+    destinationObjectTypes,
+    totalCount
   } = useDatasourceTableState({
     datasourceId,
     parameters: isParametersSet ? parameters : undefined,
     fieldKeys: isNewSearch ? [] : visibleColumnKeys
   });
+
+  /* ------------------------------ OBSERVABILITY ------------------------------ */
+  const searchCount = useRef(0);
+  const userInteractionActions = useRef(new Set());
+  const visibleColumnCount = useRef((visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0);
+  const isDataReady = (visibleColumnKeys || []).length > 0;
+  const analyticsPayload = useMemo(() => {
+    return {
+      extensionKey: extensionKey,
+      destinationObjectTypes: destinationObjectTypes
+    };
+  }, [destinationObjectTypes, extensionKey]);
+  useEffect(() => {
+    fireEvent('screen.datasourceModalDialog.viewed', {});
+  }, [fireEvent]);
+  const fireTableViewedEvent = useCallback(() => {
+    if (isDataReady) {
+      fireEvent('ui.table.viewed.datasourceConfigModal', {
+        ...analyticsPayload,
+        totalItemCount: totalCount || 0,
+        searchMethod: DatasourceSearchMethod.DATASOURCE_SEARCH_QUERY,
+        displayedColumnCount: visibleColumnCount.current
+      });
+    }
+  }, [analyticsPayload, fireEvent, totalCount, isDataReady]);
+  useEffect(() => {
+    const isResolved = status === 'resolved';
+    if (!isResolved || !totalCount) {
+      return;
+    }
+    if (totalCount > 1) {
+      fireTableViewedEvent();
+    }
+  }, [fireTableViewedEvent, status, totalCount]);
+  useEffect(() => {
+    const shouldStartUfoExperience = status === 'loading';
+    if (shouldStartUfoExperience) {
+      startUfoExperience({
+        name: 'datasource-rendered'
+      }, modalRenderInstanceId);
+    }
+  }, [modalRenderInstanceId, status]);
+  useDataRenderedUfoExperience({
+    status,
+    experienceId: modalRenderInstanceId,
+    itemCount: responseItems.length,
+    canBeLink: false,
+    extensionKey
+  });
+  useColumnPickerRenderedFailedUfoExperience(status, modalRenderInstanceId);
+  /* ------------------------------ END OBSERVABILITY ------------------------------ */
+
   const onVisibleColumnKeysChange = useCallback(visibleColumnKeys => {
     setVisibleColumnKeys(visibleColumnKeys);
     setIsNewSearch(false);
   }, []);
   useEffect(() => {
     const newVisibleColumnKeys = !initialVisibleColumnKeys || (initialVisibleColumnKeys || []).length === 0 ? defaultVisibleColumnKeys : initialVisibleColumnKeys;
+    visibleColumnCount.current = newVisibleColumnKeys.length;
     setVisibleColumnKeys(newVisibleColumnKeys);
   }, [initialVisibleColumnKeys, defaultVisibleColumnKeys]);
   useEffect(() => {
@@ -79,20 +144,33 @@ const PlainAssetsConfigModal = props => {
       setVisibleColumnKeys(defaultVisibleColumnKeys);
     }
   }, [defaultVisibleColumnKeys, isNewSearch]);
-  useEffect(() => {
-    fireEvent('screen.datasourceModalDialog.viewed', {});
-  }, [fireEvent]);
-  const isDisabled = !!workspaceError || status === 'rejected' || status === 'loading' || status === 'empty' || !!workspaceError || assetsClientLoading || !aql || !schemaId;
+  const isDisabled = !!workspaceError || status === 'rejected' || status === 'loading' || status === 'empty' || assetsClientLoading || !aql || !schemaId;
   const retrieveUrlForSmartCardRender = useCallback(() => {
     var _data$key, _data$key$data;
     const [data] = responseItems;
     // agreement with BE that we will use `key` for rendering smartlink
     return data === null || data === void 0 ? void 0 : (_data$key = data.key) === null || _data$key === void 0 ? void 0 : (_data$key$data = _data$key.data) === null || _data$key$data === void 0 ? void 0 : _data$key$data.url;
   }, [responseItems]);
-  const onInsertPressed = useCallback(() => {
+  const onInsertPressed = useCallback((e, analyticsEvent) => {
+    var _insertButtonClickedE;
     if (!aql || !schemaId || !workspaceId) {
       return;
     }
+    const insertButtonClickedEvent = analyticsEvent.update({
+      actionSubjectId: 'insert',
+      attributes: {
+        ...analyticsPayload,
+        totalItemCount: totalCount || 0,
+        displayedColumnCount: visibleColumnCount.current,
+        display: DatasourceDisplay.DATASOURCE_TABLE,
+        searchCount: searchCount.current,
+        searchMethod: DatasourceSearchMethod.DATASOURCE_SEARCH_QUERY,
+        actions: Array.from(userInteractionActions.current)
+      },
+      eventType: 'ui'
+    });
+    const consumerEvent = (_insertButtonClickedE = insertButtonClickedEvent.clone()) !== null && _insertButtonClickedE !== void 0 ? _insertButtonClickedE : undefined;
+    insertButtonClickedEvent.fire(EVENT_CHANNEL);
     const firstAssetUrl = retrieveUrlForSmartCardRender();
     if (responseItems.length === 1 && firstAssetUrl) {
       onInsert({
@@ -100,7 +178,7 @@ const PlainAssetsConfigModal = props => {
         attrs: {
           url: firstAssetUrl
         }
-      });
+      }, consumerEvent);
     } else {
       onInsert({
         type: 'blockCard',
@@ -122,11 +200,30 @@ const PlainAssetsConfigModal = props => {
             }]
           }
         }
-      });
+      }, consumerEvent);
     }
-  }, [aql, schemaId, workspaceId, retrieveUrlForSmartCardRender, responseItems.length, onInsert, datasourceId, visibleColumnKeys]);
+  }, [aql, schemaId, workspaceId, analyticsPayload, totalCount, retrieveUrlForSmartCardRender, responseItems.length, onInsert, datasourceId, visibleColumnKeys]);
+  const onCancelClick = useCallback((e, analyticEvent) => {
+    analyticEvent.update({
+      eventType: 'ui',
+      actionSubjectId: 'cancel',
+      attributes: {
+        ...analyticsPayload,
+        searchCount: searchCount.current,
+        actions: Array.from(userInteractionActions.current)
+      }
+    }).fire(EVENT_CHANNEL);
+    onCancel();
+  }, [analyticsPayload, onCancel]);
   const handleOnSearch = useCallback(async (searchAql, searchSchemaId) => {
     if (schemaId !== searchSchemaId || aql !== searchAql) {
+      searchCount.current++;
+      if (schemaId !== searchSchemaId) {
+        userInteractionActions.current.add(DatasourceAction.SCHEMA_UPDATED);
+      }
+      if (aql !== searchAql) {
+        userInteractionActions.current.add(DatasourceAction.QUERY_UPDATED);
+      }
       reset({
         shouldResetColumns: true
       });
@@ -179,10 +276,11 @@ const PlainAssetsConfigModal = props => {
     hasNextPage: hasNextPage,
     loadDatasourceDetails: loadDatasourceDetails,
     columns: columns,
-    defaultVisibleColumnKeys: defaultVisibleColumnKeys
+    defaultVisibleColumnKeys: defaultVisibleColumnKeys,
+    modalRenderInstanceId: modalRenderInstanceId
   }))), jsx(ModalFooter, null, jsx(Button, {
     appearance: "default",
-    onClick: onCancel,
+    onClick: onCancelClick,
     testId: 'asset-datasource-modal--cancel-button'
   }, jsx(FormattedMessage, modalMessages.cancelButtonText)), jsx(Button, {
     appearance: "primary",
@@ -199,8 +297,7 @@ const analyticsContextAttributes = {
   dataProvider: 'jsm-assets'
 };
 const analyticsContextData = {
-  packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.10.3",
+  ...packageMetaData,
   source: 'datasourceConfigModal'
 };
 const contextData = {

package/dist/es2019/ui/assets-modal/modal/render-assets-content/index.js

@@ -13,7 +13,8 @@ export const RenderAssetsContent = props => {
     loadDatasourceDetails,
     columns,
     defaultVisibleColumnKeys,
-    onVisibleColumnKeysChange
+    onVisibleColumnKeysChange,
+    modalRenderInstanceId
   } = props;
   const resolvedWithNoResults = status === 'resolved' && !responseItems.length;
   const issueLikeDataTableView = useMemo(() => /*#__PURE__*/React.createElement(IssueLikeDataTableView, {
@@ -25,8 +26,9 @@ export const RenderAssetsContent = props => {
     visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
     onNextPage: onNextPage,
     onLoadDatasourceDetails: loadDatasourceDetails,
-    onVisibleColumnKeysChange: onVisibleColumnKeysChange
-  }), [columns, defaultVisibleColumnKeys, hasNextPage, loadDatasourceDetails, onNextPage, onVisibleColumnKeysChange, responseItems, status, visibleColumnKeys]);
+    onVisibleColumnKeysChange: onVisibleColumnKeysChange,
+    parentContainerRenderInstanceId: modalRenderInstanceId
+  }), [columns, defaultVisibleColumnKeys, hasNextPage, loadDatasourceDetails, onNextPage, onVisibleColumnKeysChange, responseItems, status, visibleColumnKeys, modalRenderInstanceId]);
   if (status === 'rejected') {
     return /*#__PURE__*/React.createElement(ModalLoadingError, null);
   } else if (status === 'empty') {

package/dist/es2019/ui/assets-modal/search-container/index.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import Form from '@atlaskit/form';
+import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { AqlSearchInput } from './aql-search-input';
 import { AssetsObjectSchemaSelect } from './object-schema-select';
 import { FormContainer, FormRowContainer, SchemaSelectContainer } from './styled';
@@ -15,12 +16,16 @@ export const AssetsSearchContainer = props => {
     modalTitle,
     isSearching
   } = props;
+  const {
+    fireEvent
+  } = useDatasourceAnalyticsEvents();
   const onFormSubmit = searchFormValues => {
     const {
       aql,
       objectSchema
     } = searchFormValues;
     if (objectSchema) {
+      fireEvent('ui.aqlEditor.searched', {});
       // Pass the validated aql and object schema back to modal
       onSearch(aql, objectSchema.value);
     }

package/dist/es2019/ui/assets-modal/search-container/object-schema-select/index.js

@@ -1,18 +1,23 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 
+import { useEffect, useState } from 'react';
 import { jsx } from '@emotion/react';
 import debounce from 'debounce-promise';
 import { useIntl } from 'react-intl-next';
 import { Field } from '@atlaskit/form';
 import { AsyncSelect } from '@atlaskit/select';
 import { layers } from '@atlaskit/theme/constants';
+import { useDatasourceAnalyticsEvents } from '../../../../analytics';
 import { useObjectSchemas } from '../../../../hooks/useObjectSchemas';
 import { objectSchemaKey } from '../../../../types/assets/types';
 import { FieldContainer } from '../styled';
 import { objectSchemaSelectMessages } from './messages';
 import { objectSchemaToSelectOption } from './utils';
 export const SEARCH_DEBOUNCE_MS = 350;
+const mapObjectSchemasToOptions = objectSchemas => {
+  return objectSchemas ? objectSchemas.map(objectSchema => objectSchemaToSelectOption(objectSchema)) : [];
+};
 
 /**
  * Rendering a `<Select>` in a `<Modal>` results in the select options getting cut off by the bottom of the modal and
@@ -32,6 +37,10 @@ export const AssetsObjectSchemaSelect = ({
   workspaceId,
   classNamePrefix = 'assets-datasource-modal--object-schema-select'
 }) => {
+  const [defaultOptions, setDefaultOptions] = useState(null);
+  const {
+    fireEvent
+  } = useDatasourceAnalyticsEvents();
   const {
     formatMessage
   } = useIntl();
@@ -40,10 +49,29 @@ export const AssetsObjectSchemaSelect = ({
     objectSchemasLoading
   } = useObjectSchemas(workspaceId);
   const selectedObjectSchema = value ? objectSchemaToSelectOption(value) : undefined;
+  useEffect(() => {
+    const fetchInitialData = async () => {
+      const {
+        objectSchemas,
+        totalObjectSchemas
+      } = await fetchObjectSchemas('');
+      // We only want to send modal ready event once after we've fetched the schema count
+      fireEvent('ui.modal.ready.datasource', {
+        schemasCount: totalObjectSchemas !== null && totalObjectSchemas !== void 0 ? totalObjectSchemas : 0,
+        instancesCount: null
+      });
+      setDefaultOptions(mapObjectSchemasToOptions(objectSchemas));
+    };
+    if (defaultOptions === null) {
+      fetchInitialData();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   const loadOptions = async inputValue => {
-    const objectSchemas = await fetchObjectSchemas(inputValue);
-    const options = objectSchemas ? objectSchemas.map(objectSchema => objectSchemaToSelectOption(objectSchema)) : [];
-    return options;
+    const {
+      objectSchemas
+    } = await fetchObjectSchemas(inputValue);
+    return mapObjectSchemasToOptions(objectSchemas);
   };
   const debouncedLoadOptions = debounce(loadOptions, SEARCH_DEBOUNCE_MS);
   const validateSchema = value => {
@@ -66,8 +94,7 @@ export const AssetsObjectSchemaSelect = ({
     autoFocus: true,
     classNamePrefix: classNamePrefix,
     isLoading: objectSchemasLoading,
-    defaultOptions: true // setting to true causes the loadOptions to be called on mount
-    ,
+    defaultOptions: defaultOptions !== null && defaultOptions !== void 0 ? defaultOptions : [],
     isSearchable: true,
     loadOptions: debouncedLoadOptions,
     placeholder: formatMessage(objectSchemaSelectMessages.placeholder),

package/dist/es2019/ui/jira-issues-modal/modal/index.js

@@ -179,7 +179,8 @@ export const PlainJiraIssuesConfigModal = props => {
       const sortedAvailableSites = [...jiraSites].sort((a, b) => a.displayName.localeCompare(b.displayName));
       setAvailableSites(sortedAvailableSites);
       fireEvent('ui.modal.ready.datasource', {
-        instancesCount: sortedAvailableSites.length
+        instancesCount: sortedAvailableSites.length,
+        schemasCount: null
       });
     };
     void fetchSiteDisplayNames();

package/dist/esm/analytics/constants.js

@@ -1,5 +1,5 @@
 export var EVENT_CHANNEL = 'media';
 export var packageMetaData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.10.3"
+  packageVersion: "1.11.0"
 };

package/dist/esm/analytics/types.js

@@ -6,6 +6,7 @@ export var DatasourceAction = /*#__PURE__*/function (DatasourceAction) {
   DatasourceAction["QUERY_UPDATED"] = "query updated";
   DatasourceAction["DISPLAY_VIEW_CHANGED"] = "display view changed";
   DatasourceAction["NEXT_PAGE_SCROLLED"] = "next page scrolled";
+  DatasourceAction["SCHEMA_UPDATED"] = "schema updated";
   return DatasourceAction;
 }({});
 export var DatasourceDisplay = /*#__PURE__*/function (DatasourceDisplay) {

package/dist/esm/hooks/useObjectSchemas.js

@@ -14,11 +14,15 @@ export var useObjectSchemas = function useObjectSchemas(workspaceId) {
     setObjectSchemas = _useState4[1];
   var _useState5 = useState(),
     _useState6 = _slicedToArray(_useState5, 2),
-    error = _useState6[0],
-    setError = _useState6[1];
+    totalObjectSchemas = _useState6[0],
+    setTotalObjectSchemas = _useState6[1];
+  var _useState7 = useState(),
+    _useState8 = _slicedToArray(_useState7, 2),
+    error = _useState8[0],
+    setError = _useState8[1];
   var request = useCallback( /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(query) {
-      var fetchedObjectSchemas, fetchedObjectSchemasResponse;
+      var fetchedObjectSchemas, fetchTotalObjectSchemas, fetchedObjectSchemasResponse;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -30,28 +34,33 @@ export var useObjectSchemas = function useObjectSchemas(workspaceId) {
           case 5:
             fetchedObjectSchemasResponse = _context.sent;
             setObjectSchemas(fetchedObjectSchemasResponse.values);
+            setTotalObjectSchemas(fetchedObjectSchemasResponse.total);
             fetchedObjectSchemas = fetchedObjectSchemasResponse.values;
-            _context.next = 13;
+            fetchTotalObjectSchemas = fetchedObjectSchemasResponse.total;
+            _context.next = 15;
             break;
-          case 10:
-            _context.prev = 10;
+          case 12:
+            _context.prev = 12;
             _context.t0 = _context["catch"](2);
             if (_context.t0 instanceof Error) {
               setError(_context.t0);
             } else {
               setError(new Error('Unexpected error occured'));
             }
-          case 13:
-            _context.prev = 13;
+          case 15:
+            _context.prev = 15;
             setLoading(false);
-            return _context.finish(13);
-          case 16:
-            return _context.abrupt("return", fetchedObjectSchemas);
-          case 17:
+            return _context.finish(15);
+          case 18:
+            return _context.abrupt("return", {
+              objectSchemas: fetchedObjectSchemas,
+              totalObjectSchemas: fetchTotalObjectSchemas
+            });
+          case 19:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[2, 10, 13, 16]]);
+      }, _callee, null, [[2, 12, 15, 18]]);
     }));
     return function (_x) {
       return _ref.apply(this, arguments);
@@ -61,6 +70,7 @@ export var useObjectSchemas = function useObjectSchemas(workspaceId) {
     objectSchemasLoading: loading,
     objectSchemasError: error,
     objectSchemas: objectSchemas,
+    totalObjectSchemas: totalObjectSchemas,
     fetchObjectSchemas: request
   };
 };

package/dist/esm/ui/assets-modal/modal/index.js

@@ -1,19 +1,25 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 /** @jsx jsx */
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
+import { v4 as uuidv4 } from 'uuid';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button/standard-button';
 import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
-import { useDatasourceAnalyticsEvents } from '../../../analytics';
+import { EVENT_CHANNEL, useDatasourceAnalyticsEvents } from '../../../analytics';
+import { packageMetaData } from '../../../analytics/constants';
+import { DatasourceAction, DatasourceDisplay, DatasourceSearchMethod } from '../../../analytics/types';
+import { startUfoExperience } from '../../../analytics/ufoExperiences';
+import { useColumnPickerRenderedFailedUfoExperience } from '../../../analytics/ufoExperiences/hooks/useColumnPickerRenderedFailedUfoExperience';
+import { useDataRenderedUfoExperience } from '../../../analytics/ufoExperiences/hooks/useDataRenderedUfoExperience';
 import { fetchMessagesForLocale } from '../../../common/utils/locale/fetch-messages-for-locale';
 import { useAssetsClient } from '../../../hooks/useAssetsClient';
 import { useDatasourceTableState } from '../../../hooks/useDatasourceTableState';
@@ -53,6 +59,8 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
     setIsNewSearch = _useState8[1];
   var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
     fireEvent = _useDatasourceAnalyti.fireEvent;
+  var _useRef = useRef(uuidv4()),
+    modalRenderInstanceId = _useRef.current;
 
   // If a workspaceError occurs this is a critical error
   var _useAssetsClient = useAssetsClient(initialParameters),
@@ -80,13 +88,69 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
     loadDatasourceDetails = _useDatasourceTableSt.loadDatasourceDetails,
     hasNextPage = _useDatasourceTableSt.hasNextPage,
     columns = _useDatasourceTableSt.columns,
-    defaultVisibleColumnKeys = _useDatasourceTableSt.defaultVisibleColumnKeys;
+    defaultVisibleColumnKeys = _useDatasourceTableSt.defaultVisibleColumnKeys,
+    _useDatasourceTableSt2 = _useDatasourceTableSt.extensionKey,
+    extensionKey = _useDatasourceTableSt2 === void 0 ? null : _useDatasourceTableSt2,
+    destinationObjectTypes = _useDatasourceTableSt.destinationObjectTypes,
+    totalCount = _useDatasourceTableSt.totalCount;
+
+  /* ------------------------------ OBSERVABILITY ------------------------------ */
+  var searchCount = useRef(0);
+  var userInteractionActions = useRef(new Set());
+  var visibleColumnCount = useRef((visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0);
+  var isDataReady = (visibleColumnKeys || []).length > 0;
+  var analyticsPayload = useMemo(function () {
+    return {
+      extensionKey: extensionKey,
+      destinationObjectTypes: destinationObjectTypes
+    };
+  }, [destinationObjectTypes, extensionKey]);
+  useEffect(function () {
+    fireEvent('screen.datasourceModalDialog.viewed', {});
+  }, [fireEvent]);
+  var fireTableViewedEvent = useCallback(function () {
+    if (isDataReady) {
+      fireEvent('ui.table.viewed.datasourceConfigModal', _objectSpread(_objectSpread({}, analyticsPayload), {}, {
+        totalItemCount: totalCount || 0,
+        searchMethod: DatasourceSearchMethod.DATASOURCE_SEARCH_QUERY,
+        displayedColumnCount: visibleColumnCount.current
+      }));
+    }
+  }, [analyticsPayload, fireEvent, totalCount, isDataReady]);
+  useEffect(function () {
+    var isResolved = status === 'resolved';
+    if (!isResolved || !totalCount) {
+      return;
+    }
+    if (totalCount > 1) {
+      fireTableViewedEvent();
+    }
+  }, [fireTableViewedEvent, status, totalCount]);
+  useEffect(function () {
+    var shouldStartUfoExperience = status === 'loading';
+    if (shouldStartUfoExperience) {
+      startUfoExperience({
+        name: 'datasource-rendered'
+      }, modalRenderInstanceId);
+    }
+  }, [modalRenderInstanceId, status]);
+  useDataRenderedUfoExperience({
+    status: status,
+    experienceId: modalRenderInstanceId,
+    itemCount: responseItems.length,
+    canBeLink: false,
+    extensionKey: extensionKey
+  });
+  useColumnPickerRenderedFailedUfoExperience(status, modalRenderInstanceId);
+  /* ------------------------------ END OBSERVABILITY ------------------------------ */
+
   var onVisibleColumnKeysChange = useCallback(function (visibleColumnKeys) {
     setVisibleColumnKeys(visibleColumnKeys);
     setIsNewSearch(false);
   }, []);
   useEffect(function () {
     var newVisibleColumnKeys = !initialVisibleColumnKeys || (initialVisibleColumnKeys || []).length === 0 ? defaultVisibleColumnKeys : initialVisibleColumnKeys;
+    visibleColumnCount.current = newVisibleColumnKeys.length;
     setVisibleColumnKeys(newVisibleColumnKeys);
   }, [initialVisibleColumnKeys, defaultVisibleColumnKeys]);
   useEffect(function () {
@@ -94,10 +158,7 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
       setVisibleColumnKeys(defaultVisibleColumnKeys);
     }
   }, [defaultVisibleColumnKeys, isNewSearch]);
-  useEffect(function () {
-    fireEvent('screen.datasourceModalDialog.viewed', {});
-  }, [fireEvent]);
-  var isDisabled = !!workspaceError || status === 'rejected' || status === 'loading' || status === 'empty' || !!workspaceError || assetsClientLoading || !aql || !schemaId;
+  var isDisabled = !!workspaceError || status === 'rejected' || status === 'loading' || status === 'empty' || assetsClientLoading || !aql || !schemaId;
   var retrieveUrlForSmartCardRender = useCallback(function () {
     var _data$key;
     var _responseItems = _slicedToArray(responseItems, 1),
@@ -105,10 +166,25 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
     // agreement with BE that we will use `key` for rendering smartlink
     return data === null || data === void 0 || (_data$key = data.key) === null || _data$key === void 0 || (_data$key = _data$key.data) === null || _data$key === void 0 ? void 0 : _data$key.url;
   }, [responseItems]);
-  var onInsertPressed = useCallback(function () {
+  var onInsertPressed = useCallback(function (e, analyticsEvent) {
+    var _insertButtonClickedE;
     if (!aql || !schemaId || !workspaceId) {
       return;
     }
+    var insertButtonClickedEvent = analyticsEvent.update({
+      actionSubjectId: 'insert',
+      attributes: _objectSpread(_objectSpread({}, analyticsPayload), {}, {
+        totalItemCount: totalCount || 0,
+        displayedColumnCount: visibleColumnCount.current,
+        display: DatasourceDisplay.DATASOURCE_TABLE,
+        searchCount: searchCount.current,
+        searchMethod: DatasourceSearchMethod.DATASOURCE_SEARCH_QUERY,
+        actions: Array.from(userInteractionActions.current)
+      }),
+      eventType: 'ui'
+    });
+    var consumerEvent = (_insertButtonClickedE = insertButtonClickedEvent.clone()) !== null && _insertButtonClickedE !== void 0 ? _insertButtonClickedE : undefined;
+    insertButtonClickedEvent.fire(EVENT_CHANNEL);
     var firstAssetUrl = retrieveUrlForSmartCardRender();
     if (responseItems.length === 1 && firstAssetUrl) {
       onInsert({
@@ -116,7 +192,7 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
         attrs: {
           url: firstAssetUrl
         }
-      });
+      }, consumerEvent);
     } else {
       onInsert({
         type: 'blockCard',
@@ -140,15 +216,33 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
             }]
           }
         }
-      });
+      }, consumerEvent);
     }
-  }, [aql, schemaId, workspaceId, retrieveUrlForSmartCardRender, responseItems.length, onInsert, datasourceId, visibleColumnKeys]);
+  }, [aql, schemaId, workspaceId, analyticsPayload, totalCount, retrieveUrlForSmartCardRender, responseItems.length, onInsert, datasourceId, visibleColumnKeys]);
+  var onCancelClick = useCallback(function (e, analyticEvent) {
+    analyticEvent.update({
+      eventType: 'ui',
+      actionSubjectId: 'cancel',
+      attributes: _objectSpread(_objectSpread({}, analyticsPayload), {}, {
+        searchCount: searchCount.current,
+        actions: Array.from(userInteractionActions.current)
+      })
+    }).fire(EVENT_CHANNEL);
+    onCancel();
+  }, [analyticsPayload, onCancel]);
   var handleOnSearch = useCallback( /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(searchAql, searchSchemaId) {
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             if (schemaId !== searchSchemaId || aql !== searchAql) {
+              searchCount.current++;
+              if (schemaId !== searchSchemaId) {
+                userInteractionActions.current.add(DatasourceAction.SCHEMA_UPDATED);
+              }
+              if (aql !== searchAql) {
+                userInteractionActions.current.add(DatasourceAction.QUERY_UPDATED);
+              }
               reset({
                 shouldResetColumns: true
               });
@@ -210,10 +304,11 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
     hasNextPage: hasNextPage,
     loadDatasourceDetails: loadDatasourceDetails,
     columns: columns,
-    defaultVisibleColumnKeys: defaultVisibleColumnKeys
+    defaultVisibleColumnKeys: defaultVisibleColumnKeys,
+    modalRenderInstanceId: modalRenderInstanceId
   }))), jsx(ModalFooter, null, jsx(Button, {
     appearance: "default",
-    onClick: onCancel,
+    onClick: onCancelClick,
     testId: 'asset-datasource-modal--cancel-button'
   }, jsx(FormattedMessage, modalMessages.cancelButtonText)), jsx(Button, {
     appearance: "primary",
@@ -229,11 +324,9 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
 var analyticsContextAttributes = {
   dataProvider: 'jsm-assets'
 };
-var analyticsContextData = {
-  packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.10.3",
+var analyticsContextData = _objectSpread(_objectSpread({}, packageMetaData), {}, {
   source: 'datasourceConfigModal'
-};
+});
 var contextData = _objectSpread(_objectSpread({}, analyticsContextData), {}, {
   attributes: _objectSpread({}, analyticsContextAttributes)
 });