@atlaskit/link-datasource 1.19.40 → 1.19.42

package/dist/es2019/ui/issue-like-table/draggable-table-heading.js

@@ -12,7 +12,7 @@ import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util
 import { offsetFromPointer } from '@atlaskit/pragmatic-drag-and-drop/util/offset-from-pointer';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
 import { TableHeading } from './styled';
-import { COLUMN_MIN_WIDTH } from './index';
+import { COLUMN_MIN_WIDTH, getWidthCss } from './utils';
 const verticallyAlignedStyles = css({
   display: 'flex',
   alignItems: 'center',
@@ -236,9 +236,6 @@ export const DraggableTableHeading = ({
 
         // Set the width of our header being resized
         let proposedWidth = initialWidth + relativeDistanceX;
-        if (initialWidth >= COLUMN_MIN_WIDTH && proposedWidth < COLUMN_MIN_WIDTH) {
-          proposedWidth = COLUMN_MIN_WIDTH;
-        }
 
         // We update width css directly live
         mainHeaderCell.style.setProperty('width', `${proposedWidth}px`);
@@ -247,23 +244,23 @@ export const DraggableTableHeading = ({
         cancelUnhandled.stop();
         setState(idleState);
         if (onWidthChange) {
-          // We use element's css value as a source of truth (compare to another Ref)
-          const currentWidthPx = mainHeaderCell.style.getPropertyValue('width');
-          onWidthChange(+currentWidthPx.slice(0, -2));
+          let cssWidth = +mainHeaderCell.style.getPropertyValue('width').slice(0, -2);
+          if (cssWidth < COLUMN_MIN_WIDTH) {
+            cssWidth = COLUMN_MIN_WIDTH;
+          }
+          onWidthChange(cssWidth);
         }
       }
     });
   }, [id, index, onWidthChange, state, tableId, width]);
   return jsx(TableHeading, {
     ref: mainHeaderCellRef,
-    className: "has-column-picker",
     "data-testid": `${id}-column-heading`,
     style: {
       cursor: 'grab',
-      ...(onWidthChange ? {
+      ...getWidthCss({
+        shouldUseWidth: !!onWidthChange,
         width
-      } : {
-        maxWidth: width
       })
     }
   }, onWidthChange ? jsx("div", {

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

@@ -12,6 +12,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';
@@ -21,8 +22,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';
 const tableSidePadding = "var(--ds-space-200, 16px)";
 const tableHeadStyles = css({
   background: "var(--ds-elevation-surface-current, #FFF)",
@@ -36,40 +38,57 @@ const truncateTextStyles = css({
   whiteSpace: 'nowrap'
 });
 const ColumnPickerHeader = styled.th`
-  width: 56px;
-  z-index: 10;
-  position: sticky;
-  right: calc(-1 * ${tableSidePadding});
-  background-color: ${"var(--ds-elevation-surface-current, #FFF)"};
-  border-bottom: 2px solid ${`var(--ds-border, ${N40})`}; /* It is required to have solid (not half-transparent) color because of this gradient business below */
+  ${withTablePluginHeaderPrefix()} {
+    box-sizing: content-box;
+    border: 0;
 
-  padding-right: ${"var(--ds-space-100, 4px)"};
+    width: 56px;
+    z-index: 10;
+    position: sticky;
+    right: calc(-1 * ${tableSidePadding});
+    background-color: ${"var(--ds-elevation-surface-current, #FFF)"};
+    border-bottom: 2px solid ${`var(--ds-border, ${N40})`}; /* It is required to have solid (not half-transparent) color because of this gradient business below */
 
-  background: linear-gradient(
-    90deg,
-    rgba(255, 255, 255, 0) 0%,
-    ${"var(--ds-elevation-surface-current, #FFF)"} 10%
-  );
-  vertical-align: middle; /* Keeps dropdown button in the middle */
-  &:last-of-type {
+    padding-right: ${"var(--ds-space-100, 4px)"};
+
+    background: linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0) 0%,
+      ${"var(--ds-elevation-surface-current, #FFF)"} 10%
+    );
+    vertical-align: middle; /* Keeps dropdown button in the middle */
+    text-align: right; /* In case when TH itself is bigger we want to keep picker at the right side */
+  }
+
+  ${withTablePluginHeaderPrefix('&:last-of-type')} {
     padding-right: ${tableSidePadding};
   }
-  text-align: right; /* In case when TH itself is bigger we want to keep picker at the right side */
 `;
-const truncatedCellStyles = css({
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  borderRight: `0.5px solid ${`var(--ds-border, ${N40})`}`,
-  borderBottom: `0.5px solid ${`var(--ds-border, ${N40})`}`,
-  '&:first-child': {
-    paddingLeft: `${"var(--ds-space-100, 8px)"}`
-  },
-  '&:last-child': {
-    borderRight: 0,
-    paddingRight: `${"var(--ds-space-100, 8px)"}`
+const TableCell = styled.td`
+  ${withTablePluginBodyPrefix()} {
+    /* First section here is to override things editor table plugin css defines */
+    padding: ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"};
+    border: 0;
+    min-width: auto;
+    vertical-align: inherit;
+    box-sizing: border-box;
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    border-right: 0.5px solid ${`var(--ds-border, ${N40})`};
+    border-bottom: 0.5px solid ${`var(--ds-border, ${N40})`};
   }
-});
+
+  ${withTablePluginBodyPrefix('&:first-child')} {
+    padding-left: ${"var(--ds-space-100, 8px)"};
+  }
+
+  ${withTablePluginBodyPrefix('&:last-child')} {
+    border-right: 0;
+    padding-right: ${"var(--ds-space-100, 8px)"};
+  }
+`;
 const tableContainerStyles = css({
   borderRadius: 'inherit',
   borderBottomLeftRadius: 0,
@@ -233,16 +252,14 @@ export const getOrderedColumns = (columns, visibleColumnKeys) => {
   const alphabeticallySortedInvisibleColumns = columns.filter(column => !visibleColumnKeys.includes(column.key)).sort(sortColumns);
   return [...visibleColumns, ...alphabeticallySortedInvisibleColumns];
 };
-const BASE_WIDTH = 8;
-const DEFAULT_WIDTH = BASE_WIDTH * 22;
-export const COLUMN_MIN_WIDTH = BASE_WIDTH * 3;
+const DEFAULT_WIDTH = COLUMN_BASE_WIDTH * 22;
 const 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) {
   const keyBasedWidth = keyBasedWidthMap[key];
@@ -251,9 +268,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;
   }
@@ -490,7 +507,8 @@ export const IssueLikeDataTableView = ({
       setHasFullSchema(false);
     }
   }, [parentContainerRenderInstanceId, extensionKey, hasFullSchema, onLoadDatasourceDetails]);
-  const shouldUseWidth = onColumnResize || columnCustomSizes;
+  const shouldUseWidth = !!(onColumnResize || columnCustomSizes);
+  const 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
@@ -510,7 +528,8 @@ export const IssueLikeDataTableView = ({
     } : {}
   }, jsx("thead", {
     "data-testid": testId && `${testId}--head`,
-    css: [noDefaultBorderStyles, tableHeadStyles]
+    css: [noDefaultBorderStyles, tableHeadStyles],
+    className: !!onVisibleColumnKeysChange ? 'has-column-picker' : ''
   }, jsx("tr", {
     ref: tableHeaderRowRef
   }, headerColumns.map(({
@@ -526,7 +545,7 @@ export const IssueLikeDataTableView = ({
       level: "h200",
       as: 'span'
     }, content));
-    if (onVisibleColumnKeysChange && hasData) {
+    if (isEditable) {
       var _containerRef$current3;
       const previewRows = tableRows.map(({
         cells
@@ -555,14 +574,12 @@ export const IssueLikeDataTableView = ({
     } else {
       return jsx(TableHeading, {
         key: key,
-        className: !!onVisibleColumnKeysChange ? 'has-column-picker' : '',
         "data-testid": `${key}-column-heading`,
-        style: shouldUseWidth ? {
+        style: getWidthCss({
+          shouldUseWidth,
           width
-        } : {
-          maxWidth: width
-        }
-      }, heading);
+        })
+      }, jsx(Flex, null, heading));
     }
   }), onVisibleColumnKeysChange && jsx(ColumnPickerHeader, null, jsx(ColumnPicker, {
     columns: hasFullSchema ? orderedColumns : [],
@@ -586,11 +603,11 @@ export const IssueLikeDataTableView = ({
     content,
     width
   }, cellIndex) => {
-    let loadingRowStyle = shouldUseWidth ? {
+    const isLastCell = cellIndex === cells.length - 1;
+    let loadingRowStyle = getWidthCss({
+      shouldUseWidth,
       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 = {
@@ -598,11 +615,10 @@ export const IssueLikeDataTableView = ({
         paddingBlock: "var(--ds-space-100, 8px)"
       };
     }
-    return jsx("td", {
+    return jsx(TableCell, {
       key: cellKey,
       "data-testid": testId && `${testId}--cell-${cellIndex}`,
-      colSpan: cellIndex + 1 === cells.length ? 2 : undefined,
-      css: truncatedCellStyles,
+      colSpan: isEditable && isLastCell ? 2 : undefined,
       style: loadingRowStyle
     }, content);
   }))))));

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

@@ -7,24 +7,54 @@ export const Table = styled.table`
 `;
 const lineHeight = "var(--ds-font-lineHeight-300, 24px)";
 const verticalPadding = "var(--ds-space-025, 2px)";
+
+/**
+ * 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 const withTablePluginPrefix = (tableSection, mainRule = '&') => `
+  .pm-table-wrapper > table ${tableSection} ${mainRule},
+  .ProseMirror .pm-table-wrapper > table ${tableSection} ${mainRule},
+  ${mainRule}
+`;
+export const withTablePluginHeaderPrefix = withTablePluginPrefix.bind(null, 'thead');
+export const withTablePluginBodyPrefix = withTablePluginPrefix.bind(null, 'tbody');
 export const TableHeading = styled.th`
-  position: relative;
-  line-height: ${lineHeight};
-  padding: ${verticalPadding} ${"var(--ds-space-050, 4px)"};
-  border-right: 0.5px solid ${`var(--ds-border, ${N40})`};
-  border-bottom: 2px solid ${`var(--ds-border, ${N40})`};
-  height: calc(${lineHeight} * 2 + ${verticalPadding} * 2);
-  vertical-align: bottom;
-
-  &.has-column-picker:nth-last-of-type(2) {
+  ${withTablePluginHeaderPrefix()} {
+    border: 0;
+    position: relative;
+
+    /* This makes resizing work with out jumping due to padding + changes overall width for same default values. */
+    box-sizing: border-box;
+
+    line-height: ${lineHeight};
+    padding: ${verticalPadding} ${"var(--ds-space-050, 4px)"};
+    border-right: 0.5px solid ${`var(--ds-border, ${N40})`};
+    border-bottom: 2px solid ${`var(--ds-border, ${N40})`};
+
+    /*
+      lineHeight * 2 -> Max height of two lined header
+      verticalPadding * 2 -> padding for this component itself
+      verticalPadding * 2 -> padding inside span (--container)
+      2px -> Bottom border
+      Last two terms are needed because of border-box box sizing.
+    */
+    height: calc(${lineHeight} * 2 + ${verticalPadding} * 4 + 2px);
+    vertical-align: bottom;
+    background-color: ${"var(--ds-elevation-surface-current, #FFF)"};
+  }
+
+  ${withTablePluginPrefix('', 'thead.has-column-picker &:nth-last-of-type(2)')} {
     border-right: 0;
   }
 
-  &:first-child {
+  ${withTablePluginHeaderPrefix('&:first-child')} {
     padding-left: ${"var(--ds-space-050, 4px)"};
   }
 
-  &:last-child {
+  ${withTablePluginHeaderPrefix('&:last-child')} {
     border-right: 0;
   }
 

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

@@ -0,0 +1,19 @@
+export const COLUMN_BASE_WIDTH = 8;
+export const 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 const getWidthCss = ({
+  shouldUseWidth,
+  width
+}) => shouldUseWidth ? {
+  width
+} : {
+  maxWidth: width
+};

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

@@ -0,0 +1,55 @@
+/** @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';
+const dropDownItemGroupStyles = xcss({
+  width: '320px',
+  height: '140px',
+  paddingTop: "var(--ds-space-050, 4px)",
+  paddingBottom: "var(--ds-space-050, 4px)",
+  borderRadius: 'border.radius'
+});
+const 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 const DisplayViewDropDown = ({
+  onViewModeChange,
+  viewMode
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const 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: () => 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: () => onViewModeChange('count'),
+    isSelected: viewMode === 'count',
+    description: formatMessage(modalMessages.inlineLinkViewModeDescription),
+    elemBefore: InlineIcon
+  }, jsx(FormattedMessage, modalMessages.inlineLinkViewModeLabel)))));
+};

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @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';
@@ -32,8 +32,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';
 const dropdownContainerStyles = css({
   display: 'flex',
@@ -73,10 +73,10 @@ const smartLinkContainerStyles = css({
   paddingLeft: '1px'
 });
 const 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;
 };
 
 /**
@@ -150,9 +150,6 @@ export const PlainJiraIssuesConfigModal = props => {
     parameters: isParametersSet ? parameters : undefined,
     fieldKeys: visibleColumnKeys
   });
-  const {
-    formatMessage
-  } = useIntl();
   const {
     fireEvent
   } = useDatasourceAnalyticsEvents();
@@ -366,18 +363,11 @@ export const PlainJiraIssuesConfigModal = props => {
     const firstIssueUrl = retrieveUrlForSmartCardRender();
     if (currentViewMode === 'count') {
       macroInsertedEvent === null || macroInsertedEvent === void 0 ? void 0 : macroInsertedEvent.fire(EVENT_CHANNEL);
+      const url = responseItems.length === 1 ? firstIssueUrl : upToDateJqlUrl;
       onInsert({
         type: 'inlineCard',
         attrs: {
-          url: upToDateJqlUrl
-        }
-      }, consumerEvent);
-    } else if (responseItems.length === 1 && firstIssueUrl) {
-      macroInsertedEvent === null || macroInsertedEvent === void 0 ? void 0 : macroInsertedEvent.fire(EVENT_CHANNEL);
-      onInsert({
-        type: 'inlineCard',
-        attrs: {
-          url: firstIssueUrl
+          url
         }
       }, consumerEvent);
     } else {
@@ -405,7 +395,7 @@ export const PlainJiraIssuesConfigModal = props => {
         }
       }, 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]);
   const handleViewModeChange = selectedMode => {
     userInteractionActions.current.add(DatasourceAction.DISPLAY_VIEW_CHANGED);
     setCurrentViewMode(selectedMode);
@@ -451,14 +441,19 @@ export const PlainJiraIssuesConfigModal = props => {
         css: placeholderSmartLinkStyles
       }, jsx(FormattedMessage, modalMessages.issuesCountSmartCardPlaceholderText)));
     } else {
-      const urlWithEncodedJql = `${selectedJiraSiteUrl}/issues/?jql=${encodeURI(jql)}`;
+      let url;
+      if (responseItems.length === 1 && retrieveUrlForSmartCardRender()) {
+        url = retrieveUrlForSmartCardRender();
+      } else {
+        url = `${selectedJiraSiteUrl}/issues/?jql=${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]);
   const renderIssuesModeContent = useCallback(() => {
     const selectedJiraSiteUrl = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
     if (status === 'rejected' && jqlUrl) {
@@ -481,16 +476,8 @@ export const PlainJiraIssuesConfigModal = props => {
         searchMethod: currentSearchMethod
       }));
     }
-    const 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
@@ -506,17 +493,9 @@ export const PlainJiraIssuesConfigModal = props => {
     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/es2019/ui/jira-issues-modal/modal/messages.js

@@ -20,15 +20,25 @@ export const 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/esm/ui/assets-modal/modal/index.js

@@ -204,6 +204,7 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
     }
   }, [defaultVisibleColumnKeys, isNewSearch]);
   var isDisabled = !!errorState || status !== 'resolved' || assetsClientLoading || !aql || !schemaId;
+  var isEditingExistingTable = !!(initialParameters !== null && initialParameters !== void 0 && initialParameters.aql && initialParameters !== null && initialParameters !== void 0 && initialParameters.schemaId && initialParameters !== null && initialParameters !== void 0 && initialParameters.workspaceId);
   var retrieveUrlForSmartCardRender = useCallback(function () {
     var _data$key;
     var _responseItems = _slicedToArray(responseItems, 1),
@@ -362,7 +363,7 @@ var PlainAssetsConfigModal = function PlainAssetsConfigModal(props) {
     onClick: onInsertPressed,
     isDisabled: isDisabled,
     testId: 'assets-datasource-modal--insert-button'
-  }, jsx(FormattedMessage, _extends({}, modalMessages.insertIssuesButtonText, {
+  }, jsx(FormattedMessage, _extends({}, isEditingExistingTable ? modalMessages.updateObjectsButtonText : modalMessages.insertIssuesButtonText, {
     values: {
       objectsCount: responseItems.length
     }

package/dist/esm/ui/assets-modal/modal/messages.js

@@ -5,6 +5,11 @@ export var modalMessages = defineMessages({
     description: 'Button text to close the modal with no changes being made',
     defaultMessage: 'Cancel'
   },
+  updateObjectsButtonText: {
+    id: 'linkDataSource.assets.configmodal.updateObjectsButtonText',
+    description: 'Button text to update the displayed content',
+    defaultMessage: 'Update table'
+  },
   insertIssuesButtonText: {
     id: 'linkDataSource.assets.configmodal.insertIssuesButtonText',
     description: 'Button text to insert the displayed content',

package/dist/esm/ui/issue-like-table/draggable-table-heading.js

@@ -16,7 +16,7 @@ import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util
 import { offsetFromPointer } from '@atlaskit/pragmatic-drag-and-drop/util/offset-from-pointer';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
 import { TableHeading } from './styled';
-import { COLUMN_MIN_WIDTH } from './index';
+import { COLUMN_MIN_WIDTH, getWidthCss } from './utils';
 var verticallyAlignedStyles = css({
   display: 'flex',
   alignItems: 'center',
@@ -242,9 +242,6 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
 
         // Set the width of our header being resized
         var proposedWidth = initialWidth + relativeDistanceX;
-        if (initialWidth >= COLUMN_MIN_WIDTH && proposedWidth < COLUMN_MIN_WIDTH) {
-          proposedWidth = COLUMN_MIN_WIDTH;
-        }
 
         // We update width css directly live
         mainHeaderCell.style.setProperty('width', "".concat(proposedWidth, "px"));
@@ -253,24 +250,24 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
         cancelUnhandled.stop();
         setState(idleState);
         if (onWidthChange) {
-          // We use element's css value as a source of truth (compare to another Ref)
-          var currentWidthPx = mainHeaderCell.style.getPropertyValue('width');
-          onWidthChange(+currentWidthPx.slice(0, -2));
+          var cssWidth = +mainHeaderCell.style.getPropertyValue('width').slice(0, -2);
+          if (cssWidth < COLUMN_MIN_WIDTH) {
+            cssWidth = COLUMN_MIN_WIDTH;
+          }
+          onWidthChange(cssWidth);
         }
       }
     });
   }, [id, index, onWidthChange, state, tableId, width]);
   return jsx(TableHeading, {
     ref: mainHeaderCellRef,
-    className: "has-column-picker",
     "data-testid": "".concat(id, "-column-heading"),
     style: _objectSpread({
       cursor: 'grab'
-    }, onWidthChange ? {
+    }, getWidthCss({
+      shouldUseWidth: !!onWidthChange,
       width: width
-    } : {
-      maxWidth: width
-    })
+    }))
   }, onWidthChange ? jsx("div", {
     ref: columnResizeHandleRef,
     css: [resizerStyles, state.type === 'resizing' && resizingStyles],