@atlaskit/link-datasource 2.11.0 → 2.11.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/link-datasource
 
+## 2.11.2
+
+### Patch Changes
+
+- [#131099](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/131099)
+  [`9762a9622c0a9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9762a9622c0a9) -
+  [ux] Add error flag on update inline edit fails
+
+## 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

package/dist/cjs/common/utils/response-item.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getResourceUrl = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var isLink = function isLink(data) {
+  return (0, _typeof2.default)(data) === 'object' && 'url' in data;
+};
+var getLinkTypeUrl = function getLinkTypeUrl(data) {
+  return isLink(data) ? data.url : undefined;
+};
+var getResourceUrl = exports.getResourceUrl = function getResourceUrl(data) {
+  var _data$key, _data$title;
+  return getLinkTypeUrl(data === null || data === void 0 || (_data$key = data['key']) === null || _data$key === void 0 ? void 0 : _data$key.data) || getLinkTypeUrl(data === null || data === void 0 || (_data$title = data['title']) === null || _data$title === void 0 ? void 0 : _data$title.data);
+};

package/dist/cjs/hooks/useDatasourceTableFlag.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDatasourceTableFlag = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _uuid = _interopRequireDefault(require("uuid"));
+var _flag = require("@atlaskit/flag");
+var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/cross-circle"));
+var _messages = require("../ui/issue-like-table/messages");
+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 useDatasourceTableFlag = exports.useDatasourceTableFlag = function useDatasourceTableFlag(options) {
+  var _useFlags = (0, _flag.useFlags)(),
+    showFlag = _useFlags.showFlag;
+  var actions = (0, _react.useMemo)(function () {
+    var resourceLink = (options === null || options === void 0 ? void 0 : options.url) && {
+      content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.issueLikeTableMessages.goToResourceLink),
+      href: options === null || options === void 0 ? void 0 : options.url,
+      target: '_blank'
+    };
+    return resourceLink ? [resourceLink] : undefined;
+  }, [options === null || options === void 0 ? void 0 : options.url]);
+  var showErrorFlag = (0, _react.useCallback)(function (args) {
+    showFlag(_objectSpread({
+      actions: actions,
+      description: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.issueLikeTableMessages.updateErrorGenericDescription),
+      // We need IconTile (currently in beta) in order to scale the new icon to 24px
+      // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
+      icon: /*#__PURE__*/_react.default.createElement(_crossCircle.default, {
+        label: "Error",
+        primaryColor: "var(--ds-icon-danger, #C9372C)"
+      }),
+      id: (0, _uuid.default)(),
+      isAutoDismiss: true,
+      title: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.issueLikeTableMessages.updateErrorGenericTitle)
+    }, args));
+  }, [actions, showFlag]);
+  return {
+    showErrorFlag: showErrorFlag
+  };
+};

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

@@ -16,6 +16,7 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _reactIntlNext = require("react-intl-next");
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
+var _flag = require("@atlaskit/flag");
 var _linkingCommon = require("@atlaskit/linking-common");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _closestEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");
@@ -471,7 +472,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,
@@ -585,7 +593,7 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
     }, _callee, null, [[3, 9]]);
   })), [experienceId, extensionKey, hasFullSchema, onLoadDatasourceDetails]);
   var isEditable = onVisibleColumnKeysChange && hasData;
-  return (0, _react2.jsx)("div", {
+  var view = (0, _react2.jsx)("div", {
     /* There is required contentEditable={true} in editor-card-plugin
      * But this brakes how DND works. We set contentEditable={false} to allow DND to work
      * when dragging is initiated on top of a column label.
@@ -731,5 +739,6 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
       }
     }));
   }))));
+  return (0, _platformFeatureFlags.fg)('platform-datasources-enable-two-way-sync') ? (0, _react2.jsx)(_flag.FlagsProvider, null, view) : view;
 };
 var EmptyState = exports.EmptyState = _emptyState.default;

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

@@ -6,6 +6,21 @@ Object.defineProperty(exports, "__esModule", {
 exports.issueLikeTableMessages = void 0;
 var _reactIntlNext = require("react-intl-next");
 var issueLikeTableMessages = exports.issueLikeTableMessages = (0, _reactIntlNext.defineMessages)({
+  goToResourceLink: {
+    id: 'linkDataSource.issue-line-table.go-to-resource.nonfinal',
+    description: 'Link to navigate to the resource page',
+    defaultMessage: 'Go to item'
+  },
+  updateErrorGenericDescription: {
+    id: 'linkDataSource.issue-line-table.error-generic-description.nonfinal',
+    description: 'Generic error message description shown when updating issue field fails',
+    defaultMessage: 'We had an issue trying to complete the update. Refresh the page and try again.'
+  },
+  updateErrorGenericTitle: {
+    id: 'linkDataSource.issue-line-table.error-generic-title.nonfinal',
+    description: 'Generic error message title shown when updating issue field fails',
+    defaultMessage: 'Something went wrong'
+  },
   wrapText: {
     id: 'linkDataSource.issue-line-table.wrap-text',
     description: 'Table header Dropdown item for making whole column to wrap text',

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

@@ -12,8 +12,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _inlineEdit = _interopRequireDefault(require("@atlaskit/inline-edit"));
 var _primitives = require("@atlaskit/primitives");
+var _responseItem = require("../../../common/utils/response-item");
+var _useDatasourceTableFlag = require("../../../hooks/useDatasourceTableFlag");
 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 +34,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],
@@ -45,16 +46,15 @@ var InlineEdit = exports.InlineEdit = function InlineEdit(_ref) {
   var item = (0, _state.useDatasourceItem)({
     id: ari
   });
+  var url = (0, _responseItem.getResourceUrl)(item === null || item === void 0 ? void 0 : item.data);
+  var _useDatasourceTableFl = (0, _useDatasourceTableFlag.useDatasourceTableFlag)({
+      url: url
+    }),
+    showErrorFlag = _useDatasourceTableFl.showErrorFlag;
   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;
     }
@@ -66,12 +66,11 @@ var InlineEdit = exports.InlineEdit = function InlineEdit(_ref) {
     }
     onUpdateItem(ari, newItem);
     execute(value).catch(function (error) {
-      // eslint-disable-next-line no-console
-      console.error(error);
+      showErrorFlag();
       onUpdateItem(ari, existingData);
     });
     setIsEditing(false);
-  }, [ari, execute, datasourceTypeWithValues, item, columnKey, onUpdateItem]);
+  }, [ari, execute, datasourceTypeWithValues, item, columnKey, onUpdateItem, showErrorFlag]);
   return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     xcss: containerStyles
   }, /*#__PURE__*/_react.default.createElement(_inlineEdit.default, (0, _extends2.default)({}, (0, _editType.editType)(datasourceTypeWithValues), {

package/dist/es2019/common/utils/response-item.js

@@ -0,0 +1,6 @@
+const isLink = data => typeof data === 'object' && 'url' in data;
+const getLinkTypeUrl = data => isLink(data) ? data.url : undefined;
+export const getResourceUrl = data => {
+  var _data$key, _data$title;
+  return getLinkTypeUrl(data === null || data === void 0 ? void 0 : (_data$key = data['key']) === null || _data$key === void 0 ? void 0 : _data$key.data) || getLinkTypeUrl(data === null || data === void 0 ? void 0 : (_data$title = data['title']) === null || _data$title === void 0 ? void 0 : _data$title.data);
+};

package/dist/es2019/hooks/useDatasourceTableFlag.js

@@ -0,0 +1,38 @@
+import React, { useCallback, useMemo } from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import uuid from 'uuid';
+import { useFlags } from '@atlaskit/flag';
+import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
+import { issueLikeTableMessages } from '../ui/issue-like-table/messages';
+export const useDatasourceTableFlag = options => {
+  const {
+    showFlag
+  } = useFlags();
+  const actions = useMemo(() => {
+    const resourceLink = (options === null || options === void 0 ? void 0 : options.url) && {
+      content: /*#__PURE__*/React.createElement(FormattedMessage, issueLikeTableMessages.goToResourceLink),
+      href: options === null || options === void 0 ? void 0 : options.url,
+      target: '_blank'
+    };
+    return resourceLink ? [resourceLink] : undefined;
+  }, [options === null || options === void 0 ? void 0 : options.url]);
+  const showErrorFlag = useCallback(args => {
+    showFlag({
+      actions,
+      description: /*#__PURE__*/React.createElement(FormattedMessage, issueLikeTableMessages.updateErrorGenericDescription),
+      // We need IconTile (currently in beta) in order to scale the new icon to 24px
+      // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
+      icon: /*#__PURE__*/React.createElement(CrossCircleIcon, {
+        label: "Error",
+        primaryColor: "var(--ds-icon-danger, #C9372C)"
+      }),
+      id: uuid(),
+      isAutoDismiss: true,
+      title: /*#__PURE__*/React.createElement(FormattedMessage, issueLikeTableMessages.updateErrorGenericTitle),
+      ...args
+    });
+  }, [actions, showFlag]);
+  return {
+    showErrorFlag
+  };
+};

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

@@ -11,6 +11,7 @@ import styled from '@emotion/styled';
 import debounce from 'lodash/debounce';
 import { useIntl } from 'react-intl-next';
 import invariant from 'tiny-invariant';
+import { FlagsProvider } from '@atlaskit/flag';
 import { Skeleton } from '@atlaskit/linking-common';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
@@ -31,7 +32,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 +470,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,
@@ -556,7 +564,7 @@ export const IssueLikeDataTableView = ({
     }
   }, [experienceId, extensionKey, hasFullSchema, onLoadDatasourceDetails]);
   const isEditable = onVisibleColumnKeysChange && hasData;
-  return jsx("div", {
+  const view = jsx("div", {
     /* There is required contentEditable={true} in editor-card-plugin
      * But this brakes how DND works. We set contentEditable={false} to allow DND to work
      * when dragging is initiated on top of a column label.
@@ -704,5 +712,6 @@ export const IssueLikeDataTableView = ({
       }, content);
     }
   }))))));
+  return fg('platform-datasources-enable-two-way-sync') ? jsx(FlagsProvider, null, view) : view;
 };
 export const EmptyState = TableEmptyState;

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

@@ -1,5 +1,20 @@
 import { defineMessages } from 'react-intl-next';
 export const issueLikeTableMessages = defineMessages({
+  goToResourceLink: {
+    id: 'linkDataSource.issue-line-table.go-to-resource.nonfinal',
+    description: 'Link to navigate to the resource page',
+    defaultMessage: 'Go to item'
+  },
+  updateErrorGenericDescription: {
+    id: 'linkDataSource.issue-line-table.error-generic-description.nonfinal',
+    description: 'Generic error message description shown when updating issue field fails',
+    defaultMessage: 'We had an issue trying to complete the update. Refresh the page and try again.'
+  },
+  updateErrorGenericTitle: {
+    id: 'linkDataSource.issue-line-table.error-generic-title.nonfinal',
+    description: 'Generic error message title shown when updating issue field fails',
+    defaultMessage: 'Something went wrong'
+  },
   wrapText: {
     id: 'linkDataSource.issue-line-table.wrap-text',
     description: 'Table header Dropdown item for making whole column to wrap text',