@atlaskit/link-datasource 2.5.9 → 2.5.11

package/dist/es2019/i18n/zh_TW.js

@@ -63,7 +63,6 @@ export default {
   'linkDataSource.confluence-search.configmodal.insertConfluenceTitleManySites': '插入 Confluence 列表的來源：',
   'linkDataSource.confluence-search.configmodal.insertResultsButtonText': '插入結果',
   'linkDataSource.confluence-search.configmodal.placeholder.issues': '### 項結果',
-  'linkDataSource.confluence-search.configmodal.resultsCountText': '{totalCount, plural, other {個結果}}',
   'linkDataSource.confluence-search.configmodal.searchLabel': '輸入關鍵字以尋找頁面、附件等等',
   'linkDataSource.confluence-search.no.confluence.sites.access.description': '若要要求存取權，請連絡您的管理員。',
   'linkDataSource.confluence-search.no.confluence.sites.access.title': '您無法存取任何 Confluence 網站',
@@ -80,7 +79,6 @@ export default {
   'linkDataSource.jira-issues.configmodal.insertIssuesButtonText': '插入議題',
   'linkDataSource.jira-issues.configmodal.insertIssuesTitle': '插入 Jira 議題',
   'linkDataSource.jira-issues.configmodal.insertIssuesTitleManySites': '從中插入 Jira 議題：',
-  'linkDataSource.jira-issues.configmodal.issue': '{totalCount, plural, other {個議題}}',
   'linkDataSource.jira-issues.configmodal.viewModeInlineLinkDescription': '將搜尋結果數目顯示為內嵌智慧連結',
   'linkDataSource.jira-issues.configmodal.viewModeInlineLinkLabel': '內嵌連結',
   'linkDataSource.jira-issues.configmodal.viewModeListDescription': '將搜尋結果顯示為列表',

package/dist/es2019/ui/common/modal/datasource-context/index.js

@@ -0,0 +1,62 @@
+import React, { useContext, useMemo, useState } from 'react';
+import { useDatasourceTableState } from '../../../../hooks/useDatasourceTableState';
+import { useColumnResize } from '../datasources-table-in-modal-preview/use-column-resize';
+import { useColumnVisibility } from '../datasources-table-in-modal-preview/use-column-visibility';
+import { useColumnWrapping } from '../datasources-table-in-modal-preview/use-column-wrapping';
+const DatasourceContext = /*#__PURE__*/React.createContext(null);
+export const DatasourceContextProvider = ({
+  children,
+  datasourceId,
+  isValidParameters,
+  initialParameters,
+  initialVisibleColumnKeys,
+  initialColumnCustomSizes,
+  initialWrappedColumnKeys
+}) => {
+  const [parameters, setParameters] = useState(initialParameters);
+  const [visibleColumnKeys, setVisibleColumnKeys] = useState(initialVisibleColumnKeys);
+  const {
+    columnCustomSizes,
+    onColumnResize
+  } = useColumnResize(initialColumnCustomSizes);
+  const {
+    wrappedColumnKeys,
+    onWrappedColumnChange
+  } = useColumnWrapping(initialWrappedColumnKeys);
+  const tableState = useDatasourceTableState({
+    datasourceId,
+    parameters: isValidParameters(parameters) ? parameters : undefined,
+    fieldKeys: visibleColumnKeys
+  });
+  const {
+    onVisibleColumnKeysChange,
+    visibleColumnCount
+  } = useColumnVisibility({
+    visibleColumnKeys,
+    setVisibleColumnKeys,
+    defaultVisibleColumnKeys: tableState.defaultVisibleColumnKeys,
+    initialVisibleColumnKeys
+  });
+  const contextValue = useMemo(() => ({
+    tableState,
+    visibleColumnCount,
+    visibleColumnKeys,
+    onVisibleColumnKeysChange,
+    columnCustomSizes,
+    onColumnResize,
+    wrappedColumnKeys,
+    onWrappedColumnChange,
+    parameters,
+    setParameters
+  }), [tableState, visibleColumnCount, visibleColumnKeys, onVisibleColumnKeysChange, columnCustomSizes, onColumnResize, wrappedColumnKeys, onWrappedColumnChange, parameters]);
+  return /*#__PURE__*/React.createElement(DatasourceContext.Provider, {
+    value: contextValue
+  }, children);
+};
+export const useDatasourceContext = () => {
+  const value = useContext(DatasourceContext);
+  if (!value) {
+    throw new Error('useDatasourceStore must be used within DatasourceContextProvider');
+  }
+  return value;
+};

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

@@ -0,0 +1,41 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { IssueLikeDataTableView } from '../../../issue-like-table';
+import { useDatasourceContext } from '../datasource-context';
+const Table = props => {
+  const {
+    columnCustomSizes,
+    onColumnResize,
+    wrappedColumnKeys,
+    onWrappedColumnChange,
+    visibleColumnKeys,
+    onVisibleColumnKeysChange,
+    tableState: {
+      status,
+      onNextPage,
+      responseItems,
+      hasNextPage,
+      columns,
+      defaultVisibleColumnKeys,
+      loadDatasourceDetails,
+      extensionKey = null
+    }
+  } = useDatasourceContext();
+  return /*#__PURE__*/React.createElement(IssueLikeDataTableView, _extends({}, props, {
+    status: status,
+    columns: columns,
+    items: responseItems,
+    hasNextPage: hasNextPage,
+    visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
+    onNextPage: onNextPage,
+    onLoadDatasourceDetails: loadDatasourceDetails,
+    onVisibleColumnKeysChange: onVisibleColumnKeysChange,
+    extensionKey: extensionKey,
+    columnCustomSizes: columnCustomSizes,
+    onColumnResize: onColumnResize,
+    wrappedColumnKeys: wrappedColumnKeys,
+    onWrappedColumnChange: fg('platform.linking-platform.datasource-word_wrap') ? onWrappedColumnChange : undefined
+  }));
+};
+export default Table;

package/dist/es2019/ui/common/modal/datasources-table-in-modal-preview/use-column-visibility/index.js

@@ -0,0 +1,27 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { useUserInteractions } from '../../../../../contexts/user-interactions';
+import { getColumnAction } from '../../../../issue-like-table/utils';
+export const useColumnVisibility = ({
+  visibleColumnKeys,
+  setVisibleColumnKeys,
+  defaultVisibleColumnKeys,
+  initialVisibleColumnKeys
+}) => {
+  const userInteractions = useUserInteractions();
+  const visibleColumnCount = useRef((visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0);
+  useEffect(() => {
+    const newVisibleColumnKeys = !initialVisibleColumnKeys || (initialVisibleColumnKeys || []).length === 0 ? defaultVisibleColumnKeys : initialVisibleColumnKeys;
+    visibleColumnCount.current = newVisibleColumnKeys.length;
+    setVisibleColumnKeys(newVisibleColumnKeys);
+  }, [initialVisibleColumnKeys, setVisibleColumnKeys, defaultVisibleColumnKeys]);
+  const onVisibleColumnKeysChange = useCallback((newVisibleColumnKeys = []) => {
+    const columnAction = getColumnAction(visibleColumnKeys || [], newVisibleColumnKeys);
+    userInteractions.add(columnAction);
+    visibleColumnCount.current = newVisibleColumnKeys.length;
+    setVisibleColumnKeys(newVisibleColumnKeys);
+  }, [visibleColumnKeys, setVisibleColumnKeys, userInteractions]);
+  return {
+    onVisibleColumnKeysChange,
+    visibleColumnCount
+  };
+};

package/dist/es2019/ui/{jira-issues-modal → common/modal}/mode-switcher/index.js

@@ -6,6 +6,10 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { N0, N20, N30A, N60, N700 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
+import { DatasourceAction } from '../../../../analytics/types';
+import { useUserInteractions } from '../../../../contexts/user-interactions';
+import { DisplayViewDropDown } from '../display-view-dropdown/display-view-drop-down';
+import { useViewModeContext } from './useViewModeContext';
 const modeSwitcherStyles = css({
   alignItems: 'center',
   background: `var(--ds-background-neutral, ${N20})`,
@@ -104,4 +108,19 @@ export const ModeSwitcher = props => {
       value: value
     })));
   })) : null;
+};
+export const DatasourceViewModeDropDown = () => {
+  const {
+    currentViewMode,
+    setCurrentViewMode
+  } = useViewModeContext();
+  const userInteractions = useUserInteractions();
+  const handleViewModeChange = selectedMode => {
+    userInteractions.add(DatasourceAction.DISPLAY_VIEW_CHANGED);
+    setCurrentViewMode(selectedMode);
+  };
+  return jsx(DisplayViewDropDown, {
+    onViewModeChange: handleViewModeChange,
+    viewMode: currentViewMode
+  });
 };

package/dist/es2019/ui/common/modal/mode-switcher/useViewModeContext.js

@@ -0,0 +1,26 @@
+/** @jsx jsx */
+import React, { createContext, useContext, useMemo, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+const ViewModeContext = /*#__PURE__*/createContext(null);
+export const DatasourceViewModeProvider = ({
+  viewMode: initialViewMode,
+  children
+}) => {
+  const [currentViewMode, setCurrentViewMode] = useState(initialViewMode);
+  const value = useMemo(() => ({
+    currentViewMode,
+    setCurrentViewMode
+  }), [currentViewMode, setCurrentViewMode]);
+  return jsx(ViewModeContext.Provider, {
+    value: value
+  }, children);
+};
+export const useViewModeContext = () => {
+  const value = useContext(ViewModeContext);
+  if (!value) {
+    throw new Error('useViewModeContext must be called within DatasourceViewModeProvider');
+  }
+  return value;
+};

package/dist/es2019/ui/common/modal/search-count/index.js

@@ -2,17 +2,35 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { FormattedMessage, FormattedNumber } from 'react-intl-next';
 import Heading from '@atlaskit/heading';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { Flex, xcss } from '@atlaskit/primitives';
 import LinkUrl from '@atlaskit/smart-card/link-url';
 import { N800 } from '@atlaskit/theme/colors';
-import { confluenceSearchModalMessages } from '../../../confluence-search-modal/modal/messages';
-import { modalMessages } from '../../../jira-issues-modal/modal/messages';
 import { footerMessages } from '../../../table-footer/messages';
 import { searchCountMessages } from './messages';
 const searchCountStyles = xcss({
   flex: 1
 });
+const ItemCountWrapper = ({
+  url,
+  children,
+  testId
+}) => /*#__PURE__*/React.createElement(Flex, {
+  testId: testId,
+  xcss: searchCountStyles,
+  alignItems: "center"
+}, /*#__PURE__*/React.createElement(LinkUrl, {
+  href: url,
+  target: "_blank",
+  testId: "item-count-url"
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+  ,
+  style: {
+    color: `var(--ds-text-accent-gray, ${N800})`,
+    textDecoration: !url ? 'none' : ''
+  }
+}, /*#__PURE__*/React.createElement(Heading, {
+  level: "h200"
+}, children)));
 export const AssetsItemCount = ({
   searchCount,
   url,
@@ -21,29 +39,16 @@ export const AssetsItemCount = ({
   let capCount = searchCount >= 1000;
   let displayCount = capCount ? 1000 : searchCount;
   let countModifier = capCount ? '+' : '';
-  return /*#__PURE__*/React.createElement(Flex, {
+  return /*#__PURE__*/React.createElement(ItemCountWrapper, {
     testId: testId,
-    xcss: searchCountStyles,
-    alignItems: "center"
-  }, /*#__PURE__*/React.createElement(LinkUrl, {
-    href: url,
-    target: "_blank",
-    testId: "item-count-url"
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: {
-      color: `var(--ds-text-accent-gray, ${N800})`,
-      textDecoration: !url ? 'none' : ''
-    }
-  }, /*#__PURE__*/React.createElement(Heading, {
-    level: "h200"
+    url: url
   }, /*#__PURE__*/React.createElement(FormattedNumber, {
     value: displayCount
   }), countModifier, ' ', /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, footerMessages.itemText, {
     values: {
       itemCount: searchCount
     }
-  })))));
+  })));
 };
 const TableSearchCount = ({
   url,
@@ -51,40 +56,13 @@ const TableSearchCount = ({
   testId = 'datasource-table-total-results-count',
   prefixTextType = 'issue'
 }) => {
-  return /*#__PURE__*/React.createElement(Flex, {
+  return /*#__PURE__*/React.createElement(ItemCountWrapper, {
     testId: testId,
-    xcss: searchCountStyles,
-    alignItems: "center"
-  }, /*#__PURE__*/React.createElement(LinkUrl, {
-    href: url,
-    target: "_blank",
-    testId: "item-count-url"
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: {
-      color: `var(--ds-text-accent-gray, ${N800})`,
-      textDecoration: !url ? 'none' : ''
-    }
-  }, /*#__PURE__*/React.createElement(Heading, {
-    level: "h200"
-  }, fg('platform.linking-platform.datasource.total-count-i18n-single-key') ? /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, searchCountMessages[`${prefixTextType}CountText`], {
+    url: url
+  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, searchCountMessages[`${prefixTextType}CountText`], {
     values: {
       searchCount
     }
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormattedNumber, {
-    value: searchCount
-  }), ' ', prefixTextType === 'issue' && /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, modalMessages.issueText, {
-    values: {
-      totalCount: searchCount
-    }
-  })), prefixTextType === 'result' && /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, confluenceSearchModalMessages.searchCountText, {
-    values: {
-      totalCount: searchCount
-    }
-  })), prefixTextType === 'item' && /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, footerMessages.itemText, {
-    values: {
-      itemCount: searchCount
-    }
-  }))))));
+  })));
 };
 export default TableSearchCount;

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

@@ -26,12 +26,12 @@ 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 { 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 { 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';

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

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
 /** @jsx jsx */
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
@@ -17,7 +18,6 @@ import { buildDatasourceAdf } from '../../../common/utils/adf';
 import { fetchMessagesForLocale } from '../../../common/utils/locale/fetch-messages-for-locale';
 import { DatasourceExperienceIdProvider } 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 { AccessRequired } from '../../common/error-state/access-required';
@@ -28,44 +28,66 @@ 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 { DatasourceContextProvider, useDatasourceContext } from '../../common/modal/datasource-context';
 import { DatasourceModal } from '../../common/modal/datasource-modal';
-import { DisplayViewDropDown } from '../../common/modal/display-view-dropdown/display-view-drop-down';
+import DatasourcesTableInModalPreview from '../../common/modal/datasources-table-in-modal-preview';
+import { DatasourceViewModeDropDown } from '../../common/modal/mode-switcher';
+import { DatasourceViewModeProvider, useViewModeContext } from '../../common/modal/mode-switcher/useViewModeContext';
 import TableSearchCount from '../../common/modal/search-count';
 import { SiteSelector } from '../../common/modal/site-selector';
-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 DEFAULT_VIEW_MODE = 'table';
 const inputContainerStyles = xcss({
   alignItems: 'baseline',
   display: 'flex',
   minHeight: '72px'
 });
+const isValidParameters = parameters => {
+  var _parameters$contribut;
+  return !!(parameters && parameters.cloudId && (parameters.searchString !== undefined || (_parameters$contribut = parameters.contributorAccountIds) !== null && _parameters$contribut !== void 0 && _parameters$contribut.length || parameters.lastModified || parameters.lastModifiedFrom || parameters.lastModifiedTo));
+};
+const useUpdateParametersOnFormUpdate = (cloudId, searchString, lastModified, contributorAccountIds, overrideParameters) => {
+  const {
+    setParameters
+  } = useDatasourceContext();
+  useEffect(() => {
+    setParameters(parameters => {
+      return {
+        ...parameters,
+        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.length > 0 ? contributorAccountIds : undefined,
+        ...(overrideParameters !== null && overrideParameters !== void 0 ? overrideParameters : {})
+      };
+    });
+  }, [cloudId, searchString, lastModified, contributorAccountIds, setParameters, overrideParameters]);
+};
 export const PlainConfluenceSearchConfigModal = props => {
   const {
     datasourceId,
     onCancel,
     onInsert,
-    viewMode = 'table',
     parameters: initialParameters,
     url: urlBeingEdited,
-    visibleColumnKeys: initialVisibleColumnKeys,
     disableDisplayDropdown = false,
     overrideParameters
   } = props;
-  const [currentViewMode, setCurrentViewMode] = useState(viewMode);
+  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 [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,
@@ -76,43 +98,21 @@ export const PlainConfluenceSearchConfigModal = props => {
   // 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]);
+  useUpdateParametersOnFormUpdate(cloudId, searchString, lastModified, contributorAccountIds, overrideParameters);
   const {
-    reset,
-    status,
-    onNextPage,
-    responseItems,
-    hasNextPage,
-    columns,
-    defaultVisibleColumnKeys,
-    loadDatasourceDetails,
-    totalCount,
-    extensionKey = null,
-    destinationObjectTypes
-  } = useDatasourceTableState({
-    datasourceId,
-    parameters: parametersToSend,
-    fieldKeys: visibleColumnKeys
-  });
+    visibleColumnKeys,
+    tableState: {
+      reset,
+      status,
+      responseItems,
+      extensionKey = null,
+      destinationObjectTypes,
+      totalCount,
+      columns
+    },
+    visibleColumnCount,
+    parameters
+  } = useDatasourceContext();
   const {
     fireEvent
   } = useDatasourceAnalyticsEvents();
@@ -146,36 +146,7 @@ export const PlainConfluenceSearchConfigModal = props => {
       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;
-
-  // 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]);
-  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;
@@ -223,7 +194,7 @@ export const PlainConfluenceSearchConfigModal = props => {
         displayedColumnCount: visibleColumnCount.current
       });
     }
-  }, [analyticsPayload, fireEvent, totalCount, isDataReady]);
+  }, [isDataReady, fireEvent, analyticsPayload, totalCount, visibleColumnCount]);
   useEffect(() => {
     const isResolved = status === 'resolved';
     const isTableViewMode = currentViewMode === 'table';
@@ -259,8 +230,12 @@ export const PlainConfluenceSearchConfigModal = props => {
         description: confluenceSearchModalMessages.initialViewSearchDescription
       }));
     }
-    return confluenceSearchTable;
-  }, [columns.length, selectedConfluenceSiteUrl, confluenceSearchTable, resolvedWithNoResults, status, urlBeingEdited, hasConfluenceSearchParams]);
+    return jsx(ContentContainer, {
+      withTableBorder: true
+    }, jsx(DatasourcesTableInModalPreview, {
+      testId: "confluence-search-datasource-table"
+    }));
+  }, [columns.length, selectedConfluenceSiteUrl, resolvedWithNoResults, status, urlBeingEdited, hasConfluenceSearchParams]);
   const renderInlineLinkModalContent = useCallback(() => {
     if (status === 'unauthorized') {
       return jsx(AccessRequired, {
@@ -283,7 +258,7 @@ export const PlainConfluenceSearchConfigModal = props => {
   } = useDatasourceContext();
   const onInsertPressed = useCallback((e, analyticsEvent) => {
     var _insertButtonClickedE;
-    if (!isParametersSet || !cloudId || !confluenceSearchUrl) {
+    if (!parameters || !isValidParameters(parameters) || !confluenceSearchUrl) {
       return;
     }
     const insertButtonClickedEvent = analyticsEvent.update({
@@ -311,10 +286,7 @@ export const PlainConfluenceSearchConfigModal = props => {
     } else {
       onInsert(buildDatasourceAdf({
         id: datasourceId,
-        parameters: {
-          ...parametersToSend,
-          cloudId
-        },
+        parameters: parameters,
         views: [{
           type: 'table',
           properties: {
@@ -335,11 +307,7 @@ export const PlainConfluenceSearchConfigModal = props => {
         }]
       }, 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);
-  };
+  }, [parameters, confluenceSearchUrl, analyticsPayload, totalCount, visibleColumnCount, currentViewMode, userInteractions, onInsert, datasourceId, visibleColumnKeys, columnCustomSizes, wrappedColumnKeys]);
   const onSearch = useCallback((newSearchString, filters) => {
     searchCount.current++;
     userInteractions.add(DatasourceAction.QUERY_UPDATED);
@@ -368,7 +336,7 @@ export const PlainConfluenceSearchConfigModal = props => {
       shouldForceRequest: true
     });
   }, [reset, userInteractions]);
-  const isInsertDisabled = !isParametersSet || status === 'rejected' || status === 'unauthorized' || status === 'loading';
+  const isInsertDisabled = !isValidParameters(parameters) || status === 'rejected' || status === 'unauthorized' || status === 'loading';
   const getCancelButtonAnalyticsPayload = useCallback(() => {
     return {
       extensionKey,
@@ -389,15 +357,14 @@ export const PlainConfluenceSearchConfigModal = props => {
     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, {
+  })), !hasNoConfluenceSites && !disableDisplayDropdown && jsx(DatasourceViewModeDropDown, null)), jsx(ModalBody, null, !hasNoConfluenceSites ? jsx(Fragment, null, jsx(Box, {
     xcss: inputContainerStyles
   }, jsx(ConfluenceSearchContainer, {
     isSearching: status === 'loading',
     onSearch: onSearch,
-    parameters: parameters
+    parameters: isValidParameters(parameters) ? parameters : {
+      cloudId: ''
+    }
   })), currentViewMode === 'inline' ? renderInlineLinkModalContent() : renderTableModalContent()) : jsx(NoInstancesView, {
     title: confluenceSearchModalMessages.noAccessToConfluenceSitesTitle,
     description: confluenceSearchModalMessages.noAccessToConfluenceSitesDescription,
@@ -431,9 +398,18 @@ const contextData = {
     ...analyticsContextAttributes
   }
 };
-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))));
+export const ConfluenceSearchConfigModal = withAnalyticsContext(contextData)(props => {
+  var _props$viewMode;
+  return 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
+  }, 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)));
+});

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

@@ -10,11 +10,6 @@ export const confluenceSearchModalMessages = defineMessages({
     description: 'Button text to insert the displayed content',
     defaultMessage: 'Insert results'
   },
-  searchCountText: {
-    id: 'linkDataSource.confluence-search.configmodal.resultsCountText',
-    description: 'Text that appears after search count number.',
-    defaultMessage: '{totalCount, plural, one {result} other {results}}'
-  },
   insertIssuesTitle: {
     id: 'linkDataSource.confluence-search.configmodal.insertConfluenceTitle',
     description: 'Title for the Confluence Search Datasource Confluence Search config modal',

package/dist/es2019/ui/jira-issues-modal/basic-filters/types.js

@@ -1,4 +1,4 @@
-// these types have been taken from jira-frontend to ensure the colour data return gets mapped correctly for the lozenge
+// These types have been taken from jira-frontend to ensure the colour data return gets mapped correctly for the lozenge
 export const appearanceMap = {
   BLUE_GRAY: 'default',
   MEDIUM_GRAY: 'default',