@atlaskit/link-datasource 6.4.9 → 6.4.11

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

@@ -8,6 +8,7 @@ import FeatureGates from '@atlaskit/feature-gate-js-client';
 import IntlMessagesProvider from '@atlaskit/intl-messages-provider/main';
 import LinkComponent from '@atlaskit/link';
 import { CloseButton, ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@atlaskit/modal-dialog';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Box, Flex } from '@atlaskit/primitives/compiled';
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { DatasourceAction, DatasourceSearchMethod } from '../../../analytics/types';
@@ -152,6 +153,9 @@ export const PlainConfluenceSearchConfigModal = props => {
     siteSelectorLabel = availableSites && availableSites.length > 1 ? confluenceSearchModalMessages.insertIssuesTitleManySites : confluenceSearchModalMessages.insertIssuesTitle;
   }
   const resolvedWithNoResults = status === 'resolved' && !responseItems.length;
+  // With columns available the table can keep its headers and show the empty state in place of
+  // the rows, instead of replacing the whole table with it.
+  const shouldRenderTableWithNoResults = resolvedWithNoResults && !!columns.length && fg('platform_lp_sllv_ux_improvements');
   const hasConfluenceSearchParams = selectedConfluenceSite && (parameters === null || parameters === void 0 ? void 0 : parameters.searchString);
   const selectedConfluenceSiteUrl = selectedConfluenceSite === null || selectedConfluenceSite === void 0 ? void 0 : selectedConfluenceSite.url;
   const confluenceSearchUrl = useMemo(() => {
@@ -234,7 +238,7 @@ export const PlainConfluenceSearchConfigModal = props => {
       return /*#__PURE__*/React.createElement(AccessRequired, {
         url: selectedConfluenceSiteUrl || urlBeingEdited
       });
-    } else if (resolvedWithNoResults || status === 'forbidden') {
+    } else if (resolvedWithNoResults && !shouldRenderTableWithNoResults || status === 'forbidden') {
       return /*#__PURE__*/React.createElement(NoResults, null);
     } else if (status === 'empty' || !columns.length) {
       // persist the empty state when making the initial /data request which contains the columns
@@ -257,7 +261,7 @@ export const PlainConfluenceSearchConfigModal = props => {
     }, /*#__PURE__*/React.createElement(DatasourcesTableInModalPreview, {
       testId: "confluence-search-datasource-table"
     }));
-  }, [status, resolvedWithNoResults, columns.length, selectedConfluenceSiteUrl, urlBeingEdited, hasConfluenceSearchParams, formatMessage, reset, selectedConfluenceSite]);
+  }, [status, resolvedWithNoResults, shouldRenderTableWithNoResults, columns.length, selectedConfluenceSiteUrl, urlBeingEdited, hasConfluenceSearchParams, formatMessage, reset, selectedConfluenceSite]);
   const renderInlineLinkModalContent = useCallback(() => {
     if (status === 'unauthorized') {
       return /*#__PURE__*/React.createElement(AccessRequired, {

package/dist/es2019/ui/datasource-table-view/datasourceTableView.js

@@ -173,7 +173,11 @@ const DatasourceTableViewWithoutAnalytics = ({
       shouldForceRequest: true
     });
   }, [reset]);
-  if (status === 'resolved' && !responseItems.length || status === 'forbidden') {
+  const isResolvedWithNoResults = status === 'resolved' && !responseItems.length;
+  // With columns available the table can keep its headers and footer and show the empty state
+  // in place of the rows, instead of replacing the whole view with it.
+  const shouldRenderTableWithNoResults = isResolvedWithNoResults && hasColumns && fg('platform_lp_sllv_ux_improvements');
+  if (isResolvedWithNoResults && !shouldRenderTableWithNoResults || status === 'forbidden') {
     return /*#__PURE__*/React.createElement(NoResults, null);
   }
   if (status === 'unauthorized') {
@@ -225,9 +229,9 @@ const DatasourceTableViewWithoutAnalytics = ({
     isCompact: true
   }), /*#__PURE__*/React.createElement(TableFooter, {
     datasourceId: datasourceId,
-    itemCount: isDataReady ? totalCount : undefined,
+    itemCount: isDataReady ? totalCount : shouldRenderTableWithNoResults ? 0 : undefined,
     onRefresh: onRefresh,
-    isLoading: !isDataReady || status === 'loading',
+    isLoading: shouldRenderTableWithNoResults ? false : !isDataReady || status === 'loading',
     url: url
   })));
 };

package/dist/es2019/ui/issue-like-table/index.compiled.css

@@ -78,6 +78,7 @@ thead.has-column-picker ._10i2idpf:nth-last-of-type(2){border-right:0}.ProseMirr
 ._19bv1b66{padding-left:var(--ds-space-050,4px)}
 ._19bvze3t{padding-left:var(--ds-space-0,0)}
 ._19pkidpf{margin-top:0}
+._1bah1h6o{justify-content:center}
 ._1bsb1osq{width:100%}
 ._1bto1l2s{text-overflow:ellipsis}
 ._1cimn7od [data-testid=button-connect-account]>span{white-space:unset}
@@ -87,6 +88,7 @@ thead.has-column-picker ._10i2idpf:nth-last-of-type(2){border-right:0}.ProseMirr
 ._1ixkusic:last-of-type{text-align:right}
 ._1lhc1b66:first-of-type{padding-left:var(--ds-space-050,4px)}
 ._1lrw1sd4{background-size:40px 100%,14px 100%,40px 100%,14px 100%,100% 75pt,100% 14px,100% 40px,100% 10px}
+._1ltvidpf{left:0}
 ._1nd0cs5v [data-testid=datasource-header-content--container]{-webkit-line-clamp:2}
 ._1o0zidpf{border-bottom-right-radius:0}
 ._1o59pxbi:last-of-type{padding-right:var(--ds-space-200,1pc)}

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

@@ -25,6 +25,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { startUfoExperience, succeedUfoExperience } from '../../analytics/ufoExperiences';
 import { useDatasourceExperienceId } from '../../contexts/datasource-experience-id';
 import { useIsInPDFRender } from '../../hooks/useIsInPDFRender';
+import { NoResults } from '../common/error-state/no-results';
 import { ColumnPicker } from './column-picker';
 import { DragColumnPreview } from './drag-column-preview';
 import { DraggableTableHeading } from './draggable-table-heading';
@@ -57,6 +58,23 @@ const wrappedStyles = null;
 const richTextCellStyles = null;
 const tableContainerStyles = null;
 
+// The cell spans every column, so it is as wide as the scrollable table rather than the part of it
+// that is on screen. Sticking to the left edge of the scrollport keeps the empty state centred on
+// what the user can actually see while the headers still scroll behind it.
+const noResultsCellContentStyles = null;
+const getHorizontalScrollParent = element => {
+  let current = element;
+  while (current) {
+    const {
+      overflowX
+    } = getComputedStyle(current);
+    if (overflowX === 'auto' || overflowX === 'scroll') {
+      return current;
+    }
+    current = current.parentElement;
+  }
+};
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
 const Table = forwardRef(({
   as: C = "table",
@@ -293,6 +311,26 @@ export const IssueLikeDataTableView = ({
   }, [isInPDFRender, onNextPage, status, hasNextPage]);
   const hasData = items.length > 0;
 
+  // A resolved response with no items still carries column metadata, so the table can keep its
+  // headers and render the empty state where the rows would normally be.
+  const hasNoResults = status === 'resolved' && !hasData && fg('platform_lp_sllv_ux_improvements');
+  const [noResultsWidth, setNoResultsWidth] = useState();
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!hasNoResults || !container) {
+      return;
+    }
+    const scrollport = getHorizontalScrollParent(container) || container;
+    const updateWidth = () => setNoResultsWidth(scrollport.clientWidth || undefined);
+    updateWidth();
+    if (typeof ResizeObserver === 'undefined') {
+      return;
+    }
+    const observer = new ResizeObserver(updateWidth);
+    observer.observe(scrollport);
+    return () => observer.disconnect();
+  }, [hasNoResults]);
+
   // This variable contains initial Y mouse coordinate, so we can restrict
   // autoScroller in X axis only
   const initialAutoScrollerClientY = useRef();
@@ -583,7 +621,19 @@ export const IssueLikeDataTableView = ({
   })))), /*#__PURE__*/React.createElement("tbody", {
     "data-testid": testId && `${testId}--body`,
     className: ax(["_n7zlidpf"])
-  }, rows.map(({
+  }, hasNoResults && /*#__PURE__*/React.createElement("tr", {
+    "data-testid": testId && `${testId}--no-results-row`
+  }, /*#__PURE__*/React.createElement(InlineEditableTableCell, {
+    colSpan: Math.max(headerColumns.length + (onVisibleColumnKeysChange ? 1 : 0), 1)
+  }, /*#__PURE__*/React.createElement("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- width is measured from the scrollport at runtime
+    style: {
+      width: noResultsWidth
+    },
+    className: ax(["_kqsw1if8 _1ltvidpf _1e0c1txw _1bah1h6o"])
+  }, /*#__PURE__*/React.createElement(NoResults, {
+    isCompact: true
+  })))), rows.map(({
     key,
     cells,
     ref

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

@@ -120,6 +120,9 @@ const PlainJiraIssuesConfigModal = props => {
     destinationObjectTypes
   }), [destinationObjectTypes, extensionKey]);
   const resolvedWithNoResults = status === 'resolved' && !responseItems.length;
+  // With columns available the table can keep its headers and show the empty state in place of
+  // the rows, instead of replacing the whole table with it.
+  const shouldRenderTableWithNoResults = resolvedWithNoResults && !!columns.length && fg('platform_lp_sllv_ux_improvements');
   const jqlUrl = selectedJiraSite && jql && `${selectedJiraSite.url}/issues/?jql=${encodeURI(jql)}`;
   const shouldShowIssueCount = !!totalCount && totalCount !== 1 && currentViewMode === 'table';
   const isDataReady = (visibleColumnKeys || []).length > 0;
@@ -293,7 +296,7 @@ const PlainJiraIssuesConfigModal = props => {
       return /*#__PURE__*/React.createElement(AccessRequired, {
         url: selectedJiraSiteUrl || urlBeingEdited
       });
-    } else if (resolvedWithNoResults || status === 'forbidden') {
+    } else if (resolvedWithNoResults && !shouldRenderTableWithNoResults || status === 'forbidden') {
       return /*#__PURE__*/React.createElement(NoResults, null);
     } else if (status === 'empty' || !columns.length) {
       // persist the empty state when making the initial /data request which contains the columns
@@ -322,7 +325,7 @@ const PlainJiraIssuesConfigModal = props => {
     }, /*#__PURE__*/React.createElement(DatasourcesTableInModalPreview, {
       testId: "jira-datasource-table"
     }));
-  }, [columns.length, currentSearchMethod, formatMessage, jql, jqlUrl, resolvedWithNoResults, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url, status, urlBeingEdited, reset]);
+  }, [columns.length, currentSearchMethod, formatMessage, jql, jqlUrl, resolvedWithNoResults, shouldRenderTableWithNoResults, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url, status, urlBeingEdited, reset]);
   const siteSelectorLabel = useMemo(() => {
     if (fg('confluence-issue-terminology-refresh')) {
       return availableSites && availableSites.length > 1 ? modalMessages.insertIssuesTitleManySitesIssueTermRefresh : modalMessages.insertIssuesTitleIssueTermRefresh;

package/dist/esm/hooks/useDatasourceTableState.js

@@ -5,6 +5,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { useCallback, useEffect, useRef, useState } from 'react';
 import isEqual from 'lodash/isEqual';
 import { isFedRamp } from '@atlaskit/atlassian-context/is-fedramp';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { DEFAULT_GET_DATASOURCE_DATA_PAGE_SIZE, useDatasourceClientExtension } from '@atlaskit/link-client-extension';
 import { useDatasourceAnalyticsEvents } from '../analytics';
 import { useDatasourceActions } from '../state';
@@ -231,6 +232,7 @@ export var useDatasourceTableState = function useDatasourceTableState(_ref) {
       entityType,
       newIds,
       aris,
+      shouldApplySchemaWithoutItems,
       isUserLoadingNextPage,
       currentLoadedItemCount,
       newlyLoadedItemCount,
@@ -341,7 +343,11 @@ export var useDatasourceTableState = function useDatasourceTableState(_ref) {
           if (fieldKeys.length > 0) {
             setLastRequestedFieldKeys(fieldKeys);
           }
-          if ((isSchemaFromData && schema || fullSchema.properties.length > 0) && items.length > 0) {
+
+          // A response with no items still describes its columns, so the schema is worth applying
+          // to let the table keep its headers while showing the empty state.
+          shouldApplySchemaWithoutItems = items.length === 0 && fg('platform_lp_sllv_ux_improvements');
+          if ((isSchemaFromData && schema || fullSchema.properties.length > 0) && (items.length > 0 || shouldApplySchemaWithoutItems)) {
             applySchemaProperties(schema || fullSchema, fieldKeys);
           }
           isUserLoadingNextPage = responseItems.length !== 0 && !shouldRequestFirstPage;

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

@@ -3,6 +3,7 @@ import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useMemo } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { AccessRequired } from '../../../common/error-state/access-required';
 import { ModalLoadingError } from '../../../common/error-state/modal-loading-error';
 import { NoResults } from '../../../common/error-state/no-results';
@@ -54,6 +55,9 @@ export var RenderAssetsContent = function RenderAssetsContent(props) {
     onVisibleColumnKeysChange = props.onVisibleColumnKeysChange,
     isFetchingInitialData = props.isFetchingInitialData;
   var resolvedWithNoResults = status === 'resolved' && !responseItems.length;
+  // With columns available the table can keep its headers and show the empty state in place of
+  // the rows, instead of replacing the whole table with it.
+  var shouldRenderTableWithNoResults = resolvedWithNoResults && !!columns.length && fg('platform_lp_sllv_ux_improvements');
   var issueLikeDataTableView = useMemo(function () {
     return /*#__PURE__*/React.createElement("div", {
       className: ax(["_1reo1wug _18m91wug _4t3i1pna _1e0c11p5", "_19itia51 _n7zl1mpn _13li1mok _qrwq1mok _1itkz1kv _12vemgnk _1lrw1sd4 _qmxj1c00"])
@@ -80,12 +84,12 @@ export var RenderAssetsContent = function RenderAssetsContent(props) {
       return /*#__PURE__*/React.createElement(UnauthorizedView, null);
     } else if (status === 'empty') {
       return /*#__PURE__*/React.createElement(EmptyView, null);
-    } else if (resolvedWithNoResults) {
+    } else if (resolvedWithNoResults && !shouldRenderTableWithNoResults) {
       return /*#__PURE__*/React.createElement(NoResultsView, null);
     } else if (status === 'loading' && !columns.length) {
       return /*#__PURE__*/React.createElement(LoadingView, null);
     }
     return issueLikeDataTableView;
-  }, [columns.length, isFetchingInitialData, issueLikeDataTableView, resolvedWithNoResults, status]);
+  }, [columns.length, isFetchingInitialData, issueLikeDataTableView, resolvedWithNoResults, shouldRenderTableWithNoResults, status]);
   return renderAssetsContentView();
 };

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

@@ -1,11 +1,13 @@
 ._zulp1ejb{gap:var(--ds-space-300,24px)}
 ._zulppxbi{gap:var(--ds-space-200,1pc)}._10fp1h6o{justify-self:center}
 ._18u0oahv{margin-left:var(--ds-space-600,3pc)}
+._19pk1ejb{margin-top:var(--ds-space-300,24px)}
 ._19pkoahv{margin-top:var(--ds-space-600,3pc)}
 ._1wpz1h6o{align-self:center}
 ._2hwxoahv{margin-right:var(--ds-space-600,3pc)}
 ._4cvr1h6o{align-items:center}
 ._6a6z1h6o{justify-items:center}
+._otyr1ejb{margin-bottom:var(--ds-space-300,24px)}
 ._otyroahv{margin-bottom:var(--ds-space-600,3pc)}
 ._p12fko4j{max-width:19pc}
 ._y3gn1h6o{text-align:center}

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

@@ -11,11 +11,13 @@ import { SpotSearchNoResult } from '../../../common/ui/spot/error-state/search-n
 import { loadingErrorMessages } from './messages';
 var styles = {
   noResultsContainerStyles: "_4cvr1h6o _6a6z1h6o _1wpz1h6o _10fp1h6o _19pkoahv _2hwxoahv _otyroahv _18u0oahv",
+  noResultsCompactContainerStyles: "_4cvr1h6o _6a6z1h6o _1wpz1h6o _10fp1h6o _19pk1ejb _2hwxoahv _otyr1ejb _18u0oahv",
   noResultsContentStyles: "_zulp1ejb _4cvr1h6o _6a6z1h6o _p12fko4j",
   noResultsMessageContainerStyles: "_zulppxbi _4cvr1h6o _6a6z1h6o _y3gn1h6o"
 };
 export var NoResults = function NoResults(_ref) {
-  var onRefresh = _ref.onRefresh;
+  var isCompact = _ref.isCompact,
+    onRefresh = _ref.onRefresh;
   var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
     fireEvent = _useDatasourceAnalyti.fireEvent;
   var _useIntl = useIntl(),
@@ -24,7 +26,7 @@ export var NoResults = function NoResults(_ref) {
     fireEvent('ui.emptyResult.shown.datasource', {});
   }, [fireEvent]);
   return /*#__PURE__*/React.createElement(Grid, {
-    xcss: styles.noResultsContainerStyles,
+    xcss: isCompact ? styles.noResultsCompactContainerStyles : styles.noResultsContainerStyles,
     testId: "datasource-modal--no-results"
   }, /*#__PURE__*/React.createElement(Grid, {
     xcss: styles.noResultsContentStyles

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

@@ -9,10 +9,12 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import Button from '@atlaskit/button/new';
 import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import { displayViewDropDownMessages } from './messages';
 var styles = {
-  dropDownItemGroupStyles: "_2rko12b0 _1bsb1pna _4t3i7iqz"
+  dropDownItemGroupStyles: "_2rko12b0 _1bsb1pna _4t3i7iqz",
+  dropDownItemGroupStylesWithoutFixedHeight: "_2rko12b0 _1bsb1pna"
 };
 var InlineIcon = /*#__PURE__*/React.createElement("svg", {
   xmlns: "http://www.w3.org/2000/svg",
@@ -62,7 +64,7 @@ export var DisplayViewDropDown = function DisplayViewDropDown(_ref) {
     },
     testId: "datasource-modal--view-drop-down"
   }, /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.dropDownItemGroupStyles
+    xcss: fg('platform_lp_sllv_ux_improvements') ? styles.dropDownItemGroupStylesWithoutFixedHeight : styles.dropDownItemGroupStyles
   }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, /*#__PURE__*/React.createElement(DropdownItem, {
     testId: "dropdown-item-table",
     onClick: function onClick() {

package/dist/esm/ui/common/modal/mode-switcher/index.compiled.css

@@ -12,7 +12,6 @@
 ._1bah1h6o{justify-content:center}
 ._1e0c116y{display:inline-flex}
 ._1e0c1txw{display:flex}
-._1e0cglyw{display:none}
 ._1j55105o:disabled{opacity:.5}
 ._1tke1tcg{min-height:24px}
 ._4cvr1h6o{align-items:center}

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

@@ -3,7 +3,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
 import Tooltip from '@atlaskit/tooltip';
 import VisuallyHidden from '@atlaskit/visually-hidden/visually-hidden';
 import { DatasourceAction } from '../../../../analytics/types';
@@ -12,7 +11,6 @@ import { DisplayViewDropDown } from '../display-view-dropdown/display-view-drop-
 import { useViewModeContext } from './useViewModeContext';
 var modeSwitcherStyles = null;
 var compactModeSwitcherStyles = null;
-var modeInputStyles = null;
 var modeFocusStyles = null;
 var modeSwitcherLabelStyles = null;
 var modeSwitcherLabelSelectedStyles = null;
@@ -30,7 +28,6 @@ export var ModeSwitcher = function ModeSwitcher(props) {
   var handleModeChange = function handleModeChange(event) {
     onOptionValueChange(event.currentTarget.value);
   };
-  var RadioWrapper = fg('navx-5290-sllv-modal-a11y-updates') ? VisuallyHidden : React.Fragment;
   return options.length > 0 ? /*#__PURE__*/React.createElement("fieldset", {
     "data-testid": "mode-toggle-container",
     disabled: isDisabled,
@@ -48,16 +45,15 @@ export var ModeSwitcher = function ModeSwitcher(props) {
       return /*#__PURE__*/React.createElement("label", _extends({}, tooltipProps, {
         key: value,
         "data-testid": "mode-toggle-".concat(value),
-        className: ax(["_11c8fhey _2rko1b66 _1h6d1j28 _189ee4h9 _1dqonqa1 _syaz1rpy _vchhusvi _k48p1wq8 _u5f3utpp _19bvutpp _1tke1tcg _1e0c1txw _4cvr1h6o _1bah1h6o _d0altlke _irr31dpa", isCompact && "_ca0qv77o _u5f31b66 _n3tdv77o _19bv1b66", isSelected && "_2rko1b66 _1h6dq98m _bfhk15s3 _syaz6x5g _d0altlke _irr315s3", isDisabled && "_irr31j28 _d0al13gf", isOptionDisabled && "_syaz1gmx", isOptionDisabled && "_irr31j28 _d0al13gf", fg('navx-5290-sllv-modal-a11y-updates') && "_1e387g83 _7glxv77o"])
-      }), label, /*#__PURE__*/React.createElement(RadioWrapper, null, /*#__PURE__*/React.createElement("input", {
+        className: ax(["_11c8fhey _2rko1b66 _1h6d1j28 _189ee4h9 _1dqonqa1 _syaz1rpy _vchhusvi _k48p1wq8 _u5f3utpp _19bvutpp _1tke1tcg _1e0c1txw _4cvr1h6o _1bah1h6o _d0altlke _irr31dpa", isCompact && "_ca0qv77o _u5f31b66 _n3tdv77o _19bv1b66", isSelected && "_2rko1b66 _1h6dq98m _bfhk15s3 _syaz6x5g _d0altlke _irr315s3", isDisabled && "_irr31j28 _d0al13gf", isOptionDisabled && "_syaz1gmx", isOptionDisabled && "_irr31j28 _d0al13gf", "_1e387g83 _7glxv77o"])
+      }), label, /*#__PURE__*/React.createElement(VisuallyHidden, null, /*#__PURE__*/React.createElement("input", {
         "aria-checked": isSelected,
         "aria-disabled": isOptionDisabled,
         checked: isSelected,
         disabled: isOptionDisabled,
         onChange: handleModeChange,
         type: "radio",
-        value: value,
-        className: ax([!fg('navx-5290-sllv-modal-a11y-updates') && "_1e0cglyw"])
+        value: value
       })));
     });
   })) : null;

package/dist/esm/ui/common/modal/site-selector/index.js

@@ -10,7 +10,6 @@ import { useIntl } from 'react-intl';
 import Button from '@atlaskit/button/new';
 import Heading from '@atlaskit/heading';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import { PopupSelect } from '@atlaskit/select';
 import { siteSelectorMessages } from './messages';
@@ -76,10 +75,8 @@ export var SiteSelector = function SiteSelector(props) {
             size: "small"
           });
         },
-        testId: "".concat(testId, "__control")
-      }, fg('navx-5290-sllv-modal-a11y-updates') ? {
-        'aria-label': selectedSiteOption !== null && selectedSiteOption !== void 0 && selectedSiteOption.label ? "".concat(formatMessage(siteSelectorMessages.chooseSite), ": ").concat(selectedSiteOption.label) : formatMessage(siteSelectorMessages.chooseSite)
-      } : {}, {
+        testId: "".concat(testId, "__control"),
+        "aria-label": selectedSiteOption !== null && selectedSiteOption !== void 0 && selectedSiteOption.label ? "".concat(formatMessage(siteSelectorMessages.chooseSite), ": ").concat(selectedSiteOption.label) : formatMessage(siteSelectorMessages.chooseSite),
         autoFocus: true
       }), (selectedSiteOption === null || selectedSiteOption === void 0 ? void 0 : selectedSiteOption.label) || formatMessage(siteSelectorMessages.chooseSite));
     }

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

@@ -11,6 +11,7 @@ import FeatureGates from '@atlaskit/feature-gate-js-client';
 import IntlMessagesProvider from '@atlaskit/intl-messages-provider/main';
 import LinkComponent from '@atlaskit/link';
 import { CloseButton, ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@atlaskit/modal-dialog';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Box, Flex } from '@atlaskit/primitives/compiled';
 import { useDatasourceAnalyticsEvents } from '../../../analytics';
 import { DatasourceAction, DatasourceSearchMethod } from '../../../analytics/types';
@@ -151,6 +152,9 @@ export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConf
     siteSelectorLabel = availableSites && availableSites.length > 1 ? confluenceSearchModalMessages.insertIssuesTitleManySites : confluenceSearchModalMessages.insertIssuesTitle;
   }
   var resolvedWithNoResults = status === 'resolved' && !responseItems.length;
+  // With columns available the table can keep its headers and show the empty state in place of
+  // the rows, instead of replacing the whole table with it.
+  var shouldRenderTableWithNoResults = resolvedWithNoResults && !!columns.length && fg('platform_lp_sllv_ux_improvements');
   var hasConfluenceSearchParams = selectedConfluenceSite && (parameters === null || parameters === void 0 ? void 0 : parameters.searchString);
   var selectedConfluenceSiteUrl = selectedConfluenceSite === null || selectedConfluenceSite === void 0 ? void 0 : selectedConfluenceSite.url;
   var confluenceSearchUrl = useMemo(function () {
@@ -237,7 +241,7 @@ export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConf
       return /*#__PURE__*/React.createElement(AccessRequired, {
         url: selectedConfluenceSiteUrl || urlBeingEdited
       });
-    } else if (resolvedWithNoResults || status === 'forbidden') {
+    } else if (resolvedWithNoResults && !shouldRenderTableWithNoResults || status === 'forbidden') {
       return /*#__PURE__*/React.createElement(NoResults, null);
     } else if (status === 'empty' || !columns.length) {
       // persist the empty state when making the initial /data request which contains the columns
@@ -260,7 +264,7 @@ export var PlainConfluenceSearchConfigModal = function PlainConfluenceSearchConf
     }, /*#__PURE__*/React.createElement(DatasourcesTableInModalPreview, {
       testId: "confluence-search-datasource-table"
     }));
-  }, [status, resolvedWithNoResults, columns.length, selectedConfluenceSiteUrl, urlBeingEdited, hasConfluenceSearchParams, formatMessage, reset, selectedConfluenceSite]);
+  }, [status, resolvedWithNoResults, shouldRenderTableWithNoResults, columns.length, selectedConfluenceSiteUrl, urlBeingEdited, hasConfluenceSearchParams, formatMessage, reset, selectedConfluenceSite]);
   var renderInlineLinkModalContent = useCallback(function () {
     if (status === 'unauthorized') {
       return /*#__PURE__*/React.createElement(AccessRequired, {

package/dist/esm/ui/datasource-table-view/datasourceTableView.js

@@ -179,7 +179,11 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
       shouldForceRequest: true
     });
   }, [reset]);
-  if (status === 'resolved' && !responseItems.length || status === 'forbidden') {
+  var isResolvedWithNoResults = status === 'resolved' && !responseItems.length;
+  // With columns available the table can keep its headers and footer and show the empty state
+  // in place of the rows, instead of replacing the whole view with it.
+  var shouldRenderTableWithNoResults = isResolvedWithNoResults && hasColumns && fg('platform_lp_sllv_ux_improvements');
+  if (isResolvedWithNoResults && !shouldRenderTableWithNoResults || status === 'forbidden') {
     return /*#__PURE__*/React.createElement(NoResults, null);
   }
   if (status === 'unauthorized') {
@@ -231,9 +235,9 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     isCompact: true
   }), /*#__PURE__*/React.createElement(TableFooter, {
     datasourceId: datasourceId,
-    itemCount: isDataReady ? totalCount : undefined,
+    itemCount: isDataReady ? totalCount : shouldRenderTableWithNoResults ? 0 : undefined,
     onRefresh: onRefresh,
-    isLoading: !isDataReady || status === 'loading',
+    isLoading: shouldRenderTableWithNoResults ? false : !isDataReady || status === 'loading',
     url: url
   })));
 };

package/dist/esm/ui/issue-like-table/index.compiled.css

@@ -78,6 +78,7 @@ thead.has-column-picker ._10i2idpf:nth-last-of-type(2){border-right:0}.ProseMirr
 ._19bv1b66{padding-left:var(--ds-space-050,4px)}
 ._19bvze3t{padding-left:var(--ds-space-0,0)}
 ._19pkidpf{margin-top:0}
+._1bah1h6o{justify-content:center}
 ._1bsb1osq{width:100%}
 ._1bto1l2s{text-overflow:ellipsis}
 ._1cimn7od [data-testid=button-connect-account]>span{white-space:unset}
@@ -87,6 +88,7 @@ thead.has-column-picker ._10i2idpf:nth-last-of-type(2){border-right:0}.ProseMirr
 ._1ixkusic:last-of-type{text-align:right}
 ._1lhc1b66:first-of-type{padding-left:var(--ds-space-050,4px)}
 ._1lrw1sd4{background-size:40px 100%,14px 100%,40px 100%,14px 100%,100% 75pt,100% 14px,100% 40px,100% 10px}
+._1ltvidpf{left:0}
 ._1nd0cs5v [data-testid=datasource-header-content--container]{-webkit-line-clamp:2}
 ._1o0zidpf{border-bottom-right-radius:0}
 ._1o59pxbi:last-of-type{padding-right:var(--ds-space-200,1pc)}

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

@@ -38,6 +38,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { startUfoExperience, succeedUfoExperience } from '../../analytics/ufoExperiences';
 import { useDatasourceExperienceId } from '../../contexts/datasource-experience-id';
 import { useIsInPDFRender } from '../../hooks/useIsInPDFRender';
+import { NoResults } from '../common/error-state/no-results';
 import { ColumnPicker } from './column-picker';
 import { DragColumnPreview } from './drag-column-preview';
 import { DraggableTableHeading } from './draggable-table-heading';
@@ -70,6 +71,22 @@ var wrappedStyles = null;
 var richTextCellStyles = null;
 var tableContainerStyles = null;
 
+// The cell spans every column, so it is as wide as the scrollable table rather than the part of it
+// that is on screen. Sticking to the left edge of the scrollport keeps the empty state centred on
+// what the user can actually see while the headers still scroll behind it.
+var noResultsCellContentStyles = null;
+var getHorizontalScrollParent = function getHorizontalScrollParent(element) {
+  var current = element;
+  while (current) {
+    var _getComputedStyle = getComputedStyle(current),
+      overflowX = _getComputedStyle.overflowX;
+    if (overflowX === 'auto' || overflowX === 'scroll') {
+      return current;
+    }
+    current = current.parentElement;
+  }
+};
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
 var Table = forwardRef(function (_ref2, __cmplr) {
   var _ref2$as = _ref2.as,
@@ -337,6 +354,33 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref6) {
   }, [isInPDFRender, onNextPage, status, hasNextPage]);
   var hasData = items.length > 0;
 
+  // A resolved response with no items still carries column metadata, so the table can keep its
+  // headers and render the empty state where the rows would normally be.
+  var hasNoResults = status === 'resolved' && !hasData && fg('platform_lp_sllv_ux_improvements');
+  var _useState7 = useState(),
+    _useState8 = _slicedToArray(_useState7, 2),
+    noResultsWidth = _useState8[0],
+    setNoResultsWidth = _useState8[1];
+  useEffect(function () {
+    var container = containerRef.current;
+    if (!hasNoResults || !container) {
+      return;
+    }
+    var scrollport = getHorizontalScrollParent(container) || container;
+    var updateWidth = function updateWidth() {
+      return setNoResultsWidth(scrollport.clientWidth || undefined);
+    };
+    updateWidth();
+    if (typeof ResizeObserver === 'undefined') {
+      return;
+    }
+    var observer = new ResizeObserver(updateWidth);
+    observer.observe(scrollport);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [hasNoResults]);
+
   // This variable contains initial Y mouse coordinate, so we can restrict
   // autoScroller in X axis only
   var initialAutoScrollerClientY = useRef();
@@ -647,7 +691,19 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref6) {
   })))), /*#__PURE__*/React.createElement("tbody", {
     "data-testid": testId && "".concat(testId, "--body"),
     className: ax(["_n7zlidpf"])
-  }, rows.map(function (_ref16) {
+  }, hasNoResults && /*#__PURE__*/React.createElement("tr", {
+    "data-testid": testId && "".concat(testId, "--no-results-row")
+  }, /*#__PURE__*/React.createElement(InlineEditableTableCell, {
+    colSpan: Math.max(headerColumns.length + (onVisibleColumnKeysChange ? 1 : 0), 1)
+  }, /*#__PURE__*/React.createElement("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- width is measured from the scrollport at runtime
+    style: {
+      width: noResultsWidth
+    },
+    className: ax(["_kqsw1if8 _1ltvidpf _1e0c1txw _1bah1h6o"])
+  }, /*#__PURE__*/React.createElement(NoResults, {
+    isCompact: true
+  })))), rows.map(function (_ref16) {
     var key = _ref16.key,
       cells = _ref16.cells,
       ref = _ref16.ref;

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

@@ -130,6 +130,9 @@ var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
     };
   }, [destinationObjectTypes, extensionKey]);
   var resolvedWithNoResults = status === 'resolved' && !responseItems.length;
+  // With columns available the table can keep its headers and show the empty state in place of
+  // the rows, instead of replacing the whole table with it.
+  var shouldRenderTableWithNoResults = resolvedWithNoResults && !!columns.length && fg('platform_lp_sllv_ux_improvements');
   var jqlUrl = selectedJiraSite && jql && "".concat(selectedJiraSite.url, "/issues/?jql=").concat(encodeURI(jql));
   var shouldShowIssueCount = !!totalCount && totalCount !== 1 && currentViewMode === 'table';
   var isDataReady = (visibleColumnKeys || []).length > 0;
@@ -308,7 +311,7 @@ var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
       return /*#__PURE__*/React.createElement(AccessRequired, {
         url: selectedJiraSiteUrl || urlBeingEdited
       });
-    } else if (resolvedWithNoResults || status === 'forbidden') {
+    } else if (resolvedWithNoResults && !shouldRenderTableWithNoResults || status === 'forbidden') {
       return /*#__PURE__*/React.createElement(NoResults, null);
     } else if (status === 'empty' || !columns.length) {
       // persist the empty state when making the initial /data request which contains the columns
@@ -337,7 +340,7 @@ var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
     }, /*#__PURE__*/React.createElement(DatasourcesTableInModalPreview, {
       testId: "jira-datasource-table"
     }));
-  }, [columns.length, currentSearchMethod, formatMessage, jql, jqlUrl, resolvedWithNoResults, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url, status, urlBeingEdited, reset]);
+  }, [columns.length, currentSearchMethod, formatMessage, jql, jqlUrl, resolvedWithNoResults, shouldRenderTableWithNoResults, selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url, status, urlBeingEdited, reset]);
   var siteSelectorLabel = useMemo(function () {
     if (fg('confluence-issue-terminology-refresh')) {
       return availableSites && availableSites.length > 1 ? modalMessages.insertIssuesTitleManySitesIssueTermRefresh : modalMessages.insertIssuesTitleIssueTermRefresh;

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

@@ -1,5 +1,7 @@
 interface NoResultsProps {
+    /** Tightens the vertical spacing, for when there is less room than a full view to fill. */
+    isCompact?: boolean;
     onRefresh?: () => void;
 }
-export declare const NoResults: ({ onRefresh }: NoResultsProps) => JSX.Element;
+export declare const NoResults: ({ isCompact, onRefresh }: NoResultsProps) => JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "6.4.9",
+	"version": "6.4.11",
 	"description": "UI Components to support linking platform dataset feature",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -57,8 +57,8 @@
 		"@atlaskit/inline-edit": "^16.2.0",
 		"@atlaskit/intl-messages-provider": "^4.2.0",
 		"@atlaskit/jql-ast": "^4.0.0",
-		"@atlaskit/jql-editor": "^7.5.0",
-		"@atlaskit/jql-editor-autocomplete-rest": "^4.3.0",
+		"@atlaskit/jql-editor": "^7.6.0",
+		"@atlaskit/jql-editor-autocomplete-rest": "^4.4.0",
 		"@atlaskit/layering": "^5.0.0",
 		"@atlaskit/link": "^5.0.0",
 		"@atlaskit/link-client-extension": "^7.1.0",
@@ -86,13 +86,13 @@
 		"@atlaskit/tag": "^15.4.0",
 		"@atlaskit/textfield": "^10.0.0",
 		"@atlaskit/theme": "^28.0.0",
-		"@atlaskit/tokens": "^16.6.0",
+		"@atlaskit/tokens": "^16.7.0",
 		"@atlaskit/tooltip": "^24.0.0",
 		"@atlaskit/ufo": "^1.0.0",
 		"@atlaskit/visually-hidden": "^4.2.0",
 		"@atlaskit/width-detector": "^7.0.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^1.0.0",
+		"@compiled/react": "^1.0.2",
 		"@types/dompurify": "^2.2.3",
 		"date-fns": "^2.17.0",
 		"debounce-promise": "^3.1.2",
@@ -188,7 +188,7 @@
 		"platform_lp_sllv_richtext_margin_reset": {
 			"type": "boolean"
 		},
-		"navx-5290-sllv-modal-a11y-updates": {
+		"platform_lp_sllv_ux_improvements": {
 			"type": "boolean"
 		},
 		"navx-5509-sllv-link-new-tab-hint": {