@atlaskit/link-datasource 2.9.3 → 2.9.5

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/link-datasource
 
+## 2.9.5
+
+### Patch Changes
+
+- [#127170](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/127170)
+  [`48d23d3dfb9a1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/48d23d3dfb9a1) -
+  We are testing action discovery for datasources behind a feature flag. If this fix is successful
+  it will be available in a later release.
+- Updated dependencies
+
+## 2.9.4
+
+### Patch Changes
+
+- [#126601](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/126601)
+  [`d9862e969b400`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d9862e969b400) -
+  [ux] Adds new InlineEditableCell and InlineEditableTableCell for IssueLikeTable behind feature
+  gate platform-datasources-enable-two-way-sync
+
 ## 2.9.3
 
 ### Patch Changes

package/dist/cjs/hooks/useDatasourceTableState.js

@@ -15,6 +15,7 @@ var _linkClientExtension = require("@atlaskit/link-client-extension");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _analytics = require("../analytics");
 var _state = require("../state");
+var _actions = require("../state/actions");
 var _useErrorLogger2 = _interopRequireDefault(require("./useErrorLogger"));
 var useDatasourceTableState = exports.useDatasourceTableState = function useDatasourceTableState(_ref) {
   var datasourceId = _ref.datasourceId,
@@ -29,6 +30,8 @@ var useDatasourceTableState = exports.useDatasourceTableState = function useData
     captureError = _useErrorLogger.captureError;
   var _useDatasourceActions = (0, _state.useDatasourceActions)(),
     onAddItems = _useDatasourceActions.onAddItems;
+  var _useDiscoverActions = (0, _actions.useDiscoverActions)(),
+    discoverActions = _useDiscoverActions.discoverActions;
   var idFieldCount = 1;
   var keyFieldCount = 1;
   var _useState = (0, _react.useState)([]),
@@ -215,6 +218,7 @@ var useDatasourceTableState = exports.useDatasourceTableState = function useData
       _yield$getDatasourceD4,
       access,
       _destinationObjectTypes,
+      product,
       _extensionKey,
       auth,
       _providerName,
@@ -223,7 +227,9 @@ var useDatasourceTableState = exports.useDatasourceTableState = function useData
       nextPageCursor,
       _totalCount,
       schema,
+      integrationKey,
       newIds,
+      aris,
       isUserLoadingNextPage,
       currentLoadedItemCount,
       newlyLoadedItemCount,
@@ -265,6 +271,7 @@ var useDatasourceTableState = exports.useDatasourceTableState = function useData
           _yield$getDatasourceD4 = _yield$getDatasourceD3.meta;
           access = _yield$getDatasourceD4.access;
           _destinationObjectTypes = _yield$getDatasourceD4.destinationObjectTypes;
+          product = _yield$getDatasourceD4.product;
           _extensionKey = _yield$getDatasourceD4.extensionKey;
           auth = _yield$getDatasourceD4.auth;
           _providerName = _yield$getDatasourceD4.providerName;
@@ -274,21 +281,21 @@ var useDatasourceTableState = exports.useDatasourceTableState = function useData
           _totalCount = _yield$getDatasourceD5.totalCount;
           schema = _yield$getDatasourceD5.schema;
           if (!((_currentAbortControll = currentAbortController) !== null && _currentAbortControll !== void 0 && _currentAbortControll.signal.aborted)) {
-            _context2.next = 27;
+            _context2.next = 28;
             break;
           }
           throw new Error('Aborted');
-        case 27:
+        case 28:
           setExtensionKey(_extensionKey);
           setProviderName(_providerName);
           if (!(access === 'unauthorized' || access === 'forbidden')) {
-            _context2.next = 33;
+            _context2.next = 34;
             break;
           }
           setStatus(access);
           setAuthDetails(auth || initialEmptyArray);
           return _context2.abrupt("return");
-        case 33:
+        case 34:
           setDestinationObjectTypes(_destinationObjectTypes);
           setTotalCount(_totalCount);
           setNextCursor(nextPageCursor);
@@ -299,10 +306,29 @@ var useDatasourceTableState = exports.useDatasourceTableState = function useData
             return [].concat((0, _toConsumableArray2.default)(currentResponseItems), (0, _toConsumableArray2.default)(items));
           });
           if ((0, _platformFeatureFlags.fg)('enable_datasource_react_sweet_state')) {
-            newIds = onAddItems(items);
+            /**
+             * Product is typed as any.
+             */
+            integrationKey = product;
+            newIds = onAddItems(items, typeof integrationKey === 'string' ? integrationKey : undefined);
             setResponseItemIds(function (currentIds) {
               return [].concat((0, _toConsumableArray2.default)(currentIds), (0, _toConsumableArray2.default)(newIds));
             });
+            if ((0, _platformFeatureFlags.fg)('platform-datasources-enable-two-way-sync')) {
+              if (typeof integrationKey === 'string') {
+                aris = items.reduce(function (acc, item) {
+                  var _item$ari;
+                  return typeof ((_item$ari = item.ari) === null || _item$ari === void 0 ? void 0 : _item$ari.data) === 'string' ? [].concat((0, _toConsumableArray2.default)(acc), [item.ari.data]) : acc;
+                }, []);
+                if (aris.length) {
+                  discoverActions({
+                    aris: aris,
+                    integrationKey: integrationKey,
+                    fieldKeys: fieldKeys
+                  });
+                }
+              }
+            }
           }
           setHasNextPage(Boolean(nextPageCursor));
           if (fieldKeys.length > 0) {
@@ -322,39 +348,39 @@ var useDatasourceTableState = exports.useDatasourceTableState = function useData
             });
           }
           setStatus('resolved');
-          _context2.next = 58;
+          _context2.next = 59;
           break;
-        case 46:
-          _context2.prev = 46;
+        case 47:
+          _context2.prev = 47;
           _context2.t0 = _context2["catch"](10);
           if (!(_context2.t0.message === 'Aborted')) {
-            _context2.next = 50;
+            _context2.next = 51;
             break;
           }
           return _context2.abrupt("return");
-        case 50:
+        case 51:
           captureError('onNextPage', _context2.t0);
           if (!(_context2.t0 instanceof Response && _context2.t0.status === 401)) {
-            _context2.next = 54;
+            _context2.next = 55;
             break;
           }
           setStatus('unauthorized');
           return _context2.abrupt("return");
-        case 54:
+        case 55:
           if (!(_context2.t0 instanceof Response && _context2.t0.status === 403)) {
-            _context2.next = 57;
+            _context2.next = 58;
             break;
           }
           setStatus('forbidden');
           return _context2.abrupt("return");
-        case 57:
-          setStatus('rejected');
         case 58:
+          setStatus('rejected');
+        case 59:
         case "end":
           return _context2.stop();
       }
-    }, _callee2, null, [[10, 46]]);
-  })), [captureError, parameters, fieldKeys, nextCursor, responseItems, setResponseItemIds, onAddItems, getDatasourceData, datasourceId, applySchemaProperties, fireEvent, fullSchema, initialEmptyArray]);
+    }, _callee2, null, [[10, 47]]);
+  })), [captureError, parameters, fieldKeys, nextCursor, responseItems, setResponseItemIds, onAddItems, getDatasourceData, datasourceId, applySchemaProperties, fireEvent, fullSchema, initialEmptyArray, discoverActions]);
   var reset = (0, _react.useCallback)(function (options) {
     setResponseItems(initialEmptyArray);
     setResponseItemIds(initialEmptyArray);

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

@@ -0,0 +1,183 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useExecuteAtomicAction = exports.useDiscoverActions = exports.useAtomicUpdateActionSchema = exports.actions = exports.ActionsStore = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = require("react");
+var _reactSweetState = require("react-sweet-state");
+var _linkClientExtension = require("@atlaskit/link-client-extension");
+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) { (0, _defineProperty2.default)(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; }
+/**
+ * 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
+ *			}
+ *		}
+ *	}
+ * ```
+ */
+
+var getInitialState = function getInitialState() {
+  return {
+    actionsByIntegration: {},
+    permissions: {}
+  };
+};
+var actions = exports.actions = {
+  discoverActions: function discoverActions(api, request) {
+    return /*#__PURE__*/function () {
+      var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref) {
+        var setState, getState, response, _getState, currentActions, currentPermissions, actionsByIntegration, permissions;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              setState = _ref.setState, getState = _ref.getState;
+              _context.next = 3;
+              return api.getDatasourceActionsAndPermissions(request);
+            case 3:
+              response = _context.sent;
+              if ('permissions' in response) {
+                _getState = getState(), currentActions = _getState.actionsByIntegration, currentPermissions = _getState.permissions;
+                actionsByIntegration = response.actions.reduce(function (acc, action) {
+                  return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, action.integrationKey, _objectSpread(_objectSpread({}, acc[action.integrationKey]), {}, (0, _defineProperty2.default)({}, action.fieldKey, {
+                    actionKey: action.actionKey,
+                    type: action.type
+                  }))));
+                }, currentActions);
+                permissions = response.permissions.data.reduce(function (acc, permission) {
+                  return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, permission.ari, _objectSpread(_objectSpread({}, acc[permission.ari]), {}, (0, _defineProperty2.default)({}, permission.fieldKey, {
+                    isEditable: permission.isEditable
+                  }))));
+                }, currentPermissions);
+                setState({
+                  actionsByIntegration: actionsByIntegration,
+                  permissions: permissions
+                });
+              }
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function (_x) {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+  }
+};
+var ActionsStore = exports.ActionsStore = (0, _reactSweetState.createStore)({
+  name: 'actions-store',
+  initialState: getInitialState(),
+  actions: actions
+});
+var useActionStoreActions = (0, _reactSweetState.createActionsHook)(ActionsStore);
+var useDiscoverActions = exports.useDiscoverActions = function useDiscoverActions() {
+  var _useDatasourceClientE = (0, _linkClientExtension.useDatasourceClientExtension)(),
+    getDatasourceActionsAndPermissions = _useDatasourceClientE.getDatasourceActionsAndPermissions;
+  var _useActionStoreAction = useActionStoreActions(),
+    discoverActions = _useActionStoreAction.discoverActions;
+  return {
+    discoverActions: (0, _react.useMemo)(function () {
+      return discoverActions.bind(null, {
+        getDatasourceActionsAndPermissions: getDatasourceActionsAndPermissions
+      });
+    }, [discoverActions, getDatasourceActionsAndPermissions])
+  };
+};
+var getFieldUpdateActionByAri = function getFieldUpdateActionByAri(state, _ref3) {
+  var _state$permissions$ar, _state$actionsByInteg;
+  var ari = _ref3.ari,
+    fieldKey = _ref3.fieldKey,
+    integrationKey = _ref3.integrationKey;
+  var isEditable = (_state$permissions$ar = state.permissions[ari]) === null || _state$permissions$ar === void 0 || (_state$permissions$ar = _state$permissions$ar[fieldKey]) === null || _state$permissions$ar === void 0 ? void 0 : _state$permissions$ar.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
+ */
+var useAtomicUpdateActionSchema = exports.useAtomicUpdateActionSchema = (0, _reactSweetState.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>;
+ * ```
+ */
+var useExecuteAtomicAction = exports.useExecuteAtomicAction = function useExecuteAtomicAction(_ref4) {
+  var ari = _ref4.ari,
+    fieldKey = _ref4.fieldKey,
+    integrationKey = _ref4.integrationKey;
+  var _useAtomicUpdateActio = useAtomicUpdateActionSchema({
+      ari: ari,
+      fieldKey: fieldKey,
+      integrationKey: integrationKey
+    }),
+    _useAtomicUpdateActio2 = (0, _slicedToArray2.default)(_useAtomicUpdateActio, 1),
+    schema = _useAtomicUpdateActio2[0];
+  var _useDatasourceClientE2 = (0, _linkClientExtension.useDatasourceClientExtension)(),
+    executeAction = _useDatasourceClientE2.executeAtomicAction;
+  var execute = (0, _react.useCallback)(function (value) {
+    if (!schema) {
+      throw new Error('No action schema found.');
+    }
+    executeAction({
+      integrationKey: integrationKey,
+      actionKey: schema.actionKey,
+      parameters: {
+        inputs: (0, _defineProperty2.default)({}, fieldKey, value),
+        target: {
+          ari: ari
+        }
+      }
+    });
+  }, [executeAction, integrationKey, schema, fieldKey, ari]);
+  if (!schema) {
+    return null;
+  }
+  return {
+    execute: execute
+  };
+};

package/dist/cjs/state/index.js

@@ -20,19 +20,22 @@ var getInitialState = function getInitialState() {
   };
 };
 var actions = exports.actions = {
-  onAddItems: function onAddItems(items) {
+  onAddItems: function onAddItems(items, integrationKey) {
     return function (_ref) {
       var setState = _ref.setState,
         getState = _ref.getState;
       var oldItems = _objectSpread({}, getState().items);
       var _items$reduce = items.reduce(function (_ref2, item) {
-          var _item$ari;
+          var _item$ari, _oldItems$id;
           var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
             ids = _ref3[0],
             itemMap = _ref3[1];
           var ari = typeof ((_item$ari = item['ari']) === null || _item$ari === void 0 ? void 0 : _item$ari.data) === 'string' ? item['ari'].data : undefined;
           var id = ari !== null && ari !== void 0 ? ari : (0, _uuid.v4)();
-          return [[].concat((0, _toConsumableArray2.default)(ids), [id]), _objectSpread(_objectSpread({}, itemMap), {}, (0, _defineProperty2.default)({}, id, _objectSpread(_objectSpread({}, oldItems[id]), item)))];
+          return [[].concat((0, _toConsumableArray2.default)(ids), [id]), _objectSpread(_objectSpread({}, itemMap), {}, (0, _defineProperty2.default)({}, id, {
+            integrationKey: integrationKey,
+            data: _objectSpread(_objectSpread({}, (_oldItems$id = oldItems[id]) === null || _oldItems$id === void 0 ? void 0 : _oldItems$id.data), item)
+          }))];
         }, [[], oldItems]),
         _items$reduce2 = (0, _slicedToArray2.default)(_items$reduce, 2),
         newItemIds = _items$reduce2[0],
@@ -51,8 +54,9 @@ var Store = exports.Store = (0, _reactSweetState.createStore)({
 });
 var useDatasourceItem = exports.useDatasourceItem = (0, _reactSweetState.createStateHook)(Store, {
   selector: function selector(state, _ref4) {
+    var _state$items$id;
     var id = _ref4.id;
-    return state.items[id];
+    return (_state$items$id = state.items[id]) === null || _state$items$id === void 0 ? void 0 : _state$items$id.data;
   }
 });
 var useDatasourceActions = exports.useDatasourceActions = (0, _reactSweetState.createActionsHook)(Store);

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

@@ -460,69 +460,72 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     }));
   }, [visibleColumnKeys, onVisibleColumnKeysChange, tableId, hasData]);
   var tableRows = (0, _react.useMemo)(function () {
-    return (0, _platformFeatureFlags.fg)('enable_datasource_react_sweet_state') ? itemIds.map(function (id, rowIndex) {
-      return {
-        key: id,
-        cells: visibleSortedColumns.map(function (_ref12, cellIndex) {
-          var key = _ref12.key,
-            type = _ref12.type;
-          return {
-            key: key,
-            columnKey: key,
-            content: (0, _react2.jsx)(_tableCellContent.TableCellContent, {
-              id: id,
+    return (
+      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+      (0, _platformFeatureFlags.fg)('enable_datasource_react_sweet_state') ? itemIds.map(function (id, rowIndex) {
+        return {
+          key: id,
+          cells: visibleSortedColumns.map(function (_ref12, cellIndex) {
+            var key = _ref12.key,
+              type = _ref12.type;
+            return {
+              key: key,
               columnKey: key,
-              columnType: type,
-              wrappedColumnKeys: wrappedColumnKeys,
-              renderItem: renderItem
-            }),
-            width: getColumnWidth(key, type, cellIndex === visibleSortedColumns.length - 1)
-          };
-        }),
-        ref: rowIndex === items.length - 1 ? function (el) {
-          return setLastRowElement(el);
-        } : undefined
-      };
-    }) : items.map(function (newRowData, rowIndex) {
-      return {
-        key: "".concat(identityColumnKey && newRowData[identityColumnKey] && newRowData[identityColumnKey].data || rowIndex),
-        cells: visibleSortedColumns.map(function (_ref13, cellIndex) {
-          var _newRowData$key;
-          var key = _ref13.key,
-            type = _ref13.type;
-          // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
-          var value = (_newRowData$key = newRowData[key]) === null || _newRowData$key === void 0 ? void 0 : _newRowData$key.data;
-          var values = Array.isArray(value) ? value : [value];
-          var renderedValues = renderItem({
-            type: type,
-            values: values
-          });
-          var stringifiedContent = values.map(function (value) {
-            return (0, _renderType.stringifyType)({
+              content: (0, _react2.jsx)(_tableCellContent.TableCellContent, {
+                id: id,
+                columnKey: key,
+                columnType: type,
+                wrappedColumnKeys: wrappedColumnKeys,
+                renderItem: renderItem
+              }),
+              width: getColumnWidth(key, type, cellIndex === visibleSortedColumns.length - 1)
+            };
+          }),
+          ref: rowIndex === items.length - 1 ? function (el) {
+            return setLastRowElement(el);
+          } : undefined
+        };
+      }) : items.map(function (newRowData, rowIndex) {
+        return {
+          key: "".concat(identityColumnKey && newRowData[identityColumnKey] && newRowData[identityColumnKey].data || rowIndex),
+          cells: visibleSortedColumns.map(function (_ref13, cellIndex) {
+            var _newRowData$key;
+            var key = _ref13.key,
+              type = _ref13.type;
+            // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
+            var value = (_newRowData$key = newRowData[key]) === null || _newRowData$key === void 0 ? void 0 : _newRowData$key.data;
+            var values = Array.isArray(value) ? value : [value];
+            var renderedValues = renderItem({
               type: type,
-              value: value
-            }, intl.formatMessage, intl.formatDate);
-          }).filter(function (value) {
-            return value !== '';
-          }).join(', ');
-          var contentComponent = stringifiedContent && !(wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(key)) ? (0, _react2.jsx)(_tooltip.default
-          // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
-          , {
-            tag: _truncateTextTag.TruncateTextTag,
-            content: stringifiedContent,
-            testId: "issues-table-cell-tooltip"
-          }, renderedValues) : renderedValues;
-          return {
-            key: key,
-            content: contentComponent,
-            width: getColumnWidth(key, type, cellIndex === visibleSortedColumns.length - 1)
-          };
-        }),
-        ref: rowIndex === items.length - 1 ? function (el) {
-          return setLastRowElement(el);
-        } : undefined
-      };
-    });
+              values: values
+            });
+            var stringifiedContent = values.map(function (value) {
+              return (0, _renderType.stringifyType)({
+                type: type,
+                value: value
+              }, intl.formatMessage, intl.formatDate);
+            }).filter(function (value) {
+              return value !== '';
+            }).join(', ');
+            var contentComponent = stringifiedContent && !(wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(key)) ? (0, _react2.jsx)(_tooltip.default
+            // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
+            , {
+              tag: _truncateTextTag.TruncateTextTag,
+              content: stringifiedContent,
+              testId: "issues-table-cell-tooltip"
+            }, renderedValues) : renderedValues;
+            return {
+              key: key,
+              content: contentComponent,
+              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, intl.formatMessage, intl.formatDate]);
   var rows = (0, _react.useMemo)(function () {
     if (status !== 'loading') {
@@ -703,15 +706,29 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
           paddingBlock: "var(--ds-space-100, 8px)"
         });
       }
-      return (0, _react2.jsx)(_styled2.TableCell, {
-        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);
+
+      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+      if ((0, _platformFeatureFlags.fg)('platform-datasources-enable-two-way-sync')) {
+        return (0, _react2.jsx)(_styled2.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);
+      } else {
+        return (0, _react2.jsx)(_styled2.TableCell, {
+          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);
+      }
     }));
   }))));
 };

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

@@ -4,12 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withTablePluginPrefix = exports.withTablePluginHeaderPrefix = exports.withTablePluginBodyPrefix = exports.fieldTextFontSize = exports.TableHeading = exports.TableCell = exports.Table = exports.ScrollableContainerHeight = void 0;
+exports.withTablePluginPrefix = exports.withTablePluginHeaderPrefix = exports.withTablePluginBodyPrefix = exports.fieldTextFontSize = exports.TableHeading = exports.TableCell = exports.Table = exports.ScrollableContainerHeight = exports.InlineEditableTableCell = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _colors = require("@atlaskit/theme/colors");
 var _typography = require("@atlaskit/theme/typography");
-var _styled$th, _styled$td; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var _styled$th, _styled$td, _styled$td2; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var ScrollableContainerHeight = exports.ScrollableContainerHeight = 590;
 var fieldTextFontSize = exports.fieldTextFontSize = "var(--ds-font-body, ".concat(_typography.fontFallback.body.medium, ")");
 
@@ -93,4 +93,23 @@ var TableCell = exports.TableCell = _styled.default.td((_styled$td = {}, (0, _de
   paddingRight: "var(--ds-space-100, 8px)"
 }), (0, _defineProperty2.default)(_styled$td, "& [data-testid='inline-card-icon-and-title'], " + "& [data-testid='button-connect-account'] > span", {
   whiteSpace: 'unset'
-}), _styled$td));
+}), _styled$td));
+
+// 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
+var InlineEditableTableCell = exports.InlineEditableTableCell = _styled.default.td((_styled$td2 = {}, (0, _defineProperty2.default)(_styled$td2, "".concat(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)".concat(" ", "var(--ds-space-0, 0)"),
+  border: 0,
+  minWidth: 'auto',
+  verticalAlign: 'inherit',
+  boxSizing: 'border-box',
+  borderRight: "0.5px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
+  borderBottom: "0.5px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
+  overflow: 'hidden'
+}), (0, _defineProperty2.default)(_styled$td2, "".concat(withTablePluginBodyPrefix('&:last-child')), {
+  borderRight: 0
+}), (0, _defineProperty2.default)(_styled$td2, "& [data-testid='inline-card-icon-and-title'], " + "& [data-testid='button-connect-account'] > span", {
+  whiteSpace: 'unset'
+}), _styled$td2));