@atlaskit/smart-card 26.59.1 → 26.61.0

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # @atlaskit/smart-card
 
+## 26.61.0
+
+### Minor Changes
+
+-   [#97142](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/97142)
+    [`a2a8c037302c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a2a8c037302c) -
+    EDM-9697 Fix embeds to use icon supplied by prioritiseIcon under FF
+
+### Patch Changes
+
+-   [#97654](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/97654)
+    [`98a9f3d7124f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/98a9f3d7124f) -
+    Hover preview redesign: Update action icon color
+-   [#97682](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/97682)
+    [`6c631fd32f18`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6c631fd32f18) -
+    AI summary: Update word-break behavior for the summary content
+-   Updated dependencies
+
+## 26.60.0
+
+### Minor Changes
+
+-   [#96008](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/96008)
+    [`a0eb959e967c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a0eb959e967c) -
+    [ux] Adds CollaboratorGroup to Trello Flex Block and Hover Previews
+
+### Patch Changes
+
+-   [#95271](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/95271)
+    [`d22ff5392d9d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d22ff5392d9d) -
+    [ux] removing 'overflow: hidden' to fix blurry embed links
+-   [#94424](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/94424)
+    [`236fe37d0c71`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/236fe37d0c71) -
+    ActionBlock: Add error message
+-   [#94724](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/94724)
+    [`2c06423cc1aa`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2c06423cc1aa) -
+    Permanently fixes incorrect cleanup of ref for intersection observer, no longer requires ff
+    platform.linking-platform.smart-card.fix-intersection-observer
+-   Updated dependencies
+
 ## 26.59.1
 
 ### Patch Changes

package/dist/cjs/extractors/common/icon/extractIcon.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.extractIcon = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _peopleGroup = _interopRequireDefault(require("@atlaskit/icon/glyph/people-group"));
 var _ = _interopRequireDefault(require("@atlaskit/icon-object/glyph/commit/16"));
 var _2 = _interopRequireDefault(require("@atlaskit/icon-object/glyph/pull-request/16"));
@@ -18,6 +19,7 @@ var _extractFileFormat = require("./extractFileFormat");
 var _extractIconFromDocument = require("./extractIconFromDocument");
 var _extractIconFromTask = require("./extractIconFromTask");
 var _extractTaskType = require("../lozenge/extractTaskType");
+var _prioritiseIcon = require("./prioritiseIcon");
 var extractIcon = exports.extractIcon = function extractIcon(jsonLd) {
   var priority = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'type';
   var type = jsonLd['@type'];
@@ -94,6 +96,22 @@ var extractIconByType = function extractIconByType(type, opts) {
     case 'atlassian:Task':
       return (0, _extractIconFromTask.extractIconFromTask)(opts);
     default:
-      return opts.provider && opts.provider.icon;
+      return (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.standardise-smart-link-icon-behaviour') ? extractDefaultIcon(opts) : opts.provider && opts.provider.icon;
   }
+};
+
+/**
+ * Choose which icon to show when the type is not recognized.
+ */
+var extractDefaultIcon = function extractDefaultIcon(opts) {
+  var _opts$provider;
+  var provider = opts.provider;
+  var providerId = provider === null || provider === void 0 ? void 0 : provider.id;
+  return (0, _prioritiseIcon.prioritiseIcon)({
+    providerId: providerId,
+    fileFormatIcon: undefined,
+    documentTypeIcon: undefined,
+    urlIcon: opts.icon,
+    providerIcon: (_opts$provider = opts.provider) === null || _opts$provider === void 0 ? void 0 : _opts$provider.icon
+  });
 };

package/dist/cjs/extractors/common/icon/index.js

@@ -27,7 +27,14 @@ Object.defineProperty(exports, "extractIconFromTask", {
     return _extractIconFromTask.extractIconFromTask;
   }
 });
+Object.defineProperty(exports, "prioritiseIcon", {
+  enumerable: true,
+  get: function get() {
+    return _prioritiseIcon.prioritiseIcon;
+  }
+});
 var _extractFileFormat = require("./extractFileFormat");
+var _prioritiseIcon = require("./prioritiseIcon");
 var _extractIcon = require("./extractIcon");
 var _extractIconFromDocument = require("./extractIconFromDocument");
 var _extractIconFromTask = require("./extractIconFromTask");

package/dist/cjs/extractors/embed/index.js

@@ -7,8 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.extractEmbedProps = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _linkExtractors = require("@atlaskit/link-extractors");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _extractIsTrusted = require("../common/meta/extractIsTrusted");
 var _extractIsSupportTheming = require("../common/meta/extractIsSupportTheming");
+var _icon = require("../common/icon");
 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 extractEmbedPreview = function extractEmbedPreview(jsonLd, platform, iframeUrlType) {
@@ -19,11 +21,34 @@ var extractEmbedPreview = function extractEmbedPreview(jsonLd, platform, iframeU
     });
   }
 };
+function generateContext(jsonLd) {
+  var provider = (0, _linkExtractors.extractProvider)(jsonLd);
+  if (!provider) {
+    return undefined;
+  }
+
+  // If no icon is supplied, return existing context
+  if (!jsonLd.icon) {
+    return provider;
+  }
+  var generator = jsonLd.generator;
+  var icon = (0, _icon.prioritiseIcon)({
+    providerId: generator && typeof generator !== 'string' && generator['@type'] !== 'Link' ? generator['@id'] : undefined,
+    fileFormatIcon: undefined,
+    documentTypeIcon: undefined,
+    urlIcon: (0, _linkExtractors.extractUrlFromIconJsonLd)(jsonLd.icon),
+    // We still attempt to follow the icon priority function even if no generator (and therefore provider icon) is defined
+    providerIcon: generator && typeof generator !== 'string' && generator['@type'] !== 'Link' && (0, _linkExtractors.extractProviderIcon)(generator.icon)
+  });
+  return _objectSpread(_objectSpread({}, provider), {}, {
+    icon: icon ? icon : provider.icon
+  });
+}
 var extractEmbedProps = exports.extractEmbedProps = function extractEmbedProps(jsonLd, meta, platform, iframeUrlType) {
   return {
     link: (0, _linkExtractors.extractLink)(jsonLd) || '',
     title: (0, _linkExtractors.extractTitle)(jsonLd),
-    context: (0, _linkExtractors.extractProvider)(jsonLd),
+    context: (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.standardise-smart-link-icon-behaviour') ? generateContext(jsonLd) : (0, _linkExtractors.extractProvider)(jsonLd),
     preview: extractEmbedPreview(jsonLd, platform, iframeUrlType),
     isTrusted: (0, _extractIsTrusted.extractIsTrusted)(meta),
     isSupportTheming: (0, _extractIsSupportTheming.extractIsSupportTheming)(meta)

package/dist/cjs/extractors/flexible/actions/extract-ai-summary-action.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.extractAISummaryAction = void 0;
 var _types = require("../../../view/Card/types");
 var _canShowAction = require("../../../utils/actions/can-show-action");
-var _getIsAiSummaryEnabled = require("../../../utils/get-is-ai-summary-enabled");
+var _aiSummary = require("../../../utils/ai-summary");
 var _linkExtractors = require("@atlaskit/link-extractors");
 var extractAISummaryAction = exports.extractAISummaryAction = function extractAISummaryAction(response, url, actionOptions, aiSummaryConfig) {
-  if (!(0, _canShowAction.canShowAction)(_types.CardAction.AISummaryAction, actionOptions) || !(0, _getIsAiSummaryEnabled.getIsAISummaryEnabled)(aiSummaryConfig === null || aiSummaryConfig === void 0 ? void 0 : aiSummaryConfig.isAdminHubAIEnabled, response) || !(aiSummaryConfig !== null && aiSummaryConfig !== void 0 && aiSummaryConfig.product) || !url) {
+  if (!(0, _canShowAction.canShowAction)(_types.CardAction.AISummaryAction, actionOptions) || !(0, _aiSummary.getIsAISummaryEnabled)(aiSummaryConfig === null || aiSummaryConfig === void 0 ? void 0 : aiSummaryConfig.isAdminHubAIEnabled, response) || !(aiSummaryConfig !== null && aiSummaryConfig !== void 0 && aiSummaryConfig.product) || !url) {
     return;
   }
   return {

package/dist/cjs/extractors/flexible/icon/extract-jsonld-data-icon.js

@@ -16,7 +16,7 @@ var _lozenge = require("../../common/lozenge");
 var _linkExtractors = require("@atlaskit/link-extractors");
 var _priority = require("../../common/icon/priority");
 var _constants2 = require("../../../constants");
-var _prioritiseIcon = require("../../common/icon/prioritiseIcon");
+var _icon = require("../../common/icon");
 var extractTask = function extractTask(data, label) {
   var _ref = (0, _lozenge.extractTaskType)(data) || {},
     id = _ref.id,
@@ -75,7 +75,7 @@ var extractJsonldDataIcon = function extractJsonldDataIcon(data) {
       var fileFormatIcon = (0, _extractFileFormatIcon.default)(fileFormat);
       var documentTypeIcon = (0, _extractDocumentTypeIcon.default)(type, label);
       if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.standardise-smart-link-icon-behaviour')) {
-        return (0, _prioritiseIcon.prioritiseIcon)({
+        return (0, _icon.prioritiseIcon)({
           providerId: provider,
           fileFormatIcon: fileFormatIcon,
           documentTypeIcon: documentTypeIcon,
@@ -130,7 +130,36 @@ var extractJsonldDataIcon = function extractJsonldDataIcon(data) {
         label: label || 'Repository'
       };
     default:
-      return providerIcon;
+      return (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.standardise-smart-link-icon-behaviour') ? extractDefaultIcon({
+        data: data,
+        type: type,
+        label: label,
+        provider: provider,
+        urlIcon: urlIcon,
+        providerIcon: providerIcon
+      }) : providerIcon;
   }
 };
-var _default = exports.default = extractJsonldDataIcon;
+var _default = exports.default = extractJsonldDataIcon;
+/**
+ * Choose which icon to show when the type is not recognized.
+ */
+var extractDefaultIcon = function extractDefaultIcon(_ref2) {
+  var data = _ref2.data,
+    type = _ref2.type,
+    label = _ref2.label,
+    provider = _ref2.provider,
+    urlIcon = _ref2.urlIcon,
+    providerIcon = _ref2.providerIcon;
+  var documentData = data;
+  var fileFormat = documentData === null || documentData === void 0 ? void 0 : documentData['schema:fileFormat'];
+  var fileFormatIcon = (0, _extractFileFormatIcon.default)(fileFormat);
+  var documentTypeIcon = (0, _extractDocumentTypeIcon.default)(type, label);
+  return (0, _icon.prioritiseIcon)({
+    providerId: provider,
+    fileFormatIcon: fileFormatIcon,
+    documentTypeIcon: documentTypeIcon,
+    urlIcon: urlIcon,
+    providerIcon: providerIcon
+  });
+};

package/dist/cjs/state/hooks/use-ai-summary/ai-summary-service/index.js

@@ -215,7 +215,8 @@ var AISummaryService = exports.AISummaryService = /*#__PURE__*/function () {
               } finally {
                 _iterator4.f();
               }
-            case 52:
+              return _context2.abrupt("return", this.state);
+            case 53:
             case "end":
               return _context2.stop();
           }

package/dist/cjs/utils/{get-is-ai-summary-enabled.js → ai-summary.js}

@@ -3,11 +3,31 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getIsAISummaryEnabled = void 0;
+exports.getIsAISummaryEnabled = exports.getAISummaryErrorMessage = void 0;
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _constants = require("../constants");
+var _messages = require("../messages");
 var getIsAISummaryEnabled = exports.getIsAISummaryEnabled = function getIsAISummaryEnabled() {
   var _response$meta;
   var isAdminHubAIEnabled = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   var response = arguments.length > 1 ? arguments[1] : undefined;
   return Boolean((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.hover-card-ai-summaries') && isAdminHubAIEnabled && (response === null || response === void 0 || (_response$meta = response.meta) === null || _response$meta === void 0 || (_response$meta = _response$meta.supportedFeature) === null || _response$meta === void 0 ? void 0 : _response$meta.includes('AISummary')));
+};
+var getAISummaryErrorMessage = exports.getAISummaryErrorMessage = function getAISummaryErrorMessage(error) {
+  switch (error) {
+    case 'ACCEPTABLE_USE_VIOLATIONS':
+      return {
+        message: _messages.messages.ai_summary_error_acceptable_use_violation,
+        url: _constants.CONTENT_URL_ACCEPTABLE_USE_POLICY
+      };
+    case 'HIPAA_CONTENT_DETECTED':
+      return {
+        message: _messages.messages.ai_summary_error_hipaa_content_detected
+      };
+    default:
+      return {
+        message: _messages.messages.ai_summary_error_generic,
+        url: _constants.CONTENT_URL_AI_TROUBLESHOOTING
+      };
+  }
 };

package/dist/cjs/utils/analytics/analytics.js

@@ -22,7 +22,7 @@ var ANALYTICS_CHANNEL = exports.ANALYTICS_CHANNEL = 'media';
 var context = exports.context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.59.1"
+  packageVersion: "26.61.0"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/cjs/view/BlockCard/views/flexible/utils/index.js

@@ -112,6 +112,14 @@ var getSimulatedBetterMetadata = exports.getSimulatedBetterMetadata = function g
           name: _constants.ElementName.CommentCount
         }]
       };
+    case 'trello-object-provider':
+      return {
+        titleMetadata: defaultTitleMetadata,
+        topMetadata: [{
+          name: _constants.ElementName.CollaboratorGroup
+        }].concat(baseTopMetadata),
+        bottomMetadata: defaultBottomMetadata
+      };
     default:
       return {
         titleMetadata: defaultTitleMetadata,

package/dist/cjs/view/CardWithUrl/component-lazy/LazyIntersectionObserverCard.js

@@ -5,10 +5,9 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LazyIntersectionObserverCard = void 0;
+exports.LazyIntersectionObserverCard = LazyIntersectionObserverCard;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _state = require("../../../state");
 var _component = require("../component");
 var _LoadingCardLink = require("./LoadingCardLink");
@@ -20,7 +19,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 // being compared to. Since the default container is the `document`, we set this
 // up to check once a Smart Link is within `X` px from the bottom of the viewport.
 var ROOT_MARGIN_VERTICAL = '360px';
-function LazyIntersectionObserverCardLegacy(props) {
+function LazyIntersectionObserverCard(props) {
+  var ref = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isIntersecting = _useState2[0],
@@ -43,49 +43,6 @@ function LazyIntersectionObserverCardLegacy(props) {
       prefetch();
     }
   }, [prefetch, id]);
-  var onRef = (0, _react.useCallback)(function (element) {
-    if (!element) {
-      return;
-    }
-    var intersectionObserver = new IntersectionObserver(onIntersection, {
-      rootMargin: "".concat(ROOT_MARGIN_VERTICAL, " 0px ").concat(ROOT_MARGIN_VERTICAL, " 0px")
-    });
-    intersectionObserver.observe(element);
-    return function () {
-      return intersectionObserver.disconnect();
-    };
-  }, [onIntersection]);
-  var content = isIntersecting ? /*#__PURE__*/_react.default.createElement(_component.CardWithUrlContent, props) : /*#__PURE__*/_react.default.createElement(ComponentObserver, {
-    ref: onRef
-  }, /*#__PURE__*/_react.default.createElement(_LoadingCardLink.LoadingCardLink, props));
-  return /*#__PURE__*/_react.default.createElement(Component, {
-    className: "loader-wrapper"
-  }, content);
-}
-function LazyIntersectionObserverCardNext(props) {
-  var ref = (0, _react.useRef)(null);
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    isIntersecting = _useState4[0],
-    setIsIntersecting = _useState4[1];
-  var appearance = props.appearance,
-    url = props.url,
-    id = props.id;
-  var prefetch = (0, _state.usePrefetch)(url);
-  var Component = appearance === 'inline' ? 'span' : 'div';
-  var ComponentObserver = Component;
-  var onIntersection = (0, _react.useCallback)(function (entries, observer) {
-    var isVisible = entries.some(function (entry) {
-      return entry.isIntersecting;
-    });
-    if (isVisible) {
-      (0, _ufoExperiences.startUfoExperience)('smart-link-rendered', id);
-      setIsIntersecting(true);
-      observer.disconnect();
-    } else {
-      prefetch();
-    }
-  }, [prefetch, id]);
   (0, _react.useEffect)(function () {
     if (!ref.current) {
       return;
@@ -104,8 +61,4 @@ function LazyIntersectionObserverCardNext(props) {
   return /*#__PURE__*/_react.default.createElement(Component, {
     className: "loader-wrapper"
   }, content);
-}
-var LazyIntersectionObserverCard = exports.LazyIntersectionObserverCard = function LazyIntersectionObserverCard(props) {
-  var Component = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.fix-intersection-observer') ? LazyIntersectionObserverCardNext : LazyIntersectionObserverCardLegacy;
-  return /*#__PURE__*/_react.default.createElement(Component, props);
-};
+}

package/dist/cjs/view/EmbedCard/components/ExpandedFrame.js

@@ -36,6 +36,7 @@ var ExpandedFrame = exports.ExpandedFrame = function ExpandedFrame(_ref) {
     return (0, _handlers.handleClickCommon)(event, onClick);
   };
   var handleMouseDown = (0, _useLinkClicked.useMouseDownEvent)();
+  var isFixEmbedCardBlurEnabled = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.fix-embed-card-blurring') ? true : false;
   var renderHeaderOld = function renderHeaderOld() {
     return /*#__PURE__*/_react.default.createElement(_styled.Header, {
       className: "embed-header",
@@ -71,6 +72,7 @@ var ExpandedFrame = exports.ExpandedFrame = function ExpandedFrame(_ref) {
     return /*#__PURE__*/_react.default.createElement(_styled.Content, {
       "data-testid": "embed-content-wrapper",
       allowScrollBar: allowScrollBar,
+      removeOverflow: isFixEmbedCardBlurEnabled,
       isInteractive: isInteractive(),
       frameStyle: frameStyle
     }, children);

package/dist/cjs/view/EmbedCard/components/styled.js

@@ -133,7 +133,11 @@ var TooltipWrapper = exports.TooltipWrapper = _styled.default.div({
 // manage scrolling behaviour.
 // eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression
 var Content = exports.Content = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  border: 1px solid ", ";\n  background-color: ", ";\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"])), contentBorderRadius, "var(--ds-border, ".concat(_colors.N40, ")"), "var(--ds-surface-raised, white)", function (_ref11) {
-  var allowScrollBar = _ref11.allowScrollBar;
+  var allowScrollBar = _ref11.allowScrollBar,
+    removeOverflow = _ref11.removeOverflow;
+  if (removeOverflow) {
+    return '';
+  }
   return allowScrollBar ? 'overflow: auto;' : 'overflow: hidden;';
 }, function (_ref12) {
   var frameStyle = _ref12.frameStyle;

package/dist/cjs/view/FlexibleCard/components/actions/action/action-icon/index.js

@@ -28,9 +28,6 @@ var getIconStyles = function getIconStyles(isDisabled) {
   });
 };
 var backgroundStyles = (0, _react2.css)({
-  backgroundColor: "var(--ds-background-brand-subtlest, #E9F2FF)",
-  borderRadius: "var(--ds-border-radius-050, 2px)",
-  color: "var(--ds-icon-brand, #0C66E4)",
   display: 'inline-block',
   lineHeight: 0,
   padding: "var(--ds-space-025, 2px)",

package/dist/cjs/view/FlexibleCard/components/actions/ai-summary-action/ai-summary-action-component.js

@@ -10,16 +10,19 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _reactMagneticDi = require("react-magnetic-di");
 var _messages = require("../../../../../messages");
 var _action = _interopRequireDefault(require("../action"));
 var _aiIcon = _interopRequireDefault(require("../../../../common/ai-icon"));
 var _useAnalyticsEvents2 = require("../../../../../common/analytics/generated/use-analytics-events");
 var _useAiSummary = require("../../../../../state/hooks/use-ai-summary");
-var _excluded = ["onClick", "url", "ari", "product"];
+var _utils = require("./utils");
+var _excluded = ["onClick", "onError", "url", "ari", "product"];
 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; }
 var AISummaryActionComponent = exports.AISummaryActionComponent = function AISummaryActionComponent(_ref) {
   var onClickCallback = _ref.onClick,
+    onErrorCallback = _ref.onError,
     _ref$url = _ref.url,
     url = _ref$url === void 0 ? '' : _ref$url,
     _ref$ari = _ref.ari,
@@ -35,26 +38,31 @@ var AISummaryActionComponent = exports.AISummaryActionComponent = function AISum
     }),
     status = _useAISummary.state.status,
     summariseUrl = _useAISummary.summariseUrl;
+  var onCompleted = (0, _react.useCallback)(function (state) {
+    if ((state === null || state === void 0 ? void 0 : state.status) === 'error') {
+      onErrorCallback === null || onErrorCallback === void 0 || onErrorCallback((0, _utils.getErrorMessage)(state.error));
+    }
+  }, [onErrorCallback]);
   var handleActionClick = (0, _react.useCallback)(function () {
+    var _summariseUrl;
     fireEvent('ui.button.clicked.aiSummary', {});
     fireEvent('track.aiInteraction.initiated', {
       aiFeatureName: 'Smart Links Summary',
       proactiveAIGenerated: 0,
       userGeneratedAI: 1
     });
-    summariseUrl();
+    (_summariseUrl = summariseUrl()) === null || _summariseUrl === void 0 || _summariseUrl.then(onCompleted, onCompleted);
     onClickCallback === null || onClickCallback === void 0 || onClickCallback();
-  }, [fireEvent, onClickCallback, summariseUrl]);
-  if (status === 'ready' || status === 'error') {
-    return /*#__PURE__*/_react.default.createElement(_action.default, (0, _extends2.default)({
-      content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.ai_summary_action),
-      icon: /*#__PURE__*/_react.default.createElement(_aiIcon.default, {
-        label: "Summarise with AI"
-      }),
-      onClick: handleActionClick,
-      testId: "smart-action-ai-summary-action",
-      tooltipMessage: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.ai_summary_action_description)
-    }, props));
-  }
+  }, [fireEvent, onClickCallback, onCompleted, summariseUrl]);
+  return /*#__PURE__*/_react.default.createElement(_action.default, (0, _extends2.default)({
+    content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.ai_summary_action),
+    icon: /*#__PURE__*/_react.default.createElement(_aiIcon.default, {
+      label: "Summarise with AI"
+    }),
+    isLoading: status === 'loading',
+    onClick: handleActionClick,
+    testId: "smart-action-ai-summary-action",
+    tooltipMessage: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.ai_summary_action_description)
+  }, props));
   return null;
 };

package/dist/cjs/view/FlexibleCard/components/actions/ai-summary-action/utils.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getErrorMessage = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _aiSummary = require("../../../../../utils/ai-summary");
+var _aiEventErrorViewed = _interopRequireDefault(require("../../common/ai-summary/ai-event-error-viewed"));
+var _aiLearnMoreAnchor = _interopRequireDefault(require("../../common/ai-summary/ai-learn-more-anchor"));
+var getErrorMessage = exports.getErrorMessage = function getErrorMessage(error) {
+  var _getAISummaryErrorMes = (0, _aiSummary.getAISummaryErrorMessage)(error),
+    message = _getAISummaryErrorMes.message,
+    url = _getAISummaryErrorMes.url;
+  return {
+    appearance: 'error',
+    title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_aiEventErrorViewed.default, {
+      reason: error
+    }), /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, message, {
+      values: {
+        a: function a(chunks) {
+          return /*#__PURE__*/_react.default.createElement(_aiLearnMoreAnchor.default, {
+            href: url
+          }, chunks);
+        }
+      }
+    })))
+  };
+};

package/dist/cjs/view/FlexibleCard/components/actions/follow-action/goal-icon/index.js

@@ -19,7 +19,7 @@ var GoalGlyph = function GoalGlyph(props) {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M12.6667 8C12.6667 10.5773 10.5773 12.6667 8 12.6667C5.42267 12.6667 3.33333 10.5773 3.33333 8C3.33333 5.42267 5.42267 3.33333 8 3.33333C10.5773 3.33333 12.6667 5.42267 12.6667 8ZM14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8ZM9.33333 8C9.33333 8.73638 8.73638 9.33333 8 9.33333C7.26362 9.33333 6.66667 8.73638 6.66667 8C6.66667 7.26362 7.26362 6.66667 8 6.66667C8.73638 6.66667 9.33333 7.26362 9.33333 8ZM10.6667 8C10.6667 9.47276 9.47276 10.6667 8 10.6667C6.52724 10.6667 5.33333 9.47276 5.33333 8C5.33333 6.52724 6.52724 5.33333 8 5.33333C9.47276 5.33333 10.6667 6.52724 10.6667 8Z",
-    fill: "#0C66E4"
+    fill: "var(--ds-icon, #44546F)"
   }));
 };
 var GoalIcon = exports.GoalIcon = function GoalIcon(props) {

package/dist/cjs/view/FlexibleCard/components/actions/follow-action/projects-icon/index.js

@@ -19,7 +19,7 @@ var ProjectsGlyph = function ProjectsGlyph(props) {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M9.88573 4.00002C9.70892 4.00002 9.53935 4.07026 9.41433 4.19528L6.97282 6.63678L4.20525 6.94429C4.05479 6.96101 3.91451 7.02844 3.80746 7.13548L3.60959 7.33335L4.35367 8.07743C4.6791 8.40287 4.6791 8.93051 4.35367 9.25594L3.47152 10.1381C3.21117 10.3984 2.78906 10.3984 2.52871 10.1381C2.26836 9.87774 2.26836 9.45563 2.52871 9.19528L3.0573 8.66669L2.43108 8.04046C2.04055 7.64993 2.04055 7.01677 2.43108 6.62625L2.86465 6.19267C3.18578 5.87154 3.60664 5.66927 4.05801 5.61911L6.36073 5.36326L8.47152 3.25247C8.84659 2.8774 9.3553 2.66669 9.88573 2.66669H12.0001C12.7365 2.66669 13.3334 3.26364 13.3334 4.00002V6.1144C13.3334 6.64483 13.1227 7.15354 12.7477 7.52862L10.6369 9.6394L10.381 11.9421C10.3309 12.3935 10.1286 12.8143 9.80746 13.1355L9.37389 13.5691C8.98336 13.9596 8.3502 13.9596 7.95967 13.5691L7.33345 12.9428L6.80485 13.4714C6.5445 13.7318 6.12239 13.7318 5.86204 13.4714C5.60169 13.2111 5.60169 12.789 5.86204 12.5286L6.74419 11.6465C7.06963 11.321 7.59726 11.321 7.9227 11.6465L8.66678 12.3905L8.86466 12.1927C8.9717 12.0856 9.03912 11.9453 9.05584 11.7949L9.36335 9.02731L11.8049 6.58581C11.9299 6.46078 12.0001 6.29121 12.0001 6.1144V4.00002H9.88573ZM5.80486 10.1953C6.06521 10.4556 6.06521 10.8777 5.80486 11.1381L3.80486 13.1381C3.54451 13.3984 3.1224 13.3984 2.86205 13.1381C2.6017 12.8777 2.6017 12.4556 2.86205 12.1953L4.86205 10.1953C5.1224 9.93493 5.54451 9.93493 5.80486 10.1953ZM10.0001 6.66669C10.3683 6.66669 10.6668 6.36821 10.6668 6.00002C10.6668 5.63183 10.3683 5.33335 10.0001 5.33335C9.63193 5.33335 9.33346 5.63183 9.33346 6.00002C9.33346 6.36821 9.63193 6.66669 10.0001 6.66669Z",
-    fill: "#0C66E4"
+    fill: "var(--ds-icon, #44546F)"
   }));
 };
 var ProjectsIcon = exports.ProjectsIcon = function ProjectsIcon(props) {

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

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ActionFooter = void 0;
+var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
+var _primitives = require("@atlaskit/primitives");
+var _react = _interopRequireDefault(require("react"));
+var _motionWrapper = _interopRequireDefault(require("../../../common/motion-wrapper"));
+var containerStyles = (0, _primitives.xcss)({
+  all: 'unset',
+  borderRadius: 'border.radius',
+  margin: 'space.100',
+  lineHeight: '20px',
+  padding: 'space.050',
+  paddingInline: 'space.100',
+  width: '100%',
+  ':empty': {
+    display: 'none'
+  }
+});
+var errorStyles = (0, _primitives.xcss)({
+  backgroundColor: 'color.background.danger'
+});
+var titleStyles = (0, _primitives.xcss)({
+  color: 'color.text.subtle',
+  fontSize: '12px',
+  fontStyle: 'normal',
+  fontWeight: '400',
+  lineHeight: '16px'
+});
+var getIcon = function getIcon(appearance) {
+  switch (appearance) {
+    case 'error':
+      return /*#__PURE__*/_react.default.createElement(_error.default, {
+        primaryColor: "var(--ds-icon-danger, #C9372C)",
+        label: "Error",
+        size: "small",
+        testId: "action-error-icon"
+      });
+    default:
+      return null;
+  }
+};
+var ActionFooter = exports.ActionFooter = function ActionFooter(_ref) {
+  var message = _ref.message,
+    testId = _ref.testId;
+  if (!message) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    testId: "".concat(testId, "-footer"),
+    xcss: [containerStyles, message.appearance === 'error' && errorStyles]
+  }, /*#__PURE__*/_react.default.createElement(_motionWrapper.default, {
+    isFadeIn: true,
+    show: true,
+    showTransition: true
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+    alignBlock: "start",
+    grow: "fill",
+    space: "space.025"
+  }, message.icon || getIcon(message.appearance), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: titleStyles
+  }, message.title))));
+};