@atlaskit/editor-synced-block-renderer 5.6.0 → 5.6.2

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-synced-block-renderer
 
+## 5.6.2
+
+### Patch Changes
+
+- [`74c826b26352b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/74c826b26352b) -
+  [ux] EDITOR-4765 In SSR, if server returned error, we should render loading state instead of error
+  state
+- [`a372f642e42a5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a372f642e42a5) -
+  [ux] EDITOR-4716 Fix content shifting when tooltip is shown for tasks in Synced Block
+- Updated dependencies
+
+## 5.6.1
+
+### Patch Changes
+
+- [`28434cbe03f1e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/28434cbe03f1e) -
+  [ux] [EDITOR-2851]
+  - Implement unsync feature for source sync block
+  - Update deletion confirmation modal and reference block UI after source deletion
+
+- Updated dependencies
+
 ## 5.6.0
 
 ### Minor Changes

package/dist/cjs/ui/AKRendererWrapper.js

@@ -40,15 +40,9 @@ var DisabledTaskWithTooltip = function DisabledTaskWithTooltip(_ref2) {
   return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     content: tooltipContent,
     position: "auto-start"
-  }, function (tooltipProps) {
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      _react.default.createElement("div", tooltipProps, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, props, {
-        disableOnChange: true
-      })))
-    );
-  });
+  }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, props, {
+    disableOnChange: true
+  })));
 };
 var defaultOptions = {
   appearance: 'full-width',

package/dist/cjs/ui/SyncedBlockErrorComponent.js

@@ -42,13 +42,15 @@ var SyncedBlockErrorComponent = exports.SyncedBlockErrorComponent = function Syn
     resourceId = _ref.resourceId,
     fireAnalyticsEvent = _ref.fireAnalyticsEvent;
   var getErrorContent = (0, _react.useMemo)(function () {
-    switch (error) {
+    switch (error === null || error === void 0 ? void 0 : error.type) {
       case _editorSyncedBlockProvider.SyncBlockError.Offline:
         return /*#__PURE__*/_react.default.createElement(_SyncedBlockOfflineError.SyncedBlockOfflineError, null);
       case _editorSyncedBlockProvider.SyncBlockError.Forbidden:
         return getForbiddenErrorContent(resourceId, fireAnalyticsEvent);
       case _editorSyncedBlockProvider.SyncBlockError.NotFound:
-        return /*#__PURE__*/_react.default.createElement(_SyncedBlockNotFoundError.SyncedBlockNotFoundError, null);
+        return /*#__PURE__*/_react.default.createElement(_SyncedBlockNotFoundError.SyncedBlockNotFoundError, {
+          reason: error.reason
+        });
       case _editorSyncedBlockProvider.SyncBlockError.Errored:
       case _editorSyncedBlockProvider.SyncBlockError.RateLimited:
       case _editorSyncedBlockProvider.SyncBlockError.ServerError:

package/dist/cjs/ui/SyncedBlockErrorStateCard.js

@@ -10,16 +10,19 @@ require("./SyncedBlockErrorStateCard.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
 var _warningOutline = _interopRequireDefault(require("@atlaskit/icon-lab/core/warning-outline"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var styles = {
   wrapper: "_zulppxbi _ca0qu2gc _n3tdu2gc _19bvpxbi _u5f3pxbi _1e0c1txw _1bahv2br _4cvr1h6o"
 };
 var SyncedBlockErrorStateCard = exports.SyncedBlockErrorStateCard = function SyncedBlockErrorStateCard(_ref) {
   var children = _ref.children,
-    description = _ref.description;
+    description = _ref.description,
+    icon = _ref.icon;
+  var Icon = (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? icon !== null && icon !== void 0 ? icon : _warningOutline.default : _warningOutline.default;
   return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     xcss: styles.wrapper
-  }, /*#__PURE__*/_react.default.createElement(_warningOutline.default, {
+  }, /*#__PURE__*/_react.default.createElement(Icon, {
     color: "var(--ds-icon-subtle, #505258)",
     label: ""
   }), /*#__PURE__*/_react.default.createElement(_compiled.Text, {

package/dist/cjs/ui/SyncedBlockNodeComponentRenderer.js

@@ -53,10 +53,20 @@ var SyncedBlockNodeComponentRenderer = exports.SyncedBlockNodeComponentRenderer
   if (isLoading && !syncBlockInstance) {
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockLoadingState.SyncedBlockLoadingState, null);
   }
+
+  // In SSR, if server returned error, we should render loading state instead of error state
+  // since  FE will do another fetch and render the error state or proper data then
+  if ((0, _coreUtils.isSSR)() && syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.error && (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding')) {
+    return /*#__PURE__*/_react.default.createElement(_SyncedBlockLoadingState.SyncedBlockLoadingState, null);
+  }
   if (!resourceId || syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.error || !(syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.data) || syncBlockInstance.data.status === 'deleted' && (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding')) {
     var _syncBlockInstance$er, _syncBlockInstance$da;
     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 : (syncBlockInstance === null || syncBlockInstance === void 0 || (_syncBlockInstance$da = syncBlockInstance.data) === null || _syncBlockInstance$da === void 0 ? void 0 : _syncBlockInstance$da.status) === 'deleted' && (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? _editorSyncedBlockProvider.SyncBlockError.NotFound : _editorSyncedBlockProvider.SyncBlockError.Errored,
+      error: (_syncBlockInstance$er = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : (syncBlockInstance === null || syncBlockInstance === void 0 || (_syncBlockInstance$da = syncBlockInstance.data) === null || _syncBlockInstance$da === void 0 ? void 0 : _syncBlockInstance$da.status) === 'deleted' && (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? {
+        type: _editorSyncedBlockProvider.SyncBlockError.NotFound
+      } : {
+        type: _editorSyncedBlockProvider.SyncBlockError.Errored
+      },
       resourceId: syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.resourceId,
       onRetry: reloadData,
       isLoading: isLoading,

package/dist/cjs/ui/SyncedBlockNotFoundError.js

@@ -8,11 +8,36 @@ exports.SyncedBlockNotFoundError = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
+var _linkBroken = _interopRequireDefault(require("@atlaskit/icon/core/link-broken"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _SyncedBlockErrorStateCard = require("./SyncedBlockErrorStateCard");
-var SyncedBlockNotFoundError = exports.SyncedBlockNotFoundError = function SyncedBlockNotFoundError() {
+var errorMap = {
+  'source-block-unsynced': {
+    description: _messages.syncBlockMessages.sourceUnsyncedDescription,
+    icon: _linkBroken.default
+  },
+  'source-block-deleted': {
+    description: _messages.syncBlockMessages.sourceDeletedDescription,
+    icon: _linkBroken.default
+  }
+};
+var SyncedBlockNotFoundError = exports.SyncedBlockNotFoundError = function SyncedBlockNotFoundError(_ref) {
+  var _ref$reason = _ref.reason,
+    reason = _ref$reason === void 0 ? 'source-block-deleted' : _ref$reason;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
+  var errorInfo = {
+    description: _messages.syncBlockMessages.notFoundDescription
+  };
+  if ((0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding')) {
+    var _errorMap$reason;
+    errorInfo = (_errorMap$reason = errorMap[reason]) !== null && _errorMap$reason !== void 0 ? _errorMap$reason : {};
+  }
+  var _errorInfo = errorInfo,
+    description = _errorInfo.description,
+    icon = _errorInfo.icon;
   return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorStateCard.SyncedBlockErrorStateCard, {
-    description: formatMessage(_messages.syncBlockMessages.notFoundDescription)
+    description: formatMessage(description),
+    icon: icon
   });
 };

package/dist/cjs/ui/SyncedBlockRenderer.js

@@ -56,16 +56,28 @@ var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref) {
   // In SSR, we should always attempt to render content
   if (isCollabOffline && !(0, _coreUtils.isSSR)()) {
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorComponent.SyncedBlockErrorComponent, {
-      error: _editorSyncedBlockProvider.SyncBlockError.Offline
+      error: {
+        type: _editorSyncedBlockProvider.SyncBlockError.Offline
+      }
     });
   }
   if (!syncBlockInstance) {
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockLoadingState.SyncedBlockLoadingState, null);
   }
+
+  // In SSR, if server returned error, we should render loading state instead of error state
+  // since  FE will do another fetch and render the error state or proper data then
+  if ((0, _coreUtils.isSSR)() && syncBlockInstance.error && (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding')) {
+    return /*#__PURE__*/_react.default.createElement(_SyncedBlockLoadingState.SyncedBlockLoadingState, null);
+  }
   if (syncBlockInstance.error || !syncBlockInstance.data || syncBlockInstance.data.status === 'deleted' && (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding')) {
     var _syncBlockInstance$er, _syncBlockInstance$da, _api$analytics;
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorComponent.SyncedBlockErrorComponent, {
-      error: (_syncBlockInstance$er = syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : (syncBlockInstance === null || syncBlockInstance === void 0 || (_syncBlockInstance$da = syncBlockInstance.data) === null || _syncBlockInstance$da === void 0 ? void 0 : _syncBlockInstance$da.status) === 'deleted' && (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? _editorSyncedBlockProvider.SyncBlockError.NotFound : _editorSyncedBlockProvider.SyncBlockError.Errored,
+      error: (_syncBlockInstance$er = syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : (syncBlockInstance === null || syncBlockInstance === void 0 || (_syncBlockInstance$da = syncBlockInstance.data) === null || _syncBlockInstance$da === void 0 ? void 0 : _syncBlockInstance$da.status) === 'deleted' && (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? {
+        type: _editorSyncedBlockProvider.SyncBlockError.NotFound
+      } : {
+        type: _editorSyncedBlockProvider.SyncBlockError.Errored
+      },
       resourceId: syncBlockInstance.resourceId,
       onRetry: reloadData,
       isLoading: isLoading,

package/dist/es2019/ui/AKRendererWrapper.js

@@ -27,12 +27,9 @@ const DisabledTaskWithTooltip = ({
   return /*#__PURE__*/React.createElement(Tooltip, {
     content: tooltipContent,
     position: "auto-start"
-  }, tooltipProps =>
-  /*#__PURE__*/
-  // eslint-disable-next-line react/jsx-props-no-spreading
-  React.createElement("div", tooltipProps, /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+  }, /*#__PURE__*/React.createElement(Component, _extends({}, props, {
     disableOnChange: true
-  }))));
+  })));
 };
 const defaultOptions = {
   appearance: 'full-width',

package/dist/es2019/ui/SyncedBlockErrorComponent.js

@@ -36,13 +36,15 @@ export const SyncedBlockErrorComponent = ({
   fireAnalyticsEvent
 }) => {
   const getErrorContent = useMemo(() => {
-    switch (error) {
+    switch (error === null || error === void 0 ? void 0 : error.type) {
       case SyncBlockError.Offline:
         return /*#__PURE__*/React.createElement(SyncedBlockOfflineError, null);
       case SyncBlockError.Forbidden:
         return getForbiddenErrorContent(resourceId, fireAnalyticsEvent);
       case SyncBlockError.NotFound:
-        return /*#__PURE__*/React.createElement(SyncedBlockNotFoundError, null);
+        return /*#__PURE__*/React.createElement(SyncedBlockNotFoundError, {
+          reason: error.reason
+        });
       case SyncBlockError.Errored:
       case SyncBlockError.RateLimited:
       case SyncBlockError.ServerError:

package/dist/es2019/ui/SyncedBlockErrorStateCard.js

@@ -3,17 +3,20 @@ import "./SyncedBlockErrorStateCard.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import WarningOutlineIcon from '@atlaskit/icon-lab/core/warning-outline';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Text } from '@atlaskit/primitives/compiled';
 const styles = {
   wrapper: "_zulppxbi _ca0qu2gc _n3tdu2gc _19bvpxbi _u5f3pxbi _1e0c1txw _1bahv2br _4cvr1h6o"
 };
 export const SyncedBlockErrorStateCard = ({
   children,
-  description
+  description,
+  icon
 }) => {
+  const Icon = fg('platform_synced_block_dogfooding') ? icon !== null && icon !== void 0 ? icon : WarningOutlineIcon : WarningOutlineIcon;
   return /*#__PURE__*/React.createElement(Box, {
     xcss: styles.wrapper
-  }, /*#__PURE__*/React.createElement(WarningOutlineIcon, {
+  }, /*#__PURE__*/React.createElement(Icon, {
     color: "var(--ds-icon-subtle, #505258)",
     label: ""
   }), /*#__PURE__*/React.createElement(Text, {

package/dist/es2019/ui/SyncedBlockNodeComponentRenderer.js

@@ -46,10 +46,20 @@ export const SyncedBlockNodeComponentRenderer = ({
   if (isLoading && !syncBlockInstance) {
     return /*#__PURE__*/React.createElement(SyncedBlockLoadingState, null);
   }
+
+  // In SSR, if server returned error, we should render loading state instead of error state
+  // since  FE will do another fetch and render the error state or proper data then
+  if (isSSR() && syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.error && fg('platform_synced_block_dogfooding')) {
+    return /*#__PURE__*/React.createElement(SyncedBlockLoadingState, null);
+  }
   if (!resourceId || syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.error || !(syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.data) || syncBlockInstance.data.status === 'deleted' && fg('platform_synced_block_dogfooding')) {
     var _syncBlockInstance$er, _syncBlockInstance$da;
     return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
-      error: (_syncBlockInstance$er = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : (syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : (_syncBlockInstance$da = syncBlockInstance.data) === null || _syncBlockInstance$da === void 0 ? void 0 : _syncBlockInstance$da.status) === 'deleted' && fg('platform_synced_block_dogfooding') ? SyncBlockError.NotFound : SyncBlockError.Errored,
+      error: (_syncBlockInstance$er = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : (syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : (_syncBlockInstance$da = syncBlockInstance.data) === null || _syncBlockInstance$da === void 0 ? void 0 : _syncBlockInstance$da.status) === 'deleted' && fg('platform_synced_block_dogfooding') ? {
+        type: SyncBlockError.NotFound
+      } : {
+        type: SyncBlockError.Errored
+      },
       resourceId: syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.resourceId,
       onRetry: reloadData,
       isLoading: isLoading,

package/dist/es2019/ui/SyncedBlockNotFoundError.js

@@ -1,12 +1,38 @@
 import React from 'react';
 import { useIntl } from 'react-intl-next';
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import LinkBrokenIcon from '@atlaskit/icon/core/link-broken';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SyncedBlockErrorStateCard } from './SyncedBlockErrorStateCard';
-export const SyncedBlockNotFoundError = () => {
+const errorMap = {
+  'source-block-unsynced': {
+    description: messages.sourceUnsyncedDescription,
+    icon: LinkBrokenIcon
+  },
+  'source-block-deleted': {
+    description: messages.sourceDeletedDescription,
+    icon: LinkBrokenIcon
+  }
+};
+export const SyncedBlockNotFoundError = ({
+  reason = 'source-block-deleted'
+}) => {
   const {
     formatMessage
   } = useIntl();
+  let errorInfo = {
+    description: messages.notFoundDescription
+  };
+  if (fg('platform_synced_block_dogfooding')) {
+    var _errorMap$reason;
+    errorInfo = (_errorMap$reason = errorMap[reason]) !== null && _errorMap$reason !== void 0 ? _errorMap$reason : {};
+  }
+  const {
+    description,
+    icon
+  } = errorInfo;
   return /*#__PURE__*/React.createElement(SyncedBlockErrorStateCard, {
-    description: formatMessage(messages.notFoundDescription)
+    description: formatMessage(description),
+    icon: icon
   });
 };

package/dist/es2019/ui/SyncedBlockRenderer.js

@@ -49,16 +49,28 @@ const SyncedBlockRendererComponent = ({
   // In SSR, we should always attempt to render content
   if (isCollabOffline && !isSSR()) {
     return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
-      error: SyncBlockError.Offline
+      error: {
+        type: SyncBlockError.Offline
+      }
     });
   }
   if (!syncBlockInstance) {
     return /*#__PURE__*/React.createElement(SyncedBlockLoadingState, null);
   }
+
+  // In SSR, if server returned error, we should render loading state instead of error state
+  // since  FE will do another fetch and render the error state or proper data then
+  if (isSSR() && syncBlockInstance.error && fg('platform_synced_block_dogfooding')) {
+    return /*#__PURE__*/React.createElement(SyncedBlockLoadingState, null);
+  }
   if (syncBlockInstance.error || !syncBlockInstance.data || syncBlockInstance.data.status === 'deleted' && fg('platform_synced_block_dogfooding')) {
     var _syncBlockInstance$er, _syncBlockInstance$da, _api$analytics;
     return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
-      error: (_syncBlockInstance$er = syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : (syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : (_syncBlockInstance$da = syncBlockInstance.data) === null || _syncBlockInstance$da === void 0 ? void 0 : _syncBlockInstance$da.status) === 'deleted' && fg('platform_synced_block_dogfooding') ? SyncBlockError.NotFound : SyncBlockError.Errored,
+      error: (_syncBlockInstance$er = syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : (syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : (_syncBlockInstance$da = syncBlockInstance.data) === null || _syncBlockInstance$da === void 0 ? void 0 : _syncBlockInstance$da.status) === 'deleted' && fg('platform_synced_block_dogfooding') ? {
+        type: SyncBlockError.NotFound
+      } : {
+        type: SyncBlockError.Errored
+      },
       resourceId: syncBlockInstance.resourceId,
       onRetry: reloadData,
       isLoading: isLoading,

package/dist/esm/ui/AKRendererWrapper.js

@@ -31,15 +31,9 @@ var DisabledTaskWithTooltip = function DisabledTaskWithTooltip(_ref2) {
   return /*#__PURE__*/React.createElement(Tooltip, {
     content: tooltipContent,
     position: "auto-start"
-  }, function (tooltipProps) {
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      React.createElement("div", tooltipProps, /*#__PURE__*/React.createElement(Component, _extends({}, props, {
-        disableOnChange: true
-      })))
-    );
-  });
+  }, /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+    disableOnChange: true
+  })));
 };
 var defaultOptions = {
   appearance: 'full-width',

package/dist/esm/ui/SyncedBlockErrorComponent.js

@@ -34,13 +34,15 @@ export var SyncedBlockErrorComponent = function SyncedBlockErrorComponent(_ref)
     resourceId = _ref.resourceId,
     fireAnalyticsEvent = _ref.fireAnalyticsEvent;
   var getErrorContent = useMemo(function () {
-    switch (error) {
+    switch (error === null || error === void 0 ? void 0 : error.type) {
       case SyncBlockError.Offline:
         return /*#__PURE__*/React.createElement(SyncedBlockOfflineError, null);
       case SyncBlockError.Forbidden:
         return getForbiddenErrorContent(resourceId, fireAnalyticsEvent);
       case SyncBlockError.NotFound:
-        return /*#__PURE__*/React.createElement(SyncedBlockNotFoundError, null);
+        return /*#__PURE__*/React.createElement(SyncedBlockNotFoundError, {
+          reason: error.reason
+        });
       case SyncBlockError.Errored:
       case SyncBlockError.RateLimited:
       case SyncBlockError.ServerError:

package/dist/esm/ui/SyncedBlockErrorStateCard.js

@@ -3,16 +3,19 @@ import "./SyncedBlockErrorStateCard.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import WarningOutlineIcon from '@atlaskit/icon-lab/core/warning-outline';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Text } from '@atlaskit/primitives/compiled';
 var styles = {
   wrapper: "_zulppxbi _ca0qu2gc _n3tdu2gc _19bvpxbi _u5f3pxbi _1e0c1txw _1bahv2br _4cvr1h6o"
 };
 export var SyncedBlockErrorStateCard = function SyncedBlockErrorStateCard(_ref) {
   var children = _ref.children,
-    description = _ref.description;
+    description = _ref.description,
+    icon = _ref.icon;
+  var Icon = fg('platform_synced_block_dogfooding') ? icon !== null && icon !== void 0 ? icon : WarningOutlineIcon : WarningOutlineIcon;
   return /*#__PURE__*/React.createElement(Box, {
     xcss: styles.wrapper
-  }, /*#__PURE__*/React.createElement(WarningOutlineIcon, {
+  }, /*#__PURE__*/React.createElement(Icon, {
     color: "var(--ds-icon-subtle, #505258)",
     label: ""
   }), /*#__PURE__*/React.createElement(Text, {

package/dist/esm/ui/SyncedBlockNodeComponentRenderer.js

@@ -44,10 +44,20 @@ export var SyncedBlockNodeComponentRenderer = function SyncedBlockNodeComponentR
   if (isLoading && !syncBlockInstance) {
     return /*#__PURE__*/React.createElement(SyncedBlockLoadingState, null);
   }
+
+  // In SSR, if server returned error, we should render loading state instead of error state
+  // since  FE will do another fetch and render the error state or proper data then
+  if (isSSR() && syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.error && fg('platform_synced_block_dogfooding')) {
+    return /*#__PURE__*/React.createElement(SyncedBlockLoadingState, null);
+  }
   if (!resourceId || syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.error || !(syncBlockInstance !== null && syncBlockInstance !== void 0 && syncBlockInstance.data) || syncBlockInstance.data.status === 'deleted' && fg('platform_synced_block_dogfooding')) {
     var _syncBlockInstance$er, _syncBlockInstance$da;
     return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
-      error: (_syncBlockInstance$er = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : (syncBlockInstance === null || syncBlockInstance === void 0 || (_syncBlockInstance$da = syncBlockInstance.data) === null || _syncBlockInstance$da === void 0 ? void 0 : _syncBlockInstance$da.status) === 'deleted' && fg('platform_synced_block_dogfooding') ? SyncBlockError.NotFound : SyncBlockError.Errored,
+      error: (_syncBlockInstance$er = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : (syncBlockInstance === null || syncBlockInstance === void 0 || (_syncBlockInstance$da = syncBlockInstance.data) === null || _syncBlockInstance$da === void 0 ? void 0 : _syncBlockInstance$da.status) === 'deleted' && fg('platform_synced_block_dogfooding') ? {
+        type: SyncBlockError.NotFound
+      } : {
+        type: SyncBlockError.Errored
+      },
       resourceId: syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.resourceId,
       onRetry: reloadData,
       isLoading: isLoading,

package/dist/esm/ui/SyncedBlockNotFoundError.js

@@ -1,11 +1,36 @@
 import React from 'react';
 import { useIntl } from 'react-intl-next';
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import LinkBrokenIcon from '@atlaskit/icon/core/link-broken';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SyncedBlockErrorStateCard } from './SyncedBlockErrorStateCard';
-export var SyncedBlockNotFoundError = function SyncedBlockNotFoundError() {
+var errorMap = {
+  'source-block-unsynced': {
+    description: messages.sourceUnsyncedDescription,
+    icon: LinkBrokenIcon
+  },
+  'source-block-deleted': {
+    description: messages.sourceDeletedDescription,
+    icon: LinkBrokenIcon
+  }
+};
+export var SyncedBlockNotFoundError = function SyncedBlockNotFoundError(_ref) {
+  var _ref$reason = _ref.reason,
+    reason = _ref$reason === void 0 ? 'source-block-deleted' : _ref$reason;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
+  var errorInfo = {
+    description: messages.notFoundDescription
+  };
+  if (fg('platform_synced_block_dogfooding')) {
+    var _errorMap$reason;
+    errorInfo = (_errorMap$reason = errorMap[reason]) !== null && _errorMap$reason !== void 0 ? _errorMap$reason : {};
+  }
+  var _errorInfo = errorInfo,
+    description = _errorInfo.description,
+    icon = _errorInfo.icon;
   return /*#__PURE__*/React.createElement(SyncedBlockErrorStateCard, {
-    description: formatMessage(messages.notFoundDescription)
+    description: formatMessage(description),
+    icon: icon
   });
 };

package/dist/esm/ui/SyncedBlockRenderer.js

@@ -47,16 +47,28 @@ var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref) {
   // In SSR, we should always attempt to render content
   if (isCollabOffline && !isSSR()) {
     return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
-      error: SyncBlockError.Offline
+      error: {
+        type: SyncBlockError.Offline
+      }
     });
   }
   if (!syncBlockInstance) {
     return /*#__PURE__*/React.createElement(SyncedBlockLoadingState, null);
   }
+
+  // In SSR, if server returned error, we should render loading state instead of error state
+  // since  FE will do another fetch and render the error state or proper data then
+  if (isSSR() && syncBlockInstance.error && fg('platform_synced_block_dogfooding')) {
+    return /*#__PURE__*/React.createElement(SyncedBlockLoadingState, null);
+  }
   if (syncBlockInstance.error || !syncBlockInstance.data || syncBlockInstance.data.status === 'deleted' && fg('platform_synced_block_dogfooding')) {
     var _syncBlockInstance$er, _syncBlockInstance$da, _api$analytics;
     return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
-      error: (_syncBlockInstance$er = syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : (syncBlockInstance === null || syncBlockInstance === void 0 || (_syncBlockInstance$da = syncBlockInstance.data) === null || _syncBlockInstance$da === void 0 ? void 0 : _syncBlockInstance$da.status) === 'deleted' && fg('platform_synced_block_dogfooding') ? SyncBlockError.NotFound : SyncBlockError.Errored,
+      error: (_syncBlockInstance$er = syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : (syncBlockInstance === null || syncBlockInstance === void 0 || (_syncBlockInstance$da = syncBlockInstance.data) === null || _syncBlockInstance$da === void 0 ? void 0 : _syncBlockInstance$da.status) === 'deleted' && fg('platform_synced_block_dogfooding') ? {
+        type: SyncBlockError.NotFound
+      } : {
+        type: SyncBlockError.Errored
+      },
       resourceId: syncBlockInstance.resourceId,
       onRetry: reloadData,
       isLoading: isLoading,

package/dist/types/ui/SyncedBlockErrorComponent.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { RendererSyncBlockEventPayload } from '@atlaskit/editor-common/analytics';
-import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
+import { type SyncBlockInstance } from '@atlaskit/editor-synced-block-provider';
 export declare const SyncedBlockErrorComponent: ({ error, isLoading, onRetry, resourceId, fireAnalyticsEvent, }: {
-    error: SyncBlockError;
+    error: SyncBlockInstance["error"];
     fireAnalyticsEvent?: (payload: RendererSyncBlockEventPayload) => void;
     isLoading?: boolean;
     onRetry?: () => void;

package/dist/types/ui/SyncedBlockErrorStateCard.d.ts

@@ -1,7 +1,10 @@
-import React from 'react';
+import React, { type ReactNode } from 'react';
+import type { NewCoreIconProps } from '@atlaskit/icon/types';
 interface SyncedBlockErrorStateCardProps {
-    children?: React.ReactNode;
-    description: string;
+    children?: ReactNode;
+    closeButton?: ReactNode;
+    description: ReactNode;
+    icon?: (props: NewCoreIconProps) => JSX.Element;
 }
-export declare const SyncedBlockErrorStateCard: ({ children, description, }: SyncedBlockErrorStateCardProps) => React.JSX.Element;
+export declare const SyncedBlockErrorStateCard: ({ children, description, icon, }: SyncedBlockErrorStateCardProps) => React.JSX.Element;
 export {};

package/dist/types/ui/SyncedBlockNotFoundError.d.ts

@@ -1,2 +1,4 @@
 import React from 'react';
-export declare const SyncedBlockNotFoundError: () => React.JSX.Element;
+export declare const SyncedBlockNotFoundError: ({ reason, }: {
+    reason?: string;
+}) => React.JSX.Element;

package/dist/types-ts4.5/ui/SyncedBlockErrorComponent.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { RendererSyncBlockEventPayload } from '@atlaskit/editor-common/analytics';
-import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
+import { type SyncBlockInstance } from '@atlaskit/editor-synced-block-provider';
 export declare const SyncedBlockErrorComponent: ({ error, isLoading, onRetry, resourceId, fireAnalyticsEvent, }: {
-    error: SyncBlockError;
+    error: SyncBlockInstance["error"];
     fireAnalyticsEvent?: (payload: RendererSyncBlockEventPayload) => void;
     isLoading?: boolean;
     onRetry?: () => void;

package/dist/types-ts4.5/ui/SyncedBlockErrorStateCard.d.ts

@@ -1,7 +1,10 @@
-import React from 'react';
+import React, { type ReactNode } from 'react';
+import type { NewCoreIconProps } from '@atlaskit/icon/types';
 interface SyncedBlockErrorStateCardProps {
-    children?: React.ReactNode;
-    description: string;
+    children?: ReactNode;
+    closeButton?: ReactNode;
+    description: ReactNode;
+    icon?: (props: NewCoreIconProps) => JSX.Element;
 }
-export declare const SyncedBlockErrorStateCard: ({ children, description, }: SyncedBlockErrorStateCardProps) => React.JSX.Element;
+export declare const SyncedBlockErrorStateCard: ({ children, description, icon, }: SyncedBlockErrorStateCardProps) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/SyncedBlockNotFoundError.d.ts

@@ -1,2 +1,4 @@
 import React from 'react';
-export declare const SyncedBlockNotFoundError: () => React.JSX.Element;
+export declare const SyncedBlockNotFoundError: ({ reason, }: {
+    reason?: string;
+}) => React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-synced-block-renderer",
-	"version": "5.6.0",
+	"version": "5.6.2",
 	"description": "SyncedBlockRenderer for @atlaskit/editor-plugin-synced-block",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,11 +34,11 @@
 		"@atlaskit/editor-synced-block-provider": "^3.14.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/icon": "^30.0.0",
-		"@atlaskit/icon-lab": "^5.14.0",
+		"@atlaskit/icon-lab": "^5.15.0",
 		"@atlaskit/image": "^3.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^17.1.0",
-		"@atlaskit/renderer": "^126.1.0",
+		"@atlaskit/renderer": "^126.2.0",
 		"@atlaskit/spinner": "^19.0.0",
 		"@atlaskit/tokens": "^10.1.0",
 		"@atlaskit/tooltip": "^20.14.0",
@@ -47,7 +47,7 @@
 		"relay-runtime": "npm:atl-relay-runtime@0.0.0-main-39e79f66"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^111.8.0",
+		"@atlaskit/editor-common": "^111.9.0",
 		"react": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},