@atlaskit/smart-card 27.4.2 → 27.4.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/smart-card
 
+## 27.4.3
+
+### Patch Changes
+
+- [#102927](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/102927)
+  [`f4ea3612f795`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f4ea3612f795) -
+  created errored view for related-links-modal component in smart cards
+- [#104485](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/104485)
+  [`7d88a35c15dd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7d88a35c15dd) -
+  Add a custom hook to make call to AGS to get incoming outgoing aris using
+  content-referenced-entity relationship
+
 ## 27.4.2
 
 ### Patch Changes

package/dist/cjs/messages.js

@@ -730,5 +730,15 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     id: 'fabric.linking.related_links_includes_links_to',
     defaultMessage: 'Includes Links To',
     description: 'Informs the user of the resources the url links to'
+  },
+  related_links_modal_error_header: {
+    id: 'fabric.linking.related_links_modal_error_header',
+    defaultMessage: 'Something went wrong',
+    description: 'Title for related links error'
+  },
+  related_links_modal_error_message: {
+    id: 'fabric.linking.related_links_modal_error_message',
+    defaultMessage: 'We ran into an issue trying to load recent links. Check your connection or refresh to try again.',
+    description: 'Informs the user that there was a problem loading related links'
   }
 });

package/dist/cjs/state/hooks/use-incoming-outgoing-links/index.js

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIncomingOutgoingAri = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = require("react");
+var _linkingCommon = require("@atlaskit/linking-common");
+var _query = require("./query");
+/**
+ * @param baseUriWithNoTrailingSlash base url which will then be appended with /gateway/api/graphql to make requests to AGG
+ */
+var useIncomingOutgoingAri = exports.useIncomingOutgoingAri = function useIncomingOutgoingAri() {
+  var baseUriWithNoTrailingSlash = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  var aggRequestCall = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(body, headers) {
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            return _context.abrupt("return", (0, _linkingCommon.request)('post', baseUriWithNoTrailingSlash + '/gateway/api/graphql', body, headers, [200]));
+          case 1:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x, _x2) {
+      return _ref.apply(this, arguments);
+    };
+  }(), [baseUriWithNoTrailingSlash]);
+  var getIncomingOutgoingAris = (0, _react.useCallback)(
+  /*#__PURE__*/
+  /**
+   * Returning aris linking to (outgoing) and from (incoming) a given ari from AGS using
+   * https://developer.atlassian.com/cloud/ari-graph-store/relationships/content-referenced-entity/#query
+   * @param ari the ari for which the incoming outgoing aris are to be retrieved
+   * @param firstIncoming The maximum count of incoming relationships to fetch. Must not exceed 1000. This max limit is handled by AGG itself. Default is 50 (ORS batch max limit)
+   * @param firstOutgoing The maximum count of outgoing relationships to fetch. Must not exceed 1000. This max limit is handled by AGG itself. Default is 50 (ORS batch max limit)
+   *
+   */
+  function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(ari) {
+      var _response$data$graphS, _response$data, _response$data$graphS2, _response$data2;
+      var firstIncoming,
+        firstOutgoing,
+        response,
+        incomingAris,
+        outgoingAris,
+        _args2 = arguments;
+      return _regenerator.default.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            firstIncoming = _args2.length > 1 && _args2[1] !== undefined ? _args2[1] : 50;
+            firstOutgoing = _args2.length > 2 && _args2[2] !== undefined ? _args2[2] : 50;
+            _context2.next = 4;
+            return aggRequestCall({
+              variables: {
+                ids: [ari],
+                firstIncoming: firstIncoming,
+                firstOutgoing: firstOutgoing
+              },
+              query: _query.queryIncomingOutgoingLinks
+            });
+          case 4:
+            response = _context2.sent;
+            incomingAris = (_response$data$graphS = response === null || response === void 0 || (_response$data = response.data) === null || _response$data === void 0 || (_response$data = _response$data.graphStore) === null || _response$data === void 0 || (_response$data = _response$data.incoming) === null || _response$data === void 0 || (_response$data = _response$data.nodes) === null || _response$data === void 0 || (_response$data = _response$data.map(function (node) {
+              var _node$from;
+              return node === null || node === void 0 || (_node$from = node.from) === null || _node$from === void 0 ? void 0 : _node$from.id;
+            })) === null || _response$data === void 0 ? void 0 : _response$data.filter(function (id) {
+              return !!id;
+            })) !== null && _response$data$graphS !== void 0 ? _response$data$graphS : [];
+            outgoingAris = (_response$data$graphS2 = response === null || response === void 0 || (_response$data2 = response.data) === null || _response$data2 === void 0 || (_response$data2 = _response$data2.graphStore) === null || _response$data2 === void 0 || (_response$data2 = _response$data2.outgoing) === null || _response$data2 === void 0 || (_response$data2 = _response$data2.nodes) === null || _response$data2 === void 0 || (_response$data2 = _response$data2.map(function (node) {
+              var _node$to;
+              return node === null || node === void 0 || (_node$to = node.to) === null || _node$to === void 0 ? void 0 : _node$to.id;
+            })) === null || _response$data2 === void 0 ? void 0 : _response$data2.filter(function (id) {
+              return !!id;
+            })) !== null && _response$data$graphS2 !== void 0 ? _response$data$graphS2 : [];
+            return _context2.abrupt("return", {
+              incomingAris: incomingAris,
+              outgoingAris: outgoingAris
+            });
+          case 8:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function (_x3) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [aggRequestCall]);
+  return (0, _react.useMemo)(function () {
+    return {
+      getIncomingOutgoingAris: getIncomingOutgoingAris
+    };
+  }, [getIncomingOutgoingAris]);
+};

package/dist/cjs/state/hooks/use-incoming-outgoing-links/query.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.queryIncomingOutgoingLinks = void 0;
+/**
+ * AGG query to retrieve incoming/outgoing links from AGS
+ * https://developer.atlassian.com/cloud/ari-graph-store/relationships/content-referenced-entity/#batch-query
+ */
+var queryIncomingOutgoingLinks = exports.queryIncomingOutgoingLinks = "\n  query SmartCard_ContentReferencedEntityBatchQuery_V1($ids: [ID!]!, $firstIncoming: Int = 50, $firstOutgoing: Int = 50) {\n    graphStore @optIn(to: \"GraphStore\") {\n      incoming: contentReferencedEntityInverseBatch(ids: $ids, first: $firstIncoming) @optIn(to: \"GraphStoreContentReferencedEntity\") {\n        nodes {\n          from {\n            id\n          }\n        }\n      }\n      outgoing: contentReferencedEntityBatch(ids: $ids, first: $firstOutgoing) @optIn(to: \"GraphStoreContentReferencedEntity\") {\n        nodes {\n          to {\n            id\n          }\n        }\n      }\n    }\n  }";

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: "27.4.2"
+  packageVersion: "27.4.3"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -17,7 +17,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId"],
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "27.4.2",
+  packageVersion: "27.4.3",
   componentName: 'linkUrl'
 };
 var Link = (0, _click.withLinkClickedEvent)('a');

package/dist/cjs/view/RelatedLinksModal/components/EmptyState.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmptyState = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _primitives = require("@atlaskit/primitives");
+var emptyStateStyles = (0, _primitives.xcss)({
+  alignItems: "center",
+  display: 'flex',
+  flexDirection: 'column',
+  gap: "space.100",
+  height: '100%',
+  justifyContent: 'center',
+  marginLeft: 'space.300',
+  marginRight: 'space.300',
+  textAlign: 'center'
+});
+var descriptionStyles = (0, _primitives.xcss)({
+  marginTop: "var(--ds-space-0, 0px)",
+  marginBottom: "var(--ds-space-300, 24px)",
+  color: 'color.text'
+});
+var EmptyState = exports.EmptyState = function EmptyState(_ref) {
+  var testId = _ref.testId,
+    header = _ref.header,
+    description = _ref.description,
+    renderImage = _ref.renderImage;
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: emptyStateStyles,
+    testId: testId
+  }, renderImage === null || renderImage === void 0 ? void 0 : renderImage(), /*#__PURE__*/_react.default.createElement(_heading.default, {
+    size: "small"
+  }, header), description && /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    as: "p",
+    xcss: descriptionStyles
+  }, description));
+};

package/dist/cjs/view/RelatedLinksModal/views/errored/error-svg/index.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ErrorSVG = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = require("@emotion/react");
+/** @jsx jsx */
+
+var errorStyles = (0, _react.css)({
+  width: '80px',
+  margin: "0 auto ".concat("var(--ds-space-300, 24px)"),
+  display: 'block'
+});
+var ErrorSVG = exports.ErrorSVG = function ErrorSVG(props) {
+  var id = 'related-links-error-svg';
+  return (0, _react.jsx)("svg", (0, _extends2.default)({
+    "data-testid": id,
+    viewBox: "0 0 164 212",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    css: errorStyles
+  }, props), (0, _react.jsx)("path", {
+    d: "m95.43 74.16 66.44 115.08c5.84 10.12-1.46 22.76-13.14 22.76H15.85c-11.68 0-18.98-12.65-13.14-22.76L69.15 74.16c5.84-10.12 20.44-10.12 26.28 0Zm-7.56 83.55 2.88-44.35c.34-5.29-3.86-9.78-9.16-9.78-5.31 0-9.51 4.48-9.16 9.78l2.88 44.35a6.3 6.3 0 0 0 6.28 5.89c3.31 0 6.06-2.58 6.28-5.89Zm-15.84 23.54c0 5.66 4.76 10.1 10.39 9.58 4.85-.45 8.73-4.5 8.83-9.37.11-5.45-4.31-9.94-9.73-9.94-5.23-.01-9.49 4.37-9.49 9.73Z",
+    fill: "url(#".concat(id, ")")
+  }), (0, _react.jsx)("path", {
+    opacity: ".6",
+    d: "M93.35 27.17 85.94.45c-.17-.62-1.07-.58-1.19.05l-4.66 25.1-5.8-1.08a.612.612 0 0 0-.7.76L81 52c.17.62 1.07.58 1.19-.05l4.66-25.1 5.8 1.08c.45.08.82-.33.7-.76ZM66.77 41.81 55.9 33.26c-.22-.18-.53.07-.41.33l5.53 11.43-2.66 1.29c-.18.09-.2.33-.05.45l10.87 8.55c.22.18.53-.07.41-.33l-5.53-11.43 2.66-1.29c.17-.08.2-.33.05-.45Z",
+    fill: "#C1C7D0"
+  }), (0, _react.jsx)("path", {
+    opacity: ".6",
+    d: "M102.78 56.75a.993.993 0 0 1-.92-1.38c-.24-.77-2.29-2.85-3.54-4.11-2.97-3.01-4.93-5-3.84-6.49 1.09-1.48 3.58-.22 7.35 1.7 1.32.67 3.35 1.7 4.45 2.03-.64-.95-2.24-2.58-3.28-3.63-2.97-3.01-4.93-5-3.84-6.49 1.08-1.48 3.58-.22 7.34 1.7 1.32.67 3.34 1.7 4.45 2.03-.64-.95-2.24-2.57-3.28-3.62-2.97-3.01-4.93-5-3.84-6.49 1.08-1.48 3.57-.22 7.34 1.7 1.58.8 4.18 2.13 4.98 2.13a1.005 1.005 0 0 1 1.46 1.36c-1.09 1.48-3.57.22-7.34-1.7-1.32-.67-3.34-1.7-4.44-2.03.64.95 2.24 2.57 3.28 3.62 2.97 3.01 4.93 5 3.84 6.49-1.08 1.48-3.57.22-7.34-1.7-1.32-.67-3.35-1.7-4.45-2.03.64.95 2.24 2.57 3.28 3.63 2.97 3.01 4.93 5 3.84 6.49-1.09 1.48-3.58.22-7.35-1.7-1.32-.67-3.35-1.71-4.45-2.03.64.95 2.24 2.58 3.28 3.63 2.97 3.01 4.93 5 3.84 6.49-.21.26-.51.4-.82.4Zm5.56 14.32c-.35 0-.69-.19-.88-.52-1.04-1.88-2.22-4.02-.91-5.21 1.31-1.2 3.34.18 5.49 1.63.87.59 2.26 1.53 2.93 1.71-.12-.68-.93-2.15-1.45-3.07-1.26-2.27-2.45-4.41-1.14-5.61 1.31-1.2 3.34.18 5.49 1.63.96.65 2.54 1.72 3.1 1.74a1 1 0 0 1 1.27 1.54c-1.31 1.2-3.34-.17-5.49-1.63-.87-.59-2.26-1.53-2.93-1.71.12.68.93 2.15 1.45 3.07 1.26 2.27 2.45 4.41 1.14 5.61-1.31 1.2-3.34-.18-5.49-1.63-.87-.59-2.26-1.53-2.93-1.71.12.68.93 2.14 1.22 2.67.27.48.09 1.09-.39 1.36-.15.09-.32.13-.48.13Zm-54.32-2.89c-.22 0-.44-.04-.67-.14-1.64-.69-1.24-3.11-.81-5.67.17-1.04.45-2.7.33-3.38-.57.39-1.56 1.75-2.18 2.6-1.53 2.09-2.99 4.07-4.62 3.38a.991.991 0 0 1-.53-1.31c.2-.48.73-.72 1.21-.57.52-.21 1.65-1.75 2.34-2.68 1.53-2.09 2.98-4.08 4.62-3.38 1.64.69 1.24 3.11.81 5.67-.17 1.04-.45 2.7-.33 3.38.57-.39 1.56-1.75 2.18-2.6 1.53-2.09 2.98-4.08 4.62-3.38 1.63.69 1.24 3.09.89 5.21-.09.54-.6.91-1.15.83-.54-.09-.92-.6-.83-1.15.1-.59.37-2.24.26-2.92-.57.39-1.56 1.75-2.18 2.6-1.33 1.79-2.59 3.51-3.96 3.51Z",
+    fill: "#B3BAC5"
+  }), (0, _react.jsx)("defs", null, (0, _react.jsx)("linearGradient", {
+    id: id,
+    x1: "26.169",
+    y1: "228.621",
+    x2: "138.408",
+    y2: "116.382",
+    gradientUnits: "userSpaceOnUse"
+  }, (0, _react.jsx)("stop", {
+    stopColor: "#C1C7D0"
+  }), (0, _react.jsx)("stop", {
+    offset: ".297",
+    stopColor: "#C6CBD4",
+    stopOpacity: ".881"
+  }), (0, _react.jsx)("stop", {
+    offset: ".63",
+    stopColor: "#D3D7DE",
+    stopOpacity: ".748"
+  }), (0, _react.jsx)("stop", {
+    offset: ".98",
+    stopColor: "#E9EBEF",
+    stopOpacity: ".608"
+  }), (0, _react.jsx)("stop", {
+    offset: "1",
+    stopColor: "#EBECF0",
+    stopOpacity: ".6"
+  }))));
+};

package/dist/cjs/view/RelatedLinksModal/views/errored/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RelatedLinksErroredView = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _messages = require("../../../../messages");
+var _errorSvg = require("./error-svg");
+var _EmptyState = require("../../components/EmptyState");
+var RelatedLinksErroredView = exports.RelatedLinksErroredView = function RelatedLinksErroredView() {
+  var intl = (0, _reactIntlNext.useIntl)();
+  return /*#__PURE__*/_react.default.createElement(_EmptyState.EmptyState, {
+    renderImage: function renderImage() {
+      return /*#__PURE__*/_react.default.createElement(_errorSvg.ErrorSVG, null);
+    },
+    header: intl.formatMessage(_messages.messages.related_links_modal_error_header),
+    description: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.related_links_modal_error_message)
+  });
+};

package/dist/es2019/messages.js

@@ -724,5 +724,15 @@ export const messages = defineMessages({
     id: 'fabric.linking.related_links_includes_links_to',
     defaultMessage: 'Includes Links To',
     description: 'Informs the user of the resources the url links to'
+  },
+  related_links_modal_error_header: {
+    id: 'fabric.linking.related_links_modal_error_header',
+    defaultMessage: 'Something went wrong',
+    description: 'Title for related links error'
+  },
+  related_links_modal_error_message: {
+    id: 'fabric.linking.related_links_modal_error_message',
+    defaultMessage: 'We ran into an issue trying to load recent links. Check your connection or refresh to try again.',
+    description: 'Informs the user that there was a problem loading related links'
   }
 });

package/dist/es2019/state/hooks/use-incoming-outgoing-links/index.js

@@ -0,0 +1,44 @@
+import { useCallback, useMemo } from 'react';
+import { request } from '@atlaskit/linking-common';
+import { queryIncomingOutgoingLinks as queryIncomingOutgoingAris } from './query';
+/**
+ * @param baseUriWithNoTrailingSlash base url which will then be appended with /gateway/api/graphql to make requests to AGG
+ */
+export const useIncomingOutgoingAri = (baseUriWithNoTrailingSlash = '') => {
+  const aggRequestCall = useCallback(async (body, headers) => request('post', baseUriWithNoTrailingSlash + '/gateway/api/graphql', body, headers, [200]), [baseUriWithNoTrailingSlash]);
+  const getIncomingOutgoingAris = useCallback(
+  /**
+   * Returning aris linking to (outgoing) and from (incoming) a given ari from AGS using
+   * https://developer.atlassian.com/cloud/ari-graph-store/relationships/content-referenced-entity/#query
+   * @param ari the ari for which the incoming outgoing aris are to be retrieved
+   * @param firstIncoming The maximum count of incoming relationships to fetch. Must not exceed 1000. This max limit is handled by AGG itself. Default is 50 (ORS batch max limit)
+   * @param firstOutgoing The maximum count of outgoing relationships to fetch. Must not exceed 1000. This max limit is handled by AGG itself. Default is 50 (ORS batch max limit)
+   *
+   */
+  async (ari, firstIncoming = 50, firstOutgoing = 50) => {
+    var _response$data$graphS, _response$data, _response$data$graphS2, _response$data$graphS3, _response$data$graphS4, _response$data$graphS5, _response$data$graphS6, _response$data2, _response$data2$graph, _response$data2$graph2, _response$data2$graph3, _response$data2$graph4;
+    const response = await aggRequestCall({
+      variables: {
+        ids: [ari],
+        firstIncoming,
+        firstOutgoing
+      },
+      query: queryIncomingOutgoingAris
+    });
+    const incomingAris = (_response$data$graphS = response === null || response === void 0 ? void 0 : (_response$data = response.data) === null || _response$data === void 0 ? void 0 : (_response$data$graphS2 = _response$data.graphStore) === null || _response$data$graphS2 === void 0 ? void 0 : (_response$data$graphS3 = _response$data$graphS2.incoming) === null || _response$data$graphS3 === void 0 ? void 0 : (_response$data$graphS4 = _response$data$graphS3.nodes) === null || _response$data$graphS4 === void 0 ? void 0 : (_response$data$graphS5 = _response$data$graphS4.map(node => {
+      var _node$from;
+      return node === null || node === void 0 ? void 0 : (_node$from = node.from) === null || _node$from === void 0 ? void 0 : _node$from.id;
+    })) === null || _response$data$graphS5 === void 0 ? void 0 : _response$data$graphS5.filter(id => !!id)) !== null && _response$data$graphS !== void 0 ? _response$data$graphS : [];
+    const outgoingAris = (_response$data$graphS6 = response === null || response === void 0 ? void 0 : (_response$data2 = response.data) === null || _response$data2 === void 0 ? void 0 : (_response$data2$graph = _response$data2.graphStore) === null || _response$data2$graph === void 0 ? void 0 : (_response$data2$graph2 = _response$data2$graph.outgoing) === null || _response$data2$graph2 === void 0 ? void 0 : (_response$data2$graph3 = _response$data2$graph2.nodes) === null || _response$data2$graph3 === void 0 ? void 0 : (_response$data2$graph4 = _response$data2$graph3.map(node => {
+      var _node$to;
+      return node === null || node === void 0 ? void 0 : (_node$to = node.to) === null || _node$to === void 0 ? void 0 : _node$to.id;
+    })) === null || _response$data2$graph4 === void 0 ? void 0 : _response$data2$graph4.filter(id => !!id)) !== null && _response$data$graphS6 !== void 0 ? _response$data$graphS6 : [];
+    return {
+      incomingAris,
+      outgoingAris
+    };
+  }, [aggRequestCall]);
+  return useMemo(() => ({
+    getIncomingOutgoingAris
+  }), [getIncomingOutgoingAris]);
+};

package/dist/es2019/state/hooks/use-incoming-outgoing-links/query.js

@@ -0,0 +1,23 @@
+/**
+ * AGG query to retrieve incoming/outgoing links from AGS
+ * https://developer.atlassian.com/cloud/ari-graph-store/relationships/content-referenced-entity/#batch-query
+ */
+export const queryIncomingOutgoingLinks = `
+  query SmartCard_ContentReferencedEntityBatchQuery_V1($ids: [ID!]!, $firstIncoming: Int = 50, $firstOutgoing: Int = 50) {
+    graphStore @optIn(to: "GraphStore") {
+      incoming: contentReferencedEntityInverseBatch(ids: $ids, first: $firstIncoming) @optIn(to: "GraphStoreContentReferencedEntity") {
+        nodes {
+          from {
+            id
+          }
+        }
+      }
+      outgoing: contentReferencedEntityBatch(ids: $ids, first: $firstOutgoing) @optIn(to: "GraphStoreContentReferencedEntity") {
+        nodes {
+          to {
+            id
+          }
+        }
+      }
+    }
+  }`;

package/dist/es2019/utils/analytics/analytics.js

@@ -4,7 +4,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "27.4.2"
+  packageVersion: "27.4.3"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/es2019/view/LinkUrl/index.js

@@ -7,7 +7,7 @@ import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-m
 import LinkWarningModal from './LinkWarningModal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "27.4.2",
+  packageVersion: "27.4.3",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

package/dist/es2019/view/RelatedLinksModal/components/EmptyState.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import Heading from '@atlaskit/heading';
+import { Box, xcss } from '@atlaskit/primitives';
+const emptyStateStyles = xcss({
+  alignItems: "center",
+  display: 'flex',
+  flexDirection: 'column',
+  gap: "space.100",
+  height: '100%',
+  justifyContent: 'center',
+  marginLeft: 'space.300',
+  marginRight: 'space.300',
+  textAlign: 'center'
+});
+const descriptionStyles = xcss({
+  marginTop: "var(--ds-space-0, 0px)",
+  marginBottom: "var(--ds-space-300, 24px)",
+  color: 'color.text'
+});
+export const EmptyState = ({
+  testId,
+  header,
+  description,
+  renderImage
+}) => {
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: emptyStateStyles,
+    testId: testId
+  }, renderImage === null || renderImage === void 0 ? void 0 : renderImage(), /*#__PURE__*/React.createElement(Heading, {
+    size: "small"
+  }, header), description && /*#__PURE__*/React.createElement(Box, {
+    as: "p",
+    xcss: descriptionStyles
+  }, description));
+};

package/dist/es2019/view/RelatedLinksModal/views/errored/error-svg/index.js

@@ -0,0 +1,54 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+const errorStyles = css({
+  width: '80px',
+  margin: `0 auto ${"var(--ds-space-300, 24px)"}`,
+  display: 'block'
+});
+export const ErrorSVG = props => {
+  const id = 'related-links-error-svg';
+  return jsx("svg", _extends({
+    "data-testid": id,
+    viewBox: "0 0 164 212",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    css: errorStyles
+  }, props), jsx("path", {
+    d: "m95.43 74.16 66.44 115.08c5.84 10.12-1.46 22.76-13.14 22.76H15.85c-11.68 0-18.98-12.65-13.14-22.76L69.15 74.16c5.84-10.12 20.44-10.12 26.28 0Zm-7.56 83.55 2.88-44.35c.34-5.29-3.86-9.78-9.16-9.78-5.31 0-9.51 4.48-9.16 9.78l2.88 44.35a6.3 6.3 0 0 0 6.28 5.89c3.31 0 6.06-2.58 6.28-5.89Zm-15.84 23.54c0 5.66 4.76 10.1 10.39 9.58 4.85-.45 8.73-4.5 8.83-9.37.11-5.45-4.31-9.94-9.73-9.94-5.23-.01-9.49 4.37-9.49 9.73Z",
+    fill: `url(#${id})`
+  }), jsx("path", {
+    opacity: ".6",
+    d: "M93.35 27.17 85.94.45c-.17-.62-1.07-.58-1.19.05l-4.66 25.1-5.8-1.08a.612.612 0 0 0-.7.76L81 52c.17.62 1.07.58 1.19-.05l4.66-25.1 5.8 1.08c.45.08.82-.33.7-.76ZM66.77 41.81 55.9 33.26c-.22-.18-.53.07-.41.33l5.53 11.43-2.66 1.29c-.18.09-.2.33-.05.45l10.87 8.55c.22.18.53-.07.41-.33l-5.53-11.43 2.66-1.29c.17-.08.2-.33.05-.45Z",
+    fill: "#C1C7D0"
+  }), jsx("path", {
+    opacity: ".6",
+    d: "M102.78 56.75a.993.993 0 0 1-.92-1.38c-.24-.77-2.29-2.85-3.54-4.11-2.97-3.01-4.93-5-3.84-6.49 1.09-1.48 3.58-.22 7.35 1.7 1.32.67 3.35 1.7 4.45 2.03-.64-.95-2.24-2.58-3.28-3.63-2.97-3.01-4.93-5-3.84-6.49 1.08-1.48 3.58-.22 7.34 1.7 1.32.67 3.34 1.7 4.45 2.03-.64-.95-2.24-2.57-3.28-3.62-2.97-3.01-4.93-5-3.84-6.49 1.08-1.48 3.57-.22 7.34 1.7 1.58.8 4.18 2.13 4.98 2.13a1.005 1.005 0 0 1 1.46 1.36c-1.09 1.48-3.57.22-7.34-1.7-1.32-.67-3.34-1.7-4.44-2.03.64.95 2.24 2.57 3.28 3.62 2.97 3.01 4.93 5 3.84 6.49-1.08 1.48-3.57.22-7.34-1.7-1.32-.67-3.35-1.7-4.45-2.03.64.95 2.24 2.57 3.28 3.63 2.97 3.01 4.93 5 3.84 6.49-1.09 1.48-3.58.22-7.35-1.7-1.32-.67-3.35-1.71-4.45-2.03.64.95 2.24 2.58 3.28 3.63 2.97 3.01 4.93 5 3.84 6.49-.21.26-.51.4-.82.4Zm5.56 14.32c-.35 0-.69-.19-.88-.52-1.04-1.88-2.22-4.02-.91-5.21 1.31-1.2 3.34.18 5.49 1.63.87.59 2.26 1.53 2.93 1.71-.12-.68-.93-2.15-1.45-3.07-1.26-2.27-2.45-4.41-1.14-5.61 1.31-1.2 3.34.18 5.49 1.63.96.65 2.54 1.72 3.1 1.74a1 1 0 0 1 1.27 1.54c-1.31 1.2-3.34-.17-5.49-1.63-.87-.59-2.26-1.53-2.93-1.71.12.68.93 2.15 1.45 3.07 1.26 2.27 2.45 4.41 1.14 5.61-1.31 1.2-3.34-.18-5.49-1.63-.87-.59-2.26-1.53-2.93-1.71.12.68.93 2.14 1.22 2.67.27.48.09 1.09-.39 1.36-.15.09-.32.13-.48.13Zm-54.32-2.89c-.22 0-.44-.04-.67-.14-1.64-.69-1.24-3.11-.81-5.67.17-1.04.45-2.7.33-3.38-.57.39-1.56 1.75-2.18 2.6-1.53 2.09-2.99 4.07-4.62 3.38a.991.991 0 0 1-.53-1.31c.2-.48.73-.72 1.21-.57.52-.21 1.65-1.75 2.34-2.68 1.53-2.09 2.98-4.08 4.62-3.38 1.64.69 1.24 3.11.81 5.67-.17 1.04-.45 2.7-.33 3.38.57-.39 1.56-1.75 2.18-2.6 1.53-2.09 2.98-4.08 4.62-3.38 1.63.69 1.24 3.09.89 5.21-.09.54-.6.91-1.15.83-.54-.09-.92-.6-.83-1.15.1-.59.37-2.24.26-2.92-.57.39-1.56 1.75-2.18 2.6-1.33 1.79-2.59 3.51-3.96 3.51Z",
+    fill: "#B3BAC5"
+  }), jsx("defs", null, jsx("linearGradient", {
+    id: id,
+    x1: "26.169",
+    y1: "228.621",
+    x2: "138.408",
+    y2: "116.382",
+    gradientUnits: "userSpaceOnUse"
+  }, jsx("stop", {
+    stopColor: "#C1C7D0"
+  }), jsx("stop", {
+    offset: ".297",
+    stopColor: "#C6CBD4",
+    stopOpacity: ".881"
+  }), jsx("stop", {
+    offset: ".63",
+    stopColor: "#D3D7DE",
+    stopOpacity: ".748"
+  }), jsx("stop", {
+    offset: ".98",
+    stopColor: "#E9EBEF",
+    stopOpacity: ".608"
+  }), jsx("stop", {
+    offset: "1",
+    stopColor: "#EBECF0",
+    stopOpacity: ".6"
+  }))));
+};

package/dist/es2019/view/RelatedLinksModal/views/errored/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { FormattedMessage, useIntl } from "react-intl-next";
+import { messages } from '../../../../messages';
+import { ErrorSVG } from "./error-svg";
+import { EmptyState } from '../../components/EmptyState';
+export const RelatedLinksErroredView = () => {
+  const intl = useIntl();
+  return /*#__PURE__*/React.createElement(EmptyState, {
+    renderImage: () => /*#__PURE__*/React.createElement(ErrorSVG, null),
+    header: intl.formatMessage(messages.related_links_modal_error_header),
+    description: /*#__PURE__*/React.createElement(FormattedMessage, messages.related_links_modal_error_message)
+  });
+};

package/dist/esm/messages.js

@@ -724,5 +724,15 @@ export var messages = defineMessages({
     id: 'fabric.linking.related_links_includes_links_to',
     defaultMessage: 'Includes Links To',
     description: 'Informs the user of the resources the url links to'
+  },
+  related_links_modal_error_header: {
+    id: 'fabric.linking.related_links_modal_error_header',
+    defaultMessage: 'Something went wrong',
+    description: 'Title for related links error'
+  },
+  related_links_modal_error_message: {
+    id: 'fabric.linking.related_links_modal_error_message',
+    defaultMessage: 'We ran into an issue trying to load recent links. Check your connection or refresh to try again.',
+    description: 'Informs the user that there was a problem loading related links'
   }
 });

package/dist/esm/state/hooks/use-incoming-outgoing-links/index.js

@@ -0,0 +1,93 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { useCallback, useMemo } from 'react';
+import { request } from '@atlaskit/linking-common';
+import { queryIncomingOutgoingLinks as queryIncomingOutgoingAris } from './query';
+/**
+ * @param baseUriWithNoTrailingSlash base url which will then be appended with /gateway/api/graphql to make requests to AGG
+ */
+export var useIncomingOutgoingAri = function useIncomingOutgoingAri() {
+  var baseUriWithNoTrailingSlash = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  var aggRequestCall = useCallback( /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(body, headers) {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            return _context.abrupt("return", request('post', baseUriWithNoTrailingSlash + '/gateway/api/graphql', body, headers, [200]));
+          case 1:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x, _x2) {
+      return _ref.apply(this, arguments);
+    };
+  }(), [baseUriWithNoTrailingSlash]);
+  var getIncomingOutgoingAris = useCallback(
+  /*#__PURE__*/
+  /**
+   * Returning aris linking to (outgoing) and from (incoming) a given ari from AGS using
+   * https://developer.atlassian.com/cloud/ari-graph-store/relationships/content-referenced-entity/#query
+   * @param ari the ari for which the incoming outgoing aris are to be retrieved
+   * @param firstIncoming The maximum count of incoming relationships to fetch. Must not exceed 1000. This max limit is handled by AGG itself. Default is 50 (ORS batch max limit)
+   * @param firstOutgoing The maximum count of outgoing relationships to fetch. Must not exceed 1000. This max limit is handled by AGG itself. Default is 50 (ORS batch max limit)
+   *
+   */
+  function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(ari) {
+      var _response$data$graphS, _response$data, _response$data$graphS2, _response$data2;
+      var firstIncoming,
+        firstOutgoing,
+        response,
+        incomingAris,
+        outgoingAris,
+        _args2 = arguments;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            firstIncoming = _args2.length > 1 && _args2[1] !== undefined ? _args2[1] : 50;
+            firstOutgoing = _args2.length > 2 && _args2[2] !== undefined ? _args2[2] : 50;
+            _context2.next = 4;
+            return aggRequestCall({
+              variables: {
+                ids: [ari],
+                firstIncoming: firstIncoming,
+                firstOutgoing: firstOutgoing
+              },
+              query: queryIncomingOutgoingAris
+            });
+          case 4:
+            response = _context2.sent;
+            incomingAris = (_response$data$graphS = response === null || response === void 0 || (_response$data = response.data) === null || _response$data === void 0 || (_response$data = _response$data.graphStore) === null || _response$data === void 0 || (_response$data = _response$data.incoming) === null || _response$data === void 0 || (_response$data = _response$data.nodes) === null || _response$data === void 0 || (_response$data = _response$data.map(function (node) {
+              var _node$from;
+              return node === null || node === void 0 || (_node$from = node.from) === null || _node$from === void 0 ? void 0 : _node$from.id;
+            })) === null || _response$data === void 0 ? void 0 : _response$data.filter(function (id) {
+              return !!id;
+            })) !== null && _response$data$graphS !== void 0 ? _response$data$graphS : [];
+            outgoingAris = (_response$data$graphS2 = response === null || response === void 0 || (_response$data2 = response.data) === null || _response$data2 === void 0 || (_response$data2 = _response$data2.graphStore) === null || _response$data2 === void 0 || (_response$data2 = _response$data2.outgoing) === null || _response$data2 === void 0 || (_response$data2 = _response$data2.nodes) === null || _response$data2 === void 0 || (_response$data2 = _response$data2.map(function (node) {
+              var _node$to;
+              return node === null || node === void 0 || (_node$to = node.to) === null || _node$to === void 0 ? void 0 : _node$to.id;
+            })) === null || _response$data2 === void 0 ? void 0 : _response$data2.filter(function (id) {
+              return !!id;
+            })) !== null && _response$data$graphS2 !== void 0 ? _response$data$graphS2 : [];
+            return _context2.abrupt("return", {
+              incomingAris: incomingAris,
+              outgoingAris: outgoingAris
+            });
+          case 8:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function (_x3) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [aggRequestCall]);
+  return useMemo(function () {
+    return {
+      getIncomingOutgoingAris: getIncomingOutgoingAris
+    };
+  }, [getIncomingOutgoingAris]);
+};

package/dist/esm/state/hooks/use-incoming-outgoing-links/query.js

@@ -0,0 +1,5 @@
+/**
+ * AGG query to retrieve incoming/outgoing links from AGS
+ * https://developer.atlassian.com/cloud/ari-graph-store/relationships/content-referenced-entity/#batch-query
+ */
+export var queryIncomingOutgoingLinks = "\n  query SmartCard_ContentReferencedEntityBatchQuery_V1($ids: [ID!]!, $firstIncoming: Int = 50, $firstOutgoing: Int = 50) {\n    graphStore @optIn(to: \"GraphStore\") {\n      incoming: contentReferencedEntityInverseBatch(ids: $ids, first: $firstIncoming) @optIn(to: \"GraphStoreContentReferencedEntity\") {\n        nodes {\n          from {\n            id\n          }\n        }\n      }\n      outgoing: contentReferencedEntityBatch(ids: $ids, first: $firstOutgoing) @optIn(to: \"GraphStoreContentReferencedEntity\") {\n        nodes {\n          to {\n            id\n          }\n        }\n      }\n    }\n  }";

package/dist/esm/utils/analytics/analytics.js

@@ -15,7 +15,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "27.4.2"
+  packageVersion: "27.4.3"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/esm/view/LinkUrl/index.js

@@ -10,7 +10,7 @@ import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-m
 import LinkWarningModal from './LinkWarningModal';
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "27.4.2",
+  packageVersion: "27.4.3",
   componentName: 'linkUrl'
 };
 var Link = withLinkClickedEvent('a');

package/dist/esm/view/RelatedLinksModal/components/EmptyState.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import Heading from '@atlaskit/heading';
+import { Box, xcss } from '@atlaskit/primitives';
+var emptyStateStyles = xcss({
+  alignItems: "center",
+  display: 'flex',
+  flexDirection: 'column',
+  gap: "space.100",
+  height: '100%',
+  justifyContent: 'center',
+  marginLeft: 'space.300',
+  marginRight: 'space.300',
+  textAlign: 'center'
+});
+var descriptionStyles = xcss({
+  marginTop: "var(--ds-space-0, 0px)",
+  marginBottom: "var(--ds-space-300, 24px)",
+  color: 'color.text'
+});
+export var EmptyState = function EmptyState(_ref) {
+  var testId = _ref.testId,
+    header = _ref.header,
+    description = _ref.description,
+    renderImage = _ref.renderImage;
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: emptyStateStyles,
+    testId: testId
+  }, renderImage === null || renderImage === void 0 ? void 0 : renderImage(), /*#__PURE__*/React.createElement(Heading, {
+    size: "small"
+  }, header), description && /*#__PURE__*/React.createElement(Box, {
+    as: "p",
+    xcss: descriptionStyles
+  }, description));
+};

package/dist/esm/view/RelatedLinksModal/views/errored/error-svg/index.js

@@ -0,0 +1,54 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+var errorStyles = css({
+  width: '80px',
+  margin: "0 auto ".concat("var(--ds-space-300, 24px)"),
+  display: 'block'
+});
+export var ErrorSVG = function ErrorSVG(props) {
+  var id = 'related-links-error-svg';
+  return jsx("svg", _extends({
+    "data-testid": id,
+    viewBox: "0 0 164 212",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    css: errorStyles
+  }, props), jsx("path", {
+    d: "m95.43 74.16 66.44 115.08c5.84 10.12-1.46 22.76-13.14 22.76H15.85c-11.68 0-18.98-12.65-13.14-22.76L69.15 74.16c5.84-10.12 20.44-10.12 26.28 0Zm-7.56 83.55 2.88-44.35c.34-5.29-3.86-9.78-9.16-9.78-5.31 0-9.51 4.48-9.16 9.78l2.88 44.35a6.3 6.3 0 0 0 6.28 5.89c3.31 0 6.06-2.58 6.28-5.89Zm-15.84 23.54c0 5.66 4.76 10.1 10.39 9.58 4.85-.45 8.73-4.5 8.83-9.37.11-5.45-4.31-9.94-9.73-9.94-5.23-.01-9.49 4.37-9.49 9.73Z",
+    fill: "url(#".concat(id, ")")
+  }), jsx("path", {
+    opacity: ".6",
+    d: "M93.35 27.17 85.94.45c-.17-.62-1.07-.58-1.19.05l-4.66 25.1-5.8-1.08a.612.612 0 0 0-.7.76L81 52c.17.62 1.07.58 1.19-.05l4.66-25.1 5.8 1.08c.45.08.82-.33.7-.76ZM66.77 41.81 55.9 33.26c-.22-.18-.53.07-.41.33l5.53 11.43-2.66 1.29c-.18.09-.2.33-.05.45l10.87 8.55c.22.18.53-.07.41-.33l-5.53-11.43 2.66-1.29c.17-.08.2-.33.05-.45Z",
+    fill: "#C1C7D0"
+  }), jsx("path", {
+    opacity: ".6",
+    d: "M102.78 56.75a.993.993 0 0 1-.92-1.38c-.24-.77-2.29-2.85-3.54-4.11-2.97-3.01-4.93-5-3.84-6.49 1.09-1.48 3.58-.22 7.35 1.7 1.32.67 3.35 1.7 4.45 2.03-.64-.95-2.24-2.58-3.28-3.63-2.97-3.01-4.93-5-3.84-6.49 1.08-1.48 3.58-.22 7.34 1.7 1.32.67 3.34 1.7 4.45 2.03-.64-.95-2.24-2.57-3.28-3.62-2.97-3.01-4.93-5-3.84-6.49 1.08-1.48 3.57-.22 7.34 1.7 1.58.8 4.18 2.13 4.98 2.13a1.005 1.005 0 0 1 1.46 1.36c-1.09 1.48-3.57.22-7.34-1.7-1.32-.67-3.34-1.7-4.44-2.03.64.95 2.24 2.57 3.28 3.62 2.97 3.01 4.93 5 3.84 6.49-1.08 1.48-3.57.22-7.34-1.7-1.32-.67-3.35-1.7-4.45-2.03.64.95 2.24 2.57 3.28 3.63 2.97 3.01 4.93 5 3.84 6.49-1.09 1.48-3.58.22-7.35-1.7-1.32-.67-3.35-1.71-4.45-2.03.64.95 2.24 2.58 3.28 3.63 2.97 3.01 4.93 5 3.84 6.49-.21.26-.51.4-.82.4Zm5.56 14.32c-.35 0-.69-.19-.88-.52-1.04-1.88-2.22-4.02-.91-5.21 1.31-1.2 3.34.18 5.49 1.63.87.59 2.26 1.53 2.93 1.71-.12-.68-.93-2.15-1.45-3.07-1.26-2.27-2.45-4.41-1.14-5.61 1.31-1.2 3.34.18 5.49 1.63.96.65 2.54 1.72 3.1 1.74a1 1 0 0 1 1.27 1.54c-1.31 1.2-3.34-.17-5.49-1.63-.87-.59-2.26-1.53-2.93-1.71.12.68.93 2.15 1.45 3.07 1.26 2.27 2.45 4.41 1.14 5.61-1.31 1.2-3.34-.18-5.49-1.63-.87-.59-2.26-1.53-2.93-1.71.12.68.93 2.14 1.22 2.67.27.48.09 1.09-.39 1.36-.15.09-.32.13-.48.13Zm-54.32-2.89c-.22 0-.44-.04-.67-.14-1.64-.69-1.24-3.11-.81-5.67.17-1.04.45-2.7.33-3.38-.57.39-1.56 1.75-2.18 2.6-1.53 2.09-2.99 4.07-4.62 3.38a.991.991 0 0 1-.53-1.31c.2-.48.73-.72 1.21-.57.52-.21 1.65-1.75 2.34-2.68 1.53-2.09 2.98-4.08 4.62-3.38 1.64.69 1.24 3.11.81 5.67-.17 1.04-.45 2.7-.33 3.38.57-.39 1.56-1.75 2.18-2.6 1.53-2.09 2.98-4.08 4.62-3.38 1.63.69 1.24 3.09.89 5.21-.09.54-.6.91-1.15.83-.54-.09-.92-.6-.83-1.15.1-.59.37-2.24.26-2.92-.57.39-1.56 1.75-2.18 2.6-1.33 1.79-2.59 3.51-3.96 3.51Z",
+    fill: "#B3BAC5"
+  }), jsx("defs", null, jsx("linearGradient", {
+    id: id,
+    x1: "26.169",
+    y1: "228.621",
+    x2: "138.408",
+    y2: "116.382",
+    gradientUnits: "userSpaceOnUse"
+  }, jsx("stop", {
+    stopColor: "#C1C7D0"
+  }), jsx("stop", {
+    offset: ".297",
+    stopColor: "#C6CBD4",
+    stopOpacity: ".881"
+  }), jsx("stop", {
+    offset: ".63",
+    stopColor: "#D3D7DE",
+    stopOpacity: ".748"
+  }), jsx("stop", {
+    offset: ".98",
+    stopColor: "#E9EBEF",
+    stopOpacity: ".608"
+  }), jsx("stop", {
+    offset: "1",
+    stopColor: "#EBECF0",
+    stopOpacity: ".6"
+  }))));
+};

package/dist/esm/view/RelatedLinksModal/views/errored/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { FormattedMessage, useIntl } from "react-intl-next";
+import { messages } from '../../../../messages';
+import { ErrorSVG } from "./error-svg";
+import { EmptyState } from '../../components/EmptyState';
+export var RelatedLinksErroredView = function RelatedLinksErroredView() {
+  var intl = useIntl();
+  return /*#__PURE__*/React.createElement(EmptyState, {
+    renderImage: function renderImage() {
+      return /*#__PURE__*/React.createElement(ErrorSVG, null);
+    },
+    header: intl.formatMessage(messages.related_links_modal_error_header),
+    description: /*#__PURE__*/React.createElement(FormattedMessage, messages.related_links_modal_error_message)
+  });
+};

package/dist/types/messages.d.ts

@@ -1,6 +1,6 @@
 import { type MessageDescriptor } from 'react-intl-next';
 export type RequestAccessMessageKey = 'click_to_join' | 'click_to_join_description' | 'forbidden_description' | 'request_access' | 'request_access_description' | 'request_access_pending' | 'request_access_pending_title' | 'request_access_pending_description' | 'request_denied_description' | 'default_no_access_title' | 'direct_access_title' | 'direct_access_description' | 'direct_access' | 'access_exists_description' | 'not_found_description' | 'not_found_title';
-export type MessageKey = 'assigned_to' | 'ai_summarize' | 'ai_summarized' | 'ai_summarized_abbreviation' | 'ai_summarized_info' | 'ai_summarized_info_short' | 'ai_summarizing' | 'ai_summary_error_generic' | 'ai_summary_error_acceptable_use_violation' | 'ai_summary_error_hipaa_content_detected' | 'ai_summary_error_exceeding_context_length_error' | 'ai_summary_action' | 'ai_summary_action_description' | 'automation_action_title' | 'automation_action_tooltip' | 'automation_action_icon_label' | 'automation_action_confluence_page_modal_title' | 'automation_action_confluence_page_modal_description' | 'copy_summary_action' | 'copy_summary_action_description' | 'copied_summary_action_description' | 'beta' | 'cannot_find_link' | 'connect_link_account_card' | 'connect_link_account_card_name' | 'connect_link_account_card_description' | 'connect_unauthorised_account_action' | 'connect_unauthorised_account_description' | 'connect_unauthorised_account_description_no_provider' | 'continue' | 'copy_url_to_clipboard' | 'copied_url_to_clipboard' | 'could_not_load_link' | 'download' | 'download_description' | 'download_file' | 'follow' | 'follow_project_description' | 'follow_project' | 'follow_goal' | 'follow_goal_description' | 'follow_project_error' | 'follow_goal_error' | 'go_back' | 'invalid_permissions' | 'invalid_permissions_description' | 'join_to_view' | 'connect_link_account' | 'created_by' | 'created_on_relative' | 'created_on_absolute' | 'check_this_link' | 'delete' | 'edit' | 'learn_more_about_smart_links' | 'learn_more_about_connecting_account' | 'loading' | 'link_safety_warning_message' | 'modified_by' | 'modified_on_relative' | 'modified_on_absolute' | 'more_actions' | 'not_found_title' | 'not_found_description' | 'open_issue_in_jira' | 'open_link_in_a_new_tab' | 'owned_by' | 'preview_description' | 'preview_improved' | 'preview_close' | 'preview_max_size' | 'preview_min_size' | 'priority_blocker' | 'priority_critical' | 'priority_high' | 'priority_highest' | 'priority_low' | 'priority_lowest' | 'priority_major' | 'priority_medium' | 'priority_minor' | 'priority_trivial' | 'priority_undefined' | 'forbidden_access' | 'pending_request' | 'read_time' | 'restricted_link' | 'request_access_to_view' | 'request_denied' | 'sent_on_relative' | 'sent_on_absolute' | 'status_change_load_error' | 'status_change_permission_error' | 'status_change_update_error' | 'try_again' | 'try_another_account' | 'unauthorised_account_description' | 'unauthorised_account_description_no_provider' | 'unauthorised_account_name' | 'unauthorised_account_name_no_provider' | 'unassigned' | 'unfollow' | 'unfollow_project_description' | 'unfollow_project' | 'unfollow_project_error' | 'unfollow_goal' | 'unfollow_goal_description' | 'unfollow_goal_error' | 'view' | 'viewIn' | 'viewOriginal' | 'actions' | 'add_account' | 'cancel' | 'close' | 'connect_to' | 'connect_account_description' | 'retry' | 'save' | 'unlink_account' | RequestAccessMessageKey | 'related_work_items_not_found' | 'last_mentioned_in' | 'related' | 'generic_error_message' | 'related_links_modal_title' | 'related_links_view_related_urls' | 'related_links_found_in' | 'related_links_includes_links_to' | 'related_links_not_found';
+export type MessageKey = 'assigned_to' | 'ai_summarize' | 'ai_summarized' | 'ai_summarized_abbreviation' | 'ai_summarized_info' | 'ai_summarized_info_short' | 'ai_summarizing' | 'ai_summary_error_generic' | 'ai_summary_error_acceptable_use_violation' | 'ai_summary_error_hipaa_content_detected' | 'ai_summary_error_exceeding_context_length_error' | 'ai_summary_action' | 'ai_summary_action_description' | 'automation_action_title' | 'automation_action_tooltip' | 'automation_action_icon_label' | 'automation_action_confluence_page_modal_title' | 'automation_action_confluence_page_modal_description' | 'copy_summary_action' | 'copy_summary_action_description' | 'copied_summary_action_description' | 'beta' | 'cannot_find_link' | 'connect_link_account_card' | 'connect_link_account_card_name' | 'connect_link_account_card_description' | 'connect_unauthorised_account_action' | 'connect_unauthorised_account_description' | 'connect_unauthorised_account_description_no_provider' | 'continue' | 'copy_url_to_clipboard' | 'copied_url_to_clipboard' | 'could_not_load_link' | 'download' | 'download_description' | 'download_file' | 'follow' | 'follow_project_description' | 'follow_project' | 'follow_goal' | 'follow_goal_description' | 'follow_project_error' | 'follow_goal_error' | 'go_back' | 'invalid_permissions' | 'invalid_permissions_description' | 'join_to_view' | 'connect_link_account' | 'created_by' | 'created_on_relative' | 'created_on_absolute' | 'check_this_link' | 'delete' | 'edit' | 'learn_more_about_smart_links' | 'learn_more_about_connecting_account' | 'loading' | 'link_safety_warning_message' | 'modified_by' | 'modified_on_relative' | 'modified_on_absolute' | 'more_actions' | 'not_found_title' | 'not_found_description' | 'open_issue_in_jira' | 'open_link_in_a_new_tab' | 'owned_by' | 'preview_description' | 'preview_improved' | 'preview_close' | 'preview_max_size' | 'preview_min_size' | 'priority_blocker' | 'priority_critical' | 'priority_high' | 'priority_highest' | 'priority_low' | 'priority_lowest' | 'priority_major' | 'priority_medium' | 'priority_minor' | 'priority_trivial' | 'priority_undefined' | 'forbidden_access' | 'pending_request' | 'read_time' | 'restricted_link' | 'request_access_to_view' | 'request_denied' | 'sent_on_relative' | 'sent_on_absolute' | 'status_change_load_error' | 'status_change_permission_error' | 'status_change_update_error' | 'try_again' | 'try_another_account' | 'unauthorised_account_description' | 'unauthorised_account_description_no_provider' | 'unauthorised_account_name' | 'unauthorised_account_name_no_provider' | 'unassigned' | 'unfollow' | 'unfollow_project_description' | 'unfollow_project' | 'unfollow_project_error' | 'unfollow_goal' | 'unfollow_goal_description' | 'unfollow_goal_error' | 'view' | 'viewIn' | 'viewOriginal' | 'actions' | 'add_account' | 'cancel' | 'close' | 'connect_to' | 'connect_account_description' | 'retry' | 'save' | 'unlink_account' | RequestAccessMessageKey | 'related_work_items_not_found' | 'last_mentioned_in' | 'related' | 'generic_error_message' | 'related_links_modal_error_header' | 'related_links_modal_error_message' | 'related_links_modal_title' | 'related_links_view_related_urls' | 'related_links_found_in' | 'related_links_includes_links_to' | 'related_links_not_found';
 type Messages = {
     [K in MessageKey]: MessageDescriptor;
 };

package/dist/types/state/hooks/use-incoming-outgoing-links/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @param baseUriWithNoTrailingSlash base url which will then be appended with /gateway/api/graphql to make requests to AGG
+ */
+export declare const useIncomingOutgoingAri: (baseUriWithNoTrailingSlash?: string) => {
+    getIncomingOutgoingAris: (ari: string, firstIncoming?: number, firstOutgoing?: number) => Promise<{
+        incomingAris: string[];
+        outgoingAris: string[];
+    }>;
+};

package/dist/types/state/hooks/use-incoming-outgoing-links/query.d.ts

@@ -0,0 +1,5 @@
+/**
+ * AGG query to retrieve incoming/outgoing links from AGS
+ * https://developer.atlassian.com/cloud/ari-graph-store/relationships/content-referenced-entity/#batch-query
+ */
+export declare const queryIncomingOutgoingLinks = "\n  query SmartCard_ContentReferencedEntityBatchQuery_V1($ids: [ID!]!, $firstIncoming: Int = 50, $firstOutgoing: Int = 50) {\n    graphStore @optIn(to: \"GraphStore\") {\n      incoming: contentReferencedEntityInverseBatch(ids: $ids, first: $firstIncoming) @optIn(to: \"GraphStoreContentReferencedEntity\") {\n        nodes {\n          from {\n            id\n          }\n        }\n      }\n      outgoing: contentReferencedEntityBatch(ids: $ids, first: $firstOutgoing) @optIn(to: \"GraphStoreContentReferencedEntity\") {\n        nodes {\n          to {\n            id\n          }\n        }\n      }\n    }\n  }";

package/dist/types/view/RelatedLinksModal/components/EmptyState.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type EmptyStateProps = {
+    header: string;
+    testId?: string;
+    description?: React.ReactNode;
+    renderImage?: () => React.ReactNode;
+};
+export declare const EmptyState: ({ testId, header, description, renderImage, }: EmptyStateProps) => JSX.Element;
+export {};

package/dist/types/view/RelatedLinksModal/views/errored/error-svg/index.d.ts

@@ -0,0 +1,3 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+export declare const ErrorSVG: (props: React.SVGProps<SVGSVGElement>) => jsx.JSX.Element;

package/dist/types/view/RelatedLinksModal/views/errored/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const RelatedLinksErroredView: () => JSX.Element;

package/dist/types-ts4.5/messages.d.ts

@@ -1,6 +1,6 @@
 import { type MessageDescriptor } from 'react-intl-next';
 export type RequestAccessMessageKey = 'click_to_join' | 'click_to_join_description' | 'forbidden_description' | 'request_access' | 'request_access_description' | 'request_access_pending' | 'request_access_pending_title' | 'request_access_pending_description' | 'request_denied_description' | 'default_no_access_title' | 'direct_access_title' | 'direct_access_description' | 'direct_access' | 'access_exists_description' | 'not_found_description' | 'not_found_title';
-export type MessageKey = 'assigned_to' | 'ai_summarize' | 'ai_summarized' | 'ai_summarized_abbreviation' | 'ai_summarized_info' | 'ai_summarized_info_short' | 'ai_summarizing' | 'ai_summary_error_generic' | 'ai_summary_error_acceptable_use_violation' | 'ai_summary_error_hipaa_content_detected' | 'ai_summary_error_exceeding_context_length_error' | 'ai_summary_action' | 'ai_summary_action_description' | 'automation_action_title' | 'automation_action_tooltip' | 'automation_action_icon_label' | 'automation_action_confluence_page_modal_title' | 'automation_action_confluence_page_modal_description' | 'copy_summary_action' | 'copy_summary_action_description' | 'copied_summary_action_description' | 'beta' | 'cannot_find_link' | 'connect_link_account_card' | 'connect_link_account_card_name' | 'connect_link_account_card_description' | 'connect_unauthorised_account_action' | 'connect_unauthorised_account_description' | 'connect_unauthorised_account_description_no_provider' | 'continue' | 'copy_url_to_clipboard' | 'copied_url_to_clipboard' | 'could_not_load_link' | 'download' | 'download_description' | 'download_file' | 'follow' | 'follow_project_description' | 'follow_project' | 'follow_goal' | 'follow_goal_description' | 'follow_project_error' | 'follow_goal_error' | 'go_back' | 'invalid_permissions' | 'invalid_permissions_description' | 'join_to_view' | 'connect_link_account' | 'created_by' | 'created_on_relative' | 'created_on_absolute' | 'check_this_link' | 'delete' | 'edit' | 'learn_more_about_smart_links' | 'learn_more_about_connecting_account' | 'loading' | 'link_safety_warning_message' | 'modified_by' | 'modified_on_relative' | 'modified_on_absolute' | 'more_actions' | 'not_found_title' | 'not_found_description' | 'open_issue_in_jira' | 'open_link_in_a_new_tab' | 'owned_by' | 'preview_description' | 'preview_improved' | 'preview_close' | 'preview_max_size' | 'preview_min_size' | 'priority_blocker' | 'priority_critical' | 'priority_high' | 'priority_highest' | 'priority_low' | 'priority_lowest' | 'priority_major' | 'priority_medium' | 'priority_minor' | 'priority_trivial' | 'priority_undefined' | 'forbidden_access' | 'pending_request' | 'read_time' | 'restricted_link' | 'request_access_to_view' | 'request_denied' | 'sent_on_relative' | 'sent_on_absolute' | 'status_change_load_error' | 'status_change_permission_error' | 'status_change_update_error' | 'try_again' | 'try_another_account' | 'unauthorised_account_description' | 'unauthorised_account_description_no_provider' | 'unauthorised_account_name' | 'unauthorised_account_name_no_provider' | 'unassigned' | 'unfollow' | 'unfollow_project_description' | 'unfollow_project' | 'unfollow_project_error' | 'unfollow_goal' | 'unfollow_goal_description' | 'unfollow_goal_error' | 'view' | 'viewIn' | 'viewOriginal' | 'actions' | 'add_account' | 'cancel' | 'close' | 'connect_to' | 'connect_account_description' | 'retry' | 'save' | 'unlink_account' | RequestAccessMessageKey | 'related_work_items_not_found' | 'last_mentioned_in' | 'related' | 'generic_error_message' | 'related_links_modal_title' | 'related_links_view_related_urls' | 'related_links_found_in' | 'related_links_includes_links_to' | 'related_links_not_found';
+export type MessageKey = 'assigned_to' | 'ai_summarize' | 'ai_summarized' | 'ai_summarized_abbreviation' | 'ai_summarized_info' | 'ai_summarized_info_short' | 'ai_summarizing' | 'ai_summary_error_generic' | 'ai_summary_error_acceptable_use_violation' | 'ai_summary_error_hipaa_content_detected' | 'ai_summary_error_exceeding_context_length_error' | 'ai_summary_action' | 'ai_summary_action_description' | 'automation_action_title' | 'automation_action_tooltip' | 'automation_action_icon_label' | 'automation_action_confluence_page_modal_title' | 'automation_action_confluence_page_modal_description' | 'copy_summary_action' | 'copy_summary_action_description' | 'copied_summary_action_description' | 'beta' | 'cannot_find_link' | 'connect_link_account_card' | 'connect_link_account_card_name' | 'connect_link_account_card_description' | 'connect_unauthorised_account_action' | 'connect_unauthorised_account_description' | 'connect_unauthorised_account_description_no_provider' | 'continue' | 'copy_url_to_clipboard' | 'copied_url_to_clipboard' | 'could_not_load_link' | 'download' | 'download_description' | 'download_file' | 'follow' | 'follow_project_description' | 'follow_project' | 'follow_goal' | 'follow_goal_description' | 'follow_project_error' | 'follow_goal_error' | 'go_back' | 'invalid_permissions' | 'invalid_permissions_description' | 'join_to_view' | 'connect_link_account' | 'created_by' | 'created_on_relative' | 'created_on_absolute' | 'check_this_link' | 'delete' | 'edit' | 'learn_more_about_smart_links' | 'learn_more_about_connecting_account' | 'loading' | 'link_safety_warning_message' | 'modified_by' | 'modified_on_relative' | 'modified_on_absolute' | 'more_actions' | 'not_found_title' | 'not_found_description' | 'open_issue_in_jira' | 'open_link_in_a_new_tab' | 'owned_by' | 'preview_description' | 'preview_improved' | 'preview_close' | 'preview_max_size' | 'preview_min_size' | 'priority_blocker' | 'priority_critical' | 'priority_high' | 'priority_highest' | 'priority_low' | 'priority_lowest' | 'priority_major' | 'priority_medium' | 'priority_minor' | 'priority_trivial' | 'priority_undefined' | 'forbidden_access' | 'pending_request' | 'read_time' | 'restricted_link' | 'request_access_to_view' | 'request_denied' | 'sent_on_relative' | 'sent_on_absolute' | 'status_change_load_error' | 'status_change_permission_error' | 'status_change_update_error' | 'try_again' | 'try_another_account' | 'unauthorised_account_description' | 'unauthorised_account_description_no_provider' | 'unauthorised_account_name' | 'unauthorised_account_name_no_provider' | 'unassigned' | 'unfollow' | 'unfollow_project_description' | 'unfollow_project' | 'unfollow_project_error' | 'unfollow_goal' | 'unfollow_goal_description' | 'unfollow_goal_error' | 'view' | 'viewIn' | 'viewOriginal' | 'actions' | 'add_account' | 'cancel' | 'close' | 'connect_to' | 'connect_account_description' | 'retry' | 'save' | 'unlink_account' | RequestAccessMessageKey | 'related_work_items_not_found' | 'last_mentioned_in' | 'related' | 'generic_error_message' | 'related_links_modal_error_header' | 'related_links_modal_error_message' | 'related_links_modal_title' | 'related_links_view_related_urls' | 'related_links_found_in' | 'related_links_includes_links_to' | 'related_links_not_found';
 type Messages = {
     [K in MessageKey]: MessageDescriptor;
 };

package/dist/types-ts4.5/state/hooks/use-incoming-outgoing-links/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @param baseUriWithNoTrailingSlash base url which will then be appended with /gateway/api/graphql to make requests to AGG
+ */
+export declare const useIncomingOutgoingAri: (baseUriWithNoTrailingSlash?: string) => {
+    getIncomingOutgoingAris: (ari: string, firstIncoming?: number, firstOutgoing?: number) => Promise<{
+        incomingAris: string[];
+        outgoingAris: string[];
+    }>;
+};

package/dist/types-ts4.5/state/hooks/use-incoming-outgoing-links/query.d.ts

@@ -0,0 +1,5 @@
+/**
+ * AGG query to retrieve incoming/outgoing links from AGS
+ * https://developer.atlassian.com/cloud/ari-graph-store/relationships/content-referenced-entity/#batch-query
+ */
+export declare const queryIncomingOutgoingLinks = "\n  query SmartCard_ContentReferencedEntityBatchQuery_V1($ids: [ID!]!, $firstIncoming: Int = 50, $firstOutgoing: Int = 50) {\n    graphStore @optIn(to: \"GraphStore\") {\n      incoming: contentReferencedEntityInverseBatch(ids: $ids, first: $firstIncoming) @optIn(to: \"GraphStoreContentReferencedEntity\") {\n        nodes {\n          from {\n            id\n          }\n        }\n      }\n      outgoing: contentReferencedEntityBatch(ids: $ids, first: $firstOutgoing) @optIn(to: \"GraphStoreContentReferencedEntity\") {\n        nodes {\n          to {\n            id\n          }\n        }\n      }\n    }\n  }";

package/dist/types-ts4.5/view/RelatedLinksModal/components/EmptyState.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type EmptyStateProps = {
+    header: string;
+    testId?: string;
+    description?: React.ReactNode;
+    renderImage?: () => React.ReactNode;
+};
+export declare const EmptyState: ({ testId, header, description, renderImage, }: EmptyStateProps) => JSX.Element;
+export {};

package/dist/types-ts4.5/view/RelatedLinksModal/views/errored/error-svg/index.d.ts

@@ -0,0 +1,3 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+export declare const ErrorSVG: (props: React.SVGProps<SVGSVGElement>) => jsx.JSX.Element;

package/dist/types-ts4.5/view/RelatedLinksModal/views/errored/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const RelatedLinksErroredView: () => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "27.4.2",
+  "version": "27.4.3",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -36,7 +36,7 @@
     "@atlaskit/button": "^17.17.0",
     "@atlaskit/checkbox": "^13.4.0",
     "@atlaskit/dropdown-menu": "^12.10.0",
-    "@atlaskit/form": "^10.2.0",
+    "@atlaskit/form": "^10.3.0",
     "@atlaskit/frontend-utilities": "^2.7.0",
     "@atlaskit/heading": "^2.3.0",
     "@atlaskit/icon": "^22.3.0",