@atlaskit/smart-card 25.6.1 → 25.7.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/smart-card
 
+## 25.7.1
+
+### Patch Changes
+
+- [`7a58d99e333`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7a58d99e333) - [ux] Added error handling for smart link action
+- Updated dependencies
+
+## 25.7.0
+
+### Minor Changes
+
+- [`9c49eef4c87`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9c49eef4c87) - [ux]
+
+  - Add lozenge action to hover preview (wip, opt-in, feature flag)
+  - Fix hover preview's action dropdown menu showing behind container
+  - Allow setting z-index for portal component inside flexible smart links
+
 ## 25.6.1
 
 ### Patch Changes

package/dist/cjs/messages.js

@@ -206,6 +206,11 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: "Uh oh. We can't find this link!",
     description: 'Error case for when a provided link is not found'
   },
+  open_issue_in_jira: {
+    id: 'fabric.linking.open_issue_in_jira',
+    defaultMessage: 'Open issue in Jira',
+    description: 'Click to open link in Jira'
+  },
   open_link_in_a_new_tab: {
     id: 'fabric.linking.open_link_in_a_new_tab',
     defaultMessage: 'Open link in a new tab',
@@ -351,6 +356,21 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Save',
     description: 'Just the "save" word'
   },
+  status_change_load_error: {
+    id: 'fabric.linking.status_change_load_error',
+    defaultMessage: 'We couldn’t load the statuses and transitions',
+    description: 'Informs the user that the loading of status transitions failed'
+  },
+  status_change_permission_error: {
+    id: 'fabric.linking.status_change_permission_error',
+    defaultMessage: 'You don’t have permission to transition this issue. ',
+    description: 'Informs the user that they do not have enough permissions to update a status'
+  },
+  status_change_update_error: {
+    id: 'fabric.linking.status_change_update_error',
+    defaultMessage: 'We couldn’t update the status',
+    description: "Occurs when a user tries to update an issue's status but fails to do so"
+  },
   try_again: {
     id: 'fabric.linking.try_again',
     defaultMessage: 'Try again',

package/dist/cjs/state/flexible-ui-context/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useFlexibleUiContext = exports.useFlexibleUiAnalyticsContext = exports.FlexibleUiContext = exports.FlexibleUiAnalyticsContext = void 0;
+exports.useFlexibleUiOptionContext = exports.useFlexibleUiContext = exports.useFlexibleUiAnalyticsContext = exports.FlexibleUiOptionContext = exports.FlexibleUiContext = exports.FlexibleUiAnalyticsContext = void 0;
 var _react = require("react");
 /**
  * This provides the data that will be used by Smart Links Flexible UI to populate it's
@@ -25,4 +25,15 @@ exports.FlexibleUiAnalyticsContext = FlexibleUiAnalyticsContext;
 var useFlexibleUiAnalyticsContext = function useFlexibleUiAnalyticsContext() {
   return (0, _react.useContext)(FlexibleUiAnalyticsContext);
 };
-exports.useFlexibleUiAnalyticsContext = useFlexibleUiAnalyticsContext;
+
+/**
+ * This provides the ui options that will be used by Smart Links Flexible UI
+ * to render its underlying elements.
+ */
+exports.useFlexibleUiAnalyticsContext = useFlexibleUiAnalyticsContext;
+var FlexibleUiOptionContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+exports.FlexibleUiOptionContext = FlexibleUiOptionContext;
+var useFlexibleUiOptionContext = function useFlexibleUiOptionContext() {
+  return (0, _react.useContext)(FlexibleUiOptionContext);
+};
+exports.useFlexibleUiOptionContext = useFlexibleUiOptionContext;

package/dist/cjs/state/hooks/use-invoke/types.js

@@ -2,20 +2,4 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
-exports.InvokeActionError = void 0;
-var InvokeActionError;
-/**
- * Additional details for invoke function that may be required for component
- */
-exports.InvokeActionError = InvokeActionError;
-(function (InvokeActionError) {
-  InvokeActionError["NoData"] = "NoData";
-  InvokeActionError["Unknown"] = "Unknown";
-})(InvokeActionError || (exports.InvokeActionError = InvokeActionError = {}));
-/**
- * Invoke request with additional details for the component
- */
-/**
- * CRUD invoke requests for the component that support server actions
- */
+});

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "25.6.1",
+	"version": "25.7.1",
 	"sideEffects": false
 }

package/dist/cjs/view/CardWithUrl/component.js

@@ -218,7 +218,8 @@ function CardWithUrlContent(_ref) {
         testId: testId,
         inlinePreloaderStyle: inlinePreloaderStyle,
         showHoverPreview: showHoverPreview,
-        showAuthTooltip: showAuthTooltip
+        showAuthTooltip: showAuthTooltip,
+        showServerActions: showServerActions
       });
     case 'block':
       return /*#__PURE__*/_react.default.createElement(_BlockCard.BlockCard, {

package/dist/cjs/view/FlexibleCard/components/blocks/action-group/index.js

@@ -80,6 +80,7 @@ var ActionGroup = function ActionGroup(_ref) {
     onDropdownOpenChange = _ref.onDropdownOpenChange,
     testId = _ref.testId;
   var context = (0, _flexibleUiContext.useFlexibleUiContext)();
+  var ui = (0, _flexibleUiContext.useFlexibleUiOptionContext)();
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isOpen = _useState2[0],
@@ -131,11 +132,12 @@ var ActionGroup = function ActionGroup(_ref) {
             ref: triggerRef
           })));
         },
-        testId: "action-group-dropdown"
+        testId: "action-group-dropdown",
+        zIndex: ui === null || ui === void 0 ? void 0 : ui.zIndex
       }, renderActionItems(actionItems, size, appearance, true, onActionItemClick));
     }
     return null;
-  }, [appearance, isMoreThenTwoItems, isOpen, onActionItemClick, onOpenChange, renderableActionItems, size, visibleButtonsNum]);
+  }, [appearance, isMoreThenTwoItems, isOpen, onActionItemClick, onOpenChange, renderableActionItems, size, ui === null || ui === void 0 ? void 0 : ui.zIndex, visibleButtonsNum]);
   return renderableActionItems.length > 0 ? (0, _react2.jsx)("div", {
     css: styles,
     className: "actions-button-group"

package/dist/cjs/view/FlexibleCard/components/common/lozenge-action/index.js

@@ -18,10 +18,10 @@ var _lozengeActionError = _interopRequireDefault(require("./lozenge-action-error
 var _errorBoundary = _interopRequireDefault(require("./error-boundary"));
 var _styled = require("./styled");
 var _useInvoke = _interopRequireDefault(require("../../../../../state/hooks/use-invoke"));
-var _types = require("../../../../../state/hooks/use-invoke/types");
 var _extractLozengeActionItems = _interopRequireDefault(require("../../../../../extractors/action/extract-lozenge-action-items"));
 var _createStatusUpdateRequest = _interopRequireDefault(require("../../../../../utils/actions/create-status-update-request"));
 var _useResolve = _interopRequireDefault(require("../../../../../state/hooks/use-resolve"));
+var _types = require("./lozenge-action-error/types");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, defineProperty = Object.defineProperty || function (obj, key, desc) { obj[key] = desc.value; }, $Symbol = "function" == typeof Symbol ? Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return Object.defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = Object.create(protoGenerator.prototype), context = new Context(tryLocsList || []); return defineProperty(generator, "_invoke", { value: makeInvokeMethod(innerFn, self, context) }), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = Object.getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype); function defineIteratorMethods(prototype) { ["next", "throw", "return"].forEach(function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == _typeof(value) && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; defineProperty(this, "_invoke", { value: function value(method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; } function maybeInvokeDelegate(delegate, context) { var methodName = context.method, method = delegate.iterator[methodName]; if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator.return && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel; var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) { if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; } return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), defineProperty(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (val) { var object = Object(val), keys = []; for (var key in object) { keys.push(key); } return keys.reverse(), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) { "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined); } }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, catch: function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; } /** @jsx jsx */
@@ -32,12 +32,16 @@ var validateItems = function validateItems() {
     return item.text !== text;
   });
 };
+var isInvokeCustomError = function isInvokeCustomError(err) {
+  return err.message !== undefined && err.errorCode !== undefined;
+};
 var LozengeAction = function LozengeAction(_ref) {
   var action = _ref.action,
     appearance = _ref.appearance,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-element-lozenge-action' : _ref$testId,
-    text = _ref.text;
+    text = _ref.text,
+    zIndex = _ref.zIndex;
   var _useState = (0, _react2.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isLoaded = _useState2[0],
@@ -56,8 +60,8 @@ var LozengeAction = function LozengeAction(_ref) {
     setItems = _useState8[1];
   var _useState9 = (0, _react2.useState)(),
     _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-    errorCode = _useState10[0],
-    setErrorCode = _useState10[1];
+    errorMessage = _useState10[0],
+    setErrorMessage = _useState10[1];
   var invoke = (0, _useInvoke.default)();
   var reload = (0, _useResolve.default)();
   var handleOpenChange = (0, _react2.useCallback)( /*#__PURE__*/function () {
@@ -69,7 +73,7 @@ var LozengeAction = function LozengeAction(_ref) {
             case 0:
               setIsOpen(args.isOpen);
               if (!(args.isOpen && !isLoaded && action !== null && action !== void 0 && action.read)) {
-                _context.next = 19;
+                _context.next = 20;
                 break;
               }
               _context.prev = 2;
@@ -82,29 +86,30 @@ var LozengeAction = function LozengeAction(_ref) {
               setItems(validItems);
               setIsLoaded(true);
               if ((validItems === null || validItems === void 0 ? void 0 : validItems.length) === 0) {
-                setErrorCode(_types.InvokeActionError.NoData);
+                setErrorMessage(_types.LozengeActionErrorMessages.noData);
+                setIsLoaded(false);
               }
-              _context.next = 16;
+              _context.next = 17;
               break;
             case 13:
               _context.prev = 13;
               _context.t0 = _context["catch"](2);
-              // TODO: EDM-6261: Error state
-              setErrorCode(_types.InvokeActionError.Unknown);
-            case 16:
-              _context.prev = 16;
+              setErrorMessage(_types.LozengeActionErrorMessages.unknown);
+              setIsLoaded(false);
+            case 17:
+              _context.prev = 17;
               setIsLoading(false);
-              return _context.finish(16);
-            case 19:
+              return _context.finish(17);
+            case 20:
               if (!args.isOpen) {
-                setErrorCode(undefined);
+                setErrorMessage(undefined);
               }
-            case 20:
+            case 21:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[2, 13, 16, 19]]);
+      }, _callee, null, [[2, 13, 17, 20]]);
     }));
     return function (_x) {
       return _ref2.apply(this, arguments);
@@ -127,7 +132,7 @@ var LozengeAction = function LozengeAction(_ref) {
               _context2.prev = 0;
               updateAction = action === null || action === void 0 ? void 0 : action.update;
               if (!(updateAction && id)) {
-                _context2.next = 13;
+                _context2.next = 15;
                 break;
               }
               setIsLoading(true);
@@ -136,38 +141,43 @@ var LozengeAction = function LozengeAction(_ref) {
               return invoke(request);
             case 7:
               setIsLoading(false);
+              setIsLoaded(false);
               setIsOpen(false);
+              setItems([]);
               _ref4 = updateAction.details || {}, url = _ref4.url, linkId = _ref4.id;
               if (!url) {
-                _context2.next = 13;
+                _context2.next = 15;
                 break;
               }
-              _context2.next = 13;
+              _context2.next = 15;
               return reload(url, true, undefined, linkId);
-            case 13:
-              _context2.next = 19;
-              break;
             case 15:
-              _context2.prev = 15;
+              _context2.next = 21;
+              break;
+            case 17:
+              _context2.prev = 17;
               _context2.t0 = _context2["catch"](0);
-              // TODO: EDM-6261: Error state
               setIsLoading(false);
-              setErrorCode(_types.InvokeActionError.Unknown);
-            case 19:
+              if (isInvokeCustomError(_context2.t0)) {
+                setErrorMessage(_context2.t0.message);
+              } else {
+                setErrorMessage(_types.LozengeActionErrorMessages.updateFailed);
+              }
+            case 21:
             case "end":
               return _context2.stop();
           }
         }
-      }, _callee2, null, [[0, 15]]);
+      }, _callee2, null, [[0, 17]]);
     }));
     return function (_x2) {
       return _ref3.apply(this, arguments);
     };
   }(), [action === null || action === void 0 ? void 0 : action.update, invoke, reload]);
   var dropdownItemGroup = (0, _react2.useMemo)(function () {
-    if (errorCode) {
+    if (errorMessage) {
       return (0, _react.jsx)(_lozengeActionError.default, {
-        errorCode: errorCode,
+        errorMessage: errorMessage,
         testId: testId
       });
     }
@@ -183,13 +193,14 @@ var LozengeAction = function LozengeAction(_ref) {
         }));
       })));
     }
-  }, [errorCode, handleItemClick, items, testId]);
+  }, [errorMessage, handleItemClick, items, testId]);
   return (0, _react.jsx)(_dropdownMenu.default, {
     isLoading: isLoading,
     isOpen: isOpen,
     onOpenChange: handleOpenChange,
     testId: testId,
-    trigger: trigger
+    trigger: trigger,
+    zIndex: zIndex
   }, dropdownItemGroup);
 };
 var _default = (0, _errorBoundary.default)(LozengeAction);

package/dist/cjs/view/FlexibleCard/components/common/lozenge-action/lozenge-action-error/index.js

@@ -1,24 +1,45 @@
 "use strict";
 
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("@emotion/react");
+var _react2 = require("react");
 var _dropdownMenu = require("@atlaskit/dropdown-menu");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _colors = require("@atlaskit/theme/colors");
+var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
+var _styled = require("./styled");
+var _utils = require("../../../utils");
+/** @jsx jsx */
+
+var MAX_LINE_NUMBER = 8;
 var LozengeActionError = function LozengeActionError(_ref) {
-  var errorCode = _ref.errorCode,
-    testId = _ref.testId;
-  // TODO: EDM-5746 and EDM-5782
-  var content = (0, _react.useMemo)(function () {
-    return errorCode;
-  }, [errorCode]);
-  return /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItemGroup, null, /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
+  var errorMessage = _ref.errorMessage,
+    testId = _ref.testId,
+    _ref$maxLineNumber = _ref.maxLineNumber,
+    maxLineNumber = _ref$maxLineNumber === void 0 ? MAX_LINE_NUMBER : _ref$maxLineNumber;
+  var content = (0, _react2.useMemo)(function () {
+    return (0, _react.jsx)(_react2.Fragment, null, (0, _react.jsx)("div", {
+      css: _styled.contentStyles
+    }, (0, _react.jsx)(_error.default, {
+      testId: "".concat(testId, "-icon"),
+      size: "medium",
+      primaryColor: "var(--ds-icon-danger, ".concat(_colors.R500, ")"),
+      secondaryColor: "var(--ds-background-danger, ".concat(_colors.R50, ")"),
+      label: 'error'
+    }), (0, _react.jsx)("span", {
+      css: (0, _styled.textStyles)(maxLineNumber),
+      "data-testid": "".concat(testId, "-error-message")
+    }, typeof errorMessage === 'string' ? errorMessage : (0, _utils.getFormattedMessage)(errorMessage))));
+  }, [errorMessage, maxLineNumber, testId]);
+  return (0, _react.jsx)("span", {
+    css: _styled.dropdownItemGroupStyles,
+    "data-testid": "".concat(testId, "-error-item-group")
+  }, (0, _react.jsx)(_dropdownMenu.DropdownItemGroup, null, (0, _react.jsx)(_dropdownMenu.DropdownItem, {
     testId: "".concat(testId, "-error")
-  }, content));
+  }, content)));
 };
 var _default = LozengeActionError;
 exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/common/lozenge-action/lozenge-action-error/styled.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.textStyles = exports.dropdownItemGroupStyles = exports.contentStyles = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _colors = require("@atlaskit/theme/colors");
+var _utils = require("../../../utils");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var dropdownItemGroupStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  button {\n    width: 220px;\n\n    &:hover {\n      background-color: inherit;\n      cursor: default;\n    }\n  }\n"])));
+exports.dropdownItemGroupStyles = dropdownItemGroupStyles;
+var sharedBlockStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: 0.5rem;\n  line-height: 1rem;\n  min-width: 0;\n  overflow: hidden;\n  flex-direction: row;\n  align-items: center;\n"])));
+var contentStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n\n  margin-top: 2px;\n  align-items: flex-start;\n\n  > span,\n  > div {\n    &[data-smart-element-text] {\n      font-size: 0.875rem;\n      color: ", ";\n    }\n  }\n"])), sharedBlockStyles, "var(--ds-text, ".concat(_colors.N800, ")"));
+exports.contentStyles = contentStyles;
+var textStyles = function textStyles(maxLines) {
+  return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 1rem;\n  white-space: normal;\n  ", ";\n"])), (0, _utils.getTruncateStyles)(maxLines));
+};
+exports.textStyles = textStyles;

package/dist/cjs/view/FlexibleCard/components/common/lozenge-action/lozenge-action-error/types.js

@@ -2,4 +2,18 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
+});
+exports.LozengeActionErrorMessages = void 0;
+var _messages = require("../../../../../../messages");
+var LozengeActionErrorMessages = {
+  noData: {
+    descriptor: _messages.messages['status_change_permission_error']
+  },
+  unknown: {
+    descriptor: _messages.messages['status_change_load_error']
+  },
+  updateFailed: {
+    descriptor: _messages.messages['status_change_update_error']
+  }
+};
+exports.LozengeActionErrorMessages = LozengeActionErrorMessages;

package/dist/cjs/view/FlexibleCard/components/container/index.js

@@ -82,6 +82,7 @@ var getContainerStyles = function getContainerStyles(size, hideBackground, hideE
 exports.getContainerStyles = getContainerStyles;
 var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry, onClick, onActionMenuOpenChange) {
   return _react.default.Children.map(children, function (child) {
+    // TODO: EDM-6468: Use useFlexibleUiOptionContext for rendering options inside block/element instead
     if ( /*#__PURE__*/_react.default.isValidElement(child) && (0, _flexible.isFlexibleUiBlock)(child)) {
       var blockSize = child.props.size;
       var size = blockSize || containerSize;
@@ -152,10 +153,12 @@ var Container = function Container(_ref3) {
     hideHoverCardPreviewButton = _ref3$hideHoverCardPr === void 0 ? false : _ref3$hideHoverCardPr,
     _ref3$hidePadding = _ref3.hidePadding,
     hidePadding = _ref3$hidePadding === void 0 ? false : _ref3$hidePadding,
-    _ref3$showHoverPrevie = _ref3.showHoverPreview,
-    showHoverPreview = _ref3$showHoverPrevie === void 0 ? false : _ref3$showHoverPrevie,
     onClick = _ref3.onClick,
     retry = _ref3.retry,
+    _ref3$showHoverPrevie = _ref3.showHoverPreview,
+    showHoverPreview = _ref3$showHoverPrevie === void 0 ? false : _ref3$showHoverPrevie,
+    _ref3$showServerActio = _ref3.showServerActions,
+    showServerActions = _ref3$showServerActio === void 0 ? false : _ref3$showServerActio,
     _ref3$size = _ref3.size,
     size = _ref3$size === void 0 ? _constants.SmartLinkSize.Medium : _ref3$size,
     status = _ref3.status,
@@ -182,7 +185,8 @@ var Container = function Container(_ref3) {
       url: context === null || context === void 0 ? void 0 : context.url,
       canOpen: hoverCardCanOpen,
       closeOnChildClick: true,
-      hidePreviewButton: hideHoverCardPreviewButton
+      hidePreviewButton: hideHoverCardPreviewButton,
+      showServerActions: showServerActions
     }, containerContent);
   }
   return containerContent;

package/dist/cjs/view/FlexibleCard/components/elements/lozenge/index.js

@@ -12,6 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 var _lozengeAction = _interopRequireDefault(require("../../common/lozenge-action"));
+var _flexibleUiContext = require("../../../../../state/flexible-ui-context");
 var _templateObject, _templateObject2;
 /** @jsx jsx */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -35,6 +36,7 @@ var Lozenge = function Lozenge(_ref) {
     text = _ref.text,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-element-lozenge' : _ref$testId;
+  var ui = (0, _flexibleUiContext.useFlexibleUiOptionContext)();
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isBold = _useState2[0],
@@ -57,7 +59,8 @@ var Lozenge = function Lozenge(_ref) {
     action: action,
     appearance: appearance,
     testId: testId,
-    text: text
+    text: text,
+    zIndex: ui === null || ui === void 0 ? void 0 : ui.zIndex
   }) : (0, _react2.jsx)(_lozenge.default, {
     appearance: appearance,
     isBold: isBold,

package/dist/cjs/view/FlexibleCard/index.js

@@ -85,16 +85,19 @@ var FlexibleCard = function FlexibleCard(_ref) {
   }, [onError, onResolve, status, title, url]);
   return /*#__PURE__*/_react.default.createElement(_flexibleUiContext.FlexibleUiAnalyticsContext.Provider, {
     value: analytics
+  }, /*#__PURE__*/_react.default.createElement(_flexibleUiContext.FlexibleUiOptionContext.Provider, {
+    value: ui
   }, /*#__PURE__*/_react.default.createElement(_flexibleUiContext.FlexibleUiContext.Provider, {
     value: context
   }, /*#__PURE__*/_react.default.createElement(_container.default, (0, _extends2.default)({
     testId: testId
   }, ui, {
-    showHoverPreview: showHoverPreview,
     onClick: onClick,
     retry: retry,
+    showHoverPreview: showHoverPreview,
+    showServerActions: showServerActions,
     status: status
-  }), children)));
+  }), children))));
 };
 var _default = FlexibleCard;
 exports.default = _default;

package/dist/cjs/view/HoverCard/components/HoverCardComponent.js

@@ -31,7 +31,9 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     _ref$closeOnChildClic = _ref.closeOnChildClick,
     closeOnChildClick = _ref$closeOnChildClic === void 0 ? false : _ref$closeOnChildClic,
     _ref$hidePreviewButto = _ref.hidePreviewButton,
-    hidePreviewButton = _ref$hidePreviewButto === void 0 ? false : _ref$hidePreviewButto;
+    hidePreviewButton = _ref$hidePreviewButto === void 0 ? false : _ref$hidePreviewButto,
+    _ref$showServerAction = _ref.showServerActions,
+    showServerActions = _ref$showServerAction === void 0 ? false : _ref$showServerAction;
   var delay = 300;
   var _React$useState = _react2.default.useState(false),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -140,9 +142,10 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
       onActionClick: onActionClick,
       onResolve: update,
       renderers: renderers,
+      showServerActions: showServerActions,
       url: url
     });
-  }, [analytics, initHideCard, initShowCard, filteredActions, linkState, onActionClick, renderers, url]);
+  }, [analytics, initHideCard, initShowCard, filteredActions, linkState, onActionClick, renderers, showServerActions, url]);
   var trigger = (0, _react2.useCallback)(function (triggerProps) {
     return (0, _react.jsx)("span", {
       ref: parentSpan
@@ -163,7 +166,7 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     autoFocus: false,
     content: content,
     trigger: trigger,
-    zIndex: 511 // Temporary fix for Confluence inline comment on editor mod has z-index of 500, Jira issue view has z-index of 510
+    zIndex: _styled.HOVER_CARD_Z_INDEX
   });
 };
 exports.HoverCardComponent = HoverCardComponent;

package/dist/cjs/view/HoverCard/components/HoverCardContent.js

@@ -100,7 +100,8 @@ var HoverCardContent = function HoverCardContent(_ref) {
     renderers = _ref.renderers,
     url = _ref.url,
     onMouseEnter = _ref.onMouseEnter,
-    onMouseLeave = _ref.onMouseLeave;
+    onMouseLeave = _ref.onMouseLeave,
+    showServerActions = _ref.showServerActions;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var extensionKey = (0, _react2.useMemo)(function () {
@@ -141,6 +142,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
     onClick: onClick,
     onResolve: onResolve,
     renderers: renderers,
+    showServerActions: showServerActions,
     ui: _styled.flexibleUiOptions,
     url: url,
     children: {}

package/dist/cjs/view/HoverCard/styled.js

@@ -4,12 +4,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.titleBlockCss = exports.separatorCss = exports.getTransitionStyles = exports.flexibleUiOptions = exports.HoverCardContainer = exports.CARD_WIDTH_REM = exports.CARD_GAP_PX = void 0;
+exports.titleBlockCss = exports.separatorCss = exports.getTransitionStyles = exports.flexibleUiOptions = exports.HoverCardContainer = exports.HOVER_CARD_Z_INDEX = exports.CARD_WIDTH_REM = exports.CARD_GAP_PX = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _index = require("../../index");
 var _constants = require("../../constants");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+// Temporary fix for Confluence inline comment on editor mod has z-index of 500, Jira issue view has z-index of 510
+var HOVER_CARD_Z_INDEX = 511;
+exports.HOVER_CARD_Z_INDEX = HOVER_CARD_Z_INDEX;
 var flexibleUiOptions = {
   hideBackground: true,
   hideElevation: true,
@@ -17,7 +20,8 @@ var flexibleUiOptions = {
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   theme: _constants.SmartLinkTheme.Black,
   hidePadding: true,
-  hideHoverCardPreviewButton: false
+  hideHoverCardPreviewButton: false,
+  zIndex: HOVER_CARD_Z_INDEX + 1
 };
 exports.flexibleUiOptions = flexibleUiOptions;
 var CARD_WIDTH_REM = 24;

package/dist/cjs/view/InlineCard/ResolvedView/index.js

@@ -54,7 +54,9 @@ var InlineCardResolvedView = /*#__PURE__*/function (_React$Component) {
         titleTextColor = _this$props.titleTextColor,
         titlePrefix = _this$props.titlePrefix,
         _this$props$showHover = _this$props.showHoverPreview,
-        showHoverPreview = _this$props$showHover === void 0 ? false : _this$props$showHover;
+        showHoverPreview = _this$props$showHover === void 0 ? false : _this$props$showHover,
+        _this$props$showServe = _this$props.showServerActions,
+        showServerActions = _this$props$showServe === void 0 ? false : _this$props$showServe;
       var inlineCardResolvedView = /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
         testId: testId,
         link: link,
@@ -69,6 +71,7 @@ var InlineCardResolvedView = /*#__PURE__*/function (_React$Component) {
       if (showHoverPreview && link) {
         return /*#__PURE__*/_react.default.createElement(_index.HoverCard, {
           id: id,
+          showServerActions: showServerActions,
           url: link
         }, inlineCardResolvedView);
       }