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

package/dist/es2019/ui/SyncedBlockGenericError.js

@@ -1,14 +1,12 @@
 import React from 'react';
 import { useIntl } from 'react-intl-next';
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
-import ExclamationWarning from './assets/ExclamationWarning.svg';
 import { SyncedBlockErrorStateCard } from './SyncedBlockErrorStateCard';
 export const SyncedBlockGenericError = () => {
   const {
     formatMessage
   } = useIntl();
   return /*#__PURE__*/React.createElement(SyncedBlockErrorStateCard, {
-    imageSrc: ExclamationWarning,
-    secondaryMessage: formatMessage(messages.generalErrorDescription)
+    description: formatMessage(messages.generalErrorDescription)
   });
 };

package/dist/es2019/ui/SyncedBlockLoadError.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/new';
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
-import ExclamationWarning from './assets/ExclamationWarning.svg';
 import { SyncedBlockErrorStateCard } from './SyncedBlockErrorStateCard';
 export const SyncedBlockLoadError = ({
   onRetry,
@@ -12,9 +11,7 @@ export const SyncedBlockLoadError = ({
     formatMessage
   } = useIntl();
   return /*#__PURE__*/React.createElement(SyncedBlockErrorStateCard, {
-    imageSrc: ExclamationWarning,
-    imageAltText: formatMessage(messages.notFoundAltText),
-    secondaryMessage: formatMessage(messages.notFoundDescription)
+    description: formatMessage(messages.generalErrorDescription)
   }, onRetry && /*#__PURE__*/React.createElement(Button, {
     appearance: "default",
     spacing: "compact",

package/dist/es2019/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/es2019/ui/SyncedBlockLoadingState.js

@@ -2,16 +2,23 @@
 import "./SyncedBlockLoadingState.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
+import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 import { Box } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner';
 const styles = {
-  wrapper: "_19itia51 _2rko12b0 _1tkevbgk _1e0c1txw _1bah1h6o _4cvr1h6o"
+  wrapper: "_1tkevbgk _1e0c1txw _1bah1h6o _4cvr1h6o"
 };
 export const SyncedBlockLoadingState = () => {
-  return /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.wrapper
-  }, /*#__PURE__*/React.createElement(Spinner, {
-    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.createElement("div", {
+      className: SyncBlockSharedCssClassName.loading
+    }, /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.wrapper
+    }, /*#__PURE__*/React.createElement(Spinner, {
+      size: "small",
+      label: "Loading synced content"
+    })))
+  );
 };

package/dist/es2019/ui/SyncedBlockNodeComponentRenderer.js

@@ -24,13 +24,13 @@ export const SyncedBlockNodeComponentRenderer = ({
     return /*#__PURE__*/React.createElement(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.createElement(SyncedBlockErrorComponent, {
       error: (_syncBlockInstance$er = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : SyncBlockError.Errored,
-      sourceAri: syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : (_syncBlockInstance$da = syncBlockInstance.data) === null || _syncBlockInstance$da === void 0 ? void 0 : _syncBlockInstance$da.sourceAri,
-      sourceProduct: syncBlockInstance === null || syncBlockInstance === void 0 ? 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
     });
   }
   const syncBlockDoc = {

package/dist/es2019/ui/SyncedBlockOfflineError.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { SyncedBlockErrorStateCard } from './SyncedBlockErrorStateCard';
+export const SyncedBlockOfflineError = () => {
+  const {
+    formatMessage
+  } = useIntl();
+  return /*#__PURE__*/React.createElement(SyncedBlockErrorStateCard, {
+    description: formatMessage(messages.offlineError)
+  });
+};

package/dist/es2019/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/es2019/ui/SyncedBlockPermissionDenied.js

@@ -1,15 +1,21 @@
+/* SyncedBlockPermissionDenied.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./SyncedBlockPermissionDenied.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import _SyncedBlockPermissionDeniedRequestAccessMutation from "./__generated__/SyncedBlockPermissionDeniedRequestAccessMutation.graphql";
 import React, { useState } from 'react';
 import { useIntl } from 'react-intl-next';
 import { useMutation, graphql } from 'react-relay';
 import Button from '@atlaskit/button/new';
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
-import { getPageIdAndTypeFromConfluencePageAri } from '@atlaskit/editor-synced-block-provider';
+import Heading from '@atlaskit/heading';
 import StatusSuccessIcon from '@atlaskit/icon/core/status-success';
-import { Text, Flex } from '@atlaskit/primitives/compiled';
+import Image from '@atlaskit/image';
+import { Text, Flex, Stack, Box } from '@atlaskit/primitives/compiled';
 import PermissionDenied from './assets/PermissionDenied.svg';
-import { SyncedBlockErrorStateCard } from './SyncedBlockErrorStateCard';
 import { SyncedBlockGenericError } from './SyncedBlockGenericError';
+const styles = {
+  wrapper: "_zulppxbi _ca0qv47k _n3tdv47k _19bvv47k _u5f3v47k _1e0c1txw _1bahv2br _4cvr1h6o"
+};
 var RequestAccessState = /*#__PURE__*/function (RequestAccessState) {
   RequestAccessState["default"] = "default";
   RequestAccessState["errored"] = "errored";
@@ -18,9 +24,8 @@ var RequestAccessState = /*#__PURE__*/function (RequestAccessState) {
   return RequestAccessState;
 }(RequestAccessState || {});
 const SyncedBlockPermissionDeniedConfluencePage = ({
-  sourceAri
+  sourceContentId
 }) => {
-  const contentId = getPageIdAndTypeFromConfluencePageAri(sourceAri).id;
   const {
     formatMessage
   } = useIntl();
@@ -37,7 +42,7 @@ const SyncedBlockPermissionDeniedConfluencePage = ({
     commitMutation({
       variables: {
         requestPageAccessInput: {
-          pageId: contentId,
+          pageId: sourceContentId,
           accessType: 'VIEW'
         }
       },
@@ -47,12 +52,20 @@ const SyncedBlockPermissionDeniedConfluencePage = ({
       onError: handleRequestError
     });
   };
-  return /*#__PURE__*/React.createElement(SyncedBlockErrorStateCard, {
-    imageSrc: PermissionDenied,
-    imageAltText: formatMessage(messages.permissionDeniedAltText),
-    primaryMessage: formatMessage(messages.permissionDeniedHeading),
-    secondaryMessage: formatMessage(messages.permissionDeniedDescription)
-  }, requestAccessState === RequestAccessState.pending ? /*#__PURE__*/React.createElement(Flex, {
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.wrapper
+  }, /*#__PURE__*/React.createElement(Image, {
+    src: PermissionDenied,
+    alt: formatMessage(messages.permissionDeniedAltText),
+    width: "48",
+    height: "48"
+  }), /*#__PURE__*/React.createElement(Stack, {
+    space: "space.100"
+  }, /*#__PURE__*/React.createElement(Heading, {
+    size: "xsmall"
+  }, formatMessage(messages.permissionDeniedHeading)), /*#__PURE__*/React.createElement(Text, {
+    color: "color.text.subtle"
+  }, formatMessage(messages.permissionDeniedDescription)), requestAccessState === RequestAccessState.pending ? /*#__PURE__*/React.createElement(Flex, {
     columnGap: "space.050",
     alignItems: "center"
   }, /*#__PURE__*/React.createElement(StatusSuccessIcon, {
@@ -75,16 +88,16 @@ const SyncedBlockPermissionDeniedConfluencePage = ({
   }, formatMessage(messages.requestAccessButton)), requestAccessState === RequestAccessState.errored && /*#__PURE__*/React.createElement(Text, {
     color: "color.text.warning",
     testId: "sync-block-access-error-msg"
-  }, formatMessage(messages.requestAccessError))));
+  }, formatMessage(messages.requestAccessError)))));
 };
 export const SyncedBlockPermissionDenied = ({
-  sourceAri,
+  sourceContentId,
   sourceProduct
 }) => {
   switch (sourceProduct) {
     case 'confluence-page':
       return /*#__PURE__*/React.createElement(SyncedBlockPermissionDeniedConfluencePage, {
-        sourceAri: sourceAri
+        sourceContentId: sourceContentId
       });
     default:
       return /*#__PURE__*/React.createElement(SyncedBlockGenericError, null);

package/dist/es2019/ui/SyncedBlockRenderer.js

@@ -1,11 +1,13 @@
 import React, { memo } from 'react';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
 import { AKRendererWrapper } from './AKRendererWrapper';
 import { SyncedBlockErrorComponent } from './SyncedBlockErrorComponent';
 import { SyncedBlockLoadingState } from './SyncedBlockLoadingState';
 const SyncedBlockRendererComponent = ({
   useFetchSyncBlockData,
-  syncBlockRendererOptions
+  syncBlockRendererOptions,
+  api
 }) => {
   const {
     syncBlockInstance,
@@ -13,17 +15,29 @@ const SyncedBlockRendererComponent = ({
     isLoading,
     reloadData
   } = useFetchSyncBlockData();
+  const {
+    isOffline
+  } = useSharedPluginStateWithSelector(api, ['connectivity'], ({
+    connectivityState
+  }) => ({
+    isOffline: (connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode) === 'offline'
+  }));
+  if (isOffline) {
+    return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
+      error: SyncBlockError.Offline
+    });
+  }
   if (!syncBlockInstance) {
     return /*#__PURE__*/React.createElement(SyncedBlockLoadingState, null);
   }
   if (syncBlockInstance.error || !syncBlockInstance.data) {
-    var _syncBlockInstance$er, _syncBlockInstance$da, _syncBlockInstance$da2;
+    var _syncBlockInstance$er, _api$analytics;
     return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
       error: (_syncBlockInstance$er = syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : 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 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.fireAnalyticsEvent
     });
   }
   const syncBlockDoc = {

package/dist/esm/getSyncedBlockRenderer.js

@@ -4,10 +4,12 @@ import { SyncedBlockRenderer } from './ui/SyncedBlockRenderer';
 export var 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.createElement(SyncedBlockRenderer, {
       syncBlockRendererOptions: syncBlockRendererOptions,
-      useFetchSyncBlockData: useFetchSyncBlockData
+      useFetchSyncBlockData: useFetchSyncBlockData,
+      api: api
     });
   };
 };

package/dist/esm/ui/SyncedBlockErrorComponent.js

@@ -1,25 +1,43 @@
 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';
+var getForbiddenErrorContent = function getForbiddenErrorContent(resourceId, fireAnalyticsEvent) {
+  try {
+    if (!resourceId) {
+      throw new Error('Missing resource id');
+    }
+    var _getContentIdAndProdu = getContentIdAndProductFromResourceId(resourceId),
+      sourceContentId = _getContentIdAndProdu.sourceContentId,
+      sourceProduct = _getContentIdAndProdu.sourceProduct;
+    return /*#__PURE__*/React.createElement(SyncedBlockPermissionDenied, {
+      sourceContentId: sourceContentId,
+      sourceProduct: sourceProduct
+    });
+  } catch (error) {
+    logException(error, {
+      location: 'editor-synced-block-renderer/SyncedBlockErrorComponent'
+    });
+    fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 || fireAnalyticsEvent(fetchErrorPayload(error.message));
+    return /*#__PURE__*/React.createElement(SyncedBlockGenericError, null);
+  }
+};
 export var 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 = useMemo(function () {
     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:
@@ -31,7 +49,7 @@ export var SyncedBlockErrorComponent = function SyncedBlockErrorComponent(_ref)
       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/esm/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/esm/ui/SyncedBlockErrorStateCard.js

@@ -2,33 +2,20 @@
 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';
 var styles = {
-  wrapper: "_2rko12b0 _zulpu2gc _ca0qv47k _n3tdv47k _19bvxy5q _u5f3v47k _bfhkby5v _1e0c1txw _1bahv2br _4cvr1h6o",
-  textWrapper: "_18u0u2gc"
+  wrapper: "_zulppxbi _ca0qu2gc _n3tdu2gc _19bvpxbi _u5f3pxbi _1e0c1txw _1bahv2br _4cvr1h6o"
 };
 export var 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.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);
 };

package/dist/esm/ui/SyncedBlockGenericError.js

@@ -1,13 +1,11 @@
 import React from 'react';
 import { useIntl } from 'react-intl-next';
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
-import ExclamationWarning from './assets/ExclamationWarning.svg';
 import { SyncedBlockErrorStateCard } from './SyncedBlockErrorStateCard';
 export var SyncedBlockGenericError = function SyncedBlockGenericError() {
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   return /*#__PURE__*/React.createElement(SyncedBlockErrorStateCard, {
-    imageSrc: ExclamationWarning,
-    secondaryMessage: formatMessage(messages.generalErrorDescription)
+    description: formatMessage(messages.generalErrorDescription)
   });
 };

package/dist/esm/ui/SyncedBlockLoadError.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/new';
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
-import ExclamationWarning from './assets/ExclamationWarning.svg';
 import { SyncedBlockErrorStateCard } from './SyncedBlockErrorStateCard';
 export var SyncedBlockLoadError = function SyncedBlockLoadError(_ref) {
   var onRetry = _ref.onRetry,
@@ -10,9 +9,7 @@ export var SyncedBlockLoadError = function SyncedBlockLoadError(_ref) {
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   return /*#__PURE__*/React.createElement(SyncedBlockErrorStateCard, {
-    imageSrc: ExclamationWarning,
-    imageAltText: formatMessage(messages.notFoundAltText),
-    secondaryMessage: formatMessage(messages.notFoundDescription)
+    description: formatMessage(messages.generalErrorDescription)
   }, onRetry && /*#__PURE__*/React.createElement(Button, {
     appearance: "default",
     spacing: "compact",

package/dist/esm/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/esm/ui/SyncedBlockLoadingState.js

@@ -2,16 +2,23 @@
 import "./SyncedBlockLoadingState.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
+import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 import { Box } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner';
 var styles = {
-  wrapper: "_19itia51 _2rko12b0 _1tkevbgk _1e0c1txw _1bah1h6o _4cvr1h6o"
+  wrapper: "_1tkevbgk _1e0c1txw _1bah1h6o _4cvr1h6o"
 };
 export var SyncedBlockLoadingState = function SyncedBlockLoadingState() {
-  return /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.wrapper
-  }, /*#__PURE__*/React.createElement(Spinner, {
-    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.createElement("div", {
+      className: SyncBlockSharedCssClassName.loading
+    }, /*#__PURE__*/React.createElement(Box, {
+      xcss: styles.wrapper
+    }, /*#__PURE__*/React.createElement(Spinner, {
+      size: "small",
+      label: "Loading synced content"
+    })))
+  );
 };

package/dist/esm/ui/SyncedBlockNodeComponentRenderer.js

@@ -20,13 +20,13 @@ export var SyncedBlockNodeComponentRenderer = function SyncedBlockNodeComponentR
     return /*#__PURE__*/React.createElement(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.createElement(SyncedBlockErrorComponent, {
       error: (_syncBlockInstance$er = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : 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/esm/ui/SyncedBlockOfflineError.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { SyncedBlockErrorStateCard } from './SyncedBlockErrorStateCard';
+export var SyncedBlockOfflineError = function SyncedBlockOfflineError() {
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/React.createElement(SyncedBlockErrorStateCard, {
+    description: formatMessage(messages.offlineError)
+  });
+};

package/dist/esm/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/esm/ui/SyncedBlockPermissionDenied.js

@@ -1,16 +1,22 @@
+/* SyncedBlockPermissionDenied.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./SyncedBlockPermissionDenied.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import _SyncedBlockPermissionDeniedRequestAccessMutation from "./__generated__/SyncedBlockPermissionDeniedRequestAccessMutation.graphql";
 import React, { useState } from 'react';
 import { useIntl } from 'react-intl-next';
 import { useMutation, graphql } from 'react-relay';
 import Button from '@atlaskit/button/new';
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
-import { getPageIdAndTypeFromConfluencePageAri } from '@atlaskit/editor-synced-block-provider';
+import Heading from '@atlaskit/heading';
 import StatusSuccessIcon from '@atlaskit/icon/core/status-success';
-import { Text, Flex } from '@atlaskit/primitives/compiled';
+import Image from '@atlaskit/image';
+import { Text, Flex, Stack, Box } from '@atlaskit/primitives/compiled';
 import PermissionDenied from './assets/PermissionDenied.svg';
-import { SyncedBlockErrorStateCard } from './SyncedBlockErrorStateCard';
 import { SyncedBlockGenericError } from './SyncedBlockGenericError';
+var styles = {
+  wrapper: "_zulppxbi _ca0qv47k _n3tdv47k _19bvv47k _u5f3v47k _1e0c1txw _1bahv2br _4cvr1h6o"
+};
 var RequestAccessState = /*#__PURE__*/function (RequestAccessState) {
   RequestAccessState["default"] = "default";
   RequestAccessState["errored"] = "errored";
@@ -19,8 +25,7 @@ var RequestAccessState = /*#__PURE__*/function (RequestAccessState) {
   return RequestAccessState;
 }(RequestAccessState || {});
 var SyncedBlockPermissionDeniedConfluencePage = function SyncedBlockPermissionDeniedConfluencePage(_ref) {
-  var sourceAri = _ref.sourceAri;
-  var contentId = getPageIdAndTypeFromConfluencePageAri(sourceAri).id;
+  var sourceContentId = _ref.sourceContentId;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var _useState = useState(RequestAccessState.default),
@@ -41,7 +46,7 @@ var SyncedBlockPermissionDeniedConfluencePage = function SyncedBlockPermissionDe
     commitMutation({
       variables: {
         requestPageAccessInput: {
-          pageId: contentId,
+          pageId: sourceContentId,
           accessType: 'VIEW'
         }
       },
@@ -51,12 +56,20 @@ var SyncedBlockPermissionDeniedConfluencePage = function SyncedBlockPermissionDe
       onError: handleRequestError
     });
   };
-  return /*#__PURE__*/React.createElement(SyncedBlockErrorStateCard, {
-    imageSrc: PermissionDenied,
-    imageAltText: formatMessage(messages.permissionDeniedAltText),
-    primaryMessage: formatMessage(messages.permissionDeniedHeading),
-    secondaryMessage: formatMessage(messages.permissionDeniedDescription)
-  }, requestAccessState === RequestAccessState.pending ? /*#__PURE__*/React.createElement(Flex, {
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.wrapper
+  }, /*#__PURE__*/React.createElement(Image, {
+    src: PermissionDenied,
+    alt: formatMessage(messages.permissionDeniedAltText),
+    width: "48",
+    height: "48"
+  }), /*#__PURE__*/React.createElement(Stack, {
+    space: "space.100"
+  }, /*#__PURE__*/React.createElement(Heading, {
+    size: "xsmall"
+  }, formatMessage(messages.permissionDeniedHeading)), /*#__PURE__*/React.createElement(Text, {
+    color: "color.text.subtle"
+  }, formatMessage(messages.permissionDeniedDescription)), requestAccessState === RequestAccessState.pending ? /*#__PURE__*/React.createElement(Flex, {
     columnGap: "space.050",
     alignItems: "center"
   }, /*#__PURE__*/React.createElement(StatusSuccessIcon, {
@@ -79,15 +92,15 @@ var SyncedBlockPermissionDeniedConfluencePage = function SyncedBlockPermissionDe
   }, formatMessage(messages.requestAccessButton)), requestAccessState === RequestAccessState.errored && /*#__PURE__*/React.createElement(Text, {
     color: "color.text.warning",
     testId: "sync-block-access-error-msg"
-  }, formatMessage(messages.requestAccessError))));
+  }, formatMessage(messages.requestAccessError)))));
 };
 export var SyncedBlockPermissionDenied = function SyncedBlockPermissionDenied(_ref2) {
-  var sourceAri = _ref2.sourceAri,
+  var sourceContentId = _ref2.sourceContentId,
     sourceProduct = _ref2.sourceProduct;
   switch (sourceProduct) {
     case 'confluence-page':
       return /*#__PURE__*/React.createElement(SyncedBlockPermissionDeniedConfluencePage, {
-        sourceAri: sourceAri
+        sourceContentId: sourceContentId
       });
     default:
       return /*#__PURE__*/React.createElement(SyncedBlockGenericError, null);