@atlaskit/link-datasource 2.10.3 → 2.11.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/link-datasource
 
+## 2.11.1
+
+### Patch Changes
+
+- [#125506](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/125506)
+  [`2c38223755a99`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2c38223755a99) -
+  Fix isEditable field validation behind FF
+
+## 2.11.0
+
+### Minor Changes
+
+- [#129983](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/129983)
+  [`02069a897926b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/02069a897926b) -
+  Add React 18 to peer dependencies and upgrade react-dom dependency to same versions as well
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.10.3
 
 ### Patch Changes

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

@@ -122,7 +122,7 @@ var getFieldUpdateActionByAri = function getFieldUpdateActionByAri(state, _ref3)
     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) {
+  if (!isEditable) {
     return;
   }
   return (_state$actionsByInteg = state.actionsByIntegration[integrationKey]) === null || _state$actionsByInteg === void 0 ? void 0 : _state$actionsByInteg[fieldKey];

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

@@ -471,7 +471,14 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
             return {
               key: key,
               columnKey: key,
-              content: (0, _react2.jsx)(_tableCellContent.TableCellContent, {
+              // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+              content: (0, _platformFeatureFlags.fg)('platform-datasources-enable-two-way-sync') ? (0, _react2.jsx)(_tableCellContent.TableCellContent, {
+                id: id,
+                columnKey: key,
+                columnType: type,
+                wrappedColumnKeys: wrappedColumnKeys,
+                renderItem: renderItem
+              }) : (0, _react2.jsx)(_tableCellContent.ReadOnlyCell, {
                 id: id,
                 columnKey: key,
                 columnType: type,

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

@@ -4,13 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TableCellContent = void 0;
+exports.TableCellContent = exports.ReadOnlyCell = 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 _actions = require("../../../state/actions");
 var _editType = require("../edit-type");
 var _renderType = require("../render-type");
 var _truncateTextTag = require("../truncate-text-tag");
@@ -47,7 +47,7 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
   }
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
 };
-var ReadOnlyCell = function ReadOnlyCell(_ref2) {
+var ReadOnlyCell = exports.ReadOnlyCell = function ReadOnlyCell(_ref2) {
   var _useDatasourceItem, _rowData$columnKey;
   var id = _ref2.id,
     columnType = _ref2.columnType,
@@ -59,7 +59,7 @@ var ReadOnlyCell = function ReadOnlyCell(_ref2) {
     id: id
   })) === null || _useDatasourceItem === void 0 ? void 0 : _useDatasourceItem.data;
   if (!rowData || !columnKey || !rowData[columnKey]) {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+    return null;
   }
 
   // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
@@ -76,71 +76,84 @@ var ReadOnlyCell = function ReadOnlyCell(_ref2) {
   }, renderItem(datasourceTypeWithValues));
 };
 var InlineEditableCell = function InlineEditableCell(_ref3) {
-  var _rowData$columnKey2;
-  var id = _ref3.id,
+  var ari = _ref3.ari,
+    values = _ref3.values,
     columnKey = _ref3.columnKey,
-    columnType = _ref3.columnType,
     renderItem = _ref3.renderItem,
+    integrationKey = _ref3.integrationKey,
     wrappedColumnKeys = _ref3.wrappedColumnKeys;
-  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 = !!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;
-  var values = Array.isArray(value) ? value : [value];
-  var datasourceTypeWithValues = {
-    type: columnType,
-    values: values
-  };
+  // Execute fn is only returned when the field is editable and the action schema exists
+  var _useExecuteAtomicActi = (0, _actions.useExecuteAtomicAction)({
+      ari: ari,
+      fieldKey: columnKey,
+      integrationKey: integrationKey
+    }),
+    execute = _useExecuteAtomicActi.execute;
+  var isEditable = !!execute;
   var readView = /*#__PURE__*/_react.default.createElement(TooltipWrapper, {
     columnKey: columnKey,
-    datasourceTypeWithValues: datasourceTypeWithValues,
+    datasourceTypeWithValues: values,
     wrappedColumnKeys: wrappedColumnKeys
   }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     testId: "inline-edit-read-view",
     paddingInline: isEditable ? 'space.075' : 'space.100',
     paddingBlock: "space.050",
     xcss: truncateTextStyles
-  }, renderItem(datasourceTypeWithValues)));
-  return isEditable ? /*#__PURE__*/_react.default.createElement(_inlineEdit.InlineEdit, {
+  }, renderItem(values)));
+  if (!isEditable) {
+    return readView;
+  }
+  return /*#__PURE__*/_react.default.createElement(_inlineEdit.InlineEdit, {
     ari: ari,
+    execute: execute,
+    readView: readView,
     columnKey: columnKey,
-    datasourceTypeWithValues: datasourceTypeWithValues,
-    readView: readView
-  }) : readView;
+    datasourceTypeWithValues: values
+  });
 };
 var TableCellContent = exports.TableCellContent = function TableCellContent(_ref4) {
-  var columnKey = _ref4.columnKey,
+  var id = _ref4.id,
+    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, {
+  var item = (0, _state.useDatasourceItem)({
+    id: id
+  });
+  if (item) {
+    var integrationKey = item.integrationKey,
+      ari = item.ari,
+      rowData = item.data;
+    var isEditType = !!ari && !!integrationKey && rowData[columnKey] && (0, _editType.isEditTypeSupported)(columnType);
+    if (isEditType) {
+      var _rowData$columnKey2;
+      // 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(InlineEditableCell, {
+        ari: ari,
+        columnKey: columnKey,
+        renderItem: renderItem,
+        integrationKey: integrationKey,
+        values: datasourceTypeWithValues,
+        wrappedColumnKeys: wrappedColumnKeys
+      });
+    }
+  }
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    testId: "inline-edit-read-view",
+    paddingInline: "space.100",
+    paddingBlock: "space.050",
+    xcss: truncateTextStyles
+  }, /*#__PURE__*/_react.default.createElement(ReadOnlyCell, {
     id: id,
     columnKey: columnKey,
     columnType: columnType,
     wrappedColumnKeys: wrappedColumnKeys,
     renderItem: renderItem
-  });
-  return renderedContent;
+  }));
 };

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

@@ -13,7 +13,6 @@ 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; }
@@ -33,11 +32,11 @@ var mapUpdatedItem = function mapUpdatedItem(type, existingItem, columnKey, newV
   return null;
 };
 var InlineEdit = exports.InlineEdit = function InlineEdit(_ref) {
-  var _item$integrationKey;
   var ari = _ref.ari,
+    execute = _ref.execute,
+    _readView = _ref.readView,
     columnKey = _ref.columnKey,
-    datasourceTypeWithValues = _ref.datasourceTypeWithValues,
-    _readView = _ref.readView;
+    datasourceTypeWithValues = _ref.datasourceTypeWithValues;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isEditing = _useState2[0],
@@ -47,14 +46,8 @@ var InlineEdit = exports.InlineEdit = function InlineEdit(_ref) {
   });
   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) {
+    if (!item) {
       setIsEditing(false);
       return;
     }

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

@@ -103,7 +103,7 @@ const getFieldUpdateActionByAri = (state, {
 }) => {
   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) {
+  if (!isEditable) {
     return;
   }
   return (_state$actionsByInteg = state.actionsByIntegration[integrationKey]) === null || _state$actionsByInteg === void 0 ? void 0 : _state$actionsByInteg[fieldKey];

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

@@ -31,7 +31,7 @@ import { DraggableTableHeading } from './draggable-table-heading';
 import TableEmptyState from './empty-state';
 import { renderType, stringifyType } from './render-type';
 import { InlineEditableTableCell, Table, TableCell, TableHeading, withTablePluginHeaderPrefix } from './styled';
-import { TableCellContent } from './table-cell-content';
+import { ReadOnlyCell, TableCellContent } from './table-cell-content';
 import { TruncateTextTag } from './truncate-text-tag';
 import { useIsOnScreen } from './useIsOnScreen';
 import { COLUMN_BASE_WIDTH, getWidthCss } from './utils';
@@ -469,7 +469,14 @@ export const IssueLikeDataTableView = ({
         return {
           key,
           columnKey: key,
-          content: jsx(TableCellContent, {
+          // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+          content: fg('platform-datasources-enable-two-way-sync') ? jsx(TableCellContent, {
+            id: id,
+            columnKey: key,
+            columnType: type,
+            wrappedColumnKeys: wrappedColumnKeys,
+            renderItem: renderItem
+          }) : jsx(ReadOnlyCell, {
             id: id,
             columnKey: key,
             columnType: type,

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

@@ -1,9 +1,9 @@
 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 { useExecuteAtomicAction } from '../../../state/actions';
 import { isEditTypeSupported } from '../edit-type';
 import { stringifyType } from '../render-type';
 import { TruncateTextTag } from '../truncate-text-tag';
@@ -38,7 +38,7 @@ const TooltipWrapper = ({
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, children);
 };
-const ReadOnlyCell = ({
+export const ReadOnlyCell = ({
   id,
   columnType,
   wrappedColumnKeys = [],
@@ -50,7 +50,7 @@ const ReadOnlyCell = ({
     id
   })) === null || _useDatasourceItem === void 0 ? void 0 : _useDatasourceItem.data;
   if (!rowData || !columnKey || !rowData[columnKey]) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null);
+    return null;
   }
 
   // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
@@ -67,75 +67,89 @@ const ReadOnlyCell = ({
   }, renderItem(datasourceTypeWithValues));
 };
 const InlineEditableCell = ({
-  id,
+  ari,
+  values,
   columnKey,
-  columnType,
   renderItem,
+  integrationKey,
   wrappedColumnKeys
 }) => {
-  var _rowData$columnKey2;
-  const item = useDatasourceItem({
-    id
-  });
-  if (!item) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null);
-  }
+  // Execute fn is only returned when the field is editable and the action schema exists
   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 = !!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;
-  const values = Array.isArray(value) ? value : [value];
-  const datasourceTypeWithValues = {
-    type: columnType,
-    values
-  };
+    execute
+  } = useExecuteAtomicAction({
+    ari,
+    fieldKey: columnKey,
+    integrationKey
+  });
+  const isEditable = !!execute;
   const readView = /*#__PURE__*/React.createElement(TooltipWrapper, {
     columnKey: columnKey,
-    datasourceTypeWithValues: datasourceTypeWithValues,
+    datasourceTypeWithValues: values,
     wrappedColumnKeys: wrappedColumnKeys
   }, /*#__PURE__*/React.createElement(Box, {
     testId: "inline-edit-read-view",
     paddingInline: isEditable ? 'space.075' : 'space.100',
     paddingBlock: "space.050",
     xcss: truncateTextStyles
-  }, renderItem(datasourceTypeWithValues)));
-  return isEditable ? /*#__PURE__*/React.createElement(InlineEdit, {
+  }, renderItem(values)));
+  if (!isEditable) {
+    return readView;
+  }
+  return /*#__PURE__*/React.createElement(InlineEdit, {
     ari: ari,
+    execute: execute,
+    readView: readView,
     columnKey: columnKey,
-    datasourceTypeWithValues: datasourceTypeWithValues,
-    readView: readView
-  }) : readView;
+    datasourceTypeWithValues: values
+  });
 };
 export const TableCellContent = ({
+  id,
   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, {
+  const item = useDatasourceItem({
+    id
+  });
+  if (item) {
+    const {
+      integrationKey,
+      ari,
+      data: rowData
+    } = item;
+    const isEditType = !!ari && !!integrationKey && rowData[columnKey] && isEditTypeSupported(columnType);
+    if (isEditType) {
+      var _rowData$columnKey2;
+      // 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(InlineEditableCell, {
+        ari: ari,
+        columnKey: columnKey,
+        renderItem: renderItem,
+        integrationKey: integrationKey,
+        values: datasourceTypeWithValues,
+        wrappedColumnKeys: wrappedColumnKeys
+      });
+    }
+  }
+  return /*#__PURE__*/React.createElement(Box, {
+    testId: "inline-edit-read-view",
+    paddingInline: "space.100",
+    paddingBlock: "space.050",
+    xcss: truncateTextStyles
+  }, /*#__PURE__*/React.createElement(ReadOnlyCell, {
     id: id,
     columnKey: columnKey,
     columnType: columnType,
     wrappedColumnKeys: wrappedColumnKeys,
     renderItem: renderItem
-  });
-  return renderedContent;
+  }));
 };

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

@@ -3,7 +3,6 @@ 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'
@@ -23,11 +22,11 @@ const mapUpdatedItem = (type, existingItem, columnKey, newValue) => {
 };
 export const InlineEdit = ({
   ari,
+  execute,
+  readView,
   columnKey,
-  datasourceTypeWithValues,
-  readView
+  datasourceTypeWithValues
 }) => {
-  var _item$integrationKey;
   const [isEditing, setIsEditing] = useState(false);
   const item = useDatasourceItem({
     id: ari
@@ -35,15 +34,8 @@ export const InlineEdit = ({
   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) {
+    if (!item) {
       setIsEditing(false);
       return;
     }

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

@@ -116,7 +116,7 @@ var getFieldUpdateActionByAri = function getFieldUpdateActionByAri(state, _ref3)
     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) {
+  if (!isEditable) {
     return;
   }
   return (_state$actionsByInteg = state.actionsByIntegration[integrationKey]) === null || _state$actionsByInteg === void 0 ? void 0 : _state$actionsByInteg[fieldKey];

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

@@ -38,7 +38,7 @@ import { DraggableTableHeading } from './draggable-table-heading';
 import TableEmptyState from './empty-state';
 import { renderType, stringifyType } from './render-type';
 import { InlineEditableTableCell, Table, TableCell, TableHeading, withTablePluginHeaderPrefix } from './styled';
-import { TableCellContent } from './table-cell-content';
+import { ReadOnlyCell, TableCellContent } from './table-cell-content';
 import { TruncateTextTag } from './truncate-text-tag';
 import { useIsOnScreen } from './useIsOnScreen';
 import { COLUMN_BASE_WIDTH, getWidthCss } from './utils';
@@ -467,7 +467,14 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
             return {
               key: key,
               columnKey: key,
-              content: jsx(TableCellContent, {
+              // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+              content: fg('platform-datasources-enable-two-way-sync') ? jsx(TableCellContent, {
+                id: id,
+                columnKey: key,
+                columnType: type,
+                wrappedColumnKeys: wrappedColumnKeys,
+                renderItem: renderItem
+              }) : jsx(ReadOnlyCell, {
                 id: id,
                 columnKey: key,
                 columnType: type,

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

@@ -1,9 +1,9 @@
 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 { useExecuteAtomicAction } from '../../../state/actions';
 import { isEditTypeSupported } from '../edit-type';
 import { stringifyType } from '../render-type';
 import { TruncateTextTag } from '../truncate-text-tag';
@@ -40,7 +40,7 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, children);
 };
-var ReadOnlyCell = function ReadOnlyCell(_ref2) {
+export var ReadOnlyCell = function ReadOnlyCell(_ref2) {
   var _useDatasourceItem, _rowData$columnKey;
   var id = _ref2.id,
     columnType = _ref2.columnType,
@@ -52,7 +52,7 @@ var ReadOnlyCell = function ReadOnlyCell(_ref2) {
     id: id
   })) === null || _useDatasourceItem === void 0 ? void 0 : _useDatasourceItem.data;
   if (!rowData || !columnKey || !rowData[columnKey]) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null);
+    return null;
   }
 
   // Need to make sure we keep falsy values like 0 and '', as well as the boolean false.
@@ -69,71 +69,84 @@ var ReadOnlyCell = function ReadOnlyCell(_ref2) {
   }, renderItem(datasourceTypeWithValues));
 };
 var InlineEditableCell = function InlineEditableCell(_ref3) {
-  var _rowData$columnKey2;
-  var id = _ref3.id,
+  var ari = _ref3.ari,
+    values = _ref3.values,
     columnKey = _ref3.columnKey,
-    columnType = _ref3.columnType,
     renderItem = _ref3.renderItem,
+    integrationKey = _ref3.integrationKey,
     wrappedColumnKeys = _ref3.wrappedColumnKeys;
-  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 = !!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;
-  var values = Array.isArray(value) ? value : [value];
-  var datasourceTypeWithValues = {
-    type: columnType,
-    values: values
-  };
+  // Execute fn is only returned when the field is editable and the action schema exists
+  var _useExecuteAtomicActi = useExecuteAtomicAction({
+      ari: ari,
+      fieldKey: columnKey,
+      integrationKey: integrationKey
+    }),
+    execute = _useExecuteAtomicActi.execute;
+  var isEditable = !!execute;
   var readView = /*#__PURE__*/React.createElement(TooltipWrapper, {
     columnKey: columnKey,
-    datasourceTypeWithValues: datasourceTypeWithValues,
+    datasourceTypeWithValues: values,
     wrappedColumnKeys: wrappedColumnKeys
   }, /*#__PURE__*/React.createElement(Box, {
     testId: "inline-edit-read-view",
     paddingInline: isEditable ? 'space.075' : 'space.100',
     paddingBlock: "space.050",
     xcss: truncateTextStyles
-  }, renderItem(datasourceTypeWithValues)));
-  return isEditable ? /*#__PURE__*/React.createElement(InlineEdit, {
+  }, renderItem(values)));
+  if (!isEditable) {
+    return readView;
+  }
+  return /*#__PURE__*/React.createElement(InlineEdit, {
     ari: ari,
+    execute: execute,
+    readView: readView,
     columnKey: columnKey,
-    datasourceTypeWithValues: datasourceTypeWithValues,
-    readView: readView
-  }) : readView;
+    datasourceTypeWithValues: values
+  });
 };
 export var TableCellContent = function TableCellContent(_ref4) {
-  var columnKey = _ref4.columnKey,
+  var id = _ref4.id,
+    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 = 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, {
+  var item = useDatasourceItem({
+    id: id
+  });
+  if (item) {
+    var integrationKey = item.integrationKey,
+      ari = item.ari,
+      rowData = item.data;
+    var isEditType = !!ari && !!integrationKey && rowData[columnKey] && isEditTypeSupported(columnType);
+    if (isEditType) {
+      var _rowData$columnKey2;
+      // 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.createElement(InlineEditableCell, {
+        ari: ari,
+        columnKey: columnKey,
+        renderItem: renderItem,
+        integrationKey: integrationKey,
+        values: datasourceTypeWithValues,
+        wrappedColumnKeys: wrappedColumnKeys
+      });
+    }
+  }
+  return /*#__PURE__*/React.createElement(Box, {
+    testId: "inline-edit-read-view",
+    paddingInline: "space.100",
+    paddingBlock: "space.050",
+    xcss: truncateTextStyles
+  }, /*#__PURE__*/React.createElement(ReadOnlyCell, {
     id: id,
     columnKey: columnKey,
     columnType: columnType,
     wrappedColumnKeys: wrappedColumnKeys,
     renderItem: renderItem
-  });
-  return renderedContent;
+  }));
 };

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

@@ -7,7 +7,6 @@ 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'
@@ -23,11 +22,11 @@ var mapUpdatedItem = function mapUpdatedItem(type, existingItem, columnKey, newV
   return null;
 };
 export var InlineEdit = function InlineEdit(_ref) {
-  var _item$integrationKey;
   var ari = _ref.ari,
+    execute = _ref.execute,
+    _readView = _ref.readView,
     columnKey = _ref.columnKey,
-    datasourceTypeWithValues = _ref.datasourceTypeWithValues,
-    _readView = _ref.readView;
+    datasourceTypeWithValues = _ref.datasourceTypeWithValues;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isEditing = _useState2[0],
@@ -37,14 +36,8 @@ export var InlineEdit = function InlineEdit(_ref) {
   });
   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) {
+    if (!item) {
       setIsEditing(false);
       return;
     }

package/dist/types/ui/common/modal/cancel-button/index.d.ts

@@ -3,6 +3,6 @@ import { type ButtonClickedCancelAttributesType } from '../../../../analytics/ge
 export interface CancelButtonProps {
     getAnalyticsPayload: () => ButtonClickedCancelAttributesType;
     onCancel: () => void;
-    testId: string;
+    testId?: string;
 }
 export declare const CancelButton: ({ getAnalyticsPayload, onCancel, testId }: CancelButtonProps) => jsx.JSX.Element;

package/dist/types/ui/common/modal/insert-button/index.d.ts

@@ -6,7 +6,7 @@ import { type PropsWithChildren } from 'react';
 import { jsx } from '@emotion/react';
 import { type DatasourceParameters } from '@atlaskit/linking-types';
 export type InsertButtonProps<Parameters extends DatasourceParameters> = PropsWithChildren<{
-    testId: string;
+    testId?: string;
     url: string | undefined;
     getAnalyticsPayload: () => Record<string, any>;
     overwriteParameters?: (parameters: Parameters) => Parameters;

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

@@ -9,5 +9,6 @@ interface TableCellContentProps {
     renderItem: TableViewPropsRenderType;
     wrappedColumnKeys: string[] | undefined;
 }
-export declare const TableCellContent: ({ columnKey, columnType, id, renderItem, wrappedColumnKeys, }: TableCellContentProps) => JSX.Element;
+export declare const ReadOnlyCell: ({ id, columnType, wrappedColumnKeys, renderItem, columnKey, }: TableCellContentProps) => JSX.Element | null;
+export declare const TableCellContent: ({ id, columnKey, columnType, renderItem, wrappedColumnKeys, }: TableCellContentProps) => JSX.Element;
 export {};

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

@@ -1,10 +1,12 @@
 import React from 'react';
+import { type AtomicActionExecuteResponse } from '@atlaskit/linking-types';
 import type { DatasourceTypeWithOnlyValues } from '../types';
 interface InlineEditProps {
     ari: string;
     columnKey: string;
-    datasourceTypeWithValues: DatasourceTypeWithOnlyValues;
     readView: React.ReactNode;
+    datasourceTypeWithValues: DatasourceTypeWithOnlyValues;
+    execute: (value: string | number) => Promise<AtomicActionExecuteResponse>;
 }
-export declare const InlineEdit: ({ ari, columnKey, datasourceTypeWithValues, readView, }: InlineEditProps) => JSX.Element;
+export declare const InlineEdit: ({ ari, execute, readView, columnKey, datasourceTypeWithValues, }: InlineEditProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/ui/common/modal/cancel-button/index.d.ts

@@ -3,6 +3,6 @@ import { type ButtonClickedCancelAttributesType } from '../../../../analytics/ge
 export interface CancelButtonProps {
     getAnalyticsPayload: () => ButtonClickedCancelAttributesType;
     onCancel: () => void;
-    testId: string;
+    testId?: string;
 }
 export declare const CancelButton: ({ getAnalyticsPayload, onCancel, testId }: CancelButtonProps) => jsx.JSX.Element;

package/dist/types-ts4.5/ui/common/modal/insert-button/index.d.ts

@@ -6,7 +6,7 @@ import { type PropsWithChildren } from 'react';
 import { jsx } from '@emotion/react';
 import { type DatasourceParameters } from '@atlaskit/linking-types';
 export type InsertButtonProps<Parameters extends DatasourceParameters> = PropsWithChildren<{
-    testId: string;
+    testId?: string;
     url: string | undefined;
     getAnalyticsPayload: () => Record<string, any>;
     overwriteParameters?: (parameters: Parameters) => Parameters;

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

@@ -9,5 +9,6 @@ interface TableCellContentProps {
     renderItem: TableViewPropsRenderType;
     wrappedColumnKeys: string[] | undefined;
 }
-export declare const TableCellContent: ({ columnKey, columnType, id, renderItem, wrappedColumnKeys, }: TableCellContentProps) => JSX.Element;
+export declare const ReadOnlyCell: ({ id, columnType, wrappedColumnKeys, renderItem, columnKey, }: TableCellContentProps) => JSX.Element | null;
+export declare const TableCellContent: ({ id, columnKey, columnType, renderItem, wrappedColumnKeys, }: TableCellContentProps) => JSX.Element;
 export {};

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

@@ -1,10 +1,12 @@
 import React from 'react';
+import { type AtomicActionExecuteResponse } from '@atlaskit/linking-types';
 import type { DatasourceTypeWithOnlyValues } from '../types';
 interface InlineEditProps {
     ari: string;
     columnKey: string;
-    datasourceTypeWithValues: DatasourceTypeWithOnlyValues;
     readView: React.ReactNode;
+    datasourceTypeWithValues: DatasourceTypeWithOnlyValues;
+    execute: (value: string | number) => Promise<AtomicActionExecuteResponse>;
 }
-export declare const InlineEdit: ({ ari, columnKey, datasourceTypeWithValues, readView, }: InlineEditProps) => JSX.Element;
+export declare const InlineEdit: ({ ari, execute, readView, columnKey, datasourceTypeWithValues, }: InlineEditProps) => JSX.Element;
 export {};

package/examples-helpers/buildAssetsIssuesTable.tsx

@@ -1,8 +1,7 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 
 import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
 import { SmartCardProvider } from '@atlaskit/link-provider';
-import { mockAssetsClientFetchRequests } from '@atlaskit/link-test-helpers/datasource';
 import { type DatasourceParameters } from '@atlaskit/linking-types';
 
 import { DatasourceTableView } from '../src';
@@ -55,12 +54,6 @@ const AssetsTableView = () => {
 export const ExampleAssetsIssuesTableView = ({
 	mockDatasourceFetchRequest = true,
 }: AssetsTableViewProps) => {
-	useEffect(() => {
-		if (mockDatasourceFetchRequest) {
-			mockAssetsClientFetchRequests();
-		}
-	}, [mockDatasourceFetchRequest]);
-
 	return (
 		<IntlMessagesProvider loaderFn={fetchMessagesForLocale}>
 			<SmartCardProvider client={new SmartLinkClient()}>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "2.10.3",
+	"version": "2.11.1",
 	"description": "UI Components to support linking platform dataset feature",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -29,7 +29,8 @@
 		"i18n": true,
 		"website": {
 			"name": "Link Datasource"
-		}
+		},
+		"runReact18": true
 	},
 	"scripts": {
 		"analytics:codegen": "yarn workspace @atlassian/analytics-tooling run analytics:codegen link-datasource --output ./src/analytics/generated"
@@ -37,17 +38,17 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^40.8.1",
 		"@atlaskit/analytics-next": "^10.1.0",
-		"@atlaskit/avatar": "^21.14.0",
+		"@atlaskit/avatar": "^21.15.0",
 		"@atlaskit/avatar-group": "^9.11.0",
 		"@atlaskit/badge": "^16.4.0",
-		"@atlaskit/button": "^19.2.0",
-		"@atlaskit/datetime-picker": "^13.10.0",
+		"@atlaskit/button": "^20.0.0",
+		"@atlaskit/datetime-picker": "^13.11.0",
 		"@atlaskit/dropdown-menu": "^12.17.0",
 		"@atlaskit/editor-prosemirror": "5.0.1",
 		"@atlaskit/empty-state": "^7.11.0",
 		"@atlaskit/form": "^10.5.0",
 		"@atlaskit/heading": "^2.4.0",
-		"@atlaskit/icon": "^22.12.0",
+		"@atlaskit/icon": "^22.13.0",
 		"@atlaskit/icon-object": "^6.5.0",
 		"@atlaskit/image": "^1.3.0",
 		"@atlaskit/inline-edit": "^13.6.0",
@@ -63,14 +64,14 @@
 		"@atlaskit/modal-dialog": "^12.15.0",
 		"@atlaskit/outbound-auth-flow-client": "^3.4.5",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/popup": "^1.22.0",
+		"@atlaskit/popup": "^1.23.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.13.0",
-		"@atlaskit/smart-card": "^27.15.0",
+		"@atlaskit/select": "^17.15.0",
+		"@atlaskit/smart-card": "^27.16.0",
 		"@atlaskit/smart-user-picker": "6.10.2",
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/tag": "^12.5.0",
@@ -92,7 +93,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"react": "^16.8.0",
+		"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"devDependencies": {