@atlaskit/link-datasource 1.26.3 → 1.27.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/link-datasource
 
+## 1.27.1
+
+### Patch Changes
+
+- [#89629](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/89629) [`cb82b58b4ae2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cb82b58b4ae2) - Update xcss usages to align to new types.
+
+## 1.27.0
+
+### Minor Changes
+
+- [#89218](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/89218) [`008bd3703560`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/008bd3703560) - Adds DisplayViewDropdown to Confluence Search modal as a common component.
+
+### Patch Changes
+
+- [#89986](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/89986) [`73821c4958bb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/73821c4958bb) - Add display view dropdown analytics events
+
 ## 1.26.3
 
 ### Patch Changes

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

@@ -19,7 +19,7 @@ var descriptionStyles = (0, _react.css)({
   marginTop: "var(--ds-space-100, 8px)"
 });
 var containerStyles = (0, _primitives.xcss)({
-  marginTop: '60px'
+  marginTop: 'space.800'
 });
 var NoInstancesView = exports.NoInstancesView = function NoInstancesView(_ref) {
   var title = _ref.title,

package/dist/cjs/ui/common/modal/count-view-smart-link/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SmartLink = exports.SmartCardPlaceholder = void 0;
+var _react = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _colors = require("@atlaskit/theme/colors");
+var _link = _interopRequireDefault(require("../../../issue-like-table/render-type/link"));
+/** @jsx jsx */
+
+var placeholderSmartLinkStyles = (0, _react.css)({
+  backgroundColor: "var(--ds-surface-raised, ".concat(_colors.N0, ")"),
+  borderRadius: "var(--ds-border-radius-200, 3px)",
+  boxShadow: '0px 1px 1px rgba(9, 30, 66, 0.25), 0px 0px 1px rgba(9, 30, 66, 0.31)',
+  color: "var(--ds-text-brand, ".concat(_colors.B400, ")"),
+  padding: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-025, 2px)")
+});
+var smartLinkContainerStyles = (0, _react.css)({
+  paddingLeft: "var(--ds-space-025, 2px)"
+});
+var SmartCardPlaceholder = exports.SmartCardPlaceholder = function SmartCardPlaceholder(_ref) {
+  var placeholderText = _ref.placeholderText;
+  return (0, _react.jsx)("div", {
+    css: smartLinkContainerStyles
+  }, (0, _react.jsx)("span", {
+    "data-testid": "datasource-modal--smart-card-placeholder",
+    css: placeholderSmartLinkStyles
+  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, placeholderText)));
+};
+var SmartLink = exports.SmartLink = function SmartLink(_ref2) {
+  var url = _ref2.url;
+  return (0, _react.jsx)("div", {
+    css: smartLinkContainerStyles
+  }, (0, _react.jsx)(_link.default, {
+    url: url
+  }));
+};

package/dist/cjs/ui/{jira-issues-modal/modal/jira-display-view-dropdown/jira-display-view-drop-down.js → common/modal/display-view-dropdown/display-view-drop-down.js}

@@ -5,13 +5,13 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.JiraDisplayViewDropDown = void 0;
+exports.DisplayViewDropDown = void 0;
 var _react = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
 var _table = _interopRequireDefault(require("@atlaskit/icon/glyph/table"));
 var _primitives = require("@atlaskit/primitives");
-var _messages = require("../messages");
+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 */
@@ -35,34 +35,50 @@ var InlineIcon = (0, _react.jsx)("svg", {
   d: "M4 9C2.89543 9 2 9.67155 2 10.5V13.5C2 14.3285 2.89543 15 4 15H20C21.1046 15 22 14.3285 22 13.5V10.5C22 9.67155 21.1046 9 20 9H4ZM4.22222 11.25C4.22222 10.5 4.22222 10.5 5 10.5H7C7.55556 10.5 7.55556 10.5 7.55556 11.25V13C7.55556 13.5 7.55556 13.5 7 13.5H5C4.22222 13.5 4.22222 13.5 4.22222 13V11.25ZM9 12C9 11.7929 9.2239 11.625 9.5 11.625H19.5C19.7761 11.625 20 11.7929 20 12C20 12.2071 19.7761 12.375 19.5 12.375H9.5C9.2239 12.375 9 12.2071 9 12Z",
   fill: 'currentColor'
 }));
-var JiraDisplayViewDropDown = exports.JiraDisplayViewDropDown = function JiraDisplayViewDropDown(_ref) {
+var DisplayViewDropDown = exports.DisplayViewDropDown = function DisplayViewDropDown(_ref) {
   var onViewModeChange = _ref.onViewModeChange,
     viewMode = _ref.viewMode;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  var triggerText = viewMode === 'issue' ? formatMessage(_messages.modalMessages.tableViewModeLabel) : formatMessage(_messages.modalMessages.inlineLinkViewModeLabel);
+  // TODO: further refactoring in EDM-9573
+  // temporary fix. transition 'count' to 'inline', 'issue' to 'table'
+  var isJira = viewMode === 'issue' || viewMode === 'count';
+  var isTable = viewMode === 'table' || viewMode === 'issue';
+  var triggerText = isTable ? formatMessage(
+  // TODO EDM-9573, remove once EDM-9431 is merged
+  isJira ? _messages.displayViewDropDownMessages.tableViewModeLabel : _messages.displayViewDropDownMessages.tableViewModeLabelDuplicate) : formatMessage(
+  // TODO EDM-9573, remove once EDM-9431 is merged
+  isJira ? _messages.displayViewDropDownMessages.inlineLinkViewModeLabel : _messages.displayViewDropDownMessages.inlineLinkViewModeLabelDuplicate);
   return (0, _react.jsx)(_dropdownMenu.default, {
     trigger: triggerText,
-    testId: "jira-datasource-modal--view-drop-down"
+    testId: "datasource-modal--view-drop-down"
   }, (0, _react.jsx)(_primitives.Box, {
     xcss: dropDownItemGroupStyles
   }, (0, _react.jsx)(_dropdownMenu.DropdownItemGroup, null, (0, _react.jsx)(_dropdownMenu.DropdownItem, {
     testId: "dropdown-item-table",
     onClick: function onClick() {
-      return onViewModeChange('issue');
+      return onViewModeChange(isJira ? 'issue' : 'table');
     },
-    isSelected: viewMode === 'issue',
-    description: formatMessage(_messages.modalMessages.tableViewModeDescription),
+    isSelected: isTable,
+    description: formatMessage(
+    // TODO EDM-9573, remove once EDM-9431 is merged
+    isJira ? _messages.displayViewDropDownMessages.tableViewModeDescription : _messages.displayViewDropDownMessages.tableViewModeDescriptionDuplicate),
     elemBefore: (0, _react.jsx)(_table.default, {
       label: "table icon"
     })
-  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.tableViewModeLabel)), (0, _react.jsx)(_dropdownMenu.DropdownItem, {
+  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage
+  // TODO EDM-9573, remove once EDM-9431 is merged
+  , isJira ? _messages.displayViewDropDownMessages.tableViewModeLabel : _messages.displayViewDropDownMessages.tableViewModeLabelDuplicate)), (0, _react.jsx)(_dropdownMenu.DropdownItem, {
     testId: "dropdown-item-inline-link",
     onClick: function onClick() {
-      return onViewModeChange('count');
+      return onViewModeChange(isJira ? 'count' : 'inline');
     },
-    isSelected: viewMode === 'count',
-    description: formatMessage(_messages.modalMessages.inlineLinkViewModeDescription),
+    isSelected: !isTable,
+    description: formatMessage(
+    // TODO EDM-9573, remove once EDM-9431 is merged
+    isJira ? _messages.displayViewDropDownMessages.inlineLinkViewModeDescription : _messages.displayViewDropDownMessages.inlineLinkViewModeDescriptionDuplicate),
     elemBefore: InlineIcon
-  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.modalMessages.inlineLinkViewModeLabel)))));
+  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage
+  // TODO EDM-9573, remove once EDM-9431 is merged
+  , isJira ? _messages.displayViewDropDownMessages.inlineLinkViewModeLabel : _messages.displayViewDropDownMessages.inlineLinkViewModeLabelDuplicate)))));
 };

package/dist/cjs/ui/common/modal/display-view-dropdown/messages.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.displayViewDropDownMessages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var displayViewDropDownMessages = exports.displayViewDropDownMessages = (0, _reactIntlNext.defineMessages)({
+  // TODO EDM-9573
+  // remove duplicate from end of key once EDM-9431 is merged
+  tableViewModeLabelDuplicate: {
+    id: 'linkDataSource.configmodal.tableViewModeLabel',
+    description: 'Display search results as a table',
+    defaultMessage: 'Table'
+  },
+  // remove duplicate from end of key once EDM-9431 is merged
+  tableViewModeDescriptionDuplicate: {
+    id: 'linkDataSource.configmodal.tableViewModeDescription',
+    description: 'Description for table view mode',
+    defaultMessage: 'Display search results as a table'
+  },
+  // remove duplicate from end of key once EDM-9431 is merged
+  inlineLinkViewModeLabelDuplicate: {
+    id: 'linkDataSource.configmodal.inlineLinkViewModeLabel',
+    description: 'Display the number of search results as an inline smart link',
+    defaultMessage: 'Inline link'
+  },
+  // remove duplicate from end of key once EDM-9431 is merged
+  inlineLinkViewModeDescriptionDuplicate: {
+    id: 'linkDataSource.configmodal.inlineLinkViewModeDescription',
+    description: 'Description for inline view mode',
+    defaultMessage: 'Display the number of search results or as an inline smart link'
+  },
+  // delete once EDM-9431 is merged
+  tableViewModeLabel: {
+    id: 'linkDataSource.jira-issues.configmodal.tableViewModeLabel',
+    description: 'Display Jira search results as a table',
+    defaultMessage: 'Table'
+  },
+  // delete once EDM-9431 is merged
+  tableViewModeDescription: {
+    id: 'linkDataSource.jira-issues.configmodal.tableViewModeDescription',
+    description: 'Description for table view mode',
+    defaultMessage: 'Display Jira search results as a table'
+  },
+  // delete once EDM-9431 is merged
+  inlineLinkViewModeLabel: {
+    id: 'linkDataSource.jira-issues.configmodal.inlineLinkViewModeLabel',
+    description: 'Display the number of search results as an inline smart link',
+    defaultMessage: 'Inline link'
+  },
+  // delete once EDM-9431 is merged
+  inlineLinkViewModeDescription: {
+    id: 'linkDataSource.jira-issues.configmodal.inlineLinkViewModeDescription',
+    description: 'Description for inline link view mode',
+    defaultMessage: 'Display the number of search results or as an inline smart link'
+  }
+});

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'
   }
 });

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

@@ -27,7 +27,7 @@ var userWrapperStyles = (0, _primitives.xcss)({
   fontSize: "".concat(_styled2.fieldTextFontSize, "px")
 });
 var avatarWrapperStyles = (0, _primitives.xcss)({
-  marginRight: '5px'
+  marginRight: 'space.100'
 });
 var widthObserverWrapperStyles = (0, _primitives.xcss)({
   position: 'relative'

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

@@ -44,33 +44,23 @@ var _initialStateView = require("../../common/initial-state-view");
 var _messages2 = require("../../common/initial-state-view/messages");
 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 _link = _interopRequireDefault(require("../../issue-like-table/render-type/link"));
 var _ui = require("../basic-filters/ui");
 var _isQueryTooComplex = require("../basic-filters/utils/isQueryTooComplex");
 var _jiraSearchContainer = require("../jira-search-container");
-var _jiraDisplayViewDropDown = require("./jira-display-view-dropdown/jira-display-view-drop-down");
 var _jiraIssuesInitialStateSvg = require("./jira-issues-initial-state-svg");
 var _messages3 = 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; }
 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 placeholderSmartLinkStyles = (0, _react2.css)({
-  backgroundColor: "var(--ds-surface-raised, ".concat(_colors.N0, ")"),
-  borderRadius: "var(--ds-border-radius-200, 3px)",
-  boxShadow: '0px 1px 1px rgba(9, 30, 66, 0.25), 0px 0px 1px rgba(9, 30, 66, 0.31)',
-  color: "var(--ds-text-brand, ".concat(_colors.B400, ")"),
-  padding: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-025, 2px)")
-});
 var issueCountStyles = (0, _react2.css)({
   flex: 1,
   fontWeight: 600
 });
-var smartLinkContainerStyles = (0, _react2.css)({
-  paddingLeft: "var(--ds-space-025, 2px)"
-});
 var getDisplayValue = function getDisplayValue(currentViewMode, itemCount) {
   if (currentViewMode === 'issue') {
     return _types.DatasourceDisplay.DATASOURCE_TABLE;
@@ -477,12 +467,9 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
         url: selectedJiraSiteUrl || urlBeingEdited
       });
     } else if (status === 'empty' || !jql || !selectedJiraSiteUrl) {
-      return (0, _react2.jsx)("div", {
-        css: smartLinkContainerStyles
-      }, (0, _react2.jsx)("span", {
-        "data-testid": "jira-datasource-modal--smart-card-placeholder",
-        css: placeholderSmartLinkStyles
-      }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages3.modalMessages.issuesCountSmartCardPlaceholderText)));
+      return (0, _react2.jsx)(_countViewSmartLink.SmartCardPlaceholder, {
+        placeholderText: _messages3.modalMessages.issuesCountSmartCardPlaceholderText
+      });
     } else {
       var url;
       if (responseItems.length === 1 && retrieveUrlForSmartCardRender()) {
@@ -490,11 +477,9 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
       } else {
         url = "".concat(selectedJiraSiteUrl, "/issues/?jql=").concat((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.datasource.enable-stricter-jql-encoding') ? encodeURIComponent(jql) : encodeURI(jql));
       }
-      return (0, _react2.jsx)("div", {
-        css: smartLinkContainerStyles
-      }, (0, _react2.jsx)(_link.default, {
+      return (0, _react2.jsx)(_countViewSmartLink.SmartLink, {
         url: url
-      }));
+      });
     }
   }, [jql, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url, status, urlBeingEdited, responseItems, retrieveUrlForSmartCardRender]);
   var renderIssuesModeContent = (0, _react.useCallback)(function () {
@@ -557,7 +542,7 @@ var PlainJiraIssuesConfigModal = exports.PlainJiraIssuesConfigModal = function P
     selectedSite: selectedJiraSite,
     testId: "jira-datasource-modal--site-selector",
     label: siteSelectorLabel
-  })), !hasNoJiraSites && (0, _react2.jsx)(_jiraDisplayViewDropDown.JiraDisplayViewDropDown, {
+  })), !hasNoJiraSites && (0, _react2.jsx)(_displayViewDropDown.DisplayViewDropDown, {
     onViewModeChange: handleViewModeChange,
     viewMode: currentViewMode
   })), (0, _react2.jsx)(_modalDialog.ModalBody, null, !hasNoJiraSites ? (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_jiraSearchContainer.JiraSearchContainer, {

package/dist/cjs/ui/jira-issues-modal/modal/messages.js

@@ -21,26 +21,6 @@ var modalMessages = exports.modalMessages = (0, _reactIntlNext.defineMessages)({
     description: 'Title for the Jira Issues modal when a user has to select a site to inserting issues from',
     defaultMessage: 'Insert Jira issues from'
   },
-  tableViewModeLabel: {
-    id: 'linkDataSource.jira-issues.configmodal.tableViewModeLabel',
-    description: 'Display Jira search results as a table',
-    defaultMessage: 'Table'
-  },
-  tableViewModeDescription: {
-    id: 'linkDataSource.jira-issues.configmodal.tableViewModeDescription',
-    description: 'Description for table view mode',
-    defaultMessage: 'Display Jira search results as a table'
-  },
-  inlineLinkViewModeLabel: {
-    id: 'linkDataSource.jira-issues.configmodal.inlineLinkViewModeLabel',
-    description: 'Display the number of search results as an inline smart link',
-    defaultMessage: 'Inline link'
-  },
-  inlineLinkViewModeDescription: {
-    id: 'linkDataSource.jira-issues.configmodal.inlineLinkViewModeDescription',
-    description: 'Description for inline link view mode',
-    defaultMessage: 'Display the number of search results or as an inline smart link'
-  },
   issuesCountSmartCardPlaceholderText: {
     id: 'linkDataSource.jira-issues.configmodal.placeholder.issues',
     description: 'Placeholder text that will be placed next to a count of jira issues',

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

@@ -12,7 +12,7 @@ const descriptionStyles = css({
   marginTop: "var(--ds-space-100, 8px)"
 });
 const containerStyles = xcss({
-  marginTop: '60px'
+  marginTop: 'space.800'
 });
 export const NoInstancesView = ({
   title,

package/dist/es2019/ui/common/modal/count-view-smart-link/index.js

@@ -0,0 +1,30 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import { FormattedMessage } from 'react-intl-next';
+import { B400, N0 } from '@atlaskit/theme/colors';
+import LinkRenderType from '../../../issue-like-table/render-type/link';
+const placeholderSmartLinkStyles = css({
+  backgroundColor: `var(--ds-surface-raised, ${N0})`,
+  borderRadius: "var(--ds-border-radius-200, 3px)",
+  boxShadow: '0px 1px 1px rgba(9, 30, 66, 0.25), 0px 0px 1px rgba(9, 30, 66, 0.31)',
+  color: `var(--ds-text-brand, ${B400})`,
+  padding: `${"var(--ds-space-0, 0px)"} ${"var(--ds-space-025, 2px)"}`
+});
+const smartLinkContainerStyles = css({
+  paddingLeft: "var(--ds-space-025, 2px)"
+});
+export const SmartCardPlaceholder = ({
+  placeholderText
+}) => jsx("div", {
+  css: smartLinkContainerStyles
+}, jsx("span", {
+  "data-testid": `datasource-modal--smart-card-placeholder`,
+  css: placeholderSmartLinkStyles
+}, jsx(FormattedMessage, placeholderText)));
+export const SmartLink = ({
+  url
+}) => jsx("div", {
+  css: smartLinkContainerStyles
+}, jsx(LinkRenderType, {
+  url: url
+}));