@atlaskit/link-datasource 1.24.6 → 1.24.8

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

@@ -1,44 +1,81 @@
+import _extends from "@babel/runtime/helpers/extends";
 /** @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';
-const contentContainerStyles = xcss({
-  display: 'grid',
-  maxHeight: '420px',
-  overflow: 'auto',
-  borderBottom: `2px solid ${`var(--ds-background-accent-gray-subtler, ${N40})`}`,
-  backgroundImage: scrollableContainerShadowsCssComponents.backgroundImage,
-  backgroundPosition: scrollableContainerShadowsCssComponents.backgroundPosition,
-  backgroundRepeat: scrollableContainerShadowsCssComponents.backgroundRepeat,
-  backgroundSize: scrollableContainerShadowsCssComponents.backgroundSize,
-  backgroundAttachment: scrollableContainerShadowsCssComponents.backgroundAttachment
+const inputContainerStyles = xcss({
+  alignItems: 'baseline',
+  display: 'flex',
+  minHeight: '72px'
+});
+const searchCountStyles = xcss({
+  flex: 1,
+  fontWeight: 600
 });
 export const ConfluenceSearchConfigModal = props => {
   const {
+    current: modalRenderInstanceId
+  } = useRef(uuidv4());
+  const {
+    datasourceId,
+    columnCustomSizes: initialColumnCustomSizes,
+    wrappedColumnKeys: initialWrappedColumnKeys,
+    onCancel,
     parameters: initialParameters,
-    onCancel
+    url: urlBeingEdited,
+    visibleColumnKeys: initialVisibleColumnKeys
   } = props;
   const [availableSites, setAvailableSites] = useState(undefined);
   const [cloudId, setCloudId] = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.cloudId);
-  const [searchTerm, setSearchTerm] = useState('');
-  const onSiteSelection = useCallback(site => {
-    setCloudId(site.cloudId);
-  }, [setCloudId]);
+  const [searchString, setSearchString] = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.searchString);
+  const [visibleColumnKeys, setVisibleColumnKeys] = useState(initialVisibleColumnKeys);
+
+  // TODO: further refactoring in EDM-9573
+  // https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo/pull-requests/82725/overview?commentId=6829210
+  const parameters = useMemo(() => cloudId ? {
+    cloudId,
+    searchString
+  } : undefined, [cloudId, searchString /** Add more parameters when more filters are added */]);
+  const isParametersSet = useMemo(() => !!cloudId && Object.values(parameters !== null && parameters !== void 0 ? parameters : {}).filter(v => v !== undefined).length > 1, [cloudId, parameters]);
+  const {
+    reset,
+    status,
+    onNextPage,
+    responseItems,
+    hasNextPage,
+    columns,
+    defaultVisibleColumnKeys,
+    loadDatasourceDetails,
+    extensionKey = null,
+    totalCount
+  } = useDatasourceTableState({
+    datasourceId,
+    parameters: isParametersSet ? parameters : undefined,
+    fieldKeys: visibleColumnKeys
+  });
   const hasNoConfluenceSites = availableSites && availableSites.length === 0;
   const selectedConfluenceSite = useMemo(() => {
     if (cloudId) {
@@ -51,10 +88,24 @@ export const ConfluenceSearchConfigModal = props => {
       return (availableSites === null || availableSites === void 0 ? void 0 : availableSites.find(confluenceSite => confluenceSite.url === currentlyLoggedInSiteUrl)) || (availableSites === null || availableSites === void 0 ? void 0 : availableSites[0]);
     }
   }, [availableSites, cloudId]);
-  const handleSearchChange = useCallback(e => {
-    const 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(() => {
+    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
+  const onSiteSelection = useCallback(site => {
+    setSearchString(undefined);
+    setCloudId(site.cloudId);
+    reset({
+      shouldForceRequest: true
+    });
+  }, [reset]);
   useEffect(() => {
     const fetchSiteDisplayNames = async () => {
       const confluenceSites = await getAvailableSites('confluence');
@@ -64,6 +115,96 @@ export const ConfluenceSearchConfigModal = props => {
     void fetchSiteDisplayNames();
   }, []);
   const siteSelectorLabel = availableSites && availableSites.length > 1 ? confluenceSearchModalMessages.insertIssuesTitleManySites : confluenceSearchModalMessages.insertIssuesTitle;
+  const [columnCustomSizes, setColumnCustomSizes] = useState(initialColumnCustomSizes);
+  const onColumnResize = useCallback((key, width) => {
+    setColumnCustomSizes({
+      ...columnCustomSizes,
+      [key]: width
+    });
+  }, [columnCustomSizes]);
+  const [wrappedColumnKeys, setWrappedColumnKeys] = useState(initialWrappedColumnKeys);
+  const onWrappedColumnChange = useCallback((key, isWrapped) => {
+    const 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
+  const confluenceSearchTable = useMemo(() => 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]);
+  const resolvedWithNoResults = status === 'resolved' && !responseItems.length;
+  const hasConfluenceSearchParams = selectedConfluenceSite && searchString;
+  const selectedConfluenceSiteUrl = selectedConfluenceSite === null || selectedConfluenceSite === void 0 ? void 0 : selectedConfluenceSite.url;
+  const confluenceSearchUrl = selectedConfluenceSiteUrl && searchString !== undefined && `${selectedConfluenceSiteUrl}/wiki/search/?text=${encodeURI(searchString)}`;
+  const renderModalContent = useCallback(() => {
+    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]);
+  const shouldShowResultsCount = !!totalCount && totalCount !== 1;
+  const onInsertPressed = useCallback(() => {
+    // eslint-disable-next-line no-console
+    // TODO: Implement onInsert in EDM-9412
+    /**
+     * onInsert(
+          {
+            type: 'inlineCard',
+            attrs: {
+              url,
+            },
+          } as InlineCardAdf,
+          consumerEvent,
+        );
+     */
+  }, []);
+  const onSearch = useCallback(newSearchString => {
+    setSearchString(newSearchString);
+    reset({
+      shouldForceRequest: true
+    });
+  }, [reset]);
+  const isInsertDisabled = !isParametersSet || status === 'rejected' || status === 'unauthorized' || status === 'loading';
   return jsx(IntlMessagesProvider, {
     defaultMessages: i18nEN,
     loaderFn: fetchMessagesForLocale
@@ -78,31 +219,40 @@ export const ConfluenceSearchConfigModal = props => {
     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: () => {},
-    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, ${N800})`
+    }
+  }, jsx(FormattedNumber, {
+    value: totalCount
+  }), ' ', jsx(FormattedMessage, _extends({}, confluenceSearchModalMessages.searchCountText, {
+    values: {
+      totalCount
+    }
+  })))), jsx(Button, {
     appearance: "default",
     onClick: onCancel
   }, jsx(FormattedMessage, confluenceSearchModalMessages.cancelButtonText)), !hasNoConfluenceSites && jsx(Button, {
     appearance: "primary",
-    onClick: () => {},
-    isDisabled: true,
+    onClick: onInsertPressed,
+    isDisabled: isInsertDisabled,
     testId: "confluence-search-datasource-modal--insert-button"
   }, jsx(FormattedMessage, confluenceSearchModalMessages.insertResultsButtonText)))));
 };

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

@@ -10,10 +10,10 @@ export const 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/es2019/ui/confluence-search-modal/types.js

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

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

@@ -3,11 +3,12 @@ import _extends from "@babel/runtime/helpers/extends";
 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 const SELECT_ITEMS_MAXIMUM_THRESHOLD = 200;
 const 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, ${fontFallback.body.small})`,
   fontWeight: "var(--ds-font-weight-regular, 400)"
 });
 export const ConcatenatedMenuList = ({

package/dist/es2019/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';
 const maxWidth = '200px';
 const firstLastChildOverride = `
@@ -32,7 +33,7 @@ const 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, ${fontFallback.body.medium})`,
   maxWidth
 });
 export const DragColumnPreview = ({

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

@@ -12,6 +12,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';
@@ -76,6 +77,11 @@ const TableCell = styled.td({
   [`${withTablePluginBodyPrefix('&:last-child')}`]: {
     borderRight: 0,
     paddingRight: "var(--ds-space-100, 8px)"
+  },
+  // Inline smart links are pretty opinionated about word-wrapping.
+  // We want it to be controlled by user, so we make it overflow and truncate by default.
+  ["& [data-testid='inline-card-icon-and-title'], " + "& [data-testid='button-connect-account'] > span"]: {
+    whiteSpace: 'unset'
   }
 });
 const tableContainerStyles = css({
@@ -223,7 +229,7 @@ const noDefaultBorderStyles = css({
   borderBottom: 0
 });
 const 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, ${fontFallback.body.UNSAFE_small})`,
   fontWeight: "var(--ds-font-weight-medium, 500)"
 });
 const headingHoverEffectStyles = css({

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

@@ -1,7 +1,8 @@
 import styled from '@emotion/styled';
 import { N40 } from '@atlaskit/theme/colors';
+import { fontFallback } from '@atlaskit/theme/typography';
 export const ScrollableContainerHeight = 590;
-export const 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 const fieldTextFontSize = `var(--ds-font-body, ${fontFallback.body.medium})`;
 export const Table = styled.table({
   width: '100%'
 });

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

@@ -10,7 +10,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';
@@ -30,8 +30,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';
@@ -39,22 +40,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';
-const tableContainerStyles = css({
-  borderTopLeftRadius: "var(--ds-border-radius-200, 8px)",
-  borderTopRightRadius: "var(--ds-border-radius-200, 8px)",
-  border: `1px solid ${`var(--ds-border, ${N40})`}`
-});
-const contentContainerStyles = css({
-  display: 'grid',
-  maxHeight: '420px',
-  overflow: 'auto',
-  borderBottom: `2px solid ${`var(--ds-background-accent-gray-subtler, ${N40})`}`,
-  backgroundImage: scrollableContainerShadowsCssComponents.backgroundImage,
-  backgroundPosition: scrollableContainerShadowsCssComponents.backgroundPosition,
-  backgroundRepeat: scrollableContainerShadowsCssComponents.backgroundRepeat,
-  backgroundSize: scrollableContainerShadowsCssComponents.backgroundSize,
-  backgroundAttachment: scrollableContainerShadowsCssComponents.backgroundAttachment
-});
 const placeholderSmartLinkStyles = css({
   backgroundColor: `var(--ds-surface-raised, ${N0})`,
   borderRadius: "var(--ds-border-radius-200, 3px)",
@@ -424,8 +409,8 @@ export const PlainJiraIssuesConfigModal = props => {
     visibleColumnCount.current = newVisibleColumnKeys.length;
     setVisibleColumnKeys(newVisibleColumnKeys);
   }, [visibleColumnKeys]);
-  const issueLikeDataTableView = useMemo(() => jsx("div", {
-    css: [tableContainerStyles, contentContainerStyles]
+  const issueLikeDataTableView = useMemo(() => jsx(ContentContainer, {
+    withTableBorder: true
   }, jsx(IssueLikeDataTableView, {
     testId: "jira-datasource-table",
     status: status,
@@ -474,7 +459,13 @@ export const PlainJiraIssuesConfigModal = props => {
     const 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: urlText => jsx("a", {
+              href: jqlUrl
+            }, urlText)
+          }
+        })) : undefined
       });
     } else if (status === 'unauthorized') {
       return jsx(AccessRequired, {
@@ -484,8 +475,8 @@ export const PlainJiraIssuesConfigModal = props => {
       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/es2019/ui/jira-issues-modal/modal/messages.js

@@ -115,5 +115,10 @@ export const 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/es2019/ui/jira-issues-modal/mode-switcher/index.js

@@ -82,6 +82,7 @@ export const ModeSwitcher = props => {
   }) => {
     const isSelected = value === selectedOptionValue;
     return jsx(Tooltip, {
+      key: value,
       content: tooltipText
     }, tooltipProps => jsx("label", _extends({}, tooltipProps, {
       key: value,

package/dist/esm/ui/assets-modal/modal/render-assets-content/initial-state-view/index.js

@@ -2,6 +2,7 @@
 
 import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
+import { fontFallback } from '@atlaskit/theme/typography';
 import { CrystalBallSVG } from './assets/crystal-ball-svg';
 import { initialStateViewMessages } from './messages';
 var initialStateViewContainerStyles = css({
@@ -14,7 +15,7 @@ var svgAndTextsWrapperStyles = css({
   alignSelf: 'center'
 });
 var searchTitleStyles = css({
-  font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-heading-small, ".concat(fontFallback.heading.small, ")"),
   paddingTop: "var(--ds-space-200, 16px)",
   paddingBottom: "var(--ds-space-100, 8px)"
 });

package/dist/esm/ui/common/error-state/access-required.js

@@ -5,12 +5,13 @@ import { useIntl } from 'react-intl-next';
 import EmptyState from '@atlaskit/empty-state';
 import { Box, xcss } from '@atlaskit/primitives';
 import { N400 } from '@atlaskit/theme/colors';
+import { fontFallback } from '@atlaskit/theme/typography';
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { AccessRequiredSVG } from './access-required-svg';
 import { loadingErrorMessages } from './messages';
 var urlStyles = css({
   color: "var(--ds-text-subtlest, ".concat(N400, ")"),
-  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, ")")
 });
 var descriptionMessageStyles = css({
   display: 'flex',

package/dist/esm/ui/common/error-state/loading-error.js

@@ -3,6 +3,7 @@ import { useEffect } from 'react';
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button/standard-button';
+import { fontFallback } from '@atlaskit/theme/typography';
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { LoadingErrorSVG } from './loading-error-svg';
 import { loadingErrorMessages } from './messages';
@@ -18,7 +19,7 @@ var errorMessageContainerStyles = css({
   placeItems: 'center'
 });
 var errorMessageStyles = css({
-  font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+  font: "var(--ds-font-heading-small, ".concat(fontFallback.heading.small, ")")
 });
 var errorDescriptionStyles = css({
   margin: 0

package/dist/esm/ui/common/error-state/messages.js

@@ -44,17 +44,6 @@ export var loadingErrorMessages = defineMessages({
     description: 'Instructions to let the user know how to resolve the network error that occurred or to try again at a different time',
     defaultMessage: 'Check your connection and refresh, or try again later.'
   },
-  checkConnectionWithSourceDuplicate: {
-    id: 'linkDataSource.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.'
-  },
-  //delete and remove duplicate from title above
-  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.'
-  },
   noResultsFoundDuplicate: {
     id: 'linkDataSource.noResultsFound',
     description: 'Status message letting the user know their query did not have any results',

package/dist/esm/ui/common/error-state/modal-loading-error.js

@@ -1,8 +1,8 @@
-import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { useEffect } from 'react';
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
+import { fontFallback } from '@atlaskit/theme/typography';
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { LoadingErrorSVG } from './loading-error-svg';
 import { loadingErrorMessages } from './messages';
@@ -18,13 +18,14 @@ var errorMessageContainerStyles = css({
   placeItems: 'center'
 });
 var errorMessageStyles = css({
-  font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+  font: "var(--ds-font-heading-small, ".concat(fontFallback.heading.small, ")")
 });
 var errorDescriptionStyles = css({
   margin: 0
 });
 export var ModalLoadingError = function ModalLoadingError(_ref) {
-  var url = _ref.url;
+  var _ref$errorMessage = _ref.errorMessage,
+    errorMessage = _ref$errorMessage === void 0 ? jsx(FormattedMessage, loadingErrorMessages.checkConnection) : _ref$errorMessage;
   var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
     fireEvent = _useDatasourceAnalyti.fireEvent;
   useEffect(function () {
@@ -41,13 +42,5 @@ export var ModalLoadingError = function ModalLoadingError(_ref) {
     css: errorMessageStyles
   }, jsx(FormattedMessage, loadingErrorMessages.unableToLoadResults)), jsx("p", {
     css: errorDescriptionStyles
-  }, url ? jsx(FormattedMessage, _extends({}, loadingErrorMessages.checkConnectionWithSource, {
-    values: {
-      a: function a(chunk) {
-        return jsx("a", {
-          href: url
-        }, chunk);
-      }
-    }
-  })) : jsx(FormattedMessage, loadingErrorMessages.checkConnection))));
+  }, errorMessage)));
 };

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

@@ -2,9 +2,10 @@
 import { css, jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import { Flex, xcss } from '@atlaskit/primitives';
+import { fontFallback } from '@atlaskit/theme/typography';
 import { NoInstancesSvg } from './no-instances-svg';
 var titleStyles = css({
-  font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-heading-small, ".concat(fontFallback.heading.small, ")"),
   marginTop: "var(--ds-space-200, 16px)"
 });
 var descriptionStyles = css({

package/dist/esm/ui/common/error-state/no-results.js

@@ -3,6 +3,7 @@ import { useEffect } from 'react';
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button/standard-button';
+import { fontFallback } from '@atlaskit/theme/typography';
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { loadingErrorMessages } from './messages';
 var noResultsContainerStyles = css({
@@ -17,7 +18,7 @@ var noResultsMessageContainerStyles = css({
   placeItems: 'center'
 });
 var noResultsMessageStyles = css({
-  font: "var(--ds-font-heading-small, normal 600 16px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+  font: "var(--ds-font-heading-small, ".concat(fontFallback.heading.small, ")")
 });
 export var NoResults = function NoResults(_ref) {
   var onRefresh = _ref.onRefresh;

package/dist/esm/ui/common/initial-state-view/index.js

@@ -3,6 +3,7 @@ import { css, jsx } from '@emotion/react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import Lozenge from '@atlaskit/lozenge';
 import { N300 } from '@atlaskit/theme/colors';
+import { fontFallback } from '@atlaskit/theme/typography';
 import { initialStateViewMessages } from './messages';
 var initialStateViewContainerStyles = css({
   display: 'flex',
@@ -20,7 +21,7 @@ var betaTagStyles = css({
 });
 var searchTitleStyles = css({
   color: "var(--ds-text-subtlest, ".concat(N300, ")"),
-  font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-heading-medium, ".concat(fontFallback.heading.medium, ")"),
   paddingTop: "var(--ds-space-200, 16px)",
   paddingBottom: "var(--ds-space-100, 8px)",
   display: 'flex',