@atlaskit/smart-card 19.1.27 → 19.1.30

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 (85) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/cjs/constants.js +3 -1
  3. package/dist/cjs/extractors/flexible/index.js +4 -2
  4. package/dist/cjs/extractors/flexible/utils.js +24 -2
  5. package/dist/cjs/extractors/hover/extractMetadata.js +3 -2
  6. package/dist/cjs/version.json +1 -1
  7. package/dist/cjs/view/CardWithUrl/component.js +9 -1
  8. package/dist/cjs/view/FlexibleCard/components/blocks/block/index.js +1 -1
  9. package/dist/cjs/view/FlexibleCard/components/blocks/utils.js +1 -1
  10. package/dist/cjs/view/FlexibleCard/components/elements/avatar-group/index.js +2 -0
  11. package/dist/cjs/view/FlexibleCard/components/elements/badge/index.js +2 -0
  12. package/dist/cjs/view/FlexibleCard/components/elements/date-time/index.js +2 -0
  13. package/dist/cjs/view/FlexibleCard/components/elements/icon/index.js +2 -0
  14. package/dist/cjs/view/FlexibleCard/components/elements/index.js +17 -3
  15. package/dist/cjs/view/FlexibleCard/components/elements/link/index.js +2 -0
  16. package/dist/cjs/view/FlexibleCard/components/elements/lozenge/index.js +2 -0
  17. package/dist/cjs/view/FlexibleCard/components/elements/media/index.js +3 -1
  18. package/dist/cjs/view/FlexibleCard/components/elements/text/index.js +2 -0
  19. package/dist/cjs/view/FlexibleCard/components/elements/utils.js +20 -12
  20. package/dist/cjs/view/HoverCard/components/hover-card-content.js +12 -5
  21. package/dist/cjs/view/HoverCard/index.js +1 -1
  22. package/dist/cjs/view/HoverCard/styled.js +8 -5
  23. package/dist/cjs/view/HoverCard/utils.js +27 -3
  24. package/dist/es2019/constants.js +3 -1
  25. package/dist/es2019/extractors/flexible/index.js +5 -3
  26. package/dist/es2019/extractors/flexible/utils.js +9 -1
  27. package/dist/es2019/extractors/hover/extractMetadata.js +3 -2
  28. package/dist/es2019/version.json +1 -1
  29. package/dist/es2019/view/CardWithUrl/component.js +8 -1
  30. package/dist/es2019/view/FlexibleCard/components/blocks/block/index.js +11 -1
  31. package/dist/es2019/view/FlexibleCard/components/blocks/utils.js +5 -3
  32. package/dist/es2019/view/FlexibleCard/components/elements/avatar-group/index.js +2 -0
  33. package/dist/es2019/view/FlexibleCard/components/elements/badge/index.js +2 -0
  34. package/dist/es2019/view/FlexibleCard/components/elements/date-time/index.js +2 -0
  35. package/dist/es2019/view/FlexibleCard/components/elements/icon/index.js +2 -0
  36. package/dist/es2019/view/FlexibleCard/components/elements/index.js +12 -0
  37. package/dist/es2019/view/FlexibleCard/components/elements/link/index.js +2 -0
  38. package/dist/es2019/view/FlexibleCard/components/elements/lozenge/index.js +2 -0
  39. package/dist/es2019/view/FlexibleCard/components/elements/media/index.js +2 -0
  40. package/dist/es2019/view/FlexibleCard/components/elements/text/index.js +2 -0
  41. package/dist/es2019/view/FlexibleCard/components/elements/utils.js +26 -16
  42. package/dist/es2019/view/HoverCard/components/hover-card-content.js +11 -5
  43. package/dist/es2019/view/HoverCard/index.js +1 -1
  44. package/dist/es2019/view/HoverCard/styled.js +31 -5
  45. package/dist/es2019/view/HoverCard/utils.js +27 -4
  46. package/dist/esm/constants.js +3 -1
  47. package/dist/esm/extractors/flexible/index.js +5 -3
  48. package/dist/esm/extractors/flexible/utils.js +13 -0
  49. package/dist/esm/extractors/hover/extractMetadata.js +3 -2
  50. package/dist/esm/state/actions/index.js +1 -1
  51. package/dist/esm/state/hooks/usePrefetch.js +1 -1
  52. package/dist/esm/utils/mocks.js +1 -1
  53. package/dist/esm/version.json +1 -1
  54. package/dist/esm/view/BlockCard/actions/DownloadAction.js +1 -1
  55. package/dist/esm/view/BlockCard/actions/PreviewAction.js +1 -1
  56. package/dist/esm/view/BlockCard/actions/RetryAction.js +1 -1
  57. package/dist/esm/view/BlockCard/actions/ViewAction.js +1 -1
  58. package/dist/esm/view/CardWithUrl/component.js +8 -1
  59. package/dist/esm/view/FlexibleCard/components/blocks/block/index.js +2 -2
  60. package/dist/esm/view/FlexibleCard/components/blocks/utils.js +1 -1
  61. package/dist/esm/view/FlexibleCard/components/elements/avatar-group/index.js +2 -0
  62. package/dist/esm/view/FlexibleCard/components/elements/badge/index.js +2 -0
  63. package/dist/esm/view/FlexibleCard/components/elements/date-time/index.js +2 -0
  64. package/dist/esm/view/FlexibleCard/components/elements/icon/index.js +2 -0
  65. package/dist/esm/view/FlexibleCard/components/elements/index.js +12 -0
  66. package/dist/esm/view/FlexibleCard/components/elements/link/index.js +2 -0
  67. package/dist/esm/view/FlexibleCard/components/elements/lozenge/index.js +2 -0
  68. package/dist/esm/view/FlexibleCard/components/elements/media/index.js +3 -1
  69. package/dist/esm/view/FlexibleCard/components/elements/text/index.js +2 -0
  70. package/dist/esm/view/FlexibleCard/components/elements/utils.js +20 -12
  71. package/dist/esm/view/HoverCard/components/hover-card-content.js +11 -5
  72. package/dist/esm/view/HoverCard/index.js +1 -1
  73. package/dist/esm/view/HoverCard/styled.js +8 -5
  74. package/dist/esm/view/HoverCard/utils.js +27 -3
  75. package/dist/types/constants.d.ts +3 -1
  76. package/dist/types/extractors/common/__mocks__/jsonld.d.ts +11 -6
  77. package/dist/types/extractors/flexible/utils.d.ts +2 -0
  78. package/dist/types/state/flexible-ui-context/types.d.ts +22 -10
  79. package/dist/types/view/FlexibleCard/components/blocks/types.d.ts +15 -1
  80. package/dist/types/view/FlexibleCard/components/elements/index.d.ts +10 -0
  81. package/dist/types/view/FlexibleCard/components/elements/types.d.ts +7 -1
  82. package/dist/types/view/HoverCard/types.d.ts +1 -0
  83. package/dist/types/view/HoverCard/utils.d.ts +1 -1
  84. package/package.json +2 -2
  85. package/report.api.md +505 -0
@@ -1,7 +1,7 @@
1
1
  import { extractLink, extractSummary, extractTitle } from '../common/primitives';
2
2
  import { extractLozenge } from '../common/lozenge';
3
3
  import { extractLinkIcon } from './icon';
4
- import { extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount, extractViewCount, extractReactCount, extractVoteCount } from './utils';
4
+ import { extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount, extractViewCount, extractReactCount, extractVoteCount, extractSourceBranch, extractTargetBranch } from './utils';
5
5
  import { extractPersonCreatedBy } from '../common/person';
6
6
  import { extractPersonsUpdatedBy } from './collaboratorGroup';
7
7
  import { extractDateUpdated } from '../common/date/extractDateUpdated';
@@ -27,19 +27,21 @@ const extractFlexibleUiContext = (response, renderers) => {
27
27
  voteCount: extractVoteCount(data),
28
28
  createdBy: extractCreatedBy(data),
29
29
  createdOn: extractDateCreated(data),
30
+ latestCommit: extractLatestCommit(data),
30
31
  linkIcon: extractLinkIcon(response, renderers),
31
32
  modifiedBy: extractModifiedBy(data),
32
33
  modifiedOn: extractDateUpdated(data),
33
34
  preview: extractPreview(data),
34
35
  priority: extractPriority(data),
36
+ provider: extractProviderIcon(data),
35
37
  programmingLanguage: extractProgrammingLanguage(data),
36
38
  snippet: extractSummary(data) || undefined,
37
39
  // Explicitly set here to remove an empty string
40
+ sourceBranch: extractSourceBranch(data),
38
41
  state: extractLozenge(data),
39
42
  subscriberCount: extractSubscriberCount(data),
43
+ targetBranch: extractTargetBranch(data),
40
44
  title: extractTitle(data) || url,
41
- provider: extractProviderIcon(data),
42
- latestCommit: extractLatestCommit(data),
43
45
  url
44
46
  };
45
47
  };
@@ -1,5 +1,11 @@
1
1
  import { extractPersonCreatedBy, extractPersonUpdatedBy } from '../common/person';
2
2
 
3
+ const extractLinkName = link => {
4
+ if (link && typeof link === 'object' && link['@type'] === 'Link') {
5
+ return link.name;
6
+ }
7
+ };
8
+
3
9
  const extractValue = (data, key) => {
4
10
  return data === null || data === void 0 ? void 0 : data[key];
5
11
  };
@@ -23,4 +29,6 @@ export const extractModifiedBy = data => {
23
29
  }
24
30
  };
25
31
  export const extractProgrammingLanguage = data => extractValue(data, 'schema:programmingLanguage');
26
- export const extractSubscriberCount = data => extractValue(data, 'atlassian:subscriberCount');
32
+ export const extractSourceBranch = data => extractLinkName(data['atlassian:mergeSource']);
33
+ export const extractSubscriberCount = data => extractValue(data, 'atlassian:subscriberCount');
34
+ export const extractTargetBranch = data => extractLinkName(data['atlassian:mergeDestination']);
@@ -8,11 +8,12 @@ const elementNamesToItems = elementNames => {
8
8
  };
9
9
 
10
10
  export const extractMetadata = jsonLd => {
11
- var _jsonLd$metadata, _metadata$primary, _metadata$secondary;
11
+ var _jsonLd$metadata, _metadata$primary, _metadata$secondary, _metadata$subtitle;
12
12
 
13
13
  const metadata = (_jsonLd$metadata = jsonLd.metadata) !== null && _jsonLd$metadata !== void 0 ? _jsonLd$metadata : [];
14
14
  return {
15
15
  primary: elementNamesToItems((_metadata$primary = metadata.primary) !== null && _metadata$primary !== void 0 ? _metadata$primary : []),
16
- secondary: elementNamesToItems((_metadata$secondary = metadata.secondary) !== null && _metadata$secondary !== void 0 ? _metadata$secondary : [])
16
+ secondary: elementNamesToItems((_metadata$secondary = metadata.secondary) !== null && _metadata$secondary !== void 0 ? _metadata$secondary : []),
17
+ subtitle: elementNamesToItems((_metadata$subtitle = metadata.subtitle) !== null && _metadata$subtitle !== void 0 ? _metadata$subtitle : [])
17
18
  };
18
19
  };
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/smart-card",
3
- "version": "19.1.27",
3
+ "version": "19.1.30",
4
4
  "sideEffects": false
5
5
  }
@@ -1,4 +1,5 @@
1
1
  import React, { useEffect, useCallback, useMemo } from 'react';
2
+ import { useFeatureFlag } from '@atlaskit/link-provider';
2
3
  import { isSpecialEvent } from '../../utils';
3
4
  import * as measure from '../../utils/performance';
4
5
  import { getDefinitionId, getServices, isFinalState, getClickUrl, getResourceType, getExtensionKey, getSubproduct, getProduct } from '../../state/helpers';
@@ -45,7 +46,13 @@ export function CardWithUrlContent({
45
46
  const product = getProduct(state.details);
46
47
  const subproduct = getSubproduct(state.details);
47
48
  const services = getServices(state.details);
48
- let isFlexibleUi = useMemo(() => isFlexibleUiCard(children), [children]); // Setup UI handlers.
49
+ let isFlexibleUi = useMemo(() => isFlexibleUiCard(children), [children]);
50
+ const showHoverPreviewFlag = useFeatureFlag('showHoverPreview');
51
+
52
+ if (showHoverPreview === undefined && showHoverPreviewFlag !== undefined) {
53
+ showHoverPreview = showHoverPreviewFlag;
54
+ } // Setup UI handlers.
55
+
49
56
 
50
57
  const handleClick = useCallback(event => {
51
58
  const clickUrl = getClickUrl(url, state.details);
@@ -1,7 +1,7 @@
1
1
  /** @jsx jsx */
2
2
  import React from 'react';
3
3
  import { css, jsx } from '@emotion/core';
4
- import { SmartLinkDirection, SmartLinkSize } from '../../../../../constants';
4
+ import { ElementName, SmartLinkDirection, SmartLinkSize } from '../../../../../constants';
5
5
  import { getBaseStyles, getGapSize, renderChildren } from '../utils';
6
6
 
7
7
  const getBlockStyles = (direction, size) => css`
@@ -11,6 +11,16 @@ const getBlockStyles = (direction, size) => css`
11
11
  content: '•';
12
12
  margin-right: ${getGapSize(size)}rem;
13
13
  }
14
+ // Pull request elements: source branch → target branch
15
+ [data-smart-element='${ElementName.SourceBranch}']
16
+ + [data-smart-element='${ElementName.TargetBranch}']:before {
17
+ content: '→';
18
+ }
19
+ // Pull request elements: target branch ← source branch
20
+ [data-smart-element='${ElementName.TargetBranch}']
21
+ + [data-smart-element='${ElementName.SourceBranch}']:before {
22
+ content: '←';
23
+ }
14
24
  `;
15
25
  /**
16
26
  * A block represents a collection of elements and actions that are arranged
@@ -16,18 +16,20 @@ export const ElementDisplaySchema = {
16
16
  [ElementName.VoteCount]: ['inline'],
17
17
  [ElementName.CreatedBy]: ['inline'],
18
18
  [ElementName.CreatedOn]: ['inline'],
19
+ [ElementName.LatestCommit]: ['inline'],
19
20
  [ElementName.LinkIcon]: ['inline'],
20
21
  [ElementName.ModifiedBy]: ['inline'],
21
22
  [ElementName.ModifiedOn]: ['inline'],
22
23
  [ElementName.Preview]: ['block'],
23
24
  [ElementName.Priority]: ['inline'],
24
25
  [ElementName.ProgrammingLanguage]: ['inline'],
26
+ [ElementName.Provider]: ['inline'],
25
27
  [ElementName.Snippet]: ['block'],
28
+ [ElementName.SourceBranch]: ['inline'],
26
29
  [ElementName.State]: ['inline'],
27
30
  [ElementName.SubscriberCount]: ['inline'],
28
- [ElementName.Title]: ['inline'],
29
- [ElementName.Provider]: ['inline'],
30
- [ElementName.LatestCommit]: ['inline']
31
+ [ElementName.TargetBranch]: ['inline'],
32
+ [ElementName.Title]: ['inline']
31
33
  };
32
34
 
33
35
  const getDirectionStyles = direction => {
@@ -43,6 +43,7 @@ const getStyles = size => {
43
43
  const AvatarGroup = ({
44
44
  items = [],
45
45
  maxCount = MAX_COUNT,
46
+ name,
46
47
  overrideCss,
47
48
  size = SmartLinkSize.Medium,
48
49
  testId = 'smart-element-avatar-group'
@@ -54,6 +55,7 @@ const AvatarGroup = ({
54
55
  return jsx("span", {
55
56
  css: [getStyles(size), overrideCss],
56
57
  "data-fit-to-content": true,
58
+ "data-smart-element": name,
57
59
  "data-smart-element-avatar-group": true,
58
60
  "data-testid": testId
59
61
  }, jsx(AtlaskitAvatarGroup, {
@@ -93,6 +93,7 @@ const renderImageIcon = (url, testId) => {
93
93
  const Badge = ({
94
94
  icon,
95
95
  label,
96
+ name,
96
97
  overrideCss,
97
98
  testId = 'smart-element-badge',
98
99
  url
@@ -107,6 +108,7 @@ const Badge = ({
107
108
  return jsx("span", {
108
109
  css: [badgeStyles, overrideCss],
109
110
  "data-fit-to-content": true,
111
+ "data-smart-element": name,
110
112
  "data-smart-element-badge": true,
111
113
  "data-testid": testId
112
114
  }, jsx("span", {
@@ -34,6 +34,7 @@ const typeToDescriptorMap = {
34
34
 
35
35
  const DateTime = ({
36
36
  date,
37
+ name,
37
38
  overrideCss,
38
39
  type,
39
40
  testId = 'smart-element-date-time',
@@ -73,6 +74,7 @@ const DateTime = ({
73
74
  return jsx("span", {
74
75
  css: [styles, overrideCss],
75
76
  "data-separator": true,
77
+ "data-smart-element": name,
76
78
  "data-smart-element-date-time": true,
77
79
  "data-testid": testId
78
80
  }, text ? `${text} ${context}` : jsx(FormattedMessage, _extends({}, typeToDescriptorMap[type][typeVariant], {
@@ -77,6 +77,7 @@ const renderImageIcon = (defaultIcon, icon, url, testId) => {
77
77
  const Icon = ({
78
78
  icon,
79
79
  label = 'Link',
80
+ name,
80
81
  position = SmartLinkPosition.Top,
81
82
  overrideCss,
82
83
  render,
@@ -94,6 +95,7 @@ const Icon = ({
94
95
  return jsx("div", {
95
96
  css: [styles, renderStyles, overrideCss],
96
97
  "data-fit-to-content": true,
98
+ "data-smart-element": name,
97
99
  "data-smart-element-icon": true,
98
100
  "data-testid": testId
99
101
  }, element);
@@ -92,6 +92,12 @@ export const ReactCount = createElement(ElementName.ReactCount);
92
92
  */
93
93
 
94
94
  export const Snippet = createElement(ElementName.Snippet);
95
+ /**
96
+ * Creates a SourceBranch Text element using the data from sourceBranch in the Flexible UI Context.
97
+ * @see Text
98
+ */
99
+
100
+ export const SourceBranch = createElement(ElementName.SourceBranch);
95
101
  /**
96
102
  * Creates a State Lozenge element using the data from State in the Flexible UI Context.
97
103
  * @see Lozenge
@@ -104,6 +110,12 @@ export const State = createElement(ElementName.State);
104
110
  */
105
111
 
106
112
  export const SubscriberCount = createElement(ElementName.SubscriberCount);
113
+ /**
114
+ * Creates a TargetBranch Text element using the data from targetBranch in the Flexible UI Context.
115
+ * @see Text
116
+ */
117
+
118
+ export const TargetBranch = createElement(ElementName.TargetBranch);
107
119
  /**
108
120
  * Creates a Title Link element using the data from Title in the Flexible UI Context.
109
121
  * This represents the main link text within the Smart Link.
@@ -81,6 +81,7 @@ const withTooltip = (trigger, content, testId) => jsx(Tooltip, {
81
81
  const Link = ({
82
82
  hideTooltip,
83
83
  maxLines = DEFAULT_MAX_LINES,
84
+ name,
84
85
  overrideCss,
85
86
  size = SmartLinkSize.Medium,
86
87
  testId = 'smart-element-link',
@@ -93,6 +94,7 @@ const Link = ({
93
94
  const hasSpace = useMemo(() => text ? hasWhiteSpace(text) : false, [text]);
94
95
  const anchor = jsx("a", {
95
96
  css: [getAnchorStyles(size, theme, getMaxLines(maxLines), hasSpace), overrideCss],
97
+ "data-smart-element": name,
96
98
  "data-smart-element-link": true,
97
99
  "data-testid": testId,
98
100
  onClick: onClick,
@@ -15,6 +15,7 @@ const styles = css`
15
15
 
16
16
  const Lozenge = ({
17
17
  appearance = 'default',
18
+ name,
18
19
  overrideCss,
19
20
  text,
20
21
  testId = 'smart-element-lozenge'
@@ -26,6 +27,7 @@ const Lozenge = ({
26
27
  return jsx("span", {
27
28
  css: [styles, overrideCss],
28
29
  "data-fit-to-content": true,
30
+ "data-smart-element": name,
29
31
  "data-smart-element-lozenge": true,
30
32
  "data-testid": testId
31
33
  }, jsx(AtlaskitLozenge, {
@@ -55,6 +55,7 @@ const styles = css`
55
55
  */
56
56
 
57
57
  const Media = ({
58
+ name,
58
59
  overrideCss,
59
60
  testId = 'smart-element-media',
60
61
  type,
@@ -66,6 +67,7 @@ const Media = ({
66
67
 
67
68
  return jsx("div", {
68
69
  css: [styles, overrideCss],
70
+ "data-smart-element": name,
69
71
  "data-smart-element-media": true,
70
72
  "data-testid": testId
71
73
  }, jsx(ImageIcon, {
@@ -22,6 +22,7 @@ const Text = ({
22
22
  content,
23
23
  maxLines = 1,
24
24
  message,
25
+ name,
25
26
  overrideCss,
26
27
  testId = 'smart-element-text'
27
28
  }) => {
@@ -32,6 +33,7 @@ const Text = ({
32
33
  return jsx("span", {
33
34
  css: [getStyles(maxLines), overrideCss],
34
35
  "data-separator": true,
36
+ "data-smart-element": name,
35
37
  "data-smart-element-text": true,
36
38
  "data-testid": testId
37
39
  }, getFormattedMessage(message) || content);
@@ -48,12 +48,24 @@ const elementMappings = {
48
48
  [ElementName.CreatedBy]: {
49
49
  component: Text
50
50
  },
51
+ [ElementName.CreatedOn]: {
52
+ component: DateTime
53
+ },
54
+ [ElementName.LatestCommit]: {
55
+ component: Badge,
56
+ props: {
57
+ icon: IconType.Commit
58
+ }
59
+ },
51
60
  [ElementName.LinkIcon]: {
52
61
  component: Icon
53
62
  },
54
63
  [ElementName.ModifiedBy]: {
55
64
  component: Text
56
65
  },
66
+ [ElementName.ModifiedOn]: {
67
+ component: DateTime
68
+ },
57
69
  [ElementName.Preview]: {
58
70
  component: Media
59
71
  },
@@ -66,6 +78,9 @@ const elementMappings = {
66
78
  icon: IconType.ProgrammingLanguage
67
79
  }
68
80
  },
81
+ [ElementName.Provider]: {
82
+ component: Badge
83
+ },
69
84
  [ElementName.Snippet]: {
70
85
  component: Text,
71
86
  props: {
@@ -75,6 +90,9 @@ const elementMappings = {
75
90
  `
76
91
  }
77
92
  },
93
+ [ElementName.SourceBranch]: {
94
+ component: Text
95
+ },
78
96
  [ElementName.State]: {
79
97
  component: Lozenge
80
98
  },
@@ -84,23 +102,11 @@ const elementMappings = {
84
102
  icon: IconType.Subscriber
85
103
  }
86
104
  },
105
+ [ElementName.TargetBranch]: {
106
+ component: Text
107
+ },
87
108
  [ElementName.Title]: {
88
109
  component: Link
89
- },
90
- [ElementName.CreatedOn]: {
91
- component: DateTime
92
- },
93
- [ElementName.ModifiedOn]: {
94
- component: DateTime
95
- },
96
- [ElementName.Provider]: {
97
- component: Badge
98
- },
99
- [ElementName.LatestCommit]: {
100
- component: Badge,
101
- props: {
102
- icon: IconType.Commit
103
- }
104
110
  }
105
111
  };
106
112
 
@@ -144,6 +150,8 @@ const getData = (elementName, contextKey, context) => {
144
150
  return toDateTimeProps('modified', context.modifiedOn);
145
151
 
146
152
  case ElementName.Snippet:
153
+ case ElementName.SourceBranch:
154
+ case ElementName.TargetBranch:
147
155
  return toTextProps(data);
148
156
 
149
157
  case ElementName.Title:
@@ -211,6 +219,8 @@ export const createElement = name => {
211
219
  return overrides => {
212
220
  const context = useContext(FlexibleUiContext);
213
221
  const data = getData(name, contextKey, context);
214
- return data ? /*#__PURE__*/React.createElement(BaseElement, _extends({}, props, data, overrides)) : null;
222
+ return data ? /*#__PURE__*/React.createElement(BaseElement, _extends({}, props, data, overrides, {
223
+ name: name
224
+ })) : null;
215
225
  };
216
226
  };
@@ -9,6 +9,7 @@ import { isSpecialEvent } from '../../../utils';
9
9
  import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
10
10
  import { getExtensionKey } from '../../../state/helpers';
11
11
  import { titleBlockCss, metadataBlockCss, footerBlockCss } from '../styled';
12
+ import { extractType } from '../../../extractors/common/primitives/extractType';
12
13
  const flexibleUiOptions = {
13
14
  hideElevation: true,
14
15
  size: SmartLinkSize.Medium,
@@ -59,13 +60,16 @@ const HoverCardContent = ({
59
60
  analytics.ui.cardClickedEvent(undefined, HOVER_CARD_ANALYTICS_DISPLAY, cardState.status, undefined, undefined, isModifierKeyPressed, undefined, undefined, undefined, 'titleGoToLink');
60
61
  }, [cardState.status, analytics.ui]);
61
62
  const titleActions = useMemo(() => [getOpenAction(url, analytics)], [url, analytics]);
62
- const footerActions = useMemo(() => toFooterActions(cardActions), [cardActions]); //TODO: EDM-3224 deleted simulated and use real JsonLd
63
+ const footerActions = useMemo(() => toFooterActions(cardActions), [cardActions]);
64
+ const data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
65
+ const types = data ? extractType(data) : undefined; //TODO: EDM-3224 deleted simulated and use real JsonLd
63
66
 
64
67
  const {
65
68
  primary,
66
- secondary
67
- } = extractMetadata(getSimulatedMetadata(extensionKey));
68
- const data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
69
+ secondary,
70
+ subtitle
71
+ } = extractMetadata(getSimulatedMetadata(extensionKey, types));
72
+ const titleMaxLines = subtitle && subtitle.length > 0 ? 1 : 2;
69
73
  const body = data && extractPreview(data) ? /*#__PURE__*/React.createElement(PreviewBlock, null) : /*#__PURE__*/React.createElement(SnippetBlock, null);
70
74
  return /*#__PURE__*/React.createElement(FlexibleCard, {
71
75
  cardState: cardState,
@@ -76,9 +80,11 @@ const HoverCardContent = ({
76
80
  url: url
77
81
  }, /*#__PURE__*/React.createElement(TitleBlock, {
78
82
  actions: titleActions,
83
+ maxLines: titleMaxLines,
79
84
  overrideCss: titleBlockCss,
80
85
  size: SmartLinkSize.Large,
81
- position: SmartLinkPosition.Center
86
+ position: SmartLinkPosition.Center,
87
+ subtitle: subtitle
82
88
  }), /*#__PURE__*/React.createElement(MetadataBlock, {
83
89
  primary: primary,
84
90
  secondary: secondary,
@@ -89,7 +89,7 @@ export const HoverCardComponent = ({
89
89
  onMouseEnter: initShowCard,
90
90
  onMouseLeave: initHideCard
91
91
  }), children),
92
- zIndex: 501 // Temporary fix for Confluence inline comment on editor mod has z-index of 500
92
+ zIndex: 511 // Temporary fix for Confluence inline comment on editor mod has z-index of 500, Jira issue view has z-index of 510
93
93
 
94
94
  });
95
95
  };
@@ -1,5 +1,12 @@
1
1
  import { css } from '@emotion/core';
2
2
  import { loadingPlaceholderClassName } from '../../index';
3
+ const blockGap = '0.5rem';
4
+ const elementGap = '0.5rem';
5
+ const separatorCss = css`
6
+ [data-separator] + [data-separator]:before {
7
+ margin-right: ${elementGap};
8
+ }
9
+ `;
3
10
  export const HoverCardContainer = css`
4
11
  background: none;
5
12
  border-width: 0;
@@ -12,25 +19,44 @@ export const HoverCardContainer = css`
12
19
  }
13
20
  `;
14
21
  export const titleBlockCss = css`
15
- gap: 0.5rem;
22
+ gap: ${blockGap};
23
+
24
+ ${separatorCss}
25
+
26
+ // title and subtitle element group
27
+ [data-smart-element-group] {
28
+ // gap between title and subtitle
29
+ gap: 0.06rem;
30
+
31
+ /* subtitle element group */
32
+ > [data-smart-element-group] {
33
+ > span {
34
+ margin-right: ${elementGap};
35
+ }
36
+ }
37
+ }
16
38
  `;
17
39
  export const metadataBlockCss = css`
18
40
  gap: 0px;
19
41
 
20
42
  /* primary element group */
21
- [data-smart-element-group]:first-of-type {
43
+ [data-smart-element-group]:nth-of-type(1) {
22
44
  flex-grow: 7;
45
+
46
+ // a separator between text-based element
47
+ ${separatorCss}
48
+
23
49
  /* horizontal spacing between elements in group */
24
50
  > span {
25
- margin-right: 0.5rem;
51
+ margin-right: ${elementGap};
26
52
  }
27
53
  }
28
54
  /* secondary element group */
29
- [data-smart-element-group]:last-of-type {
55
+ [data-smart-element-group]:nth-of-type(2) {
30
56
  flex-grow: 3;
31
57
  /* horizontal spacing between elements in group */
32
58
  > span {
33
- margin-left: 0.5rem;
59
+ margin-left: ${elementGap};
34
60
  }
35
61
  }
36
62
  `;
@@ -1,12 +1,33 @@
1
1
  import { ElementName } from '../../constants';
2
2
  export const HOVER_CARD_ANALYTICS_DISPLAY = 'flexible';
3
- export const getSimulatedMetadata = (extensionKey = '') => {
3
+ export const getSimulatedMetadata = (extensionKey = '', types = []) => {
4
4
  switch (extensionKey) {
5
+ case 'bitbucket-object-provider':
6
+ case 'native-bitbucket-object-provider':
7
+ if (types.includes('atlassian:SourceCodePullRequest')) {
8
+ return {
9
+ metadata: {
10
+ primary: [ElementName.AuthorGroup, ElementName.ModifiedOn, ElementName.SubscriberCount, ElementName.State],
11
+ secondary: [],
12
+ subtitle: [ElementName.SourceBranch, ElementName.TargetBranch]
13
+ }
14
+ };
15
+ }
16
+
17
+ return {
18
+ metadata: {
19
+ primary: [ElementName.ModifiedOn, ElementName.CreatedBy],
20
+ secondary: [],
21
+ subtitle: []
22
+ }
23
+ };
24
+
5
25
  case 'confluence-object-provider':
6
26
  return {
7
27
  metadata: {
8
28
  primary: [ElementName.AuthorGroup, ElementName.CreatedBy],
9
- secondary: [ElementName.CommentCount, ElementName.ReactCount]
29
+ secondary: [ElementName.CommentCount, ElementName.ReactCount],
30
+ subtitle: []
10
31
  }
11
32
  };
12
33
 
@@ -14,7 +35,8 @@ export const getSimulatedMetadata = (extensionKey = '') => {
14
35
  return {
15
36
  metadata: {
16
37
  primary: [ElementName.AuthorGroup, ElementName.State, ElementName.Priority],
17
- secondary: []
38
+ secondary: [],
39
+ subtitle: []
18
40
  }
19
41
  };
20
42
 
@@ -22,7 +44,8 @@ export const getSimulatedMetadata = (extensionKey = '') => {
22
44
  return {
23
45
  metadata: {
24
46
  primary: [ElementName.ModifiedOn, ElementName.CreatedBy],
25
- secondary: []
47
+ secondary: [],
48
+ subtitle: []
26
49
  }
27
50
  };
28
51
  }
@@ -83,7 +83,7 @@ export var SmartLinkWidth;
83
83
  * When adding an element...
84
84
  * 1) Create base element if it doesn't already exist.
85
85
  * Base element are inside src/view/FlexibleCard/components/elements.
86
- * E.g. Badge,DateTime, Icon, Lozenge, etc.
86
+ * E.g. Badge, DateTime, Icon, Lozenge, etc.
87
87
  * 2) Update FlexibleUiContext with the new prop for data representing
88
88
  * the element, preferably with the same name as the element itself.
89
89
  * (src/state/flexible-ui-context/types.ts)
@@ -120,8 +120,10 @@ export var ElementName;
120
120
  ElementName["Provider"] = "Provider";
121
121
  ElementName["ReactCount"] = "ReactCount";
122
122
  ElementName["Snippet"] = "Snippet";
123
+ ElementName["SourceBranch"] = "SourceBranch";
123
124
  ElementName["State"] = "State";
124
125
  ElementName["SubscriberCount"] = "SubscriberCount";
126
+ ElementName["TargetBranch"] = "TargetBranch";
125
127
  ElementName["Title"] = "Title";
126
128
  ElementName["ViewCount"] = "ViewCount";
127
129
  ElementName["VoteCount"] = "VoteCount";
@@ -1,7 +1,7 @@
1
1
  import { extractLink, extractSummary, extractTitle } from '../common/primitives';
2
2
  import { extractLozenge } from '../common/lozenge';
3
3
  import { extractLinkIcon } from './icon';
4
- import { extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount, extractViewCount, extractReactCount, extractVoteCount } from './utils';
4
+ import { extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount, extractViewCount, extractReactCount, extractVoteCount, extractSourceBranch, extractTargetBranch } from './utils';
5
5
  import { extractPersonCreatedBy } from '../common/person';
6
6
  import { extractPersonsUpdatedBy } from './collaboratorGroup';
7
7
  import { extractDateUpdated } from '../common/date/extractDateUpdated';
@@ -27,19 +27,21 @@ var extractFlexibleUiContext = function extractFlexibleUiContext(response, rende
27
27
  voteCount: extractVoteCount(data),
28
28
  createdBy: extractCreatedBy(data),
29
29
  createdOn: extractDateCreated(data),
30
+ latestCommit: extractLatestCommit(data),
30
31
  linkIcon: extractLinkIcon(response, renderers),
31
32
  modifiedBy: extractModifiedBy(data),
32
33
  modifiedOn: extractDateUpdated(data),
33
34
  preview: extractPreview(data),
34
35
  priority: extractPriority(data),
36
+ provider: extractProviderIcon(data),
35
37
  programmingLanguage: extractProgrammingLanguage(data),
36
38
  snippet: extractSummary(data) || undefined,
37
39
  // Explicitly set here to remove an empty string
40
+ sourceBranch: extractSourceBranch(data),
38
41
  state: extractLozenge(data),
39
42
  subscriberCount: extractSubscriberCount(data),
43
+ targetBranch: extractTargetBranch(data),
40
44
  title: extractTitle(data) || url,
41
- provider: extractProviderIcon(data),
42
- latestCommit: extractLatestCommit(data),
43
45
  url: url
44
46
  };
45
47
  };
@@ -1,5 +1,12 @@
1
+ import _typeof from "@babel/runtime/helpers/typeof";
1
2
  import { extractPersonCreatedBy, extractPersonUpdatedBy } from '../common/person';
2
3
 
4
+ var extractLinkName = function extractLinkName(link) {
5
+ if (link && _typeof(link) === 'object' && link['@type'] === 'Link') {
6
+ return link.name;
7
+ }
8
+ };
9
+
3
10
  var extractValue = function extractValue(data, key) {
4
11
  return data === null || data === void 0 ? void 0 : data[key];
5
12
  };
@@ -33,6 +40,12 @@ export var extractModifiedBy = function extractModifiedBy(data) {
33
40
  export var extractProgrammingLanguage = function extractProgrammingLanguage(data) {
34
41
  return extractValue(data, 'schema:programmingLanguage');
35
42
  };
43
+ export var extractSourceBranch = function extractSourceBranch(data) {
44
+ return extractLinkName(data['atlassian:mergeSource']);
45
+ };
36
46
  export var extractSubscriberCount = function extractSubscriberCount(data) {
37
47
  return extractValue(data, 'atlassian:subscriberCount');
48
+ };
49
+ export var extractTargetBranch = function extractTargetBranch(data) {
50
+ return extractLinkName(data['atlassian:mergeDestination']);
38
51
  };
@@ -12,11 +12,12 @@ var elementNamesToItems = function elementNamesToItems(elementNames) {
12
12
  };
13
13
 
14
14
  export var extractMetadata = function extractMetadata(jsonLd) {
15
- var _jsonLd$metadata, _metadata$primary, _metadata$secondary;
15
+ var _jsonLd$metadata, _metadata$primary, _metadata$secondary, _metadata$subtitle;
16
16
 
17
17
  var metadata = (_jsonLd$metadata = jsonLd.metadata) !== null && _jsonLd$metadata !== void 0 ? _jsonLd$metadata : [];
18
18
  return {
19
19
  primary: elementNamesToItems((_metadata$primary = metadata.primary) !== null && _metadata$primary !== void 0 ? _metadata$primary : []),
20
- secondary: elementNamesToItems((_metadata$secondary = metadata.secondary) !== null && _metadata$secondary !== void 0 ? _metadata$secondary : [])
20
+ secondary: elementNamesToItems((_metadata$secondary = metadata.secondary) !== null && _metadata$secondary !== void 0 ? _metadata$secondary : []),
21
+ subtitle: elementNamesToItems((_metadata$subtitle = metadata.subtitle) !== null && _metadata$subtitle !== void 0 ? _metadata$subtitle : [])
21
22
  };
22
23
  };