@atlaskit/editor-synced-block-renderer 4.0.2 → 4.0.4

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-synced-block-renderer
 
+## 4.0.4
+
+### Patch Changes
+
+- [`a41bf96788d92`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a41bf96788d92) -
+  [ux] Fix sync block permissions denied error to show the correct state
+- Updated dependencies
+
+## 4.0.3
+
+### Patch Changes
+
+- [`dcc6a3e73f414`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dcc6a3e73f414) -
+  [ux] EDITOR-3304 add offline error state for sync blocks and update other error UI to match new
+  designs
+- Updated dependencies
+
 ## 4.0.2
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -4,7 +4,8 @@
 		"target": "es5",
 		"outDir": "../../../../../confluence/tsDist/@atlaskit__editor-synced-block-renderer",
 		"rootDir": "../",
-		"composite": true
+		"composite": true,
+		"noCheck": true
 	},
 	"include": [
 		"../src/**/*.ts",
@@ -14,8 +15,12 @@
 		"../src/**/__tests__/*",
 		"../src/**/*.test.*",
 		"../src/**/test.*",
-		"../src/**/mocks/*",
-		"../src/**/examples.*"
+		"../src/**/examples.*",
+		"../src/**/examples/*",
+		"../src/**/examples/**/*",
+		"../src/**/*.stories.*",
+		"../src/**/stories/*",
+		"../src/**/stories/**/*"
 	],
 	"references": [
 		{
@@ -36,6 +41,9 @@
 		{
 			"path": "../../../design-system/icon/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/icon-lab/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/image/afm-cc/tsconfig.json"
 		},

package/afm-products/tsconfig.json

@@ -4,7 +4,8 @@
 		"target": "es5",
 		"outDir": "../../../../../tsDist/@atlaskit__editor-synced-block-renderer/app",
 		"rootDir": "../",
-		"composite": true
+		"composite": true,
+		"noCheck": true
 	},
 	"include": [
 		"../src/**/*.ts",
@@ -40,6 +41,9 @@
 		{
 			"path": "../../../design-system/icon/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/icon-lab/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/image/afm-products/tsconfig.json"
 		},

package/dist/cjs/getSyncedBlockRenderer.js

@@ -11,10 +11,12 @@ var _SyncedBlockRenderer = require("./ui/SyncedBlockRenderer");
 var getSyncedBlockRenderer = exports.getSyncedBlockRenderer = function getSyncedBlockRenderer(_ref) {
   var syncBlockRendererOptions = _ref.syncBlockRendererOptions;
   return function (_ref2) {
-    var useFetchSyncBlockData = _ref2.useFetchSyncBlockData;
+    var useFetchSyncBlockData = _ref2.useFetchSyncBlockData,
+      api = _ref2.api;
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockRenderer.SyncedBlockRenderer, {
       syncBlockRendererOptions: syncBlockRendererOptions,
-      useFetchSyncBlockData: useFetchSyncBlockData
+      useFetchSyncBlockData: useFetchSyncBlockData,
+      api: api
     });
   };
 };

package/dist/cjs/ui/SyncedBlockErrorComponent.js

@@ -6,28 +6,46 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SyncedBlockErrorComponent = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _monitoring = require("@atlaskit/editor-common/monitoring");
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
 var _SyncedBlockGenericError = require("./SyncedBlockGenericError");
 var _SyncedBlockLoadError = require("./SyncedBlockLoadError");
+var _SyncedBlockOfflineError = require("./SyncedBlockOfflineError");
 var _SyncedBlockPermissionDenied = require("./SyncedBlockPermissionDenied");
 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); }
+var getForbiddenErrorContent = function getForbiddenErrorContent(resourceId, fireAnalyticsEvent) {
+  try {
+    if (!resourceId) {
+      throw new Error('Missing resource id');
+    }
+    var _getContentIdAndProdu = (0, _editorSyncedBlockProvider.getContentIdAndProductFromResourceId)(resourceId),
+      sourceContentId = _getContentIdAndProdu.sourceContentId,
+      sourceProduct = _getContentIdAndProdu.sourceProduct;
+    return /*#__PURE__*/_react.default.createElement(_SyncedBlockPermissionDenied.SyncedBlockPermissionDenied, {
+      sourceContentId: sourceContentId,
+      sourceProduct: sourceProduct
+    });
+  } catch (error) {
+    (0, _monitoring.logException)(error, {
+      location: 'editor-synced-block-renderer/SyncedBlockErrorComponent'
+    });
+    fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent((0, _editorSyncedBlockProvider.fetchErrorPayload)(error.message));
+    return /*#__PURE__*/_react.default.createElement(_SyncedBlockGenericError.SyncedBlockGenericError, null);
+  }
+};
 var SyncedBlockErrorComponent = exports.SyncedBlockErrorComponent = function SyncedBlockErrorComponent(_ref) {
   var error = _ref.error,
     isLoading = _ref.isLoading,
     onRetry = _ref.onRetry,
-    sourceAri = _ref.sourceAri,
-    sourceProduct = _ref.sourceProduct;
+    resourceId = _ref.resourceId,
+    fireAnalyticsEvent = _ref.fireAnalyticsEvent;
   var getErrorContent = (0, _react.useMemo)(function () {
     switch (error) {
+      case _editorSyncedBlockProvider.SyncBlockError.Offline:
+        return /*#__PURE__*/_react.default.createElement(_SyncedBlockOfflineError.SyncedBlockOfflineError, null);
       case _editorSyncedBlockProvider.SyncBlockError.Forbidden:
-        if (!sourceAri || !sourceProduct) {
-          return /*#__PURE__*/_react.default.createElement(_SyncedBlockGenericError.SyncedBlockGenericError, null);
-        }
-        return /*#__PURE__*/_react.default.createElement(_SyncedBlockPermissionDenied.SyncedBlockPermissionDenied, {
-          sourceAri: sourceAri,
-          sourceProduct: sourceProduct
-        });
+        return getForbiddenErrorContent(resourceId, fireAnalyticsEvent);
       case _editorSyncedBlockProvider.SyncBlockError.NotFound:
       case _editorSyncedBlockProvider.SyncBlockError.Errored:
       case _editorSyncedBlockProvider.SyncBlockError.RateLimited:
@@ -39,7 +57,7 @@ var SyncedBlockErrorComponent = exports.SyncedBlockErrorComponent = function Syn
       default:
         return /*#__PURE__*/_react.default.createElement(_SyncedBlockGenericError.SyncedBlockGenericError, null);
     }
-  }, [error, isLoading, onRetry, sourceAri, sourceProduct]);
+  }, [error, isLoading, onRetry, resourceId, fireAnalyticsEvent]);
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop

package/dist/cjs/ui/SyncedBlockErrorStateCard.compiled.css

@@ -1,11 +1,8 @@
 
-._2rko12b0{border-radius:var(--ds-radius-small,4px)}
-._zulpu2gc{gap:var(--ds-space-100,8px)}._18u0u2gc{margin-left:var(--ds-space-100,8px)}
-._19bvxy5q{padding-left:var(--ds-space-400,2pc)}
+._zulppxbi{gap:var(--ds-space-200,1pc)}._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
 ._1bahv2br{justify-content:start}
 ._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
-._bfhkby5v{background-color:var(--ds-background-disabled,#17171708)}
-._ca0qv47k{padding-top:var(--ds-space-250,20px)}
-._n3tdv47k{padding-bottom:var(--ds-space-250,20px)}
-._u5f3v47k{padding-right:var(--ds-space-250,20px)}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}

package/dist/cjs/ui/SyncedBlockErrorStateCard.js

@@ -9,33 +9,20 @@ exports.SyncedBlockErrorStateCard = void 0;
 require("./SyncedBlockErrorStateCard.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
-var _heading = _interopRequireDefault(require("@atlaskit/heading"));
-var _image = _interopRequireDefault(require("@atlaskit/image"));
+var _warningOutline = _interopRequireDefault(require("@atlaskit/icon-lab/core/warning-outline"));
 var _compiled = require("@atlaskit/primitives/compiled");
 var styles = {
-  wrapper: "_2rko12b0 _zulpu2gc _ca0qv47k _n3tdv47k _19bvxy5q _u5f3v47k _bfhkby5v _1e0c1txw _1bahv2br _4cvr1h6o",
-  textWrapper: "_18u0u2gc"
+  wrapper: "_zulppxbi _ca0qu2gc _n3tdu2gc _19bvpxbi _u5f3pxbi _1e0c1txw _1bahv2br _4cvr1h6o"
 };
 var SyncedBlockErrorStateCard = exports.SyncedBlockErrorStateCard = function SyncedBlockErrorStateCard(_ref) {
   var children = _ref.children,
-    imageAltText = _ref.imageAltText,
-    imageSrc = _ref.imageSrc,
-    primaryMessage = _ref.primaryMessage,
-    secondaryMessage = _ref.secondaryMessage;
+    description = _ref.description;
   return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     xcss: styles.wrapper
-  }, /*#__PURE__*/_react.default.createElement(_image.default, {
-    src: imageSrc,
-    alt: imageAltText,
-    width: "48",
-    height: "48"
-  }), /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
-    space: "space.100",
-    alignInline: "start",
-    xcss: styles.textWrapper
-  }, primaryMessage && /*#__PURE__*/_react.default.createElement(_heading.default, {
-    size: "xsmall"
-  }, primaryMessage), secondaryMessage && /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+  }, /*#__PURE__*/_react.default.createElement(_warningOutline.default, {
+    color: "var(--ds-icon-subtle, #505258)",
+    label: ""
+  }), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
     color: "color.text.subtle"
-  }, secondaryMessage), children));
+  }, description), children);
 };

package/dist/cjs/ui/SyncedBlockGenericError.js

@@ -8,13 +8,11 @@ exports.SyncedBlockGenericError = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
-var _ExclamationWarning = _interopRequireDefault(require("./assets/ExclamationWarning.svg"));
 var _SyncedBlockErrorStateCard = require("./SyncedBlockErrorStateCard");
 var SyncedBlockGenericError = exports.SyncedBlockGenericError = function SyncedBlockGenericError() {
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorStateCard.SyncedBlockErrorStateCard, {
-    imageSrc: _ExclamationWarning.default,
-    secondaryMessage: formatMessage(_messages.syncBlockMessages.generalErrorDescription)
+    description: formatMessage(_messages.syncBlockMessages.generalErrorDescription)
   });
 };

package/dist/cjs/ui/SyncedBlockLoadError.js

@@ -9,7 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _messages = require("@atlaskit/editor-common/messages");
-var _ExclamationWarning = _interopRequireDefault(require("./assets/ExclamationWarning.svg"));
 var _SyncedBlockErrorStateCard = require("./SyncedBlockErrorStateCard");
 var SyncedBlockLoadError = exports.SyncedBlockLoadError = function SyncedBlockLoadError(_ref) {
   var onRetry = _ref.onRetry,
@@ -17,9 +16,7 @@ var SyncedBlockLoadError = exports.SyncedBlockLoadError = function SyncedBlockLo
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorStateCard.SyncedBlockErrorStateCard, {
-    imageSrc: _ExclamationWarning.default,
-    imageAltText: formatMessage(_messages.syncBlockMessages.notFoundAltText),
-    secondaryMessage: formatMessage(_messages.syncBlockMessages.notFoundDescription)
+    description: formatMessage(_messages.syncBlockMessages.generalErrorDescription)
   }, onRetry && /*#__PURE__*/_react.default.createElement(_new.default, {
     appearance: "default",
     spacing: "compact",

package/dist/cjs/ui/SyncedBlockLoadingState.compiled.css

@@ -1,5 +1,3 @@
-._19itia51{border:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
-._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._1bah1h6o{justify-content:center}
 ._1e0c1txw{display:flex}
 ._1tkevbgk{min-height:4pc}

package/dist/cjs/ui/SyncedBlockLoadingState.js

@@ -9,16 +9,23 @@ exports.SyncedBlockLoadingState = void 0;
 require("./SyncedBlockLoadingState.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
+var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var styles = {
-  wrapper: "_19itia51 _2rko12b0 _1tkevbgk _1e0c1txw _1bah1h6o _4cvr1h6o"
+  wrapper: "_1tkevbgk _1e0c1txw _1bah1h6o _4cvr1h6o"
 };
 var SyncedBlockLoadingState = exports.SyncedBlockLoadingState = function SyncedBlockLoadingState() {
-  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    xcss: styles.wrapper
-  }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
-    size: "small",
-    label: "Loading synced content"
-  }));
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/no-unsafe-style-overrides
+    _react.default.createElement("div", {
+      className: _syncBlock.SyncBlockSharedCssClassName.loading
+    }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      xcss: styles.wrapper
+    }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
+      size: "small",
+      label: "Loading synced content"
+    })))
+  );
 };

package/dist/cjs/ui/SyncedBlockNodeComponentRenderer.js

@@ -27,13 +27,13 @@ var SyncedBlockNodeComponentRenderer = exports.SyncedBlockNodeComponentRenderer
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockLoadingState.SyncedBlockLoadingState, null);
   }
   if (!resourceId || syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.error || !(syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.data)) {
-    var _syncBlockInstance$er, _syncBlockInstance$da, _syncBlockInstance$da2;
+    var _syncBlockInstance$er;
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorComponent.SyncedBlockErrorComponent, {
       error: (_syncBlockInstance$er = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : _editorSyncedBlockProvider.SyncBlockError.Errored,
-      sourceAri: syncBlockInstance === null || syncBlockInstance === void 0 || (_syncBlockInstance$da = syncBlockInstance.data) === null || _syncBlockInstance$da === void 0 ? void 0 : _syncBlockInstance$da.sourceAri,
-      sourceProduct: syncBlockInstance === null || syncBlockInstance === void 0 || (_syncBlockInstance$da2 = syncBlockInstance.data) === null || _syncBlockInstance$da2 === void 0 ? void 0 : _syncBlockInstance$da2.product,
+      resourceId: syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.resourceId,
       onRetry: reloadData,
-      isLoading: isLoading
+      isLoading: isLoading,
+      fireAnalyticsEvent: fireAnalyticsEvent
     });
   }
   var syncBlockDoc = {

package/dist/cjs/ui/SyncedBlockOfflineError.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SyncedBlockOfflineError = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _messages = require("@atlaskit/editor-common/messages");
+var _SyncedBlockErrorStateCard = require("./SyncedBlockErrorStateCard");
+var SyncedBlockOfflineError = exports.SyncedBlockOfflineError = function SyncedBlockOfflineError() {
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorStateCard.SyncedBlockErrorStateCard, {
+    description: formatMessage(_messages.syncBlockMessages.offlineError)
+  });
+};

package/dist/cjs/ui/SyncedBlockPermissionDenied.compiled.css

@@ -0,0 +1,8 @@
+
+._zulppxbi{gap:var(--ds-space-200,1pc)}._19bvv47k{padding-left:var(--ds-space-250,20px)}
+._1bahv2br{justify-content:start}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._ca0qv47k{padding-top:var(--ds-space-250,20px)}
+._n3tdv47k{padding-bottom:var(--ds-space-250,20px)}
+._u5f3v47k{padding-right:var(--ds-space-250,20px)}

package/dist/cjs/ui/SyncedBlockPermissionDenied.js

@@ -1,3 +1,4 @@
+/* SyncedBlockPermissionDenied.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SyncedBlockPermissionDenied = void 0;
+require("./SyncedBlockPermissionDenied.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _SyncedBlockPermissionDeniedRequestAccessMutation2 = _interopRequireDefault(require("./__generated__/SyncedBlockPermissionDeniedRequestAccessMutation.graphql"));
 var _react = _interopRequireWildcard(require("react"));
@@ -13,13 +16,16 @@ var _reactIntlNext = require("react-intl-next");
 var _reactRelay = require("react-relay");
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _messages = require("@atlaskit/editor-common/messages");
-var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _statusSuccess = _interopRequireDefault(require("@atlaskit/icon/core/status-success"));
+var _image = _interopRequireDefault(require("@atlaskit/image"));
 var _compiled = require("@atlaskit/primitives/compiled");
 var _PermissionDenied = _interopRequireDefault(require("./assets/PermissionDenied.svg"));
-var _SyncedBlockErrorStateCard = require("./SyncedBlockErrorStateCard");
 var _SyncedBlockGenericError = require("./SyncedBlockGenericError");
 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); }
+var styles = {
+  wrapper: "_zulppxbi _ca0qv47k _n3tdv47k _19bvv47k _u5f3v47k _1e0c1txw _1bahv2br _4cvr1h6o"
+};
 var RequestAccessState = /*#__PURE__*/function (RequestAccessState) {
   RequestAccessState["default"] = "default";
   RequestAccessState["errored"] = "errored";
@@ -28,8 +34,7 @@ var RequestAccessState = /*#__PURE__*/function (RequestAccessState) {
   return RequestAccessState;
 }(RequestAccessState || {});
 var SyncedBlockPermissionDeniedConfluencePage = function SyncedBlockPermissionDeniedConfluencePage(_ref) {
-  var sourceAri = _ref.sourceAri;
-  var contentId = (0, _editorSyncedBlockProvider.getPageIdAndTypeFromConfluencePageAri)(sourceAri).id;
+  var sourceContentId = _ref.sourceContentId;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var _useState = (0, _react.useState)(RequestAccessState.default),
@@ -50,7 +55,7 @@ var SyncedBlockPermissionDeniedConfluencePage = function SyncedBlockPermissionDe
     commitMutation({
       variables: {
         requestPageAccessInput: {
-          pageId: contentId,
+          pageId: sourceContentId,
           accessType: 'VIEW'
         }
       },
@@ -60,12 +65,20 @@ var SyncedBlockPermissionDeniedConfluencePage = function SyncedBlockPermissionDe
       onError: handleRequestError
     });
   };
-  return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorStateCard.SyncedBlockErrorStateCard, {
-    imageSrc: _PermissionDenied.default,
-    imageAltText: formatMessage(_messages.syncBlockMessages.permissionDeniedAltText),
-    primaryMessage: formatMessage(_messages.syncBlockMessages.permissionDeniedHeading),
-    secondaryMessage: formatMessage(_messages.syncBlockMessages.permissionDeniedDescription)
-  }, requestAccessState === RequestAccessState.pending ? /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.wrapper
+  }, /*#__PURE__*/_react.default.createElement(_image.default, {
+    src: _PermissionDenied.default,
+    alt: formatMessage(_messages.syncBlockMessages.permissionDeniedAltText),
+    width: "48",
+    height: "48"
+  }), /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
+    space: "space.100"
+  }, /*#__PURE__*/_react.default.createElement(_heading.default, {
+    size: "xsmall"
+  }, formatMessage(_messages.syncBlockMessages.permissionDeniedHeading)), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    color: "color.text.subtle"
+  }, formatMessage(_messages.syncBlockMessages.permissionDeniedDescription)), requestAccessState === RequestAccessState.pending ? /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
     columnGap: "space.050",
     alignItems: "center"
   }, /*#__PURE__*/_react.default.createElement(_statusSuccess.default, {
@@ -88,15 +101,15 @@ var SyncedBlockPermissionDeniedConfluencePage = function SyncedBlockPermissionDe
   }, formatMessage(_messages.syncBlockMessages.requestAccessButton)), requestAccessState === RequestAccessState.errored && /*#__PURE__*/_react.default.createElement(_compiled.Text, {
     color: "color.text.warning",
     testId: "sync-block-access-error-msg"
-  }, formatMessage(_messages.syncBlockMessages.requestAccessError))));
+  }, formatMessage(_messages.syncBlockMessages.requestAccessError)))));
 };
 var SyncedBlockPermissionDenied = exports.SyncedBlockPermissionDenied = function SyncedBlockPermissionDenied(_ref2) {
-  var sourceAri = _ref2.sourceAri,
+  var sourceContentId = _ref2.sourceContentId,
     sourceProduct = _ref2.sourceProduct;
   switch (sourceProduct) {
     case 'confluence-page':
       return /*#__PURE__*/_react.default.createElement(SyncedBlockPermissionDeniedConfluencePage, {
-        sourceAri: sourceAri
+        sourceContentId: sourceContentId
       });
     default:
       return /*#__PURE__*/_react.default.createElement(_SyncedBlockGenericError.SyncedBlockGenericError, null);

package/dist/cjs/ui/SyncedBlockRenderer.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SyncedBlockRenderer = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
 var _AKRendererWrapper = require("./AKRendererWrapper");
 var _SyncedBlockErrorComponent = require("./SyncedBlockErrorComponent");
@@ -13,23 +14,36 @@ var _SyncedBlockLoadingState = require("./SyncedBlockLoadingState");
 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); }
 var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref) {
   var useFetchSyncBlockData = _ref.useFetchSyncBlockData,
-    syncBlockRendererOptions = _ref.syncBlockRendererOptions;
+    syncBlockRendererOptions = _ref.syncBlockRendererOptions,
+    api = _ref.api;
   var _useFetchSyncBlockDat = useFetchSyncBlockData(),
     syncBlockInstance = _useFetchSyncBlockDat.syncBlockInstance,
     providerFactory = _useFetchSyncBlockDat.providerFactory,
     isLoading = _useFetchSyncBlockDat.isLoading,
     reloadData = _useFetchSyncBlockDat.reloadData;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['connectivity'], function (_ref2) {
+      var connectivityState = _ref2.connectivityState;
+      return {
+        isOffline: (connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode) === 'offline'
+      };
+    }),
+    isOffline = _useSharedPluginState.isOffline;
+  if (isOffline) {
+    return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorComponent.SyncedBlockErrorComponent, {
+      error: _editorSyncedBlockProvider.SyncBlockError.Offline
+    });
+  }
   if (!syncBlockInstance) {
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockLoadingState.SyncedBlockLoadingState, null);
   }
   if (syncBlockInstance.error || !syncBlockInstance.data) {
-    var _syncBlockInstance$er, _syncBlockInstance$da, _syncBlockInstance$da2;
+    var _syncBlockInstance$er, _api$analytics;
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorComponent.SyncedBlockErrorComponent, {
       error: (_syncBlockInstance$er = syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : _editorSyncedBlockProvider.SyncBlockError.Errored,
-      sourceAri: (_syncBlockInstance$da = syncBlockInstance.data) === null || _syncBlockInstance$da === void 0 ? void 0 : _syncBlockInstance$da.sourceAri,
-      sourceProduct: (_syncBlockInstance$da2 = syncBlockInstance.data) === null || _syncBlockInstance$da2 === void 0 ? void 0 : _syncBlockInstance$da2.product,
+      resourceId: syncBlockInstance.resourceId,
       onRetry: reloadData,
-      isLoading: isLoading
+      isLoading: isLoading,
+      fireAnalyticsEvent: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.fireAnalyticsEvent
     });
   }
   var syncBlockDoc = {

package/dist/es2019/getSyncedBlockRenderer.js

@@ -4,10 +4,12 @@ import { SyncedBlockRenderer } from './ui/SyncedBlockRenderer';
 export const getSyncedBlockRenderer = ({
   syncBlockRendererOptions
 }) => ({
-  useFetchSyncBlockData
+  useFetchSyncBlockData,
+  api
 }) => {
   return /*#__PURE__*/React.createElement(SyncedBlockRenderer, {
     syncBlockRendererOptions: syncBlockRendererOptions,
-    useFetchSyncBlockData: useFetchSyncBlockData
+    useFetchSyncBlockData: useFetchSyncBlockData,
+    api: api
   });
 };

package/dist/es2019/ui/SyncedBlockErrorComponent.js

@@ -1,26 +1,45 @@
 import React, { useMemo } from 'react';
+import { logException } from '@atlaskit/editor-common/monitoring';
 import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
-import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
+import { fetchErrorPayload, getContentIdAndProductFromResourceId, SyncBlockError } from '@atlaskit/editor-synced-block-provider';
 import { SyncedBlockGenericError } from './SyncedBlockGenericError';
 import { SyncedBlockLoadError } from './SyncedBlockLoadError';
+import { SyncedBlockOfflineError } from './SyncedBlockOfflineError';
 import { SyncedBlockPermissionDenied } from './SyncedBlockPermissionDenied';
+const getForbiddenErrorContent = (resourceId, fireAnalyticsEvent) => {
+  try {
+    if (!resourceId) {
+      throw new Error('Missing resource id');
+    }
+    const {
+      sourceContentId,
+      sourceProduct
+    } = getContentIdAndProductFromResourceId(resourceId);
+    return /*#__PURE__*/React.createElement(SyncedBlockPermissionDenied, {
+      sourceContentId: sourceContentId,
+      sourceProduct: sourceProduct
+    });
+  } catch (error) {
+    logException(error, {
+      location: 'editor-synced-block-renderer/SyncedBlockErrorComponent'
+    });
+    fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 ? void 0 : fireAnalyticsEvent(fetchErrorPayload(error.message));
+    return /*#__PURE__*/React.createElement(SyncedBlockGenericError, null);
+  }
+};
 export const SyncedBlockErrorComponent = ({
   error,
   isLoading,
   onRetry,
-  sourceAri,
-  sourceProduct
+  resourceId,
+  fireAnalyticsEvent
 }) => {
   const getErrorContent = useMemo(() => {
     switch (error) {
+      case SyncBlockError.Offline:
+        return /*#__PURE__*/React.createElement(SyncedBlockOfflineError, null);
       case SyncBlockError.Forbidden:
-        if (!sourceAri || !sourceProduct) {
-          return /*#__PURE__*/React.createElement(SyncedBlockGenericError, null);
-        }
-        return /*#__PURE__*/React.createElement(SyncedBlockPermissionDenied, {
-          sourceAri: sourceAri,
-          sourceProduct: sourceProduct
-        });
+        return getForbiddenErrorContent(resourceId, fireAnalyticsEvent);
       case SyncBlockError.NotFound:
       case SyncBlockError.Errored:
       case SyncBlockError.RateLimited:
@@ -32,7 +51,7 @@ export const SyncedBlockErrorComponent = ({
       default:
         return /*#__PURE__*/React.createElement(SyncedBlockGenericError, null);
     }
-  }, [error, isLoading, onRetry, sourceAri, sourceProduct]);
+  }, [error, isLoading, onRetry, resourceId, fireAnalyticsEvent]);
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop

package/dist/es2019/ui/SyncedBlockErrorStateCard.compiled.css

@@ -1,11 +1,8 @@
 
-._2rko12b0{border-radius:var(--ds-radius-small,4px)}
-._zulpu2gc{gap:var(--ds-space-100,8px)}._18u0u2gc{margin-left:var(--ds-space-100,8px)}
-._19bvxy5q{padding-left:var(--ds-space-400,2pc)}
+._zulppxbi{gap:var(--ds-space-200,1pc)}._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
 ._1bahv2br{justify-content:start}
 ._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
-._bfhkby5v{background-color:var(--ds-background-disabled,#17171708)}
-._ca0qv47k{padding-top:var(--ds-space-250,20px)}
-._n3tdv47k{padding-bottom:var(--ds-space-250,20px)}
-._u5f3v47k{padding-right:var(--ds-space-250,20px)}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}

package/dist/es2019/ui/SyncedBlockErrorStateCard.js

@@ -2,34 +2,21 @@
 import "./SyncedBlockErrorStateCard.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import Heading from '@atlaskit/heading';
-import Image from '@atlaskit/image';
-import { Box, Stack, Text } from '@atlaskit/primitives/compiled';
+import WarningOutlineIcon from '@atlaskit/icon-lab/core/warning-outline';
+import { Box, Text } from '@atlaskit/primitives/compiled';
 const styles = {
-  wrapper: "_2rko12b0 _zulpu2gc _ca0qv47k _n3tdv47k _19bvxy5q _u5f3v47k _bfhkby5v _1e0c1txw _1bahv2br _4cvr1h6o",
-  textWrapper: "_18u0u2gc"
+  wrapper: "_zulppxbi _ca0qu2gc _n3tdu2gc _19bvpxbi _u5f3pxbi _1e0c1txw _1bahv2br _4cvr1h6o"
 };
 export const SyncedBlockErrorStateCard = ({
   children,
-  imageAltText,
-  imageSrc,
-  primaryMessage,
-  secondaryMessage
+  description
 }) => {
   return /*#__PURE__*/React.createElement(Box, {
     xcss: styles.wrapper
-  }, /*#__PURE__*/React.createElement(Image, {
-    src: imageSrc,
-    alt: imageAltText,
-    width: "48",
-    height: "48"
-  }), /*#__PURE__*/React.createElement(Stack, {
-    space: "space.100",
-    alignInline: "start",
-    xcss: styles.textWrapper
-  }, primaryMessage && /*#__PURE__*/React.createElement(Heading, {
-    size: "xsmall"
-  }, primaryMessage), secondaryMessage && /*#__PURE__*/React.createElement(Text, {
+  }, /*#__PURE__*/React.createElement(WarningOutlineIcon, {
+    color: "var(--ds-icon-subtle, #505258)",
+    label: ""
+  }), /*#__PURE__*/React.createElement(Text, {
     color: "color.text.subtle"
-  }, secondaryMessage), children));
+  }, description), children);
 };