@atlaskit/link-datasource 1.24.7 → 1.24.8

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/link-datasource
 
+## 1.24.8
+
+### Patch Changes
+
+- [#84829](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/84829) [`a6299ec57bc3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a6299ec57bc3) - Internal change to replace hardcoded font fallback values with an exported constant. There is no expected visual difference.
+- [#82725](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/82725) [`058b020b8275`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/058b020b8275) - Adds e2e confluence search functionality and mocks.
+
 ## 1.24.7
 
 ### Patch Changes

package/dist/cjs/ui/assets-modal/modal/render-assets-content/initial-state-view/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.InitialStateView = void 0;
 var _react = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
+var _typography = require("@atlaskit/theme/typography");
 var _crystalBallSvg = require("./assets/crystal-ball-svg");
 var _messages = require("./messages");
 /** @jsx jsx */
@@ -20,7 +21,7 @@ var svgAndTextsWrapperStyles = (0, _react.css)({
   alignSelf: 'center'
 });
 var searchTitleStyles = (0, _react.css)({
-  font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-heading-small, ".concat(_typography.fontFallback.heading.small, ")"),
   paddingTop: "var(--ds-space-200, 16px)",
   paddingBottom: "var(--ds-space-100, 8px)"
 });

package/dist/cjs/ui/common/error-state/access-required.js

@@ -11,6 +11,7 @@ var _reactIntlNext = require("react-intl-next");
 var _emptyState = _interopRequireDefault(require("@atlaskit/empty-state"));
 var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
+var _typography = require("@atlaskit/theme/typography");
 var _analytics = require("../../../analytics");
 var _accessRequiredSvg = require("./access-required-svg");
 var _messages = require("./messages");
@@ -18,7 +19,7 @@ var _messages = require("./messages");
 
 var urlStyles = (0, _react2.css)({
   color: "var(--ds-text-subtlest, ".concat(_colors.N400, ")"),
-  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+  font: "var(--ds-font-body, ".concat(_typography.fontFallback.body.medium, ")")
 });
 var descriptionMessageStyles = (0, _react2.css)({
   display: 'flex',

package/dist/cjs/ui/common/error-state/loading-error.js

@@ -9,6 +9,7 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
+var _typography = require("@atlaskit/theme/typography");
 var _analytics = require("../../../analytics");
 var _loadingErrorSvg = require("./loading-error-svg");
 var _messages = require("./messages");
@@ -26,7 +27,7 @@ var errorMessageContainerStyles = (0, _react2.css)({
   placeItems: 'center'
 });
 var errorMessageStyles = (0, _react2.css)({
-  font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+  font: "var(--ds-font-heading-small, ".concat(_typography.fontFallback.heading.small, ")")
 });
 var errorDescriptionStyles = (0, _react2.css)({
   margin: 0

package/dist/cjs/ui/common/error-state/messages.js

@@ -50,17 +50,6 @@ var loadingErrorMessages = exports.loadingErrorMessages = (0, _reactIntlNext.def
     description: 'Instructions to let the user know how to resolve the network error that occurred or to try again at a different time',
     defaultMessage: 'Check your connection and refresh, or try again later.'
   },
-  checkConnectionWithSourceDuplicate: {
-    id: 'linkDataSource.checkConnectionWithSource',
-    description: 'Instructions to let the user know how to resolve the error that occured, or click the link provided to open the query in Jira',
-    defaultMessage: 'Check your connection and refresh, or <a>open this query in Jira</a> to review.'
-  },
-  //delete and remove duplicate from title above
-  checkConnectionWithSource: {
-    id: 'linkDataSource.jira-issues.checkConnectionWithSource',
-    description: 'Instructions to let the user know how to resolve the error that occured, or click the link provided to open the query in Jira',
-    defaultMessage: 'Check your connection and refresh, or <a>open this query in Jira</a> to review.'
-  },
   noResultsFoundDuplicate: {
     id: 'linkDataSource.noResultsFound',
     description: 'Status message letting the user know their query did not have any results',

package/dist/cjs/ui/common/error-state/modal-loading-error.js

@@ -1,14 +1,13 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ModalLoadingError = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
+var _typography = require("@atlaskit/theme/typography");
 var _analytics = require("../../../analytics");
 var _loadingErrorSvg = require("./loading-error-svg");
 var _messages = require("./messages");
@@ -26,13 +25,14 @@ var errorMessageContainerStyles = (0, _react2.css)({
   placeItems: 'center'
 });
 var errorMessageStyles = (0, _react2.css)({
-  font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+  font: "var(--ds-font-heading-small, ".concat(_typography.fontFallback.heading.small, ")")
 });
 var errorDescriptionStyles = (0, _react2.css)({
   margin: 0
 });
 var ModalLoadingError = exports.ModalLoadingError = function ModalLoadingError(_ref) {
-  var url = _ref.url;
+  var _ref$errorMessage = _ref.errorMessage,
+    errorMessage = _ref$errorMessage === void 0 ? (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.loadingErrorMessages.checkConnection) : _ref$errorMessage;
   var _useDatasourceAnalyti = (0, _analytics.useDatasourceAnalyticsEvents)(),
     fireEvent = _useDatasourceAnalyti.fireEvent;
   (0, _react.useEffect)(function () {
@@ -49,13 +49,5 @@ var ModalLoadingError = exports.ModalLoadingError = function ModalLoadingError(_
     css: errorMessageStyles
   }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.loadingErrorMessages.unableToLoadResults)), (0, _react2.jsx)("p", {
     css: errorDescriptionStyles
-  }, url ? (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.loadingErrorMessages.checkConnectionWithSource, {
-    values: {
-      a: function a(chunk) {
-        return (0, _react2.jsx)("a", {
-          href: url
-        }, chunk);
-      }
-    }
-  })) : (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.loadingErrorMessages.checkConnection))));
+  }, errorMessage)));
 };

package/dist/cjs/ui/common/error-state/no-instances.js

@@ -7,11 +7,12 @@ exports.NoInstancesView = void 0;
 var _react = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _primitives = require("@atlaskit/primitives");
+var _typography = require("@atlaskit/theme/typography");
 var _noInstancesSvg = require("./no-instances-svg");
 /** @jsx jsx */
 
 var titleStyles = (0, _react.css)({
-  font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-heading-small, ".concat(_typography.fontFallback.heading.small, ")"),
   marginTop: "var(--ds-space-200, 16px)"
 });
 var descriptionStyles = (0, _react.css)({

package/dist/cjs/ui/common/error-state/no-results.js

@@ -9,6 +9,7 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
+var _typography = require("@atlaskit/theme/typography");
 var _analytics = require("../../../analytics");
 var _messages = require("./messages");
 /** @jsx jsx */
@@ -25,7 +26,7 @@ var noResultsMessageContainerStyles = (0, _react2.css)({
   placeItems: 'center'
 });
 var noResultsMessageStyles = (0, _react2.css)({
-  font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+  font: "var(--ds-font-heading-small, ".concat(_typography.fontFallback.heading.small, ")")
 });
 var NoResults = exports.NoResults = function NoResults(_ref) {
   var onRefresh = _ref.onRefresh;

package/dist/cjs/ui/common/initial-state-view/index.js

@@ -9,6 +9,7 @@ var _react = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 var _colors = require("@atlaskit/theme/colors");
+var _typography = require("@atlaskit/theme/typography");
 var _messages = require("./messages");
 /** @jsx jsx */
 
@@ -28,7 +29,7 @@ var betaTagStyles = (0, _react.css)({
 });
 var searchTitleStyles = (0, _react.css)({
   color: "var(--ds-text-subtlest, ".concat(_colors.N300, ")"),
-  font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-heading-medium, ".concat(_typography.fontFallback.heading.medium, ")"),
   paddingTop: "var(--ds-space-200, 16px)",
   paddingBottom: "var(--ds-space-100, 8px)",
   display: 'flex',

package/dist/cjs/ui/confluence-search-modal/confluence-search-container/index.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _basicSearchInput = require("../../common/modal/basic-search-input");
+var _messages = require("./messages");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var ConfluenceSearchContainer = function ConfluenceSearchContainer(_ref) {
+  var cloudId = _ref.cloudId,
+    initialSearchValue = _ref.initialSearchValue,
+    isSearching = _ref.isSearching,
+    onSearch = _ref.onSearch;
+  var currentCloudId = (0, _react.useRef)(cloudId);
+  var _useState = (0, _react.useState)(initialSearchValue !== null && initialSearchValue !== void 0 ? initialSearchValue : ''),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    searchBarSearchString = _useState2[0],
+    setSearchBarSearchString = _useState2[1];
+  var handleSearchChange = (0, _react.useCallback)(function (e) {
+    var rawSearch = e.currentTarget.value;
+    setSearchBarSearchString(rawSearch);
+  }, []);
+
+  // TODO: further refactoring in EDM-9573
+  // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6827913
+  (0, _react.useEffect)(function () {
+    if (currentCloudId.current !== cloudId) {
+      setSearchBarSearchString('');
+      currentCloudId.current = cloudId;
+    }
+  }, [cloudId]);
+  return /*#__PURE__*/_react.default.createElement(_basicSearchInput.BasicSearchInput, {
+    testId: "confluence-search-datasource-modal--search-input",
+    isSearching: isSearching,
+    onChange: handleSearchChange,
+    onSearch: onSearch,
+    searchTerm: searchBarSearchString,
+    placeholder: _messages.searchMessages.searchLabel,
+    fullWidth: true
+  });
+};
+var _default = exports.default = ConfluenceSearchContainer;

package/dist/cjs/ui/confluence-search-modal/confluence-search-container/messages.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.searchMessages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var searchMessages = exports.searchMessages = (0, _reactIntlNext.defineMessages)({
+  searchLabel: {
+    id: 'linkDataSource.confluence-search.configmodal.searchLabel',
+    description: 'Placeholder text for the search input box',
+    defaultMessage: 'Enter keywords to find pages, attachments, and more'
+  }
+});

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

@@ -7,32 +7,60 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ConfluenceSearchConfigModal = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
+var _uuid = require("uuid");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _intlMessagesProvider = require("@atlaskit/intl-messages-provider");
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _primitives = require("@atlaskit/primitives");
+var _linkUrl = _interopRequireDefault(require("@atlaskit/smart-card/link-url"));
+var _colors = require("@atlaskit/theme/colors");
 var _fetchMessagesForLocale = require("../../../common/utils/locale/fetch-messages-for-locale");
+var _useDatasourceTableState = require("../../../hooks/useDatasourceTableState");
 var _en = _interopRequireDefault(require("../../../i18n/en"));
 var _getAvailableSites = require("../../../services/getAvailableSites");
+var _accessRequired = require("../../common/error-state/access-required");
+var _modalLoadingError = require("../../common/error-state/modal-loading-error");
 var _noInstances = require("../../common/error-state/no-instances");
+var _noResults = require("../../common/error-state/no-results");
 var _initialStateView = require("../../common/initial-state-view");
-var _basicSearchInput = require("../../common/modal/basic-search-input");
 var _contentContainer = require("../../common/modal/content-container");
 var _siteSelector = require("../../common/modal/site-selector");
+var _issueLikeTable = require("../../issue-like-table");
+var _confluenceSearchContainer = _interopRequireDefault(require("../confluence-search-container"));
 var _confluenceSearchInitialStateSvg = require("./confluence-search-initial-state-svg");
 var _messages = require("./messages");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/** @jsx jsx */
-
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
+var inputContainerStyles = (0, _primitives.xcss)({
+  alignItems: 'baseline',
+  display: 'flex',
+  minHeight: '72px'
+});
+var searchCountStyles = (0, _primitives.xcss)({
+  flex: 1,
+  fontWeight: 600
+});
 var ConfluenceSearchConfigModal = exports.ConfluenceSearchConfigModal = function ConfluenceSearchConfigModal(props) {
-  var initialParameters = props.parameters,
-    onCancel = props.onCancel;
+  var _useRef = (0, _react.useRef)((0, _uuid.v4)()),
+    modalRenderInstanceId = _useRef.current;
+  var datasourceId = props.datasourceId,
+    initialColumnCustomSizes = props.columnCustomSizes,
+    initialWrappedColumnKeys = props.wrappedColumnKeys,
+    onCancel = props.onCancel,
+    initialParameters = props.parameters,
+    urlBeingEdited = props.url,
+    initialVisibleColumnKeys = props.visibleColumnKeys;
   var _useState = (0, _react.useState)(undefined),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     availableSites = _useState2[0],
@@ -41,13 +69,44 @@ var ConfluenceSearchConfigModal = exports.ConfluenceSearchConfigModal = function
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     cloudId = _useState4[0],
     setCloudId = _useState4[1];
-  var _useState5 = (0, _react.useState)(''),
+  var _useState5 = (0, _react.useState)(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.searchString),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    searchTerm = _useState6[0],
-    setSearchTerm = _useState6[1];
-  var onSiteSelection = (0, _react.useCallback)(function (site) {
-    setCloudId(site.cloudId);
-  }, [setCloudId]);
+    searchString = _useState6[0],
+    setSearchString = _useState6[1];
+  var _useState7 = (0, _react.useState)(initialVisibleColumnKeys),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    visibleColumnKeys = _useState8[0],
+    setVisibleColumnKeys = _useState8[1];
+
+  // TODO: further refactoring in EDM-9573
+  // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6829210
+  var parameters = (0, _react.useMemo)(function () {
+    return cloudId ? {
+      cloudId: cloudId,
+      searchString: searchString
+    } : undefined;
+  }, [cloudId, searchString /** Add more parameters when more filters are added */]);
+  var isParametersSet = (0, _react.useMemo)(function () {
+    return !!cloudId && Object.values(parameters !== null && parameters !== void 0 ? parameters : {}).filter(function (v) {
+      return v !== undefined;
+    }).length > 1;
+  }, [cloudId, parameters]);
+  var _useDatasourceTableSt = (0, _useDatasourceTableState.useDatasourceTableState)({
+      datasourceId: datasourceId,
+      parameters: isParametersSet ? parameters : undefined,
+      fieldKeys: visibleColumnKeys
+    }),
+    reset = _useDatasourceTableSt.reset,
+    status = _useDatasourceTableSt.status,
+    onNextPage = _useDatasourceTableSt.onNextPage,
+    responseItems = _useDatasourceTableSt.responseItems,
+    hasNextPage = _useDatasourceTableSt.hasNextPage,
+    columns = _useDatasourceTableSt.columns,
+    defaultVisibleColumnKeys = _useDatasourceTableSt.defaultVisibleColumnKeys,
+    loadDatasourceDetails = _useDatasourceTableSt.loadDatasourceDetails,
+    _useDatasourceTableSt2 = _useDatasourceTableSt.extensionKey,
+    extensionKey = _useDatasourceTableSt2 === void 0 ? null : _useDatasourceTableSt2,
+    totalCount = _useDatasourceTableSt.totalCount;
   var hasNoConfluenceSites = availableSites && availableSites.length === 0;
   var selectedConfluenceSite = (0, _react.useMemo)(function () {
     if (cloudId) {
@@ -64,10 +123,24 @@ var ConfluenceSearchConfigModal = exports.ConfluenceSearchConfigModal = function
       })) || (availableSites === null || availableSites === void 0 ? void 0 : availableSites[0]);
     }
   }, [availableSites, cloudId]);
-  var handleSearchChange = (0, _react.useCallback)(function (e) {
-    var rawSearch = e.currentTarget.value;
-    setSearchTerm(rawSearch);
-  }, [setSearchTerm]);
+
+  // TODO: further refactoring in EDM-9573
+  // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6828283
+  (0, _react.useEffect)(function () {
+    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
+  var onSiteSelection = (0, _react.useCallback)(function (site) {
+    setSearchString(undefined);
+    setCloudId(site.cloudId);
+    reset({
+      shouldForceRequest: true
+    });
+  }, [reset]);
   (0, _react.useEffect)(function () {
     var fetchSiteDisplayNames = /*#__PURE__*/function () {
       var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
@@ -96,6 +169,101 @@ var ConfluenceSearchConfigModal = exports.ConfluenceSearchConfigModal = function
     void fetchSiteDisplayNames();
   }, []);
   var siteSelectorLabel = availableSites && availableSites.length > 1 ? _messages.confluenceSearchModalMessages.insertIssuesTitleManySites : _messages.confluenceSearchModalMessages.insertIssuesTitle;
+  var _useState9 = (0, _react.useState)(initialColumnCustomSizes),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    columnCustomSizes = _useState10[0],
+    setColumnCustomSizes = _useState10[1];
+  var onColumnResize = (0, _react.useCallback)(function (key, width) {
+    setColumnCustomSizes(_objectSpread(_objectSpread({}, columnCustomSizes), {}, (0, _defineProperty2.default)({}, key, width)));
+  }, [columnCustomSizes]);
+  var _useState11 = (0, _react.useState)(initialWrappedColumnKeys),
+    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+    wrappedColumnKeys = _useState12[0],
+    setWrappedColumnKeys = _useState12[1];
+  var onWrappedColumnChange = (0, _react.useCallback)(function (key, isWrapped) {
+    var set = new Set(wrappedColumnKeys);
+    if (isWrapped) {
+      set.add(key);
+    } else {
+      set.delete(key);
+    }
+    setWrappedColumnKeys(Array.from(set));
+  }, [wrappedColumnKeys]);
+
+  // TODO: further refactoring in EDM-9573
+  // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6798258
+  var confluenceSearchTable = (0, _react.useMemo)(function () {
+    return (0, _react2.jsx)(_contentContainer.ContentContainer, {
+      withTableBorder: true
+    }, (0, _react2.jsx)(_issueLikeTable.IssueLikeDataTableView, {
+      testId: "confluence-search-datasource-table",
+      status: status,
+      columns: columns,
+      items: responseItems,
+      hasNextPage: hasNextPage,
+      visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
+      onNextPage: onNextPage,
+      onLoadDatasourceDetails: loadDatasourceDetails,
+      onVisibleColumnKeysChange: setVisibleColumnKeys,
+      parentContainerRenderInstanceId: modalRenderInstanceId,
+      extensionKey: extensionKey,
+      columnCustomSizes: columnCustomSizes,
+      onColumnResize: onColumnResize,
+      wrappedColumnKeys: wrappedColumnKeys,
+      onWrappedColumnChange: (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.datasource-word_wrap') ? onWrappedColumnChange : undefined
+    }));
+  }, [status, columns, responseItems, hasNextPage, visibleColumnKeys, defaultVisibleColumnKeys, onNextPage, loadDatasourceDetails, setVisibleColumnKeys, modalRenderInstanceId, extensionKey, columnCustomSizes, onColumnResize, wrappedColumnKeys, onWrappedColumnChange]);
+  var resolvedWithNoResults = status === 'resolved' && !responseItems.length;
+  var hasConfluenceSearchParams = selectedConfluenceSite && searchString;
+  var selectedConfluenceSiteUrl = selectedConfluenceSite === null || selectedConfluenceSite === void 0 ? void 0 : selectedConfluenceSite.url;
+  var confluenceSearchUrl = selectedConfluenceSiteUrl && searchString !== undefined && "".concat(selectedConfluenceSiteUrl, "/wiki/search/?text=").concat(encodeURI(searchString));
+  var renderModalContent = (0, _react.useCallback)(function () {
+    if (status === 'rejected') {
+      return (0, _react2.jsx)(_modalLoadingError.ModalLoadingError, null);
+    } else if (status === 'unauthorized') {
+      return (0, _react2.jsx)(_accessRequired.AccessRequired, {
+        url: selectedConfluenceSiteUrl || urlBeingEdited
+      });
+    } else if (resolvedWithNoResults || status === 'forbidden') {
+      return (0, _react2.jsx)(_noResults.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 (0, _react2.jsx)(_issueLikeTable.EmptyState, {
+          testId: "confluence-search-datasource-modal--empty-state"
+        });
+      }
+      return (0, _react2.jsx)(_contentContainer.ContentContainer, null, (0, _react2.jsx)(_initialStateView.InitialStateView, {
+        icon: (0, _react2.jsx)(_confluenceSearchInitialStateSvg.ConfluenceSearchInitialStateSVG, null),
+        title: _messages.confluenceSearchModalMessages.initialViewSearchTitle,
+        description: _messages.confluenceSearchModalMessages.initialViewSearchDescription
+      }));
+    }
+    return confluenceSearchTable;
+  }, [columns.length, selectedConfluenceSiteUrl, confluenceSearchTable, resolvedWithNoResults, status, urlBeingEdited, hasConfluenceSearchParams]);
+  var shouldShowResultsCount = !!totalCount && totalCount !== 1;
+  var onInsertPressed = (0, _react.useCallback)(function () {
+    // eslint-disable-next-line no-console
+    // TODO: Implement onInsert in EDM-9412
+    /**
+     * onInsert(
+          {
+            type: 'inlineCard',
+            attrs: {
+              url,
+            },
+          } as InlineCardAdf,
+          consumerEvent,
+        );
+     */
+  }, []);
+  var onSearch = (0, _react.useCallback)(function (newSearchString) {
+    setSearchString(newSearchString);
+    reset({
+      shouldForceRequest: true
+    });
+  }, [reset]);
+  var isInsertDisabled = !isParametersSet || status === 'rejected' || status === 'unauthorized' || status === 'loading';
   return (0, _react2.jsx)(_intlMessagesProvider.IntlMessagesProvider, {
     defaultMessages: _en.default,
     loaderFn: _fetchMessagesForLocale.fetchMessagesForLocale
@@ -110,29 +278,40 @@ var ConfluenceSearchConfigModal = exports.ConfluenceSearchConfigModal = function
     selectedSite: selectedConfluenceSite,
     testId: "confluence-search-datasource-modal--site-selector",
     label: siteSelectorLabel
-  }))), (0, _react2.jsx)(_modalDialog.ModalBody, null, !hasNoConfluenceSites ? (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_basicSearchInput.BasicSearchInput, {
-    testId: "confluence-search-datasource-modal",
+  }))), (0, _react2.jsx)(_modalDialog.ModalBody, null, !hasNoConfluenceSites ? (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_primitives.Box, {
+    xcss: inputContainerStyles
+  }, (0, _react2.jsx)(_confluenceSearchContainer.default, {
+    cloudId: cloudId,
     isSearching: status === 'loading',
-    onChange: handleSearchChange,
-    onSearch: function onSearch() {},
-    searchTerm: searchTerm,
-    placeholder: _messages.confluenceSearchModalMessages.searchLabel,
-    fullWidth: true
-  }), (0, _react2.jsx)(_contentContainer.ContentContainer, null, (0, _react2.jsx)(_initialStateView.InitialStateView, {
-    icon: (0, _react2.jsx)(_confluenceSearchInitialStateSvg.ConfluenceSearchInitialStateSVG, null),
-    title: _messages.confluenceSearchModalMessages.initialViewSearchTitle,
-    description: _messages.confluenceSearchModalMessages.initialViewSearchDescription
-  }))) : (0, _react2.jsx)(_noInstances.NoInstancesView, {
+    onSearch: onSearch,
+    initialSearchValue: initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.searchString
+  })), renderModalContent()) : (0, _react2.jsx)(_noInstances.NoInstancesView, {
     title: _messages.confluenceSearchModalMessages.noAccessToConfluenceSitesTitle,
     description: _messages.confluenceSearchModalMessages.noAccessToConfluenceSitesDescription,
     testId: 'no-confluence-instances-content'
-  })), (0, _react2.jsx)(_modalDialog.ModalFooter, null, (0, _react2.jsx)(_standardButton.default, {
+  })), (0, _react2.jsx)(_modalDialog.ModalFooter, null, shouldShowResultsCount && confluenceSearchUrl && (0, _react2.jsx)(_primitives.Box, {
+    testId: "confluence-search-datasource-modal-total-results-count",
+    xcss: searchCountStyles
+  }, (0, _react2.jsx)(_linkUrl.default, {
+    href: confluenceSearchUrl,
+    target: "_blank",
+    testId: "item-count-url",
+    style: {
+      color: "var(--ds-text-accent-gray, ".concat(_colors.N800, ")")
+    }
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedNumber, {
+    value: totalCount
+  }), ' ', (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.confluenceSearchModalMessages.searchCountText, {
+    values: {
+      totalCount: totalCount
+    }
+  })))), (0, _react2.jsx)(_standardButton.default, {
     appearance: "default",
     onClick: onCancel
   }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.confluenceSearchModalMessages.cancelButtonText)), !hasNoConfluenceSites && (0, _react2.jsx)(_standardButton.default, {
     appearance: "primary",
-    onClick: function onClick() {},
-    isDisabled: true,
+    onClick: onInsertPressed,
+    isDisabled: isInsertDisabled,
     testId: "confluence-search-datasource-modal--insert-button"
   }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.confluenceSearchModalMessages.insertResultsButtonText)))));
 };

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

@@ -16,10 +16,10 @@ var confluenceSearchModalMessages = exports.confluenceSearchModalMessages = (0,
     description: 'Button text to insert the displayed content',
     defaultMessage: 'Insert results'
   },
-  searchLabel: {
-    id: 'linkDataSource.confluence-search.configmodal.searchLabel',
-    description: 'Placeholder text for the search input box',
-    defaultMessage: 'Enter keywords to find pages, attachments, and more'
+  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',

package/dist/cjs/ui/confluence-search-modal/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/ui/issue-like-table/column-picker/concatenated-menu-list.js

@@ -10,13 +10,14 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _select = require("@atlaskit/select");
+var _typography = require("@atlaskit/theme/typography");
 var _messages = require("./messages");
 var _excluded = ["children"];
 /** @jsx jsx */
 var SELECT_ITEMS_MAXIMUM_THRESHOLD = exports.SELECT_ITEMS_MAXIMUM_THRESHOLD = 200;
 var messageStyles = (0, _react.css)({
   color: "var(--ds-text-subtle, #44546F)",
-  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-body-small, ".concat(_typography.fontFallback.body.small, ")"),
   fontWeight: "var(--ds-font-weight-regular, 400)"
 });
 var ConcatenatedMenuList = exports.ConcatenatedMenuList = function ConcatenatedMenuList(_ref) {

package/dist/cjs/ui/issue-like-table/drag-column-preview.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _colors = require("@atlaskit/theme/colors");
+var _typography = require("@atlaskit/theme/typography");
 var _styled2 = require("./styled");
 /** @jsx jsx */
 
@@ -35,7 +36,7 @@ var tableStyles = (0, _react2.css)({
   background: "var(--ds-surface, #FFF)",
   borderCollapse: 'separate',
   borderSpacing: 0,
-  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-body, ".concat(_typography.fontFallback.body.medium, ")"),
   maxWidth: maxWidth
 });
 var DragColumnPreview = exports.DragColumnPreview = function DragColumnPreview(_ref) {

package/dist/cjs/ui/issue-like-table/index.js

@@ -23,6 +23,7 @@ var _pragmaticDragAndDropReactBeautifulDndAutoscroll = require("@atlaskit/pragma
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _colors = require("@atlaskit/theme/colors");
+var _typography = require("@atlaskit/theme/typography");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _ufoExperiences = require("../../analytics/ufoExperiences");
 var _zindex = require("../../common/zindex");
@@ -197,7 +198,7 @@ var noDefaultBorderStyles = (0, _react2.css)({
   borderBottom: 0
 });
 var headerStyles = (0, _react2.css)({
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-body-UNSAFE_small, ".concat(_typography.fontFallback.body.UNSAFE_small, ")"),
   fontWeight: "var(--ds-font-weight-medium, 500)"
 });
 var headingHoverEffectStyles = (0, _react2.css)({