@atlaskit/link-datasource 3.19.2 → 3.20.0

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

@@ -0,0 +1,674 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import styled from '@emotion/styled';
+import debounce from 'lodash/debounce';
+import invariant from 'tiny-invariant';
+import { FlagsProvider } from '@atlaskit/flag';
+import { Skeleton } from '@atlaskit/linking-common';
+import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { reorderWithEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge';
+import { autoScroller } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { Box } from '@atlaskit/primitives';
+import { N40 } from '@atlaskit/theme/colors';
+import { fontFallback } from '@atlaskit/theme/typography';
+import Tooltip from '@atlaskit/tooltip';
+import { WidthObserver } from '@atlaskit/width-detector';
+import { startUfoExperience, succeedUfoExperience } from '../../analytics/ufoExperiences';
+import { stickyTableHeadersIndex } from '../../common/zindex';
+import { useDatasourceExperienceId } from '../../contexts/datasource-experience-id';
+import { ColumnPicker } from './column-picker';
+import { DragColumnPreview } from './drag-column-preview';
+import { DraggableTableHeading } from './draggable-table-heading';
+import TableEmptyState from './empty-state';
+import { renderType } from './render-type';
+import { InlineEditableTableCell, Table, TableHeading, withTablePluginHeaderPrefix } from './styled';
+import { TableCellContent } from './table-cell-content';
+import { useIsOnScreen } from './useIsOnScreen';
+import { COLUMN_BASE_WIDTH, getFieldLabelById, getWidthCss } from './utils';
+var tableSidePadding = "var(--ds-space-200, 16px)";
+var tableHeadStyles = css({
+  background: "var(--ds-elevation-surface-current, #FFF)",
+  position: 'sticky',
+  top: 0,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  zIndex: stickyTableHeadersIndex
+});
+var columnPickerWidth = 80;
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
+var ColumnPickerHeader = styled.th(_defineProperty({}, "".concat(withTablePluginHeaderPrefix('&:last-of-type')), {
+  boxSizing: 'border-box',
+  border: 0,
+  width: "".concat(columnPickerWidth, "px"),
+  zIndex: 10,
+  position: 'sticky',
+  right: "calc(-1 * ".concat(tableSidePadding, ")"),
+  backgroundColor: "var(--ds-elevation-surface-current, #FFF)",
+  /* It is required to have solid (not half-transparent) color because of this gradient business below */
+  borderBottom: "2px solid ".concat("var(--ds-border, ".concat(N40, ")")),
+  paddingRight: tableSidePadding,
+  background: "linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, ".concat("var(--ds-elevation-surface-current, #FFF)", " 10% )"),
+  /* Keeps dropdown button in the middle */
+  verticalAlign: 'middle',
+  /* In case when TH itself is bigger we want to keep picker at the right side */
+  textAlign: 'right'
+}));
+var truncateStyles = css({
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+var tableContainerStyles = css({
+  borderBottomLeftRadius: 0,
+  borderBottomRightRadius: 0,
+  position: 'relative'
+});
+
+/**
+ * Following section deals with slight gradient shadows that we add
+ * on all four sides when there is more content in that direction.
+ *
+ * We do that by applying two gradients to the background -
+ * one is "static" ('local') and other is "sticky" ('scroll'). \
+ * "Static" one makes a white color gradient, that when window is at the end of scrollable area goes on top
+ * of "sticky" (gray) one, dominating and hence disabling sticky one.
+ */
+
+var shadowColor = "var(--ds-shadow-overflow-perimeter, rgba(0, 0, 0, 0.1))";
+var shadowColorLight = "var(--ds-shadow-overflow-perimeter, rgba(0, 0, 0, 0.05))";
+var leftWhiteOverrideGradient = {
+  backgroundImage: "\n  linear-gradient(\n    90deg,\n    ".concat("var(--ds-elevation-surface-current, #FFF)", " 30%,\n    rgba(255, 255, 255, 0)\n  )"),
+  backgroundPosition: 'left center',
+  size: "40px 100%",
+  attachment: "local"
+};
+var topWhiteOverrideGradient = {
+  backgroundImage: "\n  linear-gradient(\n    0deg,\n    rgba(255, 255, 255, 0),\n    ".concat("var(--ds-elevation-surface-current, #FFF)", " 30%\n  )"),
+  backgroundPosition: 'top center',
+  size: "100% 100px",
+  attachment: "local"
+};
+var rightWhiteOverrideGradient = {
+  backgroundImage: "\n  linear-gradient(\n    90deg,\n    rgba(255, 255, 255, 0),\n    ".concat("var(--ds-elevation-surface-current, #FFF)", " 70%\n  )"),
+  backgroundPosition: 'right center',
+  size: "40px 100%",
+  attachment: "local"
+};
+var bottomWhiteOverride = {
+  backgroundImage: "\n  linear-gradient(\n    0deg,\n    ".concat("var(--ds-elevation-surface-current, #FFF)", " 30%,\n    rgba(255, 255, 255, 0)\n  )"),
+  backgroundPosition: 'bottom center',
+  size: "100% 40px",
+  attachment: "local"
+};
+var leftShadowGradient = {
+  backgroundImage: "\n  linear-gradient(\n    90deg,\n    ".concat(shadowColor, ",\n    rgba(0, 0, 0, 0)\n  )"),
+  backgroundPosition: 'left center',
+  size: "14px 100%",
+  attachment: "scroll"
+};
+var topShadowGradient = {
+  backgroundImage: "\n  linear-gradient(\n    0deg,\n    rgba(0, 0, 0, 0),\n    ".concat(shadowColorLight, "\n  )"),
+  backgroundPosition: '0 52px',
+  size: "100% 14px",
+  attachment: "scroll"
+};
+var rightShadowGradient = {
+  backgroundImage: "\n  linear-gradient(\n    90deg,\n    rgba(0, 0, 0, 0),\n    ".concat(shadowColor, "\n  )"),
+  backgroundPosition: 'right center',
+  size: "14px 100%",
+  attachment: "scroll"
+};
+var bottomShadowGradient = {
+  backgroundImage: "\n  linear-gradient(\n    0deg,\n    ".concat(shadowColorLight, ",\n    rgba(0, 0, 0, 0)\n  )"),
+  backgroundPosition: 'bottom center',
+  size: "100% 10px",
+  attachment: "scroll"
+};
+var shadows = [leftWhiteOverrideGradient, leftShadowGradient, rightWhiteOverrideGradient, rightShadowGradient, topWhiteOverrideGradient, topShadowGradient, bottomWhiteOverride, bottomShadowGradient];
+export var scrollableContainerShadowsCssComponents = {
+  backgroundImage: shadows.map(function (_ref) {
+    var backgroundImage = _ref.backgroundImage;
+    return backgroundImage;
+  }).join(','),
+  backgroundPosition: shadows.map(function (_ref2) {
+    var backgroundPosition = _ref2.backgroundPosition;
+    return backgroundPosition;
+  }).join(','),
+  backgroundRepeat: 'no-repeat',
+  backgroundSize: shadows.map(function (_ref3) {
+    var size = _ref3.size;
+    return size;
+  }).join(','),
+  backgroundAttachment: shadows.map(function (_ref4) {
+    var attachment = _ref4.attachment;
+    return attachment;
+  }).join(',')
+};
+var scrollableContainerStyles = css({
+  overflow: 'auto',
+  boxSizing: 'border-box',
+  backgroundColor: "var(--ds-elevation-surface-current, #FFF)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  backgroundImage: scrollableContainerShadowsCssComponents.backgroundImage,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  backgroundPosition: scrollableContainerShadowsCssComponents.backgroundPosition,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  backgroundRepeat: scrollableContainerShadowsCssComponents.backgroundRepeat,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  backgroundSize: scrollableContainerShadowsCssComponents.backgroundSize,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  backgroundAttachment: scrollableContainerShadowsCssComponents.backgroundAttachment
+});
+var tableStyles = css({
+  // These styles are needed to prevent thead bottom border from scrolling away.
+  // This happens because it is sticky. https://stackoverflow.com/questions/50361698/border-style-do-not-work-with-sticky-position-element
+  borderCollapse: 'separate',
+  borderSpacing: 0,
+  // There is a strange table:first-of-type rule that sets margin-top to 0 coming from container,
+  // but because our table is now not the first child (there is an empty div to measure width) we need to set it manually.
+  margin: 0
+});
+
+// By default tbody and thead have border-bottom: 2px ...
+// This removes it, because for header we handle it via `th` styling and footer supply bottom border
+var noDefaultBorderStyles = css({
+  borderBottom: 0
+});
+var headerStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  font: "var(--ds-font-body-UNSAFE_small, ".concat(fontFallback.body.UNSAFE_small, ")"),
+  fontWeight: "var(--ds-font-weight-medium, 500)"
+});
+var headingHoverEffectStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  whiteSpace: 'nowrap',
+  '&:hover': {
+    background: "var(--ds-background-input-hovered, #F7F8F9)",
+    borderRadius: "var(--ds-border-radius-200, 3px)"
+  }
+});
+function extractIndex(data) {
+  var index = data.index;
+  invariant(typeof index === 'number');
+  return index;
+}
+var sortColumns = function sortColumns(firstOption, secondOption) {
+  return firstOption.title.localeCompare(secondOption.title);
+};
+export var getOrderedColumns = function getOrderedColumns(columns, visibleColumnKeys) {
+  var visibleColumns = columns.filter(function (column) {
+    return visibleColumnKeys.includes(column.key);
+  }).sort(function (a, b) {
+    var indexB = visibleColumnKeys.indexOf(b.key);
+    var indexA = visibleColumnKeys.indexOf(a.key);
+    return indexA - indexB;
+  });
+  var alphabeticallySortedInvisibleColumns = columns.filter(function (column) {
+    return !visibleColumnKeys.includes(column.key);
+  }).sort(sortColumns);
+  return [].concat(_toConsumableArray(visibleColumns), _toConsumableArray(alphabeticallySortedInvisibleColumns));
+};
+var DEFAULT_WIDTH = COLUMN_BASE_WIDTH * 22;
+var keyBasedWidthMap = {
+  priority: COLUMN_BASE_WIDTH * 12.5,
+  // 100px
+  status: COLUMN_BASE_WIDTH * 12.5,
+  summary: COLUMN_BASE_WIDTH * 45,
+  description: COLUMN_BASE_WIDTH * 31,
+  type: COLUMN_BASE_WIDTH * 6,
+  key: COLUMN_BASE_WIDTH * 15
+};
+function getDefaultColumnWidth(key, type) {
+  var keyBasedWidth = keyBasedWidthMap[key];
+  if (keyBasedWidth) {
+    return keyBasedWidth;
+  }
+  switch (type) {
+    case 'date':
+      return COLUMN_BASE_WIDTH * 16;
+    case 'icon':
+      return COLUMN_BASE_WIDTH * 7;
+    default:
+      return DEFAULT_WIDTH;
+  }
+}
+export var IssueLikeDataTableViewOld = function IssueLikeDataTableViewOld(_ref5) {
+  var testId = _ref5.testId,
+    onNextPage = _ref5.onNextPage,
+    onLoadDatasourceDetails = _ref5.onLoadDatasourceDetails,
+    items = _ref5.items,
+    itemIds = _ref5.itemIds,
+    columns = _ref5.columns,
+    _ref5$renderItem = _ref5.renderItem,
+    renderItem = _ref5$renderItem === void 0 ? renderType : _ref5$renderItem,
+    visibleColumnKeys = _ref5.visibleColumnKeys,
+    onVisibleColumnKeysChange = _ref5.onVisibleColumnKeysChange,
+    columnCustomSizes = _ref5.columnCustomSizes,
+    onColumnResize = _ref5.onColumnResize,
+    wrappedColumnKeys = _ref5.wrappedColumnKeys,
+    onWrappedColumnChange = _ref5.onWrappedColumnChange,
+    status = _ref5.status,
+    hasNextPage = _ref5.hasNextPage,
+    scrollableContainerHeight = _ref5.scrollableContainerHeight,
+    extensionKey = _ref5.extensionKey;
+  var tableId = useMemo(function () {
+    return Symbol('unique-id');
+  }, []);
+  var experienceId = useDatasourceExperienceId();
+  var tableHeaderRowRef = useRef(null);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    lastRowElement = _useState2[0],
+    setLastRowElement = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hasFullSchema = _useState4[0],
+    setHasFullSchema = _useState4[1];
+  var isBottomOfTableVisibleRaw = useIsOnScreen(lastRowElement);
+  var containerRef = useRef(null);
+  var _useState5 = useState(function () {
+      return getOrderedColumns(_toConsumableArray(columns), _toConsumableArray(visibleColumnKeys));
+    }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    orderedColumns = _useState6[0],
+    setOrderedColumns = _useState6[1];
+
+  // Table container width is used to know if sum of all column widths is bigger of container or not.
+  // When sum of all columns is less than container size we make last column stretchable (width: undefined)
+  var _useState7 = useState(),
+    _useState8 = _slicedToArray(_useState7, 2),
+    tableContainerWidth = _useState8[0],
+    setTableContainerWidth = _useState8[1];
+  useEffect(function () {
+    var current = containerRef.current;
+    if (containerRef && current) {
+      setTableContainerWidth(current.getBoundingClientRect().width);
+    }
+  }, [containerRef]);
+  useEffect(function () {
+    if (orderedColumns.length !== columns.length) {
+      setOrderedColumns(getOrderedColumns(_toConsumableArray(columns), _toConsumableArray(visibleColumnKeys)));
+    }
+  }, [columns, visibleColumnKeys, orderedColumns]);
+  useEffect(function () {
+    if (experienceId && status === 'resolved') {
+      succeedUfoExperience({
+        name: 'datasource-rendered'
+      }, experienceId);
+    }
+  }, [experienceId, status]);
+  var visibleSortedColumns = useMemo(function () {
+    return visibleColumnKeys.map(function (visibleKey) {
+      return orderedColumns.find(function (_ref6) {
+        var key = _ref6.key;
+        return visibleKey === key;
+      });
+    }).filter(Boolean);
+  }, [orderedColumns, visibleColumnKeys]);
+
+  // TODO seems like this component can't handle some combination of incremental data retrieval.
+  // If data comes first, then columns and then visibleColumnKeys it blows up,
+  // or some other combination.
+  var columnsWidthsSum = useMemo(function () {
+    return visibleSortedColumns.map(function (_ref7) {
+      var key = _ref7.key,
+        type = _ref7.type;
+      return (columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key]) || getDefaultColumnWidth(key, type);
+    }).reduce(function (sum, width) {
+      return width + sum;
+    }, 0) + (onVisibleColumnKeysChange ? columnPickerWidth : 0);
+  }, [columnCustomSizes, onVisibleColumnKeysChange, visibleSortedColumns]);
+  var shouldUseWidth = !!(onColumnResize || columnCustomSizes);
+  var getColumnWidth = useCallback(function (key, type, isLastCell) {
+    if (isLastCell && shouldUseWidth && (!tableContainerWidth || tableContainerWidth > columnsWidthsSum)) {
+      return undefined;
+    } else {
+      return (columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key]) || getDefaultColumnWidth(key, type);
+    }
+  }, [columnCustomSizes, columnsWidthsSum, shouldUseWidth, tableContainerWidth]);
+  var headerColumns = useMemo(function () {
+    return visibleSortedColumns.map(function (_ref8, index) {
+      var key = _ref8.key,
+        title = _ref8.title,
+        type = _ref8.type;
+      return {
+        key: key,
+        content: title,
+        shouldTruncate: true,
+        width: getColumnWidth(key, type, index === visibleSortedColumns.length - 1)
+      };
+    });
+  }, [getColumnWidth, visibleSortedColumns]);
+  var loadingRow = useMemo(function () {
+    return {
+      key: 'loading',
+      cells: headerColumns.map(function (column) {
+        return {
+          content: jsx(Box, {
+            paddingInline: "space.100"
+          }, jsx(Skeleton, {
+            borderRadius: 8,
+            width: "100%",
+            height: 14,
+            testId: "issues-table-row-loading"
+          })),
+          key: column.key
+        };
+      })
+    };
+  }, [headerColumns]);
+  useEffect(function () {
+    if (isBottomOfTableVisibleRaw && hasNextPage && status === 'resolved') {
+      void onNextPage({
+        isSchemaFromData: false,
+        shouldForceRequest: true
+      });
+    }
+  }, [isBottomOfTableVisibleRaw, status, hasNextPage, onNextPage]);
+  var hasData = items.length > 0;
+
+  // This variable contains initial Y mouse coordinate, so we can restrict
+  // autoScroller in X axis only
+  var initialAutoScrollerClientY = useRef();
+  useEffect(function () {
+    if (!onVisibleColumnKeysChange || !hasData) {
+      return;
+    }
+    return combine(monitorForElements({
+      onDragStart: function onDragStart(_ref9) {
+        var location = _ref9.location,
+          source = _ref9.source;
+        initialAutoScrollerClientY.current = location.current.input.clientY;
+        if (source.data.type === 'table-header') {
+          var _containerRef$current;
+          autoScroller.start({
+            input: _objectSpread(_objectSpread({}, location.current.input), {}, {
+              clientY:
+              // The goal is to have clientY the same and in the middle of the scrollable area
+              // Since clientY is taken from to of the viewport we need to plus that in order to get
+              // middle of the scrollable area in reference to the viewport
+              (initialAutoScrollerClientY.current || 0) + (((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetHeight) || 0) / 2
+            }),
+            behavior: 'container-only'
+          });
+        }
+      },
+      onDrag: function onDrag(_ref10) {
+        var location = _ref10.location,
+          source = _ref10.source;
+        if (source.data.type === 'table-header') {
+          var _containerRef$current2;
+          autoScroller.updateInput({
+            input: _objectSpread(_objectSpread({}, location.current.input), {}, {
+              clientY: (initialAutoScrollerClientY.current || 0) + (((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.offsetHeight) || 0) / 2
+            })
+          });
+        }
+      },
+      onDrop: function onDrop(_ref11) {
+        var source = _ref11.source,
+          location = _ref11.location;
+        autoScroller.stop();
+        if (location.current.dropTargets.length === 0) {
+          return;
+        }
+        var target = location.current.dropTargets[0];
+        if (source.data.id === target.data.id) {
+          return;
+        }
+        if (source.data.type === 'table-header' && source.data.tableId === tableId) {
+          var closestEdgeOfTarget = extractClosestEdge(target.data);
+          invariant(closestEdgeOfTarget === 'left' || closestEdgeOfTarget === 'right');
+          var startIndex = extractIndex(source.data);
+          var indexOfTarget = extractIndex(target.data);
+          var newColumnKeyOrder = reorderWithEdge({
+            list: visibleColumnKeys,
+            closestEdgeOfTarget: closestEdgeOfTarget,
+            startIndex: startIndex,
+            indexOfTarget: indexOfTarget,
+            axis: 'horizontal'
+          });
+          onVisibleColumnKeysChange === null || onVisibleColumnKeysChange === void 0 || onVisibleColumnKeysChange(_toConsumableArray(newColumnKeyOrder));
+
+          // We sort columns (whole objects) according to their key order presented in newColumnKeyOrder
+          setOrderedColumns(function (columns) {
+            return getOrderedColumns(_toConsumableArray(columns), _toConsumableArray(newColumnKeyOrder));
+          });
+        }
+      }
+    }));
+  }, [visibleColumnKeys, onVisibleColumnKeysChange, tableId, hasData]);
+  var tableRows = useMemo(function () {
+    return itemIds.map(function (id, rowIndex) {
+      return {
+        key: id,
+        cells: visibleSortedColumns.map(function (_ref12, cellIndex) {
+          var key = _ref12.key,
+            type = _ref12.type,
+            title = _ref12.title;
+          return {
+            key: key,
+            columnKey: key,
+            // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+            content: jsx(TableCellContent, {
+              id: id,
+              columnKey: key,
+              columnType: type,
+              columnTitle: title,
+              wrappedColumnKeys: wrappedColumnKeys,
+              renderItem: renderItem
+            }),
+            width: getColumnWidth(key, type, cellIndex === visibleSortedColumns.length - 1)
+          };
+        }),
+        ref: rowIndex === items.length - 1 ? function (el) {
+          return setLastRowElement(el);
+        } : undefined
+      };
+    });
+  }, [items, itemIds, renderItem, wrappedColumnKeys, visibleSortedColumns, getColumnWidth]);
+  var rows = useMemo(function () {
+    if (status !== 'loading') {
+      return tableRows;
+    }
+    // if there are table rows, only add 1 loading row
+    if (tableRows.length > 0) {
+      return [].concat(_toConsumableArray(tableRows), [_objectSpread(_objectSpread({}, loadingRow), {}, {
+        key: "loading-".concat(tableRows.length)
+      })]);
+    }
+    // if there are no table rows add 14 rows if it is compact (has scrollableContainerHeight or non-modal)
+    // add 10 rows if it is modal (no scrollableContainerHeight)
+    var loadingRowsCount = scrollableContainerHeight ? 14 : 10;
+    return _toConsumableArray(Array(loadingRowsCount)).map(function (_, index) {
+      return _objectSpread(_objectSpread({}, loadingRow), {}, {
+        key: "loading-".concat(index)
+      });
+    });
+  }, [loadingRow, status, tableRows, scrollableContainerHeight]);
+  var onSelectedColumnKeysChange = useCallback(function (newSelectedColumnKeys) {
+    onVisibleColumnKeysChange === null || onVisibleColumnKeysChange === void 0 || onVisibleColumnKeysChange(newSelectedColumnKeys);
+  }, [onVisibleColumnKeysChange]);
+  var handlePickerOpen = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (!hasFullSchema) {
+            _context.next = 2;
+            break;
+          }
+          return _context.abrupt("return");
+        case 2:
+          if (experienceId) {
+            startUfoExperience({
+              name: 'column-picker-rendered',
+              metadata: {
+                extensionKey: extensionKey !== null && extensionKey !== void 0 ? extensionKey : undefined
+              }
+            }, experienceId);
+          }
+          _context.prev = 3;
+          _context.next = 6;
+          return onLoadDatasourceDetails();
+        case 6:
+          setHasFullSchema(true);
+          _context.next = 12;
+          break;
+        case 9:
+          _context.prev = 9;
+          _context.t0 = _context["catch"](3);
+          setHasFullSchema(false);
+        case 12:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[3, 9]]);
+  })), [experienceId, extensionKey, hasFullSchema, onLoadDatasourceDetails]);
+  var isEditable = onVisibleColumnKeysChange && hasData;
+  var orderedColumnsAreUpToDate = orderedColumns.length === columns.length;
+  var shouldDisplayColumnsInPicker = hasFullSchema && orderedColumnsAreUpToDate;
+  var view = jsx("div", {
+    /* There is required contentEditable={true} in editor-card-plugin
+     * But this brakes how DND works. We set contentEditable={false} to allow DND to work
+     * when dragging is initiated on top of a column label.
+     */
+    contentEditable: false,
+    ref: containerRef,
+    css: [tableContainerStyles, scrollableContainerHeight && scrollableContainerStyles]
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: scrollableContainerHeight ? {
+      maxHeight: "".concat(scrollableContainerHeight, "px")
+    } : undefined,
+    "data-testid": 'issue-like-table-container'
+  }, jsx(WidthObserver, {
+    setWidth: debounce(setTableContainerWidth, 100)
+  }), jsx(Table, {
+    css: tableStyles,
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: shouldUseWidth ? {
+      tableLayout: 'fixed'
+    } : {}
+  }, jsx("thead", {
+    "data-testid": testId && "".concat(testId, "--head"),
+    css: [noDefaultBorderStyles, tableHeadStyles]
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: !!onVisibleColumnKeysChange ? 'has-column-picker' : ''
+  }, jsx("tr", {
+    ref: tableHeaderRowRef
+  }, headerColumns.map(function (_ref14, cellIndex) {
+    var key = _ref14.key,
+      content = _ref14.content,
+      width = _ref14.width;
+    var heading = jsx(Tooltip, {
+      content: content,
+      tag: "span",
+      position: "bottom-start",
+      testId: 'datasource-header-content'
+    }, jsx("span", {
+      css: headerStyles,
+      id: getFieldLabelById(key)
+    }, content));
+    var isHeadingOutsideButton = !isEditable || !onWrappedColumnChange;
+    if (isHeadingOutsideButton) {
+      heading = jsx("div", {
+        css: headingHoverEffectStyles
+      }, heading);
+    }
+    if (isEditable) {
+      var _containerRef$current3;
+      var previewRows = tableRows.map(function (_ref15) {
+        var cells = _ref15.cells;
+        var cell = cells.find(function (_ref16) {
+          var cellKey = _ref16.key;
+          return cellKey === key;
+        });
+        if (cell) {
+          return cell.content;
+        }
+      }).slice(0, 5);
+      var dragPreview = jsx(DragColumnPreview, {
+        title: heading,
+        rows: previewRows
+      });
+      return jsx(DraggableTableHeading, {
+        tableId: tableId,
+        key: key,
+        id: key,
+        index: cellIndex,
+        width: width,
+        onWidthChange: onColumnResize === null || onColumnResize === void 0 ? void 0 : onColumnResize.bind(null, key),
+        dndPreviewHeight: ((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.offsetHeight) || 0,
+        dragPreview: dragPreview,
+        isWrapped: wrappedColumnKeys === null || wrappedColumnKeys === void 0 ? void 0 : wrappedColumnKeys.includes(key),
+        onIsWrappedChange: onWrappedColumnChange === null || onWrappedColumnChange === void 0 ? void 0 : onWrappedColumnChange.bind(null, key)
+      }, heading);
+    } else {
+      return jsx(TableHeading, {
+        key: key,
+        "data-testid": "".concat(key, "-column-heading")
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+        ,
+        style: getWidthCss({
+          shouldUseWidth: shouldUseWidth,
+          width: width
+        })
+      }, heading);
+    }
+  }), onVisibleColumnKeysChange && jsx(ColumnPickerHeader, null, jsx(ColumnPicker, {
+    columns: shouldDisplayColumnsInPicker ? orderedColumns : [],
+    selectedColumnKeys: shouldDisplayColumnsInPicker ? visibleColumnKeys : [],
+    onSelectedColumnKeysChange: onSelectedColumnKeysChange,
+    onOpen: handlePickerOpen
+  })))), jsx("tbody", {
+    css: noDefaultBorderStyles,
+    "data-testid": testId && "".concat(testId, "--body")
+  }, rows.map(function (_ref17) {
+    var key = _ref17.key,
+      cells = _ref17.cells,
+      ref = _ref17.ref;
+    return jsx("tr", {
+      key: key,
+      "data-testid": testId && "".concat(testId, "--row-").concat(key),
+      ref: ref
+    }, cells.map(function (_ref18, cellIndex) {
+      var cellKey = _ref18.key,
+        content = _ref18.content,
+        width = _ref18.width;
+      var isLastCell = cellIndex === cells.length - 1;
+      var loadingRowStyle = getWidthCss({
+        shouldUseWidth: shouldUseWidth,
+        width: width
+      });
+      return jsx(InlineEditableTableCell, {
+        key: cellKey,
+        "data-testid": testId && "".concat(testId, "--cell-").concat(cellIndex),
+        colSpan: isEditable && isLastCell ? 2 : undefined
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
+        style: loadingRowStyle,
+        css: [wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey) ? null : truncateStyles]
+      }, content);
+    }));
+  }))));
+  return jsx(FlagsProvider, null, view);
+};
+export var EmptyStateOld = TableEmptyState;