@atlaskit/smart-card 26.40.0 → 26.41.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (76) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/messages.js +20 -0
  3. package/dist/cjs/state/hooks/use-related-urls/index.js +37 -0
  4. package/dist/cjs/utils/analytics/analytics.js +1 -1
  5. package/dist/cjs/view/FlexibleCard/components/blocks/index.js +8 -1
  6. package/dist/cjs/view/FlexibleCard/components/blocks/related-urls-block/errored/index.js +25 -0
  7. package/dist/cjs/view/FlexibleCard/components/blocks/related-urls-block/errored/types.js +5 -0
  8. package/dist/cjs/view/FlexibleCard/components/blocks/related-urls-block/index.js +99 -0
  9. package/dist/cjs/view/FlexibleCard/components/blocks/related-urls-block/resolved/index.js +30 -0
  10. package/dist/cjs/view/FlexibleCard/components/blocks/related-urls-block/resolved/related-url-list/index.js +78 -0
  11. package/dist/cjs/view/FlexibleCard/components/blocks/related-urls-block/resolved/related-url-list/related-url-item/index.js +43 -0
  12. package/dist/cjs/view/FlexibleCard/components/blocks/related-urls-block/resolved/related-url-list/related-url-item/types.js +5 -0
  13. package/dist/cjs/view/FlexibleCard/components/blocks/related-urls-block/resolved/related-url-list/types.js +5 -0
  14. package/dist/cjs/view/FlexibleCard/components/blocks/related-urls-block/resolved/types.js +5 -0
  15. package/dist/cjs/view/FlexibleCard/components/blocks/related-urls-block/resolving/index.js +23 -0
  16. package/dist/cjs/view/HoverCard/components/views/resolved/index.js +5 -1
  17. package/dist/cjs/view/LinkUrl/index.js +1 -1
  18. package/dist/es2019/messages.js +20 -0
  19. package/dist/es2019/state/hooks/use-related-urls/index.js +13 -0
  20. package/dist/es2019/utils/analytics/analytics.js +1 -1
  21. package/dist/es2019/view/FlexibleCard/components/blocks/index.js +2 -1
  22. package/dist/es2019/view/FlexibleCard/components/blocks/related-urls-block/errored/index.js +15 -0
  23. package/dist/es2019/view/FlexibleCard/components/blocks/related-urls-block/errored/types.js +1 -0
  24. package/dist/es2019/view/FlexibleCard/components/blocks/related-urls-block/index.js +54 -0
  25. package/dist/es2019/view/FlexibleCard/components/blocks/related-urls-block/resolved/index.js +24 -0
  26. package/dist/es2019/view/FlexibleCard/components/blocks/related-urls-block/resolved/related-url-list/index.js +61 -0
  27. package/dist/es2019/view/FlexibleCard/components/blocks/related-urls-block/resolved/related-url-list/related-url-item/index.js +32 -0
  28. package/dist/es2019/view/FlexibleCard/components/blocks/related-urls-block/resolved/related-url-list/related-url-item/types.js +1 -0
  29. package/dist/es2019/view/FlexibleCard/components/blocks/related-urls-block/resolved/related-url-list/types.js +1 -0
  30. package/dist/es2019/view/FlexibleCard/components/blocks/related-urls-block/resolved/types.js +1 -0
  31. package/dist/es2019/view/FlexibleCard/components/blocks/related-urls-block/resolving/index.js +13 -0
  32. package/dist/es2019/view/HoverCard/components/views/resolved/index.js +6 -2
  33. package/dist/es2019/view/LinkUrl/index.js +1 -1
  34. package/dist/esm/messages.js +20 -0
  35. package/dist/esm/state/hooks/use-related-urls/index.js +30 -0
  36. package/dist/esm/utils/analytics/analytics.js +1 -1
  37. package/dist/esm/view/FlexibleCard/components/blocks/index.js +2 -1
  38. package/dist/esm/view/FlexibleCard/components/blocks/related-urls-block/errored/index.js +18 -0
  39. package/dist/esm/view/FlexibleCard/components/blocks/related-urls-block/errored/types.js +1 -0
  40. package/dist/esm/view/FlexibleCard/components/blocks/related-urls-block/index.js +89 -0
  41. package/dist/esm/view/FlexibleCard/components/blocks/related-urls-block/resolved/index.js +23 -0
  42. package/dist/esm/view/FlexibleCard/components/blocks/related-urls-block/resolved/related-url-list/index.js +68 -0
  43. package/dist/esm/view/FlexibleCard/components/blocks/related-urls-block/resolved/related-url-list/related-url-item/index.js +33 -0
  44. package/dist/esm/view/FlexibleCard/components/blocks/related-urls-block/resolved/related-url-list/related-url-item/types.js +1 -0
  45. package/dist/esm/view/FlexibleCard/components/blocks/related-urls-block/resolved/related-url-list/types.js +1 -0
  46. package/dist/esm/view/FlexibleCard/components/blocks/related-urls-block/resolved/types.js +1 -0
  47. package/dist/esm/view/FlexibleCard/components/blocks/related-urls-block/resolving/index.js +16 -0
  48. package/dist/esm/view/HoverCard/components/views/resolved/index.js +6 -2
  49. package/dist/esm/view/LinkUrl/index.js +1 -1
  50. package/dist/types/messages.d.ts +1 -1
  51. package/dist/types/state/hooks/use-related-urls/index.d.ts +6 -0
  52. package/dist/types/view/FlexibleCard/components/blocks/index.d.ts +1 -0
  53. package/dist/types/view/FlexibleCard/components/blocks/related-urls-block/errored/index.d.ts +3 -0
  54. package/dist/types/view/FlexibleCard/components/blocks/related-urls-block/errored/types.d.ts +4 -0
  55. package/dist/types/view/FlexibleCard/components/blocks/related-urls-block/index.d.ts +13 -0
  56. package/dist/types/view/FlexibleCard/components/blocks/related-urls-block/resolved/index.d.ts +3 -0
  57. package/dist/types/view/FlexibleCard/components/blocks/related-urls-block/resolved/related-url-list/index.d.ts +4 -0
  58. package/dist/types/view/FlexibleCard/components/blocks/related-urls-block/resolved/related-url-list/related-url-item/index.d.ts +4 -0
  59. package/dist/types/view/FlexibleCard/components/blocks/related-urls-block/resolved/related-url-list/related-url-item/types.d.ts +7 -0
  60. package/dist/types/view/FlexibleCard/components/blocks/related-urls-block/resolved/related-url-list/types.d.ts +10 -0
  61. package/dist/types/view/FlexibleCard/components/blocks/related-urls-block/resolved/types.d.ts +8 -0
  62. package/dist/types/view/FlexibleCard/components/blocks/related-urls-block/resolving/index.d.ts +5 -0
  63. package/dist/types-ts4.5/messages.d.ts +1 -1
  64. package/dist/types-ts4.5/state/hooks/use-related-urls/index.d.ts +6 -0
  65. package/dist/types-ts4.5/view/FlexibleCard/components/blocks/index.d.ts +1 -0
  66. package/dist/types-ts4.5/view/FlexibleCard/components/blocks/related-urls-block/errored/index.d.ts +3 -0
  67. package/dist/types-ts4.5/view/FlexibleCard/components/blocks/related-urls-block/errored/types.d.ts +4 -0
  68. package/dist/types-ts4.5/view/FlexibleCard/components/blocks/related-urls-block/index.d.ts +13 -0
  69. package/dist/types-ts4.5/view/FlexibleCard/components/blocks/related-urls-block/resolved/index.d.ts +3 -0
  70. package/dist/types-ts4.5/view/FlexibleCard/components/blocks/related-urls-block/resolved/related-url-list/index.d.ts +4 -0
  71. package/dist/types-ts4.5/view/FlexibleCard/components/blocks/related-urls-block/resolved/related-url-list/related-url-item/index.d.ts +4 -0
  72. package/dist/types-ts4.5/view/FlexibleCard/components/blocks/related-urls-block/resolved/related-url-list/related-url-item/types.d.ts +7 -0
  73. package/dist/types-ts4.5/view/FlexibleCard/components/blocks/related-urls-block/resolved/related-url-list/types.d.ts +10 -0
  74. package/dist/types-ts4.5/view/FlexibleCard/components/blocks/related-urls-block/resolved/types.d.ts +8 -0
  75. package/dist/types-ts4.5/view/FlexibleCard/components/blocks/related-urls-block/resolving/index.d.ts +5 -0
  76. package/package.json +6 -2
@@ -0,0 +1,61 @@
1
+ import React, { useCallback, useMemo, useState } from 'react';
2
+ import { useIntl } from 'react-intl-next';
3
+ import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
4
+ import ChevronUpIcon from '@atlaskit/icon/glyph/chevron-up';
5
+ import { Box, Inline, Stack, xcss } from '@atlaskit/primitives';
6
+ import { css } from '@emotion/react';
7
+ import { messages } from '../../../../../../../messages';
8
+ import { getFormattedMessageAsString } from '../../../../../components/utils';
9
+ import Text from '../../../../elements/text';
10
+ import RelatedUrlItem from './related-url-item';
11
+ const RelatedUrlList = ({
12
+ resolvedResults,
13
+ title,
14
+ renderers,
15
+ testId,
16
+ initializeOpened
17
+ }) => {
18
+ const [isOpen, setIsOpen] = useState(initializeOpened);
19
+ const chevronClickHandler = useCallback(() => setIsOpen(!isOpen), [isOpen]);
20
+ const ChevronComponent = isOpen ? ChevronUpIcon : ChevronDownIcon;
21
+ const intl = useIntl();
22
+ const resolvedResultsStack = useMemo(() => {
23
+ return /*#__PURE__*/React.createElement(Stack, {
24
+ space: "space.050",
25
+ testId: `${testId}-items-wrapper`
26
+ }, resolvedResults.map((resolvedResults, idx) => /*#__PURE__*/React.createElement(RelatedUrlItem, {
27
+ testId: `${testId}-item`,
28
+ key: idx,
29
+ results: resolvedResults,
30
+ renderers: renderers
31
+ })));
32
+ }, [renderers, resolvedResults, testId]);
33
+ return resolvedResults.length > 0 ? /*#__PURE__*/React.createElement(Stack, {
34
+ testId: testId,
35
+ xcss: xcss({
36
+ width: '100%'
37
+ })
38
+ }, /*#__PURE__*/React.createElement(Box, {
39
+ onClick: chevronClickHandler,
40
+ testId: `${testId}-expand-title`
41
+ }, /*#__PURE__*/React.createElement(Inline, {
42
+ alignBlock: "center",
43
+ spread: "space-between"
44
+ }, /*#__PURE__*/React.createElement(Text, {
45
+ overrideCss: css`
46
+ font-weight: ${"var(--ds-font-weight-medium, 500)"};
47
+ `,
48
+ message: {
49
+ descriptor: title
50
+ }
51
+ }), /*#__PURE__*/React.createElement(ChevronComponent, {
52
+ label: getFormattedMessageAsString(intl, title),
53
+ size: 'medium'
54
+ }))), isOpen && resolvedResultsStack) : /*#__PURE__*/React.createElement(Text, {
55
+ testId: testId,
56
+ message: {
57
+ descriptor: messages.related_work_items_not_found
58
+ }
59
+ });
60
+ };
61
+ export default RelatedUrlList;
@@ -0,0 +1,32 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import React, { useMemo } from 'react';
3
+ import { Inline } from '@atlaskit/primitives';
4
+ import { SmartLinkSize } from '../../../../../../../../constants';
5
+ import extractFlexibleUiContext from '../../../../../../../../extractors/flexible';
6
+ import Icon from '../../../../../elements/icon';
7
+ import Link from '../../../../../elements/link';
8
+ const RelatedUrlItem = ({
9
+ results,
10
+ renderers,
11
+ testId
12
+ }) => {
13
+ const flexibleDataContext = useMemo(() => extractFlexibleUiContext({
14
+ response: results,
15
+ renderers
16
+ }), [renderers, results]);
17
+ return /*#__PURE__*/React.createElement(Inline, {
18
+ alignBlock: "center",
19
+ space: "space.050",
20
+ testId: testId
21
+ }, /*#__PURE__*/React.createElement(Icon, _extends({}, flexibleDataContext === null || flexibleDataContext === void 0 ? void 0 : flexibleDataContext.linkIcon, {
22
+ testId: `${testId}-icon`,
23
+ size: SmartLinkSize.Small
24
+ })), /*#__PURE__*/React.createElement(Link, {
25
+ testId: `${testId}-link`,
26
+ text: flexibleDataContext === null || flexibleDataContext === void 0 ? void 0 : flexibleDataContext.title,
27
+ url: flexibleDataContext === null || flexibleDataContext === void 0 ? void 0 : flexibleDataContext.url,
28
+ size: SmartLinkSize.Small,
29
+ maxLines: 1
30
+ }));
31
+ };
32
+ export default RelatedUrlItem;
@@ -0,0 +1,13 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import React from 'react';
3
+ import LoadingSkeleton from '../../../common/loading-skeleton';
4
+ import Block from '../../block';
5
+ export const RelatedUrlsBlockResolvingView = ({
6
+ testId,
7
+ ...blockProps
8
+ }) => /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
9
+ testId: testId
10
+ }), /*#__PURE__*/React.createElement(LoadingSkeleton, {
11
+ height: 1.55,
12
+ width: 22
13
+ }));
@@ -1,7 +1,7 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import React, { useCallback, useEffect, useMemo, useRef } from 'react';
3
3
  import { ActionName, CardDisplay, SmartLinkPosition, SmartLinkSize } from '../../../../../constants';
4
- import { FooterBlock, MetadataBlock, SnippetBlock, TitleBlock } from '../../../../FlexibleCard/components/blocks';
4
+ import { FooterBlock, MetadataBlock, RelatedUrlsBlock, SnippetBlock, TitleBlock } from '../../../../FlexibleCard/components/blocks';
5
5
  import { footerBlockCss, hiddenSnippetStyles, metadataBlockCss } from './styled';
6
6
  import FlexibleCard from '../../../../FlexibleCard';
7
7
  import { getSimulatedMetadata, getSimulatedBetterMetadata } from '../../../utils';
@@ -52,7 +52,8 @@ const HoverCardResolvedView = ({
52
52
  cardState,
53
53
  cardActions = [],
54
54
  onActionClick,
55
- extensionKey
55
+ extensionKey,
56
+ url
56
57
  }) => {
57
58
  var _cardState$details;
58
59
  const canBeDatasource = getCanBeDatasource(cardState.details);
@@ -117,6 +118,9 @@ const HoverCardResolvedView = ({
117
118
  size: SmartLinkSize.Large,
118
119
  overrideCss: metadataBlockCss,
119
120
  maxLines: 1
121
+ }), getBooleanFF('platform.linking-platform.smart-card.enable-hover-card-related-urls') && /*#__PURE__*/React.createElement(RelatedUrlsBlock, {
122
+ url: url,
123
+ size: SmartLinkSize.Small
120
124
  }), /*#__PURE__*/React.createElement(FooterBlock, {
121
125
  actions: footerActions,
122
126
  size: SmartLinkSize.Large,
@@ -8,7 +8,7 @@ import LinkWarningModal from './LinkWarningModal';
8
8
  import { getBooleanFF } from '@atlaskit/platform-feature-flags';
9
9
  const PACKAGE_DATA = {
10
10
  packageName: "@atlaskit/smart-card",
11
- packageVersion: "26.40.0",
11
+ packageVersion: "26.41.0",
12
12
  componentName: 'linkUrl'
13
13
  };
14
14
  const Link = withLinkClickedEvent('a');
@@ -536,5 +536,25 @@ export var messages = defineMessages({
536
536
  id: 'fabric.linking.forbidden_description_crossjoin',
537
537
  defaultMessage: 'Contact your admin to request access to {hostname}.',
538
538
  description: 'Informs the user that they must contact the site administrator for access.'
539
+ },
540
+ related_work_items_not_found: {
541
+ id: 'fabric.linking.related_work_items_not_found',
542
+ defaultMessage: 'This link is not mentioned anywhere else.',
543
+ description: 'Informs the user that there are no related resources for a given url'
544
+ },
545
+ last_mentioned_in: {
546
+ id: 'fabric.linking.last_mentioned_in',
547
+ defaultMessage: 'Last mentioned in',
548
+ description: 'Informs the user about where the resource was last mentioned in'
549
+ },
550
+ related: {
551
+ id: 'fabric.linking.related',
552
+ defaultMessage: 'Related',
553
+ description: 'Informs the user about related resources'
554
+ },
555
+ generic_error_message: {
556
+ id: 'fabric.linking.generic_error_message',
557
+ defaultMessage: 'An error occurred',
558
+ description: 'A generic error message to the user'
539
559
  }
540
560
  });
@@ -0,0 +1,30 @@
1
+ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
2
+ import _regeneratorRuntime from "@babel/runtime/regenerator";
3
+ import { useCallback } from 'react';
4
+ import { useSmartLinkClientExtension } from '@atlaskit/link-client-extension';
5
+ import { useSmartLinkContext } from '@atlaskit/link-provider';
6
+ var useRelatedUrls = function useRelatedUrls() {
7
+ var _useSmartLinkContext = useSmartLinkContext(),
8
+ connections = _useSmartLinkContext.connections;
9
+ var clientExt = useSmartLinkClientExtension(connections.client);
10
+ return useCallback( /*#__PURE__*/function () {
11
+ var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(url) {
12
+ return _regeneratorRuntime.wrap(function _callee$(_context) {
13
+ while (1) switch (_context.prev = _context.next) {
14
+ case 0:
15
+ _context.next = 2;
16
+ return clientExt.relatedUrls(url);
17
+ case 2:
18
+ return _context.abrupt("return", _context.sent);
19
+ case 3:
20
+ case "end":
21
+ return _context.stop();
22
+ }
23
+ }, _callee);
24
+ }));
25
+ return function (_x) {
26
+ return _ref.apply(this, arguments);
27
+ };
28
+ }(), [clientExt]);
29
+ };
30
+ export default useRelatedUrls;
@@ -15,7 +15,7 @@ export var ANALYTICS_CHANNEL = 'media';
15
15
  export var context = {
16
16
  componentName: 'smart-cards',
17
17
  packageName: "@atlaskit/smart-card",
18
- packageVersion: "26.40.0"
18
+ packageVersion: "26.41.0"
19
19
  };
20
20
  export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
21
21
  TrackQuickActionType["StatusUpdate"] = "StatusUpdate";
@@ -6,4 +6,5 @@ export { default as TitleBlock } from './title-block';
6
6
  export { default as CustomBlock } from './block';
7
7
 
8
8
  // Internal components to be used within @atlaskit/smart-card only.
9
- export { default as InternalFooterBlock } from './footer-block/resolved';
9
+ export { default as InternalFooterBlock } from './footer-block/resolved';
10
+ export { default as RelatedUrlsBlock } from './related-urls-block';
@@ -0,0 +1,18 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
+ var _excluded = ["testId"];
4
+ import React from 'react';
5
+ import { messages } from '../../../../../../messages';
6
+ import Text from '../../../elements/text';
7
+ import Block from '../../block';
8
+ export var RelatedUrlsBlockErroredView = function RelatedUrlsBlockErroredView(_ref) {
9
+ var testId = _ref.testId,
10
+ blockProps = _objectWithoutProperties(_ref, _excluded);
11
+ return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
12
+ testId: testId
13
+ }), /*#__PURE__*/React.createElement(Text, {
14
+ message: {
15
+ descriptor: messages.generic_error_message
16
+ }
17
+ }));
18
+ };
@@ -0,0 +1,89 @@
1
+ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
+ import _extends from "@babel/runtime/helpers/extends";
3
+ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
4
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
5
+ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
6
+ var _templateObject;
7
+ var _excluded = ["testId", "url", "renderers"];
8
+ import _regeneratorRuntime from "@babel/runtime/regenerator";
9
+ import React, { useEffect, useState } from 'react';
10
+ import { di } from 'react-magnetic-di';
11
+ import { css } from '@emotion/react';
12
+ import useRelatedUrls from '../../../../../state/hooks/use-related-urls';
13
+ import { RelatedUrlsBlockErroredView } from './errored';
14
+ import { RelatedUrlsResolvedView } from './resolved';
15
+ import { RelatedUrlsBlockResolvingView } from './resolving';
16
+ /**
17
+ * Represents a block to display related resources of a url
18
+ */
19
+ var RelatedUrlsBlock = function RelatedUrlsBlock(_ref) {
20
+ var _ref$testId = _ref.testId,
21
+ testId = _ref$testId === void 0 ? 'smart-block-related-urls' : _ref$testId,
22
+ url = _ref.url,
23
+ renderers = _ref.renderers,
24
+ blockProps = _objectWithoutProperties(_ref, _excluded);
25
+ var _useState = useState(true),
26
+ _useState2 = _slicedToArray(_useState, 2),
27
+ loadingRelatedUrls = _useState2[0],
28
+ setLoadingRelatedUrls = _useState2[1];
29
+ var _useState3 = useState(),
30
+ _useState4 = _slicedToArray(_useState3, 2),
31
+ err = _useState4[0],
32
+ setErr = _useState4[1];
33
+ var _useState5 = useState(),
34
+ _useState6 = _slicedToArray(_useState5, 2),
35
+ relatedUrls = _useState6[0],
36
+ setRelatedUrls = _useState6[1];
37
+ var getRelatedUrls = useRelatedUrls();
38
+ useEffect(function () {
39
+ var fetchRelatedUrls = /*#__PURE__*/function () {
40
+ var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
41
+ var relUrls;
42
+ return _regeneratorRuntime.wrap(function _callee$(_context) {
43
+ while (1) switch (_context.prev = _context.next) {
44
+ case 0:
45
+ _context.prev = 0;
46
+ _context.next = 3;
47
+ return getRelatedUrls(url);
48
+ case 3:
49
+ relUrls = _context.sent;
50
+ setRelatedUrls(relUrls);
51
+ _context.next = 10;
52
+ break;
53
+ case 7:
54
+ _context.prev = 7;
55
+ _context.t0 = _context["catch"](0);
56
+ setErr(_context.t0);
57
+ case 10:
58
+ setLoadingRelatedUrls(false);
59
+ case 11:
60
+ case "end":
61
+ return _context.stop();
62
+ }
63
+ }, _callee, null, [[0, 7]]);
64
+ }));
65
+ return function fetchRelatedUrls() {
66
+ return _ref2.apply(this, arguments);
67
+ };
68
+ }();
69
+ fetchRelatedUrls();
70
+ }, [getRelatedUrls, url]);
71
+ if (loadingRelatedUrls) {
72
+ return /*#__PURE__*/React.createElement(RelatedUrlsBlockResolvingView, _extends({
73
+ testId: "".concat(testId, "-resolving-view")
74
+ }, blockProps));
75
+ }
76
+ if (relatedUrls) {
77
+ return /*#__PURE__*/React.createElement(RelatedUrlsResolvedView, _extends({
78
+ renderers: renderers,
79
+ overrideCss: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n min-height: 1.55rem;\n "]))),
80
+ testId: "".concat(testId, "-resolved-view"),
81
+ relatedUrlsResponse: relatedUrls
82
+ }, blockProps));
83
+ }
84
+ return /*#__PURE__*/React.createElement(RelatedUrlsBlockErroredView, _extends({
85
+ err: err,
86
+ testId: "".concat(testId, "-errored-view")
87
+ }, blockProps));
88
+ };
89
+ export default RelatedUrlsBlock;
@@ -0,0 +1,23 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
+ var _excluded = ["relatedUrlsResponse", "renderers", "testId", "initializeOpened"];
4
+ import React from 'react';
5
+ import { messages } from '../../../../../../messages';
6
+ import Block from '../../block';
7
+ import RelatedUrlsList from './related-url-list';
8
+ export var RelatedUrlsResolvedView = function RelatedUrlsResolvedView(_ref) {
9
+ var resolvedResults = _ref.relatedUrlsResponse.resolvedResults,
10
+ renderers = _ref.renderers,
11
+ testId = _ref.testId,
12
+ initializeOpened = _ref.initializeOpened,
13
+ blockProps = _objectWithoutProperties(_ref, _excluded);
14
+ return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
15
+ testId: testId
16
+ }), resolvedResults && /*#__PURE__*/React.createElement(RelatedUrlsList, {
17
+ testId: "".concat(testId, "-list"),
18
+ renderers: renderers,
19
+ initializeOpened: initializeOpened,
20
+ title: messages.last_mentioned_in,
21
+ resolvedResults: resolvedResults
22
+ }));
23
+ };
@@ -0,0 +1,68 @@
1
+ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
+ var _templateObject;
4
+ import React, { useCallback, useMemo, useState } from 'react';
5
+ import { useIntl } from 'react-intl-next';
6
+ import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
7
+ import ChevronUpIcon from '@atlaskit/icon/glyph/chevron-up';
8
+ import { Box, Inline, Stack, xcss } from '@atlaskit/primitives';
9
+ import { css } from '@emotion/react';
10
+ import { messages } from '../../../../../../../messages';
11
+ import { getFormattedMessageAsString } from '../../../../../components/utils';
12
+ import Text from '../../../../elements/text';
13
+ import RelatedUrlItem from './related-url-item';
14
+ var RelatedUrlList = function RelatedUrlList(_ref) {
15
+ var resolvedResults = _ref.resolvedResults,
16
+ title = _ref.title,
17
+ renderers = _ref.renderers,
18
+ testId = _ref.testId,
19
+ initializeOpened = _ref.initializeOpened;
20
+ var _useState = useState(initializeOpened),
21
+ _useState2 = _slicedToArray(_useState, 2),
22
+ isOpen = _useState2[0],
23
+ setIsOpen = _useState2[1];
24
+ var chevronClickHandler = useCallback(function () {
25
+ return setIsOpen(!isOpen);
26
+ }, [isOpen]);
27
+ var ChevronComponent = isOpen ? ChevronUpIcon : ChevronDownIcon;
28
+ var intl = useIntl();
29
+ var resolvedResultsStack = useMemo(function () {
30
+ return /*#__PURE__*/React.createElement(Stack, {
31
+ space: "space.050",
32
+ testId: "".concat(testId, "-items-wrapper")
33
+ }, resolvedResults.map(function (resolvedResults, idx) {
34
+ return /*#__PURE__*/React.createElement(RelatedUrlItem, {
35
+ testId: "".concat(testId, "-item"),
36
+ key: idx,
37
+ results: resolvedResults,
38
+ renderers: renderers
39
+ });
40
+ }));
41
+ }, [renderers, resolvedResults, testId]);
42
+ return resolvedResults.length > 0 ? /*#__PURE__*/React.createElement(Stack, {
43
+ testId: testId,
44
+ xcss: xcss({
45
+ width: '100%'
46
+ })
47
+ }, /*#__PURE__*/React.createElement(Box, {
48
+ onClick: chevronClickHandler,
49
+ testId: "".concat(testId, "-expand-title")
50
+ }, /*#__PURE__*/React.createElement(Inline, {
51
+ alignBlock: "center",
52
+ spread: "space-between"
53
+ }, /*#__PURE__*/React.createElement(Text, {
54
+ overrideCss: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n font-weight: ", ";\n "])), "var(--ds-font-weight-medium, 500)"),
55
+ message: {
56
+ descriptor: title
57
+ }
58
+ }), /*#__PURE__*/React.createElement(ChevronComponent, {
59
+ label: getFormattedMessageAsString(intl, title),
60
+ size: 'medium'
61
+ }))), isOpen && resolvedResultsStack) : /*#__PURE__*/React.createElement(Text, {
62
+ testId: testId,
63
+ message: {
64
+ descriptor: messages.related_work_items_not_found
65
+ }
66
+ });
67
+ };
68
+ export default RelatedUrlList;
@@ -0,0 +1,33 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import React, { useMemo } from 'react';
3
+ import { Inline } from '@atlaskit/primitives';
4
+ import { SmartLinkSize } from '../../../../../../../../constants';
5
+ import extractFlexibleUiContext from '../../../../../../../../extractors/flexible';
6
+ import Icon from '../../../../../elements/icon';
7
+ import Link from '../../../../../elements/link';
8
+ var RelatedUrlItem = function RelatedUrlItem(_ref) {
9
+ var results = _ref.results,
10
+ renderers = _ref.renderers,
11
+ testId = _ref.testId;
12
+ var flexibleDataContext = useMemo(function () {
13
+ return extractFlexibleUiContext({
14
+ response: results,
15
+ renderers: renderers
16
+ });
17
+ }, [renderers, results]);
18
+ return /*#__PURE__*/React.createElement(Inline, {
19
+ alignBlock: "center",
20
+ space: "space.050",
21
+ testId: testId
22
+ }, /*#__PURE__*/React.createElement(Icon, _extends({}, flexibleDataContext === null || flexibleDataContext === void 0 ? void 0 : flexibleDataContext.linkIcon, {
23
+ testId: "".concat(testId, "-icon"),
24
+ size: SmartLinkSize.Small
25
+ })), /*#__PURE__*/React.createElement(Link, {
26
+ testId: "".concat(testId, "-link"),
27
+ text: flexibleDataContext === null || flexibleDataContext === void 0 ? void 0 : flexibleDataContext.title,
28
+ url: flexibleDataContext === null || flexibleDataContext === void 0 ? void 0 : flexibleDataContext.url,
29
+ size: SmartLinkSize.Small,
30
+ maxLines: 1
31
+ }));
32
+ };
33
+ export default RelatedUrlItem;
@@ -0,0 +1,16 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
+ var _excluded = ["testId"];
4
+ import React from 'react';
5
+ import LoadingSkeleton from '../../../common/loading-skeleton';
6
+ import Block from '../../block';
7
+ export var RelatedUrlsBlockResolvingView = function RelatedUrlsBlockResolvingView(_ref) {
8
+ var testId = _ref.testId,
9
+ blockProps = _objectWithoutProperties(_ref, _excluded);
10
+ return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
11
+ testId: testId
12
+ }), /*#__PURE__*/React.createElement(LoadingSkeleton, {
13
+ height: 1.55,
14
+ width: 22
15
+ }));
16
+ };
@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
2
2
  import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
3
3
  import React, { useCallback, useEffect, useMemo, useRef } from 'react';
4
4
  import { ActionName, CardDisplay, SmartLinkPosition, SmartLinkSize } from '../../../../../constants';
5
- import { FooterBlock, MetadataBlock, SnippetBlock, TitleBlock } from '../../../../FlexibleCard/components/blocks';
5
+ import { FooterBlock, MetadataBlock, RelatedUrlsBlock, SnippetBlock, TitleBlock } from '../../../../FlexibleCard/components/blocks';
6
6
  import { footerBlockCss, hiddenSnippetStyles, metadataBlockCss } from './styled';
7
7
  import FlexibleCard from '../../../../FlexibleCard';
8
8
  import { getSimulatedMetadata, getSimulatedBetterMetadata } from '../../../utils';
@@ -55,7 +55,8 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
55
55
  _ref$cardActions = _ref.cardActions,
56
56
  cardActions = _ref$cardActions === void 0 ? [] : _ref$cardActions,
57
57
  onActionClick = _ref.onActionClick,
58
- extensionKey = _ref.extensionKey;
58
+ extensionKey = _ref.extensionKey,
59
+ url = _ref.url;
59
60
  var canBeDatasource = getCanBeDatasource(cardState.details);
60
61
  useEffect(function () {
61
62
  // Since this hover view is only rendered on resolved status,
@@ -119,6 +120,9 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref) {
119
120
  size: SmartLinkSize.Large,
120
121
  overrideCss: metadataBlockCss,
121
122
  maxLines: 1
123
+ }), getBooleanFF('platform.linking-platform.smart-card.enable-hover-card-related-urls') && /*#__PURE__*/React.createElement(RelatedUrlsBlock, {
124
+ url: url,
125
+ size: SmartLinkSize.Small
122
126
  }), /*#__PURE__*/React.createElement(FooterBlock, {
123
127
  actions: footerActions,
124
128
  size: SmartLinkSize.Large,
@@ -11,7 +11,7 @@ import LinkWarningModal from './LinkWarningModal';
11
11
  import { getBooleanFF } from '@atlaskit/platform-feature-flags';
12
12
  var PACKAGE_DATA = {
13
13
  packageName: "@atlaskit/smart-card",
14
- packageVersion: "26.40.0",
14
+ packageVersion: "26.41.0",
15
15
  componentName: 'linkUrl'
16
16
  };
17
17
  var Link = withLinkClickedEvent('a');
@@ -1,6 +1,6 @@
1
1
  import { MessageDescriptor } from 'react-intl-next';
2
2
  export type RequestAccessMessageKey = 'click_to_join' | 'click_to_join_description' | 'forbidden_description' | 'request_access' | 'request_access_description' | 'request_access_pending' | 'request_access_pending_description' | 'request_denied_description' | 'default_no_access_title_crossjoin' | 'direct_access_title_crossjoin' | 'direct_access_description_crossjoin' | 'direct_access_crossjoin' | 'request_access_description_crossjoin' | 'request_access_crossjoin' | 'request_access_pending_title_crossjoin' | 'request_access_pending_description_crossjoin' | 'request_access_pending_crossjoin' | 'request_denied_description_crossjoin' | 'access_exists_description_crossjoin' | 'not_found_description_crossjoin' | 'not_found_title_crossjoin';
3
- export type MessageKey = 'assigned_to' | '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' | 'could_not_load_link' | 'download' | 'follow' | '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' | '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_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' | 'view' | 'viewIn' | 'viewOriginal' | 'actions' | 'add_account' | 'cancel' | 'close' | 'connect_to' | 'connect_account_description' | 'retry' | 'save' | 'unlink_account' | RequestAccessMessageKey;
3
+ export type MessageKey = 'assigned_to' | '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' | 'could_not_load_link' | 'download' | 'follow' | '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' | '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_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' | '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';
4
4
  type Messages = {
5
5
  [K in MessageKey]: MessageDescriptor;
6
6
  };
@@ -0,0 +1,6 @@
1
+ import { JsonLd } from 'json-ld-types';
2
+ export type RelatedUrlsResponse = {
3
+ resolvedResults?: JsonLd.Response[];
4
+ };
5
+ declare const useRelatedUrls: () => (url: any) => Promise<RelatedUrlsResponse>;
6
+ export default useRelatedUrls;
@@ -5,3 +5,4 @@ export { default as SnippetBlock } from './snippet-block';
5
5
  export { default as TitleBlock } from './title-block';
6
6
  export { default as CustomBlock } from './block';
7
7
  export { default as InternalFooterBlock } from './footer-block/resolved';
8
+ export { default as RelatedUrlsBlock } from './related-urls-block';
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ import { RelatedUrlsBlockErroredViewProps } from './types';
3
+ export declare const RelatedUrlsBlockErroredView: React.FC<RelatedUrlsBlockErroredViewProps>;
@@ -0,0 +1,4 @@
1
+ import { BlockProps } from '../../types';
2
+ export type RelatedUrlsBlockErroredViewProps = {
3
+ err?: Error;
4
+ } & BlockProps;
@@ -0,0 +1,13 @@
1
+ import React from 'react';
2
+ import { CardProviderRenderers } from '@atlaskit/link-provider';
3
+ import { BlockProps } from '../types';
4
+ export type RelatedUrlBlockProps = {
5
+ url: string;
6
+ renderers?: CardProviderRenderers;
7
+ testId?: string;
8
+ } & BlockProps;
9
+ /**
10
+ * Represents a block to display related resources of a url
11
+ */
12
+ declare const RelatedUrlsBlock: React.FC<RelatedUrlBlockProps>;
13
+ export default RelatedUrlsBlock;
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ import { RelatedUrlsProps } from './types';
3
+ export declare const RelatedUrlsResolvedView: React.FC<RelatedUrlsProps>;
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { ResolvedResultProps } from './types';
3
+ declare const RelatedUrlList: React.FC<ResolvedResultProps>;
4
+ export default RelatedUrlList;
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { ResolvedResultItemProps } from './types';
3
+ declare const RelatedUrlItem: React.FC<ResolvedResultItemProps>;
4
+ export default RelatedUrlItem;
@@ -0,0 +1,7 @@
1
+ import { JsonLd } from 'json-ld-types';
2
+ import { CardProviderRenderers } from '@atlaskit/link-provider';
3
+ export type ResolvedResultItemProps = {
4
+ results: JsonLd.Response;
5
+ renderers?: CardProviderRenderers;
6
+ testId: string;
7
+ };
@@ -0,0 +1,10 @@
1
+ import { JsonLd } from 'json-ld-types';
2
+ import { MessageDescriptor } from 'react-intl-next';
3
+ import { CardProviderRenderers } from '@atlaskit/link-provider';
4
+ export type ResolvedResultProps = {
5
+ testId: string;
6
+ title: MessageDescriptor;
7
+ initializeOpened?: boolean;
8
+ resolvedResults: JsonLd.Response[];
9
+ renderers?: CardProviderRenderers;
10
+ };