@atlaskit/link-datasource 2.5.5 → 2.5.7

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

@@ -0,0 +1,426 @@
+/** @jsx jsx */
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+// 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 Button from '@atlaskit/button/standard-button';
+import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
+import { ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@atlaskit/modal-dialog';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, xcss } from '@atlaskit/primitives';
+import { EVENT_CHANNEL, useDatasourceAnalyticsEvents } from '../../../analytics';
+import { DatasourceAction, DatasourceDisplay, DatasourceSearchMethod } from '../../../analytics/types';
+import { buildDatasourceAdf } from '../../../common/utils/adf';
+import { fetchMessagesForLocale } from '../../../common/utils/locale/fetch-messages-for-locale';
+import { useUserInteractions } from '../../../contexts/user-interactions';
+import { useDatasourceTableState } from '../../../hooks/useDatasourceTableState';
+import i18nEN from '../../../i18n/en';
+import { useAvailableSites } from '../../../services/useAvailableSites';
+import { AccessRequired } from '../../common/error-state/access-required';
+import { ModalLoadingError } from '../../common/error-state/modal-loading-error';
+import { NoInstancesView } from '../../common/error-state/no-instances';
+import { NoResults } from '../../common/error-state/no-results';
+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 { DatasourceModal } from '../../common/modal/datasource-modal';
+import { DisplayViewDropDown } from '../../common/modal/display-view-dropdown/display-view-drop-down';
+import TableSearchCount from '../../common/modal/search-count';
+import { SiteSelector } from '../../common/modal/site-selector';
+import { EmptyState, IssueLikeDataTableView } from '../../issue-like-table';
+import { useColumnResize } from '../../issue-like-table/use-column-resize';
+import { useColumnWrapping } from '../../issue-like-table/use-column-wrapping';
+import { getColumnAction } from '../../issue-like-table/utils';
+import ConfluenceSearchContainer from '../confluence-search-container';
+import { ConfluenceSearchInitialStateSVG } from './confluence-search-initial-state-svg';
+import { confluenceSearchModalMessages } from './messages';
+const inputContainerStyles = xcss({
+  alignItems: 'baseline',
+  display: 'flex',
+  minHeight: '72px'
+});
+export const PlainConfluenceSearchConfigModal = props => {
+  const {
+    datasourceId,
+    columnCustomSizes: initialColumnCustomSizes,
+    wrappedColumnKeys: initialWrappedColumnKeys,
+    onCancel,
+    onInsert,
+    viewMode = 'table',
+    parameters: initialParameters,
+    url: urlBeingEdited,
+    visibleColumnKeys: initialVisibleColumnKeys,
+    disableDisplayDropdown = false,
+    overrideParameters
+  } = props;
+  const [currentViewMode, setCurrentViewMode] = useState(viewMode);
+  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 [visibleColumnKeys, setVisibleColumnKeys] = useState(initialVisibleColumnKeys);
+  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();
+  const visibleColumnCount = useRef((visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0);
+  const parameters = useMemo(() => ({
+    ...initialParameters,
+    cloudId: cloudId || '',
+    searchString,
+    lastModified: lastModified === null || lastModified === void 0 ? void 0 : lastModified.value,
+    lastModifiedFrom: lastModified === null || lastModified === void 0 ? void 0 : lastModified.from,
+    lastModifiedTo: lastModified === null || lastModified === void 0 ? void 0 : lastModified.to,
+    contributorAccountIds: (contributorAccountIds === null || contributorAccountIds === void 0 ? void 0 : contributorAccountIds.length) > 0 ? contributorAccountIds : undefined
+  }), [initialParameters, cloudId, searchString, lastModified, contributorAccountIds]);
+  const isParametersSet = useMemo(() => !!cloudId && Object.values(parameters !== null && parameters !== void 0 ? parameters : {}).filter(v => v !== undefined).length > 1, [cloudId, parameters]);
+  const parametersToSend = useMemo(() => {
+    if (!isParametersSet) {
+      return undefined;
+    }
+    return {
+      ...parameters,
+      ...(overrideParameters !== null && overrideParameters !== void 0 ? overrideParameters : {})
+    };
+  }, [parameters, overrideParameters, isParametersSet]);
+  const {
+    reset,
+    status,
+    onNextPage,
+    responseItems,
+    hasNextPage,
+    columns,
+    defaultVisibleColumnKeys,
+    loadDatasourceDetails,
+    totalCount,
+    extensionKey = null,
+    destinationObjectTypes
+  } = useDatasourceTableState({
+    datasourceId,
+    parameters: parametersToSend,
+    fieldKeys: visibleColumnKeys
+  });
+  const {
+    fireEvent
+  } = useDatasourceAnalyticsEvents();
+  const hasNoConfluenceSites = availableSites && availableSites.length === 0;
+  useEffect(() => {
+    if (availableSites) {
+      fireEvent('ui.modal.ready.datasource', {
+        instancesCount: availableSites.length,
+        schemasCount: null
+      });
+    }
+  }, [fireEvent, availableSites]);
+
+  // TODO: further refactoring in EDM-9573
+  // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6828283
+  useEffect(() => {
+    if (selectedConfluenceSite && (!cloudId || cloudId !== selectedConfluenceSite.cloudId)) {
+      setCloudId(selectedConfluenceSite.cloudId);
+    }
+  }, [cloudId, selectedConfluenceSite]);
+
+  // TODO: further refactoring in EDM-9573
+  // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6829171
+  const onSiteSelection = useCallback(site => {
+    userInteractions.add(DatasourceAction.INSTANCE_UPDATED);
+    setSearchString(undefined);
+    setLastModified(undefined);
+    setContributorAccountIds([]);
+    setCloudId(site.cloudId);
+    reset({
+      shouldForceRequest: true
+    });
+  }, [reset, userInteractions]);
+  useEffect(() => {
+    const newVisibleColumnKeys = !initialVisibleColumnKeys || (initialVisibleColumnKeys || []).length === 0 ? defaultVisibleColumnKeys : initialVisibleColumnKeys;
+    visibleColumnCount.current = newVisibleColumnKeys.length;
+    setVisibleColumnKeys(newVisibleColumnKeys);
+  }, [initialVisibleColumnKeys, defaultVisibleColumnKeys]);
+  const siteSelectorLabel = availableSites && availableSites.length > 1 ? confluenceSearchModalMessages.insertIssuesTitleManySites : confluenceSearchModalMessages.insertIssuesTitle;
+  const {
+    columnCustomSizes,
+    onColumnResize
+  } = useColumnResize(initialColumnCustomSizes);
+  const {
+    wrappedColumnKeys,
+    onWrappedColumnChange
+  } = useColumnWrapping(initialWrappedColumnKeys);
+
+  // TODO: common functionality of all modals refactor in EDM-9573
+  const handleVisibleColumnKeysChange = useCallback((newVisibleColumnKeys = []) => {
+    const columnAction = getColumnAction(visibleColumnKeys || [], newVisibleColumnKeys);
+    userInteractions.add(columnAction);
+    visibleColumnCount.current = newVisibleColumnKeys.length;
+    setVisibleColumnKeys(newVisibleColumnKeys);
+  }, [visibleColumnKeys, userInteractions]);
+
+  // TODO: further refactoring in EDM-9573
+  // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6798258
+  const confluenceSearchTable = useMemo(() => jsx(ContentContainer, {
+    withTableBorder: true
+  }, jsx(IssueLikeDataTableView, {
+    testId: "confluence-search-datasource-table",
+    status: status,
+    columns: columns,
+    items: responseItems,
+    hasNextPage: hasNextPage,
+    visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
+    onNextPage: onNextPage,
+    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, onNextPage, loadDatasourceDetails, handleVisibleColumnKeysChange, extensionKey, columnCustomSizes, onColumnResize, wrappedColumnKeys, onWrappedColumnChange]);
+  const resolvedWithNoResults = status === 'resolved' && !responseItems.length;
+  const hasConfluenceSearchParams = selectedConfluenceSite && searchString;
+  const selectedConfluenceSiteUrl = selectedConfluenceSite === null || selectedConfluenceSite === void 0 ? void 0 : selectedConfluenceSite.url;
+  const confluenceSearchUrl = useMemo(() => {
+    if (!selectedConfluenceSiteUrl || searchString === undefined) {
+      return undefined;
+    }
+    const params = new URLSearchParams();
+    // we are appending "text" without checking searchString as we need the url to have "text" when a user does an empty search
+    params.append('text', searchString);
+    if (contributorAccountIds.length > 0) {
+      params.append('contributors', contributorAccountIds.join(','));
+    }
+    if (lastModified !== null && lastModified !== void 0 && lastModified.value) {
+      params.append('lastModified', lastModified.value);
+    }
+    if (lastModified !== null && lastModified !== void 0 && lastModified.from) {
+      params.append('from', lastModified === null || lastModified === void 0 ? void 0 : lastModified.from);
+    }
+    if (lastModified !== null && lastModified !== void 0 && lastModified.to) {
+      params.append('to', lastModified === null || lastModified === void 0 ? void 0 : lastModified.to);
+    }
+    return `${selectedConfluenceSiteUrl}/wiki/search?${params.toString()}`;
+  }, [contributorAccountIds, lastModified, searchString, selectedConfluenceSiteUrl]);
+  const analyticsPayload = useMemo(() => ({
+    extensionKey,
+    destinationObjectTypes,
+    searchCount: searchCount.current,
+    actions: userInteractions.get()
+  }), [destinationObjectTypes, extensionKey, userInteractions]);
+  const isDataReady = (visibleColumnKeys || []).length > 0;
+  const fireInlineViewedEvent = useCallback(() => {
+    fireEvent('ui.link.viewed.count', {
+      ...analyticsPayload,
+      searchMethod: DatasourceSearchMethod.DATASOURCE_SEARCH_QUERY,
+      totalItemCount: totalCount || 0
+    });
+  }, [analyticsPayload, fireEvent, totalCount]);
+  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';
+    const isTableViewMode = currentViewMode === 'table';
+    const isInlineViewMode = currentViewMode === 'inline';
+    if (!isResolved) {
+      return;
+    }
+    if (isTableViewMode) {
+      fireTableViewedEvent();
+    } else if (isInlineViewMode) {
+      fireInlineViewedEvent();
+    }
+  }, [currentViewMode, fireInlineViewedEvent, fireTableViewedEvent, status]);
+  const renderTableModalContent = useCallback(() => {
+    if (status === 'rejected') {
+      return jsx(ModalLoadingError, null);
+    } else if (status === 'unauthorized') {
+      return jsx(AccessRequired, {
+        url: selectedConfluenceSiteUrl || urlBeingEdited
+      });
+    } else if (resolvedWithNoResults || status === 'forbidden') {
+      return jsx(NoResults, null);
+    } else if (status === 'empty' || !columns.length) {
+      // persist the empty state when making the initial /data request which contains the columns
+      if (hasConfluenceSearchParams !== undefined) {
+        return jsx(EmptyState, {
+          testId: `confluence-search-datasource-modal--empty-state`
+        });
+      }
+      return jsx(ContentContainer, null, jsx(InitialStateView, {
+        icon: jsx(ConfluenceSearchInitialStateSVG, null),
+        title: confluenceSearchModalMessages.initialViewSearchTitle,
+        description: confluenceSearchModalMessages.initialViewSearchDescription
+      }));
+    }
+    return confluenceSearchTable;
+  }, [columns.length, selectedConfluenceSiteUrl, confluenceSearchTable, resolvedWithNoResults, status, urlBeingEdited, hasConfluenceSearchParams]);
+  const renderInlineLinkModalContent = useCallback(() => {
+    if (status === 'unauthorized') {
+      return jsx(AccessRequired, {
+        url: selectedConfluenceSiteUrl || urlBeingEdited
+      });
+    } else if (status === 'empty' || !selectedConfluenceSiteUrl) {
+      return jsx(SmartCardPlaceholder, {
+        placeholderText: confluenceSearchModalMessages.resultsCountSmartCardPlaceholderText
+      });
+    } else {
+      return confluenceSearchUrl && jsx(SmartLink, {
+        url: confluenceSearchUrl
+      });
+    }
+  }, [confluenceSearchUrl, selectedConfluenceSiteUrl, status, urlBeingEdited]);
+  const shouldShowResultsCount = !!totalCount && currentViewMode === 'table';
+  const onInsertPressed = useCallback((e, analyticsEvent) => {
+    var _insertButtonClickedE;
+    if (!isParametersSet || !cloudId || !confluenceSearchUrl) {
+      return;
+    }
+    const insertButtonClickedEvent = analyticsEvent.update({
+      actionSubjectId: 'insert',
+      attributes: {
+        ...analyticsPayload,
+        totalItemCount: totalCount || 0,
+        displayedColumnCount: visibleColumnCount.current,
+        display: currentViewMode === 'inline' ? DatasourceDisplay.DATASOURCE_INLINE : DatasourceDisplay.DATASOURCE_TABLE,
+        searchCount: searchCount.current,
+        searchMethod: DatasourceSearchMethod.DATASOURCE_SEARCH_QUERY,
+        actions: userInteractions.get()
+      },
+      eventType: 'ui'
+    });
+    const consumerEvent = (_insertButtonClickedE = insertButtonClickedEvent.clone()) !== null && _insertButtonClickedE !== void 0 ? _insertButtonClickedE : undefined;
+    insertButtonClickedEvent.fire(EVENT_CHANNEL);
+    if (currentViewMode === 'inline') {
+      onInsert({
+        type: 'inlineCard',
+        attrs: {
+          url: confluenceSearchUrl
+        }
+      }, consumerEvent);
+    } else {
+      onInsert(buildDatasourceAdf({
+        id: datasourceId,
+        parameters: {
+          ...parametersToSend,
+          cloudId
+        },
+        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
+                } : {})
+              };
+            })
+          }
+        }]
+      }, confluenceSearchUrl), consumerEvent);
+    }
+  }, [isParametersSet, cloudId, analyticsPayload, totalCount, currentViewMode, onInsert, confluenceSearchUrl, datasourceId, parametersToSend, visibleColumnKeys, columnCustomSizes, wrappedColumnKeys, userInteractions]);
+  const handleViewModeChange = selectedMode => {
+    userInteractions.add(DatasourceAction.DISPLAY_VIEW_CHANGED);
+    setCurrentViewMode(selectedMode);
+  };
+  const onSearch = useCallback((newSearchString, filters) => {
+    searchCount.current++;
+    userInteractions.add(DatasourceAction.QUERY_UPDATED);
+    if (filters) {
+      const {
+        editedOrCreatedBy,
+        lastModified: lastModifiedList
+      } = filters;
+      if (lastModifiedList) {
+        const updatedDateRangeOption = lastModifiedList.find(range => range.value);
+        if ((updatedDateRangeOption === null || updatedDateRangeOption === void 0 ? void 0 : updatedDateRangeOption.optionType) === 'dateRange') {
+          setLastModified({
+            value: updatedDateRangeOption.value,
+            from: updatedDateRangeOption.from,
+            to: updatedDateRangeOption.to
+          });
+        }
+      }
+      if (editedOrCreatedBy) {
+        const accountIds = editedOrCreatedBy.map(user => user.value);
+        setContributorAccountIds(accountIds);
+      }
+    }
+    setSearchString(newSearchString);
+    reset({
+      shouldForceRequest: true
+    });
+  }, [reset, userInteractions]);
+  const isInsertDisabled = !isParametersSet || status === 'rejected' || status === 'unauthorized' || status === 'loading';
+  const getCancelButtonAnalyticsPayload = useCallback(() => {
+    return {
+      extensionKey,
+      destinationObjectTypes,
+      searchCount: searchCount.current,
+      actions: userInteractions.get()
+    };
+  }, [destinationObjectTypes, extensionKey, userInteractions]);
+  return jsx(IntlMessagesProvider, {
+    defaultMessages: i18nEN,
+    loaderFn: fetchMessagesForLocale
+  }, jsx(DatasourceModal, {
+    testId: "confluence-search-datasource-modal",
+    onClose: onCancel
+  }, jsx(ModalHeader, null, jsx(ModalTitle, null, jsx(SiteSelector, {
+    availableSites: availableSites,
+    onSiteSelection: onSiteSelection,
+    selectedSite: selectedConfluenceSite,
+    testId: "confluence-search-datasource-modal--site-selector",
+    label: siteSelectorLabel
+  })), !hasNoConfluenceSites && !disableDisplayDropdown && jsx(DisplayViewDropDown, {
+    onViewModeChange: handleViewModeChange,
+    viewMode: currentViewMode
+  })), jsx(ModalBody, null, !hasNoConfluenceSites ? jsx(Fragment, null, jsx(Box, {
+    xcss: inputContainerStyles
+  }, jsx(ConfluenceSearchContainer, {
+    isSearching: status === 'loading',
+    onSearch: onSearch,
+    parameters: parameters
+  })), currentViewMode === 'inline' ? renderInlineLinkModalContent() : renderTableModalContent()) : jsx(NoInstancesView, {
+    title: confluenceSearchModalMessages.noAccessToConfluenceSitesTitle,
+    description: confluenceSearchModalMessages.noAccessToConfluenceSitesDescription,
+    testId: 'no-confluence-instances-content'
+  })), jsx(ModalFooter, null, shouldShowResultsCount && confluenceSearchUrl && jsx(TableSearchCount, {
+    searchCount: totalCount,
+    url: confluenceSearchUrl,
+    prefixTextType: "result",
+    testId: "confluence-search-datasource-modal-total-results-count"
+  }), jsx(CancelButton, {
+    onCancel: onCancel,
+    getAnalyticsPayload: getCancelButtonAnalyticsPayload,
+    testId: "confluence-search-modal--cancel-button"
+  }), !hasNoConfluenceSites && jsx(Button, {
+    appearance: "primary",
+    onClick: onInsertPressed,
+    isDisabled: isInsertDisabled,
+    testId: "confluence-search-datasource-modal--insert-button"
+  }, jsx(FormattedMessage, confluenceSearchModalMessages.insertResultsButtonText)))));
+};

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

@@ -5,10 +5,10 @@ import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'rea
 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 Button from '@atlaskit/button';
 import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
 import { ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@atlaskit/modal-dialog';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import { EVENT_CHANNEL, useDatasourceAnalyticsEvents } from '../../../analytics';
 import { componentMetadata } from '../../../analytics/constants';
@@ -28,17 +28,19 @@ 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 { useDatasourceContext } from '../../common/modal/datasource-context/DatasourceContext';
+import { DatasourceContextProvider } from '../../common/modal/datasource-context/DatasourceContextProvider';
 import { DatasourceModal } from '../../common/modal/datasource-modal';
 import { DisplayViewDropDown } from '../../common/modal/display-view-dropdown/display-view-drop-down';
 import TableSearchCount from '../../common/modal/search-count';
 import { SiteSelector } from '../../common/modal/site-selector';
-import { EmptyState, IssueLikeDataTableView } from '../../issue-like-table';
-import { useColumnResize } from '../../issue-like-table/use-column-resize';
-import { useColumnWrapping } from '../../issue-like-table/use-column-wrapping';
+import DatasourcesTableUsingContext from '../../datasources-table-in-modal-preview';
+import { EmptyState } from '../../issue-like-table';
 import { getColumnAction } from '../../issue-like-table/utils';
 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 inputContainerStyles = xcss({
   alignItems: 'baseline',
   display: 'flex',
@@ -47,8 +49,6 @@ const inputContainerStyles = xcss({
 export const PlainConfluenceSearchConfigModal = props => {
   const {
     datasourceId,
-    columnCustomSizes: initialColumnCustomSizes,
-    wrappedColumnKeys: initialWrappedColumnKeys,
     onCancel,
     onInsert,
     viewMode = 'table',
@@ -152,14 +152,6 @@ export const PlainConfluenceSearchConfigModal = props => {
     setVisibleColumnKeys(newVisibleColumnKeys);
   }, [initialVisibleColumnKeys, defaultVisibleColumnKeys]);
   const siteSelectorLabel = availableSites && availableSites.length > 1 ? confluenceSearchModalMessages.insertIssuesTitleManySites : confluenceSearchModalMessages.insertIssuesTitle;
-  const {
-    columnCustomSizes,
-    onColumnResize
-  } = useColumnResize(initialColumnCustomSizes);
-  const {
-    wrappedColumnKeys,
-    onWrappedColumnChange
-  } = useColumnWrapping(initialWrappedColumnKeys);
 
   // TODO: common functionality of all modals refactor in EDM-9573
   const handleVisibleColumnKeysChange = useCallback((newVisibleColumnKeys = []) => {
@@ -168,27 +160,22 @@ export const PlainConfluenceSearchConfigModal = props => {
     visibleColumnCount.current = newVisibleColumnKeys.length;
     setVisibleColumnKeys(newVisibleColumnKeys);
   }, [visibleColumnKeys, userInteractions]);
-
-  // TODO: further refactoring in EDM-9573
-  // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6798258
-  const confluenceSearchTable = useMemo(() => jsx(ContentContainer, {
-    withTableBorder: true
-  }, jsx(IssueLikeDataTableView, {
-    testId: "confluence-search-datasource-table",
-    status: status,
-    columns: columns,
-    items: responseItems,
-    hasNextPage: hasNextPage,
-    visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
-    onNextPage: onNextPage,
-    onLoadDatasourceDetails: loadDatasourceDetails,
-    onVisibleColumnKeysChange: handleVisibleColumnKeysChange,
-    extensionKey: extensionKey,
-    columnCustomSizes: columnCustomSizes,
-    onColumnResize: onColumnResize,
-    wrappedColumnKeys: wrappedColumnKeys,
-    onWrappedColumnChange: getBooleanFF('platform.linking-platform.datasource-word_wrap') ? onWrappedColumnChange : undefined
-  })), [status, columns, responseItems, hasNextPage, visibleColumnKeys, defaultVisibleColumnKeys, onNextPage, loadDatasourceDetails, handleVisibleColumnKeysChange, extensionKey, columnCustomSizes, onColumnResize, wrappedColumnKeys, onWrappedColumnChange]);
+  const confluenceSearchTable = useMemo(() => {
+    return jsx(ContentContainer, {
+      withTableBorder: true
+    }, jsx(DatasourcesTableUsingContext, {
+      testId: "confluence-search-datasource-table",
+      status: status,
+      columns: columns,
+      items: responseItems,
+      hasNextPage: hasNextPage,
+      visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
+      onNextPage: onNextPage,
+      onLoadDatasourceDetails: loadDatasourceDetails,
+      onVisibleColumnKeysChange: handleVisibleColumnKeysChange,
+      extensionKey: extensionKey
+    }));
+  }, [status, columns, responseItems, hasNextPage, visibleColumnKeys, defaultVisibleColumnKeys, onNextPage, loadDatasourceDetails, handleVisibleColumnKeysChange, extensionKey]);
   const resolvedWithNoResults = status === 'resolved' && !responseItems.length;
   const hasConfluenceSearchParams = selectedConfluenceSite && searchString;
   const selectedConfluenceSiteUrl = selectedConfluenceSite === null || selectedConfluenceSite === void 0 ? void 0 : selectedConfluenceSite.url;
@@ -290,6 +277,10 @@ export const PlainConfluenceSearchConfigModal = props => {
     }
   }, [confluenceSearchUrl, selectedConfluenceSiteUrl, status, urlBeingEdited]);
   const shouldShowResultsCount = !!totalCount && currentViewMode === 'table';
+  const {
+    columnCustomSizes,
+    wrappedColumnKeys
+  } = useDatasourceContext();
   const onInsertPressed = useCallback((e, analyticsEvent) => {
     var _insertButtonClickedE;
     if (!isParametersSet || !cloudId || !confluenceSearchUrl) {
@@ -440,4 +431,9 @@ const contextData = {
     ...analyticsContextAttributes
   }
 };
-export const ConfluenceSearchConfigModal = withAnalyticsContext(contextData)(props => jsx(DatasourceExperienceIdProvider, null, jsx(UserInteractionsProvider, null, jsx(PlainConfluenceSearchConfigModal, props))));
+export const ConfluenceSearchConfigModal = withAnalyticsContext(contextData)(props => jsx(DatasourceExperienceIdProvider, null, jsx(UserInteractionsProvider, null, fg('platform.linking-platform.datasources.use-refactored-config-modal') ? jsx(DatasourceContextProvider, {
+  initialColumnCustomSizes: props.columnCustomSizes,
+  initialWrappedColumnKeys: props.wrappedColumnKeys
+}, jsx(PlainConfluenceSearchConfigModal, props)) :
+// TODO on cleanup 'use-refactored-config-modal' ff, delete `ModalOld.tsx` as well
+jsx(PlainConfluenceSearchConfigModalOld, props))));

package/dist/es2019/ui/datasources-table-in-modal-preview/index.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { useDatasourceContext } from '../common/modal/datasource-context/DatasourceContext';
+import { IssueLikeDataTableView } from '../issue-like-table';
+const Table = props => {
+  const {
+    columnCustomSizes,
+    onColumnResize,
+    wrappedColumnKeys,
+    onWrappedColumnChange
+  } = useDatasourceContext();
+  return /*#__PURE__*/React.createElement(IssueLikeDataTableView, _extends({}, props, {
+    columnCustomSizes: columnCustomSizes,
+    onColumnResize: onColumnResize,
+    wrappedColumnKeys: wrappedColumnKeys,
+    onWrappedColumnChange: fg('platform.linking-platform.datasource-word_wrap') ? onWrappedColumnChange : undefined
+  }));
+};
+export default Table;

package/dist/es2019/ui/table-footer/index.js

@@ -8,10 +8,11 @@ import styled from '@emotion/styled';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button';
 import RefreshIcon from '@atlaskit/icon/glyph/refresh';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Flex } from '@atlaskit/primitives';
 import { N0, N40, N90 } from '@atlaskit/theme/colors';
 import { ASSETS_LIST_OF_LINKS_DATASOURCE_ID } from '../assets-modal';
-import TableSearchCount from '../common/modal/search-count';
+import TableSearchCount, { AssetsItemCount } from '../common/modal/search-count';
 import { footerMessages } from './messages';
 import { PoweredByJSMAssets } from './powered-by-jsm-assets';
 import { SyncInfo } from './sync-info';
@@ -66,7 +67,11 @@ export const TableFooter = ({
   // ensure correct positioning since 'justify-content: space-between' is used).
   return onRefresh || showItemCount ? jsx(FooterWrapper, {
     "data-testid": "table-footer"
-  }, jsx(TopBorderWrapper, null, showItemCount && jsx(Flex, null, jsx(TableSearchCount, {
+  }, jsx(TopBorderWrapper, null, showItemCount && jsx(Flex, null, datasourceId === ASSETS_LIST_OF_LINKS_DATASOURCE_ID && fg('platform.linking-platform.datasource.limit-total-results_8wqcd') ? jsx(AssetsItemCount, {
+    searchCount: itemCount,
+    url: url,
+    testId: "item-count"
+  }) : jsx(TableSearchCount, {
     searchCount: itemCount,
     url: url,
     prefixTextType: "item",

package/dist/esm/ui/common/modal/datasource-context/DatasourceContext.js

@@ -0,0 +1,9 @@
+import React, { useContext } from 'react';
+export var DatasourceContext = /*#__PURE__*/React.createContext(null);
+export var useDatasourceContext = function useDatasourceContext() {
+  var value = useContext(DatasourceContext);
+  if (!value) {
+    throw new Error('useDatasourceStore must be used within DatasourceContextProvider');
+  }
+  return value;
+};

package/dist/esm/ui/common/modal/datasource-context/DatasourceContextProvider.js

@@ -0,0 +1,26 @@
+import React, { useMemo } from 'react';
+import { useColumnResize } from '../../../issue-like-table/use-column-resize';
+import { useColumnWrapping } from '../../../issue-like-table/use-column-wrapping';
+import { DatasourceContext } from './DatasourceContext';
+export var DatasourceContextProvider = function DatasourceContextProvider(_ref) {
+  var children = _ref.children,
+    initialColumnCustomSizes = _ref.initialColumnCustomSizes,
+    initialWrappedColumnKeys = _ref.initialWrappedColumnKeys;
+  var _useColumnResize = useColumnResize(initialColumnCustomSizes),
+    columnCustomSizes = _useColumnResize.columnCustomSizes,
+    onColumnResize = _useColumnResize.onColumnResize;
+  var _useColumnWrapping = useColumnWrapping(initialWrappedColumnKeys),
+    wrappedColumnKeys = _useColumnWrapping.wrappedColumnKeys,
+    onWrappedColumnChange = _useColumnWrapping.onWrappedColumnChange;
+  var contextValue = useMemo(function () {
+    return {
+      columnCustomSizes: columnCustomSizes,
+      onColumnResize: onColumnResize,
+      wrappedColumnKeys: wrappedColumnKeys,
+      onWrappedColumnChange: onWrappedColumnChange
+    };
+  }, [columnCustomSizes, onColumnResize, onWrappedColumnChange, wrappedColumnKeys]);
+  return /*#__PURE__*/React.createElement(DatasourceContext.Provider, {
+    value: contextValue
+  }, children);
+};