@atlaskit/link-datasource 2.9.3 → 2.9.5

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

@@ -7,35 +7,28 @@ Object.defineProperty(exports, "__esModule", {
 exports.TableCellContent = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _primitives = require("@atlaskit/primitives");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _state = require("../../../state");
 var _renderType = require("../render-type");
 var _truncateTextTag = require("../truncate-text-tag");
-var TableCellContent = exports.TableCellContent = function TableCellContent(_ref) {
-  var _rowData$columnKey;
+var truncateTextStyles = (0, _primitives.xcss)({
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  width: '100%'
+});
+var TooltipWrapper = function TooltipWrapper(_ref) {
   var columnKey = _ref.columnKey,
-    columnType = _ref.columnType,
-    id = _ref.id,
-    renderItem = _ref.renderItem,
-    wrappedColumnKeys = _ref.wrappedColumnKeys;
+    _ref$datasourceTypeWi = _ref.datasourceTypeWithValues,
+    type = _ref$datasourceTypeWi.type,
+    values = _ref$datasourceTypeWi.values,
+    wrappedColumnKeys = _ref.wrappedColumnKeys,
+    children = _ref.children;
   var intl = (0, _reactIntlNext.useIntl)();
-  var rowData = (0, _state.useDatasourceItem)({
-    id: id
-  });
-  if (!rowData || !columnKey || !rowData[columnKey]) {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
-  }
-
-  // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
-  var value = (_rowData$columnKey = rowData[columnKey]) === null || _rowData$columnKey === void 0 ? void 0 : _rowData$columnKey.data;
-  var values = Array.isArray(value) ? value : [value];
-  var renderedValues = renderItem({
-    type: columnType,
-    values: values
-  });
   var stringifiedContent = values.map(function (value) {
     return (0, _renderType.stringifyType)({
-      type: columnType,
+      type: type,
       value: value
     }, intl.formatMessage, intl.formatDate);
   }).filter(function (value) {
@@ -48,7 +41,89 @@ var TableCellContent = exports.TableCellContent = function TableCellContent(_ref
       tag: _truncateTextTag.TruncateTextTag,
       content: stringifiedContent,
       testId: "issues-table-cell-tooltip"
-    }, renderedValues);
+    }, children);
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+};
+var ReadOnlyCell = function ReadOnlyCell(_ref2) {
+  var _rowData$columnKey;
+  var id = _ref2.id,
+    columnType = _ref2.columnType,
+    _ref2$wrappedColumnKe = _ref2.wrappedColumnKeys,
+    wrappedColumnKeys = _ref2$wrappedColumnKe === void 0 ? [] : _ref2$wrappedColumnKe,
+    renderItem = _ref2.renderItem,
+    columnKey = _ref2.columnKey;
+  var rowData = (0, _state.useDatasourceItem)({
+    id: id
+  });
+  if (!rowData || !columnKey || !rowData[columnKey]) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+  }
+
+  // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
+  var value = (_rowData$columnKey = rowData[columnKey]) === null || _rowData$columnKey === void 0 ? void 0 : _rowData$columnKey.data;
+  var values = Array.isArray(value) ? value : [value];
+  var datasourceTypeWithValues = {
+    type: columnType,
+    values: values
+  };
+  return /*#__PURE__*/_react.default.createElement(TooltipWrapper, {
+    columnKey: columnKey,
+    datasourceTypeWithValues: datasourceTypeWithValues,
+    wrappedColumnKeys: wrappedColumnKeys
+  }, renderItem(datasourceTypeWithValues));
+};
+var InlineEditableCell = function InlineEditableCell(_ref3) {
+  var _rowData$columnKey2;
+  var id = _ref3.id,
+    columnKey = _ref3.columnKey,
+    columnType = _ref3.columnType,
+    renderItem = _ref3.renderItem,
+    wrappedColumnKeys = _ref3.wrappedColumnKeys;
+  var rowData = (0, _state.useDatasourceItem)({
+    id: id
+  });
+  if (!rowData || !columnKey || !rowData[columnKey]) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
   }
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderedValues);
+
+  // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
+  var value = (_rowData$columnKey2 = rowData[columnKey]) === null || _rowData$columnKey2 === void 0 ? void 0 : _rowData$columnKey2.data;
+  var values = Array.isArray(value) ? value : [value];
+  var datasourceTypeWithValues = {
+    type: columnType,
+    values: values
+  };
+  return /*#__PURE__*/_react.default.createElement(TooltipWrapper, {
+    columnKey: columnKey,
+    datasourceTypeWithValues: datasourceTypeWithValues,
+    wrappedColumnKeys: wrappedColumnKeys
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    testId: 'inline-edit-read-view',
+    paddingInline: 'space.100',
+    paddingBlock: 'space.050',
+    xcss: truncateTextStyles
+  }, renderItem(datasourceTypeWithValues)));
+};
+var TableCellContent = exports.TableCellContent = function TableCellContent(_ref4) {
+  var columnKey = _ref4.columnKey,
+    columnType = _ref4.columnType,
+    id = _ref4.id,
+    renderItem = _ref4.renderItem,
+    wrappedColumnKeys = _ref4.wrappedColumnKeys;
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  var renderedContent = (0, _platformFeatureFlags.fg)('platform-datasources-enable-two-way-sync') ? /*#__PURE__*/_react.default.createElement(InlineEditableCell, {
+    id: id,
+    columnKey: columnKey,
+    columnType: columnType,
+    renderItem: renderItem,
+    wrappedColumnKeys: wrappedColumnKeys
+  }) : /*#__PURE__*/_react.default.createElement(ReadOnlyCell, {
+    id: id,
+    columnKey: columnKey,
+    columnType: columnType,
+    wrappedColumnKeys: wrappedColumnKeys,
+    renderItem: renderItem
+  });
+  return renderedContent;
 };

package/dist/es2019/hooks/useDatasourceTableState.js

@@ -4,6 +4,7 @@ import { DEFAULT_GET_DATASOURCE_DATA_PAGE_SIZE, useDatasourceClientExtension } f
 import { fg } from '@atlaskit/platform-feature-flags';
 import { useDatasourceAnalyticsEvents } from '../analytics';
 import { useDatasourceActions } from '../state';
+import { useDiscoverActions } from '../state/actions';
 import useErrorLogger from './useErrorLogger';
 export const useDatasourceTableState = ({
   datasourceId,
@@ -21,6 +22,9 @@ export const useDatasourceTableState = ({
   const {
     onAddItems
   } = useDatasourceActions();
+  const {
+    discoverActions
+  } = useDiscoverActions();
   const idFieldCount = 1;
   const keyFieldCount = 1;
   const [initialEmptyArray] = useState([]);
@@ -152,6 +156,7 @@ export const useDatasourceTableState = ({
         meta: {
           access,
           destinationObjectTypes,
+          product,
           extensionKey,
           auth,
           providerName
@@ -186,8 +191,27 @@ export const useDatasourceTableState = ({
         return [...currentResponseItems, ...items];
       });
       if (fg('enable_datasource_react_sweet_state')) {
-        const newIds = onAddItems(items);
+        /**
+         * Product is typed as any.
+         */
+        const integrationKey = product;
+        const newIds = onAddItems(items, typeof integrationKey === 'string' ? integrationKey : undefined);
         setResponseItemIds(currentIds => [...currentIds, ...newIds]);
+        if (fg('platform-datasources-enable-two-way-sync')) {
+          if (typeof integrationKey === 'string') {
+            const aris = items.reduce((acc, item) => {
+              var _item$ari;
+              return typeof ((_item$ari = item.ari) === null || _item$ari === void 0 ? void 0 : _item$ari.data) === 'string' ? [...acc, item.ari.data] : acc;
+            }, []);
+            if (aris.length) {
+              discoverActions({
+                aris,
+                integrationKey,
+                fieldKeys
+              });
+            }
+          }
+        }
       }
       setHasNextPage(Boolean(nextPageCursor));
       if (fieldKeys.length > 0) {
@@ -228,7 +252,7 @@ export const useDatasourceTableState = ({
       }
       setStatus('rejected');
     }
-  }, [captureError, parameters, fieldKeys, nextCursor, responseItems, setResponseItemIds, onAddItems, getDatasourceData, datasourceId, applySchemaProperties, fireEvent, fullSchema, initialEmptyArray]);
+  }, [captureError, parameters, fieldKeys, nextCursor, responseItems, setResponseItemIds, onAddItems, getDatasourceData, datasourceId, applySchemaProperties, fireEvent, fullSchema, initialEmptyArray, discoverActions]);
   const reset = useCallback(options => {
     setResponseItems(initialEmptyArray);
     setResponseItemIds(initialEmptyArray);

package/dist/es2019/state/actions/index.js

@@ -0,0 +1,166 @@
+import { useCallback, useMemo } from 'react';
+import { createActionsHook, createHook, createStore } from 'react-sweet-state';
+import { useDatasourceClientExtension } from '@atlaskit/link-client-extension';
+
+/**
+ * Atomic actions available for an integration (by field)
+ * @example
+ * ```ts
+ *	{
+ *		jira: {
+ *			summary: {
+ *				actionKey: 'atlassian:issue:update:summary',
+ *				type: 'string',
+ *				description: 'Update issue summary',
+ *			}
+ *		}
+ *	}
+ * ```
+ */
+
+/**
+ * Permissions available for a target
+ */
+
+/**
+ * User permissions for actions on target (ARI) properties
+ * @example
+ * ```ts
+ *	{
+ *		'ari:cloud:jira:63cecfe3-16fa-4ee1-8e8d-047cc4b18980:issue/1': {
+ *			summary: {
+ *				isEditable: true
+ *			}
+ *		}
+ *	}
+ * ```
+ */
+
+const getInitialState = () => ({
+  actionsByIntegration: {},
+  permissions: {}
+});
+export const actions = {
+  discoverActions: (api, request) => async ({
+    setState,
+    getState
+  }) => {
+    const response = await api.getDatasourceActionsAndPermissions(request);
+    if ('permissions' in response) {
+      const {
+        actionsByIntegration: currentActions,
+        permissions: currentPermissions
+      } = getState();
+      const actionsByIntegration = response.actions.reduce((acc, action) => ({
+        ...acc,
+        [action.integrationKey]: {
+          ...acc[action.integrationKey],
+          [action.fieldKey]: {
+            actionKey: action.actionKey,
+            type: action.type
+          }
+        }
+      }), currentActions);
+      const permissions = response.permissions.data.reduce((acc, permission) => ({
+        ...acc,
+        [permission.ari]: {
+          ...acc[permission.ari],
+          [permission.fieldKey]: {
+            isEditable: permission.isEditable
+          }
+        }
+      }), currentPermissions);
+      setState({
+        actionsByIntegration,
+        permissions
+      });
+    }
+  }
+};
+export const ActionsStore = createStore({
+  name: 'actions-store',
+  initialState: getInitialState(),
+  actions
+});
+const useActionStoreActions = createActionsHook(ActionsStore);
+export const useDiscoverActions = () => {
+  const {
+    getDatasourceActionsAndPermissions
+  } = useDatasourceClientExtension();
+  const {
+    discoverActions
+  } = useActionStoreActions();
+  return {
+    discoverActions: useMemo(() => discoverActions.bind(null, {
+      getDatasourceActionsAndPermissions
+    }), [discoverActions, getDatasourceActionsAndPermissions])
+  };
+};
+const getFieldUpdateActionByAri = (state, {
+  ari,
+  fieldKey,
+  integrationKey
+}) => {
+  var _state$permissions$ar, _state$permissions$ar2, _state$actionsByInteg;
+  const isEditable = (_state$permissions$ar = state.permissions[ari]) === null || _state$permissions$ar === void 0 ? void 0 : (_state$permissions$ar2 = _state$permissions$ar[fieldKey]) === null || _state$permissions$ar2 === void 0 ? void 0 : _state$permissions$ar2.isEditable;
+  if (isEditable === false) {
+    return;
+  }
+  return (_state$actionsByInteg = state.actionsByIntegration[integrationKey]) === null || _state$actionsByInteg === void 0 ? void 0 : _state$actionsByInteg[fieldKey];
+};
+
+/**
+ * Retrieves the action schema for a given ARI + fieldKey + integrationKey
+ */
+export const useAtomicUpdateActionSchema = createHook(ActionsStore, {
+  selector: getFieldUpdateActionByAri
+});
+
+/**
+ * Given an ARI + fieldKey + integrationKey
+ * Returns an executable action that updates a field on the entity if the user has permissions to do so
+ *
+ * @example
+ * ```tsx
+ * const { execute } = useExecuteAtomicAction({ ari, fieldKey: 'summary', integrationKey: 'jira' });
+ *
+ * return <button onClick={() => execute('New summary')}>Update summary</button>;
+ * ```
+ */
+export const useExecuteAtomicAction = ({
+  ari,
+  fieldKey,
+  integrationKey
+}) => {
+  const [schema] = useAtomicUpdateActionSchema({
+    ari,
+    fieldKey,
+    integrationKey
+  });
+  const {
+    executeAtomicAction: executeAction
+  } = useDatasourceClientExtension();
+  const execute = useCallback(value => {
+    if (!schema) {
+      throw new Error('No action schema found.');
+    }
+    executeAction({
+      integrationKey,
+      actionKey: schema.actionKey,
+      parameters: {
+        inputs: {
+          [fieldKey]: value
+        },
+        target: {
+          ari
+        }
+      }
+    });
+  }, [executeAction, integrationKey, schema, fieldKey, ari]);
+  if (!schema) {
+    return null;
+  }
+  return {
+    execute
+  };
+};

package/dist/es2019/state/index.js

@@ -6,7 +6,7 @@ const getInitialState = () => ({
   items: {}
 });
 export const actions = {
-  onAddItems: items => ({
+  onAddItems: (items, integrationKey) => ({
     setState,
     getState
   }) => {
@@ -14,14 +14,17 @@ export const actions = {
       ...getState().items
     };
     const [newItemIds, newItems] = items.reduce(([ids, itemMap], item) => {
-      var _item$ari;
+      var _item$ari, _oldItems$id;
       const ari = typeof ((_item$ari = item['ari']) === null || _item$ari === void 0 ? void 0 : _item$ari.data) === 'string' ? item['ari'].data : undefined;
       const id = ari !== null && ari !== void 0 ? ari : uuidv4();
       return [[...ids, id], {
         ...itemMap,
         [id]: {
-          ...oldItems[id],
-          ...item
+          integrationKey,
+          data: {
+            ...((_oldItems$id = oldItems[id]) === null || _oldItems$id === void 0 ? void 0 : _oldItems$id.data),
+            ...item
+          }
         }
       }];
     }, [[], oldItems]);
@@ -39,7 +42,10 @@ export const Store = createStore({
 export const useDatasourceItem = createStateHook(Store, {
   selector: (state, {
     id
-  }) => state.items[id]
+  }) => {
+    var _state$items$id;
+    return (_state$items$id = state.items[id]) === null || _state$items$id === void 0 ? void 0 : _state$items$id.data;
+  }
 });
 export const useDatasourceActions = createActionsHook(Store);
 const Container = createContainer(Store);

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

@@ -30,7 +30,7 @@ import { DragColumnPreview } from './drag-column-preview';
 import { DraggableTableHeading } from './draggable-table-heading';
 import TableEmptyState from './empty-state';
 import { renderType, stringifyType } from './render-type';
-import { Table, TableCell, TableHeading, withTablePluginHeaderPrefix } from './styled';
+import { InlineEditableTableCell, Table, TableCell, TableHeading, withTablePluginHeaderPrefix } from './styled';
 import { TableCellContent } from './table-cell-content';
 import { TruncateTextTag } from './truncate-text-tag';
 import { useIsOnScreen } from './useIsOnScreen';
@@ -457,7 +457,9 @@ export const IssueLikeDataTableView = ({
       }
     }));
   }, [visibleColumnKeys, onVisibleColumnKeysChange, tableId, hasData]);
-  const tableRows = useMemo(() => fg('enable_datasource_react_sweet_state') ? itemIds.map((id, rowIndex) => {
+  const tableRows = useMemo(() =>
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  fg('enable_datasource_react_sweet_state') ? itemIds.map((id, rowIndex) => {
     return {
       key: id,
       cells: visibleSortedColumns.map(({
@@ -678,15 +680,29 @@ export const IssueLikeDataTableView = ({
         paddingBlock: "var(--ds-space-100, 8px)"
       };
     }
-    return jsx(TableCell, {
-      key: cellKey,
-      "data-testid": testId && `${testId}--cell-${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);
+
+    // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+    if (fg('platform-datasources-enable-two-way-sync')) {
+      return jsx(InlineEditableTableCell, {
+        key: cellKey,
+        "data-testid": testId && `${testId}--cell-${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);
+    } else {
+      return jsx(TableCell, {
+        key: cellKey,
+        "data-testid": testId && `${testId}--cell-${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);
+    }
   }))))));
 };
 export const EmptyState = TableEmptyState;

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

@@ -108,4 +108,32 @@ export const TableCell = styled.td({
   ["& [data-testid='inline-card-icon-and-title'], " + "& [data-testid='button-connect-account'] > span"]: {
     whiteSpace: 'unset'
   }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- To migrate as part of go/ui-styling-standard
+export const InlineEditableTableCell = 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-0, 0)"} ${"var(--ds-space-0, 0)"}`,
+    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('&:last-child')}`]: {
+    borderRight: 0
+  },
+  // 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

@@ -1,18 +1,49 @@
 import React from 'react';
 import { useIntl } from 'react-intl-next';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, xcss } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
 import { useDatasourceItem } from '../../../state';
 import { stringifyType } from '../render-type';
 import { TruncateTextTag } from '../truncate-text-tag';
-export const TableCellContent = ({
+const truncateTextStyles = xcss({
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  width: '100%'
+});
+const TooltipWrapper = ({
   columnKey,
-  columnType,
+  datasourceTypeWithValues: {
+    type,
+    values
+  },
+  wrappedColumnKeys,
+  children
+}) => {
+  const intl = useIntl();
+  const stringifiedContent = values.map(value => stringifyType({
+    type,
+    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"
+    }, children);
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+};
+const ReadOnlyCell = ({
   id,
+  columnType,
+  wrappedColumnKeys = [],
   renderItem,
-  wrappedColumnKeys
+  columnKey
 }) => {
   var _rowData$columnKey;
-  const intl = useIntl();
   const rowData = useDatasourceItem({
     id
   });
@@ -23,22 +54,69 @@ export const TableCellContent = ({
   // 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({
+  const datasourceTypeWithValues = {
     type: columnType,
     values
+  };
+  return /*#__PURE__*/React.createElement(TooltipWrapper, {
+    columnKey: columnKey,
+    datasourceTypeWithValues: datasourceTypeWithValues,
+    wrappedColumnKeys: wrappedColumnKeys
+  }, renderItem(datasourceTypeWithValues));
+};
+const InlineEditableCell = ({
+  id,
+  columnKey,
+  columnType,
+  renderItem,
+  wrappedColumnKeys
+}) => {
+  var _rowData$columnKey2;
+  const rowData = useDatasourceItem({
+    id
   });
-  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);
+  if (!rowData || !columnKey || !rowData[columnKey]) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, renderedValues);
+
+  // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
+  const value = (_rowData$columnKey2 = rowData[columnKey]) === null || _rowData$columnKey2 === void 0 ? void 0 : _rowData$columnKey2.data;
+  const values = Array.isArray(value) ? value : [value];
+  const datasourceTypeWithValues = {
+    type: columnType,
+    values
+  };
+  return /*#__PURE__*/React.createElement(TooltipWrapper, {
+    columnKey: columnKey,
+    datasourceTypeWithValues: datasourceTypeWithValues,
+    wrappedColumnKeys: wrappedColumnKeys
+  }, /*#__PURE__*/React.createElement(Box, {
+    testId: 'inline-edit-read-view',
+    paddingInline: 'space.100',
+    paddingBlock: 'space.050',
+    xcss: truncateTextStyles
+  }, renderItem(datasourceTypeWithValues)));
+};
+export const TableCellContent = ({
+  columnKey,
+  columnType,
+  id,
+  renderItem,
+  wrappedColumnKeys
+}) => {
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  const renderedContent = fg('platform-datasources-enable-two-way-sync') ? /*#__PURE__*/React.createElement(InlineEditableCell, {
+    id: id,
+    columnKey: columnKey,
+    columnType: columnType,
+    renderItem: renderItem,
+    wrappedColumnKeys: wrappedColumnKeys
+  }) : /*#__PURE__*/React.createElement(ReadOnlyCell, {
+    id: id,
+    columnKey: columnKey,
+    columnType: columnType,
+    wrappedColumnKeys: wrappedColumnKeys,
+    renderItem: renderItem
+  });
+  return renderedContent;
 };