@atlaskit/link-datasource 1.0.17 → 1.0.19

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

@@ -7,7 +7,10 @@ import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button/standard-button';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
 import { B400, N0, N40, N800 } from '@atlaskit/theme/colors';
-import { useDatasourceAnalyticsEvents } from '../../../analytics';
+import { EVENT_CHANNEL, useDatasourceAnalyticsEvents } from '../../../analytics';
+import { packageMetaData } from '../../../analytics/constants';
+import { DatasourceAction, DatasourceDisplay } from '../../../analytics/types';
+import { mapSearchMethod } from '../../../analytics/utils';
 import { useDatasourceTableState } from '../../../hooks/useDatasourceTableState';
 import { getAvailableJiraSites } from '../../../services/getAvailableJiraSites';
 import { AccessRequired } from '../../common/error-state/access-required';
@@ -15,7 +18,8 @@ import { ModalLoadingError } from '../../common/error-state/modal-loading-error'
 import { NoResults } from '../../common/error-state/no-results';
 import { EmptyState, IssueLikeDataTableView } from '../../issue-like-table';
 import LinkRenderType from '../../issue-like-table/render-type/link';
-import { getInitialSearchMethod, JiraSearchContainer } from '../jira-search-container';
+import { InitialStateView } from '../initial-state-view';
+import { JiraSearchContainer } from '../jira-search-container';
 import { ModeSwitcher } from '../mode-switcher';
 import { JiraSiteSelector } from '../site-selector';
 import { modalMessages } from './messages';
@@ -44,6 +48,28 @@ const issueCountStyles = css({
 const smartLinkContainerStyles = css({
   paddingLeft: '1px'
 });
+const getDisplayValue = (currentViewMode, itemCount) => {
+  if (currentViewMode === 'count') {
+    return DatasourceDisplay.DATASOURCE_INLINE;
+  }
+  return itemCount > 1 ? DatasourceDisplay.DATASOURCE_TABLE : DatasourceDisplay.INLINE;
+};
+
+/**
+ * This method should be called when one atomic action is performed on columns: adding new item, removing one item, changing items order.
+ * The assumption is that since only one action is changed at each time, we don't have to verify the actual contents of the lists.
+ */
+export const getColumnAction = (oldVisibleColumnKeys, newVisibleColumnKeys) => {
+  const newColumnSize = newVisibleColumnKeys.length;
+  const oldColumnSize = oldVisibleColumnKeys.length;
+  if (newColumnSize > oldColumnSize) {
+    return DatasourceAction.COLUMN_ADDED;
+  } else if (newColumnSize < oldColumnSize) {
+    return DatasourceAction.COLUMN_REMOVED;
+  } else {
+    return DatasourceAction.COLUMN_REORDERED;
+  }
+};
 export const PlainJiraIssuesConfigModal = props => {
   const {
     datasourceId,
@@ -56,12 +82,17 @@ export const PlainJiraIssuesConfigModal = props => {
   const [currentViewMode, setCurrentViewMode] = useState('issue');
   const [cloudId, setCloudId] = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.cloudId);
   const [jql, setJql] = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.jql);
-  const isParametersSet = !!(jql && cloudId);
+  const [visibleColumnKeys, setVisibleColumnKeys] = useState(initialVisibleColumnKeys);
+
+  // analytics related parameters
+  const searchCount = useRef(0);
+  const userInteractionActions = useRef(new Set());
+  const lastSearchMethodRef = useRef(null);
   const parameters = useMemo(() => !!cloudId ? {
     cloudId,
     jql: jql || ''
   } : undefined, [cloudId, jql]);
-  const [visibleColumnKeys, setVisibleColumnKeys] = useState(initialVisibleColumnKeys);
+  const isParametersSet = !!(jql && cloudId);
   const {
     reset,
     status,
@@ -71,13 +102,14 @@ export const PlainJiraIssuesConfigModal = props => {
     columns,
     defaultVisibleColumnKeys,
     loadDatasourceDetails,
-    totalCount
+    totalCount,
+    extensionKey = null,
+    destinationObjectTypes
   } = useDatasourceTableState({
     datasourceId,
     parameters: isParametersSet ? parameters : undefined,
     fieldKeys: visibleColumnKeys
   });
-  const lastSearchMethodRef = useRef(getInitialSearchMethod(parameters === null || parameters === void 0 ? void 0 : parameters.jql));
   const {
     formatMessage
   } = useIntl();
@@ -85,6 +117,13 @@ export const PlainJiraIssuesConfigModal = props => {
     fireEvent
   } = useDatasourceAnalyticsEvents();
   const selectedJiraSite = useMemo(() => availableSites.find(jiraSite => jiraSite.cloudId === cloudId) || availableSites[0], [availableSites, cloudId]);
+  const buttonClickedAnalyticsPayload = useMemo(() => {
+    return {
+      extensionKey: extensionKey,
+      destinationObjectTypes: destinationObjectTypes,
+      actions: userInteractionActions.current
+    };
+  }, [destinationObjectTypes, extensionKey]);
   const resolvedWithNoResults = status === 'resolved' && !responseItems.length;
   const jqlUrl = selectedJiraSite && jql && `${selectedJiraSite.url}/issues/?jql=${encodeURI(jql)}`;
   const isInsertDisabled = !isParametersSet || status === 'rejected' || status === 'unauthorized' || status === 'loading' || resolvedWithNoResults;
@@ -112,13 +151,29 @@ export const PlainJiraIssuesConfigModal = props => {
     }
   }, [cloudId, selectedJiraSite]);
   const onSearch = useCallback((newParameters, searchMethod) => {
+    searchCount.current++;
     lastSearchMethodRef.current = searchMethod;
+    if (jql !== newParameters.jql) {
+      userInteractionActions.current.add(DatasourceAction.QUERY_UPDATED);
+    }
     setJql(newParameters.jql);
     reset({
       shouldForceRequest: true
     });
-  }, [reset]);
+  }, [jql, reset]);
+  const onCancelClick = useCallback((e, analyticEvent) => {
+    analyticEvent.update({
+      eventType: 'ui',
+      actionSubjectId: 'cancel',
+      attributes: {
+        ...buttonClickedAnalyticsPayload,
+        searchCount: searchCount.current
+      }
+    }).fire(EVENT_CHANNEL);
+    onCancel();
+  }, [buttonClickedAnalyticsPayload, onCancel]);
   const onSiteSelection = useCallback(site => {
+    userInteractionActions.current.add(DatasourceAction.INSTANCE_UPDATED);
     setCloudId(site.cloudId);
     reset({
       shouldForceRequest: true
@@ -127,13 +182,26 @@ export const PlainJiraIssuesConfigModal = props => {
   const retrieveUrlForSmartCardRender = useCallback(() => {
     var _data$key, _data$key$data;
     const [data] = responseItems;
-    // agrement with BE that we will use `key` for rendering smartlink
+    // 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, analyticEvent) => {
     if (!isParametersSet || !jql || !selectedJiraSite) {
       return;
     }
+    const insertButtonClickedEvent = analyticEvent.update({
+      actionSubjectId: 'insert',
+      attributes: {
+        ...buttonClickedAnalyticsPayload,
+        totalItemCount: totalCount || 0,
+        displayedColumnCount: (visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0,
+        display: getDisplayValue(currentViewMode, totalCount || 0),
+        searchCount: searchCount.current,
+        searchMethod: mapSearchMethod(lastSearchMethodRef.current)
+      },
+      eventType: 'ui'
+    });
+    insertButtonClickedEvent.fire(EVENT_CHANNEL);
     const firstIssueUrl = retrieveUrlForSmartCardRender();
     if (currentViewMode === 'count') {
       onInsert({
@@ -173,10 +241,20 @@ export const PlainJiraIssuesConfigModal = props => {
         }
       });
     }
-  }, [isParametersSet, jql, jqlUrl, selectedJiraSite, retrieveUrlForSmartCardRender, currentViewMode, responseItems.length, onInsert, datasourceId, cloudId, visibleColumnKeys]);
+  }, [isParametersSet, jql, selectedJiraSite, buttonClickedAnalyticsPayload, totalCount, visibleColumnKeys, currentViewMode, retrieveUrlForSmartCardRender, responseItems.length, onInsert, jqlUrl, datasourceId, cloudId]);
   const handleViewModeChange = selectedMode => {
+    userInteractionActions.current.add(DatasourceAction.DISPLAY_VIEW_CHANGED);
     setCurrentViewMode(selectedMode);
   };
+  const handleOnNextPage = useCallback(() => {
+    userInteractionActions.current.add(DatasourceAction.NEXT_PAGE_SCROLLED);
+    onNextPage();
+  }, [onNextPage]);
+  const handleVisibleColumnKeysChange = useCallback((newVisibleColumnKeys = []) => {
+    const columnAction = getColumnAction(visibleColumnKeys || [], newVisibleColumnKeys);
+    userInteractionActions.current.add(columnAction);
+    setVisibleColumnKeys(newVisibleColumnKeys);
+  }, [visibleColumnKeys]);
   const issueLikeDataTableView = useMemo(() => jsx("div", {
     css: contentContainerStyles
   }, jsx(IssueLikeDataTableView, {
@@ -186,10 +264,10 @@ export const PlainJiraIssuesConfigModal = props => {
     items: responseItems,
     hasNextPage: hasNextPage,
     visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
-    onNextPage: onNextPage,
+    onNextPage: handleOnNextPage,
     onLoadDatasourceDetails: loadDatasourceDetails,
-    onVisibleColumnKeysChange: setVisibleColumnKeys
-  })), [columns, defaultVisibleColumnKeys, hasNextPage, loadDatasourceDetails, onNextPage, responseItems, status, visibleColumnKeys]);
+    onVisibleColumnKeysChange: handleVisibleColumnKeysChange
+  })), [columns, defaultVisibleColumnKeys, hasNextPage, handleVisibleColumnKeysChange, loadDatasourceDetails, handleOnNextPage, responseItems, status, visibleColumnKeys]);
   const renderCountModeContent = useCallback(() => {
     const url = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
     if (status === 'unauthorized') {
@@ -227,9 +305,10 @@ export const PlainJiraIssuesConfigModal = props => {
       // persist the empty state when making the initial /data request which contains the columns
       return jsx("div", {
         css: contentContainerStyles
-      }, jsx(EmptyState, {
-        testId: `jira-jql-datasource-modal--empty-state`
-      }));
+      }, !!jql ? jsx(EmptyState, {
+        testId: `jira-jql-datasource-modal--empty-state`,
+        isLoading: true
+      }) : jsx(InitialStateView, null));
     }
     const firstIssueUrl = retrieveUrlForSmartCardRender();
     if (responseItems.length === 1 && firstIssueUrl) {
@@ -240,7 +319,7 @@ export const PlainJiraIssuesConfigModal = props => {
       }));
     }
     return issueLikeDataTableView;
-  }, [status, columns.length, resolvedWithNoResults, jqlUrl, retrieveUrlForSmartCardRender, responseItems.length, issueLikeDataTableView, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.displayName]);
+  }, [status, jqlUrl, resolvedWithNoResults, columns.length, retrieveUrlForSmartCardRender, responseItems.length, issueLikeDataTableView, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.displayName, jql]);
   return jsx(ModalTransition, null, jsx(Modal, {
     testId: 'jira-jql-datasource-modal',
     onClose: onCancel,
@@ -283,7 +362,7 @@ export const PlainJiraIssuesConfigModal = props => {
     }
   }))), jsx(Button, {
     appearance: "default",
-    onClick: onCancel
+    onClick: onCancelClick
   }, jsx(FormattedMessage, modalMessages.cancelButtonText)), jsx(Button, {
     appearance: "primary",
     onClick: onInsertPressed,
@@ -295,8 +374,7 @@ const analyticsContextAttributes = {
   dataProvider: 'jira-issues'
 };
 const analyticsContextData = {
-  packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.0.17",
+  ...packageMetaData,
   source: 'datasourceConfigModal'
 };
 const contextData = {

package/dist/esm/analytics/constants.js

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

package/dist/esm/analytics/types.js

@@ -0,0 +1,21 @@
+export var DatasourceAction = /*#__PURE__*/function (DatasourceAction) {
+  DatasourceAction["COLUMN_ADDED"] = "column added";
+  DatasourceAction["COLUMN_REMOVED"] = "column removed";
+  DatasourceAction["COLUMN_REORDERED"] = "column reordered";
+  DatasourceAction["INSTANCE_UPDATED"] = "instance updated";
+  DatasourceAction["QUERY_UPDATED"] = "query updated";
+  DatasourceAction["DISPLAY_VIEW_CHANGED"] = "display view changed";
+  DatasourceAction["NEXT_PAGE_SCROLLED"] = "next page scrolled";
+  return DatasourceAction;
+}({});
+export var DatasourceDisplay = /*#__PURE__*/function (DatasourceDisplay) {
+  DatasourceDisplay["DATASOURCE_TABLE"] = "datasource_table";
+  DatasourceDisplay["DATASOURCE_INLINE"] = "datasource_inline";
+  DatasourceDisplay["INLINE"] = "inline";
+  return DatasourceDisplay;
+}({});
+export var DatasourceSearchMethod = /*#__PURE__*/function (DatasourceSearchMethod) {
+  DatasourceSearchMethod["DATASOURCE_BASIC_FILTER"] = "datasource_basic_filter";
+  DatasourceSearchMethod["DATASOURCE_SEARCH_QUERY"] = "datasource_search_query";
+  return DatasourceSearchMethod;
+}({});

package/dist/esm/analytics/utils.js

@@ -1,10 +1,11 @@
+import { DatasourceSearchMethod } from './types';
 export var mapSearchMethod = function mapSearchMethod(searchMethod) {
   switch (searchMethod) {
     case 'basic':
-      return 'datasource_basic_filter';
+      return DatasourceSearchMethod.DATASOURCE_BASIC_FILTER;
     case 'jql':
-      return 'datasource_search_query';
+      return DatasourceSearchMethod.DATASOURCE_SEARCH_QUERY;
     default:
-      return 'unknown';
+      return null;
   }
 };

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

@@ -222,7 +222,7 @@ var analyticsContextAttributes = {
 };
 var analyticsContextData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.0.17",
+  packageVersion: "1.0.19",
   source: 'datasourceConfigModal'
 };
 var contextData = _objectSpread(_objectSpread({}, analyticsContextData), {}, {

package/dist/esm/ui/datasource-table-view/datasourceTableView.js

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useRef } from 'react';
 import { jsx } from '@emotion/react';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import { useDatasourceAnalyticsEvents } from '../../analytics';
+import { packageMetaData } from '../../analytics/constants';
 import { useDatasourceTableState } from '../../hooks/useDatasourceTableState';
 import { AccessRequired } from '../common/error-state/access-required';
 import { LoadingError } from '../common/error-state/loading-error';
@@ -100,8 +101,4 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     }))
   );
 };
-var analyticsContextData = {
-  packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.0.17"
-};
-export var DatasourceTableView = withAnalyticsContext(analyticsContextData)(DatasourceTableViewWithoutAnalytics);
+export var DatasourceTableView = withAnalyticsContext(packageMetaData)(DatasourceTableViewWithoutAnalytics);

package/dist/esm/ui/jira-issues-modal/initial-state-view/assets/initial-state-svg.js

@@ -0,0 +1,233 @@
+import React from 'react';
+export var InitialStateSVG = function InitialStateSVG() {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "188",
+    height: "112",
+    viewBox: "0 0 188 112",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("rect", {
+    x: "25.5",
+    y: "1",
+    width: "127",
+    height: "97",
+    rx: "4",
+    fill: "white",
+    stroke: "#B7BDC8",
+    strokeWidth: "2"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "24.5",
+    y1: "10",
+    x2: "152.5",
+    y2: "10",
+    stroke: "#B7BDC8",
+    strokeWidth: "2"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "24.5",
+    y1: "32",
+    x2: "152.5",
+    y2: "32",
+    stroke: "#B7BDC8",
+    strokeWidth: "2"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "24.5",
+    y1: "54",
+    x2: "152.5",
+    y2: "54",
+    stroke: "#B7BDC8",
+    strokeWidth: "2"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "49.5",
+    y1: "1",
+    x2: "49.5",
+    y2: "99",
+    stroke: "#B7BDC8",
+    strokeWidth: "2"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "53.5",
+    y: "18",
+    width: "93",
+    height: "5",
+    rx: "2.5",
+    fill: "#C1C7D0",
+    fillOpacity: "0.4"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "53.5",
+    y: "41",
+    width: "93",
+    height: "5",
+    rx: "2.5",
+    fill: "#C1C7D0",
+    fillOpacity: "0.4"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "53.5",
+    y: "84",
+    width: "93",
+    height: "5",
+    rx: "2.5",
+    fill: "#C1C7D0",
+    fillOpacity: "0.4"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "53.5",
+    y: "62",
+    width: "93",
+    height: "5",
+    rx: "2.5",
+    fill: "#C1C7D0",
+    fillOpacity: "0.4"
+  }), /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#clip0_2088_74131)"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "12",
+    height: "12",
+    transform: "translate(31.5 15)",
+    fill: "white",
+    fillOpacity: "0.01"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M42 15C42.8284 15 43.5 15.6716 43.5 16.5V25.5C43.5 26.3284 42.8284 27 42 27H33C32.1716 27 31.5 26.3284 31.5 25.5V16.5C31.5 15.6716 32.1716 15 33 15H42ZM37.875 17.25C37.7625 17.25 37.665 17.3018 37.596 17.3798L34.6118 21.1088C34.6095 21.111 34.5847 21.1425 34.5847 21.1425C34.5352 21.2092 34.5 21.2865 34.5 21.375C34.5 21.582 34.668 21.75 34.875 21.75C34.896 21.75 34.9133 21.7537 34.9328 21.75H36.75V24.375C36.75 24.582 36.918 24.75 37.125 24.75C37.218 24.75 37.3005 24.7125 37.3658 24.657C37.3658 24.657 37.4123 24.6068 37.4295 24.582L40.38 20.8972C40.3943 20.8837 40.4033 20.868 40.4153 20.8522L40.4355 20.8275C40.4722 20.7667 40.5 20.7 40.5 20.625C40.5 20.418 40.332 20.25 40.125 20.25H38.25V17.625C38.25 17.418 38.082 17.25 37.875 17.25Z",
+    fill: "#6554C0",
+    fillOpacity: "0.5"
+  })), /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#clip1_2088_74131)"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "12",
+    height: "12",
+    transform: "translate(31.5 37)",
+    fill: "white",
+    fillOpacity: "0.01"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M33 37H42C42.3978 37 42.7794 37.158 43.0607 37.4393C43.342 37.7206 43.5 38.1022 43.5 38.5V47.5C43.5 47.8978 43.342 48.2794 43.0607 48.5607C42.7794 48.842 42.3978 49 42 49H33C32.6022 49 32.2206 48.842 31.9393 48.5607C31.658 48.2794 31.5 47.8978 31.5 47.5V38.5C31.5 38.1022 31.658 37.7206 31.9393 37.4393C32.2206 37.158 32.6022 37 33 37V37ZM37.5 45.25L35.3528 46.6165C35.0378 46.9015 34.5 46.6998 34.5 46.2963V40.1537C34.5 39.655 34.947 39.25 35.4998 39.25H39.5002C40.0522 39.25 40.5 39.6542 40.5 40.1545V46.297C40.5 46.6997 39.9608 46.9015 39.6458 46.6165L37.5 45.25ZM37.5 43.4717L39 44.4272V40.75H36V44.4265L37.5 43.4725V43.4717Z",
+    fill: "#36B37E",
+    fillOpacity: "0.5"
+  })), /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#clip2_2088_74131)"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "12",
+    height: "12",
+    transform: "translate(31.5 59)",
+    fill: "white",
+    fillOpacity: "0.01"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M33 59H42C42.3978 59 42.7794 59.158 43.0607 59.4393C43.342 59.7206 43.5 60.1022 43.5 60.5V69.5C43.5 69.8978 43.342 70.2794 43.0607 70.5607C42.7794 70.842 42.3978 71 42 71H33C32.6022 71 32.2206 70.842 31.9393 70.5607C31.658 70.2794 31.5 69.8978 31.5 69.5V60.5C31.5 60.1022 31.658 59.7206 31.9393 59.4393C32.2206 59.158 32.6022 59 33 59V59ZM37.5 68C38.2956 68 39.0587 67.6839 39.6213 67.1213C40.1839 66.5587 40.5 65.7956 40.5 65C40.5 64.2044 40.1839 63.4413 39.6213 62.8787C39.0587 62.3161 38.2956 62 37.5 62C36.7044 62 35.9413 62.3161 35.3787 62.8787C34.8161 63.4413 34.5 64.2044 34.5 65C34.5 65.7956 34.8161 66.5587 35.3787 67.1213C35.9413 67.6839 36.7044 68 37.5 68V68Z",
+    fill: "#FF5630",
+    fillOpacity: "0.5"
+  })), /*#__PURE__*/React.createElement("line", {
+    x1: "24.5",
+    y1: "76",
+    x2: "152.5",
+    y2: "76",
+    stroke: "#B7BDC8",
+    strokeWidth: "2"
+  }), /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#clip3_2088_74131)"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "12",
+    height: "12",
+    transform: "translate(31.5 80)",
+    fill: "white",
+    fillOpacity: "0.01"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M31.5 81.4955C31.5 80.6698 32.1712 80 32.9955 80H42.0045C42.8302 80 43.5 80.6712 43.5 81.4955V90.5045C43.4998 90.9011 43.3422 91.2813 43.0618 91.5618C42.7813 91.8422 42.4011 91.9998 42.0045 92H32.9955C32.5989 91.9998 32.2187 91.8422 31.9382 91.5618C31.6578 91.2813 31.5002 90.9011 31.5 90.5045V81.4955ZM35.0002 82.25C34.3102 82.25 33.75 82.8095 33.75 83.5002V88.4998C33.75 89.1898 34.3095 89.75 35.0002 89.75H39.9998C40.6898 89.75 41.25 89.1905 41.25 88.4998V83.5002C41.25 82.8102 40.6905 82.25 39.9998 82.25H35.0002ZM35.25 83.75V88.25H39.75V83.75H35.25Z",
+    fill: "#2684FF",
+    fillOpacity: "0.5"
+  })), /*#__PURE__*/React.createElement("g", {
+    clipPath: "url(#clip4_2088_74131)"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "72",
+    height: "72",
+    transform: "translate(100.5 40)",
+    fill: "white",
+    fillOpacity: "0.01"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M146.011 90.5863L142.602 87.2258L147.303 82.5068L150.713 85.8673C151.581 86.7191 152.678 87.3026 153.872 87.5476C155.062 87.8209 156.155 88.4144 157.03 89.2635L170.885 102.884C171.892 103.879 172.464 105.229 172.477 106.641C172.491 108.053 171.944 109.414 170.956 110.427V110.427C169.953 111.425 168.595 111.989 167.177 111.996C165.759 112.002 164.396 111.452 163.383 110.463L149.529 96.8425C148.659 95.9783 148.049 94.8884 147.77 93.6965V93.6965C147.512 92.507 146.899 91.4229 146.011 90.5863Z",
+    fill: "#CFD4DB"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M146.01 90.5855L144.97 89.5488C144.658 89.2428 144.411 88.8782 144.242 88.4762C144.073 88.0743 143.986 87.6429 143.986 87.2072C143.986 86.7714 144.073 86.3401 144.242 85.9381C144.411 85.5361 144.658 85.1715 144.97 84.8656V84.8656C145.274 84.553 145.639 84.3039 146.041 84.1327C146.443 83.9615 146.876 83.8716 147.313 83.8683C147.751 83.8649 148.184 83.9482 148.589 84.1133C148.994 84.2784 149.362 84.5219 149.672 84.8298L150.712 85.8665C151.58 86.7183 152.677 87.3019 153.871 87.5468C155.062 87.8201 156.154 88.4137 157.029 89.2628L170.884 102.883C171.891 103.878 172.463 105.228 172.477 106.64C172.49 108.053 171.943 109.413 170.956 110.427V110.427C169.952 111.425 168.594 111.988 167.176 111.995C165.758 112.002 164.395 111.451 163.382 110.462L149.528 96.8417C148.658 95.9776 148.048 94.8876 147.769 93.6957V93.6957C147.511 92.5062 146.898 91.4222 146.01 90.5855Z",
+    fill: "#8270DB"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: "0.2",
+    d: "M147.733 93.5885C147.457 92.4447 146.86 91.4029 146.01 90.5855L144.97 89.5488C144.658 89.2428 144.411 88.8782 144.242 88.4763C144.073 88.0743 143.986 87.6429 143.986 87.2072C143.986 86.7714 144.073 86.3401 144.242 85.9381C144.411 85.5361 144.658 85.1715 144.97 84.8656V84.8656C145.274 84.553 145.639 84.3039 146.041 84.1327C146.443 83.9615 146.876 83.8716 147.313 83.8683C147.751 83.8649 148.184 83.9482 148.589 84.1133C148.994 84.2784 149.362 84.5219 149.672 84.8298L150.712 85.8666C151.538 86.6912 152.585 87.262 153.727 87.511C152.887 88.672 151.963 89.7712 150.964 90.8C149.955 91.8046 148.875 92.7364 147.733 93.5885V93.5885Z",
+    fill: "#403294"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M156.312 67.5988C156.268 62.1045 154.591 56.7462 151.493 52.2002C148.394 47.6541 144.014 44.1239 138.903 42.0549C133.793 39.986 128.182 39.471 122.778 40.5751C117.374 41.6791 112.419 44.3526 108.539 48.2582C105.958 50.8489 103.918 53.9239 102.538 57.3051C101.158 60.6863 100.465 64.3066 100.499 67.9563V67.9563C100.514 71.6053 101.255 75.2152 102.678 78.5777C104.101 81.9402 106.178 84.9887 108.79 87.5472C112.72 91.4035 117.709 94.014 123.127 95.0492C128.545 96.0845 134.149 95.4981 139.233 93.3641C144.316 91.2301 148.652 87.6441 151.691 83.0586C154.731 78.4731 156.339 73.0936 156.312 67.5988V67.5988Z",
+    fill: "#66A3FF"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M114.679 51.6187C110.936 54.7775 108.408 59.1308 107.526 63.9372C106.643 68.7436 107.461 73.7062 109.839 77.9798C112.217 82.2535 116.008 85.5741 120.568 87.3763C125.128 89.1785 130.174 89.3508 134.847 87.864C139.52 86.3771 143.531 83.323 146.197 79.2217C148.864 75.1203 150.021 70.2252 149.471 65.3699C148.921 60.5145 146.699 55.999 143.182 52.5922C139.665 49.1855 135.072 47.098 130.184 46.6852C127.4 46.4462 124.597 46.7592 121.935 47.606C119.274 48.4528 116.808 49.8166 114.679 51.6187V51.6187Z",
+    fill: "white"
+  }), /*#__PURE__*/React.createElement("mask", {
+    id: "mask0_2088_74131",
+    maskUnits: "userSpaceOnUse",
+    x: "107",
+    y: "46",
+    width: "43",
+    height: "43"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M114.659 51.7779C110.927 54.9499 108.415 59.3119 107.549 64.1214C106.684 68.9309 107.518 73.8906 109.911 78.1559C112.304 82.4212 116.108 85.7285 120.674 87.5147C125.24 89.3009 130.286 89.4555 134.954 87.9523C139.622 86.4492 143.622 83.381 146.274 79.2703C148.926 75.1597 150.066 70.2606 149.499 65.4072C148.932 60.5537 146.694 56.0461 143.166 52.6516C139.637 49.2572 135.037 47.1858 130.147 46.7902C127.363 46.5609 124.56 46.8837 121.902 47.7398C119.243 48.5959 116.782 49.9684 114.659 51.7779V51.7779Z",
+    fill: "white"
+  })), /*#__PURE__*/React.createElement("g", {
+    mask: "url(#mask0_2088_74131)"
+  }, /*#__PURE__*/React.createElement("rect", {
+    x: "-9.11719",
+    y: "60.6504",
+    width: "152.638",
+    height: "10.2857",
+    rx: "5.14286",
+    transform: "rotate(-0.200699 -9.11719 60.6504)",
+    fill: "#C1C7D0",
+    fillOpacity: "0.4"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M68.3867 50.8848L151.463 50.5938",
+    stroke: "#B7BDC8",
+    strokeWidth: "4"
+  }), /*#__PURE__*/React.createElement("line", {
+    x1: "68.4852",
+    y1: "78.9502",
+    x2: "151.562",
+    y2: "78.6592",
+    stroke: "#B7BDC8",
+    strokeWidth: "4"
+  }))), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "clip0_2088_74131"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "12",
+    height: "12",
+    fill: "white",
+    transform: "translate(31.5 15)"
+  })), /*#__PURE__*/React.createElement("clipPath", {
+    id: "clip1_2088_74131"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "12",
+    height: "12",
+    fill: "white",
+    transform: "translate(31.5 37)"
+  })), /*#__PURE__*/React.createElement("clipPath", {
+    id: "clip2_2088_74131"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "12",
+    height: "12",
+    fill: "white",
+    transform: "translate(31.5 59)"
+  })), /*#__PURE__*/React.createElement("clipPath", {
+    id: "clip3_2088_74131"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "12",
+    height: "12",
+    fill: "white",
+    transform: "translate(31.5 80)"
+  })), /*#__PURE__*/React.createElement("clipPath", {
+    id: "clip4_2088_74131"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "72",
+    height: "72",
+    fill: "white",
+    transform: "translate(100.5 40)"
+  }))));
+};

package/dist/esm/ui/jira-issues-modal/initial-state-view/index.js

@@ -0,0 +1,40 @@
+/** @jsx jsx */
+
+import { css, jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
+import { InitialStateSVG } from './assets/initial-state-svg';
+import { initialStateViewMessages } from './messages';
+var initialStateViewContainerStyles = css({
+  display: 'flex',
+  justifyContent: 'center',
+  height: '100%'
+});
+var svgAndTextsWrapperStyles = css({
+  textAlign: 'center',
+  alignSelf: 'center',
+  paddingTop: "var(--ds-space-600, 48px)",
+  paddingBottom: "var(--ds-space-600, 48px)"
+});
+var searchTitleStyles = css({
+  fontWeight: "var(--ds-font-weight-semibold, 600)",
+  fontSize: "var(--ds-font-size-200, 16px)",
+  lineHeight: "var(--ds-font-lineHeight-300, 24px)",
+  paddingTop: "var(--ds-space-200, 16px)",
+  paddingBottom: "var(--ds-space-100, 8px)"
+});
+var jqlSupportDocumentLink = 'https://support.atlassian.com/jira-service-management-cloud/docs/use-advanced-search-with-jira-query-language-jql/';
+export var InitialStateView = function InitialStateView() {
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return jsx("div", {
+    css: initialStateViewContainerStyles,
+    "data-testid": "jlol-datasource-modal--initial-state-view"
+  }, jsx("div", {
+    css: svgAndTextsWrapperStyles
+  }, jsx(InitialStateSVG, null), jsx("div", {
+    css: searchTitleStyles
+  }, formatMessage(initialStateViewMessages.searchTitle)), jsx("div", null, formatMessage(initialStateViewMessages.searchDescription)), jsx("a", {
+    href: jqlSupportDocumentLink,
+    target: "_blank"
+  }, formatMessage(initialStateViewMessages.learnMoreLink))));
+};

package/dist/esm/ui/jira-issues-modal/initial-state-view/messages.js

@@ -0,0 +1,18 @@
+import { defineMessages } from 'react-intl-next';
+export var initialStateViewMessages = defineMessages({
+  searchTitle: {
+    id: 'linkDataSource.modal-initial-state.searchTitle',
+    description: 'The initial modal search state title that gives the user some idea about how to get information',
+    defaultMessage: 'Search for Jira issues'
+  },
+  searchDescription: {
+    id: 'linkDataSource.modal-initial-state.searchDescription',
+    description: 'The initial modal search state helper message displayed under the search title',
+    defaultMessage: 'Start typing or use JQL to search.'
+  },
+  learnMoreLink: {
+    id: 'linkDataSource.modal-initial-state.learnMoreLink',
+    description: 'The link that displays under the search description to help people know more about JQL',
+    defaultMessage: 'Learn more about searching with JQL.'
+  }
+});