@atlaskit/link-datasource 6.4.9 → 6.4.11

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @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
+
+- [`83f61c8f828c6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/83f61c8f828c6) -
+  Cleaning up navx-5290-sllv-modal-a11y-updates
+- Updated dependencies
+
 ## 6.4.9
 
 ### 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/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/cjs/ui/common/modal/mode-switcher/index.js

@@ -10,7 +10,6 @@ require("./index.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden/visually-hidden"));
 var _types = require("../../../../analytics/types");
@@ -19,7 +18,6 @@ var _displayViewDropDown = require("../display-view-dropdown/display-view-drop-d
 var _useViewModeContext2 = require("./useViewModeContext");
 var modeSwitcherStyles = null;
 var compactModeSwitcherStyles = null;
-var modeInputStyles = null;
 var modeFocusStyles = null;
 var modeSwitcherLabelStyles = null;
 var modeSwitcherLabelSelectedStyles = null;
@@ -37,7 +35,6 @@ var ModeSwitcher = exports.ModeSwitcher = function ModeSwitcher(props) {
   var handleModeChange = function handleModeChange(event) {
     onOptionValueChange(event.currentTarget.value);
   };
-  var RadioWrapper = (0, _platformFeatureFlags.fg)('navx-5290-sllv-modal-a11y-updates') ? _visuallyHidden.default : _react.default.Fragment;
   return options.length > 0 ? /*#__PURE__*/_react.default.createElement("fieldset", {
     "data-testid": "mode-toggle-container",
     disabled: isDisabled,
@@ -55,16 +52,15 @@ var ModeSwitcher = exports.ModeSwitcher = function ModeSwitcher(props) {
       return /*#__PURE__*/_react.default.createElement("label", (0, _extends2.default)({}, tooltipProps, {
         key: value,
         "data-testid": "mode-toggle-".concat(value),
-        className: (0, _runtime.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", (0, _platformFeatureFlags.fg)('navx-5290-sllv-modal-a11y-updates') && "_1e387g83 _7glxv77o"])
-      }), label, /*#__PURE__*/_react.default.createElement(RadioWrapper, null, /*#__PURE__*/_react.default.createElement("input", {
+        className: (0, _runtime.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.default.createElement(_visuallyHidden.default, null, /*#__PURE__*/_react.default.createElement("input", {
         "aria-checked": isSelected,
         "aria-disabled": isOptionDisabled,
         checked: isSelected,
         disabled: isOptionDisabled,
         onChange: handleModeChange,
         type: "radio",
-        value: value,
-        className: (0, _runtime.ax)([!(0, _platformFeatureFlags.fg)('navx-5290-sllv-modal-a11y-updates') && "_1e0cglyw"])
+        value: value
       })));
     });
   })) : null;

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

@@ -17,7 +17,6 @@ var _reactIntl = require("react-intl");
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _select = require("@atlaskit/select");
 var _messages = require("./messages");
@@ -85,10 +84,8 @@ var SiteSelector = exports.SiteSelector = function SiteSelector(props) {
             size: "small"
           });
         },
-        testId: "".concat(testId, "__control")
-      }, (0, _platformFeatureFlags.fg)('navx-5290-sllv-modal-a11y-updates') ? {
-        'aria-label': selectedSiteOption !== null && selectedSiteOption !== void 0 && selectedSiteOption.label ? "".concat(formatMessage(_messages.siteSelectorMessages.chooseSite), ": ").concat(selectedSiteOption.label) : formatMessage(_messages.siteSelectorMessages.chooseSite)
-      } : {}, {
+        testId: "".concat(testId, "__control"),
+        "aria-label": selectedSiteOption !== null && selectedSiteOption !== void 0 && selectedSiteOption.label ? "".concat(formatMessage(_messages.siteSelectorMessages.chooseSite), ": ").concat(selectedSiteOption.label) : formatMessage(_messages.siteSelectorMessages.chooseSite),
         autoFocus: true
       }), (selectedSiteOption === null || selectedSiteOption === void 0 ? void 0 : selectedSiteOption.label) || formatMessage(_messages.siteSelectorMessages.chooseSite));
     }

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/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/es2019/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';
 const modeSwitcherStyles = null;
 const compactModeSwitcherStyles = null;
-const modeInputStyles = null;
 const modeFocusStyles = null;
 const modeSwitcherLabelStyles = null;
 const modeSwitcherLabelSelectedStyles = null;
@@ -31,7 +29,6 @@ export const ModeSwitcher = props => {
   const handleModeChange = event => {
     onOptionValueChange(event.currentTarget.value);
   };
-  const 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,
@@ -49,16 +46,15 @@ export const ModeSwitcher = props => {
     }, tooltipProps => /*#__PURE__*/React.createElement("label", _extends({}, tooltipProps, {
       key: value,
       "data-testid": `mode-toggle-${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/es2019/ui/common/modal/site-selector/index.js

@@ -8,7 +8,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';
@@ -69,10 +68,8 @@ export const SiteSelector = props => {
         color: "currentColor",
         size: "small"
       }),
-      testId: `${testId}__control`
-    }, fg('navx-5290-sllv-modal-a11y-updates') ? {
-      'aria-label': selectedSiteOption !== null && selectedSiteOption !== void 0 && selectedSiteOption.label ? `${formatMessage(siteSelectorMessages.chooseSite)}: ${selectedSiteOption.label}` : formatMessage(siteSelectorMessages.chooseSite)
-    } : {}, {
+      testId: `${testId}__control`,
+      "aria-label": selectedSiteOption !== null && selectedSiteOption !== void 0 && selectedSiteOption.label ? `${formatMessage(siteSelectorMessages.chooseSite)}: ${selectedSiteOption.label}` : formatMessage(siteSelectorMessages.chooseSite),
       autoFocus: true
     }), (selectedSiteOption === null || selectedSiteOption === void 0 ? void 0 : selectedSiteOption.label) || formatMessage(siteSelectorMessages.chooseSite))
   })));