@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.
- package/CHANGELOG.md +19 -0
- package/dist/cjs/constants.js +3 -1
- package/dist/cjs/extractors/flexible/index.js +4 -2
- package/dist/cjs/extractors/flexible/utils.js +24 -2
- package/dist/cjs/extractors/hover/extractMetadata.js +3 -2
- package/dist/cjs/version.json +1 -1
- package/dist/cjs/view/CardWithUrl/component.js +9 -1
- package/dist/cjs/view/FlexibleCard/components/blocks/block/index.js +1 -1
- package/dist/cjs/view/FlexibleCard/components/blocks/utils.js +1 -1
- package/dist/cjs/view/FlexibleCard/components/elements/avatar-group/index.js +2 -0
- package/dist/cjs/view/FlexibleCard/components/elements/badge/index.js +2 -0
- package/dist/cjs/view/FlexibleCard/components/elements/date-time/index.js +2 -0
- package/dist/cjs/view/FlexibleCard/components/elements/icon/index.js +2 -0
- package/dist/cjs/view/FlexibleCard/components/elements/index.js +17 -3
- package/dist/cjs/view/FlexibleCard/components/elements/link/index.js +2 -0
- package/dist/cjs/view/FlexibleCard/components/elements/lozenge/index.js +2 -0
- package/dist/cjs/view/FlexibleCard/components/elements/media/index.js +3 -1
- package/dist/cjs/view/FlexibleCard/components/elements/text/index.js +2 -0
- package/dist/cjs/view/FlexibleCard/components/elements/utils.js +20 -12
- package/dist/cjs/view/HoverCard/components/hover-card-content.js +12 -5
- package/dist/cjs/view/HoverCard/index.js +1 -1
- package/dist/cjs/view/HoverCard/styled.js +8 -5
- package/dist/cjs/view/HoverCard/utils.js +27 -3
- package/dist/es2019/constants.js +3 -1
- package/dist/es2019/extractors/flexible/index.js +5 -3
- package/dist/es2019/extractors/flexible/utils.js +9 -1
- package/dist/es2019/extractors/hover/extractMetadata.js +3 -2
- package/dist/es2019/version.json +1 -1
- package/dist/es2019/view/CardWithUrl/component.js +8 -1
- package/dist/es2019/view/FlexibleCard/components/blocks/block/index.js +11 -1
- package/dist/es2019/view/FlexibleCard/components/blocks/utils.js +5 -3
- package/dist/es2019/view/FlexibleCard/components/elements/avatar-group/index.js +2 -0
- package/dist/es2019/view/FlexibleCard/components/elements/badge/index.js +2 -0
- package/dist/es2019/view/FlexibleCard/components/elements/date-time/index.js +2 -0
- package/dist/es2019/view/FlexibleCard/components/elements/icon/index.js +2 -0
- package/dist/es2019/view/FlexibleCard/components/elements/index.js +12 -0
- package/dist/es2019/view/FlexibleCard/components/elements/link/index.js +2 -0
- package/dist/es2019/view/FlexibleCard/components/elements/lozenge/index.js +2 -0
- package/dist/es2019/view/FlexibleCard/components/elements/media/index.js +2 -0
- package/dist/es2019/view/FlexibleCard/components/elements/text/index.js +2 -0
- package/dist/es2019/view/FlexibleCard/components/elements/utils.js +26 -16
- package/dist/es2019/view/HoverCard/components/hover-card-content.js +11 -5
- package/dist/es2019/view/HoverCard/index.js +1 -1
- package/dist/es2019/view/HoverCard/styled.js +31 -5
- package/dist/es2019/view/HoverCard/utils.js +27 -4
- package/dist/esm/constants.js +3 -1
- package/dist/esm/extractors/flexible/index.js +5 -3
- package/dist/esm/extractors/flexible/utils.js +13 -0
- package/dist/esm/extractors/hover/extractMetadata.js +3 -2
- package/dist/esm/state/actions/index.js +1 -1
- package/dist/esm/state/hooks/usePrefetch.js +1 -1
- package/dist/esm/utils/mocks.js +1 -1
- package/dist/esm/version.json +1 -1
- package/dist/esm/view/BlockCard/actions/DownloadAction.js +1 -1
- package/dist/esm/view/BlockCard/actions/PreviewAction.js +1 -1
- package/dist/esm/view/BlockCard/actions/RetryAction.js +1 -1
- package/dist/esm/view/BlockCard/actions/ViewAction.js +1 -1
- package/dist/esm/view/CardWithUrl/component.js +8 -1
- package/dist/esm/view/FlexibleCard/components/blocks/block/index.js +2 -2
- package/dist/esm/view/FlexibleCard/components/blocks/utils.js +1 -1
- package/dist/esm/view/FlexibleCard/components/elements/avatar-group/index.js +2 -0
- package/dist/esm/view/FlexibleCard/components/elements/badge/index.js +2 -0
- package/dist/esm/view/FlexibleCard/components/elements/date-time/index.js +2 -0
- package/dist/esm/view/FlexibleCard/components/elements/icon/index.js +2 -0
- package/dist/esm/view/FlexibleCard/components/elements/index.js +12 -0
- package/dist/esm/view/FlexibleCard/components/elements/link/index.js +2 -0
- package/dist/esm/view/FlexibleCard/components/elements/lozenge/index.js +2 -0
- package/dist/esm/view/FlexibleCard/components/elements/media/index.js +3 -1
- package/dist/esm/view/FlexibleCard/components/elements/text/index.js +2 -0
- package/dist/esm/view/FlexibleCard/components/elements/utils.js +20 -12
- package/dist/esm/view/HoverCard/components/hover-card-content.js +11 -5
- package/dist/esm/view/HoverCard/index.js +1 -1
- package/dist/esm/view/HoverCard/styled.js +8 -5
- package/dist/esm/view/HoverCard/utils.js +27 -3
- package/dist/types/constants.d.ts +3 -1
- package/dist/types/extractors/common/__mocks__/jsonld.d.ts +11 -6
- package/dist/types/extractors/flexible/utils.d.ts +2 -0
- package/dist/types/state/flexible-ui-context/types.d.ts +22 -10
- package/dist/types/view/FlexibleCard/components/blocks/types.d.ts +15 -1
- package/dist/types/view/FlexibleCard/components/elements/index.d.ts +10 -0
- package/dist/types/view/FlexibleCard/components/elements/types.d.ts +7 -1
- package/dist/types/view/HoverCard/types.d.ts +1 -0
- package/dist/types/view/HoverCard/utils.d.ts +1 -1
- package/package.json +2 -2
- 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
|
|
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
|
};
|
package/dist/es2019/version.json
CHANGED
|
@@ -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]);
|
|
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.
|
|
29
|
-
[ElementName.
|
|
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
|
|
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]);
|
|
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
|
-
|
|
68
|
-
|
|
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:
|
|
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:
|
|
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]:
|
|
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:
|
|
51
|
+
margin-right: ${elementGap};
|
|
26
52
|
}
|
|
27
53
|
}
|
|
28
54
|
/* secondary element group */
|
|
29
|
-
[data-smart-element-group]:
|
|
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:
|
|
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
|
}
|
package/dist/esm/constants.js
CHANGED
|
@@ -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
|
};
|