@atlaskit/link-datasource 1.10.2 → 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.2",
+  ...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/issue-like-table/render-type/link/index.js

@@ -35,12 +35,19 @@ const LinkRenderType = ({
     "data-testid": testId,
     target: "_blank"
   }, text || url)), [linkStyle, url, text, testId]);
-  const SmartCard = () => /*#__PURE__*/React.createElement(Card, {
-    appearance: "inline",
-    url: url,
-    testId: testId,
-    fallbackComponent: () => anchor
-  });
+  const SmartCard = () => {
+    const handleClick = e => {
+      e.preventDefault();
+      window.open(url, '_blank', 'noopener, noreferrer');
+    };
+    return /*#__PURE__*/React.createElement(Card, {
+      appearance: "inline",
+      onClick: handleClick,
+      url: url,
+      testId: testId,
+      fallbackComponent: () => anchor
+    });
+  };
 
   // url can be undefined before data is fetched whilst adding new link column to display
   if (!url) {

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.2"
+  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
   };
 };