@atlaskit/smart-card 26.37.2 → 26.38.1
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 +13 -0
- package/dist/cjs/utils/analytics/analytics.js +1 -1
- package/dist/cjs/view/BlockCard/actions/flexible/AuthorizeAction.js +1 -0
- package/dist/cjs/view/BlockCard/index.js +5 -18
- package/dist/cjs/view/BlockCard/views/flexible/FlexibleErroredView.js +12 -34
- package/dist/cjs/view/BlockCard/views/flexible/FlexibleForbiddenView.js +25 -51
- package/dist/cjs/view/BlockCard/views/flexible/FlexibleForbiddenViewOld.js +13 -32
- package/dist/cjs/view/BlockCard/views/flexible/FlexibleNotFoundView.js +9 -31
- package/dist/cjs/view/BlockCard/views/flexible/FlexibleResolvedView.js +7 -18
- package/dist/cjs/view/BlockCard/views/flexible/FlexibleUnauthorisedView.js +28 -51
- package/dist/cjs/view/BlockCard/views/flexible/styled.js +5 -5
- package/dist/cjs/view/BlockCard/views/flexible/unresolved-view/index.js +41 -0
- package/dist/cjs/view/BlockCard/views/flexible/utils/index.js +30 -1
- package/dist/cjs/view/FlexibleCard/components/blocks/footer-block/index.js +12 -57
- package/dist/cjs/view/FlexibleCard/components/blocks/footer-block/resolved/index.js +65 -0
- package/dist/cjs/view/FlexibleCard/components/blocks/index.js +8 -1
- package/dist/cjs/view/FlexibleCard/components/blocks/snippet-block/index.js +4 -2
- package/dist/cjs/view/FlexibleCard/components/elements/text/index.js +3 -2
- package/dist/cjs/view/LinkUrl/index.js +1 -1
- package/dist/es2019/utils/analytics/analytics.js +1 -1
- package/dist/es2019/view/BlockCard/actions/flexible/AuthorizeAction.js +1 -0
- package/dist/es2019/view/BlockCard/index.js +1 -15
- package/dist/es2019/view/BlockCard/views/flexible/FlexibleErroredView.js +8 -32
- package/dist/es2019/view/BlockCard/views/flexible/FlexibleForbiddenView.js +25 -52
- package/dist/es2019/view/BlockCard/views/flexible/FlexibleForbiddenViewOld.js +12 -31
- package/dist/es2019/view/BlockCard/views/flexible/FlexibleNotFoundView.js +15 -41
- package/dist/es2019/view/BlockCard/views/flexible/FlexibleResolvedView.js +10 -21
- package/dist/es2019/view/BlockCard/views/flexible/FlexibleUnauthorisedView.js +24 -43
- package/dist/es2019/view/BlockCard/views/flexible/styled.js +3 -4
- package/dist/es2019/view/BlockCard/views/flexible/unresolved-view/index.js +33 -0
- package/dist/es2019/view/BlockCard/views/flexible/utils/index.js +27 -2
- package/dist/es2019/view/FlexibleCard/components/blocks/footer-block/index.js +11 -54
- package/dist/es2019/view/FlexibleCard/components/blocks/footer-block/resolved/index.js +56 -0
- package/dist/es2019/view/FlexibleCard/components/blocks/index.js +4 -1
- package/dist/es2019/view/FlexibleCard/components/blocks/snippet-block/index.js +3 -1
- package/dist/es2019/view/FlexibleCard/components/elements/text/index.js +3 -2
- package/dist/es2019/view/LinkUrl/index.js +1 -1
- package/dist/esm/utils/analytics/analytics.js +1 -1
- package/dist/esm/view/BlockCard/actions/flexible/AuthorizeAction.js +1 -0
- package/dist/esm/view/BlockCard/index.js +3 -18
- package/dist/esm/view/BlockCard/views/flexible/FlexibleErroredView.js +12 -34
- package/dist/esm/view/BlockCard/views/flexible/FlexibleForbiddenView.js +26 -52
- package/dist/esm/view/BlockCard/views/flexible/FlexibleForbiddenViewOld.js +13 -32
- package/dist/esm/view/BlockCard/views/flexible/FlexibleNotFoundView.js +9 -31
- package/dist/esm/view/BlockCard/views/flexible/FlexibleResolvedView.js +10 -21
- package/dist/esm/view/BlockCard/views/flexible/FlexibleUnauthorisedView.js +25 -45
- package/dist/esm/view/BlockCard/views/flexible/styled.js +4 -4
- package/dist/esm/view/BlockCard/views/flexible/unresolved-view/index.js +35 -0
- package/dist/esm/view/BlockCard/views/flexible/utils/index.js +30 -1
- package/dist/esm/view/FlexibleCard/components/blocks/footer-block/index.js +13 -54
- package/dist/esm/view/FlexibleCard/components/blocks/footer-block/resolved/index.js +55 -0
- package/dist/esm/view/FlexibleCard/components/blocks/index.js +4 -1
- package/dist/esm/view/FlexibleCard/components/blocks/snippet-block/index.js +4 -2
- package/dist/esm/view/FlexibleCard/components/elements/text/index.js +3 -2
- package/dist/esm/view/LinkUrl/index.js +1 -1
- package/dist/types/view/BlockCard/views/flexible/FlexibleUnauthorisedView.d.ts +3 -1
- package/dist/types/view/BlockCard/views/flexible/styled.d.ts +0 -1
- package/dist/types/view/BlockCard/views/flexible/types.d.ts +2 -83
- package/dist/types/view/BlockCard/views/flexible/unresolved-view/index.d.ts +4 -0
- package/dist/types/view/BlockCard/views/flexible/unresolved-view/types.d.ts +7 -0
- package/dist/types/view/BlockCard/views/flexible/utils/index.d.ts +8 -0
- package/dist/types/view/FlexibleCard/components/blocks/footer-block/resolved/index.d.ts +4 -0
- package/dist/types/view/FlexibleCard/components/blocks/index.d.ts +1 -0
- package/dist/types/view/FlexibleCard/components/blocks/snippet-block/types.d.ts +4 -0
- package/dist/types/view/FlexibleCard/components/elements/text/types.d.ts +4 -0
- package/dist/types-ts4.5/view/BlockCard/views/flexible/FlexibleUnauthorisedView.d.ts +3 -1
- package/dist/types-ts4.5/view/BlockCard/views/flexible/styled.d.ts +0 -1
- package/dist/types-ts4.5/view/BlockCard/views/flexible/types.d.ts +2 -83
- package/dist/types-ts4.5/view/BlockCard/views/flexible/unresolved-view/index.d.ts +4 -0
- package/dist/types-ts4.5/view/BlockCard/views/flexible/unresolved-view/types.d.ts +7 -0
- package/dist/types-ts4.5/view/BlockCard/views/flexible/utils/index.d.ts +8 -0
- package/dist/types-ts4.5/view/FlexibleCard/components/blocks/footer-block/resolved/index.d.ts +4 -0
- package/dist/types-ts4.5/view/FlexibleCard/components/blocks/index.d.ts +1 -0
- package/dist/types-ts4.5/view/FlexibleCard/components/blocks/snippet-block/types.d.ts +4 -0
- package/dist/types-ts4.5/view/FlexibleCard/components/elements/text/types.d.ts +4 -0
- package/package.json +1 -1
- package/report.api.md +1 -0
- package/tmp/api-report-tmp.d.ts +1 -0
- package/dist/cjs/view/BlockCard/components/flexible/footer/index.js +0 -56
- package/dist/es2019/view/BlockCard/components/flexible/footer/index.js +0 -52
- package/dist/esm/view/BlockCard/components/flexible/footer/index.js +0 -49
- package/dist/types/view/BlockCard/components/flexible/footer/index.d.ts +0 -12
- package/dist/types/view/BlockCard/components/flexible/footer/types.d.ts +0 -5
- package/dist/types-ts4.5/view/BlockCard/components/flexible/footer/index.d.ts +0 -12
- package/dist/types-ts4.5/view/BlockCard/components/flexible/footer/types.d.ts +0 -5
- /package/dist/cjs/view/BlockCard/{components/flexible/footer → views/flexible/unresolved-view}/types.js +0 -0
- /package/dist/es2019/view/BlockCard/{components/flexible/footer → views/flexible/unresolved-view}/types.js +0 -0
- /package/dist/esm/view/BlockCard/{components/flexible/footer → views/flexible/unresolved-view}/types.js +0 -0
|
@@ -1,17 +1,14 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import React, { useMemo } from 'react';
|
|
3
|
-
import FlexibleCard from '../../../FlexibleCard';
|
|
4
|
-
import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
|
|
5
|
-
import { CustomBlock } from '../../../FlexibleCard/components/blocks';
|
|
6
3
|
import { R300 } from '@atlaskit/theme/colors';
|
|
7
4
|
import { messages } from '../../../../messages';
|
|
8
5
|
import LockIcon from '@atlaskit/icon/glyph/lock-filled';
|
|
9
|
-
import BlockCardFooter from '../../components/flexible/footer';
|
|
10
6
|
import { ForbiddenAction } from '../../actions/flexible/ForbiddenAction';
|
|
11
7
|
import Text from '../../../FlexibleCard/components/elements/text';
|
|
12
8
|
import { getForbiddenJsonLd } from '../../../../utils/jsonld';
|
|
13
9
|
import { extractProvider } from '@atlaskit/link-extractors';
|
|
14
10
|
import { extractRequestAccessContext } from '../../../../extractors/common/context';
|
|
11
|
+
import UnresolvedView from './unresolved-view';
|
|
15
12
|
import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
|
|
16
13
|
|
|
17
14
|
/**
|
|
@@ -20,17 +17,15 @@ import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardSty
|
|
|
20
17
|
* @deprecated Replaced by FlexibleForbiddenView
|
|
21
18
|
*/
|
|
22
19
|
const FlexibleForbiddenView = ({
|
|
23
|
-
anchorTarget,
|
|
24
|
-
cardState,
|
|
25
|
-
onAuthorize,
|
|
26
|
-
onClick,
|
|
27
|
-
onError,
|
|
28
20
|
testId = 'smart-block-forbidden-view',
|
|
29
|
-
|
|
30
|
-
titleBlockProps
|
|
21
|
+
...props
|
|
31
22
|
}) => {
|
|
32
23
|
var _details$meta;
|
|
33
|
-
const
|
|
24
|
+
const {
|
|
25
|
+
cardState,
|
|
26
|
+
onAuthorize,
|
|
27
|
+
url
|
|
28
|
+
} = props;
|
|
34
29
|
const details = cardState === null || cardState === void 0 ? void 0 : cardState.details;
|
|
35
30
|
const cardMetadata = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getForbiddenJsonLd().meta;
|
|
36
31
|
const provider = extractProvider(details === null || details === void 0 ? void 0 : details.data);
|
|
@@ -55,21 +50,10 @@ const FlexibleForbiddenView = ({
|
|
|
55
50
|
}
|
|
56
51
|
return [...tryAnotherAccountAction, ...actionFromAccessContext];
|
|
57
52
|
}, [onAuthorize, requestAccessContext, providerName]);
|
|
58
|
-
return /*#__PURE__*/React.createElement(
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
onClick: onClick,
|
|
63
|
-
onError: onError,
|
|
64
|
-
testId: testId,
|
|
65
|
-
ui: {
|
|
66
|
-
hideElevation: true
|
|
67
|
-
},
|
|
68
|
-
url: url
|
|
69
|
-
}, /*#__PURE__*/React.createElement(TitleBlock, _extends({
|
|
70
|
-
hideRetry: true,
|
|
71
|
-
anchorTarget: anchorTarget
|
|
72
|
-
}, titleBlockProps)), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(LockIcon, {
|
|
53
|
+
return /*#__PURE__*/React.createElement(UnresolvedView, _extends({}, props, {
|
|
54
|
+
actions: actions,
|
|
55
|
+
testId: testId
|
|
56
|
+
}), /*#__PURE__*/React.createElement(LockIcon, {
|
|
73
57
|
label: "forbidden-lock-icon",
|
|
74
58
|
size: "small",
|
|
75
59
|
primaryColor: `var(--ds-icon-danger, ${R300})`,
|
|
@@ -81,10 +65,7 @@ const FlexibleForbiddenView = ({
|
|
|
81
65
|
context: providerName
|
|
82
66
|
}
|
|
83
67
|
}
|
|
84
|
-
}))
|
|
85
|
-
actions: actions,
|
|
86
|
-
status: status
|
|
87
|
-
})));
|
|
68
|
+
}));
|
|
88
69
|
};
|
|
89
70
|
|
|
90
71
|
/**
|
|
@@ -1,13 +1,10 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import FlexibleCard from '../../../FlexibleCard';
|
|
4
|
-
import TitleBlock from '../../../FlexibleCard/components/blocks/title-block';
|
|
5
3
|
import { messages } from '../../../../messages';
|
|
6
4
|
import WarningIcon from '@atlaskit/icon/glyph/warning';
|
|
7
5
|
import { R300 } from '@atlaskit/theme/colors';
|
|
8
|
-
import BlockCardFooter from '../../components/flexible/footer';
|
|
9
6
|
import Text from '../../../FlexibleCard/components/elements/text';
|
|
10
|
-
import
|
|
7
|
+
import UnresolvedView from './unresolved-view';
|
|
11
8
|
import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
|
|
12
9
|
|
|
13
10
|
/**
|
|
@@ -17,42 +14,19 @@ import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardSty
|
|
|
17
14
|
* @see FlexibleCardProps
|
|
18
15
|
*/
|
|
19
16
|
const FlexibleNotFoundView = ({
|
|
20
|
-
anchorTarget,
|
|
21
|
-
cardState,
|
|
22
|
-
onAuthorize,
|
|
23
|
-
onError,
|
|
24
|
-
url,
|
|
25
|
-
onClick,
|
|
26
17
|
testId = 'smart-block-not-found-view',
|
|
27
|
-
|
|
28
|
-
}) => {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
}, /*#__PURE__*/React.createElement(TitleBlock, _extends({
|
|
42
|
-
hideRetry: true,
|
|
43
|
-
anchorTarget: anchorTarget
|
|
44
|
-
}, titleBlockProps)), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(WarningIcon, {
|
|
45
|
-
label: "not-found-warning-icon",
|
|
46
|
-
size: "small",
|
|
47
|
-
primaryColor: `var(--ds-icon-warning, ${R300})`,
|
|
48
|
-
testId: `${testId}-warning-icon`
|
|
49
|
-
}), /*#__PURE__*/React.createElement(Text, {
|
|
50
|
-
message: {
|
|
51
|
-
descriptor: messages.not_found_description
|
|
52
|
-
},
|
|
53
|
-
testId: `${testId}-message`
|
|
54
|
-
})), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
|
|
55
|
-
status: status
|
|
56
|
-
})));
|
|
57
|
-
};
|
|
18
|
+
...props
|
|
19
|
+
}) => /*#__PURE__*/React.createElement(UnresolvedView, _extends({}, props, {
|
|
20
|
+
testId: testId
|
|
21
|
+
}), /*#__PURE__*/React.createElement(WarningIcon, {
|
|
22
|
+
label: "not-found-warning-icon",
|
|
23
|
+
size: "small",
|
|
24
|
+
primaryColor: `var(--ds-icon-warning, ${R300})`,
|
|
25
|
+
testId: `${testId}-warning-icon`
|
|
26
|
+
}), /*#__PURE__*/React.createElement(Text, {
|
|
27
|
+
message: {
|
|
28
|
+
descriptor: messages.not_found_description
|
|
29
|
+
},
|
|
30
|
+
testId: `${testId}-message`
|
|
31
|
+
}));
|
|
58
32
|
export default withFlexibleUIBlockCardStyle(FlexibleNotFoundView);
|
|
@@ -2,9 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
2
2
|
import React, { useEffect, useMemo, useState } from 'react';
|
|
3
3
|
import FlexibleCard from '../../../FlexibleCard';
|
|
4
4
|
import { FooterBlock, MetadataBlock, PreviewBlock, SnippetBlock, TitleBlock } from '../../../FlexibleCard/components/blocks';
|
|
5
|
-
import { metadataBlockCss
|
|
6
|
-
import { ActionName, ElementName,
|
|
7
|
-
import { getSimulatedMetadata, getSimulatedBetterMetadata } from './utils';
|
|
5
|
+
import { metadataBlockCss } from './styled';
|
|
6
|
+
import { ActionName, ElementName, SmartLinkPosition } from '../../../../constants';
|
|
7
|
+
import { getSimulatedMetadata, getSimulatedBetterMetadata, getTitleBlockOptions, getFooterBlockOptions, PreviewBlockOptions, FlexibleCardUiOptions } from './utils';
|
|
8
8
|
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
9
9
|
import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
|
|
10
10
|
/**
|
|
@@ -18,11 +18,9 @@ const FlexibleResolvedView = ({
|
|
|
18
18
|
onError,
|
|
19
19
|
onResolve,
|
|
20
20
|
showServerActions,
|
|
21
|
-
anchorTarget,
|
|
22
21
|
testId = 'smart-block-resolved-view',
|
|
23
22
|
url,
|
|
24
|
-
analytics
|
|
25
|
-
titleBlockProps
|
|
23
|
+
analytics
|
|
26
24
|
}) => {
|
|
27
25
|
const [isPreviewBlockErrored, setIsPreviewBlockErrored] = useState(false);
|
|
28
26
|
useEffect(() => {
|
|
@@ -55,20 +53,15 @@ const FlexibleResolvedView = ({
|
|
|
55
53
|
onResolve: onResolve,
|
|
56
54
|
showServerActions: showServerActions,
|
|
57
55
|
testId: testId,
|
|
58
|
-
ui:
|
|
59
|
-
hideElevation: true
|
|
60
|
-
},
|
|
56
|
+
ui: FlexibleCardUiOptions,
|
|
61
57
|
url: url
|
|
62
|
-
}, /*#__PURE__*/React.createElement(TitleBlock, _extends({
|
|
63
|
-
position: SmartLinkPosition.Center,
|
|
58
|
+
}, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, getTitleBlockOptions(), {
|
|
64
59
|
metadata: titleMetadata,
|
|
65
|
-
hideRetry: true,
|
|
66
60
|
subtitle: [{
|
|
67
61
|
name: ElementName.Location
|
|
68
62
|
}],
|
|
69
|
-
metadataPosition: SmartLinkPosition.Top
|
|
70
|
-
|
|
71
|
-
}, titleBlockProps)), /*#__PURE__*/React.createElement(MetadataBlock, _extends({
|
|
63
|
+
metadataPosition: SmartLinkPosition.Top
|
|
64
|
+
})), /*#__PURE__*/React.createElement(MetadataBlock, _extends({
|
|
72
65
|
primary: topMetadata,
|
|
73
66
|
maxLines: 1
|
|
74
67
|
}, getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') && {
|
|
@@ -77,15 +70,11 @@ const FlexibleResolvedView = ({
|
|
|
77
70
|
primary: bottomMetadata,
|
|
78
71
|
maxLines: 1,
|
|
79
72
|
overrideCss: metadataBlockCss
|
|
80
|
-
}), !isPreviewBlockErrored ? /*#__PURE__*/React.createElement(PreviewBlock, {
|
|
81
|
-
placement: MediaPlacement.Right,
|
|
82
|
-
ignoreContainerPadding: true,
|
|
73
|
+
}), !isPreviewBlockErrored ? /*#__PURE__*/React.createElement(PreviewBlock, _extends({}, PreviewBlockOptions, {
|
|
83
74
|
onError: () => {
|
|
84
75
|
setIsPreviewBlockErrored(true);
|
|
85
76
|
}
|
|
86
|
-
}) : null, /*#__PURE__*/React.createElement(FooterBlock, _extends({},
|
|
87
|
-
overrideCss: footerBlockCss
|
|
88
|
-
}, {
|
|
77
|
+
})) : null, /*#__PURE__*/React.createElement(FooterBlock, _extends({}, getFooterBlockOptions(), {
|
|
89
78
|
actions: footerActions
|
|
90
79
|
})));
|
|
91
80
|
};
|
|
@@ -1,19 +1,17 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
|
|
2
|
+
/** @jsx jsx */
|
|
3
|
+
import { css, jsx } from '@emotion/react';
|
|
4
|
+
import { useCallback, useMemo } from 'react';
|
|
3
5
|
import { FormattedMessage } from 'react-intl-next';
|
|
4
|
-
import
|
|
6
|
+
import { getExtensionKey } from '../../../../state/helpers';
|
|
5
7
|
import { AuthorizeAction } from '../../actions/flexible/AuthorizeAction';
|
|
6
|
-
import BlockCardFooter from '../../components/flexible/footer';
|
|
7
|
-
import { CustomBlock, TitleBlock } from '../../../FlexibleCard/components/blocks';
|
|
8
|
-
import { SmartLinkStatus } from '../../../../constants';
|
|
9
8
|
import { extractProvider } from '@atlaskit/link-extractors';
|
|
10
9
|
import UnauthorisedViewContent from '../../../common/UnauthorisedViewContent';
|
|
11
|
-
import { css } from '@emotion/react';
|
|
12
|
-
import { tokens } from '../../../../utils/token';
|
|
13
10
|
import { messages } from '../../../../messages';
|
|
11
|
+
import UnresolvedView from './unresolved-view';
|
|
14
12
|
import { withFlexibleUIBlockCardStyle } from './utils/withFlexibleUIBlockCardStyle';
|
|
15
13
|
const contentStyles = css`
|
|
16
|
-
color: ${
|
|
14
|
+
color: ${"var(--ds-text-subtlest, #626F86)"};
|
|
17
15
|
margin-top: 0.5rem;
|
|
18
16
|
font-size: 0.75rem;
|
|
19
17
|
`;
|
|
@@ -26,59 +24,42 @@ const contentStyles = css`
|
|
|
26
24
|
* @see FlexibleCardProps
|
|
27
25
|
*/
|
|
28
26
|
const FlexibleUnauthorisedView = ({
|
|
29
|
-
anchorTarget,
|
|
30
|
-
analytics,
|
|
31
|
-
cardState,
|
|
32
|
-
extensionKey = '',
|
|
33
|
-
onAuthorize,
|
|
34
|
-
onClick,
|
|
35
|
-
onError,
|
|
36
27
|
testId = 'smart-block-unauthorized-view',
|
|
37
|
-
|
|
38
|
-
titleBlockProps
|
|
28
|
+
...props
|
|
39
29
|
}) => {
|
|
40
|
-
var _cardState$details, _extractProvider;
|
|
30
|
+
var _getExtensionKey, _cardState$details, _extractProvider;
|
|
31
|
+
const {
|
|
32
|
+
analytics,
|
|
33
|
+
cardState,
|
|
34
|
+
onAuthorize
|
|
35
|
+
} = props;
|
|
36
|
+
const extensionKey = (_getExtensionKey = getExtensionKey(cardState === null || cardState === void 0 ? void 0 : cardState.details)) !== null && _getExtensionKey !== void 0 ? _getExtensionKey : '';
|
|
41
37
|
const data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
|
|
42
38
|
const providerName = (_extractProvider = extractProvider(data)) === null || _extractProvider === void 0 ? void 0 : _extractProvider.text;
|
|
43
39
|
const handleAuthorize = useCallback(() => {
|
|
44
40
|
if (onAuthorize) {
|
|
45
|
-
analytics.track.appAccountAuthStarted({
|
|
41
|
+
analytics === null || analytics === void 0 ? void 0 : analytics.track.appAccountAuthStarted({
|
|
46
42
|
extensionKey
|
|
47
43
|
});
|
|
48
44
|
onAuthorize();
|
|
49
45
|
}
|
|
50
|
-
}, [onAuthorize, extensionKey, analytics.track]);
|
|
51
|
-
const content = useMemo(() => onAuthorize ?
|
|
46
|
+
}, [onAuthorize, extensionKey, analytics === null || analytics === void 0 ? void 0 : analytics.track]);
|
|
47
|
+
const content = useMemo(() => onAuthorize ? jsx(UnauthorisedViewContent, {
|
|
52
48
|
providerName: providerName,
|
|
53
49
|
analytics: analytics,
|
|
54
50
|
testId: testId
|
|
55
|
-
}) :
|
|
51
|
+
}) : jsx(FormattedMessage, _extends({}, messages[providerName ? 'unauthorised_account_description' : 'unauthorised_account_description_no_provider'], {
|
|
56
52
|
values: {
|
|
57
53
|
context: providerName
|
|
58
54
|
}
|
|
59
55
|
})), [analytics, onAuthorize, providerName, testId]);
|
|
60
56
|
const actions = useMemo(() => onAuthorize ? [AuthorizeAction(handleAuthorize, providerName)] : [], [handleAuthorize, onAuthorize, providerName]);
|
|
61
|
-
return
|
|
62
|
-
appearance: "block",
|
|
63
|
-
cardState: cardState,
|
|
64
|
-
onAuthorize: onAuthorize,
|
|
65
|
-
onClick: onClick,
|
|
66
|
-
onError: onError,
|
|
67
|
-
testId: testId,
|
|
68
|
-
ui: {
|
|
69
|
-
hideElevation: true
|
|
70
|
-
},
|
|
71
|
-
url: url
|
|
72
|
-
}, /*#__PURE__*/React.createElement(TitleBlock, _extends({
|
|
73
|
-
hideRetry: true,
|
|
74
|
-
anchorTarget: anchorTarget
|
|
75
|
-
}, titleBlockProps)), /*#__PURE__*/React.createElement(CustomBlock, {
|
|
76
|
-
overrideCss: contentStyles,
|
|
77
|
-
testId: `${testId}-content`
|
|
78
|
-
}, /*#__PURE__*/React.createElement("div", null, content)), /*#__PURE__*/React.createElement(CustomBlock, null, /*#__PURE__*/React.createElement(BlockCardFooter, {
|
|
57
|
+
return jsx(UnresolvedView, _extends({}, props, {
|
|
79
58
|
actions: actions,
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
59
|
+
testId: testId
|
|
60
|
+
}), jsx("div", {
|
|
61
|
+
css: contentStyles,
|
|
62
|
+
"data-testid": `${testId}-content`
|
|
63
|
+
}, content));
|
|
83
64
|
};
|
|
84
65
|
export default withFlexibleUIBlockCardStyle(FlexibleUnauthorisedView);
|
|
@@ -4,11 +4,13 @@ import { N40 } from '@atlaskit/theme/colors';
|
|
|
4
4
|
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
5
5
|
|
|
6
6
|
// in editor prosemirror adds padding-left so we need to overwrite it
|
|
7
|
+
// renderer overwrites the margin-right so we need to add it here
|
|
7
8
|
export const metadataBlockCss = css`
|
|
8
9
|
/* primary element group */
|
|
9
10
|
span[data-smart-element-avatar-group] {
|
|
10
11
|
> ul {
|
|
11
12
|
padding-left: 0px;
|
|
13
|
+
margin-right: 0.5rem;
|
|
12
14
|
}
|
|
13
15
|
}
|
|
14
16
|
[data-smart-element-group] {
|
|
@@ -44,7 +46,4 @@ const refreshedFlexibleBlockCardStyle = css`
|
|
|
44
46
|
border: 1px solid ${`var(--ds-border, ${N40})`};
|
|
45
47
|
}
|
|
46
48
|
`;
|
|
47
|
-
export const flexibleBlockCardStyle = getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? refreshedFlexibleBlockCardStyle : flexibleBlockCardElevationStyle;
|
|
48
|
-
export const forbiddenViewTitleStyle = css`
|
|
49
|
-
font-weight: 600;
|
|
50
|
-
`;
|
|
49
|
+
export const flexibleBlockCardStyle = getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? refreshedFlexibleBlockCardStyle : flexibleBlockCardElevationStyle;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import { CustomBlock, PreviewBlock, TitleBlock } from '../../../../FlexibleCard/components/blocks';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import FlexibleCard from '../../../../FlexibleCard';
|
|
5
|
+
import { InternalFooterBlock } from '../../../../FlexibleCard/components/blocks';
|
|
6
|
+
import { FlexibleCardUiOptions, getFooterBlockOptions, PreviewBlockOptions, getTitleBlockOptions } from '../utils';
|
|
7
|
+
const UnresolvedView = ({
|
|
8
|
+
actions,
|
|
9
|
+
cardState,
|
|
10
|
+
children,
|
|
11
|
+
onAuthorize,
|
|
12
|
+
onClick,
|
|
13
|
+
onError,
|
|
14
|
+
showPreview = false,
|
|
15
|
+
testId,
|
|
16
|
+
title,
|
|
17
|
+
url
|
|
18
|
+
}) => /*#__PURE__*/React.createElement(FlexibleCard, {
|
|
19
|
+
appearance: "block",
|
|
20
|
+
cardState: cardState,
|
|
21
|
+
onAuthorize: onAuthorize,
|
|
22
|
+
onClick: onClick,
|
|
23
|
+
onError: onError,
|
|
24
|
+
testId: testId,
|
|
25
|
+
ui: FlexibleCardUiOptions,
|
|
26
|
+
url: url
|
|
27
|
+
}, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, getTitleBlockOptions(), {
|
|
28
|
+
text: title
|
|
29
|
+
})), /*#__PURE__*/React.createElement(CustomBlock, null, children), showPreview && /*#__PURE__*/React.createElement(PreviewBlock, PreviewBlockOptions), /*#__PURE__*/React.createElement(InternalFooterBlock, _extends({}, getFooterBlockOptions(), {
|
|
30
|
+
actions: actions,
|
|
31
|
+
testId: "smart-block-card-footer"
|
|
32
|
+
})));
|
|
33
|
+
export default UnresolvedView;
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
2
|
+
import { ElementName, MediaPlacement, SmartLinkPosition, SmartLinkSize } from '../../../../../constants';
|
|
2
3
|
import { extractOwnedBy } from '../../../../../extractors/flexible/utils';
|
|
3
4
|
import { getExtensionKey } from '../../../../../state/helpers';
|
|
5
|
+
import { footerBlockCss, titleBlockCss } from '../styled';
|
|
4
6
|
const baseTopMetadata = [{
|
|
5
7
|
name: ElementName.ModifiedOn
|
|
6
8
|
}, {
|
|
@@ -134,4 +136,27 @@ export const getSimulatedMetadata = cardDetails => {
|
|
|
134
136
|
titleMetadata,
|
|
135
137
|
topMetadata
|
|
136
138
|
};
|
|
137
|
-
};
|
|
139
|
+
};
|
|
140
|
+
export const FlexibleCardUiOptions = {
|
|
141
|
+
hideElevation: true
|
|
142
|
+
};
|
|
143
|
+
|
|
144
|
+
// Due to the use of getBooleanFF(), this has to be a function.
|
|
145
|
+
// Make this a const object after ff cleanup.
|
|
146
|
+
export const getTitleBlockOptions = () => ({
|
|
147
|
+
anchorTarget: getBooleanFF('platform.linking-platform.smart-card.enable-block-card-clicks-opening-in-same-tab') ? '_self' : undefined,
|
|
148
|
+
position: SmartLinkPosition.Center,
|
|
149
|
+
overrideCss: titleBlockCss,
|
|
150
|
+
hideRetry: true,
|
|
151
|
+
size: getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? SmartLinkSize.Large : undefined
|
|
152
|
+
});
|
|
153
|
+
export const PreviewBlockOptions = {
|
|
154
|
+
placement: MediaPlacement.Right,
|
|
155
|
+
ignoreContainerPadding: true
|
|
156
|
+
};
|
|
157
|
+
|
|
158
|
+
// Due to the use of getBooleanFF(), this has to be a function.
|
|
159
|
+
// Make this a const object after ff cleanup.
|
|
160
|
+
export const getFooterBlockOptions = () => ({
|
|
161
|
+
overrideCss: getBooleanFF('platform.linking-platform.smart-card.enable-better-metadata_iojwg') ? footerBlockCss : undefined
|
|
162
|
+
});
|
|
@@ -1,23 +1,7 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
import React
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
5
|
-
import Block from '../block';
|
|
6
|
-
import ElementGroup from '../element-group';
|
|
7
|
-
import { Provider } from '../../elements';
|
|
8
|
-
import ActionGroup from '../action-group';
|
|
9
|
-
import { filterActionItems } from '../utils';
|
|
10
|
-
import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
|
|
11
|
-
const getActionGroupStyles = size => {
|
|
12
|
-
if (size === SmartLinkSize.XLarge) {
|
|
13
|
-
// The biggest height of the action button exceeds the max line-height
|
|
14
|
-
// of the elements causing the action on the block with x-large size to
|
|
15
|
-
// get cut at the bottom.
|
|
16
|
-
return css`
|
|
17
|
-
max-height: 2rem;
|
|
18
|
-
`;
|
|
19
|
-
}
|
|
20
|
-
};
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import FooterBlockResolvedView from './resolved';
|
|
4
|
+
import { SmartLinkStatus } from '../../../../../constants';
|
|
21
5
|
|
|
22
6
|
/**
|
|
23
7
|
* Represents a FooterBlock, designed to contain elements and actions that should appear
|
|
@@ -26,43 +10,16 @@ const getActionGroupStyles = size => {
|
|
|
26
10
|
* @param {FooterBlockProps} FooterBlockProps
|
|
27
11
|
* @see Block
|
|
28
12
|
*/
|
|
29
|
-
const FooterBlock =
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
testId = 'smart-footer-block',
|
|
35
|
-
onActionMenuOpenChange
|
|
36
|
-
} = props;
|
|
37
|
-
const context = useFlexibleUiContext();
|
|
38
|
-
const hasActions = useMemo(() => {
|
|
39
|
-
var _filterActionItems;
|
|
40
|
-
return ((_filterActionItems = filterActionItems(actions, context)) === null || _filterActionItems === void 0 ? void 0 : _filterActionItems.length) > 0;
|
|
41
|
-
}, [actions, context]);
|
|
42
|
-
const onDropdownOpenChange = useCallback(isOpen => {
|
|
43
|
-
if (onActionMenuOpenChange) {
|
|
44
|
-
onActionMenuOpenChange({
|
|
45
|
-
isOpen
|
|
46
|
-
});
|
|
47
|
-
}
|
|
48
|
-
}, [onActionMenuOpenChange]);
|
|
13
|
+
const FooterBlock = ({
|
|
14
|
+
status,
|
|
15
|
+
testId = 'smart-footer-block',
|
|
16
|
+
...props
|
|
17
|
+
}) => {
|
|
49
18
|
if (status !== SmartLinkStatus.Resolved) {
|
|
50
19
|
return null;
|
|
51
20
|
}
|
|
52
|
-
return /*#__PURE__*/React.createElement(
|
|
53
|
-
testId:
|
|
54
|
-
})
|
|
55
|
-
testId: `${testId}-provider`
|
|
56
|
-
}), actions && hasActions ? /*#__PURE__*/React.createElement(ElementGroup, {
|
|
57
|
-
testId: "smart-element-group-actions",
|
|
58
|
-
align: SmartLinkAlignment.Right,
|
|
59
|
-
direction: SmartLinkDirection.Horizontal,
|
|
60
|
-
overrideCss: getActionGroupStyles(size),
|
|
61
|
-
width: SmartLinkWidth.Flexible
|
|
62
|
-
}, /*#__PURE__*/React.createElement(ActionGroup, {
|
|
63
|
-
onDropdownOpenChange: onDropdownOpenChange,
|
|
64
|
-
items: actions,
|
|
65
|
-
appearance: "default"
|
|
66
|
-
})) : null);
|
|
21
|
+
return /*#__PURE__*/React.createElement(FooterBlockResolvedView, _extends({}, props, {
|
|
22
|
+
testId: testId
|
|
23
|
+
}));
|
|
67
24
|
};
|
|
68
25
|
export default FooterBlock;
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import { css } from '@emotion/react';
|
|
3
|
+
import React, { useCallback, useMemo } from 'react';
|
|
4
|
+
import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../../constants';
|
|
5
|
+
import { useFlexibleUiContext } from '../../../../../../state/flexible-ui-context';
|
|
6
|
+
import { Provider } from '../../../elements';
|
|
7
|
+
import ActionGroup from '../../action-group';
|
|
8
|
+
import Block from '../../block';
|
|
9
|
+
import ElementGroup from '../../element-group';
|
|
10
|
+
import { filterActionItems } from '../../utils';
|
|
11
|
+
const getActionGroupStyles = size => {
|
|
12
|
+
if (size === SmartLinkSize.XLarge) {
|
|
13
|
+
// The biggest height of the action button exceeds the max line-height
|
|
14
|
+
// of the elements causing the action on the block with x-large size to
|
|
15
|
+
// get cut at the bottom.
|
|
16
|
+
return css`
|
|
17
|
+
max-height: 2rem;
|
|
18
|
+
`;
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
const FooterBlockResolvedView = props => {
|
|
22
|
+
const {
|
|
23
|
+
actions,
|
|
24
|
+
testId,
|
|
25
|
+
onActionMenuOpenChange,
|
|
26
|
+
size = SmartLinkSize.Medium
|
|
27
|
+
} = props;
|
|
28
|
+
const context = useFlexibleUiContext();
|
|
29
|
+
const hasActions = useMemo(() => {
|
|
30
|
+
var _filterActionItems;
|
|
31
|
+
return ((_filterActionItems = filterActionItems(actions, context)) === null || _filterActionItems === void 0 ? void 0 : _filterActionItems.length) > 0;
|
|
32
|
+
}, [actions, context]);
|
|
33
|
+
const onDropdownOpenChange = useCallback(isOpen => {
|
|
34
|
+
if (onActionMenuOpenChange) {
|
|
35
|
+
onActionMenuOpenChange({
|
|
36
|
+
isOpen
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
}, [onActionMenuOpenChange]);
|
|
40
|
+
return /*#__PURE__*/React.createElement(Block, _extends({}, props, {
|
|
41
|
+
testId: `${testId}-resolved-view`
|
|
42
|
+
}), /*#__PURE__*/React.createElement(Provider, {
|
|
43
|
+
testId: `${testId}-provider`
|
|
44
|
+
}), actions && hasActions ? /*#__PURE__*/React.createElement(ElementGroup, {
|
|
45
|
+
testId: "smart-element-group-actions",
|
|
46
|
+
align: SmartLinkAlignment.Right,
|
|
47
|
+
direction: SmartLinkDirection.Horizontal,
|
|
48
|
+
overrideCss: getActionGroupStyles(size),
|
|
49
|
+
width: SmartLinkWidth.Flexible
|
|
50
|
+
}, /*#__PURE__*/React.createElement(ActionGroup, {
|
|
51
|
+
onDropdownOpenChange: onDropdownOpenChange,
|
|
52
|
+
items: actions,
|
|
53
|
+
appearance: "default"
|
|
54
|
+
})) : null);
|
|
55
|
+
};
|
|
56
|
+
export default FooterBlockResolvedView;
|
|
@@ -3,4 +3,7 @@ export { default as MetadataBlock } from './metadata-block';
|
|
|
3
3
|
export { default as PreviewBlock } from './preview-block';
|
|
4
4
|
export { default as SnippetBlock } from './snippet-block';
|
|
5
5
|
export { default as TitleBlock } from './title-block';
|
|
6
|
-
export { default as CustomBlock } from './block';
|
|
6
|
+
export { default as CustomBlock } from './block';
|
|
7
|
+
|
|
8
|
+
// Internal components to be used within @atlaskit/smart-card only.
|
|
9
|
+
export { default as InternalFooterBlock } from './footer-block/resolved';
|
|
@@ -18,6 +18,7 @@ const SnippetBlock = ({
|
|
|
18
18
|
maxLines = DEFAULT_MAX_LINES,
|
|
19
19
|
status = SmartLinkStatus.Fallback,
|
|
20
20
|
testId = 'smart-block-snippet',
|
|
21
|
+
text,
|
|
21
22
|
...blockProps
|
|
22
23
|
}) => {
|
|
23
24
|
if (status !== SmartLinkStatus.Resolved) {
|
|
@@ -27,7 +28,8 @@ const SnippetBlock = ({
|
|
|
27
28
|
return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
|
|
28
29
|
testId: `${testId}-resolved-view`
|
|
29
30
|
}), /*#__PURE__*/React.createElement(Snippet, {
|
|
30
|
-
maxLines: snippetMaxLines
|
|
31
|
+
maxLines: snippetMaxLines,
|
|
32
|
+
text: text
|
|
31
33
|
}));
|
|
32
34
|
};
|
|
33
35
|
export default SnippetBlock;
|
|
@@ -23,7 +23,8 @@ const Text = ({
|
|
|
23
23
|
message,
|
|
24
24
|
name,
|
|
25
25
|
overrideCss,
|
|
26
|
-
testId = 'smart-element-text'
|
|
26
|
+
testId = 'smart-element-text',
|
|
27
|
+
text
|
|
27
28
|
}) => {
|
|
28
29
|
if (!message && !content) {
|
|
29
30
|
return null;
|
|
@@ -34,6 +35,6 @@ const Text = ({
|
|
|
34
35
|
"data-smart-element": name,
|
|
35
36
|
"data-smart-element-text": true,
|
|
36
37
|
"data-testid": testId
|
|
37
|
-
}, getFormattedMessage(message) || content);
|
|
38
|
+
}, text ? text : getFormattedMessage(message) || content);
|
|
38
39
|
};
|
|
39
40
|
export default Text;
|
|
@@ -8,7 +8,7 @@ import LinkWarningModal from './LinkWarningModal';
|
|
|
8
8
|
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
9
9
|
const PACKAGE_DATA = {
|
|
10
10
|
packageName: "@atlaskit/smart-card",
|
|
11
|
-
packageVersion: "26.
|
|
11
|
+
packageVersion: "26.38.1",
|
|
12
12
|
componentName: 'linkUrl'
|
|
13
13
|
};
|
|
14
14
|
const Link = withLinkClickedEvent('a');
|
|
@@ -15,7 +15,7 @@ export var ANALYTICS_CHANNEL = 'media';
|
|
|
15
15
|
export var context = {
|
|
16
16
|
componentName: 'smart-cards',
|
|
17
17
|
packageName: "@atlaskit/smart-card",
|
|
18
|
-
packageVersion: "26.
|
|
18
|
+
packageVersion: "26.38.1"
|
|
19
19
|
};
|
|
20
20
|
export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
|
|
21
21
|
TrackQuickActionType["StatusUpdate"] = "StatusUpdate";
|
|
@@ -13,6 +13,7 @@ import { messages } from '../../../../messages';
|
|
|
13
13
|
*/
|
|
14
14
|
export var AuthorizeAction = function AuthorizeAction(onAuthorize, providerName) {
|
|
15
15
|
return {
|
|
16
|
+
appearance: 'primary',
|
|
16
17
|
name: ActionName.CustomAction,
|
|
17
18
|
content: providerName ? /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_unauthorised_account_action, {
|
|
18
19
|
values: {
|