@atlaskit/link-datasource 1.24.6 → 1.24.8

package/dist/esm/ui/common/modal/content-container/index.js

@@ -0,0 +1,29 @@
+/** @jsx jsx */
+
+import { jsx } from '@emotion/react';
+import { Box, xcss } from '@atlaskit/primitives';
+import { N40 } from '@atlaskit/theme/colors';
+import { scrollableContainerShadowsCssComponents } from '../../../issue-like-table';
+var contentContainerStyles = xcss({
+  display: 'grid',
+  maxHeight: '420px',
+  overflow: 'auto',
+  borderBottom: "2px solid ".concat("var(--ds-background-accent-gray-subtler, ".concat(N40, ")")),
+  backgroundImage: scrollableContainerShadowsCssComponents.backgroundImage,
+  backgroundPosition: scrollableContainerShadowsCssComponents.backgroundPosition,
+  backgroundRepeat: scrollableContainerShadowsCssComponents.backgroundRepeat,
+  backgroundSize: scrollableContainerShadowsCssComponents.backgroundSize,
+  backgroundAttachment: scrollableContainerShadowsCssComponents.backgroundAttachment
+});
+var tableContainerStyles = xcss({
+  borderTopLeftRadius: "var(--ds-border-radius-200, 8px)",
+  borderTopRightRadius: "var(--ds-border-radius-200, 8px)",
+  border: "1px solid ".concat("var(--ds-border, ".concat(N40, ")"))
+});
+export var ContentContainer = function ContentContainer(_ref) {
+  var children = _ref.children,
+    withTableBorder = _ref.withTableBorder;
+  return jsx(Box, {
+    xcss: [contentContainerStyles, withTableBorder && tableContainerStyles]
+  }, children);
+};

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

@@ -0,0 +1,38 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { BasicSearchInput } from '../../common/modal/basic-search-input';
+import { searchMessages } from './messages';
+var ConfluenceSearchContainer = function ConfluenceSearchContainer(_ref) {
+  var cloudId = _ref.cloudId,
+    initialSearchValue = _ref.initialSearchValue,
+    isSearching = _ref.isSearching,
+    onSearch = _ref.onSearch;
+  var currentCloudId = useRef(cloudId);
+  var _useState = useState(initialSearchValue !== null && initialSearchValue !== void 0 ? initialSearchValue : ''),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchBarSearchString = _useState2[0],
+    setSearchBarSearchString = _useState2[1];
+  var handleSearchChange = useCallback(function (e) {
+    var rawSearch = e.currentTarget.value;
+    setSearchBarSearchString(rawSearch);
+  }, []);
+
+  // TODO: further refactoring in EDM-9573
+  // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6827913
+  useEffect(function () {
+    if (currentCloudId.current !== cloudId) {
+      setSearchBarSearchString('');
+      currentCloudId.current = cloudId;
+    }
+  }, [cloudId]);
+  return /*#__PURE__*/React.createElement(BasicSearchInput, {
+    testId: "confluence-search-datasource-modal--search-input",
+    isSearching: isSearching,
+    onChange: handleSearchChange,
+    onSearch: onSearch,
+    searchTerm: searchBarSearchString,
+    placeholder: searchMessages.searchLabel,
+    fullWidth: true
+  });
+};
+export default ConfluenceSearchContainer;

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

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export var searchMessages = defineMessages({
+  searchLabel: {
+    id: 'linkDataSource.confluence-search.configmodal.searchLabel',
+    description: 'Placeholder text for the search input box',
+    defaultMessage: 'Enter keywords to find pages, attachments, and more'
+  }
+});

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

@@ -1,40 +1,57 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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; }
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 /** @jsx jsx */
-import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { jsx } from '@emotion/react';
-import { FormattedMessage } from 'react-intl-next';
+import { FormattedMessage, FormattedNumber } from 'react-intl-next';
+import { v4 as uuidv4 } from 'uuid';
 import Button from '@atlaskit/button/standard-button';
 import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@atlaskit/modal-dialog';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
-import { N40 } from '@atlaskit/theme/colors';
+import LinkUrl from '@atlaskit/smart-card/link-url';
+import { N800 } from '@atlaskit/theme/colors';
 import { fetchMessagesForLocale } from '../../../common/utils/locale/fetch-messages-for-locale';
+import { useDatasourceTableState } from '../../../hooks/useDatasourceTableState';
 import i18nEN from '../../../i18n/en';
 import { getAvailableSites } from '../../../services/getAvailableSites';
+import { AccessRequired } from '../../common/error-state/access-required';
+import { ModalLoadingError } from '../../common/error-state/modal-loading-error';
 import { NoInstancesView } from '../../common/error-state/no-instances';
+import { NoResults } from '../../common/error-state/no-results';
 import { InitialStateView } from '../../common/initial-state-view';
-import { BasicSearchInput } from '../../common/modal/basic-search-input';
+import { ContentContainer } from '../../common/modal/content-container';
 import { SiteSelector } from '../../common/modal/site-selector';
-import { scrollableContainerShadowsCssComponents } from '../../issue-like-table';
+import { EmptyState, IssueLikeDataTableView } from '../../issue-like-table';
+import ConfluenceSearchContainer from '../confluence-search-container';
 import { ConfluenceSearchInitialStateSVG } from './confluence-search-initial-state-svg';
 import { confluenceSearchModalMessages } from './messages';
-var contentContainerStyles = xcss({
-  display: 'grid',
-  maxHeight: '420px',
-  overflow: 'auto',
-  borderBottom: "2px solid ".concat("var(--ds-background-accent-gray-subtler, ".concat(N40, ")")),
-  backgroundImage: scrollableContainerShadowsCssComponents.backgroundImage,
-  backgroundPosition: scrollableContainerShadowsCssComponents.backgroundPosition,
-  backgroundRepeat: scrollableContainerShadowsCssComponents.backgroundRepeat,
-  backgroundSize: scrollableContainerShadowsCssComponents.backgroundSize,
-  backgroundAttachment: scrollableContainerShadowsCssComponents.backgroundAttachment
+var inputContainerStyles = xcss({
+  alignItems: 'baseline',
+  display: 'flex',
+  minHeight: '72px'
+});
+var searchCountStyles = xcss({
+  flex: 1,
+  fontWeight: 600
 });
 export var ConfluenceSearchConfigModal = function ConfluenceSearchConfigModal(props) {
-  var initialParameters = props.parameters,
-    onCancel = props.onCancel;
+  var _useRef = useRef(uuidv4()),
+    modalRenderInstanceId = _useRef.current;
+  var datasourceId = props.datasourceId,
+    initialColumnCustomSizes = props.columnCustomSizes,
+    initialWrappedColumnKeys = props.wrappedColumnKeys,
+    onCancel = props.onCancel,
+    initialParameters = props.parameters,
+    urlBeingEdited = props.url,
+    initialVisibleColumnKeys = props.visibleColumnKeys;
   var _useState = useState(undefined),
     _useState2 = _slicedToArray(_useState, 2),
     availableSites = _useState2[0],
@@ -43,13 +60,44 @@ export var ConfluenceSearchConfigModal = function ConfluenceSearchConfigModal(pr
     _useState4 = _slicedToArray(_useState3, 2),
     cloudId = _useState4[0],
     setCloudId = _useState4[1];
-  var _useState5 = useState(''),
+  var _useState5 = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.searchString),
     _useState6 = _slicedToArray(_useState5, 2),
-    searchTerm = _useState6[0],
-    setSearchTerm = _useState6[1];
-  var onSiteSelection = useCallback(function (site) {
-    setCloudId(site.cloudId);
-  }, [setCloudId]);
+    searchString = _useState6[0],
+    setSearchString = _useState6[1];
+  var _useState7 = useState(initialVisibleColumnKeys),
+    _useState8 = _slicedToArray(_useState7, 2),
+    visibleColumnKeys = _useState8[0],
+    setVisibleColumnKeys = _useState8[1];
+
+  // TODO: further refactoring in EDM-9573
+  // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6829210
+  var parameters = useMemo(function () {
+    return cloudId ? {
+      cloudId: cloudId,
+      searchString: searchString
+    } : undefined;
+  }, [cloudId, searchString /** Add more parameters when more filters are added */]);
+  var isParametersSet = useMemo(function () {
+    return !!cloudId && Object.values(parameters !== null && parameters !== void 0 ? parameters : {}).filter(function (v) {
+      return v !== undefined;
+    }).length > 1;
+  }, [cloudId, parameters]);
+  var _useDatasourceTableSt = useDatasourceTableState({
+      datasourceId: datasourceId,
+      parameters: isParametersSet ? parameters : undefined,
+      fieldKeys: visibleColumnKeys
+    }),
+    reset = _useDatasourceTableSt.reset,
+    status = _useDatasourceTableSt.status,
+    onNextPage = _useDatasourceTableSt.onNextPage,
+    responseItems = _useDatasourceTableSt.responseItems,
+    hasNextPage = _useDatasourceTableSt.hasNextPage,
+    columns = _useDatasourceTableSt.columns,
+    defaultVisibleColumnKeys = _useDatasourceTableSt.defaultVisibleColumnKeys,
+    loadDatasourceDetails = _useDatasourceTableSt.loadDatasourceDetails,
+    _useDatasourceTableSt2 = _useDatasourceTableSt.extensionKey,
+    extensionKey = _useDatasourceTableSt2 === void 0 ? null : _useDatasourceTableSt2,
+    totalCount = _useDatasourceTableSt.totalCount;
   var hasNoConfluenceSites = availableSites && availableSites.length === 0;
   var selectedConfluenceSite = useMemo(function () {
     if (cloudId) {
@@ -66,10 +114,24 @@ export var ConfluenceSearchConfigModal = function ConfluenceSearchConfigModal(pr
       })) || (availableSites === null || availableSites === void 0 ? void 0 : availableSites[0]);
     }
   }, [availableSites, cloudId]);
-  var handleSearchChange = useCallback(function (e) {
-    var rawSearch = e.currentTarget.value;
-    setSearchTerm(rawSearch);
-  }, [setSearchTerm]);
+
+  // TODO: further refactoring in EDM-9573
+  // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6828283
+  useEffect(function () {
+    if (selectedConfluenceSite && (!cloudId || cloudId !== selectedConfluenceSite.cloudId)) {
+      setCloudId(selectedConfluenceSite.cloudId);
+    }
+  }, [cloudId, selectedConfluenceSite]);
+
+  // TODO: further refactoring in EDM-9573
+  // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6829171
+  var onSiteSelection = useCallback(function (site) {
+    setSearchString(undefined);
+    setCloudId(site.cloudId);
+    reset({
+      shouldForceRequest: true
+    });
+  }, [reset]);
   useEffect(function () {
     var fetchSiteDisplayNames = /*#__PURE__*/function () {
       var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
@@ -98,6 +160,101 @@ export var ConfluenceSearchConfigModal = function ConfluenceSearchConfigModal(pr
     void fetchSiteDisplayNames();
   }, []);
   var siteSelectorLabel = availableSites && availableSites.length > 1 ? confluenceSearchModalMessages.insertIssuesTitleManySites : confluenceSearchModalMessages.insertIssuesTitle;
+  var _useState9 = useState(initialColumnCustomSizes),
+    _useState10 = _slicedToArray(_useState9, 2),
+    columnCustomSizes = _useState10[0],
+    setColumnCustomSizes = _useState10[1];
+  var onColumnResize = useCallback(function (key, width) {
+    setColumnCustomSizes(_objectSpread(_objectSpread({}, columnCustomSizes), {}, _defineProperty({}, key, width)));
+  }, [columnCustomSizes]);
+  var _useState11 = useState(initialWrappedColumnKeys),
+    _useState12 = _slicedToArray(_useState11, 2),
+    wrappedColumnKeys = _useState12[0],
+    setWrappedColumnKeys = _useState12[1];
+  var onWrappedColumnChange = useCallback(function (key, isWrapped) {
+    var set = new Set(wrappedColumnKeys);
+    if (isWrapped) {
+      set.add(key);
+    } else {
+      set.delete(key);
+    }
+    setWrappedColumnKeys(Array.from(set));
+  }, [wrappedColumnKeys]);
+
+  // TODO: further refactoring in EDM-9573
+  // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6798258
+  var confluenceSearchTable = useMemo(function () {
+    return jsx(ContentContainer, {
+      withTableBorder: true
+    }, jsx(IssueLikeDataTableView, {
+      testId: "confluence-search-datasource-table",
+      status: status,
+      columns: columns,
+      items: responseItems,
+      hasNextPage: hasNextPage,
+      visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
+      onNextPage: onNextPage,
+      onLoadDatasourceDetails: loadDatasourceDetails,
+      onVisibleColumnKeysChange: setVisibleColumnKeys,
+      parentContainerRenderInstanceId: modalRenderInstanceId,
+      extensionKey: extensionKey,
+      columnCustomSizes: columnCustomSizes,
+      onColumnResize: onColumnResize,
+      wrappedColumnKeys: wrappedColumnKeys,
+      onWrappedColumnChange: getBooleanFF('platform.linking-platform.datasource-word_wrap') ? onWrappedColumnChange : undefined
+    }));
+  }, [status, columns, responseItems, hasNextPage, visibleColumnKeys, defaultVisibleColumnKeys, onNextPage, loadDatasourceDetails, setVisibleColumnKeys, modalRenderInstanceId, extensionKey, columnCustomSizes, onColumnResize, wrappedColumnKeys, onWrappedColumnChange]);
+  var resolvedWithNoResults = status === 'resolved' && !responseItems.length;
+  var hasConfluenceSearchParams = selectedConfluenceSite && searchString;
+  var selectedConfluenceSiteUrl = selectedConfluenceSite === null || selectedConfluenceSite === void 0 ? void 0 : selectedConfluenceSite.url;
+  var confluenceSearchUrl = selectedConfluenceSiteUrl && searchString !== undefined && "".concat(selectedConfluenceSiteUrl, "/wiki/search/?text=").concat(encodeURI(searchString));
+  var renderModalContent = useCallback(function () {
+    if (status === 'rejected') {
+      return jsx(ModalLoadingError, null);
+    } else if (status === 'unauthorized') {
+      return jsx(AccessRequired, {
+        url: selectedConfluenceSiteUrl || urlBeingEdited
+      });
+    } else if (resolvedWithNoResults || status === 'forbidden') {
+      return jsx(NoResults, null);
+    } else if (status === 'empty' || !columns.length) {
+      // persist the empty state when making the initial /data request which contains the columns
+      if (hasConfluenceSearchParams !== undefined) {
+        return jsx(EmptyState, {
+          testId: "confluence-search-datasource-modal--empty-state"
+        });
+      }
+      return jsx(ContentContainer, null, jsx(InitialStateView, {
+        icon: jsx(ConfluenceSearchInitialStateSVG, null),
+        title: confluenceSearchModalMessages.initialViewSearchTitle,
+        description: confluenceSearchModalMessages.initialViewSearchDescription
+      }));
+    }
+    return confluenceSearchTable;
+  }, [columns.length, selectedConfluenceSiteUrl, confluenceSearchTable, resolvedWithNoResults, status, urlBeingEdited, hasConfluenceSearchParams]);
+  var shouldShowResultsCount = !!totalCount && totalCount !== 1;
+  var onInsertPressed = useCallback(function () {
+    // eslint-disable-next-line no-console
+    // TODO: Implement onInsert in EDM-9412
+    /**
+     * onInsert(
+          {
+            type: 'inlineCard',
+            attrs: {
+              url,
+            },
+          } as InlineCardAdf,
+          consumerEvent,
+        );
+     */
+  }, []);
+  var onSearch = useCallback(function (newSearchString) {
+    setSearchString(newSearchString);
+    reset({
+      shouldForceRequest: true
+    });
+  }, [reset]);
+  var isInsertDisabled = !isParametersSet || status === 'rejected' || status === 'unauthorized' || status === 'loading';
   return jsx(IntlMessagesProvider, {
     defaultMessages: i18nEN,
     loaderFn: fetchMessagesForLocale
@@ -112,31 +269,40 @@ export var ConfluenceSearchConfigModal = function ConfluenceSearchConfigModal(pr
     selectedSite: selectedConfluenceSite,
     testId: "confluence-search-datasource-modal--site-selector",
     label: siteSelectorLabel
-  }))), jsx(ModalBody, null, !hasNoConfluenceSites ? jsx(Fragment, null, jsx(BasicSearchInput, {
-    testId: "confluence-search-datasource-modal",
+  }))), jsx(ModalBody, null, !hasNoConfluenceSites ? jsx(Fragment, null, jsx(Box, {
+    xcss: inputContainerStyles
+  }, jsx(ConfluenceSearchContainer, {
+    cloudId: cloudId,
     isSearching: status === 'loading',
-    onChange: handleSearchChange,
-    onSearch: function onSearch() {},
-    searchTerm: searchTerm,
-    placeholder: confluenceSearchModalMessages.searchLabel,
-    fullWidth: true
-  }), jsx(Box, {
-    xcss: contentContainerStyles
-  }, jsx(InitialStateView, {
-    icon: jsx(ConfluenceSearchInitialStateSVG, null),
-    title: confluenceSearchModalMessages.initialViewSearchTitle,
-    description: confluenceSearchModalMessages.initialViewSearchDescription
-  }))) : jsx(NoInstancesView, {
+    onSearch: onSearch,
+    initialSearchValue: initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.searchString
+  })), renderModalContent()) : jsx(NoInstancesView, {
     title: confluenceSearchModalMessages.noAccessToConfluenceSitesTitle,
     description: confluenceSearchModalMessages.noAccessToConfluenceSitesDescription,
     testId: 'no-confluence-instances-content'
-  })), jsx(ModalFooter, null, jsx(Button, {
+  })), jsx(ModalFooter, null, shouldShowResultsCount && confluenceSearchUrl && jsx(Box, {
+    testId: "confluence-search-datasource-modal-total-results-count",
+    xcss: searchCountStyles
+  }, jsx(LinkUrl, {
+    href: confluenceSearchUrl,
+    target: "_blank",
+    testId: "item-count-url",
+    style: {
+      color: "var(--ds-text-accent-gray, ".concat(N800, ")")
+    }
+  }, jsx(FormattedNumber, {
+    value: totalCount
+  }), ' ', jsx(FormattedMessage, _extends({}, confluenceSearchModalMessages.searchCountText, {
+    values: {
+      totalCount: totalCount
+    }
+  })))), jsx(Button, {
     appearance: "default",
     onClick: onCancel
   }, jsx(FormattedMessage, confluenceSearchModalMessages.cancelButtonText)), !hasNoConfluenceSites && jsx(Button, {
     appearance: "primary",
-    onClick: function onClick() {},
-    isDisabled: true,
+    onClick: onInsertPressed,
+    isDisabled: isInsertDisabled,
     testId: "confluence-search-datasource-modal--insert-button"
   }, jsx(FormattedMessage, confluenceSearchModalMessages.insertResultsButtonText)))));
 };

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

@@ -10,10 +10,10 @@ export var confluenceSearchModalMessages = defineMessages({
     description: 'Button text to insert the displayed content',
     defaultMessage: 'Insert results'
   },
-  searchLabel: {
-    id: 'linkDataSource.confluence-search.configmodal.searchLabel',
-    description: 'Placeholder text for the search input box',
-    defaultMessage: 'Enter keywords to find pages, attachments, and more'
+  searchCountText: {
+    id: 'linkDataSource.confluence-search.configmodal.resultsCountText',
+    description: 'Text that appears after search count number.',
+    defaultMessage: '{totalCount, plural, one {result} other {results}}'
   },
   insertIssuesTitle: {
     id: 'linkDataSource.confluence-search.configmodal.insertConfluenceTitle',

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

@@ -0,0 +1 @@
+export {};

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

@@ -5,11 +5,12 @@ var _excluded = ["children"];
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { components } from '@atlaskit/select';
+import { fontFallback } from '@atlaskit/theme/typography';
 import { columnPickerMessages } from './messages';
 export var SELECT_ITEMS_MAXIMUM_THRESHOLD = 200;
 var messageStyles = css({
   color: "var(--ds-text-subtle, #44546F)",
-  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-body-small, ".concat(fontFallback.body.small, ")"),
   fontWeight: "var(--ds-font-weight-regular, 400)"
 });
 export var ConcatenatedMenuList = function ConcatenatedMenuList(_ref) {

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

@@ -3,6 +3,7 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import styled from '@emotion/styled';
 import { N40 } from '@atlaskit/theme/colors';
+import { fontFallback } from '@atlaskit/theme/typography';
 import { TableHeading } from './styled';
 var maxWidth = '200px';
 var firstLastChildOverride = "\n  &:first-of-type, &:last-of-type {\n    padding-left: ".concat("var(--ds-space-100, 8px)", ";\n    padding-right: ", "var(--ds-space-100, 8px)", ";\n  }\n");
@@ -27,7 +28,7 @@ var tableStyles = css({
   background: "var(--ds-surface, #FFF)",
   borderCollapse: 'separate',
   borderSpacing: 0,
-  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-body, ".concat(fontFallback.body.medium, ")"),
   maxWidth: maxWidth
 });
 export var DragColumnPreview = function DragColumnPreview(_ref) {

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

@@ -20,6 +20,7 @@ import { autoScroller } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { N40 } from '@atlaskit/theme/colors';
+import { fontFallback } from '@atlaskit/theme/typography';
 import Tooltip from '@atlaskit/tooltip';
 import { startUfoExperience, succeedUfoExperience } from '../../analytics/ufoExperiences';
 import { stickyTableHeadersIndex } from '../../common/zindex';
@@ -78,6 +79,8 @@ var TableCell = styled.td((_styled$td = {}, _defineProperty(_styled$td, "".conca
 }), _defineProperty(_styled$td, "".concat(withTablePluginBodyPrefix('&:last-child')), {
   borderRight: 0,
   paddingRight: "var(--ds-space-100, 8px)"
+}), _defineProperty(_styled$td, "& [data-testid='inline-card-icon-and-title'], " + "& [data-testid='button-connect-account'] > span", {
+  whiteSpace: 'unset'
 }), _styled$td));
 var tableContainerStyles = css({
   borderRadius: 'inherit',
@@ -188,7 +191,7 @@ var noDefaultBorderStyles = css({
   borderBottom: 0
 });
 var headerStyles = css({
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-body-UNSAFE_small, ".concat(fontFallback.body.UNSAFE_small, ")"),
   fontWeight: "var(--ds-font-weight-medium, 500)"
 });
 var headingHoverEffectStyles = css({

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

@@ -2,8 +2,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _styled$th;
 import styled from '@emotion/styled';
 import { N40 } from '@atlaskit/theme/colors';
+import { fontFallback } from '@atlaskit/theme/typography';
 export var ScrollableContainerHeight = 590;
-export var fieldTextFontSize = "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)";
+export var fieldTextFontSize = "var(--ds-font-body, ".concat(fontFallback.body.medium, ")");
 export var Table = styled.table({
   width: '100%'
 });

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

@@ -17,7 +17,7 @@ import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import LinkUrl from '@atlaskit/smart-card/link-url';
-import { B400, N0, N40, N800 } from '@atlaskit/theme/colors';
+import { B400, N0, N800 } from '@atlaskit/theme/colors';
 import { EVENT_CHANNEL, useDatasourceAnalyticsEvents } from '../../../analytics';
 import { componentMetadata } from '../../../analytics/constants';
 import { DatasourceAction, DatasourceDisplay } from '../../../analytics/types';
@@ -37,8 +37,9 @@ import { NoInstancesView } from '../../common/error-state/no-instances';
 import { NoResults } from '../../common/error-state/no-results';
 import { InitialStateView } from '../../common/initial-state-view';
 import { initialStateViewMessages } from '../../common/initial-state-view/messages';
+import { ContentContainer } from '../../common/modal/content-container';
 import { SiteSelector } from '../../common/modal/site-selector';
-import { EmptyState, IssueLikeDataTableView, scrollableContainerShadowsCssComponents } from '../../issue-like-table';
+import { EmptyState, IssueLikeDataTableView } from '../../issue-like-table';
 import LinkRenderType from '../../issue-like-table/render-type/link';
 import { availableBasicFilterTypes } from '../basic-filters/ui';
 import { isQueryTooComplex } from '../basic-filters/utils/isQueryTooComplex';
@@ -46,22 +47,6 @@ import { JiraSearchContainer } from '../jira-search-container';
 import { JiraDisplayViewDropDown } from './jira-display-view-dropdown/jira-display-view-drop-down';
 import { JiraInitialStateSVG } from './jira-issues-initial-state-svg';
 import { modalMessages } from './messages';
-var tableContainerStyles = css({
-  borderTopLeftRadius: "var(--ds-border-radius-200, 8px)",
-  borderTopRightRadius: "var(--ds-border-radius-200, 8px)",
-  border: "1px solid ".concat("var(--ds-border, ".concat(N40, ")"))
-});
-var contentContainerStyles = css({
-  display: 'grid',
-  maxHeight: '420px',
-  overflow: 'auto',
-  borderBottom: "2px solid ".concat("var(--ds-background-accent-gray-subtler, ".concat(N40, ")")),
-  backgroundImage: scrollableContainerShadowsCssComponents.backgroundImage,
-  backgroundPosition: scrollableContainerShadowsCssComponents.backgroundPosition,
-  backgroundRepeat: scrollableContainerShadowsCssComponents.backgroundRepeat,
-  backgroundSize: scrollableContainerShadowsCssComponents.backgroundSize,
-  backgroundAttachment: scrollableContainerShadowsCssComponents.backgroundAttachment
-});
 var placeholderSmartLinkStyles = css({
   backgroundColor: "var(--ds-surface-raised, ".concat(N0, ")"),
   borderRadius: "var(--ds-border-radius-200, 3px)",
@@ -466,8 +451,8 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
     setVisibleColumnKeys(newVisibleColumnKeys);
   }, [visibleColumnKeys]);
   var issueLikeDataTableView = useMemo(function () {
-    return jsx("div", {
-      css: [tableContainerStyles, contentContainerStyles]
+    return jsx(ContentContainer, {
+      withTableBorder: true
     }, jsx(IssueLikeDataTableView, {
       testId: "jira-datasource-table",
       status: status,
@@ -517,7 +502,15 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
     var selectedJiraSiteUrl = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
     if (status === 'rejected' && jqlUrl) {
       return jsx(ModalLoadingError, {
-        url: jqlUrl
+        errorMessage: jqlUrl ? jsx(FormattedMessage, _extends({}, modalMessages.checkConnectionWithSource, {
+          values: {
+            a: function a(urlText) {
+              return jsx("a", {
+                href: jqlUrl
+              }, urlText);
+            }
+          }
+        })) : undefined
       });
     } else if (status === 'unauthorized') {
       return jsx(AccessRequired, {
@@ -527,8 +520,8 @@ export var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(prop
       return jsx(NoResults, null);
     } else if (status === 'empty' || !columns.length) {
       // persist the empty state when making the initial /data request which contains the columns
-      return jsx("div", {
-        css: [contentContainerStyles, !!jql && tableContainerStyles]
+      return jsx(ContentContainer, {
+        withTableBorder: !!jql
       }, !!jql ? jsx(EmptyState, {
         testId: "jira-datasource-modal--empty-state"
       }) : jsx(InitialStateView, {

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

@@ -115,5 +115,10 @@ export var modalMessages = defineMessages({
     id: 'linkDataSource.jira-issues.no.jira.sites.access.description',
     description: 'Description that shows in the modal when user has no access to any Jira sites',
     defaultMessage: 'To request access, contact your admin.'
+  },
+  checkConnectionWithSource: {
+    id: 'linkDataSource.jira-issues.checkConnectionWithSource',
+    description: 'Instructions to let the user know how to resolve the error that occured, or click the link provided to open the query in Jira',
+    defaultMessage: 'Check your connection and refresh, or <a>open this query in Jira</a> to review.'
   }
 });

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

@@ -80,6 +80,7 @@ export var ModeSwitcher = function ModeSwitcher(props) {
       tooltipText = _ref.tooltipText;
     var isSelected = value === selectedOptionValue;
     return jsx(Tooltip, {
+      key: value,
       content: tooltipText
     }, function (tooltipProps) {
       return jsx("label", _extends({}, tooltipProps, {

package/dist/types/common/types.d.ts

@@ -1,8 +1,5 @@
 import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { DatasourceAdf, InlineCardAdf } from '@atlaskit/linking-common/types';
-import { DatasourceParameters } from '@atlaskit/linking-types';
 import { IssueLikeDataTableViewProps } from '../ui/issue-like-table/types';
-import { JiraIssueDatasourceParameters } from '../ui/jira-issues-modal/types';
 export type JiraSearchMethod = 'basic' | 'jql';
 export interface Site {
     cloudId: string;
@@ -10,17 +7,17 @@ export interface Site {
     url: string;
 }
 export type IssueViewModes = 'issue' | 'count';
-export type ConfigModalProps = {
+export type ConfigModalProps<ADF, Parameters> = {
     /** Unique identifier for which type of datasource is being rendered and for making its requests */
     datasourceId: string;
     /** The url that was used to insert a List of Links */
     url?: string;
     /** Parameters for making the data requests necessary to render data within the table */
-    parameters?: DatasourceParameters | JiraIssueDatasourceParameters;
+    parameters?: Parameters;
     /** Callback function to be invoked when the modal is closed either via cancel button click, esc keydown, or modal blanket click */
     onCancel: () => void;
     /** Callback function to be invoked when the insert issues button is clicked */
-    onInsert: (adf: InlineCardAdf | DatasourceAdf, analyticsEvent?: UIAnalyticsEvent) => void;
+    onInsert: (adf: ADF, analyticsEvent?: UIAnalyticsEvent) => void;
     /** The view mode that the modal will show on open:
      * - Table = Displays a list of links in table format
      * - Inline link = Presents a smart link that shows the count of query results. However, if there's only one result, it converts to an inline smart link of that issue.

package/dist/types/ui/common/error-state/messages.d.ts

@@ -39,16 +39,6 @@ export declare const loadingErrorMessages: {
         description: string;
         defaultMessage: string;
     };
-    checkConnectionWithSourceDuplicate: {
-        id: string;
-        description: string;
-        defaultMessage: string;
-    };
-    checkConnectionWithSource: {
-        id: string;
-        description: string;
-        defaultMessage: string;
-    };
     noResultsFoundDuplicate: {
         id: string;
         description: string;

package/dist/types/ui/common/error-state/modal-loading-error.d.ts

@@ -1,6 +1,7 @@
+/// <reference types="react" />
 import { jsx } from '@emotion/react';
 interface ModalLoadingErrorProps {
-    url?: string;
+    errorMessage?: React.ReactNode;
 }
-export declare const ModalLoadingError: ({ url }: ModalLoadingErrorProps) => jsx.JSX.Element;
+export declare const ModalLoadingError: ({ errorMessage, }: ModalLoadingErrorProps) => jsx.JSX.Element;
 export {};