@atlaskit/smart-card 32.5.1 → 32.6.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 (59) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/analytics.spec.yaml +163 -0
  3. package/dist/cjs/state/actions/index.js +53 -49
  4. package/dist/cjs/state/analytics/useSmartLinkAnalytics.js +14 -128
  5. package/dist/cjs/utils/analytics/analytics.js +150 -234
  6. package/dist/cjs/utils/analytics/index.js +1 -89
  7. package/dist/cjs/view/CardWithUrl/component.js +37 -40
  8. package/dist/cjs/view/CardWithUrl/loader.js +7 -16
  9. package/dist/cjs/view/EmbedCard/index.js +19 -44
  10. package/dist/cjs/view/FlexibleCard/components/actions/action/server-action/index.js +12 -3
  11. package/dist/cjs/view/FlexibleCard/components/elements/lozenge/lozenge-action/index.js +11 -2
  12. package/dist/cjs/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-error/index.js +10 -2
  13. package/dist/cjs/view/HoverCard/components/HoverCardContent.js +64 -20
  14. package/dist/cjs/view/LinkUrl/index.js +1 -1
  15. package/dist/cjs/view/common/Metadata.js +1 -1
  16. package/dist/cjs/view/common/UnauthorisedViewContent.js +10 -2
  17. package/dist/es2019/state/actions/index.js +53 -49
  18. package/dist/es2019/state/analytics/useSmartLinkAnalytics.js +15 -136
  19. package/dist/es2019/utils/analytics/analytics.js +43 -133
  20. package/dist/es2019/utils/analytics/index.js +1 -61
  21. package/dist/es2019/view/CardWithUrl/component.js +37 -40
  22. package/dist/es2019/view/CardWithUrl/loader.js +7 -16
  23. package/dist/es2019/view/EmbedCard/index.js +20 -45
  24. package/dist/es2019/view/FlexibleCard/components/actions/action/server-action/index.js +12 -3
  25. package/dist/es2019/view/FlexibleCard/components/elements/lozenge/lozenge-action/index.js +11 -2
  26. package/dist/es2019/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-error/index.js +11 -2
  27. package/dist/es2019/view/HoverCard/components/HoverCardContent.js +63 -20
  28. package/dist/es2019/view/LinkUrl/index.js +1 -1
  29. package/dist/es2019/view/common/Metadata.js +1 -1
  30. package/dist/es2019/view/common/UnauthorisedViewContent.js +11 -2
  31. package/dist/esm/state/actions/index.js +53 -49
  32. package/dist/esm/state/analytics/useSmartLinkAnalytics.js +15 -129
  33. package/dist/esm/utils/analytics/analytics.js +149 -233
  34. package/dist/esm/utils/analytics/index.js +1 -59
  35. package/dist/esm/view/CardWithUrl/component.js +37 -40
  36. package/dist/esm/view/CardWithUrl/loader.js +7 -16
  37. package/dist/esm/view/EmbedCard/index.js +19 -44
  38. package/dist/esm/view/FlexibleCard/components/actions/action/server-action/index.js +12 -3
  39. package/dist/esm/view/FlexibleCard/components/elements/lozenge/lozenge-action/index.js +11 -2
  40. package/dist/esm/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-error/index.js +10 -2
  41. package/dist/esm/view/HoverCard/components/HoverCardContent.js +65 -21
  42. package/dist/esm/view/LinkUrl/index.js +1 -1
  43. package/dist/esm/view/common/Metadata.js +1 -1
  44. package/dist/esm/view/common/UnauthorisedViewContent.js +10 -2
  45. package/dist/types/common/analytics/generated/analytics.types.d.ts +83 -1
  46. package/dist/types/state/analytics/useSmartLinkAnalytics.d.ts +15 -38
  47. package/dist/types/state/hooks/useSmartLink.d.ts +0 -4
  48. package/dist/types/utils/analytics/analytics.d.ts +32 -16
  49. package/dist/types/utils/analytics/index.d.ts +1 -7
  50. package/dist/types/utils/analytics/types.d.ts +22 -22
  51. package/dist/types/utils/mocks.d.ts +0 -4
  52. package/dist/types-ts4.5/common/analytics/generated/analytics.types.d.ts +83 -1
  53. package/dist/types-ts4.5/state/analytics/useSmartLinkAnalytics.d.ts +15 -38
  54. package/dist/types-ts4.5/state/hooks/useSmartLink.d.ts +0 -4
  55. package/dist/types-ts4.5/utils/analytics/analytics.d.ts +32 -16
  56. package/dist/types-ts4.5/utils/analytics/index.d.ts +1 -7
  57. package/dist/types-ts4.5/utils/analytics/types.d.ts +22 -22
  58. package/dist/types-ts4.5/utils/mocks.d.ts +0 -4
  59. package/package.json +12 -15
@@ -74,16 +74,25 @@ function Component(_ref) {
74
74
  // Setup UI handlers.
75
75
  var handleClickWrapper = useCallback(function (event) {
76
76
  var isModifierKeyPressed = isSpecialEvent(event);
77
- analytics.ui.cardClickedEvent({
78
- id: id,
79
- display: isFlexibleUi ? CardDisplay.Flexible : appearance,
80
- status: state.status,
81
- definitionId: definitionId,
82
- extensionKey: extensionKey,
83
- isModifierKeyPressed: isModifierKeyPressed,
84
- destinationProduct: product,
85
- destinationSubproduct: subproduct
86
- });
77
+ if (fg('platform_migrate-some-ui-events-smart-card')) {
78
+ fireEvent('ui.smartLink.clicked', {
79
+ id: id,
80
+ display: isFlexibleUi ? CardDisplay.Flexible : appearance,
81
+ definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
82
+ isModifierKeyPressed: isModifierKeyPressed
83
+ });
84
+ } else {
85
+ analytics.ui.cardClickedEvent({
86
+ id: id,
87
+ display: isFlexibleUi ? CardDisplay.Flexible : appearance,
88
+ status: state.status,
89
+ definitionId: definitionId,
90
+ extensionKey: extensionKey,
91
+ isModifierKeyPressed: isModifierKeyPressed,
92
+ destinationProduct: product,
93
+ destinationSubproduct: subproduct
94
+ });
95
+ }
87
96
  if (!onClick && !isFlexibleUi) {
88
97
  var clickUrl = getClickUrl(url, state.details);
89
98
  // Ctrl+left click on mac typically doesn't trigger onClick
@@ -103,7 +112,7 @@ function Component(_ref) {
103
112
  }
104
113
  fireLinkClickedEvent(createAnalyticsEvent)(event);
105
114
  }
106
- }, [id, url, state.details, state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, isFlexibleUi, product, subproduct, createAnalyticsEvent]);
115
+ }, [id, url, state.details, state.status, analytics.ui, appearance, definitionId, extensionKey, onClick, isFlexibleUi, product, subproduct, createAnalyticsEvent, fireEvent]);
107
116
  var handleAuthorize = useCallback(function () {
108
117
  return actions.authorize(appearance);
109
118
  }, [actions, appearance]);
@@ -119,39 +128,27 @@ function Component(_ref) {
119
128
  useEffect(function () {
120
129
  measure.mark(id, state.status);
121
130
  if (state.status !== 'pending' && state.status !== 'resolving') {
131
+ var _state$error;
122
132
  measure.create(id, state.status);
123
- if (fg('platform_smart-card-migrate-operational-analytics')) {
124
- var _state$error;
125
- if (state.status === 'resolved') {
126
- var _measure$getMeasure$d, _measure$getMeasure;
127
- fireEvent('operational.smartLink.resolved', {
128
- definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
129
- duration: (_measure$getMeasure$d = (_measure$getMeasure = measure.getMeasure(id, state.status)) === null || _measure$getMeasure === void 0 ? void 0 : _measure$getMeasure.duration) !== null && _measure$getMeasure$d !== void 0 ? _measure$getMeasure$d : null
130
- });
131
- } else if (((_state$error = state.error) === null || _state$error === void 0 ? void 0 : _state$error.type) !== 'ResolveUnsupportedError') {
132
- fireEvent('operational.smartLink.unresolved', {
133
- definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
134
- reason: state.status,
135
- error: state.error === undefined ? null : {
136
- name: state.error.name,
137
- kind: state.error.kind,
138
- type: state.error.type
139
- }
140
- });
141
- }
142
- } else {
143
- var _state$error2;
144
- analytics.operational.instrument({
145
- id: id,
146
- status: state.status,
147
- definitionId: definitionId,
148
- extensionKey: extensionKey !== null && extensionKey !== void 0 ? extensionKey : (_state$error2 = state.error) === null || _state$error2 === void 0 ? void 0 : _state$error2.extensionKey,
149
- resourceType: resourceType,
150
- error: state.error
133
+ if (state.status === 'resolved') {
134
+ var _measure$getMeasure$d, _measure$getMeasure;
135
+ fireEvent('operational.smartLink.resolved', {
136
+ definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
137
+ duration: (_measure$getMeasure$d = (_measure$getMeasure = measure.getMeasure(id, state.status)) === null || _measure$getMeasure === void 0 ? void 0 : _measure$getMeasure.duration) !== null && _measure$getMeasure$d !== void 0 ? _measure$getMeasure$d : null
138
+ });
139
+ } else if (((_state$error = state.error) === null || _state$error === void 0 ? void 0 : _state$error.type) !== 'ResolveUnsupportedError') {
140
+ fireEvent('operational.smartLink.unresolved', {
141
+ definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null,
142
+ reason: state.status,
143
+ error: state.error === undefined ? null : {
144
+ name: state.error.name,
145
+ kind: state.error.kind,
146
+ type: state.error.type
147
+ }
151
148
  });
152
149
  }
153
150
  }
154
- }, [id, appearance, state.status, state.error, definitionId, extensionKey, resourceType, analytics.operational, fireEvent]);
151
+ }, [id, appearance, state.status, state.error, definitionId, extensionKey, resourceType, fireEvent]);
155
152
 
156
153
  // NB: once the smart-card has rendered into an end state, we capture
157
154
  // this as a successful render. These can be one of:
@@ -3,7 +3,6 @@ import React, { lazy, Suspense, useCallback, useEffect, useState } from 'react';
3
3
  import { ErrorBoundary } from 'react-error-boundary';
4
4
  import { di } from 'react-magnetic-di';
5
5
  import uuid from 'uuid';
6
- import { fg } from '@atlaskit/platform-feature-flags';
7
6
  import { useAnalyticsEvents } from '../../common/analytics/generated/use-analytics-events';
8
7
  import { useSmartLinkAnalytics } from '../../state/analytics';
9
8
  import { importWithRetry } from '../../utils';
@@ -69,20 +68,12 @@ export function CardWithURLRenderer(props) {
69
68
  // to the reliability of the smart-card front-end components.
70
69
  // Likewise, chunk loading errors are not caused by a failure of smart-card rendering.
71
70
  if (error.name === 'ChunkLoadError') {
72
- if (fg('platform_smart-card-migrate-operational-analytics')) {
73
- fireEvent('operational.smartLink.chunkLoadFailed', {
74
- display: appearance,
75
- error: error,
76
- errorInfo: errorInfo,
77
- definitionId: null
78
- });
79
- } else {
80
- analytics.operational.chunkloadFailedEvent({
81
- display: appearance,
82
- error: error,
83
- errorInfo: errorInfo
84
- });
85
- }
71
+ fireEvent('operational.smartLink.chunkLoadFailed', {
72
+ display: appearance,
73
+ error: error,
74
+ errorInfo: errorInfo,
75
+ definitionId: null
76
+ });
86
77
  } else if (error.name !== 'APIError') {
87
78
  analytics.ui.renderFailedEvent({
88
79
  display: isFlexibleUi ? 'flexible' : appearance,
@@ -96,7 +87,7 @@ export function CardWithURLRenderer(props) {
96
87
  url: url !== null && url !== void 0 ? url : '',
97
88
  err: error
98
89
  });
99
- }, [analytics.operational, analytics.ui, appearance, id, onError, url, isFlexibleUi, fireEvent]);
90
+ }, [analytics.ui, appearance, id, onError, url, isFlexibleUi, fireEvent]);
100
91
  if (!url) {
101
92
  throw new Error('@atlaskit/smart-card: url property is missing.');
102
93
  }
@@ -1,14 +1,11 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import React from 'react';
3
3
  import { useAnalyticsEvents } from '@atlaskit/analytics-next';
4
- import { fg } from '@atlaskit/platform-feature-flags';
5
- import { extractBlockProps } from '../../extractors/block';
6
4
  import { extractRequestAccessContextImproved } from '../../extractors/common/context/extractAccessContext';
7
5
  import { extractEmbedProps } from '../../extractors/embed';
8
6
  import { extractInlineProps } from '../../extractors/inline';
9
7
  import { getExtensionKey, hasAuthScopeOverrides } from '../../state/helpers';
10
8
  import { getEmptyJsonLd, getForbiddenJsonLd } from '../../utils/jsonld';
11
- import { BlockCardResolvedView, BlockCardResolvingView } from '../BlockCard';
12
9
  import FlexibleResolvedView from '../BlockCard/views/flexible/FlexibleResolvedView';
13
10
  import { InlineCardResolvedView } from '../InlineCard/ResolvedView';
14
11
  import { EmbedCardErroredView } from './views/ErroredView';
@@ -24,7 +21,6 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef)
24
21
  handleErrorRetry = _ref.handleErrorRetry,
25
22
  handleFrameClick = _ref.handleFrameClick,
26
23
  analytics = _ref.analytics,
27
- handleInvoke = _ref.handleInvoke,
28
24
  isSelected = _ref.isSelected,
29
25
  frameStyle = _ref.frameStyle,
30
26
  platform = _ref.platform,
@@ -48,23 +44,16 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef)
48
44
  switch (status) {
49
45
  case 'pending':
50
46
  case 'resolving':
51
- if (fg('smart-card-remove-block-card-from-embed')) {
52
- return /*#__PURE__*/React.createElement(FlexibleResolvedView, {
53
- url: url,
54
- cardState: cardState,
55
- onClick: handleFrameClick,
56
- onError: onError,
57
- onResolve: onResolve,
58
- renderers: renderers,
59
- actionOptions: actionOptions,
60
- analytics: analytics,
61
- testId: testId
62
- });
63
- }
64
- return /*#__PURE__*/React.createElement(BlockCardResolvingView, {
65
- testId: "embed-card-resolving-view",
66
- inheritDimensions: inheritDimensions,
67
- isSelected: isSelected
47
+ return /*#__PURE__*/React.createElement(FlexibleResolvedView, {
48
+ url: url,
49
+ cardState: cardState,
50
+ onClick: handleFrameClick,
51
+ onError: onError,
52
+ onResolve: onResolve,
53
+ renderers: renderers,
54
+ actionOptions: actionOptions,
55
+ analytics: analytics,
56
+ testId: testId ? "".concat(testId, "-resolving-view") : 'embed-card-resolving-view'
68
57
  });
69
58
  case 'resolved':
70
59
  var resolvedViewProps = extractEmbedProps(data, meta, platform, iframeUrlType);
@@ -96,31 +85,17 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef)
96
85
  onClick: handleFrameClick
97
86
  }));
98
87
  }
99
- if (fg('smart-card-remove-block-card-from-embed')) {
100
- return /*#__PURE__*/React.createElement(FlexibleResolvedView, {
101
- url: url,
102
- cardState: cardState,
103
- onClick: handleFrameClick,
104
- onError: onError,
105
- onResolve: onResolve,
106
- renderers: renderers,
107
- actionOptions: actionOptions,
108
- analytics: analytics,
109
- testId: testId
110
- });
111
- }
112
- var resolvedBlockViewProps = extractBlockProps(data, meta, {
88
+ return /*#__PURE__*/React.createElement(FlexibleResolvedView, {
89
+ url: url,
90
+ cardState: cardState,
91
+ onClick: handleFrameClick,
92
+ onError: onError,
93
+ onResolve: onResolve,
94
+ renderers: renderers,
95
+ actionOptions: actionOptions,
113
96
  analytics: analytics,
114
- origin: 'smartLinkEmbed',
115
- handleInvoke: handleInvoke,
116
- extensionKey: extensionKey,
117
- actionOptions: actionOptions
97
+ testId: testId
118
98
  });
119
- return /*#__PURE__*/React.createElement(BlockCardResolvedView, _extends({}, resolvedBlockViewProps, {
120
- isSelected: isSelected,
121
- testId: testId,
122
- onClick: handleFrameClick
123
- }));
124
99
  }
125
100
  case 'unauthorized':
126
101
  if (onError) {
@@ -5,6 +5,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
5
5
  var _excluded = ["action", "onClick", "onError"];
6
6
  import _regeneratorRuntime from "@babel/runtime/regenerator";
7
7
  import React, { useCallback, useState } from 'react';
8
+ import { fg } from '@atlaskit/platform-feature-flags';
8
9
  import { useAnalyticsEvents } from '../../../../../../common/analytics/generated/use-analytics-events';
9
10
  import { useFlexibleUiAnalyticsContext } from '../../../../../../state/flexible-ui-context';
10
11
  import useInvoke from '../../../../../../state/hooks/use-invoke';
@@ -38,9 +39,17 @@ var ServerAction = function ServerAction(_ref) {
38
39
  smartLinkActionType = (_action$action = action.action) === null || _action$action === void 0 ? void 0 : _action$action.actionType;
39
40
  _context.prev = 2;
40
41
  setIsLoading(true);
41
- analytics === null || analytics === void 0 || analytics.ui.smartLinkServerActionClickedEvent({
42
- smartLinkActionType: smartLinkActionType
43
- });
42
+ if (fg('platform_migrate-some-ui-events-smart-card')) {
43
+ if (smartLinkActionType === 'FollowEntityAction' || smartLinkActionType === 'UnfollowEntityAction') {
44
+ fireEvent('ui.button.clicked.smartLinkFollowButton', {});
45
+ } else {
46
+ fireEvent("ui.button.clicked.".concat(smartLinkActionType), {});
47
+ }
48
+ } else {
49
+ analytics === null || analytics === void 0 || analytics.ui.smartLinkServerActionClickedEvent({
50
+ smartLinkActionType: smartLinkActionType
51
+ });
52
+ }
44
53
  fireEvent('track.smartLinkQuickAction.started', {
45
54
  smartLinkActionType: smartLinkActionType
46
55
  });
@@ -11,6 +11,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
11
11
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
12
12
  import { jsx } from '@emotion/react';
13
13
  import DropdownMenu from '@atlaskit/dropdown-menu';
14
+ import { fg } from '@atlaskit/platform-feature-flags';
14
15
  import { useAnalyticsEvents } from '../../../../../../common/analytics/generated/use-analytics-events';
15
16
  import extractLozengeActionItems from '../../../../../../extractors/action/extract-lozenge-action-items';
16
17
  import { useFlexibleUiAnalyticsContext } from '../../../../../../state/flexible-ui-context';
@@ -94,7 +95,11 @@ var LozengeAction = function LozengeAction(_ref) {
94
95
  _context.next = 24;
95
96
  break;
96
97
  }
97
- analytics === null || analytics === void 0 || analytics.ui.smartLinkLozengeActionClickedEvent();
98
+ if (fg('platform_migrate-some-ui-events-smart-card')) {
99
+ fireEvent('ui.button.clicked.smartLinkStatusLozenge', {});
100
+ } else {
101
+ analytics === null || analytics === void 0 || analytics.ui.smartLinkLozengeActionClickedEvent();
102
+ }
98
103
  fireEvent('track.smartLinkQuickAction.started', {
99
104
  smartLinkActionType: TrackQuickActionType.StatusUpdate
100
105
  });
@@ -157,7 +162,11 @@ var LozengeAction = function LozengeAction(_ref) {
157
162
  while (1) switch (_context2.prev = _context2.next) {
158
163
  case 0:
159
164
  _context2.prev = 0;
160
- analytics === null || analytics === void 0 || analytics.ui.smartLinkLozengeActionListItemClickedEvent();
165
+ if (fg('platform_migrate-some-ui-events-smart-card')) {
166
+ fireEvent('ui.button.clicked.smartLinkStatusListItem', {});
167
+ } else {
168
+ analytics === null || analytics === void 0 || analytics.ui.smartLinkLozengeActionListItemClickedEvent();
169
+ }
161
170
  updateAction = action === null || action === void 0 ? void 0 : action.update;
162
171
  if (!(updateAction && id)) {
163
172
  _context2.next = 17;
@@ -12,7 +12,9 @@ import { jsx } from '@emotion/react';
12
12
  import { FormattedMessage } from 'react-intl-next';
13
13
  import { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
14
14
  import ErrorIcon from '@atlaskit/icon/core/migration/error';
15
+ import { fg } from '@atlaskit/platform-feature-flags';
15
16
  import { R50, R500 } from '@atlaskit/theme/colors';
17
+ import { useAnalyticsEvents } from '../../../../../../../common/analytics/generated/use-analytics-events';
16
18
  import { messages } from '../../../../../../../messages';
17
19
  import { useFlexibleUiAnalyticsContext } from '../../../../../../../state/flexible-ui-context';
18
20
  import useResolve from '../../../../../../../state/hooks/use-resolve';
@@ -26,6 +28,8 @@ var LozengeActionError = function LozengeActionError(_ref) {
26
28
  maxLineNumber = _ref$maxLineNumber === void 0 ? MAX_LINE_NUMBER : _ref$maxLineNumber,
27
29
  url = _ref.url,
28
30
  previewData = _ref.previewData;
31
+ var _useAnalyticsEvents = useAnalyticsEvents(),
32
+ fireEvent = _useAnalyticsEvents.fireEvent;
29
33
  var reload = useResolve();
30
34
  var analytics = useFlexibleUiAnalyticsContext();
31
35
  var isPreviewAvailable = previewData && previewData.src !== undefined;
@@ -36,13 +40,17 @@ var LozengeActionError = function LozengeActionError(_ref) {
36
40
  }, [reload, url]);
37
41
  var handlePreviewOpen = useCallback(function () {
38
42
  if (isPreviewAvailable) {
39
- analytics === null || analytics === void 0 || analytics.ui.smartLinkLozengeActionErrorOpenPreviewClickedEvent();
43
+ if (fg('platform_migrate-some-ui-events-smart-card')) {
44
+ fireEvent('ui.button.clicked.smartLinkStatusOpenPreview', {});
45
+ } else {
46
+ analytics === null || analytics === void 0 || analytics.ui.smartLinkLozengeActionErrorOpenPreviewClickedEvent();
47
+ }
40
48
  return openEmbedModalWithFlexibleUiIcon(_objectSpread(_objectSpread({}, previewData), {}, {
41
49
  analytics: analytics,
42
50
  onClose: handlePreviewClose
43
51
  }));
44
52
  }
45
- }, [analytics, handlePreviewClose, isPreviewAvailable, previewData]);
53
+ }, [analytics, handlePreviewClose, isPreviewAvailable, previewData, fireEvent]);
46
54
  var content = useMemo(function () {
47
55
  return jsx(Fragment, null, jsx("div", {
48
56
  css: contentStyles
@@ -6,11 +6,13 @@ import React, { useCallback, useEffect, useMemo, useRef } from 'react';
6
6
 
7
7
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
8
8
  import { jsx } from '@emotion/react';
9
- import { useAnalyticsEvents } from '@atlaskit/analytics-next';
9
+ import { useAnalyticsEvents as useAnalyticsEventsNext } from '@atlaskit/analytics-next';
10
10
  import { useSmartLinkContext } from '@atlaskit/link-provider';
11
+ import { fg } from '@atlaskit/platform-feature-flags';
12
+ import { useAnalyticsEvents } from '../../../common/analytics/generated/use-analytics-events';
11
13
  import { CardDisplay, SmartLinkPosition, SmartLinkSize } from '../../../constants';
12
14
  import { useSmartLinkAnalytics } from '../../../state/analytics';
13
- import { getExtensionKey, getServices } from '../../../state/helpers';
15
+ import { getDefinitionId, getExtensionKey, getServices } from '../../../state/helpers';
14
16
  import { useSmartCardState } from '../../../state/store';
15
17
  import { isSpecialEvent } from '../../../utils';
16
18
  import { getIsAISummaryEnabled } from '../../../utils/ai-summary';
@@ -36,8 +38,10 @@ var HoverCardContent = function HoverCardContent(_ref) {
36
38
  onMouseEnter = _ref.onMouseEnter,
37
39
  onMouseLeave = _ref.onMouseLeave,
38
40
  actionOptions = _ref.actionOptions;
41
+ var _useAnalyticsEventsNe = useAnalyticsEventsNext(),
42
+ createAnalyticsEvent = _useAnalyticsEventsNe.createAnalyticsEvent;
39
43
  var _useAnalyticsEvents = useAnalyticsEvents(),
40
- createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
44
+ fireEvent = _useAnalyticsEvents.fireEvent;
41
45
  var defaultAnalytics = useSmartLinkAnalytics(url, id);
42
46
  var analytics = _analytics !== null && _analytics !== void 0 ? _analytics : defaultAnalytics;
43
47
  var extensionKey = useMemo(function () {
@@ -45,12 +49,17 @@ var HoverCardContent = function HoverCardContent(_ref) {
45
49
  }, [cardState.details]);
46
50
  var linkState = useSmartCardState(url);
47
51
  var linkStatus = (_linkState$status = linkState.status) !== null && _linkState$status !== void 0 ? _linkState$status : 'pending';
52
+ var definitionId = useMemo(function () {
53
+ return getDefinitionId(cardState.details);
54
+ }, [cardState.details]);
48
55
  var _useSmartLinkContext = useSmartLinkContext(),
49
56
  isAdminHubAIEnabled = _useSmartLinkContext.isAdminHubAIEnabled;
50
57
  var isAISummaryEnabled = getIsAISummaryEnabled(isAdminHubAIEnabled, cardState.details);
51
58
  var services = getServices(linkState.details);
52
59
  var statusRef = useRef(linkStatus);
53
60
  var analyticsRef = useRef(analytics);
61
+ var fireEventRef = useRef(fireEvent);
62
+ var definitionIdRef = useRef(definitionId);
54
63
  useEffect(function () {
55
64
  /**
56
65
  * Must access current analytics object value via ref because its not stable
@@ -62,37 +71,72 @@ var HoverCardContent = function HoverCardContent(_ref) {
62
71
  if (statusRef.current !== linkStatus) {
63
72
  statusRef.current = linkStatus;
64
73
  }
65
- }, [analytics, linkStatus]);
74
+ if (fireEventRef.current !== fireEvent) {
75
+ fireEventRef.current = fireEvent;
76
+ }
77
+ if (definitionIdRef.current !== definitionId) {
78
+ definitionIdRef.current = definitionId;
79
+ }
80
+ }, [analytics, linkStatus, fireEvent, definitionId]);
66
81
  useEffect(function () {
67
82
  var previewDisplay = 'card';
68
83
  var previewInvokeMethod = 'mouse_hover';
69
84
  var cardOpenTime = Date.now();
70
- analyticsRef.current.ui.hoverCardViewedEvent({
71
- previewDisplay: previewDisplay,
72
- previewInvokeMethod: previewInvokeMethod,
73
- status: statusRef.current
74
- });
75
- return function () {
76
- var hoverTime = Date.now() - cardOpenTime;
77
- analyticsRef.current.ui.hoverCardDismissedEvent({
85
+ var fireEventCurrent = fireEventRef.current;
86
+ if (fg('platform_migrate-some-ui-events-smart-card')) {
87
+ var _definitionIdRef$curr;
88
+ fireEventCurrent('ui.hoverCard.viewed', {
89
+ previewDisplay: previewDisplay,
90
+ previewInvokeMethod: previewInvokeMethod,
91
+ definitionId: (_definitionIdRef$curr = definitionIdRef.current) !== null && _definitionIdRef$curr !== void 0 ? _definitionIdRef$curr : null
92
+ });
93
+ } else {
94
+ analyticsRef.current.ui.hoverCardViewedEvent({
78
95
  previewDisplay: previewDisplay,
79
96
  previewInvokeMethod: previewInvokeMethod,
80
- hoverTime: hoverTime,
81
97
  status: statusRef.current
82
98
  });
99
+ }
100
+ return function () {
101
+ var hoverTime = Date.now() - cardOpenTime;
102
+ if (fg('platform_migrate-some-ui-events-smart-card')) {
103
+ var _definitionIdRef$curr2;
104
+ fireEventCurrent('ui.hoverCard.dismissed', {
105
+ previewDisplay: previewDisplay,
106
+ previewInvokeMethod: previewInvokeMethod,
107
+ hoverTime: hoverTime,
108
+ definitionId: (_definitionIdRef$curr2 = definitionIdRef.current) !== null && _definitionIdRef$curr2 !== void 0 ? _definitionIdRef$curr2 : null
109
+ });
110
+ } else {
111
+ analyticsRef.current.ui.hoverCardDismissedEvent({
112
+ previewDisplay: previewDisplay,
113
+ previewInvokeMethod: previewInvokeMethod,
114
+ hoverTime: hoverTime,
115
+ status: statusRef.current
116
+ });
117
+ }
83
118
  };
84
119
  }, []);
85
120
  var onClick = useCallback(function (event) {
86
121
  var isModifierKeyPressed = isSpecialEvent(event);
87
- analytics.ui.cardClickedEvent({
88
- id: id,
89
- display: CardDisplay.HoverCardPreview,
90
- status: cardState.status,
91
- isModifierKeyPressed: isModifierKeyPressed,
92
- actionSubjectId: 'titleGoToLink'
93
- });
122
+ if (fg('platform_migrate-some-ui-events-smart-card')) {
123
+ fireEvent('ui.smartLink.clicked.titleGoToLink', {
124
+ id: id,
125
+ display: CardDisplay.HoverCardPreview,
126
+ isModifierKeyPressed: isModifierKeyPressed,
127
+ definitionId: definitionId !== null && definitionId !== void 0 ? definitionId : null
128
+ });
129
+ } else {
130
+ analytics.ui.cardClickedEvent({
131
+ id: id,
132
+ display: CardDisplay.HoverCardPreview,
133
+ status: cardState.status,
134
+ isModifierKeyPressed: isModifierKeyPressed,
135
+ actionSubjectId: 'titleGoToLink'
136
+ });
137
+ }
94
138
  fireLinkClickedEvent(createAnalyticsEvent)(event);
95
- }, [createAnalyticsEvent, cardState.status, analytics.ui, id]);
139
+ }, [createAnalyticsEvent, cardState.status, analytics.ui, id, fireEvent, definitionId]);
96
140
  var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
97
141
  var _getMetadata = getMetadata(extensionKey, data),
98
142
  subtitle = _getMetadata.subtitle;
@@ -13,7 +13,7 @@ import LinkWarningModal from './LinkWarningModal';
13
13
  import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
14
14
  var PACKAGE_DATA = {
15
15
  packageName: "@atlaskit/smart-card",
16
- packageVersion: "32.5.1",
16
+ packageVersion: "32.6.0",
17
17
  componentName: 'linkUrl'
18
18
  };
19
19
  var Anchor = withLinkClickedEvent('a');
@@ -16,7 +16,7 @@ var imgStyles = css({
16
16
  height: "var(--ds-space-100, 8px)"
17
17
  });
18
18
  var textStyles = css({
19
- fontSize: "var(--ds-space-150, 12px)",
19
+ font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
20
20
  color: "".concat("var(--ds-text-subtlest, ".concat(N300, ")")),
21
21
  marginRight: "var(--ds-space-050, 4px)",
22
22
  marginLeft: "var(--ds-space-025, 2px)"
@@ -1,6 +1,8 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import React, { useCallback } from 'react';
3
3
  import { FormattedMessage } from 'react-intl-next';
4
+ import { fg } from '@atlaskit/platform-feature-flags';
5
+ import { useAnalyticsEvents } from '../../common/analytics/generated/use-analytics-events';
4
6
  import { CONTENT_URL_3P_ACCOUNT_AUTH, CONTENT_URL_SECURITY_AND_PERMISSIONS } from '../../constants';
5
7
  import { messages } from '../../messages';
6
8
  /**
@@ -13,9 +15,15 @@ var UnauthorisedViewContent = function UnauthorisedViewContent(_ref) {
13
15
  _ref$testId = _ref.testId,
14
16
  testId = _ref$testId === void 0 ? 'unauthorised-view-content' : _ref$testId,
15
17
  analytics = _ref.analytics;
18
+ var _useAnalyticsEvents = useAnalyticsEvents(),
19
+ fireEvent = _useAnalyticsEvents.fireEvent;
16
20
  var handleLearnMoreClick = useCallback(function () {
17
- analytics === null || analytics === void 0 || analytics.ui.learnMoreClickedEvent();
18
- }, [analytics === null || analytics === void 0 ? void 0 : analytics.ui]);
21
+ if (fg('platform_migrate-some-ui-events-smart-card')) {
22
+ fireEvent('ui.button.clicked.learnMore', {});
23
+ } else {
24
+ analytics === null || analytics === void 0 || analytics.ui.learnMoreClickedEvent();
25
+ }
26
+ }, [analytics === null || analytics === void 0 ? void 0 : analytics.ui, fireEvent]);
19
27
  var learnMoreMessage = isProductIntegrationSupported ? messages.learn_more_about_connecting_account : messages.learn_more_about_smart_links;
20
28
  return /*#__PURE__*/React.createElement(React.Fragment, null, providerName ? /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_unauthorised_account_description, {
21
29
  values: {
@@ -3,7 +3,7 @@
3
3
  *
4
4
  * Generates Typescript types for analytics events from analytics.spec.yaml
5
5
  *
6
- * @codegen <<SignedSource::519effabaa6c383d7fa35374469faada>>
6
+ * @codegen <<SignedSource::050cd99cdd30e3c38674dc47986e3214>>
7
7
  * @codegenCommand yarn workspace @atlassian/analytics-tooling run analytics:codegen smart-card
8
8
  */
9
9
  export type PackageMetaDataContextType = {
@@ -115,6 +115,48 @@ export type SmartLinkChunkLoadFailedAttributesType = {
115
115
  error: Record<string, unknown>;
116
116
  errorInfo: Record<string, unknown>;
117
117
  };
118
+ export type SmartLinkClickedAttributesType = {
119
+ id: string;
120
+ display: 'inline' | 'block' | 'embed' | 'embedPreview' | 'flexible' | 'hoverCardPreview';
121
+ definitionId: string | null;
122
+ isModifierKeyPressed: boolean | null;
123
+ };
124
+ export type SmartLinkClickedTitleGoToLinkAttributesType = {
125
+ id: string;
126
+ display: 'inline' | 'block' | 'embed' | 'embedPreview' | 'flexible' | 'hoverCardPreview';
127
+ definitionId: string | null;
128
+ isModifierKeyPressed: boolean | null;
129
+ };
130
+ export type HoverCardViewedAttributesType = {
131
+ previewDisplay: 'card' | 'embed';
132
+ previewInvokeMethod: 'keyboard' | 'mouse_hover' | 'mouse_click' | null;
133
+ definitionId: string | null;
134
+ };
135
+ export type HoverCardDismissedAttributesType = {
136
+ previewDisplay: 'card' | 'embed';
137
+ hoverTime: number;
138
+ previewInvokeMethod: 'keyboard' | 'mouse_hover' | 'mouse_click' | null;
139
+ definitionId: string | null;
140
+ };
141
+ export type ButtonClickedConnectAccountAttributesType = {
142
+ display: 'inline' | 'block' | 'embed' | 'embedPreview' | 'flexible' | 'hoverCardPreview';
143
+ definitionId: string | null;
144
+ };
145
+ export type SmartLinkClickedTryAnotherAccountAttributesType = {
146
+ display: 'inline' | 'block' | 'embed' | 'embedPreview' | 'flexible' | 'hoverCardPreview';
147
+ definitionId: string | null;
148
+ };
149
+ export type ConsentModalClosedAttributesType = {
150
+ display: 'inline' | 'block' | 'embed' | 'embedPreview' | 'flexible' | 'hoverCardPreview';
151
+ definitionId: string | null;
152
+ };
153
+ export type ButtonClickedLearnMoreAttributesType = {};
154
+ export type ButtonClickedSmartLinkStatusLozengeAttributesType = {};
155
+ export type ButtonClickedSmartLinkStatusListItemAttributesType = {};
156
+ export type ButtonClickedSmartLinkStatusOpenPreviewAttributesType = {};
157
+ export type ButtonClickedSmartLinkFollowButtonAttributesType = {};
158
+ export type ButtonClickedStatusUpdateActionAttributesType = {};
159
+ export type ButtonClickedGetStatusTransitionsActionAttributesType = {};
118
160
  export type AnalyticsEventAttributes = {
119
161
  /**
120
162
  * fired when an ai summary is clicked */
@@ -194,5 +236,45 @@ export type AnalyticsEventAttributes = {
194
236
  /**
195
237
  * fires an event that represents when a Smart Link renders unsuccessfully. */
196
238
  'operational.smartLink.chunkLoadFailed': SmartLinkChunkLoadFailedAttributesType;
239
+ /**
240
+ * fires an event that represents when a user clicks on a Smart Link. */
241
+ 'ui.smartLink.clicked': SmartLinkClickedAttributesType;
242
+ /**
243
+ * fires an event that represents when a user clicks on a Smart Link. */
244
+ 'ui.smartLink.clicked.titleGoToLink': SmartLinkClickedTitleGoToLinkAttributesType;
245
+ /**
246
+ * fires an event that represents a hover preview being opened. */
247
+ 'ui.hoverCard.viewed': HoverCardViewedAttributesType;
248
+ /**
249
+ * fires an event that represents a hover preview being dismissed. */
250
+ 'ui.hoverCard.dismissed': HoverCardDismissedAttributesType;
251
+ /**
252
+ * fires an event that represents when a user clicks on the authentication call to action with no current authenticated account. (i.e. Connect to Preview). */
253
+ 'ui.button.clicked.connectAccount': ButtonClickedConnectAccountAttributesType;
254
+ /**
255
+ * fires an event that represents when a user clicks on the authentication call to action with a forbidden authenticated account. (i.e. Try another account). */
256
+ 'ui.smartLink.clicked.tryAnotherAccount': SmartLinkClickedTryAnotherAccountAttributesType;
257
+ /**
258
+ * fires an event that represents when a user closed the authentication window without authenticating after opening it. */
259
+ 'ui.consentModal.closed': ConsentModalClosedAttributesType;
260
+ /**
261
+ * fires an event that signifies that a "Learn More" link was clicked on an unauthenticated card */
262
+ 'ui.button.clicked.learnMore': ButtonClickedLearnMoreAttributesType;
263
+ /**
264
+ * fires an event that represent a click was performed on a Status Lozenge */
265
+ 'ui.button.clicked.smartLinkStatusLozenge': ButtonClickedSmartLinkStatusLozengeAttributesType;
266
+ /**
267
+ * fires an event that represent a click was performed on a Status Lozenge's dropdown item */
268
+ 'ui.button.clicked.smartLinkStatusListItem': ButtonClickedSmartLinkStatusListItemAttributesType;
269
+ /**
270
+ * fires an event that represent a click was performed on a Status Lozenge open preview button */
271
+ 'ui.button.clicked.smartLinkStatusOpenPreview': ButtonClickedSmartLinkStatusOpenPreviewAttributesType;
272
+ /**
273
+ * fires an event that represents a click was performed on the follow button. */
274
+ 'ui.button.clicked.smartLinkFollowButton': ButtonClickedSmartLinkFollowButtonAttributesType;
275
+ /** */
276
+ 'ui.button.clicked.StatusUpdateAction': ButtonClickedStatusUpdateActionAttributesType;
277
+ /** */
278
+ 'ui.button.clicked.GetStatusTransitionsAction': ButtonClickedGetStatusTransitionsActionAttributesType;
197
279
  };
198
280
  export type EventKey = keyof AnalyticsEventAttributes;