@atlaskit/link-datasource 2.11.1 → 2.11.3

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/link-datasource
 
+## 2.11.3
+
+### Patch Changes
+
+- [#131211](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/131211)
+  [`35d5f222a8212`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/35d5f222a8212) -
+  Prevents inline-edit to fire execute callback on blur or with an empty string
+- Updated dependencies
+
+## 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

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/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");
@@ -592,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.
@@ -738,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/inline-edit.js

@@ -12,6 +12,8 @@ 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 _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); }
@@ -31,6 +33,9 @@ var mapUpdatedItem = function mapUpdatedItem(type, existingItem, columnKey, newV
   }
   return null;
 };
+var isNewValue = function isNewValue(columnKey, newItem, existingData) {
+  return newItem[columnKey].data && newItem[columnKey].data !== existingData[columnKey].data;
+};
 var InlineEdit = exports.InlineEdit = function InlineEdit(_ref) {
   var ari = _ref.ari,
     execute = _ref.execute,
@@ -44,6 +49,11 @@ 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 onCommitUpdate = (0, _react.useCallback)(function (value) {
@@ -53,18 +63,17 @@ var InlineEdit = exports.InlineEdit = function InlineEdit(_ref) {
     }
     var existingData = item.data;
     var newItem = mapUpdatedItem(datasourceTypeWithValues.type, item.data, columnKey, value);
-    if (!newItem) {
+    if (!newItem || !isNewValue(columnKey, newItem, existingData)) {
       setIsEditing(false);
       return;
     }
     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/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';
@@ -563,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.
@@ -711,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',

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

@@ -2,6 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useState } from 'react';
 import AKInlineEdit from '@atlaskit/inline-edit';
 import { Box, xcss } from '@atlaskit/primitives';
+import { getResourceUrl } from '../../../common/utils/response-item';
+import { useDatasourceTableFlag } from '../../../hooks/useDatasourceTableFlag';
 import { useDatasourceActions, useDatasourceItem } from '../../../state';
 import { editType } from '../edit-type';
 const containerStyles = xcss({
@@ -20,6 +22,9 @@ const mapUpdatedItem = (type, existingItem, columnKey, newValue) => {
   }
   return null;
 };
+const isNewValue = (columnKey, newItem, existingData) => {
+  return newItem[columnKey].data && newItem[columnKey].data !== existingData[columnKey].data;
+};
 export const InlineEdit = ({
   ari,
   execute,
@@ -31,6 +36,12 @@ export const InlineEdit = ({
   const item = useDatasourceItem({
     id: ari
   });
+  const url = getResourceUrl(item === null || item === void 0 ? void 0 : item.data);
+  const {
+    showErrorFlag
+  } = useDatasourceTableFlag({
+    url
+  });
   const {
     onUpdateItem
   } = useDatasourceActions();
@@ -41,18 +52,17 @@ export const InlineEdit = ({
     }
     const existingData = item.data;
     const newItem = mapUpdatedItem(datasourceTypeWithValues.type, item.data, columnKey, value);
-    if (!newItem) {
+    if (!newItem || !isNewValue(columnKey, newItem, existingData)) {
       setIsEditing(false);
       return;
     }
     onUpdateItem(ari, newItem);
     execute(value).catch(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.createElement(Box, {
     xcss: containerStyles
   }, /*#__PURE__*/React.createElement(AKInlineEdit, _extends({}, editType(datasourceTypeWithValues), {

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

@@ -0,0 +1,11 @@
+import _typeof from "@babel/runtime/helpers/typeof";
+var isLink = function isLink(data) {
+  return _typeof(data) === 'object' && 'url' in data;
+};
+var getLinkTypeUrl = function getLinkTypeUrl(data) {
+  return isLink(data) ? data.url : undefined;
+};
+export var 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/esm/hooks/useDatasourceTableFlag.js

@@ -0,0 +1,39 @@
+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, 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 var useDatasourceTableFlag = function useDatasourceTableFlag(options) {
+  var _useFlags = useFlags(),
+    showFlag = _useFlags.showFlag;
+  var actions = useMemo(function () {
+    var 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]);
+  var showErrorFlag = useCallback(function (args) {
+    showFlag(_objectSpread({
+      actions: 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: showErrorFlag
+  };
+};

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

@@ -18,6 +18,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';
@@ -588,7 +589,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
     }, _callee, null, [[3, 9]]);
   })), [experienceId, extensionKey, hasFullSchema, onLoadDatasourceDetails]);
   var isEditable = onVisibleColumnKeysChange && hasData;
-  return jsx("div", {
+  var 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.
@@ -734,5 +735,6 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref5) {
       }
     }));
   }))));
+  return fg('platform-datasources-enable-two-way-sync') ? jsx(FlagsProvider, null, view) : view;
 };
 export var EmptyState = TableEmptyState;

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

@@ -1,5 +1,20 @@
 import { defineMessages } from 'react-intl-next';
 export var 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',

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

@@ -6,6 +6,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React, { useCallback, useState } from 'react';
 import AKInlineEdit from '@atlaskit/inline-edit';
 import { Box, xcss } from '@atlaskit/primitives';
+import { getResourceUrl } from '../../../common/utils/response-item';
+import { useDatasourceTableFlag } from '../../../hooks/useDatasourceTableFlag';
 import { useDatasourceActions, useDatasourceItem } from '../../../state';
 import { editType } from '../edit-type';
 var containerStyles = xcss({
@@ -21,6 +23,9 @@ var mapUpdatedItem = function mapUpdatedItem(type, existingItem, columnKey, newV
   }
   return null;
 };
+var isNewValue = function isNewValue(columnKey, newItem, existingData) {
+  return newItem[columnKey].data && newItem[columnKey].data !== existingData[columnKey].data;
+};
 export var InlineEdit = function InlineEdit(_ref) {
   var ari = _ref.ari,
     execute = _ref.execute,
@@ -34,6 +39,11 @@ export var InlineEdit = function InlineEdit(_ref) {
   var item = useDatasourceItem({
     id: ari
   });
+  var url = getResourceUrl(item === null || item === void 0 ? void 0 : item.data);
+  var _useDatasourceTableFl = useDatasourceTableFlag({
+      url: url
+    }),
+    showErrorFlag = _useDatasourceTableFl.showErrorFlag;
   var _useDatasourceActions = useDatasourceActions(),
     onUpdateItem = _useDatasourceActions.onUpdateItem;
   var onCommitUpdate = useCallback(function (value) {
@@ -43,18 +53,17 @@ export var InlineEdit = function InlineEdit(_ref) {
     }
     var existingData = item.data;
     var newItem = mapUpdatedItem(datasourceTypeWithValues.type, item.data, columnKey, value);
-    if (!newItem) {
+    if (!newItem || !isNewValue(columnKey, newItem, existingData)) {
       setIsEditing(false);
       return;
     }
     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.createElement(Box, {
     xcss: containerStyles
   }, /*#__PURE__*/React.createElement(AKInlineEdit, _extends({}, editType(datasourceTypeWithValues), {

package/dist/types/common/utils/response-item.d.ts

@@ -0,0 +1,2 @@
+import type { DatasourceDataResponseItem } from '@atlaskit/linking-types';
+export declare const getResourceUrl: (data?: DatasourceDataResponseItem) => string | undefined;

package/dist/types/hooks/useDatasourceTableFlag.d.ts

@@ -0,0 +1,8 @@
+import { type CreateFlagArgs } from '@atlaskit/flag';
+interface DatasourceTableFlagOptions {
+    url?: string;
+}
+export declare const useDatasourceTableFlag: (options?: DatasourceTableFlagOptions) => {
+    showErrorFlag: (args?: Partial<CreateFlagArgs>) => void;
+};
+export {};

package/dist/types/ui/issue-like-table/messages.d.ts

@@ -1,4 +1,19 @@
 export declare const issueLikeTableMessages: {
+    goToResourceLink: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    updateErrorGenericDescription: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    updateErrorGenericTitle: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
     wrapText: {
         id: string;
         description: string;

package/dist/types-ts4.5/common/utils/response-item.d.ts

@@ -0,0 +1,2 @@
+import type { DatasourceDataResponseItem } from '@atlaskit/linking-types';
+export declare const getResourceUrl: (data?: DatasourceDataResponseItem) => string | undefined;

package/dist/types-ts4.5/hooks/useDatasourceTableFlag.d.ts

@@ -0,0 +1,8 @@
+import { type CreateFlagArgs } from '@atlaskit/flag';
+interface DatasourceTableFlagOptions {
+    url?: string;
+}
+export declare const useDatasourceTableFlag: (options?: DatasourceTableFlagOptions) => {
+    showErrorFlag: (args?: Partial<CreateFlagArgs>) => void;
+};
+export {};

package/dist/types-ts4.5/ui/issue-like-table/messages.d.ts

@@ -1,4 +1,19 @@
 export declare const issueLikeTableMessages: {
+    goToResourceLink: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    updateErrorGenericDescription: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    updateErrorGenericTitle: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
     wrapText: {
         id: string;
         description: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "2.11.1",
+	"version": "2.11.3",
 	"description": "UI Components to support linking platform dataset feature",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -41,11 +41,12 @@
 		"@atlaskit/avatar": "^21.15.0",
 		"@atlaskit/avatar-group": "^9.11.0",
 		"@atlaskit/badge": "^16.4.0",
-		"@atlaskit/button": "^20.0.0",
+		"@atlaskit/button": "^20.1.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/flag": "^15.8.0",
 		"@atlaskit/form": "^10.5.0",
 		"@atlaskit/heading": "^2.4.0",
 		"@atlaskit/icon": "^22.13.0",