@atlaskit/link-datasource 2.9.0 → 2.9.2

package/dist/es2019/hooks/useDatasourceTableState.js

@@ -32,7 +32,7 @@ export const useDatasourceTableState = ({
   const [status, setStatus] = useState('empty');
   const [authDetails, setAuthDetails] = useState([]);
   const [responseItems, setResponseItems] = useState(initialEmptyArray);
-  const [, setResponseItemIds] = useState(initialEmptyArray);
+  const [responseItemIds, setResponseItemIds] = useState(initialEmptyArray);
   const [hasNextPage, setHasNextPage] = useState(true);
   const [nextCursor, setNextCursor] = useState(undefined);
   const [columns, setColumns] = useState([]);
@@ -291,6 +291,7 @@ export const useDatasourceTableState = ({
     status,
     onNextPage,
     responseItems,
+    responseItemIds,
     reset,
     loadDatasourceDetails,
     hasNextPage,

package/dist/es2019/ui/assets-modal/modal/index.js

@@ -117,6 +117,7 @@ const PlainAssetsConfigModal = props => {
     status,
     onNextPage,
     responseItems,
+    responseItemIds,
     reset,
     loadDatasourceDetails,
     hasNextPage,
@@ -339,6 +340,7 @@ const PlainAssetsConfigModal = props => {
     isFetchingInitialData: assetsClientLoading,
     status: status,
     responseItems: responseItems,
+    responseItemIds: responseItemIds,
     visibleColumnKeys: visibleColumnKeys,
     onVisibleColumnKeysChange: onVisibleColumnKeysChange,
     datasourceId: datasourceId,

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

@@ -58,6 +58,7 @@ export const RenderAssetsContent = props => {
   const {
     status,
     responseItems,
+    responseItemIds,
     visibleColumnKeys,
     onNextPage,
     hasNextPage,
@@ -75,12 +76,13 @@ export const RenderAssetsContent = props => {
     status: status,
     columns: columns,
     items: responseItems,
+    itemIds: responseItemIds,
     hasNextPage: hasNextPage,
     visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
     onNextPage: onNextPage,
     onLoadDatasourceDetails: loadDatasourceDetails,
     onVisibleColumnKeysChange: onVisibleColumnKeysChange
-  })), [columns, defaultVisibleColumnKeys, hasNextPage, loadDatasourceDetails, onNextPage, onVisibleColumnKeysChange, responseItems, status, visibleColumnKeys]);
+  })), [columns, defaultVisibleColumnKeys, hasNextPage, loadDatasourceDetails, onNextPage, onVisibleColumnKeysChange, responseItems, responseItemIds, status, visibleColumnKeys]);
   const renderAssetsContentView = useCallback(() => {
     if (isFetchingInitialData) {
       // Placing this check first as it's a priority before all others

package/dist/es2019/ui/common/modal/datasource-context/index.js

@@ -51,7 +51,7 @@ export const DatasourceContextProvider = ({
     onWrappedColumnChange,
     parameters,
     setParameters,
-    onInsert
+    onInsert: onInsert
   }), [datasourceId, isValidParameters, tableState, visibleColumnCount, visibleColumnKeys, onVisibleColumnKeysChange, columnCustomSizes, onColumnResize, wrappedColumnKeys, onWrappedColumnChange, parameters, onInsert]);
   return /*#__PURE__*/React.createElement(DatasourceContext.Provider, {
     value: contextValue

package/dist/es2019/ui/common/modal/datasource-modal/createDatasourceModal.js

@@ -0,0 +1,51 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+import React from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { DatasourceExperienceIdProvider } from '../../../../contexts/datasource-experience-id';
+import { UserInteractionsProvider } from '../../../../contexts/user-interactions';
+import { DatasourceContextProvider } from '../datasource-context';
+import { DatasourceViewModeProvider } from '../mode-switcher/useViewModeContext';
+const DEFAULT_VIEW_MODE = 'table';
+export const createDatasourceModal = ({
+  isValidParameters,
+  dataProvider,
+  component: ModalContent
+}) => {
+  return props => {
+    const {
+      datasourceId,
+      visibleColumnKeys,
+      columnCustomSizes,
+      wrappedColumnKeys,
+      parameters,
+      onInsert,
+      viewMode
+    } = props;
+    return jsx(AnalyticsContext, {
+      data: {
+        source: 'datasourceConfigModal',
+        component: 'datasourceConfigModal',
+        attributes: {
+          dataProvider
+        }
+      }
+    }, jsx(DatasourceExperienceIdProvider, null, jsx(UserInteractionsProvider, null, jsx(DatasourceContextProvider, {
+      datasourceId: datasourceId,
+      initialVisibleColumnKeys: visibleColumnKeys,
+      initialColumnCustomSizes: columnCustomSizes,
+      initialWrappedColumnKeys: wrappedColumnKeys,
+      initialParameters: parameters,
+      isValidParameters: isValidParameters,
+      onInsert: onInsert
+    }, jsx(DatasourceViewModeProvider, {
+      viewMode: viewMode !== null && viewMode !== void 0 ? viewMode : DEFAULT_VIEW_MODE
+    }, jsx(ModalContent, props))))));
+  };
+};

package/dist/es2019/ui/common/modal/datasources-table-in-modal-preview/index.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+import React, { useCallback } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { DatasourceAction } from '../../../../analytics/types';
+import { useUserInteractions } from '../../../../contexts/user-interactions';
 import { IssueLikeDataTableView } from '../../../issue-like-table';
 import { useDatasourceContext } from '../datasource-context';
 const Table = props => {
@@ -15,6 +17,7 @@ const Table = props => {
       status,
       onNextPage,
       responseItems,
+      responseItemIds,
       hasNextPage,
       columns,
       defaultVisibleColumnKeys,
@@ -22,13 +25,19 @@ const Table = props => {
       extensionKey = null
     }
   } = useDatasourceContext();
+  const userInteractions = useUserInteractions();
+  const handleOnNextPage = useCallback((onNextPageProps = {}) => {
+    userInteractions.add(DatasourceAction.NEXT_PAGE_SCROLLED);
+    onNextPage(onNextPageProps);
+  }, [onNextPage, userInteractions]);
   return /*#__PURE__*/React.createElement(IssueLikeDataTableView, _extends({}, props, {
     status: status,
     columns: columns,
     items: responseItems,
+    itemIds: responseItemIds,
     hasNextPage: hasNextPage,
     visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
-    onNextPage: onNextPage,
+    onNextPage: handleOnNextPage,
     onLoadDatasourceDetails: loadDatasourceDetails,
     onVisibleColumnKeysChange: onVisibleColumnKeysChange,
     extensionKey: extensionKey,

package/dist/es2019/ui/common/modal/insert-button/index.js

@@ -18,6 +18,7 @@ export const InsertButton = ({
   testId,
   url,
   getAnalyticsPayload,
+  overwriteParameters,
   children
 }) => {
   const {
@@ -47,12 +48,12 @@ export const InsertButton = ({
     const insertButtonClickedEvent = analyticsEvent.update({
       actionSubjectId: 'insert',
       attributes: {
-        ...getAnalyticsPayload(),
         totalItemCount: totalCount || 0,
         displayedColumnCount: visibleColumnCount.current,
         display: currentViewMode === 'inline' ? DatasourceDisplay.DATASOURCE_INLINE : DatasourceDisplay.DATASOURCE_TABLE,
         searchMethod: DatasourceSearchMethod.DATASOURCE_SEARCH_QUERY,
-        actions: userInteractions.get()
+        actions: userInteractions.get(),
+        ...getAnalyticsPayload()
       },
       eventType: 'ui'
     });
@@ -68,7 +69,7 @@ export const InsertButton = ({
     } else {
       onInsert(buildDatasourceAdf({
         id: datasourceId,
-        parameters: parameters,
+        parameters: overwriteParameters ? overwriteParameters(parameters) : parameters,
         views: [{
           type: 'table',
           properties: {
@@ -89,7 +90,7 @@ export const InsertButton = ({
         }]
       }, url), consumerEvent);
     }
-  }, [isValidParameters, parameters, url, getAnalyticsPayload, totalCount, visibleColumnCount, currentViewMode, userInteractions, onInsert, datasourceId, visibleColumnKeys, columnCustomSizes, wrappedColumnKeys]);
+  }, [columnCustomSizes, currentViewMode, datasourceId, getAnalyticsPayload, isValidParameters, onInsert, overwriteParameters, parameters, totalCount, url, userInteractions, visibleColumnCount, visibleColumnKeys, wrappedColumnKeys]);
   return jsx(Button, {
     appearance: "primary",
     onClick: onInsertPressed,

package/dist/es2019/ui/confluence-search-modal/modal/ModalOld.js

@@ -101,6 +101,7 @@ export const PlainConfluenceSearchConfigModal = props => {
     status,
     onNextPage,
     responseItems,
+    responseItemIds,
     hasNextPage,
     columns,
     defaultVisibleColumnKeys,
@@ -178,6 +179,7 @@ export const PlainConfluenceSearchConfigModal = props => {
     status: status,
     columns: columns,
     items: responseItems,
+    itemIds: responseItemIds,
     hasNextPage: hasNextPage,
     visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
     onNextPage: onNextPage,
@@ -188,7 +190,7 @@ export const PlainConfluenceSearchConfigModal = props => {
     onColumnResize: onColumnResize,
     wrappedColumnKeys: wrappedColumnKeys,
     onWrappedColumnChange: fg('platform.linking-platform.datasource-word_wrap') ? onWrappedColumnChange : undefined
-  })), [status, columns, responseItems, hasNextPage, visibleColumnKeys, defaultVisibleColumnKeys, onNextPage, loadDatasourceDetails, handleVisibleColumnKeysChange, extensionKey, columnCustomSizes, onColumnResize, wrappedColumnKeys, onWrappedColumnChange]);
+  })), [status, columns, responseItems, responseItemIds, hasNextPage, visibleColumnKeys, defaultVisibleColumnKeys, onNextPage, loadDatasourceDetails, handleVisibleColumnKeysChange, extensionKey, columnCustomSizes, onColumnResize, wrappedColumnKeys, onWrappedColumnChange]);
   const resolvedWithNoResults = status === 'resolved' && !responseItems.length;
   const hasConfluenceSearchParams = selectedConfluenceSite && searchString;
   const selectedConfluenceSiteUrl = selectedConfluenceSite === null || selectedConfluenceSite === void 0 ? void 0 : selectedConfluenceSite.url;

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

@@ -8,7 +8,7 @@ import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'rea
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
-import { withAnalyticsContext } from '@atlaskit/analytics-next';
+import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
 import { ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@atlaskit/modal-dialog';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -30,12 +30,13 @@ import { InitialStateView } from '../../common/initial-state-view';
 import { CancelButton } from '../../common/modal/cancel-button';
 import { ContentContainer } from '../../common/modal/content-container';
 import { SmartCardPlaceholder, SmartLink } from '../../common/modal/count-view-smart-link';
-import { DatasourceContextProvider, useDatasourceContext } from '../../common/modal/datasource-context';
+import { useDatasourceContext } from '../../common/modal/datasource-context';
 import { DatasourceModal } from '../../common/modal/datasource-modal';
+import { createDatasourceModal } from '../../common/modal/datasource-modal/createDatasourceModal';
 import DatasourcesTableInModalPreview from '../../common/modal/datasources-table-in-modal-preview';
 import { InsertButton } from '../../common/modal/insert-button';
 import { DatasourceViewModeDropDown } from '../../common/modal/mode-switcher';
-import { DatasourceViewModeProvider, useViewModeContext } from '../../common/modal/mode-switcher/useViewModeContext';
+import { useViewModeContext } from '../../common/modal/mode-switcher/useViewModeContext';
 import TableSearchCount from '../../common/modal/search-count';
 import { SiteSelector } from '../../common/modal/site-selector';
 import { EmptyState } from '../../issue-like-table';
@@ -43,7 +44,6 @@ import ConfluenceSearchContainer from '../confluence-search-container';
 import { ConfluenceSearchInitialStateSVG } from './confluence-search-initial-state-svg';
 import { confluenceSearchModalMessages } from './messages';
 import { PlainConfluenceSearchConfigModal as PlainConfluenceSearchConfigModalOld } from './ModalOld';
-const DEFAULT_VIEW_MODE = 'table';
 const inputContainerStyles = xcss({
   alignItems: 'baseline',
   display: 'flex',
@@ -75,7 +75,6 @@ const useUpdateParametersOnFormUpdate = (cloudId, searchString, lastModified, co
 export const PlainConfluenceSearchConfigModal = props => {
   const {
     onCancel,
-    parameters: initialParameters,
     url: urlBeingEdited,
     disableDisplayDropdown = false,
     overrideParameters
@@ -83,23 +82,6 @@ export const PlainConfluenceSearchConfigModal = props => {
   const {
     currentViewMode
   } = useViewModeContext();
-  const [cloudId, setCloudId] = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.cloudId);
-  const {
-    availableSites,
-    selectedSite: selectedConfluenceSite
-  } = useAvailableSites('confluence', cloudId);
-  const [searchString, setSearchString] = useState(initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.searchString);
-  const [contributorAccountIds, setContributorAccountIds] = useState((initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.contributorAccountIds) || []);
-  const [lastModified, setLastModified] = useState(initialParameters !== null && initialParameters !== void 0 && initialParameters.lastModified ? {
-    value: initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.lastModified,
-    from: initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.lastModifiedFrom,
-    to: initialParameters === null || initialParameters === void 0 ? void 0 : initialParameters.lastModifiedTo
-  } : undefined);
-
-  // analytics related parameters
-  const searchCount = useRef(0);
-  const userInteractions = useUserInteractions();
-  useUpdateParametersOnFormUpdate(cloudId, searchString, lastModified, contributorAccountIds, overrideParameters);
   const {
     visibleColumnKeys,
     tableState: {
@@ -114,6 +96,23 @@ export const PlainConfluenceSearchConfigModal = props => {
     visibleColumnCount,
     parameters
   } = useDatasourceContext();
+  const [cloudId, setCloudId] = useState(parameters === null || parameters === void 0 ? void 0 : parameters.cloudId);
+  const {
+    availableSites,
+    selectedSite: selectedConfluenceSite
+  } = useAvailableSites('confluence', cloudId);
+  const [searchString, setSearchString] = useState(parameters === null || parameters === void 0 ? void 0 : parameters.searchString);
+  const [contributorAccountIds, setContributorAccountIds] = useState((parameters === null || parameters === void 0 ? void 0 : parameters.contributorAccountIds) || []);
+  const [lastModified, setLastModified] = useState(parameters !== null && parameters !== void 0 && parameters.lastModified ? {
+    value: parameters === null || parameters === void 0 ? void 0 : parameters.lastModified,
+    from: parameters === null || parameters === void 0 ? void 0 : parameters.lastModifiedFrom,
+    to: parameters === null || parameters === void 0 ? void 0 : parameters.lastModifiedTo
+  } : undefined);
+
+  // analytics related parameters
+  const searchCount = useRef(0);
+  const userInteractions = useUserInteractions();
+  useUpdateParametersOnFormUpdate(cloudId, searchString, lastModified, contributorAccountIds, overrideParameters);
   const {
     fireEvent
   } = useDatasourceAnalyticsEvents();
@@ -306,7 +305,7 @@ export const PlainConfluenceSearchConfigModal = props => {
   }, jsx(ConfluenceSearchContainer, {
     isSearching: status === 'loading',
     onSearch: onSearch,
-    parameters: isValidParameters(parameters) ? parameters : {
+    parameters: parameters && isValidParameters(parameters) ? parameters : {
       cloudId: ''
     }
   })), currentViewMode === 'inline' ? renderInlineLinkModalContent() : renderTableModalContent()) : jsx(NoInstancesView, {
@@ -341,19 +340,16 @@ const contextData = {
     ...analyticsContextAttributes
   }
 };
-export const ConfluenceSearchConfigModal = withAnalyticsContext(contextData)(props => {
-  var _props$viewMode;
-  return jsx(StoreContainer, null, jsx(DatasourceExperienceIdProvider, null, jsx(UserInteractionsProvider, null, fg('platform-datasources-use-refactored-config-modal') ? jsx(DatasourceContextProvider, {
-    datasourceId: props.datasourceId,
-    initialVisibleColumnKeys: props.visibleColumnKeys,
-    initialColumnCustomSizes: props.columnCustomSizes,
-    initialWrappedColumnKeys: props.wrappedColumnKeys,
-    initialParameters: props.parameters,
-    isValidParameters: isValidParameters,
-    onInsert: props.onInsert
-  }, jsx(DatasourceViewModeProvider, {
-    viewMode: (_props$viewMode = props.viewMode) !== null && _props$viewMode !== void 0 ? _props$viewMode : DEFAULT_VIEW_MODE
-  }, jsx(PlainConfluenceSearchConfigModal, props))) :
-  // TODO on cleanup 'use-refactored-config-modal' ff, delete `ModalOld.tsx` as well
-  jsx(PlainConfluenceSearchConfigModalOld, props))));
-});
+const ConnectedConfluenceSearchConfigModal = createDatasourceModal({
+  isValidParameters,
+  dataProvider: 'confluence-search',
+  component: PlainConfluenceSearchConfigModal
+});
+export const ConfluenceSearchConfigModal = props => {
+  if (fg('platform-datasources-use-refactored-config-modal')) {
+    return jsx(StoreContainer, null, jsx(ConnectedConfluenceSearchConfigModal, props));
+  }
+  return jsx(StoreContainer, null, jsx(AnalyticsContext, {
+    data: contextData
+  }, jsx(DatasourceExperienceIdProvider, null, jsx(UserInteractionsProvider, null, jsx(PlainConfluenceSearchConfigModalOld, props)))));
+};

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

@@ -47,6 +47,7 @@ const DatasourceTableViewWithoutAnalytics = ({
     status,
     onNextPage,
     responseItems,
+    responseItemIds,
     hasNextPage,
     columns,
     defaultVisibleColumnKeys,
@@ -163,6 +164,7 @@ const DatasourceTableViewWithoutAnalytics = ({
     testId: 'datasource-table-view',
     hasNextPage: hasNextPage,
     items: responseItems,
+    itemIds: responseItemIds,
     onNextPage: onNextPage,
     onLoadDatasourceDetails: loadDatasourceDetails,
     status: status,

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

@@ -1,9 +1,8 @@
-import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+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';
@@ -13,6 +12,7 @@ import debounce from 'lodash/debounce';
 import { useIntl } from 'react-intl-next';
 import invariant from 'tiny-invariant';
 import { Skeleton } from '@atlaskit/linking-common';
+import { fg } from '@atlaskit/platform-feature-flags';
 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';
@@ -30,7 +30,9 @@ import { DragColumnPreview } from './drag-column-preview';
 import { DraggableTableHeading } from './draggable-table-heading';
 import TableEmptyState from './empty-state';
 import { renderType, stringifyType } from './render-type';
-import { fieldTextFontSize, Table, TableHeading, withTablePluginBodyPrefix, withTablePluginHeaderPrefix } from './styled';
+import { Table, TableCell, TableHeading, withTablePluginHeaderPrefix } from './styled';
+import { TableCellContent } from './table-cell-content';
+import { TruncateTextTag } from './truncate-text-tag';
 import { useIsOnScreen } from './useIsOnScreen';
 import { COLUMN_BASE_WIDTH, getWidthCss } from './utils';
 const tableSidePadding = "var(--ds-space-200, 16px)";
@@ -41,11 +43,6 @@ const tableHeadStyles = css({
   // 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
 });
-const truncateTextStyles = css({
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-});
 const columnPickerWidth = 80;
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 const ColumnPickerHeader = styled.th({
@@ -72,39 +69,6 @@ const truncateStyles = css({
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-const TableCell = styled.td({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  [`${withTablePluginBodyPrefix()}`]: {
-    /* First section here is to override things editor table plugin css defines */
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    font: fieldTextFontSize,
-    padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"}`,
-    border: 0,
-    minWidth: 'auto',
-    verticalAlign: 'inherit',
-    boxSizing: 'border-box',
-    borderRight: `0.5px solid ${`var(--ds-border, ${N40})`}`,
-    borderBottom: `0.5px solid ${`var(--ds-border, ${N40})`}`,
-    overflow: 'hidden'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  [`${withTablePluginBodyPrefix('&:first-child')}`]: {
-    paddingLeft: "var(--ds-space-100, 8px)"
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  [`${withTablePluginBodyPrefix('&:last-child')}`]: {
-    borderRight: 0,
-    paddingRight: "var(--ds-space-100, 8px)"
-  },
-  // Inline smart links are pretty opinionated about word-wrapping.
-  // We want it to be controlled by user, so we make it overflow and truncate by default.
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  ["& [data-testid='inline-card-icon-and-title'], " + "& [data-testid='button-connect-account'] > span"]: {
-    whiteSpace: 'unset'
-  }
-});
 const tableContainerStyles = css({
   borderRadius: 'inherit',
   borderBottomLeftRadius: 0,
@@ -314,18 +278,12 @@ function getDefaultColumnWidth(key, type) {
       return DEFAULT_WIDTH;
   }
 }
-const TruncateTextTag = /*#__PURE__*/forwardRef((props, ref) => {
-  return jsx("span", _extends({
-    css: truncateTextStyles
-  }, props, {
-    ref: ref
-  }), props.children);
-});
 export const IssueLikeDataTableView = ({
   testId,
   onNextPage,
   onLoadDatasourceDetails,
   items,
+  itemIds,
   columns,
   renderItem = renderType,
   visibleColumnKeys,
@@ -406,13 +364,13 @@ export const IssueLikeDataTableView = ({
   const loadingRow = useMemo(() => ({
     key: 'loading',
     cells: headerColumns.map(column => ({
-      ...column,
       content: jsx(Skeleton, {
         borderRadius: 8,
         width: "100%",
         height: 14,
         testId: "issues-table-row-loading"
-      })
+      }),
+      key: column.key
     }))
   }), [headerColumns]);
   useEffect(() => {
@@ -499,7 +457,29 @@ export const IssueLikeDataTableView = ({
       }
     }));
   }, [visibleColumnKeys, onVisibleColumnKeysChange, tableId, hasData]);
-  const tableRows = useMemo(() => items.map((newRowData, rowIndex) => ({
+  const tableRows = useMemo(() => fg('enable_datasource_react_sweet_state') ? itemIds.map((id, rowIndex) => {
+    return {
+      key: id,
+      cells: visibleSortedColumns.map(({
+        key,
+        type
+      }, cellIndex) => {
+        return {
+          key,
+          columnKey: key,
+          content: jsx(TableCellContent, {
+            id: id,
+            columnKey: key,
+            columnType: type,
+            wrappedColumnKeys: wrappedColumnKeys,
+            renderItem: renderItem
+          }),
+          width: getColumnWidth(key, type, cellIndex === visibleSortedColumns.length - 1)
+        };
+      }),
+      ref: rowIndex === items.length - 1 ? el => setLastRowElement(el) : undefined
+    };
+  }) : items.map((newRowData, rowIndex) => ({
     key: `${identityColumnKey && newRowData[identityColumnKey] && newRowData[identityColumnKey].data || rowIndex}`,
     cells: visibleSortedColumns.map(({
       key,
@@ -531,7 +511,7 @@ export const IssueLikeDataTableView = ({
       };
     }),
     ref: rowIndex === items.length - 1 ? el => setLastRowElement(el) : undefined
-  })), [items, visibleSortedColumns, renderItem, wrappedColumnKeys, getColumnWidth, intl.formatMessage, intl.formatDate]);
+  })), [items, itemIds, renderItem, wrappedColumnKeys, visibleSortedColumns, getColumnWidth, intl.formatMessage, intl.formatDate]);
   const rows = useMemo(() => {
     if (status !== 'loading') {
       return tableRows;

package/dist/es2019/ui/issue-like-table/styled.js

@@ -75,4 +75,37 @@ export const TableHeading = styled.th({
     overflow: 'hidden',
     wordWrap: 'break-word'
   }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
+export const TableCell = styled.td({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  [`${withTablePluginBodyPrefix()}`]: {
+    /* First section here is to override things editor table plugin css defines */
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    font: fieldTextFontSize,
+    padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"}`,
+    border: 0,
+    minWidth: 'auto',
+    verticalAlign: 'inherit',
+    boxSizing: 'border-box',
+    borderRight: `0.5px solid ${`var(--ds-border, ${N40})`}`,
+    borderBottom: `0.5px solid ${`var(--ds-border, ${N40})`}`,
+    overflow: 'hidden'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  [`${withTablePluginBodyPrefix('&:first-child')}`]: {
+    paddingLeft: "var(--ds-space-100, 8px)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  [`${withTablePluginBodyPrefix('&:last-child')}`]: {
+    borderRight: 0,
+    paddingRight: "var(--ds-space-100, 8px)"
+  },
+  // Inline smart links are pretty opinionated about word-wrapping.
+  // We want it to be controlled by user, so we make it overflow and truncate by default.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  ["& [data-testid='inline-card-icon-and-title'], " + "& [data-testid='button-connect-account'] > span"]: {
+    whiteSpace: 'unset'
+  }
 });

package/dist/es2019/ui/issue-like-table/table-cell-content/index.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import Tooltip from '@atlaskit/tooltip';
+import { useDatasourceItem } from '../../../state';
+import { stringifyType } from '../render-type';
+import { TruncateTextTag } from '../truncate-text-tag';
+export const TableCellContent = ({
+  columnKey,
+  columnType,
+  id,
+  renderItem,
+  wrappedColumnKeys
+}) => {
+  var _rowData$columnKey;
+  const intl = useIntl();
+  const rowData = useDatasourceItem({
+    id
+  });
+  if (!rowData || !columnKey || !rowData[columnKey]) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  }
+
+  // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
+  const value = (_rowData$columnKey = rowData[columnKey]) === null || _rowData$columnKey === void 0 ? void 0 : _rowData$columnKey.data;
+  const values = Array.isArray(value) ? value : [value];
+  const renderedValues = renderItem({
+    type: columnType,
+    values
+  });
+  const stringifiedContent = values.map(value => stringifyType({
+    type: columnType,
+    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
+    , {
+      tag: TruncateTextTag,
+      content: stringifiedContent,
+      testId: "issues-table-cell-tooltip"
+    }, renderedValues);
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, renderedValues);
+};

package/dist/es2019/ui/issue-like-table/truncate-text-tag/index.js

@@ -0,0 +1,21 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React, { forwardRef } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css, jsx } from '@emotion/react';
+const truncateTextStyles = css({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+export const TruncateTextTag = /*#__PURE__*/forwardRef((props, ref) => {
+  return jsx("span", _extends({
+    css: truncateTextStyles
+  }, props, {
+    ref: ref
+  }), props.children);
+});

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

@@ -105,6 +105,7 @@ export const PlainJiraIssuesConfigModalOld = props => {
     status,
     onNextPage,
     responseItems,
+    responseItemIds,
     hasNextPage,
     columns,
     defaultVisibleColumnKeys,
@@ -355,6 +356,7 @@ export const PlainJiraIssuesConfigModalOld = props => {
     status: status,
     columns: columns,
     items: responseItems,
+    itemIds: responseItemIds,
     hasNextPage: hasNextPage,
     visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
     onNextPage: handleOnNextPage,
@@ -365,7 +367,7 @@ export const PlainJiraIssuesConfigModalOld = props => {
     onColumnResize: onColumnResize,
     wrappedColumnKeys: wrappedColumnKeys,
     onWrappedColumnChange: fg('platform.linking-platform.datasource-word_wrap') ? onWrappedColumnChange : undefined
-  })), [status, columns, responseItems, hasNextPage, visibleColumnKeys, defaultVisibleColumnKeys, handleOnNextPage, loadDatasourceDetails, handleVisibleColumnKeysChange, extensionKey, columnCustomSizes, onColumnResize, wrappedColumnKeys, onWrappedColumnChange]);
+  })), [status, columns, responseItems, responseItemIds, hasNextPage, visibleColumnKeys, defaultVisibleColumnKeys, handleOnNextPage, loadDatasourceDetails, handleVisibleColumnKeysChange, extensionKey, columnCustomSizes, onColumnResize, wrappedColumnKeys, onWrappedColumnChange]);
   const renderCountModeContent = useCallback(() => {
     const selectedJiraSiteUrl = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
     if (status === 'unauthorized') {