@atlaskit/link-datasource 6.4.10 → 6.4.12

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

@@ -106,9 +106,7 @@ export const ColumnPicker = ({
       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/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/issue-like-table/table-cell-content/index.js

@@ -31,9 +31,7 @@ const TooltipWrapper = ({
     value
   }, intl.formatMessage, intl.formatDate)).filter(value => value !== '').join(', ');
   if (stringifiedContent && !(wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(columnKey))) {
-    return /*#__PURE__*/React.createElement(Tooltip
-    // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
-    , {
+    return /*#__PURE__*/React.createElement(Tooltip, {
       tag: TruncateTextTag,
       content: stringifiedContent,
       testId: "issues-table-cell-tooltip"

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

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

package/dist/esm/hooks/useDatasourceTableState.js

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

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

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

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

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

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

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

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

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

package/dist/esm/ui/common/modal/popup-select/index.js

@@ -179,9 +179,7 @@ export var FilterPopupSelect = function FilterPopupSelect(_ref) {
     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/esm/ui/common/modal/popup-select/menu-list/index.js

@@ -19,9 +19,7 @@ var styles = {
 var CustomMenuList = function CustomMenuList(_ref) {
   var children = _ref.children,
     props = _objectWithoutProperties(_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/esm/ui/confluence-search-modal/basic-filters/filters/date-range-picker/index.js

@@ -254,9 +254,7 @@ export var DateRangePicker = function DateRangePicker(_ref6) {
   };
   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/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/column-picker/index.js

@@ -124,9 +124,7 @@ export var 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/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/issue-like-table/table-cell-content/index.js

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

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.12",
 	"description": "UI Components to support linking platform dataset feature",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -35,7 +35,7 @@
 		"ak-postbuild": "ls -d dist/* | xargs -n 1 copyfiles -u 1 -V src/**/*.{svg,png}"
 	},
 	"dependencies": {
-		"@atlaskit/adf-schema": "^56.7.0",
+		"@atlaskit/adf-schema": "^57.0.0",
 		"@atlaskit/afm-i18n-platform-linking-platform-link-datasource": "2.201.0",
 		"@atlaskit/analytics-next": "^12.3.0",
 		"@atlaskit/atlassian-context": "^1.1.0",
@@ -66,7 +66,7 @@
 		"@atlaskit/linking-common": "^11.1.0",
 		"@atlaskit/linking-types": "^15.0.0",
 		"@atlaskit/logo": "^21.4.0",
-		"@atlaskit/lozenge": "^15.0.0",
+		"@atlaskit/lozenge": "^15.1.0",
 		"@atlaskit/modal-dialog": "^16.3.0",
 		"@atlaskit/object": "^2.2.0",
 		"@atlaskit/outbound-auth-flow-client": "^4.1.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"
 		},