@atlaskit/link-datasource 2.10.1 → 2.10.3

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/link-datasource
 
+## 2.10.3
+
+### Patch Changes
+
+- [#129411](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/129411)
+  [`63af9b6ab2314`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/63af9b6ab2314) -
+  [ux] Add text edit component behind FF
+- Updated dependencies
+
+## 2.10.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.10.1
 
 ### Patch Changes

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

@@ -163,7 +163,7 @@ var useExecuteAtomicAction = exports.useExecuteAtomicAction = function useExecut
     if (!schema) {
       throw new Error('No action schema found.');
     }
-    executeAction({
+    return executeAction({
       integrationKey: integrationKey,
       actionKey: schema.actionKey,
       parameters: {
@@ -175,7 +175,7 @@ var useExecuteAtomicAction = exports.useExecuteAtomicAction = function useExecut
     });
   }, [executeAction, integrationKey, schema, fieldKey, ari]);
   if (!schema) {
-    return null;
+    return {};
   }
   return {
     execute: execute

package/dist/cjs/state/index.js

@@ -20,19 +20,38 @@ var getInitialState = function getInitialState() {
   };
 };
 var actions = exports.actions = {
-  onAddItems: function onAddItems(items, integrationKey) {
+  onUpdateItem: function onUpdateItem(id, data) {
     return function (_ref) {
       var setState = _ref.setState,
         getState = _ref.getState;
       var oldItems = _objectSpread({}, getState().items);
-      var _items$reduce = items.reduce(function (_ref2, item) {
+      var oldItem = oldItems[id];
+      if (!oldItem) {
+        return;
+      }
+      setState({
+        items: _objectSpread(_objectSpread({}, oldItems), {}, (0, _defineProperty2.default)({}, id, _objectSpread(_objectSpread({}, oldItem), {}, {
+          data: _objectSpread(_objectSpread({}, data), {}, {
+            ari: oldItem.data.ari
+          })
+        })))
+      });
+    };
+  },
+  onAddItems: function onAddItems(items, integrationKey) {
+    return function (_ref2) {
+      var setState = _ref2.setState,
+        getState = _ref2.getState;
+      var oldItems = _objectSpread({}, getState().items);
+      var _items$reduce = items.reduce(function (_ref3, item) {
           var _item$ari, _oldItems$id;
-          var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
-            ids = _ref3[0],
-            itemMap = _ref3[1];
+          var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
+            ids = _ref4[0],
+            itemMap = _ref4[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, {
+            ari: ari,
             integrationKey: integrationKey,
             data: _objectSpread(_objectSpread({}, (_oldItems$id = oldItems[id]) === null || _oldItems$id === void 0 ? void 0 : _oldItems$id.data), item)
           }))];
@@ -53,16 +72,15 @@ var Store = exports.Store = (0, _reactSweetState.createStore)({
   actions: actions
 });
 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 = state.items[id]) === null || _state$items$id === void 0 ? void 0 : _state$items$id.data;
+  selector: function selector(state, _ref5) {
+    var id = _ref5.id;
+    return state.items[id];
   }
 });
 var useDatasourceActions = exports.useDatasourceActions = (0, _reactSweetState.createActionsHook)(Store);
 var Container = (0, _reactSweetState.createContainer)(Store);
-var StoreContainer = exports.StoreContainer = function StoreContainer(_ref5) {
-  var children = _ref5.children;
+var StoreContainer = exports.StoreContainer = function StoreContainer(_ref6) {
+  var children = _ref6.children;
   if ((0, _platformFeatureFlags.fg)('enable_datasource_react_sweet_state')) {
     return /*#__PURE__*/_react.default.createElement(Container, {
       scope: "datasource"

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

@@ -48,16 +48,16 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
 };
 var ReadOnlyCell = function ReadOnlyCell(_ref2) {
-  var _rowData$columnKey;
+  var _useDatasourceItem, _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)({
+  var rowData = (_useDatasourceItem = (0, _state.useDatasourceItem)({
     id: id
-  });
+  })) === null || _useDatasourceItem === void 0 ? void 0 : _useDatasourceItem.data;
   if (!rowData || !columnKey || !rowData[columnKey]) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
   }
@@ -82,15 +82,21 @@ var InlineEditableCell = function InlineEditableCell(_ref3) {
     columnType = _ref3.columnType,
     renderItem = _ref3.renderItem,
     wrappedColumnKeys = _ref3.wrappedColumnKeys;
-  var rowData = (0, _state.useDatasourceItem)({
+  var item = (0, _state.useDatasourceItem)({
     id: id
   });
+  if (!item) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+  }
+  var rowData = item.data,
+    integrationKey = item.integrationKey,
+    ari = item.ari;
   if (!rowData || !columnKey || !rowData[columnKey]) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
   }
 
   // Check if field is editable
-  var isEditable = (0, _editType.isEditTypeSupported)(columnType);
+  var isEditable = !!ari && !!integrationKey && (0, _editType.isEditTypeSupported)(columnType);
 
   // 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;
@@ -110,6 +116,8 @@ var InlineEditableCell = function InlineEditableCell(_ref3) {
     xcss: truncateTextStyles
   }, renderItem(datasourceTypeWithValues)));
   return isEditable ? /*#__PURE__*/_react.default.createElement(_inlineEdit.InlineEdit, {
+    ari: ari,
+    columnKey: columnKey,
     datasourceTypeWithValues: datasourceTypeWithValues,
     readView: readView
   }) : readView;

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

@@ -8,22 +8,70 @@ Object.defineProperty(exports, "__esModule", {
 exports.InlineEdit = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _inlineEdit = _interopRequireDefault(require("@atlaskit/inline-edit"));
 var _primitives = require("@atlaskit/primitives");
+var _state = require("../../../state");
+var _actions = require("../../../state/actions");
 var _editType = require("../edit-type");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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; }
 var containerStyles = (0, _primitives.xcss)({
   marginBlockStart: 'space.negative.100'
 });
+var mapUpdatedItem = function mapUpdatedItem(type, existingItem, columnKey, newValue) {
+  switch (type) {
+    case 'string':
+      return _objectSpread(_objectSpread({}, existingItem), {}, (0, _defineProperty2.default)({}, columnKey, {
+        data: newValue
+      }));
+    default:
+  }
+  return null;
+};
 var InlineEdit = exports.InlineEdit = function InlineEdit(_ref) {
-  var datasourceTypeWithValues = _ref.datasourceTypeWithValues,
+  var _item$integrationKey;
+  var ari = _ref.ari,
+    columnKey = _ref.columnKey,
+    datasourceTypeWithValues = _ref.datasourceTypeWithValues,
     _readView = _ref.readView;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isEditing = _useState2[0],
     setIsEditing = _useState2[1];
+  var item = (0, _state.useDatasourceItem)({
+    id: ari
+  });
+  var _useDatasourceActions = (0, _state.useDatasourceActions)(),
+    onUpdateItem = _useDatasourceActions.onUpdateItem;
+  var _useExecuteAtomicActi = (0, _actions.useExecuteAtomicAction)({
+      ari: ari,
+      fieldKey: columnKey,
+      integrationKey: (_item$integrationKey = item === null || item === void 0 ? void 0 : item.integrationKey) !== null && _item$integrationKey !== void 0 ? _item$integrationKey : ''
+    }),
+    execute = _useExecuteAtomicActi.execute;
+  var onCommitUpdate = (0, _react.useCallback)(function (value) {
+    if (!execute || !item) {
+      setIsEditing(false);
+      return;
+    }
+    var existingData = item.data;
+    var newItem = mapUpdatedItem(datasourceTypeWithValues.type, item.data, columnKey, value);
+    if (!newItem) {
+      setIsEditing(false);
+      return;
+    }
+    onUpdateItem(ari, newItem);
+    execute(value).catch(function (error) {
+      // eslint-disable-next-line no-console
+      console.error(error);
+      onUpdateItem(ari, existingData);
+    });
+    setIsEditing(false);
+  }, [ari, execute, datasourceTypeWithValues, item, columnKey, onUpdateItem]);
   return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     xcss: containerStyles
   }, /*#__PURE__*/_react.default.createElement(_inlineEdit.default, (0, _extends2.default)({}, (0, _editType.editType)(datasourceTypeWithValues), {
@@ -39,9 +87,6 @@ var InlineEdit = exports.InlineEdit = function InlineEdit(_ref) {
     onCancel: function onCancel() {
       return setIsEditing(false);
     },
-    onConfirm: function onConfirm(value) {
-      setIsEditing(false);
-      // Save value back to the store
-    }
+    onConfirm: onCommitUpdate
   })));
 };

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

@@ -144,7 +144,7 @@ export const useExecuteAtomicAction = ({
     if (!schema) {
       throw new Error('No action schema found.');
     }
-    executeAction({
+    return executeAction({
       integrationKey,
       actionKey: schema.actionKey,
       parameters: {
@@ -158,7 +158,7 @@ export const useExecuteAtomicAction = ({
     });
   }, [executeAction, integrationKey, schema, fieldKey, ari]);
   if (!schema) {
-    return null;
+    return {};
   }
   return {
     execute

package/dist/es2019/state/index.js

@@ -6,6 +6,30 @@ const getInitialState = () => ({
   items: {}
 });
 export const actions = {
+  onUpdateItem: (id, data) => ({
+    setState,
+    getState
+  }) => {
+    const oldItems = {
+      ...getState().items
+    };
+    const oldItem = oldItems[id];
+    if (!oldItem) {
+      return;
+    }
+    setState({
+      items: {
+        ...oldItems,
+        [id]: {
+          ...oldItem,
+          data: {
+            ...data,
+            ari: oldItem.data.ari
+          }
+        }
+      }
+    });
+  },
   onAddItems: (items, integrationKey) => ({
     setState,
     getState
@@ -20,6 +44,7 @@ export const actions = {
       return [[...ids, id], {
         ...itemMap,
         [id]: {
+          ari,
           integrationKey,
           data: {
             ...((_oldItems$id = oldItems[id]) === null || _oldItems$id === void 0 ? void 0 : _oldItems$id.data),
@@ -42,10 +67,7 @@ export const Store = createStore({
 export const useDatasourceItem = createStateHook(Store, {
   selector: (state, {
     id
-  }) => {
-    var _state$items$id;
-    return (_state$items$id = state.items[id]) === null || _state$items$id === void 0 ? void 0 : _state$items$id.data;
-  }
+  }) => state.items[id]
 });
 export const useDatasourceActions = createActionsHook(Store);
 const Container = createContainer(Store);

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

@@ -45,10 +45,10 @@ const ReadOnlyCell = ({
   renderItem,
   columnKey
 }) => {
-  var _rowData$columnKey;
-  const rowData = useDatasourceItem({
+  var _useDatasourceItem, _rowData$columnKey;
+  const rowData = (_useDatasourceItem = useDatasourceItem({
     id
-  });
+  })) === null || _useDatasourceItem === void 0 ? void 0 : _useDatasourceItem.data;
   if (!rowData || !columnKey || !rowData[columnKey]) {
     return /*#__PURE__*/React.createElement(React.Fragment, null);
   }
@@ -74,15 +74,23 @@ const InlineEditableCell = ({
   wrappedColumnKeys
 }) => {
   var _rowData$columnKey2;
-  const rowData = useDatasourceItem({
+  const item = useDatasourceItem({
     id
   });
+  if (!item) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  }
+  const {
+    data: rowData,
+    integrationKey,
+    ari
+  } = item;
   if (!rowData || !columnKey || !rowData[columnKey]) {
     return /*#__PURE__*/React.createElement(React.Fragment, null);
   }
 
   // Check if field is editable
-  const isEditable = isEditTypeSupported(columnType);
+  const isEditable = !!ari && !!integrationKey && isEditTypeSupported(columnType);
 
   // 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;
@@ -102,6 +110,8 @@ const InlineEditableCell = ({
     xcss: truncateTextStyles
   }, renderItem(datasourceTypeWithValues)));
   return isEditable ? /*#__PURE__*/React.createElement(InlineEdit, {
+    ari: ari,
+    columnKey: columnKey,
     datasourceTypeWithValues: datasourceTypeWithValues,
     readView: readView
   }) : readView;

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

@@ -1,16 +1,66 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import AKInlineEdit from '@atlaskit/inline-edit';
 import { Box, xcss } from '@atlaskit/primitives';
+import { useDatasourceActions, useDatasourceItem } from '../../../state';
+import { useExecuteAtomicAction } from '../../../state/actions';
 import { editType } from '../edit-type';
 const containerStyles = xcss({
   marginBlockStart: 'space.negative.100'
 });
+const mapUpdatedItem = (type, existingItem, columnKey, newValue) => {
+  switch (type) {
+    case 'string':
+      return {
+        ...existingItem,
+        [columnKey]: {
+          data: newValue
+        }
+      };
+    default:
+  }
+  return null;
+};
 export const InlineEdit = ({
+  ari,
+  columnKey,
   datasourceTypeWithValues,
   readView
 }) => {
+  var _item$integrationKey;
   const [isEditing, setIsEditing] = useState(false);
+  const item = useDatasourceItem({
+    id: ari
+  });
+  const {
+    onUpdateItem
+  } = useDatasourceActions();
+  const {
+    execute
+  } = useExecuteAtomicAction({
+    ari,
+    fieldKey: columnKey,
+    integrationKey: (_item$integrationKey = item === null || item === void 0 ? void 0 : item.integrationKey) !== null && _item$integrationKey !== void 0 ? _item$integrationKey : ''
+  });
+  const onCommitUpdate = useCallback(value => {
+    if (!execute || !item) {
+      setIsEditing(false);
+      return;
+    }
+    const existingData = item.data;
+    const newItem = mapUpdatedItem(datasourceTypeWithValues.type, item.data, columnKey, value);
+    if (!newItem) {
+      setIsEditing(false);
+      return;
+    }
+    onUpdateItem(ari, newItem);
+    execute(value).catch(error => {
+      // eslint-disable-next-line no-console
+      console.error(error);
+      onUpdateItem(ari, existingData);
+    });
+    setIsEditing(false);
+  }, [ari, execute, datasourceTypeWithValues, item, columnKey, onUpdateItem]);
   return /*#__PURE__*/React.createElement(Box, {
     xcss: containerStyles
   }, /*#__PURE__*/React.createElement(AKInlineEdit, _extends({}, editType(datasourceTypeWithValues), {
@@ -20,9 +70,6 @@ export const InlineEdit = ({
     isEditing: isEditing,
     onEdit: () => setIsEditing(true),
     onCancel: () => setIsEditing(false),
-    onConfirm: value => {
-      setIsEditing(false);
-      // Save value back to the store
-    }
+    onConfirm: onCommitUpdate
   })));
 };

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

@@ -157,7 +157,7 @@ export var useExecuteAtomicAction = function useExecuteAtomicAction(_ref4) {
     if (!schema) {
       throw new Error('No action schema found.');
     }
-    executeAction({
+    return executeAction({
       integrationKey: integrationKey,
       actionKey: schema.actionKey,
       parameters: {
@@ -169,7 +169,7 @@ export var useExecuteAtomicAction = function useExecuteAtomicAction(_ref4) {
     });
   }, [executeAction, integrationKey, schema, fieldKey, ari]);
   if (!schema) {
-    return null;
+    return {};
   }
   return {
     execute: execute

package/dist/esm/state/index.js

@@ -13,19 +13,38 @@ var getInitialState = function getInitialState() {
   };
 };
 export var actions = {
-  onAddItems: function onAddItems(items, integrationKey) {
+  onUpdateItem: function onUpdateItem(id, data) {
     return function (_ref) {
       var setState = _ref.setState,
         getState = _ref.getState;
       var oldItems = _objectSpread({}, getState().items);
-      var _items$reduce = items.reduce(function (_ref2, item) {
+      var oldItem = oldItems[id];
+      if (!oldItem) {
+        return;
+      }
+      setState({
+        items: _objectSpread(_objectSpread({}, oldItems), {}, _defineProperty({}, id, _objectSpread(_objectSpread({}, oldItem), {}, {
+          data: _objectSpread(_objectSpread({}, data), {}, {
+            ari: oldItem.data.ari
+          })
+        })))
+      });
+    };
+  },
+  onAddItems: function onAddItems(items, integrationKey) {
+    return function (_ref2) {
+      var setState = _ref2.setState,
+        getState = _ref2.getState;
+      var oldItems = _objectSpread({}, getState().items);
+      var _items$reduce = items.reduce(function (_ref3, item) {
           var _item$ari, _oldItems$id;
-          var _ref3 = _slicedToArray(_ref2, 2),
-            ids = _ref3[0],
-            itemMap = _ref3[1];
+          var _ref4 = _slicedToArray(_ref3, 2),
+            ids = _ref4[0],
+            itemMap = _ref4[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 : uuidv4();
           return [[].concat(_toConsumableArray(ids), [id]), _objectSpread(_objectSpread({}, itemMap), {}, _defineProperty({}, id, {
+            ari: ari,
             integrationKey: integrationKey,
             data: _objectSpread(_objectSpread({}, (_oldItems$id = oldItems[id]) === null || _oldItems$id === void 0 ? void 0 : _oldItems$id.data), item)
           }))];
@@ -46,16 +65,15 @@ export var Store = createStore({
   actions: actions
 });
 export var useDatasourceItem = createStateHook(Store, {
-  selector: function selector(state, _ref4) {
-    var _state$items$id;
-    var id = _ref4.id;
-    return (_state$items$id = state.items[id]) === null || _state$items$id === void 0 ? void 0 : _state$items$id.data;
+  selector: function selector(state, _ref5) {
+    var id = _ref5.id;
+    return state.items[id];
   }
 });
 export var useDatasourceActions = createActionsHook(Store);
 var Container = createContainer(Store);
-export var StoreContainer = function StoreContainer(_ref5) {
-  var children = _ref5.children;
+export var StoreContainer = function StoreContainer(_ref6) {
+  var children = _ref6.children;
   if (fg('enable_datasource_react_sweet_state')) {
     return /*#__PURE__*/React.createElement(Container, {
       scope: "datasource"

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

@@ -41,16 +41,16 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, children);
 };
 var ReadOnlyCell = function ReadOnlyCell(_ref2) {
-  var _rowData$columnKey;
+  var _useDatasourceItem, _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 = useDatasourceItem({
+  var rowData = (_useDatasourceItem = useDatasourceItem({
     id: id
-  });
+  })) === null || _useDatasourceItem === void 0 ? void 0 : _useDatasourceItem.data;
   if (!rowData || !columnKey || !rowData[columnKey]) {
     return /*#__PURE__*/React.createElement(React.Fragment, null);
   }
@@ -75,15 +75,21 @@ var InlineEditableCell = function InlineEditableCell(_ref3) {
     columnType = _ref3.columnType,
     renderItem = _ref3.renderItem,
     wrappedColumnKeys = _ref3.wrappedColumnKeys;
-  var rowData = useDatasourceItem({
+  var item = useDatasourceItem({
     id: id
   });
+  if (!item) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  }
+  var rowData = item.data,
+    integrationKey = item.integrationKey,
+    ari = item.ari;
   if (!rowData || !columnKey || !rowData[columnKey]) {
     return /*#__PURE__*/React.createElement(React.Fragment, null);
   }
 
   // Check if field is editable
-  var isEditable = isEditTypeSupported(columnType);
+  var isEditable = !!ari && !!integrationKey && isEditTypeSupported(columnType);
 
   // 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;
@@ -103,6 +109,8 @@ var InlineEditableCell = function InlineEditableCell(_ref3) {
     xcss: truncateTextStyles
   }, renderItem(datasourceTypeWithValues)));
   return isEditable ? /*#__PURE__*/React.createElement(InlineEdit, {
+    ari: ari,
+    columnKey: columnKey,
     datasourceTypeWithValues: datasourceTypeWithValues,
     readView: readView
   }) : readView;

package/dist/esm/ui/issue-like-table/table-cell-content/inline-edit.js

@@ -1,19 +1,67 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useState } from 'react';
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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; }
+import React, { useCallback, useState } from 'react';
 import AKInlineEdit from '@atlaskit/inline-edit';
 import { Box, xcss } from '@atlaskit/primitives';
+import { useDatasourceActions, useDatasourceItem } from '../../../state';
+import { useExecuteAtomicAction } from '../../../state/actions';
 import { editType } from '../edit-type';
 var containerStyles = xcss({
   marginBlockStart: 'space.negative.100'
 });
+var mapUpdatedItem = function mapUpdatedItem(type, existingItem, columnKey, newValue) {
+  switch (type) {
+    case 'string':
+      return _objectSpread(_objectSpread({}, existingItem), {}, _defineProperty({}, columnKey, {
+        data: newValue
+      }));
+    default:
+  }
+  return null;
+};
 export var InlineEdit = function InlineEdit(_ref) {
-  var datasourceTypeWithValues = _ref.datasourceTypeWithValues,
+  var _item$integrationKey;
+  var ari = _ref.ari,
+    columnKey = _ref.columnKey,
+    datasourceTypeWithValues = _ref.datasourceTypeWithValues,
     _readView = _ref.readView;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isEditing = _useState2[0],
     setIsEditing = _useState2[1];
+  var item = useDatasourceItem({
+    id: ari
+  });
+  var _useDatasourceActions = useDatasourceActions(),
+    onUpdateItem = _useDatasourceActions.onUpdateItem;
+  var _useExecuteAtomicActi = useExecuteAtomicAction({
+      ari: ari,
+      fieldKey: columnKey,
+      integrationKey: (_item$integrationKey = item === null || item === void 0 ? void 0 : item.integrationKey) !== null && _item$integrationKey !== void 0 ? _item$integrationKey : ''
+    }),
+    execute = _useExecuteAtomicActi.execute;
+  var onCommitUpdate = useCallback(function (value) {
+    if (!execute || !item) {
+      setIsEditing(false);
+      return;
+    }
+    var existingData = item.data;
+    var newItem = mapUpdatedItem(datasourceTypeWithValues.type, item.data, columnKey, value);
+    if (!newItem) {
+      setIsEditing(false);
+      return;
+    }
+    onUpdateItem(ari, newItem);
+    execute(value).catch(function (error) {
+      // eslint-disable-next-line no-console
+      console.error(error);
+      onUpdateItem(ari, existingData);
+    });
+    setIsEditing(false);
+  }, [ari, execute, datasourceTypeWithValues, item, columnKey, onUpdateItem]);
   return /*#__PURE__*/React.createElement(Box, {
     xcss: containerStyles
   }, /*#__PURE__*/React.createElement(AKInlineEdit, _extends({}, editType(datasourceTypeWithValues), {
@@ -29,9 +77,6 @@ export var InlineEdit = function InlineEdit(_ref) {
     onCancel: function onCancel() {
       return setIsEditing(false);
     },
-    onConfirm: function onConfirm(value) {
-      setIsEditing(false);
-      // Save value back to the store
-    }
+    onConfirm: onCommitUpdate
   })));
 };

package/dist/types/state/actions/index.d.ts

@@ -82,6 +82,8 @@ export declare const useExecuteAtomicAction: ({ ari, fieldKey, integrationKey, }
     fieldKey: string;
     integrationKey: string;
 }) => {
-    execute: (value: AtomicActionInterface['type']) => void;
-} | null;
+    execute?: undefined;
+} | {
+    execute: (value: string | number) => Promise<import("@atlaskit/linking-types").AtomicActionExecuteResponse>;
+};
 export {};

package/dist/types/state/index.d.ts

@@ -2,22 +2,27 @@
 import { type Action } from 'react-sweet-state';
 import type { DatasourceDataResponseItem } from '@atlaskit/linking-types';
 type UniqueIdentifier = string;
+interface DatasourceItem {
+    ari: string | undefined;
+    integrationKey: string | undefined;
+    data: DatasourceDataResponseItem;
+}
 export interface State {
-    items: Record<UniqueIdentifier, {
-        integrationKey: string | undefined;
-        data: DatasourceDataResponseItem;
-    }>;
+    items: Record<UniqueIdentifier, DatasourceItem>;
 }
 export declare const actions: {
+    onUpdateItem: (id: string, data: DatasourceDataResponseItem) => Action<State, void, void>;
     onAddItems: (items: DatasourceDataResponseItem[], integrationKey: string | undefined) => Action<State, void, string[]>;
 };
 export declare const Store: import("react-sweet-state").Store<State, {
+    onUpdateItem: (id: string, data: DatasourceDataResponseItem) => Action<State, void, void>;
     onAddItems: (items: DatasourceDataResponseItem[], integrationKey: string | undefined) => Action<State, void, string[]>;
 }>;
-export declare const useDatasourceItem: import("react-sweet-state").HookStateFunction<DatasourceDataResponseItem | undefined, {
+export declare const useDatasourceItem: import("react-sweet-state").HookStateFunction<DatasourceItem | undefined, {
     id: string;
 }>;
 export declare const useDatasourceActions: import("react-sweet-state").HookActionsFunction<import("react-sweet-state").BoundActions<State, {
+    onUpdateItem: (id: string, data: DatasourceDataResponseItem) => Action<State, void, void>;
     onAddItems: (items: DatasourceDataResponseItem[], integrationKey: string | undefined) => Action<State, void, string[]>;
 }>>;
 export declare const StoreContainer: ({ children }: {

package/dist/types/ui/issue-like-table/table-cell-content/inline-edit.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 import type { DatasourceTypeWithOnlyValues } from '../types';
 interface InlineEditProps {
+    ari: string;
+    columnKey: string;
     datasourceTypeWithValues: DatasourceTypeWithOnlyValues;
     readView: React.ReactNode;
 }
-export declare const InlineEdit: ({ datasourceTypeWithValues, readView }: InlineEditProps) => JSX.Element;
+export declare const InlineEdit: ({ ari, columnKey, datasourceTypeWithValues, readView, }: InlineEditProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/state/actions/index.d.ts

@@ -82,6 +82,8 @@ export declare const useExecuteAtomicAction: ({ ari, fieldKey, integrationKey, }
     fieldKey: string;
     integrationKey: string;
 }) => {
-    execute: (value: AtomicActionInterface['type']) => void;
-} | null;
+    execute?: undefined;
+} | {
+    execute: (value: string | number) => Promise<import("@atlaskit/linking-types").AtomicActionExecuteResponse>;
+};
 export {};

package/dist/types-ts4.5/state/index.d.ts

@@ -2,22 +2,27 @@
 import { type Action } from 'react-sweet-state';
 import type { DatasourceDataResponseItem } from '@atlaskit/linking-types';
 type UniqueIdentifier = string;
+interface DatasourceItem {
+    ari: string | undefined;
+    integrationKey: string | undefined;
+    data: DatasourceDataResponseItem;
+}
 export interface State {
-    items: Record<UniqueIdentifier, {
-        integrationKey: string | undefined;
-        data: DatasourceDataResponseItem;
-    }>;
+    items: Record<UniqueIdentifier, DatasourceItem>;
 }
 export declare const actions: {
+    onUpdateItem: (id: string, data: DatasourceDataResponseItem) => Action<State, void, void>;
     onAddItems: (items: DatasourceDataResponseItem[], integrationKey: string | undefined) => Action<State, void, string[]>;
 };
 export declare const Store: import("react-sweet-state").Store<State, {
+    onUpdateItem: (id: string, data: DatasourceDataResponseItem) => Action<State, void, void>;
     onAddItems: (items: DatasourceDataResponseItem[], integrationKey: string | undefined) => Action<State, void, string[]>;
 }>;
-export declare const useDatasourceItem: import("react-sweet-state").HookStateFunction<DatasourceDataResponseItem | undefined, {
+export declare const useDatasourceItem: import("react-sweet-state").HookStateFunction<DatasourceItem | undefined, {
     id: string;
 }>;
 export declare const useDatasourceActions: import("react-sweet-state").HookActionsFunction<import("react-sweet-state").BoundActions<State, {
+    onUpdateItem: (id: string, data: DatasourceDataResponseItem) => Action<State, void, void>;
     onAddItems: (items: DatasourceDataResponseItem[], integrationKey: string | undefined) => Action<State, void, string[]>;
 }>>;
 export declare const StoreContainer: ({ children }: {

package/dist/types-ts4.5/ui/issue-like-table/table-cell-content/inline-edit.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 import type { DatasourceTypeWithOnlyValues } from '../types';
 interface InlineEditProps {
+    ari: string;
+    columnKey: string;
     datasourceTypeWithValues: DatasourceTypeWithOnlyValues;
     readView: React.ReactNode;
 }
-export declare const InlineEdit: ({ datasourceTypeWithValues, readView }: InlineEditProps) => JSX.Element;
+export declare const InlineEdit: ({ ari, columnKey, datasourceTypeWithValues, readView, }: InlineEditProps) => JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "2.10.1",
+	"version": "2.10.3",
 	"description": "UI Components to support linking platform dataset feature",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -36,50 +36,50 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^40.8.1",
-		"@atlaskit/analytics-next": "^10.0.0",
-		"@atlaskit/avatar": "^21.13.0",
-		"@atlaskit/avatar-group": "^9.10.0",
-		"@atlaskit/badge": "^16.3.0",
-		"@atlaskit/button": "^19.1.0",
-		"@atlaskit/datetime-picker": "^13.8.0",
-		"@atlaskit/dropdown-menu": "^12.16.0",
+		"@atlaskit/analytics-next": "^10.1.0",
+		"@atlaskit/avatar": "^21.14.0",
+		"@atlaskit/avatar-group": "^9.11.0",
+		"@atlaskit/badge": "^16.4.0",
+		"@atlaskit/button": "^19.2.0",
+		"@atlaskit/datetime-picker": "^13.10.0",
+		"@atlaskit/dropdown-menu": "^12.17.0",
 		"@atlaskit/editor-prosemirror": "5.0.1",
-		"@atlaskit/empty-state": "^7.10.0",
-		"@atlaskit/form": "^10.4.0",
+		"@atlaskit/empty-state": "^7.11.0",
+		"@atlaskit/form": "^10.5.0",
 		"@atlaskit/heading": "^2.4.0",
-		"@atlaskit/icon": "^22.11.0",
-		"@atlaskit/icon-object": "^6.4.0",
+		"@atlaskit/icon": "^22.12.0",
+		"@atlaskit/icon-object": "^6.5.0",
 		"@atlaskit/image": "^1.3.0",
-		"@atlaskit/inline-edit": "^13.5.0",
+		"@atlaskit/inline-edit": "^13.6.0",
 		"@atlaskit/intl-messages-provider": "^1.0.0",
 		"@atlaskit/jql-ast": "^3.3.0",
 		"@atlaskit/jql-editor": "^4.5.0",
 		"@atlaskit/jql-editor-autocomplete-rest": "^2.0.0",
-		"@atlaskit/link-client-extension": "^2.0.0",
-		"@atlaskit/linking-common": "^5.9.0",
+		"@atlaskit/link-client-extension": "^2.1.0",
+		"@atlaskit/linking-common": "^5.11.0",
 		"@atlaskit/linking-types": "^9.0.0",
-		"@atlaskit/logo": "^14.1.0",
-		"@atlaskit/lozenge": "^11.9.0",
-		"@atlaskit/modal-dialog": "^12.14.0",
+		"@atlaskit/logo": "^14.2.0",
+		"@atlaskit/lozenge": "^11.10.0",
+		"@atlaskit/modal-dialog": "^12.15.0",
 		"@atlaskit/outbound-auth-flow-client": "^3.4.5",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/popup": "^1.21.0",
+		"@atlaskit/popup": "^1.22.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.3.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll": "^1.2.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.0",
 		"@atlaskit/primitives": "^12.0.0",
-		"@atlaskit/select": "^17.12.0",
-		"@atlaskit/smart-card": "^27.13.0",
-		"@atlaskit/smart-user-picker": "6.10.1",
-		"@atlaskit/spinner": "^16.2.0",
-		"@atlaskit/tag": "^12.4.0",
-		"@atlaskit/textfield": "6.4.3",
-		"@atlaskit/theme": "^12.11.0",
-		"@atlaskit/tokens": "^1.57.0",
-		"@atlaskit/tooltip": "^18.6.0",
-		"@atlaskit/ufo": "^0.2.4",
-		"@atlaskit/width-detector": "^4.2.0",
+		"@atlaskit/select": "^17.13.0",
+		"@atlaskit/smart-card": "^27.15.0",
+		"@atlaskit/smart-user-picker": "6.10.2",
+		"@atlaskit/spinner": "^16.3.0",
+		"@atlaskit/tag": "^12.5.0",
+		"@atlaskit/textfield": "6.5.1",
+		"@atlaskit/theme": "^13.0.0",
+		"@atlaskit/tokens": "^1.58.0",
+		"@atlaskit/tooltip": "^18.7.0",
+		"@atlaskit/ufo": "^0.3.0",
+		"@atlaskit/width-detector": "^4.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.0.0",
@@ -99,7 +99,7 @@
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
 		"@atlaskit/link-provider": "^1.14.0",
-		"@atlaskit/link-test-helpers": "^7.3.0",
+		"@atlaskit/link-test-helpers": "^7.4.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/visual-regression": "*",
 		"@atlassian/feature-flags-test-utils": "^0.2.0",