@atlaskit/link-datasource 6.4.10 → 6.4.11

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/link-datasource
 
+## 6.4.11
+
+### Patch Changes
+
+- [`24e05fa81e0c7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/24e05fa81e0c7) -
+  [ux] When a search resolves with no items but the response still describes its columns, the
+  datasource table now keeps its column headers and footer and renders the "no results" message in
+  place of the rows, instead of replacing the entire view. Behind the
+  platform_lp_sllv_ux_improvements feature gate.
+
 ## 6.4.10
 
 ### Patch Changes

package/dist/cjs/hooks/useDatasourceTableState.js

@@ -12,6 +12,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _isFedramp = require("@atlaskit/atlassian-context/is-fedramp");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _linkClientExtension = require("@atlaskit/link-client-extension");
 var _analytics = require("../analytics");
 var _state = require("../state");
@@ -238,6 +239,7 @@ var useDatasourceTableState = exports.useDatasourceTableState = function useData
       entityType,
       newIds,
       aris,
+      shouldApplySchemaWithoutItems,
       isUserLoadingNextPage,
       currentLoadedItemCount,
       newlyLoadedItemCount,
@@ -348,7 +350,11 @@ var useDatasourceTableState = exports.useDatasourceTableState = function useData
           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 && (0, _fg.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/cjs/ui/assets-modal/modal/render-assets-content/index.js

@@ -10,6 +10,7 @@ require("./index.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _accessRequired = require("../../../common/error-state/access-required");
 var _modalLoadingError = require("../../../common/error-state/modal-loading-error");
 var _noResults = require("../../../common/error-state/no-results");
@@ -62,6 +63,9 @@ var RenderAssetsContent = exports.RenderAssetsContent = function RenderAssetsCon
     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 && (0, _fg.fg)('platform_lp_sllv_ux_improvements');
   var issueLikeDataTableView = (0, _react.useMemo)(function () {
     return /*#__PURE__*/React.createElement("div", {
       className: (0, _runtime.ax)(["_1reo1wug _18m91wug _4t3i1pna _1e0c11p5", "_19itia51 _n7zl1mpn _13li1mok _qrwq1mok _1itkz1kv _12vemgnk _1lrw1sd4 _qmxj1c00"])
@@ -88,12 +92,12 @@ var RenderAssetsContent = exports.RenderAssetsContent = function RenderAssetsCon
       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/cjs/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/cjs/ui/common/error-state/no-results.js

@@ -20,11 +20,13 @@ var _messages = require("./messages");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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"
 };
 var NoResults = exports.NoResults = function NoResults(_ref) {
-  var onRefresh = _ref.onRefresh;
+  var isCompact = _ref.isCompact,
+    onRefresh = _ref.onRefresh;
   var _useDatasourceAnalyti = (0, _analytics.useDatasourceAnalyticsEvents)(),
     fireEvent = _useDatasourceAnalyti.fireEvent;
   var _useIntl = (0, _reactIntl.useIntl)(),
@@ -33,7 +35,7 @@ var NoResults = exports.NoResults = function NoResults(_ref) {
     fireEvent('ui.emptyResult.shown.datasource', {});
   }, [fireEvent]);
   return /*#__PURE__*/React.createElement(_compiled.Grid, {
-    xcss: styles.noResultsContainerStyles,
+    xcss: isCompact ? styles.noResultsCompactContainerStyles : styles.noResultsContainerStyles,
     testId: "datasource-modal--no-results"
   }, /*#__PURE__*/React.createElement(_compiled.Grid, {
     xcss: styles.noResultsContentStyles

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

@@ -16,12 +16,14 @@ var _reactIntl = require("react-intl");
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _messages = require("./messages");
 var _excluded = ["triggerRef"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
-  dropDownItemGroupStyles: "_2rko12b0 _1bsb1pna _4t3i7iqz"
+  dropDownItemGroupStyles: "_2rko12b0 _1bsb1pna _4t3i7iqz",
+  dropDownItemGroupStylesWithoutFixedHeight: "_2rko12b0 _1bsb1pna"
 };
 var InlineIcon = /*#__PURE__*/_react.default.createElement("svg", {
   xmlns: "http://www.w3.org/2000/svg",
@@ -71,7 +73,7 @@ var DisplayViewDropDown = exports.DisplayViewDropDown = function DisplayViewDrop
     },
     testId: "datasource-modal--view-drop-down"
   }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    xcss: styles.dropDownItemGroupStyles
+    xcss: (0, _platformFeatureFlags.fg)('platform_lp_sllv_ux_improvements') ? styles.dropDownItemGroupStylesWithoutFixedHeight : styles.dropDownItemGroupStyles
   }, /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItemGroup, null, /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
     testId: "dropdown-item-table",
     onClick: function onClick() {

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

@@ -17,6 +17,7 @@ var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gat
 var _main = _interopRequireDefault(require("@atlaskit/intl-messages-provider/main"));
 var _link = _interopRequireDefault(require("@atlaskit/link"));
 var _modalDialog = require("@atlaskit/modal-dialog");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _analytics = require("../../../analytics");
 var _types = require("../../../analytics/types");
@@ -160,6 +161,9 @@ var PlainConfluenceSearchConfigModal = exports.PlainConfluenceSearchConfigModal
     siteSelectorLabel = availableSites && availableSites.length > 1 ? _messages.confluenceSearchModalMessages.insertIssuesTitleManySites : _messages.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 && (0, _fg.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 = (0, _react.useMemo)(function () {
@@ -246,7 +250,7 @@ var PlainConfluenceSearchConfigModal = exports.PlainConfluenceSearchConfigModal
       return /*#__PURE__*/_react.default.createElement(_accessRequired.AccessRequired, {
         url: selectedConfluenceSiteUrl || urlBeingEdited
       });
-    } else if (resolvedWithNoResults || status === 'forbidden') {
+    } else if (resolvedWithNoResults && !shouldRenderTableWithNoResults || status === 'forbidden') {
       return /*#__PURE__*/_react.default.createElement(_noResults.NoResults, null);
     } else if (status === 'empty' || !columns.length) {
       // persist the empty state when making the initial /data request which contains the columns
@@ -269,7 +273,7 @@ var PlainConfluenceSearchConfigModal = exports.PlainConfluenceSearchConfigModal
     }, /*#__PURE__*/_react.default.createElement(_datasourcesTableInModalPreview.default, {
       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 = (0, _react.useCallback)(function () {
     if (status === 'unauthorized') {
       return /*#__PURE__*/_react.default.createElement(_accessRequired.AccessRequired, {

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

@@ -188,7 +188,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 && (0, _platformFeatureFlags.fg)('platform_lp_sllv_ux_improvements');
+  if (isResolvedWithNoResults && !shouldRenderTableWithNoResults || status === 'forbidden') {
     return /*#__PURE__*/React.createElement(_noResults.NoResults, null);
   }
   if (status === 'unauthorized') {
@@ -240,9 +244,9 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     isCompact: true
   }), /*#__PURE__*/React.createElement(_tableFooter.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/cjs/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/cjs/ui/issue-like-table/index.js

@@ -36,6 +36,7 @@ var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _ufoExperiences = require("../../analytics/ufoExperiences");
 var _datasourceExperienceId = require("../../contexts/datasource-experience-id");
 var _useIsInPDFRender = require("../../hooks/useIsInPDFRender");
+var _noResults = require("../common/error-state/no-results");
 var _columnPicker = require("./column-picker");
 var _dragColumnPreview = require("./drag-column-preview");
 var _draggableTableHeading = require("./draggable-table-heading");
@@ -77,6 +78,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 = (0, _react.forwardRef)(function (_ref2, __cmplr) {
   var _ref2$as = _ref2.as,
@@ -344,6 +361,33 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
   }, [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 && (0, _platformFeatureFlags.fg)('platform_lp_sllv_ux_improvements');
+  var _useState7 = (0, _react.useState)(),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    noResultsWidth = _useState8[0],
+    setNoResultsWidth = _useState8[1];
+  (0, _react.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 = (0, _react.useRef)();
@@ -654,7 +698,19 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
   })))), /*#__PURE__*/React.createElement("tbody", {
     "data-testid": testId && "".concat(testId, "--body"),
     className: (0, _runtime.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: (0, _runtime.ax)(["_kqsw1if8 _1ltvidpf _1e0c1txw _1bah1h6o"])
+  }, /*#__PURE__*/React.createElement(_noResults.NoResults, {
+    isCompact: true
+  })))), rows.map(function (_ref16) {
     var key = _ref16.key,
       cells = _ref16.cells,
       ref = _ref16.ref;

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

@@ -138,6 +138,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 && (0, _platformFeatureFlags.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;
@@ -316,7 +319,7 @@ var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
       return /*#__PURE__*/_react.default.createElement(_accessRequired.AccessRequired, {
         url: selectedJiraSiteUrl || urlBeingEdited
       });
-    } else if (resolvedWithNoResults || status === 'forbidden') {
+    } else if (resolvedWithNoResults && !shouldRenderTableWithNoResults || status === 'forbidden') {
       return /*#__PURE__*/_react.default.createElement(_noResults.NoResults, null);
     } else if (status === 'empty' || !columns.length) {
       // persist the empty state when making the initial /data request which contains the columns
@@ -345,7 +348,7 @@ var PlainJiraIssuesConfigModal = function PlainJiraIssuesConfigModal(props) {
     }, /*#__PURE__*/_react.default.createElement(_datasourcesTableInModalPreview.default, {
       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 = (0, _react.useMemo)(function () {
     if ((0, _platformFeatureFlags.fg)('confluence-issue-terminology-refresh')) {
       return availableSites && availableSites.length > 1 ? _messages3.modalMessages.insertIssuesTitleManySitesIssueTermRefresh : _messages3.modalMessages.insertIssuesTitleIssueTermRefresh;

package/dist/es2019/hooks/useDatasourceTableState.js

@@ -1,6 +1,7 @@
 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';
@@ -230,7 +231,11 @@ export const useDatasourceTableState = ({
       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.
+      const 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);
       }
       const isUserLoadingNextPage = responseItems.length !== 0 && !shouldRequestFirstPage;

package/dist/es2019/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';
@@ -46,6 +47,9 @@ export const RenderAssetsContent = props => {
     isFetchingInitialData
   } = props;
   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 issueLikeDataTableView = useMemo(() => /*#__PURE__*/React.createElement("div", {
     className: ax(["_1reo1wug _18m91wug _4t3i1pna _1e0c11p5", "_19itia51 _n7zl1mpn _13li1mok _qrwq1mok _1itkz1kv _12vemgnk _1lrw1sd4 _qmxj1c00"])
   }, /*#__PURE__*/React.createElement(IssueLikeDataTableView, {
@@ -70,12 +74,12 @@ export const 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/es2019/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/es2019/ui/common/error-state/no-results.js

@@ -11,10 +11,12 @@ import { SpotSearchNoResult } from '../../../common/ui/spot/error-state/search-n
 import { loadingErrorMessages } from './messages';
 const 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 const NoResults = ({
+  isCompact,
   onRefresh
 }) => {
   const {
@@ -27,7 +29,7 @@ export const NoResults = ({
     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/es2019/ui/common/modal/display-view-dropdown/display-view-drop-down.js

@@ -7,10 +7,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';
 const styles = {
-  dropDownItemGroupStyles: "_2rko12b0 _1bsb1pna _4t3i7iqz"
+  dropDownItemGroupStyles: "_2rko12b0 _1bsb1pna _4t3i7iqz",
+  dropDownItemGroupStylesWithoutFixedHeight: "_2rko12b0 _1bsb1pna"
 };
 const InlineIcon = /*#__PURE__*/React.createElement("svg", {
   xmlns: "http://www.w3.org/2000/svg",
@@ -59,7 +61,7 @@ export const DisplayViewDropDown = ({
     }), triggerText),
     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: () => onViewModeChange('table'),

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/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.10",
+	"version": "6.4.11",
 	"description": "UI Components to support linking platform dataset feature",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -188,6 +188,9 @@
 		"platform_lp_sllv_richtext_margin_reset": {
 			"type": "boolean"
 		},
+		"platform_lp_sllv_ux_improvements": {
+			"type": "boolean"
+		},
 		"navx-5509-sllv-link-new-tab-hint": {
 			"type": "boolean"
 		},

package/link-datasource.docs.tsx

@@ -1,169 +0,0 @@
-/**
- * Testing structured MCP docs for review — ignore this file.
- * Contact #dst-structured-content in Slack with questions.
- */
-
-import path from 'path';
-
-import type { StructuredContentSource } from '@atlassian/structured-docs-types/types';
-
-import packageJson from './package.json';
-
-const packagePath = path.resolve(__dirname);
-
-const documentation: StructuredContentSource = {
-	components: [
-		{
-			name: 'ConfluenceSearchConfigModal',
-			description:
-				'Configuration modal for the Confluence search datasource. Lets users set up a "list of links" backed by a Confluence search query (space, query, sort) and produces Confluence search datasource ADF.',
-			status: 'general-availability',
-			import: {
-				name: 'ConfluenceSearchConfigModal',
-				package: '@atlaskit/link-datasource',
-				type: 'named',
-				packagePath,
-				packageJson,
-			},
-			usageGuidelines: [
-				'Use when the user is configuring a Confluence search-based list of links (e.g. in a block or sidebar). On confirm, use the returned parameters to build datasource ADF or pass to DatasourceTableView.',
-			],
-			contentGuidelines: [],
-			accessibilityGuidelines: [
-				'Ensure the modal has an accessible title and focus is trapped; form fields (space, query, sort) must have labels and error messages announced.',
-			],
-			keywords: ['link-datasource', 'confluence', 'search', 'datasource', 'config', 'modal'],
-			categories: ['linking', 'data-display', 'forms'],
-			examples: [
-				{
-					name: 'Confluence search config modal',
-					description:
-						'ConfluenceSearchConfigModal for configuring a Confluence search datasource.',
-					source: path.resolve(
-						packagePath,
-						'./examples/content/basic-confluence-search-config-modal.tsx',
-					),
-				},
-			],
-		},
-		{
-			name: 'JiraIssuesConfigModal',
-			description:
-				'Configuration modal for the Jira issues datasource. Lets users set up a list of Jira issues (JQL, columns, filters) and produces Jira issues datasource ADF.',
-			status: 'general-availability',
-			import: {
-				name: 'JiraIssuesConfigModal',
-				package: '@atlaskit/link-datasource',
-				type: 'named',
-				packagePath,
-				packageJson,
-			},
-			usageGuidelines: [
-				'Use when the user is configuring a Jira issues list (e.g. in a block or table). On confirm, use the returned parameters for datasource ADF or DatasourceTableView.',
-			],
-			contentGuidelines: [],
-			accessibilityGuidelines: [
-				'Ensure the modal has an accessible title and focus management; JQL and column pickers must have clear labels and error announcements.',
-			],
-			keywords: ['link-datasource', 'jira', 'issues', 'datasource', 'config', 'modal', 'JQL'],
-			categories: ['linking', 'data-display', 'forms'],
-			examples: [
-				{
-					name: 'Jira issues config modal',
-					description: 'JiraIssuesConfigModal for configuring a Jira issues datasource.',
-					source: path.resolve(
-						packagePath,
-						'./examples/content/basic-jira-issues-config-modal.tsx',
-					),
-				},
-				{
-					name: 'Jira issues table',
-					description: 'Basic Jira issues table view using datasource.',
-					source: path.resolve(packagePath, './examples/basic-jira-issues-table.tsx'),
-				},
-			],
-		},
-		{
-			name: 'AssetsConfigModal',
-			description:
-				'Configuration modal for the Assets (object schema) datasource. Lets users set up a list of links from an Assets schema and produces Assets datasource ADF.',
-			status: 'general-availability',
-			import: {
-				name: 'AssetsConfigModal',
-				package: '@atlaskit/link-datasource',
-				type: 'named',
-				packagePath,
-				packageJson,
-			},
-			usageGuidelines: [
-				'Use when the user is configuring an Assets-based list of links. On confirm, use the returned parameters for datasource ADF or table view.',
-			],
-			contentGuidelines: [],
-			accessibilityGuidelines: [
-				'Ensure the modal has an accessible title and that schema/object pickers have clear labels.',
-			],
-			keywords: ['link-datasource', 'assets', 'datasource', 'config', 'modal'],
-			categories: ['linking', 'data-display', 'forms'],
-			examples: [
-				{
-					name: 'Assets config modal',
-					description: 'AssetsConfigModal for configuring an Assets datasource.',
-					source: path.resolve(packagePath, './examples/content/basic-assets-config-modal.tsx'),
-				},
-			],
-		},
-		{
-			name: 'DatasourceTableView',
-			description:
-				'Table view component that renders a datasource (list of links) with configurable columns, sorting, and actions. Consumes datasource ADF or parameters and fetches data via the link client.',
-			status: 'general-availability',
-			import: {
-				name: 'DatasourceTableView',
-				package: '@atlaskit/link-datasource',
-				type: 'named',
-				packagePath,
-				packageJson,
-			},
-			usageGuidelines: [
-				'Use when you need to display a list of links (Jira issues, Confluence search, Assets) in a table. Pass the datasource ADF or parameters; wrap in SmartCardProvider so resolution and actions work.',
-			],
-			contentGuidelines: [],
-			accessibilityGuidelines: [
-				'Ensure the table has a caption or aria-label; column headers and sort controls must be focusable and announced. Loading and error states should be announced.',
-			],
-			keywords: ['link-datasource', 'table', 'datasource', 'list of links', 'view'],
-			categories: ['linking', 'data-display'],
-			examples: [
-				{
-					name: 'Jira issues table',
-					description: 'DatasourceTableView showing Jira issues from a configured datasource.',
-					source: path.resolve(packagePath, './examples/basic-jira-issues-table.tsx'),
-				},
-			],
-		},
-		// Needs examples
-		// {
-		// 	name: 'buildDatasourceAdf',
-		// 	description:
-		// 		'Utility that builds datasource ADF (ADF node for list of links) from datasource parameters. Used to persist or pass datasource config into the editor or table view.',
-		// 	status: 'general-availability',
-		// 	import: {
-		// 		name: 'buildDatasourceAdf',
-		// 		package: '@atlaskit/link-datasource',
-		// 		type: 'named',
-		// 		packagePath,
-		// 		packageJson,
-		// 	},
-		// 	usageGuidelines: [
-		// 		'Use when you have datasource parameters (e.g. from a config modal) and need to produce the corresponding ADF node for the editor or for DatasourceTableView.',
-		// 	],
-		// 	contentGuidelines: [],
-		// 	accessibilityGuidelines: [],
-		// 	keywords: ['link-datasource', 'adf', 'datasource', 'build', 'utility'],
-		// 	categories: ['linking', 'data-display'],
-		// 	examples: [],
-		// },
-	],
-};
-
-export default documentation;