@atlaskit/link-datasource 1.26.2 → 1.27.0

package/dist/cjs/ui/{jira-issues-modal/basic-filters/ui/async-popup-select → common/modal/popup-select}/trigger.js

@@ -9,13 +9,11 @@ exports.default = exports.LoadingStateAnimationWrapper = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _reactIntlNext = require("react-intl-next");
 var _badge = _interopRequireDefault(require("@atlaskit/badge"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
 var _primitives = require("@atlaskit/primitives");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
-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 triggerButtonLabelStyles = (0, _primitives.xcss)({
@@ -42,25 +40,26 @@ var LoadingStateAnimationWrapper = exports.LoadingStateAnimationWrapper = _style
   }
 });
 var PopupTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var filterType = _ref.filterType,
-    isSelected = _ref.isSelected,
+  var isSelected = _ref.isSelected,
     isDisabled = _ref.isDisabled,
     isLoading = _ref.isLoading,
-    selectedOptions = _ref.selectedOptions;
+    selectedOptions = _ref.selectedOptions,
+    testId = _ref.testId,
+    label = _ref.label;
   var _ref2 = selectedOptions || [],
     _ref3 = (0, _slicedToArray2.default)(_ref2, 1),
     firstOption = _ref3[0];
   var hasOptions = selectedOptions && selectedOptions.length > 0;
   var showButtonLoading = !isDisabled && isLoading;
-  var testId = "jlol-basic-filter-".concat(filterType, "-trigger");
+  var tiggerButtonTestId = "".concat(testId, "-trigger");
   var LoadingButton = (0, _react.useCallback)(function () {
     return /*#__PURE__*/_react.default.createElement(LoadingStateAnimationWrapper, null, /*#__PURE__*/_react.default.createElement(_standardButton.default, {
       iconAfter: /*#__PURE__*/_react.default.createElement(_spinner.default, {
         size: 'xsmall'
       }),
-      testId: "".concat(testId, "--loading-button")
-    }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.asyncPopupSelectMessages["".concat(filterType, "Label")])));
-  }, [filterType, testId]);
+      testId: "".concat(tiggerButtonTestId, "--loading-button")
+    }, label));
+  }, [label, tiggerButtonTestId]);
   var DefaultButton = (0, _react.useCallback)(function () {
     return /*#__PURE__*/_react.default.createElement(_standardButton.default, {
       appearance: "default",
@@ -69,16 +68,16 @@ var PopupTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       iconAfter: /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
         label: ""
       }),
-      testId: "".concat(testId, "--button")
+      testId: "".concat(tiggerButtonTestId, "--button")
     }, /*#__PURE__*/_react.default.createElement(_primitives.Flex, null, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
       xcss: triggerButtonLabelStyles
-    }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.asyncPopupSelectMessages["".concat(filterType, "Label")]), firstOption && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ": ", firstOption.label)), selectedOptions && selectedOptions.length > 1 && /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
+    }, label, firstOption && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ": ", firstOption.label)), selectedOptions && selectedOptions.length > 1 && /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
       xcss: badgeStyles,
       alignItems: "center"
     }, /*#__PURE__*/_react.default.createElement(_badge.default, {
       appearance: "primary"
     }, "+", selectedOptions.length - 1))));
-  }, [filterType, firstOption, hasOptions, isDisabled, isSelected, selectedOptions, testId]);
+  }, [firstOption, hasOptions, isDisabled, isSelected, label, selectedOptions, tiggerButtonTestId]);
 
   /**
    * We had an issue with the popup component referencing a stale DOM ref for the trigger button.
@@ -86,7 +85,7 @@ var PopupTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
    */
   return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     ref: ref,
-    testId: testId
+    testId: tiggerButtonTestId
   }, showButtonLoading ? /*#__PURE__*/_react.default.createElement(LoadingButton, null) : /*#__PURE__*/_react.default.createElement(DefaultButton, null));
 });
 var _default = exports.default = PopupTrigger;

package/dist/cjs/ui/common/modal/popup-select/types.js

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

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

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
+var _react = _interopRequireDefault(require("react"));
+var _primitives = require("@atlaskit/primitives");
+var basicFilterContainerStyles = (0, _primitives.xcss)({
+  paddingLeft: 'space.100'
+});
+var BasicFilterContainer = function BasicFilterContainer(_ref) {
+  (0, _objectDestructuringEmpty2.default)(_ref);
+  return /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
+    xcss: basicFilterContainerStyles,
+    gap: "space.100",
+    testId: "clol-basic-filter-container"
+  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null));
+};
+var _default = exports.default = BasicFilterContainer;

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

@@ -8,10 +8,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _primitives = require("@atlaskit/primitives");
 var _basicSearchInput = require("../../common/modal/basic-search-input");
+var _basicFilters = _interopRequireDefault(require("../basic-filters"));
 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 basicSearchInputContainerStyles = (0, _primitives.xcss)({
+  flexGrow: 1
+});
 var ConfluenceSearchContainer = function ConfluenceSearchContainer(_ref) {
   var cloudId = _ref.cloudId,
     initialSearchValue = _ref.initialSearchValue,
@@ -35,14 +41,23 @@ var ConfluenceSearchContainer = function ConfluenceSearchContainer(_ref) {
       currentCloudId.current = cloudId;
     }
   }, [cloudId]);
-  return /*#__PURE__*/_react.default.createElement(_basicSearchInput.BasicSearchInput, {
+  var showBasicFilters = (0, _react.useMemo)(function () {
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.datasource.show-clol-basic-filters')) {
+      return true;
+    }
+    return false;
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
+    alignItems: "center",
+    xcss: basicSearchInputContainerStyles
+  }, /*#__PURE__*/_react.default.createElement(_basicSearchInput.BasicSearchInput, {
     testId: "confluence-search-datasource-modal",
     isSearching: isSearching,
     onChange: handleSearchChange,
     onSearch: onSearch,
     searchTerm: searchBarSearchString,
     placeholder: _messages.searchMessages.searchLabel,
-    fullWidth: true
-  });
+    fullWidth: !showBasicFilters
+  }), showBasicFilters && /*#__PURE__*/_react.default.createElement(_basicFilters.default, null));
 };
 var _default = exports.default = ConfluenceSearchContainer;

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

@@ -39,6 +39,8 @@ var _noResults = require("../../common/error-state/no-results");
 var _initialStateView = require("../../common/initial-state-view");
 var _cancelButton = require("../../common/modal/cancel-button");
 var _contentContainer = require("../../common/modal/content-container");
+var _countViewSmartLink = require("../../common/modal/count-view-smart-link");
+var _displayViewDropDown = require("../../common/modal/display-view-dropdown/display-view-drop-down");
 var _siteSelector = require("../../common/modal/site-selector");
 var _issueLikeTable = require("../../issue-like-table");
 var _confluenceSearchContainer = _interopRequireDefault(require("../confluence-search-container"));
@@ -78,6 +80,8 @@ var PlainConfluenceSearchConfigModal = exports.PlainConfluenceSearchConfigModal
     initialWrappedColumnKeys = props.wrappedColumnKeys,
     onCancel = props.onCancel,
     onInsert = props.onInsert,
+    _props$viewMode = props.viewMode,
+    viewMode = _props$viewMode === void 0 ? 'table' : _props$viewMode,
     initialParameters = props.parameters,
     urlBeingEdited = props.url,
     initialVisibleColumnKeys = props.visibleColumnKeys;
@@ -85,18 +89,22 @@ var PlainConfluenceSearchConfigModal = exports.PlainConfluenceSearchConfigModal
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     availableSites = _useState2[0],
     setAvailableSites = _useState2[1];
-  var _useState3 = (0, _react.useState)(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.cloudId),
+  var _useState3 = (0, _react.useState)(viewMode),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    cloudId = _useState4[0],
-    setCloudId = _useState4[1];
-  var _useState5 = (0, _react.useState)(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.searchString),
+    currentViewMode = _useState4[0],
+    setCurrentViewMode = _useState4[1];
+  var _useState5 = (0, _react.useState)(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.cloudId),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    searchString = _useState6[0],
-    setSearchString = _useState6[1];
-  var _useState7 = (0, _react.useState)(initialVisibleColumnKeys),
+    cloudId = _useState6[0],
+    setCloudId = _useState6[1];
+  var _useState7 = (0, _react.useState)(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.searchString),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    visibleColumnKeys = _useState8[0],
-    setVisibleColumnKeys = _useState8[1];
+    searchString = _useState8[0],
+    setSearchString = _useState8[1];
+  var _useState9 = (0, _react.useState)(initialVisibleColumnKeys),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    visibleColumnKeys = _useState10[0],
+    setVisibleColumnKeys = _useState10[1];
 
   // analytics related parameters
   var searchCount = (0, _react.useRef)(0);
@@ -166,6 +174,7 @@ var PlainConfluenceSearchConfigModal = exports.PlainConfluenceSearchConfigModal
   // 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) {
+    userInteractionActions.current.add(_types.DatasourceAction.INSTANCE_UPDATED);
     setSearchString(undefined);
     setCloudId(site.cloudId);
     reset({
@@ -209,17 +218,17 @@ var PlainConfluenceSearchConfigModal = exports.PlainConfluenceSearchConfigModal
     setVisibleColumnKeys(newVisibleColumnKeys);
   }, [initialVisibleColumnKeys, defaultVisibleColumnKeys]);
   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 _useState11 = (0, _react.useState)(initialColumnCustomSizes),
+    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+    columnCustomSizes = _useState12[0],
+    setColumnCustomSizes = _useState12[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 _useState13 = (0, _react.useState)(initialWrappedColumnKeys),
+    _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+    wrappedColumnKeys = _useState14[0],
+    setWrappedColumnKeys = _useState14[1];
   var onWrappedColumnChange = (0, _react.useCallback)(function (key, isWrapped) {
     var set = new Set(wrappedColumnKeys);
     if (isWrapped) {
@@ -265,7 +274,7 @@ var PlainConfluenceSearchConfigModal = exports.PlainConfluenceSearchConfigModal
   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 confluenceSearchUrl = selectedConfluenceSiteUrl && searchString !== undefined && "".concat(selectedConfluenceSiteUrl, "/wiki/search?text=").concat(encodeURI(searchString));
   var analyticsPayload = (0, _react.useMemo)(function () {
     return {
       extensionKey: extensionKey,
@@ -274,7 +283,36 @@ var PlainConfluenceSearchConfigModal = exports.PlainConfluenceSearchConfigModal
       actions: Array.from(userInteractionActions.current)
     };
   }, [destinationObjectTypes, extensionKey]);
-  var renderModalContent = (0, _react.useCallback)(function () {
+  var isDataReady = (visibleColumnKeys || []).length > 0;
+  var fireInlineViewedEvent = (0, _react.useCallback)(function () {
+    fireEvent('ui.link.viewed.count', _objectSpread(_objectSpread({}, analyticsPayload), {}, {
+      searchMethod: _types.DatasourceSearchMethod.DATASOURCE_SEARCH_QUERY,
+      totalItemCount: totalCount || 0
+    }));
+  }, [analyticsPayload, fireEvent, totalCount]);
+  var fireTableViewedEvent = (0, _react.useCallback)(function () {
+    if (isDataReady) {
+      fireEvent('ui.table.viewed.datasourceConfigModal', _objectSpread(_objectSpread({}, analyticsPayload), {}, {
+        totalItemCount: totalCount || 0,
+        searchMethod: _types.DatasourceSearchMethod.DATASOURCE_SEARCH_QUERY,
+        displayedColumnCount: visibleColumnCount.current
+      }));
+    }
+  }, [analyticsPayload, fireEvent, totalCount, isDataReady]);
+  (0, _react.useEffect)(function () {
+    var isResolved = status === 'resolved';
+    var isTableViewMode = currentViewMode === 'issue' || currentViewMode === 'table';
+    var isInlineViewMode = currentViewMode === 'count' || currentViewMode === 'inline';
+    if (!isResolved) {
+      return;
+    }
+    if (isTableViewMode) {
+      fireTableViewedEvent();
+    } else if (isInlineViewMode) {
+      fireInlineViewedEvent();
+    }
+  }, [currentViewMode, fireInlineViewedEvent, fireTableViewedEvent, status]);
+  var renderTableModalContent = (0, _react.useCallback)(function () {
     if (status === 'rejected') {
       return (0, _react2.jsx)(_modalLoadingError.ModalLoadingError, null);
     } else if (status === 'unauthorized') {
@@ -298,7 +336,22 @@ var PlainConfluenceSearchConfigModal = exports.PlainConfluenceSearchConfigModal
     }
     return confluenceSearchTable;
   }, [columns.length, selectedConfluenceSiteUrl, confluenceSearchTable, resolvedWithNoResults, status, urlBeingEdited, hasConfluenceSearchParams]);
-  var shouldShowResultsCount = !!totalCount && totalCount !== 1;
+  var renderInlineLinkModalContent = (0, _react.useCallback)(function () {
+    if (status === 'unauthorized') {
+      return (0, _react2.jsx)(_accessRequired.AccessRequired, {
+        url: selectedConfluenceSiteUrl || urlBeingEdited
+      });
+    } else if (status === 'empty' || !selectedConfluenceSiteUrl) {
+      return (0, _react2.jsx)(_countViewSmartLink.SmartCardPlaceholder, {
+        placeholderText: _messages.confluenceSearchModalMessages.resultsCountSmartCardPlaceholderText
+      });
+    } else {
+      return confluenceSearchUrl && (0, _react2.jsx)(_countViewSmartLink.SmartLink, {
+        url: confluenceSearchUrl
+      });
+    }
+  }, [confluenceSearchUrl, selectedConfluenceSiteUrl, status, urlBeingEdited]);
+  var shouldShowResultsCount = !!totalCount && currentViewMode === 'table';
   var onInsertPressed = (0, _react.useCallback)(function (e, analyticsEvent) {
     var _insertButtonClickedE;
     if (!isParametersSet || !cloudId) {
@@ -309,7 +362,7 @@ var PlainConfluenceSearchConfigModal = exports.PlainConfluenceSearchConfigModal
       attributes: _objectSpread(_objectSpread({}, analyticsPayload), {}, {
         totalItemCount: totalCount || 0,
         displayedColumnCount: visibleColumnCount.current,
-        display: _types.DatasourceDisplay.DATASOURCE_TABLE,
+        display: currentViewMode === 'inline' ? _types.DatasourceDisplay.DATASOURCE_INLINE : _types.DatasourceDisplay.DATASOURCE_TABLE,
         searchCount: searchCount.current,
         searchMethod: _types.DatasourceSearchMethod.DATASOURCE_SEARCH_QUERY,
         actions: Array.from(userInteractionActions.current)
@@ -318,29 +371,42 @@ var PlainConfluenceSearchConfigModal = exports.PlainConfluenceSearchConfigModal
     });
     var consumerEvent = (_insertButtonClickedE = insertButtonClickedEvent.clone()) !== null && _insertButtonClickedE !== void 0 ? _insertButtonClickedE : undefined;
     insertButtonClickedEvent.fire(_analytics.EVENT_CHANNEL);
-    onInsert((0, _adf.buildDatasourceAdf)({
-      id: datasourceId,
-      parameters: _objectSpread(_objectSpread({}, parameters), {}, {
-        cloudId: cloudId
-      }),
-      views: [{
-        type: 'table',
-        properties: {
-          columns: (visibleColumnKeys || []).map(function (key) {
-            var width = columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key];
-            var isWrapped = wrappedColumnKeys === null || wrappedColumnKeys === void 0 ? void 0 : wrappedColumnKeys.includes(key);
-            return _objectSpread(_objectSpread({
-              key: key
-            }, width ? {
-              width: width
-            } : {}), isWrapped ? {
-              isWrapped: isWrapped
-            } : {});
-          })
+    if (currentViewMode === 'inline') {
+      onInsert({
+        type: 'inlineCard',
+        attrs: {
+          url: confluenceSearchUrl
         }
-      }]
-    }), consumerEvent);
-  }, [isParametersSet, cloudId, analyticsPayload, totalCount, onInsert, datasourceId, parameters, visibleColumnKeys, columnCustomSizes, wrappedColumnKeys]);
+      }, consumerEvent);
+    } else {
+      onInsert((0, _adf.buildDatasourceAdf)({
+        id: datasourceId,
+        parameters: _objectSpread(_objectSpread({}, parameters), {}, {
+          cloudId: cloudId
+        }),
+        views: [{
+          type: 'table',
+          properties: {
+            columns: (visibleColumnKeys || []).map(function (key) {
+              var width = columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key];
+              var isWrapped = wrappedColumnKeys === null || wrappedColumnKeys === void 0 ? void 0 : wrappedColumnKeys.includes(key);
+              return _objectSpread(_objectSpread({
+                key: key
+              }, width ? {
+                width: width
+              } : {}), isWrapped ? {
+                isWrapped: isWrapped
+              } : {});
+            })
+          }
+        }]
+      }), consumerEvent);
+    }
+  }, [isParametersSet, cloudId, analyticsPayload, totalCount, currentViewMode, onInsert, confluenceSearchUrl, datasourceId, parameters, visibleColumnKeys, columnCustomSizes, wrappedColumnKeys]);
+  var handleViewModeChange = function handleViewModeChange(selectedMode) {
+    userInteractionActions.current.add(_types.DatasourceAction.DISPLAY_VIEW_CHANGED);
+    setCurrentViewMode(selectedMode);
+  };
   var onSearch = (0, _react.useCallback)(function (newSearchString) {
     searchCount.current++;
     userInteractionActions.current.add(_types.DatasourceAction.QUERY_UPDATED);
@@ -372,14 +438,17 @@ var PlainConfluenceSearchConfigModal = exports.PlainConfluenceSearchConfigModal
     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)(_primitives.Box, {
+  })), !hasNoConfluenceSites && (0, _react2.jsx)(_displayViewDropDown.DisplayViewDropDown, {
+    onViewModeChange: handleViewModeChange,
+    viewMode: currentViewMode
+  })), (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',
     onSearch: onSearch,
     initialSearchValue: initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.searchString
-  })), renderModalContent()) : (0, _react2.jsx)(_noInstances.NoInstancesView, {
+  })), currentViewMode === 'inline' ? renderInlineLinkModalContent() : renderTableModalContent()) : (0, _react2.jsx)(_noInstances.NoInstancesView, {
     title: _messages.confluenceSearchModalMessages.noAccessToConfluenceSitesTitle,
     description: _messages.confluenceSearchModalMessages.noAccessToConfluenceSitesDescription,
     testId: 'no-confluence-instances-content'

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

@@ -50,5 +50,10 @@ var confluenceSearchModalMessages = exports.confluenceSearchModalMessages = (0,
     id: 'linkDataSource.confluence-search.no.confluence.sites.access.description',
     description: 'Description that shows in the modal when user has no access to any Confluence sites',
     defaultMessage: 'To request access, contact your admin.'
+  },
+  resultsCountSmartCardPlaceholderText: {
+    id: 'linkDataSource.confluence-search.configmodal.placeholder.issues',
+    description: 'Placeholder text that will be placed next to a count of confluence search results',
+    defaultMessage: '### Results'
   }
 });