@atlaskit/link-datasource 1.19.40 → 1.19.42

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

@@ -4,7 +4,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
+var _templateObject, _templateObject2;
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 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) { _defineProperty(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; }
@@ -21,6 +21,7 @@ import { reorderWithEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/r
 import { autoScroller } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/util/combine';
+import { Flex } from '@atlaskit/primitives';
 import { N40 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { startUfoExperience, succeedUfoExperience } from '../../analytics/ufoExperiences';
@@ -30,8 +31,9 @@ import { DragColumnPreview } from './drag-column-preview';
 import { DraggableTableHeading } from './draggable-table-heading';
 import TableEmptyState from './empty-state';
 import { fallbackRenderType, stringifyType } from './render-type';
-import { Table, TableHeading } from './styled';
+import { Table, TableHeading, withTablePluginBodyPrefix, withTablePluginHeaderPrefix } from './styled';
 import { useIsOnScreen } from './useIsOnScreen';
+import { COLUMN_BASE_WIDTH, getWidthCss } from './utils';
 var tableSidePadding = "var(--ds-space-200, 16px)";
 var tableHeadStyles = css({
   background: "var(--ds-elevation-surface-current, #FFF)",
@@ -44,21 +46,8 @@ var truncateTextStyles = css({
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
-var ColumnPickerHeader = styled.th(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 56px;\n  z-index: 10;\n  position: sticky;\n  right: calc(-1 * ", ");\n  background-color: ", ";\n  border-bottom: 2px solid ", "; /* It is required to have solid (not half-transparent) color because of this gradient business below */\n\n  padding-right: ", ";\n\n  background: linear-gradient(\n    90deg,\n    rgba(255, 255, 255, 0) 0%,\n    ", " 10%\n  );\n  vertical-align: middle; /* Keeps dropdown button in the middle */\n  &:last-of-type {\n    padding-right: ", ";\n  }\n  text-align: right; /* In case when TH itself is bigger we want to keep picker at the right side */\n"])), tableSidePadding, "var(--ds-elevation-surface-current, #FFF)", "var(--ds-border, ".concat(N40, ")"), "var(--ds-space-100, 4px)", "var(--ds-elevation-surface-current, #FFF)", tableSidePadding);
-var truncatedCellStyles = css({
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  borderRight: "0.5px solid ".concat("var(--ds-border, ".concat(N40, ")")),
-  borderBottom: "0.5px solid ".concat("var(--ds-border, ".concat(N40, ")")),
-  '&:first-child': {
-    paddingLeft: "var(--ds-space-100, 8px)"
-  },
-  '&:last-child': {
-    borderRight: 0,
-    paddingRight: "var(--ds-space-100, 8px)"
-  }
-});
+var ColumnPickerHeader = styled.th(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", " {\n    box-sizing: content-box;\n    border: 0;\n\n    width: 56px;\n    z-index: 10;\n    position: sticky;\n    right: calc(-1 * ", ");\n    background-color: ", ";\n    border-bottom: 2px solid ", "; /* It is required to have solid (not half-transparent) color because of this gradient business below */\n\n    padding-right: ", ";\n\n    background: linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0) 0%,\n      ", " 10%\n    );\n    vertical-align: middle; /* Keeps dropdown button in the middle */\n    text-align: right; /* In case when TH itself is bigger we want to keep picker at the right side */\n  }\n\n  ", " {\n    padding-right: ", ";\n  }\n"])), withTablePluginHeaderPrefix(), tableSidePadding, "var(--ds-elevation-surface-current, #FFF)", "var(--ds-border, ".concat(N40, ")"), "var(--ds-space-100, 4px)", "var(--ds-elevation-surface-current, #FFF)", withTablePluginHeaderPrefix('&:last-of-type'), tableSidePadding);
+var TableCell = styled.td(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", " {\n    /* First section here is to override things editor table plugin css defines */\n    padding: ", " ", ";\n    border: 0;\n    min-width: auto;\n    vertical-align: inherit;\n    box-sizing: border-box;\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    border-right: 0.5px solid ", ";\n    border-bottom: 0.5px solid ", ";\n  }\n\n  ", " {\n    padding-left: ", ";\n  }\n\n  ", " {\n    border-right: 0;\n    padding-right: ", ";\n  }\n"])), withTablePluginBodyPrefix(), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-border, ".concat(N40, ")"), "var(--ds-border, ".concat(N40, ")"), withTablePluginBodyPrefix('&:first-child'), "var(--ds-space-100, 8px)", withTablePluginBodyPrefix('&:last-child'), "var(--ds-space-100, 8px)");
 var tableContainerStyles = css({
   borderRadius: 'inherit',
   borderBottomLeftRadius: 0,
@@ -188,16 +177,14 @@ export var getOrderedColumns = function getOrderedColumns(columns, visibleColumn
   }).sort(sortColumns);
   return [].concat(_toConsumableArray(visibleColumns), _toConsumableArray(alphabeticallySortedInvisibleColumns));
 };
-var BASE_WIDTH = 8;
-var DEFAULT_WIDTH = BASE_WIDTH * 22;
-export var COLUMN_MIN_WIDTH = BASE_WIDTH * 3;
+var DEFAULT_WIDTH = COLUMN_BASE_WIDTH * 22;
 var keyBasedWidthMap = {
-  priority: BASE_WIDTH * 5,
-  status: BASE_WIDTH * 18,
-  summary: BASE_WIDTH * 45,
-  description: BASE_WIDTH * 31.25,
-  type: BASE_WIDTH * 5,
-  key: BASE_WIDTH * 13
+  priority: COLUMN_BASE_WIDTH * 5,
+  status: COLUMN_BASE_WIDTH * 18,
+  summary: COLUMN_BASE_WIDTH * 45,
+  description: COLUMN_BASE_WIDTH * 31,
+  type: COLUMN_BASE_WIDTH * 6,
+  key: COLUMN_BASE_WIDTH * 15
 };
 function getDefaultColumnWidth(key, type) {
   var keyBasedWidth = keyBasedWidthMap[key];
@@ -206,9 +193,9 @@ function getDefaultColumnWidth(key, type) {
   }
   switch (type) {
     case 'date':
-      return BASE_WIDTH * 14;
+      return COLUMN_BASE_WIDTH * 16;
     case 'icon':
-      return BASE_WIDTH * 5;
+      return COLUMN_BASE_WIDTH * 7;
     default:
       return DEFAULT_WIDTH;
   }
@@ -495,7 +482,8 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
       }
     }, _callee, null, [[3, 9]]);
   })), [parentContainerRenderInstanceId, extensionKey, hasFullSchema, onLoadDatasourceDetails]);
-  var shouldUseWidth = onColumnResize || columnCustomSizes;
+  var shouldUseWidth = !!(onColumnResize || columnCustomSizes);
+  var isEditable = onVisibleColumnKeysChange && hasData;
   return jsx("div", {
     /* There is required contentEditable={true} in editor-card-plugin
      * But this brakes how DND works. We set contentEditable={false} to allow DND to work
@@ -515,7 +503,8 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
     } : {}
   }, jsx("thead", {
     "data-testid": testId && "".concat(testId, "--head"),
-    css: [noDefaultBorderStyles, tableHeadStyles]
+    css: [noDefaultBorderStyles, tableHeadStyles],
+    className: !!onVisibleColumnKeysChange ? 'has-column-picker' : ''
   }, jsx("tr", {
     ref: tableHeaderRowRef
   }, headerColumns.map(function (_ref13, cellIndex) {
@@ -530,7 +519,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
       level: "h200",
       as: 'span'
     }, content));
-    if (onVisibleColumnKeysChange && hasData) {
+    if (isEditable) {
       var _containerRef$current3;
       var previewRows = tableRows.map(function (_ref14) {
         var cells = _ref14.cells;
@@ -559,14 +548,12 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
     } else {
       return jsx(TableHeading, {
         key: key,
-        className: !!onVisibleColumnKeysChange ? 'has-column-picker' : '',
         "data-testid": "".concat(key, "-column-heading"),
-        style: shouldUseWidth ? {
+        style: getWidthCss({
+          shouldUseWidth: shouldUseWidth,
           width: width
-        } : {
-          maxWidth: width
-        }
-      }, heading);
+        })
+      }, jsx(Flex, null, heading));
     }
   }), onVisibleColumnKeysChange && jsx(ColumnPickerHeader, null, jsx(ColumnPicker, {
     columns: hasFullSchema ? orderedColumns : [],
@@ -589,22 +576,21 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
       var cellKey = _ref17.key,
         content = _ref17.content,
         width = _ref17.width;
-      var loadingRowStyle = shouldUseWidth ? {
+      var isLastCell = cellIndex === cells.length - 1;
+      var loadingRowStyle = getWidthCss({
+        shouldUseWidth: shouldUseWidth,
         width: width
-      } : {
-        maxWidth: width
-      };
+      });
       // extra padding is required around skeleton loader to avoid vertical jumps when data loads
       if (key !== null && key !== void 0 && key.includes('loading')) {
         loadingRowStyle = _objectSpread(_objectSpread({}, loadingRowStyle), {}, {
           paddingBlock: "var(--ds-space-100, 8px)"
         });
       }
-      return jsx("td", {
+      return jsx(TableCell, {
         key: cellKey,
         "data-testid": testId && "".concat(testId, "--cell-").concat(cellIndex),
-        colSpan: cellIndex + 1 === cells.length ? 2 : undefined,
-        css: truncatedCellStyles,
+        colSpan: isEditable && isLastCell ? 2 : undefined,
         style: loadingRowStyle
       }, content);
     }));

package/dist/esm/ui/issue-like-table/styled.js

@@ -7,4 +7,17 @@ export var FieldTextFontSize = '14px';
 export var Table = styled.table(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n"])));
 var lineHeight = "var(--ds-font-lineHeight-300, 24px)";
 var verticalPadding = "var(--ds-space-025, 2px)";
-export var TableHeading = styled.th(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  line-height: ", ";\n  padding: ", " ", ";\n  border-right: 0.5px solid ", ";\n  border-bottom: 2px solid ", ";\n  height: calc(", " * 2 + ", " * 2);\n  vertical-align: bottom;\n\n  &.has-column-picker:nth-last-of-type(2) {\n    border-right: 0;\n  }\n\n  &:first-child {\n    padding-left: ", ";\n  }\n\n  &:last-child {\n    border-right: 0;\n  }\n\n  & [data-testid='datasource-header-content--container'] {\n    width: 100%;\n    padding: ", " ", ";\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    white-space: normal;\n    overflow: hidden;\n    word-wrap: break-word;\n\n    &:hover {\n      background: ", ";\n      border-radius: 3px;\n    }\n  }\n"])), lineHeight, verticalPadding, "var(--ds-space-050, 4px)", "var(--ds-border, ".concat(N40, ")"), "var(--ds-border, ".concat(N40, ")"), lineHeight, verticalPadding, "var(--ds-space-050, 4px)", verticalPadding, "var(--ds-space-050, 4px)", "var(--ds-background-input-hovered, #F7F8F9)");
+
+/**
+ * This is a hack used to override styles that are leaking to our table html element
+ * from editor table plugin.
+ * This css prefix can be used in front of our main css rule to make its weight bigger
+ * and force make browser use it first and editor plugin css second.
+ */
+export var withTablePluginPrefix = function withTablePluginPrefix(tableSection) {
+  var mainRule = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '&';
+  return "\n  .pm-table-wrapper > table ".concat(tableSection, " ").concat(mainRule, ",\n  .ProseMirror .pm-table-wrapper > table ").concat(tableSection, " ").concat(mainRule, ",\n  ").concat(mainRule, "\n");
+};
+export var withTablePluginHeaderPrefix = withTablePluginPrefix.bind(null, 'thead');
+export var withTablePluginBodyPrefix = withTablePluginPrefix.bind(null, 'tbody');
+export var TableHeading = styled.th(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", " {\n    border: 0;\n    position: relative;\n\n    /* This makes resizing work with out jumping due to padding + changes overall width for same default values. */\n    box-sizing: border-box;\n\n    line-height: ", ";\n    padding: ", " ", ";\n    border-right: 0.5px solid ", ";\n    border-bottom: 2px solid ", ";\n\n    /*\n      lineHeight * 2 -> Max height of two lined header\n      verticalPadding * 2 -> padding for this component itself\n      verticalPadding * 2 -> padding inside span (--container)\n      2px -> Bottom border\n      Last two terms are needed because of border-box box sizing.\n    */\n    height: calc(", " * 2 + ", " * 4 + 2px);\n    vertical-align: bottom;\n    background-color: ", ";\n  }\n\n  ", " {\n    border-right: 0;\n  }\n\n  ", " {\n    padding-left: ", ";\n  }\n\n  ", " {\n    border-right: 0;\n  }\n\n  & [data-testid='datasource-header-content--container'] {\n    width: 100%;\n    padding: ", " ", ";\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    white-space: normal;\n    overflow: hidden;\n    word-wrap: break-word;\n\n    &:hover {\n      background: ", ";\n      border-radius: 3px;\n    }\n  }\n"])), withTablePluginHeaderPrefix(), lineHeight, verticalPadding, "var(--ds-space-050, 4px)", "var(--ds-border, ".concat(N40, ")"), "var(--ds-border, ".concat(N40, ")"), lineHeight, verticalPadding, "var(--ds-elevation-surface-current, #FFF)", withTablePluginPrefix('', 'thead.has-column-picker &:nth-last-of-type(2)'), withTablePluginHeaderPrefix('&:first-child'), "var(--ds-space-050, 4px)", withTablePluginHeaderPrefix('&:last-child'), verticalPadding, "var(--ds-space-050, 4px)", "var(--ds-background-input-hovered, #F7F8F9)");

package/dist/esm/ui/issue-like-table/utils.js

@@ -0,0 +1,20 @@
+export var COLUMN_BASE_WIDTH = 8;
+export var COLUMN_MIN_WIDTH = COLUMN_BASE_WIDTH * 3;
+/**
+ * Generate width related portion of css for table cell.
+ *
+ * @param shouldUseWidth boolean argument defines if a given width is user defined / baked in value
+ * or rather default width that should be treated as a maximum width. When table inserted initially
+ * and no user custom width defined we set this value to `false`. As soon as user changes any of the
+ * column widths we treat all width as custom hardcoded widths.
+ * @param width
+ */
+export var getWidthCss = function getWidthCss(_ref) {
+  var shouldUseWidth = _ref.shouldUseWidth,
+    width = _ref.width;
+  return shouldUseWidth ? {
+    width: width
+  } : {
+    maxWidth: width
+  };
+};

package/dist/esm/ui/jira-issues-modal/modal/display-view-dropdown/display-view-drop-down.js

@@ -0,0 +1,57 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { FormattedMessage, useIntl } from 'react-intl-next';
+import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
+import TableIcon from '@atlaskit/icon/glyph/table';
+import { Box, xcss } from '@atlaskit/primitives';
+import { modalMessages } from '../messages';
+var dropDownItemGroupStyles = xcss({
+  width: '320px',
+  height: '140px',
+  paddingTop: "var(--ds-space-050, 4px)",
+  paddingBottom: "var(--ds-space-050, 4px)",
+  borderRadius: 'border.radius'
+});
+var InlineIcon = jsx("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none"
+}, jsx("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  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'
+}));
+export var DisplayViewDropDown = function DisplayViewDropDown(_ref) {
+  var onViewModeChange = _ref.onViewModeChange,
+    viewMode = _ref.viewMode;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var triggerText = viewMode === 'issue' ? formatMessage(modalMessages.tableViewModeLabel) : formatMessage(modalMessages.inlineLinkViewModeLabel);
+  return jsx(DropdownMenu, {
+    trigger: triggerText,
+    testId: "jira-jql-datasource-modal--view-drop-down"
+  }, jsx(Box, {
+    xcss: dropDownItemGroupStyles
+  }, jsx(DropdownItemGroup, null, jsx(DropdownItem, {
+    testId: "dropdown-item-table",
+    onClick: function onClick() {
+      return onViewModeChange('issue');
+    },
+    isSelected: viewMode === 'issue',
+    description: formatMessage(modalMessages.tableViewModeDescription),
+    elemBefore: jsx(TableIcon, {
+      label: "table icon"
+    })
+  }, jsx(FormattedMessage, modalMessages.tableViewModeLabel)), jsx(DropdownItem, {
+    testId: "dropdown-item-inline-link",
+    onClick: function onClick() {
+      return onViewModeChange('count');
+    },
+    isSelected: viewMode === 'count',
+    description: formatMessage(modalMessages.inlineLinkViewModeDescription),
+    elemBefore: InlineIcon
+  }, jsx(FormattedMessage, modalMessages.inlineLinkViewModeLabel)))));
+};

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

@@ -9,7 +9,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 /** @jsx jsx */
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
-import { FormattedMessage, FormattedNumber, useIntl } from 'react-intl-next';
+import { FormattedMessage, FormattedNumber } from 'react-intl-next';
 import { v4 as uuidv4 } from 'uuid';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button/standard-button';
@@ -39,8 +39,8 @@ import { availableBasicFilterTypes } from '../basic-filters/ui';
 import { isQueryTooComplex } from '../basic-filters/utils/isQueryTooComplex';
 import { InitialStateView } from '../initial-state-view';
 import { JiraSearchContainer } from '../jira-search-container';
-import { ModeSwitcher } from '../mode-switcher';
 import { JiraSiteSelector } from '../site-selector';
+import { DisplayViewDropDown } from './display-view-dropdown/display-view-drop-down';
 import { modalMessages } from './messages';
 var dropdownContainerStyles = css({
   display: 'flex',
@@ -80,10 +80,10 @@ var smartLinkContainerStyles = css({
   paddingLeft: '1px'
 });
 var getDisplayValue = function getDisplayValue(currentViewMode, itemCount) {
-  if (currentViewMode === 'count') {
-    return DatasourceDisplay.DATASOURCE_INLINE;
+  if (currentViewMode === 'issue') {
+    return DatasourceDisplay.DATASOURCE_TABLE;
   }
-  return itemCount > 1 ? DatasourceDisplay.DATASOURCE_TABLE : DatasourceDisplay.INLINE;
+  return itemCount === 1 ? DatasourceDisplay.INLINE : DatasourceDisplay.DATASOURCE_INLINE;
 };
 
 /**
@@ -179,8 +179,6 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
     _useDatasourceTableSt2 = _useDatasourceTableSt.extensionKey,
     extensionKey = _useDatasourceTableSt2 === void 0 ? null : _useDatasourceTableSt2,
     destinationObjectTypes = _useDatasourceTableSt.destinationObjectTypes;
-  var _useIntl = useIntl(),
-    formatMessage = _useIntl.formatMessage;
   var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
     fireEvent = _useDatasourceAnalyti.fireEvent;
   var _useRef = useRef(uuidv4()),
@@ -403,18 +401,11 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
     var firstIssueUrl = retrieveUrlForSmartCardRender();
     if (currentViewMode === 'count') {
       macroInsertedEvent === null || macroInsertedEvent === void 0 || macroInsertedEvent.fire(EVENT_CHANNEL);
+      var url = responseItems.length === 1 ? firstIssueUrl : upToDateJqlUrl;
       onInsert({
         type: 'inlineCard',
         attrs: {
-          url: upToDateJqlUrl
-        }
-      }, consumerEvent);
-    } else if (responseItems.length === 1 && firstIssueUrl) {
-      macroInsertedEvent === null || macroInsertedEvent === void 0 || macroInsertedEvent.fire(EVENT_CHANNEL);
-      onInsert({
-        type: 'inlineCard',
-        attrs: {
-          url: firstIssueUrl
+          url: url
         }
       }, consumerEvent);
     } else {
@@ -444,7 +435,7 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
         }
       }, consumerEvent);
     }
-  }, [isParametersSet, jql, selectedJiraSite, analyticsPayload, totalCount, visibleColumnKeys, currentViewMode, retrieveUrlForSmartCardRender, responseItems.length, onInsert, datasourceId, cloudId, columnCustomSizes, searchBarJql]);
+  }, [isParametersSet, jql, selectedJiraSite, analyticsPayload, totalCount, visibleColumnKeys, currentViewMode, retrieveUrlForSmartCardRender, onInsert, datasourceId, cloudId, columnCustomSizes, searchBarJql, responseItems]);
   var handleViewModeChange = function handleViewModeChange(selectedMode) {
     userInteractionActions.current.add(DatasourceAction.DISPLAY_VIEW_CHANGED);
     setCurrentViewMode(selectedMode);
@@ -494,14 +485,19 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
         css: placeholderSmartLinkStyles
       }, jsx(FormattedMessage, modalMessages.issuesCountSmartCardPlaceholderText)));
     } else {
-      var urlWithEncodedJql = "".concat(selectedJiraSiteUrl, "/issues/?jql=").concat(encodeURI(jql));
+      var url;
+      if (responseItems.length === 1 && retrieveUrlForSmartCardRender()) {
+        url = retrieveUrlForSmartCardRender();
+      } else {
+        url = "".concat(selectedJiraSiteUrl, "/issues/?jql=").concat(encodeURI(jql));
+      }
       return jsx("div", {
         css: smartLinkContainerStyles
       }, jsx(LinkRenderType, {
-        url: urlWithEncodedJql
+        url: url
       }));
     }
-  }, [jql, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url, status, urlBeingEdited]);
+  }, [jql, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url, status, urlBeingEdited, responseItems, retrieveUrlForSmartCardRender]);
   var renderIssuesModeContent = useCallback(function () {
     var selectedJiraSiteUrl = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
     if (status === 'rejected' && jqlUrl) {
@@ -524,16 +520,8 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
         searchMethod: currentSearchMethod
       }));
     }
-    var firstIssueUrl = retrieveUrlForSmartCardRender();
-    if (responseItems.length === 1 && firstIssueUrl) {
-      return jsx("div", {
-        css: smartLinkContainerStyles
-      }, jsx(LinkRenderType, {
-        url: firstIssueUrl
-      }));
-    }
     return issueLikeDataTableView;
-  }, [columns.length, currentSearchMethod, issueLikeDataTableView, jql, jqlUrl, resolvedWithNoResults, responseItems.length, retrieveUrlForSmartCardRender, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url, status, urlBeingEdited]);
+  }, [columns.length, currentSearchMethod, issueLikeDataTableView, jql, jqlUrl, resolvedWithNoResults, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url, status, urlBeingEdited]);
   return jsx(IntlMessagesProvider, {
     defaultMessages: i18nEN,
     loaderFn: fetchMessagesForLocale
@@ -549,17 +537,9 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
     onSiteSelection: onSiteSelection,
     selectedJiraSite: selectedJiraSite,
     testId: "jira-jql-datasource-modal--site-selector"
-  })) : jsx(FormattedMessage, modalMessages.insertIssuesTitle))), !hasNoJiraSites && jsx(ModeSwitcher, {
-    isCompact: true,
-    options: [{
-      label: formatMessage(modalMessages.issueViewModeLabel),
-      value: 'issue'
-    }, {
-      label: formatMessage(modalMessages.countViewModeLabel),
-      value: 'count'
-    }],
-    onOptionValueChange: handleViewModeChange,
-    selectedOptionValue: currentViewMode
+  })) : jsx(FormattedMessage, modalMessages.insertIssuesTitle))), !hasNoJiraSites && jsx(DisplayViewDropDown, {
+    onViewModeChange: handleViewModeChange,
+    viewMode: currentViewMode
   })), jsx(ModalBody, null, !hasNoJiraSites ? jsx(Fragment, null, jsx(JiraSearchContainer, {
     setSearchBarJql: setSearchBarJql,
     searchBarJql: searchBarJql,

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

@@ -20,15 +20,25 @@ export var modalMessages = 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'
   },
-  issueViewModeLabel: {
-    id: 'linkDataSource.jira-issues.configmodal.issueViewModeLabel',
-    description: 'Label for toggle to enable a view mode showing issues in a table list view',
-    defaultMessage: 'Issue view'
-  },
-  countViewModeLabel: {
-    id: 'linkDataSource.jira-issues.configmodal.countViewModeLabel',
-    description: 'Label for toggle to enable a view mode showing issues in as a total count',
-    defaultMessage: 'Count view'
+  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',

package/dist/types/ui/assets-modal/modal/messages.d.ts

@@ -4,6 +4,11 @@ export declare const modalMessages: {
         description: string;
         defaultMessage: string;
     };
+    updateObjectsButtonText: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
     insertIssuesButtonText: {
         id: string;
         description: string;

package/dist/types/ui/issue-like-table/index.d.ts

@@ -22,6 +22,5 @@ export interface RowCellType {
     content?: React.ReactNode | string;
 }
 export declare const getOrderedColumns: (columns: DatasourceResponseSchemaProperty[], visibleColumnKeys: string[]) => DatasourceResponseSchemaProperty[];
-export declare const COLUMN_MIN_WIDTH: number;
 export declare const IssueLikeDataTableView: ({ testId, onNextPage, onLoadDatasourceDetails, items, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, columnCustomSizes, onColumnResize, status, hasNextPage, scrollableContainerHeight, parentContainerRenderInstanceId, extensionKey, }: IssueLikeDataTableViewProps) => jsx.JSX.Element;
 export declare const EmptyState: ({ isCompact, testId }: import("./empty-state").Props) => jsx.JSX.Element;

package/dist/types/ui/issue-like-table/styled.d.ts

@@ -5,6 +5,15 @@ export declare const Table: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;
+/**
+ * This is a hack used to override styles that are leaking to our table html element
+ * from editor table plugin.
+ * This css prefix can be used in front of our main css rule to make its weight bigger
+ * and force make browser use it first and editor plugin css second.
+ */
+export declare const withTablePluginPrefix: (tableSection: 'thead' | 'tbody' | '', mainRule?: string) => string;
+export declare const withTablePluginHeaderPrefix: (mainRule?: string | undefined) => string;
+export declare const withTablePluginBodyPrefix: (mainRule?: string | undefined) => string;
 export declare const TableHeading: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

package/dist/types/ui/issue-like-table/utils.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export declare const COLUMN_BASE_WIDTH = 8;
+export declare const COLUMN_MIN_WIDTH: number;
+export type GetWidthCss = (arg: {
+    shouldUseWidth: boolean;
+    width: number;
+}) => React.CSSProperties;
+/**
+ * Generate width related portion of css for table cell.
+ *
+ * @param shouldUseWidth boolean argument defines if a given width is user defined / baked in value
+ * or rather default width that should be treated as a maximum width. When table inserted initially
+ * and no user custom width defined we set this value to `false`. As soon as user changes any of the
+ * column widths we treat all width as custom hardcoded widths.
+ * @param width
+ */
+export declare const getWidthCss: GetWidthCss;

package/dist/types/ui/jira-issues-modal/modal/display-view-dropdown/display-view-drop-down.d.ts

@@ -0,0 +1,8 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { JiraIssueViewModes } from '../../types';
+export type DisplayViewDropDownProps = {
+    onViewModeChange: (value: JiraIssueViewModes) => void;
+    viewMode: JiraIssueViewModes;
+};
+export declare const DisplayViewDropDown: ({ onViewModeChange, viewMode, }: DisplayViewDropDownProps) => jsx.JSX.Element;

package/dist/types/ui/jira-issues-modal/modal/messages.d.ts

@@ -19,12 +19,22 @@ export declare const modalMessages: {
         description: string;
         defaultMessage: string;
     };
-    issueViewModeLabel: {
+    tableViewModeLabel: {
         id: string;
         description: string;
         defaultMessage: string;
     };
-    countViewModeLabel: {
+    tableViewModeDescription: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    inlineLinkViewModeLabel: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    inlineLinkViewModeDescription: {
         id: string;
         description: string;
         defaultMessage: string;

package/dist/types-ts4.5/ui/assets-modal/modal/messages.d.ts

@@ -4,6 +4,11 @@ export declare const modalMessages: {
         description: string;
         defaultMessage: string;
     };
+    updateObjectsButtonText: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
     insertIssuesButtonText: {
         id: string;
         description: string;

package/dist/types-ts4.5/ui/issue-like-table/index.d.ts

@@ -22,6 +22,5 @@ export interface RowCellType {
     content?: React.ReactNode | string;
 }
 export declare const getOrderedColumns: (columns: DatasourceResponseSchemaProperty[], visibleColumnKeys: string[]) => DatasourceResponseSchemaProperty[];
-export declare const COLUMN_MIN_WIDTH: number;
 export declare const IssueLikeDataTableView: ({ testId, onNextPage, onLoadDatasourceDetails, items, columns, renderItem, visibleColumnKeys, onVisibleColumnKeysChange, columnCustomSizes, onColumnResize, status, hasNextPage, scrollableContainerHeight, parentContainerRenderInstanceId, extensionKey, }: IssueLikeDataTableViewProps) => jsx.JSX.Element;
 export declare const EmptyState: ({ isCompact, testId }: import("./empty-state").Props) => jsx.JSX.Element;

package/dist/types-ts4.5/ui/issue-like-table/styled.d.ts

@@ -5,6 +5,15 @@ export declare const Table: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;
+/**
+ * This is a hack used to override styles that are leaking to our table html element
+ * from editor table plugin.
+ * This css prefix can be used in front of our main css rule to make its weight bigger
+ * and force make browser use it first and editor plugin css second.
+ */
+export declare const withTablePluginPrefix: (tableSection: 'thead' | 'tbody' | '', mainRule?: string) => string;
+export declare const withTablePluginHeaderPrefix: (mainRule?: string | undefined) => string;
+export declare const withTablePluginBodyPrefix: (mainRule?: string | undefined) => string;
 export declare const TableHeading: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

package/dist/types-ts4.5/ui/issue-like-table/utils.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export declare const COLUMN_BASE_WIDTH = 8;
+export declare const COLUMN_MIN_WIDTH: number;
+export type GetWidthCss = (arg: {
+    shouldUseWidth: boolean;
+    width: number;
+}) => React.CSSProperties;
+/**
+ * Generate width related portion of css for table cell.
+ *
+ * @param shouldUseWidth boolean argument defines if a given width is user defined / baked in value
+ * or rather default width that should be treated as a maximum width. When table inserted initially
+ * and no user custom width defined we set this value to `false`. As soon as user changes any of the
+ * column widths we treat all width as custom hardcoded widths.
+ * @param width
+ */
+export declare const getWidthCss: GetWidthCss;

package/dist/types-ts4.5/ui/jira-issues-modal/modal/display-view-dropdown/display-view-drop-down.d.ts

@@ -0,0 +1,8 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { JiraIssueViewModes } from '../../types';
+export type DisplayViewDropDownProps = {
+    onViewModeChange: (value: JiraIssueViewModes) => void;
+    viewMode: JiraIssueViewModes;
+};
+export declare const DisplayViewDropDown: ({ onViewModeChange, viewMode, }: DisplayViewDropDownProps) => jsx.JSX.Element;

package/dist/types-ts4.5/ui/jira-issues-modal/modal/messages.d.ts

@@ -19,12 +19,22 @@ export declare const modalMessages: {
         description: string;
         defaultMessage: string;
     };
-    issueViewModeLabel: {
+    tableViewModeLabel: {
         id: string;
         description: string;
         defaultMessage: string;
     };
-    countViewModeLabel: {
+    tableViewModeDescription: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    inlineLinkViewModeLabel: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    inlineLinkViewModeDescription: {
         id: string;
         description: string;
         defaultMessage: string;