@atlaskit/editor-synced-block-renderer 2.3.0 → 2.3.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.
Files changed (27) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/afm-cc/tsconfig.json +21 -0
  3. package/dist/cjs/ui/SyncedBlockErrorComponent.js +13 -2
  4. package/dist/cjs/ui/SyncedBlockNodeComponentRenderer.js +2 -1
  5. package/dist/cjs/ui/SyncedBlockPermissionDenied.compiled.css +11 -0
  6. package/dist/cjs/ui/SyncedBlockPermissionDenied.js +107 -0
  7. package/dist/cjs/ui/SyncedBlockRenderer.js +2 -1
  8. package/dist/cjs/ui/__generated__/SyncedBlockPermissionDeniedRequestAccessMutation.graphql.js +67 -0
  9. package/dist/es2019/ui/SyncedBlockErrorComponent.js +15 -3
  10. package/dist/es2019/ui/SyncedBlockNodeComponentRenderer.js +2 -1
  11. package/dist/es2019/ui/SyncedBlockPermissionDenied.compiled.css +11 -0
  12. package/dist/es2019/ui/SyncedBlockPermissionDenied.js +94 -0
  13. package/dist/es2019/ui/SyncedBlockRenderer.js +2 -1
  14. package/dist/es2019/ui/__generated__/SyncedBlockPermissionDeniedRequestAccessMutation.graphql.js +61 -0
  15. package/dist/esm/ui/SyncedBlockErrorComponent.js +14 -3
  16. package/dist/esm/ui/SyncedBlockNodeComponentRenderer.js +2 -1
  17. package/dist/esm/ui/SyncedBlockPermissionDenied.compiled.css +11 -0
  18. package/dist/esm/ui/SyncedBlockPermissionDenied.js +98 -0
  19. package/dist/esm/ui/SyncedBlockRenderer.js +2 -1
  20. package/dist/esm/ui/__generated__/SyncedBlockPermissionDeniedRequestAccessMutation.graphql.js +61 -0
  21. package/dist/types/ui/SyncedBlockErrorComponent.d.ts +2 -1
  22. package/dist/types/ui/SyncedBlockPermissionDenied.d.ts +6 -0
  23. package/dist/types/ui/__generated__/SyncedBlockPermissionDeniedRequestAccessMutation.graphql.d.ts +27 -0
  24. package/dist/types-ts4.5/ui/SyncedBlockErrorComponent.d.ts +2 -1
  25. package/dist/types-ts4.5/ui/SyncedBlockPermissionDenied.d.ts +6 -0
  26. package/dist/types-ts4.5/ui/__generated__/SyncedBlockPermissionDeniedRequestAccessMutation.graphql.d.ts +27 -0
  27. package/package.json +13 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/editor-synced-block-renderer
2
2
 
3
+ ## 2.3.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`ff3e1422d5b70`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ff3e1422d5b70) -
8
+ [ux] EDITOR-2437 implement request access to sync block component
9
+ - Updated dependencies
10
+
3
11
  ## 2.3.0
4
12
 
5
13
  ### Minor Changes
@@ -18,12 +18,33 @@
18
18
  "../src/**/examples.*"
19
19
  ],
20
20
  "references": [
21
+ {
22
+ "path": "../../../design-system/button/afm-cc/tsconfig.json"
23
+ },
24
+ {
25
+ "path": "../../../design-system/css/afm-cc/tsconfig.json"
26
+ },
21
27
  {
22
28
  "path": "../../editor-synced-block-provider/afm-cc/tsconfig.json"
23
29
  },
30
+ {
31
+ "path": "../../../design-system/heading/afm-cc/tsconfig.json"
32
+ },
33
+ {
34
+ "path": "../../../design-system/icon/afm-cc/tsconfig.json"
35
+ },
36
+ {
37
+ "path": "../../../design-system/image/afm-cc/tsconfig.json"
38
+ },
39
+ {
40
+ "path": "../../../design-system/primitives/afm-cc/tsconfig.json"
41
+ },
24
42
  {
25
43
  "path": "../../renderer/afm-cc/tsconfig.json"
26
44
  },
45
+ {
46
+ "path": "../../../design-system/tokens/afm-cc/tsconfig.json"
47
+ },
27
48
  {
28
49
  "path": "../../editor-common/afm-cc/tsconfig.json"
29
50
  }
@@ -7,11 +7,22 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.SyncedBlockErrorComponent = void 0;
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
  var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
10
+ var _SyncedBlockPermissionDenied = require("./SyncedBlockPermissionDenied");
10
11
  var SyncedBlockErrorComponent = exports.SyncedBlockErrorComponent = function SyncedBlockErrorComponent(_ref) {
11
- var error = _ref.error;
12
+ var error = _ref.error,
13
+ resourceId = _ref.resourceId;
12
14
  switch (error) {
13
15
  case _editorSyncedBlockProvider.SyncBlockError.Forbidden:
14
- return /*#__PURE__*/_react.default.createElement("div", null, "You don't have permission to view this sync block");
16
+ if (resourceId) {
17
+ var _getPageIdAndTypeFrom = (0, _editorSyncedBlockProvider.getPageIdAndTypeFromAri)(resourceId),
18
+ contentId = _getPageIdAndTypeFrom.id;
19
+ if (contentId) {
20
+ return /*#__PURE__*/_react.default.createElement(_SyncedBlockPermissionDenied.SyncedBlockPermissionDenied, {
21
+ contentId: contentId
22
+ });
23
+ }
24
+ }
25
+ return /*#__PURE__*/_react.default.createElement("div", null, "Something went wrong");
15
26
  case _editorSyncedBlockProvider.SyncBlockError.NotFound:
16
27
  return /*#__PURE__*/_react.default.createElement("div", null, "Sync Block Not Found");
17
28
  case _editorSyncedBlockProvider.SyncBlockError.Errored:
@@ -39,7 +39,8 @@ var SyncedBlockNodeComponentRenderer = exports.SyncedBlockNodeComponentRenderer
39
39
  if (fetchResult !== null && fetchResult !== void 0 && fetchResult.error || !(fetchResult !== null && fetchResult !== void 0 && fetchResult.data)) {
40
40
  var _fetchResult$error;
41
41
  return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorComponent.SyncedBlockErrorComponent, {
42
- error: (_fetchResult$error = fetchResult === null || fetchResult === void 0 ? void 0 : fetchResult.error) !== null && _fetchResult$error !== void 0 ? _fetchResult$error : _editorSyncedBlockProvider.SyncBlockError.Errored
42
+ error: (_fetchResult$error = fetchResult === null || fetchResult === void 0 ? void 0 : fetchResult.error) !== null && _fetchResult$error !== void 0 ? _fetchResult$error : _editorSyncedBlockProvider.SyncBlockError.Errored,
43
+ resourceId: props.resourceId
43
44
  });
44
45
  }
45
46
  var syncBlockDoc = {
@@ -0,0 +1,11 @@
1
+
2
+ ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
3
+ ._zulpu2gc{gap:var(--ds-space-100,8px)}._18u0u2gc{margin-left:var(--ds-space-100,8px)}
4
+ ._19bvxy5q{padding-left:var(--ds-space-400,2pc)}
5
+ ._1bahv2br{justify-content:start}
6
+ ._1e0c1txw{display:flex}
7
+ ._4cvr1h6o{align-items:center}
8
+ ._bfhksyzs{background-color:var(--ds-background-disabled,#091e4208)}
9
+ ._ca0qv47k{padding-top:var(--ds-space-250,20px)}
10
+ ._n3tdv47k{padding-bottom:var(--ds-space-250,20px)}
11
+ ._u5f3v47k{padding-right:var(--ds-space-250,20px)}
@@ -0,0 +1,107 @@
1
+ /* SyncedBlockPermissionDenied.tsx generated by @compiled/babel-plugin v0.38.1 */
2
+ "use strict";
3
+
4
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
+ var _typeof = require("@babel/runtime/helpers/typeof");
6
+ Object.defineProperty(exports, "__esModule", {
7
+ value: true
8
+ });
9
+ exports.SyncedBlockPermissionDenied = void 0;
10
+ require("./SyncedBlockPermissionDenied.compiled.css");
11
+ var _runtime = require("@compiled/react/runtime");
12
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
13
+ var _SyncedBlockPermissionDeniedRequestAccessMutation2 = _interopRequireDefault(require("./__generated__/SyncedBlockPermissionDeniedRequestAccessMutation.graphql"));
14
+ var _react = _interopRequireWildcard(require("react"));
15
+ var _reactIntlNext = require("react-intl-next");
16
+ var _reactRelay = require("react-relay");
17
+ var _new = _interopRequireDefault(require("@atlaskit/button/new"));
18
+ var _messages = require("@atlaskit/editor-common/messages");
19
+ var _heading = _interopRequireDefault(require("@atlaskit/heading"));
20
+ var _statusSuccess = _interopRequireDefault(require("@atlaskit/icon/core/status-success"));
21
+ var _image = _interopRequireDefault(require("@atlaskit/image"));
22
+ var _compiled = require("@atlaskit/primitives/compiled");
23
+ var _PermissionDenied = _interopRequireDefault(require("./assets/PermissionDenied.svg"));
24
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
25
+ var styles = {
26
+ wrapper: "_2rko12b0 _zulpu2gc _ca0qv47k _n3tdv47k _19bvxy5q _u5f3v47k _bfhksyzs _1e0c1txw _1bahv2br _4cvr1h6o",
27
+ textWrapper: "_18u0u2gc"
28
+ };
29
+ var RequestAccessState = /*#__PURE__*/function (RequestAccessState) {
30
+ RequestAccessState["default"] = "default";
31
+ RequestAccessState["errored"] = "errored";
32
+ RequestAccessState["loading"] = "loading";
33
+ RequestAccessState["pending"] = "pending";
34
+ return RequestAccessState;
35
+ }(RequestAccessState || {});
36
+ var SyncedBlockPermissionDenied = exports.SyncedBlockPermissionDenied = function SyncedBlockPermissionDenied(_ref) {
37
+ var contentId = _ref.contentId;
38
+ var _useIntl = (0, _reactIntlNext.useIntl)(),
39
+ formatMessage = _useIntl.formatMessage;
40
+ var _useState = (0, _react.useState)(RequestAccessState.default),
41
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
42
+ requestAccessState = _useState2[0],
43
+ setRequestAccessState = _useState2[1];
44
+ var handleRequestComplete = function handleRequestComplete() {
45
+ setRequestAccessState(RequestAccessState.pending);
46
+ };
47
+ var handleRequestError = function handleRequestError(error) {
48
+ setRequestAccessState(RequestAccessState.errored);
49
+ };
50
+ var _useMutation = (0, _reactRelay.useMutation)(_SyncedBlockPermissionDeniedRequestAccessMutation2.default),
51
+ _useMutation2 = (0, _slicedToArray2.default)(_useMutation, 1),
52
+ commitMutation = _useMutation2[0];
53
+ var onClick = function onClick() {
54
+ setRequestAccessState(RequestAccessState.loading);
55
+ commitMutation({
56
+ variables: {
57
+ requestPageAccessInput: {
58
+ pageId: contentId,
59
+ accessType: 'VIEW'
60
+ }
61
+ },
62
+ onCompleted: function onCompleted() {
63
+ handleRequestComplete();
64
+ },
65
+ onError: handleRequestError
66
+ });
67
+ };
68
+ return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
69
+ xcss: styles.wrapper
70
+ }, /*#__PURE__*/_react.default.createElement(_image.default, {
71
+ src: _PermissionDenied.default,
72
+ alt: formatMessage(_messages.syncBlockMessages.permissionDeniedAltText),
73
+ width: "48",
74
+ height: "48"
75
+ }), /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
76
+ space: "space.100",
77
+ alignInline: "start",
78
+ xcss: styles.textWrapper
79
+ }, /*#__PURE__*/_react.default.createElement(_heading.default, {
80
+ size: "xsmall"
81
+ }, formatMessage(_messages.syncBlockMessages.permissionDeniedHeading)), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
82
+ color: "color.text.subtle"
83
+ }, formatMessage(_messages.syncBlockMessages.permissionDeniedDescription)), requestAccessState === RequestAccessState.pending ? /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
84
+ columnGap: "space.050",
85
+ alignItems: "center"
86
+ }, /*#__PURE__*/_react.default.createElement(_statusSuccess.default, {
87
+ size: "small",
88
+ color: "var(--ds-icon-subtle, #626F86)",
89
+ label: ""
90
+ }), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
91
+ color: "color.text.subtlest",
92
+ weight: "bold",
93
+ testId: "sync-block-access-requested-msg"
94
+ }, formatMessage(_messages.syncBlockMessages.accessRequested))) : /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
95
+ columnGap: "space.100",
96
+ alignItems: "center"
97
+ }, /*#__PURE__*/_react.default.createElement(_new.default, {
98
+ appearance: "default",
99
+ spacing: "compact",
100
+ onClick: onClick,
101
+ isLoading: requestAccessState === RequestAccessState.loading,
102
+ testId: "sync-block-request-access-btn"
103
+ }, formatMessage(_messages.syncBlockMessages.requestAccessButton)), requestAccessState === RequestAccessState.errored && /*#__PURE__*/_react.default.createElement(_compiled.Text, {
104
+ color: "color.text.warning",
105
+ testId: "sync-block-access-error-msg"
106
+ }, formatMessage(_messages.syncBlockMessages.requestAccessError)))));
107
+ };
@@ -21,7 +21,8 @@ var SyncedBlockRenderer = exports.SyncedBlockRenderer = function SyncedBlockRend
21
21
  if (fetchResult.error || !fetchResult.data) {
22
22
  var _fetchResult$error;
23
23
  return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorComponent.SyncedBlockErrorComponent, {
24
- error: (_fetchResult$error = fetchResult.error) !== null && _fetchResult$error !== void 0 ? _fetchResult$error : _editorSyncedBlockProvider.SyncBlockError.Errored
24
+ error: (_fetchResult$error = fetchResult.error) !== null && _fetchResult$error !== void 0 ? _fetchResult$error : _editorSyncedBlockProvider.SyncBlockError.Errored,
25
+ resourceId: fetchResult.resourceId
25
26
  });
26
27
  }
27
28
  var syncBlockDoc = {
@@ -0,0 +1,67 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ /**
8
+ * @generated SignedSource<<3bfb9487e57255dc0512f225894a058b>>
9
+ * @relayHash 676631e44ffd7d0d16b3a7e96ba02def
10
+ * @lightSyntaxTransform
11
+ * @nogrep
12
+ * @codegen-command: yarn relay
13
+ */
14
+
15
+ /* tslint:disable */
16
+ /* eslint-disable */
17
+ // @ts-nocheck
18
+
19
+ // @relayRequestID 68a651ca7e5a5c9b5a075954ed948672c451b0f8c255f4edbd3219fe4947484d
20
+
21
+ var node = function () {
22
+ var v0 = [{
23
+ "defaultValue": null,
24
+ "kind": "LocalArgument",
25
+ "name": "requestPageAccessInput"
26
+ }],
27
+ v1 = [{
28
+ "args": [{
29
+ "kind": "Variable",
30
+ "name": "requestPageAccessInput",
31
+ "variableName": "requestPageAccessInput"
32
+ }],
33
+ "concreteType": "RequestPageAccessPayload",
34
+ "kind": "LinkedField",
35
+ "name": "requestPageAccess",
36
+ "plural": false,
37
+ "selections": [{
38
+ "kind": "ScalarField",
39
+ "name": "displayName"
40
+ }]
41
+ }];
42
+ return {
43
+ "fragment": {
44
+ "argumentDefinitions": v0 /*: any*/,
45
+ "kind": "Fragment",
46
+ "name": "SyncedBlockPermissionDeniedRequestAccessMutation",
47
+ "selections": v1 /*: any*/,
48
+ "type": "Mutation"
49
+ },
50
+ "kind": "Request",
51
+ "operation": {
52
+ "argumentDefinitions": v0 /*: any*/,
53
+ "kind": "Operation",
54
+ "name": "SyncedBlockPermissionDeniedRequestAccessMutation",
55
+ "selections": v1 /*: any*/
56
+ },
57
+ "params": {
58
+ "id": "68a651ca7e5a5c9b5a075954ed948672c451b0f8c255f4edbd3219fe4947484d",
59
+ "metadata": {},
60
+ "name": "SyncedBlockPermissionDeniedRequestAccessMutation",
61
+ "operationKind": "mutation",
62
+ "text": null
63
+ }
64
+ };
65
+ }();
66
+ node.hash = "d0d4982ad805583380d2436a8e21ee6a";
67
+ var _default = exports.default = node;
@@ -1,11 +1,23 @@
1
1
  import React from 'react';
2
- import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
2
+ import { getPageIdAndTypeFromAri, SyncBlockError } from '@atlaskit/editor-synced-block-provider';
3
+ import { SyncedBlockPermissionDenied } from './SyncedBlockPermissionDenied';
3
4
  export const SyncedBlockErrorComponent = ({
4
- error
5
+ error,
6
+ resourceId
5
7
  }) => {
6
8
  switch (error) {
7
9
  case SyncBlockError.Forbidden:
8
- return /*#__PURE__*/React.createElement("div", null, "You don't have permission to view this sync block");
10
+ if (resourceId) {
11
+ const {
12
+ id: contentId
13
+ } = getPageIdAndTypeFromAri(resourceId);
14
+ if (contentId) {
15
+ return /*#__PURE__*/React.createElement(SyncedBlockPermissionDenied, {
16
+ contentId: contentId
17
+ });
18
+ }
19
+ }
20
+ return /*#__PURE__*/React.createElement("div", null, "Something went wrong");
9
21
  case SyncBlockError.NotFound:
10
22
  return /*#__PURE__*/React.createElement("div", null, "Sync Block Not Found");
11
23
  case SyncBlockError.Errored:
@@ -24,7 +24,8 @@ export const SyncedBlockNodeComponentRenderer = props => {
24
24
  if (fetchResult !== null && fetchResult !== void 0 && fetchResult.error || !(fetchResult !== null && fetchResult !== void 0 && fetchResult.data)) {
25
25
  var _fetchResult$error;
26
26
  return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
27
- error: (_fetchResult$error = fetchResult === null || fetchResult === void 0 ? void 0 : fetchResult.error) !== null && _fetchResult$error !== void 0 ? _fetchResult$error : SyncBlockError.Errored
27
+ error: (_fetchResult$error = fetchResult === null || fetchResult === void 0 ? void 0 : fetchResult.error) !== null && _fetchResult$error !== void 0 ? _fetchResult$error : SyncBlockError.Errored,
28
+ resourceId: props.resourceId
28
29
  });
29
30
  }
30
31
  const syncBlockDoc = {
@@ -0,0 +1,11 @@
1
+
2
+ ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
3
+ ._zulpu2gc{gap:var(--ds-space-100,8px)}._18u0u2gc{margin-left:var(--ds-space-100,8px)}
4
+ ._19bvxy5q{padding-left:var(--ds-space-400,2pc)}
5
+ ._1bahv2br{justify-content:start}
6
+ ._1e0c1txw{display:flex}
7
+ ._4cvr1h6o{align-items:center}
8
+ ._bfhksyzs{background-color:var(--ds-background-disabled,#091e4208)}
9
+ ._ca0qv47k{padding-top:var(--ds-space-250,20px)}
10
+ ._n3tdv47k{padding-bottom:var(--ds-space-250,20px)}
11
+ ._u5f3v47k{padding-right:var(--ds-space-250,20px)}
@@ -0,0 +1,94 @@
1
+ /* SyncedBlockPermissionDenied.tsx generated by @compiled/babel-plugin v0.38.1 */
2
+ import "./SyncedBlockPermissionDenied.compiled.css";
3
+ import { ax, ix } from "@compiled/react/runtime";
4
+ import _SyncedBlockPermissionDeniedRequestAccessMutation from "./__generated__/SyncedBlockPermissionDeniedRequestAccessMutation.graphql";
5
+ import React, { useState } from 'react';
6
+ import { useIntl } from 'react-intl-next';
7
+ import { useMutation, graphql } from 'react-relay';
8
+ import Button from '@atlaskit/button/new';
9
+ import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
10
+ import Heading from '@atlaskit/heading';
11
+ import StatusSuccessIcon from '@atlaskit/icon/core/status-success';
12
+ import Image from '@atlaskit/image';
13
+ import { Box, Text, Stack, Flex } from '@atlaskit/primitives/compiled';
14
+ import PermissionDenied from './assets/PermissionDenied.svg';
15
+ const styles = {
16
+ wrapper: "_2rko12b0 _zulpu2gc _ca0qv47k _n3tdv47k _19bvxy5q _u5f3v47k _bfhksyzs _1e0c1txw _1bahv2br _4cvr1h6o",
17
+ textWrapper: "_18u0u2gc"
18
+ };
19
+ var RequestAccessState = /*#__PURE__*/function (RequestAccessState) {
20
+ RequestAccessState["default"] = "default";
21
+ RequestAccessState["errored"] = "errored";
22
+ RequestAccessState["loading"] = "loading";
23
+ RequestAccessState["pending"] = "pending";
24
+ return RequestAccessState;
25
+ }(RequestAccessState || {});
26
+ export const SyncedBlockPermissionDenied = ({
27
+ contentId
28
+ }) => {
29
+ const {
30
+ formatMessage
31
+ } = useIntl();
32
+ const [requestAccessState, setRequestAccessState] = useState(RequestAccessState.default);
33
+ const handleRequestComplete = () => {
34
+ setRequestAccessState(RequestAccessState.pending);
35
+ };
36
+ const handleRequestError = error => {
37
+ setRequestAccessState(RequestAccessState.errored);
38
+ };
39
+ const [commitMutation] = useMutation(_SyncedBlockPermissionDeniedRequestAccessMutation);
40
+ const onClick = () => {
41
+ setRequestAccessState(RequestAccessState.loading);
42
+ commitMutation({
43
+ variables: {
44
+ requestPageAccessInput: {
45
+ pageId: contentId,
46
+ accessType: 'VIEW'
47
+ }
48
+ },
49
+ onCompleted: () => {
50
+ handleRequestComplete();
51
+ },
52
+ onError: handleRequestError
53
+ });
54
+ };
55
+ return /*#__PURE__*/React.createElement(Box, {
56
+ xcss: styles.wrapper
57
+ }, /*#__PURE__*/React.createElement(Image, {
58
+ src: PermissionDenied,
59
+ alt: formatMessage(messages.permissionDeniedAltText),
60
+ width: "48",
61
+ height: "48"
62
+ }), /*#__PURE__*/React.createElement(Stack, {
63
+ space: "space.100",
64
+ alignInline: "start",
65
+ xcss: styles.textWrapper
66
+ }, /*#__PURE__*/React.createElement(Heading, {
67
+ size: "xsmall"
68
+ }, formatMessage(messages.permissionDeniedHeading)), /*#__PURE__*/React.createElement(Text, {
69
+ color: "color.text.subtle"
70
+ }, formatMessage(messages.permissionDeniedDescription)), requestAccessState === RequestAccessState.pending ? /*#__PURE__*/React.createElement(Flex, {
71
+ columnGap: "space.050",
72
+ alignItems: "center"
73
+ }, /*#__PURE__*/React.createElement(StatusSuccessIcon, {
74
+ size: "small",
75
+ color: "var(--ds-icon-subtle, #626F86)",
76
+ label: ""
77
+ }), /*#__PURE__*/React.createElement(Text, {
78
+ color: "color.text.subtlest",
79
+ weight: "bold",
80
+ testId: "sync-block-access-requested-msg"
81
+ }, formatMessage(messages.accessRequested))) : /*#__PURE__*/React.createElement(Flex, {
82
+ columnGap: "space.100",
83
+ alignItems: "center"
84
+ }, /*#__PURE__*/React.createElement(Button, {
85
+ appearance: "default",
86
+ spacing: "compact",
87
+ onClick: onClick,
88
+ isLoading: requestAccessState === RequestAccessState.loading,
89
+ testId: "sync-block-request-access-btn"
90
+ }, formatMessage(messages.requestAccessButton)), requestAccessState === RequestAccessState.errored && /*#__PURE__*/React.createElement(Text, {
91
+ color: "color.text.warning",
92
+ testId: "sync-block-access-error-msg"
93
+ }, formatMessage(messages.requestAccessError)))));
94
+ };
@@ -15,7 +15,8 @@ export const SyncedBlockRenderer = ({
15
15
  if (fetchResult.error || !fetchResult.data) {
16
16
  var _fetchResult$error;
17
17
  return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
18
- error: (_fetchResult$error = fetchResult.error) !== null && _fetchResult$error !== void 0 ? _fetchResult$error : SyncBlockError.Errored
18
+ error: (_fetchResult$error = fetchResult.error) !== null && _fetchResult$error !== void 0 ? _fetchResult$error : SyncBlockError.Errored,
19
+ resourceId: fetchResult.resourceId
19
20
  });
20
21
  }
21
22
  const syncBlockDoc = {
@@ -0,0 +1,61 @@
1
+ /**
2
+ * @generated SignedSource<<3bfb9487e57255dc0512f225894a058b>>
3
+ * @relayHash 676631e44ffd7d0d16b3a7e96ba02def
4
+ * @lightSyntaxTransform
5
+ * @nogrep
6
+ * @codegen-command: yarn relay
7
+ */
8
+
9
+ /* tslint:disable */
10
+ /* eslint-disable */
11
+ // @ts-nocheck
12
+
13
+ // @relayRequestID 68a651ca7e5a5c9b5a075954ed948672c451b0f8c255f4edbd3219fe4947484d
14
+
15
+ const node = function () {
16
+ var v0 = [{
17
+ "defaultValue": null,
18
+ "kind": "LocalArgument",
19
+ "name": "requestPageAccessInput"
20
+ }],
21
+ v1 = [{
22
+ "args": [{
23
+ "kind": "Variable",
24
+ "name": "requestPageAccessInput",
25
+ "variableName": "requestPageAccessInput"
26
+ }],
27
+ "concreteType": "RequestPageAccessPayload",
28
+ "kind": "LinkedField",
29
+ "name": "requestPageAccess",
30
+ "plural": false,
31
+ "selections": [{
32
+ "kind": "ScalarField",
33
+ "name": "displayName"
34
+ }]
35
+ }];
36
+ return {
37
+ "fragment": {
38
+ "argumentDefinitions": v0 /*: any*/,
39
+ "kind": "Fragment",
40
+ "name": "SyncedBlockPermissionDeniedRequestAccessMutation",
41
+ "selections": v1 /*: any*/,
42
+ "type": "Mutation"
43
+ },
44
+ "kind": "Request",
45
+ "operation": {
46
+ "argumentDefinitions": v0 /*: any*/,
47
+ "kind": "Operation",
48
+ "name": "SyncedBlockPermissionDeniedRequestAccessMutation",
49
+ "selections": v1 /*: any*/
50
+ },
51
+ "params": {
52
+ "id": "68a651ca7e5a5c9b5a075954ed948672c451b0f8c255f4edbd3219fe4947484d",
53
+ "metadata": {},
54
+ "name": "SyncedBlockPermissionDeniedRequestAccessMutation",
55
+ "operationKind": "mutation",
56
+ "text": null
57
+ }
58
+ };
59
+ }();
60
+ node.hash = "d0d4982ad805583380d2436a8e21ee6a";
61
+ export default node;
@@ -1,10 +1,21 @@
1
1
  import React from 'react';
2
- import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
2
+ import { getPageIdAndTypeFromAri, SyncBlockError } from '@atlaskit/editor-synced-block-provider';
3
+ import { SyncedBlockPermissionDenied } from './SyncedBlockPermissionDenied';
3
4
  export var SyncedBlockErrorComponent = function SyncedBlockErrorComponent(_ref) {
4
- var error = _ref.error;
5
+ var error = _ref.error,
6
+ resourceId = _ref.resourceId;
5
7
  switch (error) {
6
8
  case SyncBlockError.Forbidden:
7
- return /*#__PURE__*/React.createElement("div", null, "You don't have permission to view this sync block");
9
+ if (resourceId) {
10
+ var _getPageIdAndTypeFrom = getPageIdAndTypeFromAri(resourceId),
11
+ contentId = _getPageIdAndTypeFrom.id;
12
+ if (contentId) {
13
+ return /*#__PURE__*/React.createElement(SyncedBlockPermissionDenied, {
14
+ contentId: contentId
15
+ });
16
+ }
17
+ }
18
+ return /*#__PURE__*/React.createElement("div", null, "Something went wrong");
8
19
  case SyncBlockError.NotFound:
9
20
  return /*#__PURE__*/React.createElement("div", null, "Sync Block Not Found");
10
21
  case SyncBlockError.Errored:
@@ -30,7 +30,8 @@ export var SyncedBlockNodeComponentRenderer = function SyncedBlockNodeComponentR
30
30
  if (fetchResult !== null && fetchResult !== void 0 && fetchResult.error || !(fetchResult !== null && fetchResult !== void 0 && fetchResult.data)) {
31
31
  var _fetchResult$error;
32
32
  return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
33
- error: (_fetchResult$error = fetchResult === null || fetchResult === void 0 ? void 0 : fetchResult.error) !== null && _fetchResult$error !== void 0 ? _fetchResult$error : SyncBlockError.Errored
33
+ error: (_fetchResult$error = fetchResult === null || fetchResult === void 0 ? void 0 : fetchResult.error) !== null && _fetchResult$error !== void 0 ? _fetchResult$error : SyncBlockError.Errored,
34
+ resourceId: props.resourceId
34
35
  });
35
36
  }
36
37
  var syncBlockDoc = {
@@ -0,0 +1,11 @@
1
+
2
+ ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
3
+ ._zulpu2gc{gap:var(--ds-space-100,8px)}._18u0u2gc{margin-left:var(--ds-space-100,8px)}
4
+ ._19bvxy5q{padding-left:var(--ds-space-400,2pc)}
5
+ ._1bahv2br{justify-content:start}
6
+ ._1e0c1txw{display:flex}
7
+ ._4cvr1h6o{align-items:center}
8
+ ._bfhksyzs{background-color:var(--ds-background-disabled,#091e4208)}
9
+ ._ca0qv47k{padding-top:var(--ds-space-250,20px)}
10
+ ._n3tdv47k{padding-bottom:var(--ds-space-250,20px)}
11
+ ._u5f3v47k{padding-right:var(--ds-space-250,20px)}
@@ -0,0 +1,98 @@
1
+ /* SyncedBlockPermissionDenied.tsx generated by @compiled/babel-plugin v0.38.1 */
2
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
+ import "./SyncedBlockPermissionDenied.compiled.css";
4
+ import { ax, ix } from "@compiled/react/runtime";
5
+ import _SyncedBlockPermissionDeniedRequestAccessMutation from "./__generated__/SyncedBlockPermissionDeniedRequestAccessMutation.graphql";
6
+ import React, { useState } from 'react';
7
+ import { useIntl } from 'react-intl-next';
8
+ import { useMutation, graphql } from 'react-relay';
9
+ import Button from '@atlaskit/button/new';
10
+ import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
11
+ import Heading from '@atlaskit/heading';
12
+ import StatusSuccessIcon from '@atlaskit/icon/core/status-success';
13
+ import Image from '@atlaskit/image';
14
+ import { Box, Text, Stack, Flex } from '@atlaskit/primitives/compiled';
15
+ import PermissionDenied from './assets/PermissionDenied.svg';
16
+ var styles = {
17
+ wrapper: "_2rko12b0 _zulpu2gc _ca0qv47k _n3tdv47k _19bvxy5q _u5f3v47k _bfhksyzs _1e0c1txw _1bahv2br _4cvr1h6o",
18
+ textWrapper: "_18u0u2gc"
19
+ };
20
+ var RequestAccessState = /*#__PURE__*/function (RequestAccessState) {
21
+ RequestAccessState["default"] = "default";
22
+ RequestAccessState["errored"] = "errored";
23
+ RequestAccessState["loading"] = "loading";
24
+ RequestAccessState["pending"] = "pending";
25
+ return RequestAccessState;
26
+ }(RequestAccessState || {});
27
+ export var SyncedBlockPermissionDenied = function SyncedBlockPermissionDenied(_ref) {
28
+ var contentId = _ref.contentId;
29
+ var _useIntl = useIntl(),
30
+ formatMessage = _useIntl.formatMessage;
31
+ var _useState = useState(RequestAccessState.default),
32
+ _useState2 = _slicedToArray(_useState, 2),
33
+ requestAccessState = _useState2[0],
34
+ setRequestAccessState = _useState2[1];
35
+ var handleRequestComplete = function handleRequestComplete() {
36
+ setRequestAccessState(RequestAccessState.pending);
37
+ };
38
+ var handleRequestError = function handleRequestError(error) {
39
+ setRequestAccessState(RequestAccessState.errored);
40
+ };
41
+ var _useMutation = useMutation(_SyncedBlockPermissionDeniedRequestAccessMutation),
42
+ _useMutation2 = _slicedToArray(_useMutation, 1),
43
+ commitMutation = _useMutation2[0];
44
+ var onClick = function onClick() {
45
+ setRequestAccessState(RequestAccessState.loading);
46
+ commitMutation({
47
+ variables: {
48
+ requestPageAccessInput: {
49
+ pageId: contentId,
50
+ accessType: 'VIEW'
51
+ }
52
+ },
53
+ onCompleted: function onCompleted() {
54
+ handleRequestComplete();
55
+ },
56
+ onError: handleRequestError
57
+ });
58
+ };
59
+ return /*#__PURE__*/React.createElement(Box, {
60
+ xcss: styles.wrapper
61
+ }, /*#__PURE__*/React.createElement(Image, {
62
+ src: PermissionDenied,
63
+ alt: formatMessage(messages.permissionDeniedAltText),
64
+ width: "48",
65
+ height: "48"
66
+ }), /*#__PURE__*/React.createElement(Stack, {
67
+ space: "space.100",
68
+ alignInline: "start",
69
+ xcss: styles.textWrapper
70
+ }, /*#__PURE__*/React.createElement(Heading, {
71
+ size: "xsmall"
72
+ }, formatMessage(messages.permissionDeniedHeading)), /*#__PURE__*/React.createElement(Text, {
73
+ color: "color.text.subtle"
74
+ }, formatMessage(messages.permissionDeniedDescription)), requestAccessState === RequestAccessState.pending ? /*#__PURE__*/React.createElement(Flex, {
75
+ columnGap: "space.050",
76
+ alignItems: "center"
77
+ }, /*#__PURE__*/React.createElement(StatusSuccessIcon, {
78
+ size: "small",
79
+ color: "var(--ds-icon-subtle, #626F86)",
80
+ label: ""
81
+ }), /*#__PURE__*/React.createElement(Text, {
82
+ color: "color.text.subtlest",
83
+ weight: "bold",
84
+ testId: "sync-block-access-requested-msg"
85
+ }, formatMessage(messages.accessRequested))) : /*#__PURE__*/React.createElement(Flex, {
86
+ columnGap: "space.100",
87
+ alignItems: "center"
88
+ }, /*#__PURE__*/React.createElement(Button, {
89
+ appearance: "default",
90
+ spacing: "compact",
91
+ onClick: onClick,
92
+ isLoading: requestAccessState === RequestAccessState.loading,
93
+ testId: "sync-block-request-access-btn"
94
+ }, formatMessage(messages.requestAccessButton)), requestAccessState === RequestAccessState.errored && /*#__PURE__*/React.createElement(Text, {
95
+ color: "color.text.warning",
96
+ testId: "sync-block-access-error-msg"
97
+ }, formatMessage(messages.requestAccessError)))));
98
+ };
@@ -14,7 +14,8 @@ export var SyncedBlockRenderer = function SyncedBlockRenderer(_ref) {
14
14
  if (fetchResult.error || !fetchResult.data) {
15
15
  var _fetchResult$error;
16
16
  return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
17
- error: (_fetchResult$error = fetchResult.error) !== null && _fetchResult$error !== void 0 ? _fetchResult$error : SyncBlockError.Errored
17
+ error: (_fetchResult$error = fetchResult.error) !== null && _fetchResult$error !== void 0 ? _fetchResult$error : SyncBlockError.Errored,
18
+ resourceId: fetchResult.resourceId
18
19
  });
19
20
  }
20
21
  var syncBlockDoc = {
@@ -0,0 +1,61 @@
1
+ /**
2
+ * @generated SignedSource<<3bfb9487e57255dc0512f225894a058b>>
3
+ * @relayHash 676631e44ffd7d0d16b3a7e96ba02def
4
+ * @lightSyntaxTransform
5
+ * @nogrep
6
+ * @codegen-command: yarn relay
7
+ */
8
+
9
+ /* tslint:disable */
10
+ /* eslint-disable */
11
+ // @ts-nocheck
12
+
13
+ // @relayRequestID 68a651ca7e5a5c9b5a075954ed948672c451b0f8c255f4edbd3219fe4947484d
14
+
15
+ var node = function () {
16
+ var v0 = [{
17
+ "defaultValue": null,
18
+ "kind": "LocalArgument",
19
+ "name": "requestPageAccessInput"
20
+ }],
21
+ v1 = [{
22
+ "args": [{
23
+ "kind": "Variable",
24
+ "name": "requestPageAccessInput",
25
+ "variableName": "requestPageAccessInput"
26
+ }],
27
+ "concreteType": "RequestPageAccessPayload",
28
+ "kind": "LinkedField",
29
+ "name": "requestPageAccess",
30
+ "plural": false,
31
+ "selections": [{
32
+ "kind": "ScalarField",
33
+ "name": "displayName"
34
+ }]
35
+ }];
36
+ return {
37
+ "fragment": {
38
+ "argumentDefinitions": v0 /*: any*/,
39
+ "kind": "Fragment",
40
+ "name": "SyncedBlockPermissionDeniedRequestAccessMutation",
41
+ "selections": v1 /*: any*/,
42
+ "type": "Mutation"
43
+ },
44
+ "kind": "Request",
45
+ "operation": {
46
+ "argumentDefinitions": v0 /*: any*/,
47
+ "kind": "Operation",
48
+ "name": "SyncedBlockPermissionDeniedRequestAccessMutation",
49
+ "selections": v1 /*: any*/
50
+ },
51
+ "params": {
52
+ "id": "68a651ca7e5a5c9b5a075954ed948672c451b0f8c255f4edbd3219fe4947484d",
53
+ "metadata": {},
54
+ "name": "SyncedBlockPermissionDeniedRequestAccessMutation",
55
+ "operationKind": "mutation",
56
+ "text": null
57
+ }
58
+ };
59
+ }();
60
+ node.hash = "d0d4982ad805583380d2436a8e21ee6a";
61
+ export default node;
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
3
- export declare const SyncedBlockErrorComponent: ({ error }: {
3
+ export declare const SyncedBlockErrorComponent: ({ error, resourceId }: {
4
4
  error: SyncBlockError;
5
+ resourceId?: string;
5
6
  }) => React.JSX.Element;
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ interface SyncedBlockPermissionDeniedProps {
3
+ contentId: string;
4
+ }
5
+ export declare const SyncedBlockPermissionDenied: ({ contentId }: SyncedBlockPermissionDeniedProps) => React.JSX.Element;
6
+ export {};
@@ -0,0 +1,27 @@
1
+ /**
2
+ * @generated SignedSource<<3bfb9487e57255dc0512f225894a058b>>
3
+ * @relayHash 676631e44ffd7d0d16b3a7e96ba02def
4
+ * @lightSyntaxTransform
5
+ * @nogrep
6
+ * @codegen-command: yarn relay
7
+ */
8
+ import type { ConcreteRequest } from 'relay-runtime';
9
+ export type AccessType = "EDIT" | "VIEW" | "%future added value";
10
+ export type RequestPageAccessInput = {
11
+ accessType: AccessType;
12
+ pageId: string;
13
+ };
14
+ export type SyncedBlockPermissionDeniedRequestAccessMutation$variables = {
15
+ requestPageAccessInput: RequestPageAccessInput;
16
+ };
17
+ export type SyncedBlockPermissionDeniedRequestAccessMutation$data = {
18
+ readonly requestPageAccess: {
19
+ readonly displayName: string;
20
+ } | null | undefined;
21
+ };
22
+ export type SyncedBlockPermissionDeniedRequestAccessMutation = {
23
+ response: SyncedBlockPermissionDeniedRequestAccessMutation$data;
24
+ variables: SyncedBlockPermissionDeniedRequestAccessMutation$variables;
25
+ };
26
+ declare const node: ConcreteRequest;
27
+ export default node;
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
3
- export declare const SyncedBlockErrorComponent: ({ error }: {
3
+ export declare const SyncedBlockErrorComponent: ({ error, resourceId }: {
4
4
  error: SyncBlockError;
5
+ resourceId?: string;
5
6
  }) => React.JSX.Element;
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ interface SyncedBlockPermissionDeniedProps {
3
+ contentId: string;
4
+ }
5
+ export declare const SyncedBlockPermissionDenied: ({ contentId }: SyncedBlockPermissionDeniedProps) => React.JSX.Element;
6
+ export {};
@@ -0,0 +1,27 @@
1
+ /**
2
+ * @generated SignedSource<<3bfb9487e57255dc0512f225894a058b>>
3
+ * @relayHash 676631e44ffd7d0d16b3a7e96ba02def
4
+ * @lightSyntaxTransform
5
+ * @nogrep
6
+ * @codegen-command: yarn relay
7
+ */
8
+ import type { ConcreteRequest } from 'relay-runtime';
9
+ export type AccessType = "EDIT" | "VIEW" | "%future added value";
10
+ export type RequestPageAccessInput = {
11
+ accessType: AccessType;
12
+ pageId: string;
13
+ };
14
+ export type SyncedBlockPermissionDeniedRequestAccessMutation$variables = {
15
+ requestPageAccessInput: RequestPageAccessInput;
16
+ };
17
+ export type SyncedBlockPermissionDeniedRequestAccessMutation$data = {
18
+ readonly requestPageAccess: {
19
+ readonly displayName: string;
20
+ } | null | undefined;
21
+ };
22
+ export type SyncedBlockPermissionDeniedRequestAccessMutation = {
23
+ response: SyncedBlockPermissionDeniedRequestAccessMutation$data;
24
+ variables: SyncedBlockPermissionDeniedRequestAccessMutation$variables;
25
+ };
26
+ declare const node: ConcreteRequest;
27
+ export default node;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-synced-block-renderer",
3
- "version": "2.3.0",
3
+ "version": "2.3.1",
4
4
  "description": "SyncedBlockRenderer for @atlaskit/editor-plugin-synced-block",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -28,14 +28,24 @@
28
28
  "sideEffects": false,
29
29
  "atlaskit:src": "src/index.ts",
30
30
  "dependencies": {
31
+ "@atlaskit/button": "^23.5.0",
32
+ "@atlaskit/css": "^0.15.0",
31
33
  "@atlaskit/editor-prosemirror": "7.0.0",
32
34
  "@atlaskit/editor-synced-block-provider": "^2.5.0",
35
+ "@atlaskit/heading": "^5.2.0",
36
+ "@atlaskit/icon": "^28.5.0",
37
+ "@atlaskit/image": "^3.0.0",
38
+ "@atlaskit/primitives": "^16.1.0",
33
39
  "@atlaskit/renderer": "^124.9.0",
34
- "@babel/runtime": "^7.0.0"
40
+ "@atlaskit/tokens": "^7.1.0",
41
+ "@babel/runtime": "^7.0.0",
42
+ "react-relay": "npm:atl-react-relay@0.0.0-main-5980a913",
43
+ "relay-runtime": "npm:atl-relay-compiler@0.0.0-main-5980a913"
35
44
  },
36
45
  "peerDependencies": {
37
46
  "@atlaskit/editor-common": "^110.21.0",
38
- "react": "^18.2.0"
47
+ "react": "^18.2.0",
48
+ "react-intl-next": "npm:react-intl@^5.18.1"
39
49
  },
40
50
  "devDependencies": {
41
51
  "typescript": "5.9.2"