@atlaskit/link-datasource 2.9.0 → 2.9.1

package/dist/es2019/ui/confluence-search-modal/modal/index.js

@@ -8,7 +8,7 @@ import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'rea
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
-import { withAnalyticsContext } from '@atlaskit/analytics-next';
+import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
 import { ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@atlaskit/modal-dialog';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -30,12 +30,13 @@ import { InitialStateView } from '../../common/initial-state-view';
 import { CancelButton } from '../../common/modal/cancel-button';
 import { ContentContainer } from '../../common/modal/content-container';
 import { SmartCardPlaceholder, SmartLink } from '../../common/modal/count-view-smart-link';
-import { DatasourceContextProvider, useDatasourceContext } from '../../common/modal/datasource-context';
+import { useDatasourceContext } from '../../common/modal/datasource-context';
 import { DatasourceModal } from '../../common/modal/datasource-modal';
+import { createDatasourceModal } from '../../common/modal/datasource-modal/createDatasourceModal';
 import DatasourcesTableInModalPreview from '../../common/modal/datasources-table-in-modal-preview';
 import { InsertButton } from '../../common/modal/insert-button';
 import { DatasourceViewModeDropDown } from '../../common/modal/mode-switcher';
-import { DatasourceViewModeProvider, useViewModeContext } from '../../common/modal/mode-switcher/useViewModeContext';
+import { useViewModeContext } from '../../common/modal/mode-switcher/useViewModeContext';
 import TableSearchCount from '../../common/modal/search-count';
 import { SiteSelector } from '../../common/modal/site-selector';
 import { EmptyState } from '../../issue-like-table';
@@ -43,7 +44,6 @@ import ConfluenceSearchContainer from '../confluence-search-container';
 import { ConfluenceSearchInitialStateSVG } from './confluence-search-initial-state-svg';
 import { confluenceSearchModalMessages } from './messages';
 import { PlainConfluenceSearchConfigModal as PlainConfluenceSearchConfigModalOld } from './ModalOld';
-const DEFAULT_VIEW_MODE = 'table';
 const inputContainerStyles = xcss({
   alignItems: 'baseline',
   display: 'flex',
@@ -75,7 +75,6 @@ const useUpdateParametersOnFormUpdate = (cloudId, searchString, lastModified, co
 export const PlainConfluenceSearchConfigModal = props => {
   const {
     onCancel,
-    parameters: initialParameters,
     url: urlBeingEdited,
     disableDisplayDropdown = false,
     overrideParameters
@@ -83,23 +82,6 @@ export const PlainConfluenceSearchConfigModal = props => {
   const {
     currentViewMode
   } = useViewModeContext();
-  const [cloudId, setCloudId] = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.cloudId);
-  const {
-    availableSites,
-    selectedSite: selectedConfluenceSite
-  } = useAvailableSites('confluence', cloudId);
-  const [searchString, setSearchString] = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.searchString);
-  const [contributorAccountIds, setContributorAccountIds] = useState((initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.contributorAccountIds) || []);
-  const [lastModified, setLastModified] = useState(initialParameters !== null && initialParameters !== void 0 && initialParameters.lastModified ? {
-    value: initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.lastModified,
-    from: initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.lastModifiedFrom,
-    to: initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.lastModifiedTo
-  } : undefined);
-
-  // analytics related parameters
-  const searchCount = useRef(0);
-  const userInteractions = useUserInteractions();
-  useUpdateParametersOnFormUpdate(cloudId, searchString, lastModified, contributorAccountIds, overrideParameters);
   const {
     visibleColumnKeys,
     tableState: {
@@ -114,6 +96,23 @@ export const PlainConfluenceSearchConfigModal = props => {
     visibleColumnCount,
     parameters
   } = useDatasourceContext();
+  const [cloudId, setCloudId] = useState(parameters === null || parameters === void 0 ? void 0 : parameters.cloudId);
+  const {
+    availableSites,
+    selectedSite: selectedConfluenceSite
+  } = useAvailableSites('confluence', cloudId);
+  const [searchString, setSearchString] = useState(parameters === null || parameters === void 0 ? void 0 : parameters.searchString);
+  const [contributorAccountIds, setContributorAccountIds] = useState((parameters === null || parameters === void 0 ? void 0 : parameters.contributorAccountIds) || []);
+  const [lastModified, setLastModified] = useState(parameters !== null && parameters !== void 0 && parameters.lastModified ? {
+    value: parameters === null || parameters === void 0 ? void 0 : parameters.lastModified,
+    from: parameters === null || parameters === void 0 ? void 0 : parameters.lastModifiedFrom,
+    to: parameters === null || parameters === void 0 ? void 0 : parameters.lastModifiedTo
+  } : undefined);
+
+  // analytics related parameters
+  const searchCount = useRef(0);
+  const userInteractions = useUserInteractions();
+  useUpdateParametersOnFormUpdate(cloudId, searchString, lastModified, contributorAccountIds, overrideParameters);
   const {
     fireEvent
   } = useDatasourceAnalyticsEvents();
@@ -306,7 +305,7 @@ export const PlainConfluenceSearchConfigModal = props => {
   }, jsx(ConfluenceSearchContainer, {
     isSearching: status === 'loading',
     onSearch: onSearch,
-    parameters: isValidParameters(parameters) ? parameters : {
+    parameters: parameters && isValidParameters(parameters) ? parameters : {
       cloudId: ''
     }
   })), currentViewMode === 'inline' ? renderInlineLinkModalContent() : renderTableModalContent()) : jsx(NoInstancesView, {
@@ -341,19 +340,16 @@ const contextData = {
     ...analyticsContextAttributes
   }
 };
-export const ConfluenceSearchConfigModal = withAnalyticsContext(contextData)(props => {
-  var _props$viewMode;
-  return jsx(StoreContainer, null, jsx(DatasourceExperienceIdProvider, null, jsx(UserInteractionsProvider, null, fg('platform-datasources-use-refactored-config-modal') ? jsx(DatasourceContextProvider, {
-    datasourceId: props.datasourceId,
-    initialVisibleColumnKeys: props.visibleColumnKeys,
-    initialColumnCustomSizes: props.columnCustomSizes,
-    initialWrappedColumnKeys: props.wrappedColumnKeys,
-    initialParameters: props.parameters,
-    isValidParameters: isValidParameters,
-    onInsert: props.onInsert
-  }, jsx(DatasourceViewModeProvider, {
-    viewMode: (_props$viewMode = props.viewMode) !== null && _props$viewMode !== void 0 ? _props$viewMode : DEFAULT_VIEW_MODE
-  }, jsx(PlainConfluenceSearchConfigModal, props))) :
-  // TODO on cleanup 'use-refactored-config-modal' ff, delete `ModalOld.tsx` as well
-  jsx(PlainConfluenceSearchConfigModalOld, props))));
-});
+const ConnectedConfluenceSearchConfigModal = createDatasourceModal({
+  isValidParameters,
+  dataProvider: 'confluence-search',
+  component: PlainConfluenceSearchConfigModal
+});
+export const ConfluenceSearchConfigModal = props => {
+  if (fg('platform-datasources-use-refactored-config-modal')) {
+    return jsx(StoreContainer, null, jsx(ConnectedConfluenceSearchConfigModal, props));
+  }
+  return jsx(StoreContainer, null, jsx(AnalyticsContext, {
+    data: contextData
+  }, jsx(DatasourceExperienceIdProvider, null, jsx(UserInteractionsProvider, null, jsx(PlainConfluenceSearchConfigModalOld, props)))));
+};

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

@@ -10,23 +10,20 @@ import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'rea
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
-import { withAnalyticsContext } from '@atlaskit/analytics-next';
-import Button from '@atlaskit/button/standard-button';
+import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
 import { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { EVENT_CHANNEL, useDatasourceAnalyticsEvents } from '../../../analytics';
-import { componentMetadata } from '../../../analytics/constants';
+import { useDatasourceAnalyticsEvents } from '../../../analytics';
+import { componentMetadata, EVENT_CHANNEL } from '../../../analytics/constants';
 import { DatasourceAction, DatasourceDisplay } from '../../../analytics/types';
 import { startUfoExperience } from '../../../analytics/ufoExperiences';
 import { useColumnPickerRenderedFailedUfoExperience } from '../../../analytics/ufoExperiences/hooks/useColumnPickerRenderedFailedUfoExperience';
 import { useDataRenderedUfoExperience } from '../../../analytics/ufoExperiences/hooks/useDataRenderedUfoExperience';
 import { mapSearchMethod } from '../../../analytics/utils';
-import { buildDatasourceAdf } from '../../../common/utils/adf';
 import { fetchMessagesForLocale } from '../../../common/utils/locale/fetch-messages-for-locale';
 import { DatasourceExperienceIdProvider, useDatasourceExperienceId } from '../../../contexts/datasource-experience-id';
 import { UserInteractionsProvider, useUserInteractions } from '../../../contexts/user-interactions';
-import { useDatasourceTableState } from '../../../hooks/useDatasourceTableState';
 import i18nEN from '../../../i18n/en';
 import { useAvailableSites } from '../../../services/useAvailableSites';
 import { StoreContainer } from '../../../state';
@@ -40,22 +37,22 @@ import { initialStateViewMessages } from '../../common/initial-state-view/messag
 import { CancelButton } from '../../common/modal/cancel-button';
 import { ContentContainer } from '../../common/modal/content-container';
 import { SmartCardPlaceholder, SmartLink } from '../../common/modal/count-view-smart-link';
+import { useDatasourceContext } from '../../common/modal/datasource-context';
 import { DatasourceModal } from '../../common/modal/datasource-modal';
-import { useColumnResize } from '../../common/modal/datasources-table-in-modal-preview/use-column-resize';
-import { useColumnWrapping } from '../../common/modal/datasources-table-in-modal-preview/use-column-wrapping';
+import { createDatasourceModal } from '../../common/modal/datasource-modal/createDatasourceModal';
+import DatasourcesTableInModalPreview from '../../common/modal/datasources-table-in-modal-preview';
+import { InsertButton } from '../../common/modal/insert-button';
 import { DatasourceViewModeDropDown } from '../../common/modal/mode-switcher';
-import { DatasourceViewModeProvider, useViewModeContext } from '../../common/modal/mode-switcher/useViewModeContext';
+import { useViewModeContext } from '../../common/modal/mode-switcher/useViewModeContext';
 import TableSearchCount from '../../common/modal/search-count';
 import { SiteSelector } from '../../common/modal/site-selector';
-import { EmptyState, IssueLikeDataTableView } from '../../issue-like-table';
-import { getColumnAction } from '../../issue-like-table/utils';
+import { EmptyState } from '../../issue-like-table';
 import { availableBasicFilterTypes } from '../basic-filters/ui';
 import { isQueryTooComplex } from '../basic-filters/utils/isQueryTooComplex';
 import { JiraSearchContainer } from '../jira-search-container';
 import { JiraInitialStateSVG } from './jira-issues-initial-state-svg';
 import { modalMessages } from './messages';
 import { PlainJiraIssuesConfigModalOld } from './ModalOld';
-const DEFAULT_VIEW_MODE = 'table';
 const getDisplayValue = (currentViewMode, itemCount) => {
   if (currentViewMode === 'table') {
     return DatasourceDisplay.DATASOURCE_TABLE;
@@ -63,70 +60,52 @@ const getDisplayValue = (currentViewMode, itemCount) => {
   return itemCount === 1 ? DatasourceDisplay.INLINE : DatasourceDisplay.DATASOURCE_INLINE;
 };
 const jqlSupportDocumentLink = 'https://support.atlassian.com/jira-service-management-cloud/docs/use-advanced-search-with-jira-query-language-jql/';
+const isValidParameters = parameters => typeof (parameters === null || parameters === void 0 ? void 0 : parameters.jql) === 'string' && parameters.jql.length > 0 && typeof (parameters === null || parameters === void 0 ? void 0 : parameters.cloudId) === 'string' && parameters.cloudId.length > 0;
 const PlainJiraIssuesConfigModal = props => {
   const {
-    datasourceId,
-    columnCustomSizes: initialColumnCustomSizes,
-    wrappedColumnKeys: initialWrappedColumnKeys,
     onCancel,
-    onInsert,
-    parameters: initialParameters,
-    url: urlBeingEdited,
-    visibleColumnKeys: initialVisibleColumnKeys
+    url: urlBeingEdited
   } = props;
+  const {
+    visibleColumnCount,
+    visibleColumnKeys,
+    parameters,
+    setParameters,
+    tableState
+  } = useDatasourceContext();
+  const {
+    reset,
+    status,
+    responseItems,
+    columns,
+    totalCount,
+    extensionKey = null,
+    destinationObjectTypes
+  } = tableState;
+  const {
+    cloudId,
+    jql
+  } = parameters !== null && parameters !== void 0 ? parameters : {};
+  const [initialJql] = useState(jql);
   const {
     currentViewMode
   } = useViewModeContext();
-  const [cloudId, setCloudId] = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.cloudId);
   const {
     availableSites,
     selectedSite: selectedJiraSite
   } = useAvailableSites('jira', cloudId);
-  const [jql, setJql] = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.jql);
-  const [searchBarJql, setSearchBarJql] = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.jql);
-  const [visibleColumnKeys, setVisibleColumnKeys] = useState(initialVisibleColumnKeys);
+  const [searchBarJql, setSearchBarJql] = useState(jql);
 
   // analytics related parameters
   const searchCount = useRef(0);
   const userInteractions = useUserInteractions();
   const initialSearchMethod =
   // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-  fg('platform.linking-platform.datasource.show-jlol-basic-filters') && !isQueryTooComplex((initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.jql) || '') ? 'basic' : 'jql';
+  fg('platform.linking-platform.datasource.show-jlol-basic-filters') && !isQueryTooComplex(initialJql || '') ? 'basic' : 'jql';
   const [currentSearchMethod, setCurrentSearchMethod] = useState(initialSearchMethod);
   const searchMethodSearchedWith = useRef(null);
-  const visibleColumnCount = useRef((visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0);
   const basicFilterSelectionsSearchedWith = useRef({});
   const isSearchedWithComplexQuery = useRef(false);
-  const parameters = useMemo(() => !!cloudId ? {
-    cloudId,
-    jql: jql || ''
-  } : undefined, [cloudId, jql]);
-  const isParametersSet = !!(jql && cloudId);
-  const {
-    columnCustomSizes,
-    onColumnResize
-  } = useColumnResize(initialColumnCustomSizes);
-  const {
-    wrappedColumnKeys,
-    onWrappedColumnChange
-  } = useColumnWrapping(initialWrappedColumnKeys);
-  const {
-    reset,
-    status,
-    onNextPage,
-    responseItems,
-    hasNextPage,
-    columns,
-    defaultVisibleColumnKeys,
-    loadDatasourceDetails,
-    totalCount,
-    extensionKey = null,
-    destinationObjectTypes
-  } = useDatasourceTableState({
-    datasourceId,
-    parameters: isParametersSet ? parameters : undefined,
-    fieldKeys: visibleColumnKeys
-  });
   const {
     fireEvent
   } = useDatasourceAnalyticsEvents();
@@ -137,7 +116,6 @@ const PlainJiraIssuesConfigModal = props => {
   }), [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';
   const shouldShowIssueCount = !!totalCount && totalCount !== 1 && currentViewMode === 'table';
   const isDataReady = (visibleColumnKeys || []).length > 0;
   const hasNoJiraSites = availableSites && availableSites.length === 0;
@@ -164,16 +142,19 @@ const PlainJiraIssuesConfigModal = props => {
     canBeLink: currentViewMode === 'inline',
     extensionKey
   });
-  useEffect(() => {
-    const newVisibleColumnKeys = !initialVisibleColumnKeys || (initialVisibleColumnKeys || []).length === 0 ? defaultVisibleColumnKeys : initialVisibleColumnKeys;
-    visibleColumnCount.current = newVisibleColumnKeys.length;
-    setVisibleColumnKeys(newVisibleColumnKeys);
-  }, [initialVisibleColumnKeys, defaultVisibleColumnKeys]);
+
+  /**
+   * If the selected Jira site changes, update the cloudId in the parameters
+   * This is mainly useful for setting the initial cloudId after the site selection loads
+   */
   useEffect(() => {
     if (selectedJiraSite && (!cloudId || cloudId !== selectedJiraSite.cloudId)) {
-      setCloudId(selectedJiraSite.cloudId);
+      setParameters(() => ({
+        jql: '',
+        cloudId: selectedJiraSite.cloudId
+      }));
     }
-  }, [cloudId, selectedJiraSite]);
+  }, [cloudId, selectedJiraSite, setParameters]);
   const fireSingleItemViewedEvent = useCallback(() => {
     fireEvent('ui.link.viewed.singleItem', {
       ...analyticsPayload,
@@ -196,7 +177,7 @@ const PlainJiraIssuesConfigModal = props => {
         displayedColumnCount: visibleColumnCount.current
       });
     }
-  }, [analyticsPayload, fireEvent, totalCount, isDataReady]);
+  }, [isDataReady, fireEvent, analyticsPayload, totalCount, visibleColumnCount]);
   const fireIssueViewAnalytics = useCallback(() => {
     if (!totalCount) {
       return;
@@ -233,145 +214,30 @@ const PlainJiraIssuesConfigModal = props => {
     if (jql !== newParameters.jql) {
       userInteractions.add(DatasourceAction.QUERY_UPDATED);
     }
-    setJql(newParameters.jql);
+    setParameters(state => state && newParameters.jql ? {
+      cloudId: state.cloudId,
+      jql: newParameters.jql
+    } : undefined);
     reset({
       shouldForceRequest: true
     });
-  }, [jql, reset, userInteractions]);
+  }, [jql, reset, userInteractions, setParameters]);
   const onSiteSelection = useCallback(site => {
     userInteractions.add(DatasourceAction.INSTANCE_UPDATED);
-    setJql('');
-    setCloudId(site.cloudId);
+    setParameters({
+      jql: '',
+      cloudId: site.cloudId
+    });
     reset({
       shouldForceRequest: true
     });
-  }, [reset, userInteractions]);
+  }, [reset, userInteractions, setParameters]);
   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((e, analyticsEvent) => {
-    var _insertButtonClickedE;
-    if (!isParametersSet || !jql || !selectedJiraSite) {
-      return;
-    }
-
-    // During insertion, we want the JQL of the datasource to be whatever is in the search bar,
-    // even if the user didn't previously click search
-    const upToDateJql = searchBarJql !== null && searchBarJql !== void 0 ? searchBarJql : jql;
-    const upToDateJqlUrl = selectedJiraSite && jql && `${selectedJiraSite.url}/issues/?jql=${encodeURIComponent(upToDateJql)}`;
-    const filterSelectionCount = availableBasicFilterTypes.reduce((current, filter) => {
-      var _basicFilterSelection;
-      return {
-        ...current,
-        [`${filter}BasicFilterSelectionCount`]: ((_basicFilterSelection = basicFilterSelectionsSearchedWith.current[filter]) === null || _basicFilterSelection === void 0 ? void 0 : _basicFilterSelection.length) || 0
-      };
-    }, {});
-    const insertButtonClickedEvent = analyticsEvent.update({
-      actionSubjectId: 'insert',
-      attributes: {
-        ...analyticsPayload,
-        totalItemCount: totalCount || 0,
-        displayedColumnCount: visibleColumnCount.current,
-        display: getDisplayValue(currentViewMode, totalCount || 0),
-        searchCount: searchCount.current,
-        searchMethod: mapSearchMethod(searchMethodSearchedWith.current),
-        actions: userInteractions.get(),
-        isQueryComplex: isSearchedWithComplexQuery.current,
-        ...(searchMethodSearchedWith.current === 'basic' ? {
-          ...filterSelectionCount
-        } : {})
-      },
-      eventType: 'ui'
-    });
-
-    // additional event for tracking in confluence against JIM
-    const macroInsertedEvent = analyticsEvent.clone();
-    macroInsertedEvent === null || macroInsertedEvent === void 0 ? void 0 : macroInsertedEvent.update({
-      eventType: 'track',
-      action: 'inserted',
-      actionSubject: 'macro',
-      actionSubjectId: 'jlol',
-      attributes: {
-        ...analyticsPayload,
-        totalItemCount: totalCount || 0,
-        displayedColumnCount: visibleColumnCount.current,
-        display: getDisplayValue(currentViewMode, totalCount || 0),
-        searchCount: searchCount.current,
-        searchMethod: mapSearchMethod(searchMethodSearchedWith.current),
-        actions: userInteractions.get()
-      }
-    });
-    const consumerEvent = (_insertButtonClickedE = insertButtonClickedEvent.clone()) !== null && _insertButtonClickedE !== void 0 ? _insertButtonClickedE : undefined;
-    insertButtonClickedEvent.fire(EVENT_CHANNEL);
-    const firstIssueUrl = retrieveUrlForSmartCardRender();
-    if (currentViewMode === 'inline') {
-      macroInsertedEvent === null || macroInsertedEvent === void 0 ? void 0 : macroInsertedEvent.fire(EVENT_CHANNEL);
-      const url = responseItems.length === 1 ? firstIssueUrl : upToDateJqlUrl;
-      onInsert({
-        type: 'inlineCard',
-        attrs: {
-          url
-        }
-      }, consumerEvent);
-    } else {
-      onInsert(buildDatasourceAdf({
-        id: datasourceId,
-        parameters: {
-          cloudId,
-          jql: upToDateJql // TODO support non JQL type
-        },
-        views: [{
-          type: 'table',
-          properties: {
-            columns: (visibleColumnKeys || []).map(key => {
-              const width = columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key];
-              const isWrapped = wrappedColumnKeys === null || wrappedColumnKeys === void 0 ? void 0 : wrappedColumnKeys.includes(key);
-              return {
-                key,
-                ...(width ? {
-                  width
-                } : {}),
-                ...(isWrapped ? {
-                  isWrapped
-                } : {})
-              };
-            })
-          }
-        }]
-      }, upToDateJqlUrl), consumerEvent);
-    }
-  }, [isParametersSet, jql, selectedJiraSite, searchBarJql, analyticsPayload, totalCount, currentViewMode, retrieveUrlForSmartCardRender, responseItems.length, onInsert, datasourceId, cloudId, visibleColumnKeys, columnCustomSizes, wrappedColumnKeys, userInteractions]);
-  const handleOnNextPage = useCallback((onNextPageProps = {}) => {
-    userInteractions.add(DatasourceAction.NEXT_PAGE_SCROLLED);
-    onNextPage(onNextPageProps);
-  }, [onNextPage, userInteractions]);
-  const handleVisibleColumnKeysChange = useCallback((newVisibleColumnKeys = []) => {
-    const columnAction = getColumnAction(visibleColumnKeys || [], newVisibleColumnKeys);
-    userInteractions.add(columnAction);
-    visibleColumnCount.current = newVisibleColumnKeys.length;
-    setVisibleColumnKeys(newVisibleColumnKeys);
-  }, [visibleColumnKeys, userInteractions]);
-  const issueLikeDataTableView = useMemo(() => jsx(ContentContainer, {
-    withTableBorder: true
-  }, jsx(IssueLikeDataTableView, {
-    testId: "jira-datasource-table",
-    status: status,
-    columns: columns,
-    items: responseItems,
-    hasNextPage: hasNextPage,
-    visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
-    onNextPage: handleOnNextPage,
-    onLoadDatasourceDetails: loadDatasourceDetails,
-    onVisibleColumnKeysChange: handleVisibleColumnKeysChange,
-    extensionKey: extensionKey,
-    columnCustomSizes: columnCustomSizes,
-    onColumnResize: onColumnResize,
-    wrappedColumnKeys: wrappedColumnKeys,
-    onWrappedColumnChange: fg('platform.linking-platform.datasource-word_wrap') ? onWrappedColumnChange : undefined
-  })), [status, columns, responseItems, hasNextPage, visibleColumnKeys, defaultVisibleColumnKeys, handleOnNextPage, loadDatasourceDetails, handleVisibleColumnKeysChange, extensionKey, columnCustomSizes, onColumnResize, wrappedColumnKeys, onWrappedColumnChange]);
   const renderCountModeContent = useCallback(() => {
     const selectedJiraSiteUrl = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
     if (status === 'unauthorized') {
@@ -429,8 +295,12 @@ const PlainJiraIssuesConfigModal = props => {
         } : undefined
       }));
     }
-    return issueLikeDataTableView;
-  }, [columns.length, currentSearchMethod, issueLikeDataTableView, jql, jqlUrl, resolvedWithNoResults, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url, status, urlBeingEdited]);
+    return jsx(ContentContainer, {
+      withTableBorder: true
+    }, jsx(DatasourcesTableInModalPreview, {
+      testId: "jira-datasource-table"
+    }));
+  }, [columns.length, currentSearchMethod, jql, jqlUrl, resolvedWithNoResults, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url, status, urlBeingEdited]);
   const siteSelectorLabel = availableSites && availableSites.length > 1 ? modalMessages.insertIssuesTitleManySites : modalMessages.insertIssuesTitle;
   const getCancelButtonAnalyticsPayload = useCallback(() => {
     return {
@@ -439,6 +309,41 @@ const PlainJiraIssuesConfigModal = props => {
       actions: userInteractions.get()
     };
   }, [analyticsPayload, userInteractions]);
+  const filterSelectionCount = availableBasicFilterTypes.reduce((current, filter) => {
+    var _basicFilterSelection;
+    return {
+      ...current,
+      [`${filter}BasicFilterSelectionCount`]: ((_basicFilterSelection = basicFilterSelectionsSearchedWith.current[filter]) === null || _basicFilterSelection === void 0 ? void 0 : _basicFilterSelection.length) || 0
+    };
+  }, {});
+  const getInsertButtonAnalyticsPayload = useCallback(() => ({
+    ...analyticsPayload,
+    display: getDisplayValue(currentViewMode, totalCount || 0),
+    isQueryComplex: isSearchedWithComplexQuery.current,
+    searchMethod: mapSearchMethod(searchMethodSearchedWith.current),
+    searchCount: searchCount.current,
+    actions: userInteractions.get(),
+    ...(searchMethodSearchedWith.current === 'basic' ? {
+      ...filterSelectionCount
+    } : {})
+  }), [analyticsPayload, currentViewMode, filterSelectionCount, totalCount, userInteractions]);
+  const urlToInsert = useMemo(() => {
+    const jql = parameters === null || parameters === void 0 ? void 0 : parameters.jql;
+    if (!jql || !(selectedJiraSite !== null && selectedJiraSite !== void 0 && selectedJiraSite.url)) {
+      return;
+    }
+    // During insertion, we want the JQL of the datasource to be whatever is in the search bar,
+    // even if the user didn't previously click search
+    const upToDateJql = searchBarJql !== null && searchBarJql !== void 0 ? searchBarJql : jql;
+    const upToDateJqlUrl = `${selectedJiraSite.url}/issues/?jql=${encodeURIComponent(upToDateJql)}`;
+    return currentViewMode === 'inline' && responseItems.length === 1 ? retrieveUrlForSmartCardRender() : upToDateJqlUrl;
+  }, [currentViewMode, parameters === null || parameters === void 0 ? void 0 : parameters.jql, responseItems, retrieveUrlForSmartCardRender, searchBarJql, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url]);
+  const updateParametersBeforeInsert = parameters => ({
+    cloudId: parameters.cloudId,
+    // searchBarJql will not be null at this point, since this function is only called when user press insert button
+    //
+    jql: searchBarJql || ''
+  });
   return jsx(IntlMessagesProvider, {
     defaultMessages: i18nEN,
     loaderFn: fetchMessagesForLocale
@@ -473,11 +378,11 @@ const PlainJiraIssuesConfigModal = props => {
     onCancel: onCancel,
     getAnalyticsPayload: getCancelButtonAnalyticsPayload,
     testId: "jira-datasource-modal--cancel-button"
-  }), !hasNoJiraSites && jsx(Button, {
-    appearance: "primary",
-    onClick: onInsertPressed,
-    isDisabled: isInsertDisabled,
-    testId: "jira-datasource-modal--insert-button"
+  }), !hasNoJiraSites && jsx(InsertButton, {
+    testId: "jira-datasource-modal--insert-button",
+    url: urlToInsert,
+    overwriteParameters: updateParametersBeforeInsert,
+    getAnalyticsPayload: getInsertButtonAnalyticsPayload
   }, jsx(FormattedMessage, modalMessages.insertIssuesButtonText))))));
 };
 const analyticsContextAttributes = {
@@ -493,9 +398,35 @@ const contextData = {
     ...analyticsContextAttributes
   }
 };
-export const JiraIssuesConfigModal = withAnalyticsContext(contextData)(props => {
-  var _props$viewMode;
-  return jsx(StoreContainer, null, jsx(DatasourceExperienceIdProvider, null, jsx(UserInteractionsProvider, null, fg('platform-datasources-use-refactored-config-modal') ? jsx(DatasourceViewModeProvider, {
-    viewMode: (_props$viewMode = props.viewMode) !== null && _props$viewMode !== void 0 ? _props$viewMode : DEFAULT_VIEW_MODE
-  }, jsx(PlainJiraIssuesConfigModal, props)) : jsx(PlainJiraIssuesConfigModalOld, props))));
-});
+const ConnectedJiraIssueConfigModal = createDatasourceModal({
+  isValidParameters,
+  dataProvider: 'jira-issues',
+  component: PlainJiraIssuesConfigModal
+});
+const JiraIssuesConfigModalWithExtraAnalyticsOnInsert = props => {
+  const onInsert = props.onInsert;
+  const onInsertWithMacroAnalytics = useCallback((adf, analyticsEvent) => {
+    if (analyticsEvent && adf.type === 'inlineCard') {
+      const macroInsertedEvent = analyticsEvent.clone();
+      macroInsertedEvent === null || macroInsertedEvent === void 0 ? void 0 : macroInsertedEvent.update({
+        eventType: 'track',
+        action: 'inserted',
+        actionSubject: 'macro',
+        actionSubjectId: 'jlol'
+      });
+      macroInsertedEvent === null || macroInsertedEvent === void 0 ? void 0 : macroInsertedEvent.fire(EVENT_CHANNEL);
+    }
+    onInsert(adf, analyticsEvent);
+  }, [onInsert]);
+  return jsx(StoreContainer, null, jsx(ConnectedJiraIssueConfigModal, _extends({}, props, {
+    onInsert: onInsertWithMacroAnalytics
+  })));
+};
+export const JiraIssuesConfigModal = props => {
+  if (fg('platform-datasources-use-refactored-config-modal')) {
+    return jsx(JiraIssuesConfigModalWithExtraAnalyticsOnInsert, props);
+  }
+  return jsx(StoreContainer, null, jsx(AnalyticsContext, {
+    data: contextData
+  }, jsx(DatasourceExperienceIdProvider, null, jsx(UserInteractionsProvider, null, jsx(PlainJiraIssuesConfigModalOld, props)))));
+};

package/dist/esm/ui/common/modal/datasource-modal/createDatasourceModal.js

@@ -0,0 +1,48 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+import React from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { DatasourceExperienceIdProvider } from '../../../../contexts/datasource-experience-id';
+import { UserInteractionsProvider } from '../../../../contexts/user-interactions';
+import { DatasourceContextProvider } from '../datasource-context';
+import { DatasourceViewModeProvider } from '../mode-switcher/useViewModeContext';
+var DEFAULT_VIEW_MODE = 'table';
+export var createDatasourceModal = function createDatasourceModal(_ref) {
+  var isValidParameters = _ref.isValidParameters,
+    dataProvider = _ref.dataProvider,
+    ModalContent = _ref.component;
+  return function (props) {
+    var datasourceId = props.datasourceId,
+      visibleColumnKeys = props.visibleColumnKeys,
+      columnCustomSizes = props.columnCustomSizes,
+      wrappedColumnKeys = props.wrappedColumnKeys,
+      parameters = props.parameters,
+      onInsert = props.onInsert,
+      viewMode = props.viewMode;
+    return jsx(AnalyticsContext, {
+      data: {
+        source: 'datasourceConfigModal',
+        component: 'datasourceConfigModal',
+        attributes: {
+          dataProvider: dataProvider
+        }
+      }
+    }, jsx(DatasourceExperienceIdProvider, null, jsx(UserInteractionsProvider, null, jsx(DatasourceContextProvider, {
+      datasourceId: datasourceId,
+      initialVisibleColumnKeys: visibleColumnKeys,
+      initialColumnCustomSizes: columnCustomSizes,
+      initialWrappedColumnKeys: wrappedColumnKeys,
+      initialParameters: parameters,
+      isValidParameters: isValidParameters,
+      onInsert: onInsert
+    }, jsx(DatasourceViewModeProvider, {
+      viewMode: viewMode !== null && viewMode !== void 0 ? viewMode : DEFAULT_VIEW_MODE
+    }, jsx(ModalContent, props))))));
+  };
+};