@atlaskit/link-datasource 6.4.10 → 6.4.12

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/link-datasource
 
+## 6.4.12
+
+### Patch Changes
+
+- Updated dependencies
+
+## 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/common/modal/popup-select/index.js

@@ -188,9 +188,7 @@ var FilterPopupSelect = exports.FilterPopupSelect = function FilterPopupSelect(_
     shouldCloseMenuOnTab: false,
     hideSelectedOptions: false,
     isLoading: showLoading,
-    placeholder: searchPlaceholder ? searchPlaceholder : formatMessage(_messages.asyncPopupSelectMessages.selectPlaceholder)
-    // @ts-ignore - https://product-fabric.atlassian.net/browse/DSP-21000
-    ,
+    placeholder: searchPlaceholder ? searchPlaceholder : formatMessage(_messages.asyncPopupSelectMessages.selectPlaceholder),
     menuListProps: menuListProps,
     components: {
       Option: _customCheckboxOption.CustomCheckboxOption,

package/dist/cjs/ui/common/modal/popup-select/menu-list/index.js

@@ -26,9 +26,7 @@ var styles = {
 var CustomMenuList = function CustomMenuList(_ref) {
   var children = _ref.children,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _props$selectProps$me =
-    // @ts-ignore - https://product-fabric.atlassian.net/browse/DSP-21000
-    props.selectProps.menuListProps,
+  var _props$selectProps$me = props.selectProps.menuListProps,
     filterName = _props$selectProps$me.filterName,
     isLoading = _props$selectProps$me.isLoading,
     isLoadingMore = _props$selectProps$me.isLoadingMore,

package/dist/cjs/ui/confluence-search-modal/basic-filters/filters/date-range-picker/index.js

@@ -261,9 +261,7 @@ var DateRangePicker = exports.DateRangePicker = function DateRangePicker(_ref6)
   };
   return /*#__PURE__*/_react.default.createElement(_popup.default, {
     isOpen: !!isPickerOpen,
-    onClose: handlePickerToggle
-    // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
-    ,
+    onClose: handlePickerToggle,
     popupComponent: _PopupComponent.PopupComponent,
     zIndex: _constants.layers.modal(),
     content: popupContent,

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/column-picker/index.js

@@ -133,9 +133,7 @@ var ColumnPicker = exports.ColumnPicker = function ColumnPicker(_ref) {
       ignoreAccents: false
     }),
     options: allOptions,
-    value: selectedOptions
-    // @ts-ignore - https://product-fabric.atlassian.net/browse/DSP-21000
-    ,
+    value: selectedOptions,
     onOpen: handleOpen,
     closeMenuOnSelect: false,
     hideSelectedOptions: false,

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/issue-like-table/table-cell-content/index.js

@@ -40,9 +40,7 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
     return value !== '';
   }).join(', ');
   if (stringifiedContent && !(wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(columnKey))) {
-    return /*#__PURE__*/_react.default.createElement(_tooltip.default
-    // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
-    , {
+    return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
       tag: _truncateTextTag.TruncateTextTag,
       content: stringifiedContent,
       testId: "issues-table-cell-tooltip"

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/popup-select/index.js

@@ -139,9 +139,7 @@ export const FilterPopupSelect = ({
     shouldCloseMenuOnTab: false,
     hideSelectedOptions: false,
     isLoading: showLoading,
-    placeholder: searchPlaceholder ? searchPlaceholder : formatMessage(asyncPopupSelectMessages.selectPlaceholder)
-    // @ts-ignore - https://product-fabric.atlassian.net/browse/DSP-21000
-    ,
+    placeholder: searchPlaceholder ? searchPlaceholder : formatMessage(asyncPopupSelectMessages.selectPlaceholder),
     menuListProps: menuListProps,
     components: {
       Option: CustomCheckboxOption,

package/dist/es2019/ui/common/modal/popup-select/menu-list/index.js

@@ -28,9 +28,7 @@ const CustomMenuList = ({
     showMore,
     handleShowMore,
     filterLabel
-  } =
-  // @ts-ignore - https://product-fabric.atlassian.net/browse/DSP-21000
-  props.selectProps.menuListProps;
+  } = props.selectProps.menuListProps;
   const shouldDisplayShowMore = showMore && !isLoadingMore;
   const isLoadingMoreData = !shouldDisplayShowMore && isLoadingMore;
   const InlineSpinner = () => /*#__PURE__*/React.createElement(Flex, {

package/dist/es2019/ui/confluence-search-modal/basic-filters/filters/date-range-picker/index.js

@@ -227,9 +227,7 @@ export const DateRangePicker = ({
   };
   return /*#__PURE__*/React.createElement(Popup, {
     isOpen: !!isPickerOpen,
-    onClose: handlePickerToggle
-    // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
-    ,
+    onClose: handlePickerToggle,
     popupComponent: PopupComponent,
     zIndex: layers.modal(),
     content: popupContent,

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
   })));
 };