@atlaskit/smart-card 21.2.0 → 22.1.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 (128) hide show
  1. package/CHANGELOG.md +56 -0
  2. package/dist/cjs/extractors/block/index.js +6 -7
  3. package/dist/cjs/extractors/common/actions/extractPreviewAction.js +16 -19
  4. package/dist/cjs/state/actions/index.js +54 -10
  5. package/dist/cjs/state/analytics/types.js +5 -0
  6. package/dist/cjs/state/analytics/useSmartLinkAnalytics.js +429 -109
  7. package/dist/cjs/state/hooks-external/useSmartLinkActions.js +5 -3
  8. package/dist/cjs/utils/analytics/analytics.js +241 -74
  9. package/dist/cjs/utils/analytics/index.js +32 -5
  10. package/dist/cjs/utils/mocks.js +28 -2
  11. package/dist/cjs/version.json +1 -1
  12. package/dist/cjs/view/BlockCard/actions/PreviewAction.js +2 -2
  13. package/dist/cjs/view/BlockCard/index.js +6 -5
  14. package/dist/cjs/view/CardWithUrl/component.js +27 -5
  15. package/dist/cjs/view/CardWithUrl/loader.js +6 -1
  16. package/dist/cjs/view/EmbedCard/index.js +3 -2
  17. package/dist/cjs/view/EmbedModal/components/analytics/index.js +100 -0
  18. package/dist/cjs/view/EmbedModal/components/analytics/types.js +5 -0
  19. package/dist/cjs/view/EmbedModal/components/size-experiment/index.js +5 -10
  20. package/dist/cjs/view/EmbedModal/index.js +54 -15
  21. package/dist/cjs/view/EmbedModal/types.js +9 -1
  22. package/dist/cjs/view/FlexibleCard/components/blocks/block/index.js +17 -3
  23. package/dist/cjs/view/FlexibleCard/components/blocks/preview-block/index.js +5 -2
  24. package/dist/cjs/view/FlexibleCard/components/common/image-icon/index.js +4 -2
  25. package/dist/cjs/view/FlexibleCard/components/common/loading-skeleton/index.js +1 -2
  26. package/dist/cjs/view/FlexibleCard/components/elements/media/index.js +5 -2
  27. package/dist/cjs/view/HoverCard/components/HoverCardComponent.js +11 -3
  28. package/dist/cjs/view/HoverCard/components/HoverCardContent.js +36 -8
  29. package/dist/cjs/view/HoverCard/components/SnippetOrPreview.js +74 -0
  30. package/dist/cjs/view/HoverCard/index.js +6 -1
  31. package/dist/cjs/view/HoverCard/styled.js +11 -3
  32. package/dist/cjs/view/common/Modal.js +29 -4
  33. package/dist/cjs/view/common/ModalHeader.js +3 -2
  34. package/dist/es2019/extractors/block/index.js +6 -7
  35. package/dist/es2019/extractors/common/actions/extractPreviewAction.js +16 -10
  36. package/dist/es2019/state/actions/index.js +54 -10
  37. package/dist/es2019/state/analytics/types.js +1 -0
  38. package/dist/es2019/state/analytics/useSmartLinkAnalytics.js +424 -41
  39. package/dist/es2019/state/hooks-external/useSmartLinkActions.js +5 -3
  40. package/dist/es2019/utils/analytics/analytics.js +254 -79
  41. package/dist/es2019/utils/analytics/index.js +32 -4
  42. package/dist/es2019/utils/mocks.js +26 -1
  43. package/dist/es2019/version.json +1 -1
  44. package/dist/es2019/view/BlockCard/actions/PreviewAction.js +3 -3
  45. package/dist/es2019/view/BlockCard/index.js +5 -4
  46. package/dist/es2019/view/CardWithUrl/component.js +27 -5
  47. package/dist/es2019/view/CardWithUrl/loader.js +6 -1
  48. package/dist/es2019/view/EmbedCard/index.js +3 -2
  49. package/dist/es2019/view/EmbedModal/components/analytics/index.js +80 -0
  50. package/dist/es2019/view/EmbedModal/components/analytics/types.js +1 -0
  51. package/dist/es2019/view/EmbedModal/components/size-experiment/index.js +5 -9
  52. package/dist/es2019/view/EmbedModal/index.js +46 -13
  53. package/dist/es2019/view/EmbedModal/types.js +6 -1
  54. package/dist/es2019/view/FlexibleCard/components/blocks/block/index.js +17 -7
  55. package/dist/es2019/view/FlexibleCard/components/blocks/preview-block/index.js +4 -1
  56. package/dist/es2019/view/FlexibleCard/components/common/image-icon/index.js +4 -2
  57. package/dist/es2019/view/FlexibleCard/components/common/loading-skeleton/index.js +2 -3
  58. package/dist/es2019/view/FlexibleCard/components/elements/media/index.js +5 -2
  59. package/dist/es2019/view/HoverCard/components/HoverCardComponent.js +11 -3
  60. package/dist/es2019/view/HoverCard/components/HoverCardContent.js +36 -10
  61. package/dist/es2019/view/HoverCard/components/SnippetOrPreview.js +42 -0
  62. package/dist/es2019/view/HoverCard/index.js +6 -1
  63. package/dist/es2019/view/HoverCard/styled.js +8 -0
  64. package/dist/es2019/view/common/Modal.js +27 -6
  65. package/dist/es2019/view/common/ModalHeader.js +3 -2
  66. package/dist/esm/extractors/block/index.js +6 -7
  67. package/dist/esm/extractors/common/actions/extractPreviewAction.js +17 -19
  68. package/dist/esm/state/actions/index.js +54 -10
  69. package/dist/esm/state/analytics/types.js +1 -0
  70. package/dist/esm/state/analytics/useSmartLinkAnalytics.js +428 -111
  71. package/dist/esm/state/hooks-external/useSmartLinkActions.js +5 -3
  72. package/dist/esm/utils/analytics/analytics.js +241 -74
  73. package/dist/esm/utils/analytics/index.js +31 -4
  74. package/dist/esm/utils/mocks.js +25 -0
  75. package/dist/esm/version.json +1 -1
  76. package/dist/esm/view/BlockCard/actions/PreviewAction.js +3 -3
  77. package/dist/esm/view/BlockCard/index.js +5 -4
  78. package/dist/esm/view/CardWithUrl/component.js +27 -5
  79. package/dist/esm/view/CardWithUrl/loader.js +6 -1
  80. package/dist/esm/view/EmbedCard/index.js +3 -2
  81. package/dist/esm/view/EmbedModal/components/analytics/index.js +82 -0
  82. package/dist/esm/view/EmbedModal/components/analytics/types.js +1 -0
  83. package/dist/esm/view/EmbedModal/components/size-experiment/index.js +5 -10
  84. package/dist/esm/view/EmbedModal/index.js +52 -15
  85. package/dist/esm/view/EmbedModal/types.js +6 -1
  86. package/dist/esm/view/FlexibleCard/components/blocks/block/index.js +11 -3
  87. package/dist/esm/view/FlexibleCard/components/blocks/preview-block/index.js +5 -2
  88. package/dist/esm/view/FlexibleCard/components/common/image-icon/index.js +4 -2
  89. package/dist/esm/view/FlexibleCard/components/common/loading-skeleton/index.js +1 -2
  90. package/dist/esm/view/FlexibleCard/components/elements/media/index.js +5 -2
  91. package/dist/esm/view/HoverCard/components/HoverCardComponent.js +11 -3
  92. package/dist/esm/view/HoverCard/components/HoverCardContent.js +36 -10
  93. package/dist/esm/view/HoverCard/components/SnippetOrPreview.js +53 -0
  94. package/dist/esm/view/HoverCard/index.js +6 -1
  95. package/dist/esm/view/HoverCard/styled.js +6 -2
  96. package/dist/esm/view/common/Modal.js +28 -6
  97. package/dist/esm/view/common/ModalHeader.js +3 -2
  98. package/dist/types/extractors/block/types.d.ts +4 -2
  99. package/dist/types/extractors/common/actions/extractPreviewAction.d.ts +7 -5
  100. package/dist/types/state/analytics/types.d.ts +9 -0
  101. package/dist/types/state/analytics/useSmartLinkAnalytics.d.ts +41 -24
  102. package/dist/types/state/hooks/useSmartLink.d.ts +26 -18
  103. package/dist/types/state/hooks-external/useSmartLinkActions.d.ts +6 -2
  104. package/dist/types/utils/analytics/analytics.d.ts +19 -21
  105. package/dist/types/utils/analytics/index.d.ts +2 -2
  106. package/dist/types/utils/analytics/types.d.ts +91 -0
  107. package/dist/types/utils/mocks.d.ts +48 -0
  108. package/dist/types/utils/types.d.ts +3 -1
  109. package/dist/types/view/BlockCard/actions/PreviewAction.d.ts +4 -0
  110. package/dist/types/view/BlockCard/index.d.ts +2 -2
  111. package/dist/types/view/BlockCard/types.d.ts +4 -4
  112. package/dist/types/view/Card/index.d.ts +1 -1
  113. package/dist/types/view/EmbedCard/types.d.ts +2 -2
  114. package/dist/types/view/EmbedModal/components/analytics/index.d.ts +5 -0
  115. package/dist/types/view/EmbedModal/components/analytics/types.d.ts +6 -0
  116. package/dist/types/view/EmbedModal/components/size-experiment/index.d.ts +4 -3
  117. package/dist/types/view/EmbedModal/index.d.ts +3 -1
  118. package/dist/types/view/EmbedModal/types.d.ts +14 -4
  119. package/dist/types/view/FlexibleCard/components/blocks/preview-block/types.d.ts +7 -1
  120. package/dist/types/view/FlexibleCard/components/blocks/types.d.ts +15 -0
  121. package/dist/types/view/FlexibleCard/components/common/image-icon/types.d.ts +1 -0
  122. package/dist/types/view/FlexibleCard/components/elements/media/types.d.ts +5 -0
  123. package/dist/types/view/HoverCard/components/SnippetOrPreview.d.ts +4 -0
  124. package/dist/types/view/HoverCard/styled.d.ts +2 -0
  125. package/dist/types/view/HoverCard/types.d.ts +5 -0
  126. package/dist/types/view/common/Modal.d.ts +6 -8
  127. package/package.json +1 -1
  128. package/report.api.md +324 -108
package/CHANGELOG.md CHANGED
@@ -1,5 +1,61 @@
1
1
  # @atlaskit/smart-card
2
2
 
3
+ ## 22.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`c908307ef8e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c908307ef8e) - Embed Preview: Update embed preview modal analytics
8
+
9
+ ## 22.0.0
10
+
11
+ ### Major Changes
12
+
13
+ - [`e2bd5c50884`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e2bd5c50884) - This PR changes how Smart Link Analytics events are defined.
14
+ Analytics events now use object args rather than inline arguments.
15
+
16
+ Previously:
17
+
18
+ ```
19
+ const analytics = useSmartLinkAnalytics(
20
+ url,
21
+ analyticsHandler,
22
+ undefined,
23
+ location,
24
+ );
25
+ analytics.ui.cardClickedEvent(
26
+ id,
27
+ 'block',
28
+ 'resolved',
29
+ 'this-is-a-test-definition-id',
30
+ 'this-is-a-test-extension-key',
31
+ );
32
+ ```
33
+
34
+ After change:
35
+
36
+ ```
37
+ const analytics = useSmartLinkAnalytics(
38
+ url,
39
+ analyticsHandler,
40
+ undefined,
41
+ location,
42
+ );
43
+ analytics.ui.cardClickedEvent({
44
+ id,
45
+ display: 'block',
46
+ status: 'resolved',
47
+ definitionId: 'this-is-a-test-definition-id',
48
+ extensionKey: 'this-is-a-test-extension-key',
49
+ });
50
+ ```
51
+
52
+ ## 21.3.0
53
+
54
+ ### Minor Changes
55
+
56
+ - [`1c76ddcd2f3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1c76ddcd2f3) - [ux] Flex-UI: - Add props to generic block: - onRender - onTransitionEnd - blockRef
57
+ HoverCard: - use the above properties in Hover Card to apply transition to preview block and fallback to snippet
58
+
3
59
  ## 21.2.0
4
60
 
5
61
  ### Minor Changes
@@ -55,14 +55,13 @@ var extractBlockDetails = function extractBlockDetails(jsonLd) {
55
55
 
56
56
  var extractBlockActions = function extractBlockActions(props, jsonLd, opts, platform) {
57
57
  if (opts) {
58
- var featureFlags = opts.featureFlags,
59
- handleInvoke = opts.handleInvoke,
60
- handleAnalytics = opts.handleAnalytics,
61
- extensionKey = opts.extensionKey,
62
- source = opts.source,
63
- testId = opts.testId;
58
+ var handleInvoke = opts.handleInvoke;
64
59
  var actions = (0, _extractActions.extractActions)(jsonLd, handleInvoke);
65
- var previewAction = (0, _extractPreviewAction.extractPreviewAction)(extensionKey, props, jsonLd, handleInvoke, handleAnalytics, testId, platform, source, featureFlags); // The previewAction should always be the last action
60
+ var previewAction = (0, _extractPreviewAction.extractPreviewAction)(_objectSpread(_objectSpread({}, opts), {}, {
61
+ viewProps: props,
62
+ jsonLd: jsonLd,
63
+ platform: platform
64
+ })); // The previewAction should always be the last action
66
65
 
67
66
  if (previewAction) {
68
67
  actions.push(previewAction);
@@ -9,8 +9,6 @@ exports.extractPreviewAction = void 0;
9
9
 
10
10
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
11
 
12
- var _analytics = require("../../../utils/analytics");
13
-
14
12
  var _detail = require("../detail");
15
13
 
16
14
  var _extractors = require("@atlaskit/linking-common/extractors");
@@ -63,16 +61,19 @@ var getInvokeOpts = function getInvokeOpts(key, action, source) {
63
61
  };
64
62
  };
65
63
 
66
- var extractPreviewAction = function extractPreviewAction() {
67
- var extensionKey = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'empty-object-provider';
68
- var viewProps = arguments.length > 1 ? arguments[1] : undefined;
69
- var jsonLd = arguments.length > 2 ? arguments[2] : undefined;
70
- var handleInvoke = arguments.length > 3 ? arguments[3] : undefined;
71
- var handleAnalytics = arguments.length > 4 ? arguments[4] : undefined;
72
- var testId = arguments.length > 5 ? arguments[5] : undefined;
73
- var platform = arguments.length > 6 ? arguments[6] : undefined;
74
- var source = arguments.length > 7 ? arguments[7] : undefined;
75
- var featureFlags = arguments.length > 8 ? arguments[8] : undefined;
64
+ var extractPreviewAction = function extractPreviewAction(_ref) {
65
+ var _ref$extensionKey = _ref.extensionKey,
66
+ extensionKey = _ref$extensionKey === void 0 ? 'empty-object-provider' : _ref$extensionKey,
67
+ viewProps = _ref.viewProps,
68
+ jsonLd = _ref.jsonLd,
69
+ handleInvoke = _ref.handleInvoke,
70
+ testId = _ref.testId,
71
+ platform = _ref.platform,
72
+ origin = _ref.origin,
73
+ _ref$source = _ref.source,
74
+ source = _ref$source === void 0 ? 'block' : _ref$source,
75
+ featureFlags = _ref.featureFlags,
76
+ analytics = _ref.analytics;
76
77
  // Extract metadata from view props & raw JSON-LD.
77
78
  var metadataFromJsonLd = getMetadataFromJsonLd(jsonLd, platform);
78
79
  var metadataFromViewProps = getMetadataFromResolvedProps(viewProps);
@@ -84,14 +85,10 @@ var extractPreviewAction = function extractPreviewAction() {
84
85
  // Build action using instrumentation hooks.
85
86
  var key = extensionKey;
86
87
  var previewAction = (0, _BlockCard.PreviewAction)(_objectSpread(_objectSpread({}, metadata), {}, {
88
+ analytics: analytics,
89
+ origin: origin,
87
90
  featureFlags: featureFlags,
88
91
  testId: testId,
89
- onOpen: function onOpen() {
90
- handleAnalytics((0, _analytics.uiRenderSuccessEvent)('preview', 'resolved', key));
91
- },
92
- onOpenFailed: function onOpenFailed(error, errorInfo) {
93
- handleAnalytics((0, _analytics.uiRenderFailedEvent)('preview', error, errorInfo));
94
- },
95
92
  onDownloadActionClick: function onDownloadActionClick() {
96
93
  handleInvoke(getInvokeOpts(key, 'DownloadAction'));
97
94
  },
@@ -101,7 +98,7 @@ var extractPreviewAction = function extractPreviewAction() {
101
98
  })); // Setup props to go through proper Redux 'invocation' flow
102
99
  // for analytics, further state management if required in future.
103
100
 
104
- var previewActionProps = getInvokeOpts(key, 'PreviewAction', source !== null && source !== void 0 ? source : 'block'); // - Promise invoked by the action invocation handler; open preview.
101
+ var previewActionProps = getInvokeOpts(key, 'PreviewAction', source); // - Promise invoked by the action invocation handler; open preview.
105
102
 
106
103
  previewActionProps.action.promise = previewAction.promise; // - Promise invoked on click of `Preview` on block card; trigger above promise.
107
104
 
@@ -210,24 +210,51 @@ var useSmartCardActions = function useSmartCardActions(id, url, analytics) {
210
210
  var services = (0, _helpers.getServices)(details); // When authentication is triggered, let GAS know!
211
211
 
212
212
  if (status === 'unauthorized') {
213
- analytics.ui.authEvent(appearance, definitionId, extensionKey);
213
+ analytics.ui.authEvent({
214
+ display: appearance,
215
+ definitionId: definitionId,
216
+ extensionKey: extensionKey
217
+ });
214
218
  }
215
219
 
216
220
  if (status === 'forbidden') {
217
- analytics.ui.authAlternateAccountEvent(appearance, definitionId, extensionKey);
221
+ analytics.ui.authAlternateAccountEvent({
222
+ display: appearance,
223
+ definitionId: definitionId,
224
+ extensionKey: extensionKey
225
+ });
218
226
  }
219
227
 
220
228
  if (services.length > 0) {
221
- analytics.screen.authPopupEvent(definitionId, extensionKey);
229
+ analytics.screen.authPopupEvent({
230
+ definitionId: definitionId,
231
+ extensionKey: extensionKey
232
+ });
222
233
  (0, _outboundAuthFlowClient.auth)(services[0].url).then(function () {
223
- analytics.track.appAccountConnected(definitionId, extensionKey);
224
- analytics.operational.connectSucceededEvent(id, definitionId, extensionKey);
234
+ analytics.track.appAccountConnected({
235
+ definitionId: definitionId,
236
+ extensionKey: extensionKey
237
+ });
238
+ analytics.operational.connectSucceededEvent({
239
+ id: id,
240
+ definitionId: definitionId,
241
+ extensionKey: extensionKey
242
+ });
225
243
  reload();
226
244
  }, function (err) {
227
- analytics.operational.connectFailedEvent(id, definitionId, extensionKey, err.type);
245
+ analytics.operational.connectFailedEvent({
246
+ id: id,
247
+ definitionId: definitionId,
248
+ extensionKey: extensionKey,
249
+ reason: err.type
250
+ });
228
251
 
229
252
  if (err.type === 'auth_window_closed') {
230
- analytics.ui.closedAuthEvent(appearance, definitionId, extensionKey);
253
+ analytics.ui.closedAuthEvent({
254
+ display: appearance,
255
+ definitionId: definitionId,
256
+ extensionKey: extensionKey
257
+ });
231
258
  }
232
259
 
233
260
  reload();
@@ -248,7 +275,13 @@ var useSmartCardActions = function useSmartCardActions(id, url, analytics) {
248
275
  measure.mark(markName, 'pending');
249
276
  _context2.prev = 4;
250
277
  // Begin analytics instrumentation.
251
- analytics.ui.actionClickedEvent(id, key, action.type, source, opts.type); // Invoke action - either client-side or server-side.
278
+ analytics.ui.actionClickedEvent({
279
+ id: id,
280
+ extensionKey: key,
281
+ actionType: action.type,
282
+ display: source,
283
+ invokeType: opts.type
284
+ }); // Invoke action - either client-side or server-side.
252
285
 
253
286
  if (!(opts.type === 'client')) {
254
287
  _context2.next = 12;
@@ -272,14 +305,25 @@ var useSmartCardActions = function useSmartCardActions(id, url, analytics) {
272
305
 
273
306
  case 15:
274
307
  measure.mark(markName, 'resolved');
275
- analytics.operational.invokeSucceededEvent(id, key, action.type, source);
308
+ analytics.operational.invokeSucceededEvent({
309
+ id: id,
310
+ extensionKey: key,
311
+ actionType: action.type,
312
+ display: source
313
+ });
276
314
  return _context2.abrupt("return", response);
277
315
 
278
316
  case 20:
279
317
  _context2.prev = 20;
280
318
  _context2.t0 = _context2["catch"](4);
281
319
  measure.mark(markName, 'errored');
282
- analytics.operational.invokeFailedEvent(id, key, action.type, source, _context2.t0.message);
320
+ analytics.operational.invokeFailedEvent({
321
+ id: id,
322
+ extensionKey: key,
323
+ actionType: action.type,
324
+ display: source,
325
+ reason: _context2.t0.message
326
+ });
283
327
  throw _context2.t0;
284
328
 
285
329
  case 25:
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });