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

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-synced-block-renderer
 
+## 5.6.4
+
+### Patch Changes
+
+- [`faddbf566c913`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/faddbf566c913) -
+  [ux] Add error message in reference sync block when source is unpublished
+- Updated dependencies
+
+## 5.6.3
+
+### Patch Changes
+
+- [`f11ff647ea458`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f11ff647ea458) -
+  [ux] [EDITOR-4521] Implement source deleted reference UI, update block deleted/unsynced reference
+  UI to add delete button, unsynced label and source title/url
+- Updated dependencies
+
 ## 5.6.2
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -50,6 +50,9 @@
 		{
 			"path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/primitives/afm-cc/tsconfig.json"
 		},

package/afm-jira/tsconfig.json

@@ -50,6 +50,9 @@
 		{
 			"path": "../../../platform/feature-flags/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/primitives/afm-jira/tsconfig.json"
 		},

package/afm-products/tsconfig.json

@@ -50,6 +50,9 @@
 		{
 			"path": "../../../platform/feature-flags/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/primitives/afm-products/tsconfig.json"
 		},

package/dist/cjs/ui/SyncedBlockErrorComponent.js

@@ -14,6 +14,7 @@ var _SyncedBlockLoadError = require("./SyncedBlockLoadError");
 var _SyncedBlockNotFoundError = require("./SyncedBlockNotFoundError");
 var _SyncedBlockOfflineError = require("./SyncedBlockOfflineError");
 var _SyncedBlockPermissionDenied = require("./SyncedBlockPermissionDenied");
+var _SyncedBlockUnpublishedError = require("./SyncedBlockUnpublishedError");
 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 {
@@ -40,7 +41,8 @@ var SyncedBlockErrorComponent = exports.SyncedBlockErrorComponent = function Syn
     isLoading = _ref.isLoading,
     onRetry = _ref.onRetry,
     resourceId = _ref.resourceId,
-    fireAnalyticsEvent = _ref.fireAnalyticsEvent;
+    fireAnalyticsEvent = _ref.fireAnalyticsEvent,
+    sourceURL = _ref.sourceURL;
   var getErrorContent = (0, _react.useMemo)(function () {
     switch (error === null || error === void 0 ? void 0 : error.type) {
       case _editorSyncedBlockProvider.SyncBlockError.Offline:
@@ -49,7 +51,12 @@ var SyncedBlockErrorComponent = exports.SyncedBlockErrorComponent = function Syn
         return getForbiddenErrorContent(resourceId, fireAnalyticsEvent);
       case _editorSyncedBlockProvider.SyncBlockError.NotFound:
         return /*#__PURE__*/_react.default.createElement(_SyncedBlockNotFoundError.SyncedBlockNotFoundError, {
-          reason: error.reason
+          reason: error.reason,
+          sourceAri: error.sourceAri
+        });
+      case _editorSyncedBlockProvider.SyncBlockError.Unpublished:
+        return /*#__PURE__*/_react.default.createElement(_SyncedBlockUnpublishedError.SyncedBlockUnpublishedError, {
+          sourceURL: sourceURL
         });
       case _editorSyncedBlockProvider.SyncBlockError.Errored:
       case _editorSyncedBlockProvider.SyncBlockError.RateLimited:
@@ -61,7 +68,7 @@ var SyncedBlockErrorComponent = exports.SyncedBlockErrorComponent = function Syn
       default:
         return /*#__PURE__*/_react.default.createElement(_SyncedBlockGenericError.SyncedBlockGenericError, null);
     }
-  }, [error, isLoading, onRetry, resourceId, fireAnalyticsEvent]);
+  }, [error, isLoading, onRetry, resourceId, fireAnalyticsEvent, sourceURL]);
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop

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

@@ -1,8 +1,6 @@
 
-._zulppxbi{gap:var(--ds-space-200,1pc)}._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
-._1bahv2br{justify-content:start}
+._zulppxbi{gap:var(--ds-space-200,1pc)}
+._1rjc12x7{padding-block:var(--ds-space-075,6px)}._1bahv2br{justify-content:start}
 ._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
-._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
-._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
-._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
+._bozgpxbi{padding-inline-start:var(--ds-space-200,1pc)}

package/dist/cjs/ui/SyncedBlockErrorStateCard.js

@@ -13,7 +13,8 @@ var _warningOutline = _interopRequireDefault(require("@atlaskit/icon-lab/core/wa
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var styles = {
-  wrapper: "_zulppxbi _ca0qu2gc _n3tdu2gc _19bvpxbi _u5f3pxbi _1e0c1txw _1bahv2br _4cvr1h6o"
+  wrapper: "_zulppxbi _1rjc12x7 _bozgpxbi _1e0c1txw _1bahv2br _4cvr1h6o",
+  container: "_1e0c1txw"
 };
 var SyncedBlockErrorStateCard = exports.SyncedBlockErrorStateCard = function SyncedBlockErrorStateCard(_ref) {
   var children = _ref.children,
@@ -21,11 +22,13 @@ var SyncedBlockErrorStateCard = exports.SyncedBlockErrorStateCard = function Syn
     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.container
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     xcss: styles.wrapper
   }, /*#__PURE__*/_react.default.createElement(Icon, {
     color: "var(--ds-icon-subtle, #505258)",
     label: ""
   }), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
     color: "color.text.subtle"
-  }, description), children);
+  }, description), !(0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') && children), (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') && children);
 };

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

@@ -0,0 +1,3 @@
+._18u0u2gc{margin-left:var(--ds-space-100,8px)}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}

package/dist/cjs/ui/SyncedBlockLoadError.js

@@ -1,3 +1,4 @@
+/* SyncedBlockLoadError.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,27 +6,37 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SyncedBlockLoadError = void 0;
+require("./SyncedBlockLoadError.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 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 _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _SyncedBlockErrorStateCard = require("./SyncedBlockErrorStateCard");
+var styles = {
+  buttonContainer: "_18u0u2gc _1e0c1txw _4cvr1h6o"
+};
 var SyncedBlockLoadError = exports.SyncedBlockLoadError = function SyncedBlockLoadError(_ref) {
   var onRetry = _ref.onRetry,
     isLoading = _ref.isLoading;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorStateCard.SyncedBlockErrorStateCard, {
-    description: formatMessage(_messages.syncBlockMessages.generalErrorDescription)
-  }, onRetry && /*#__PURE__*/_react.default.createElement(_new.default, {
+  var button = /*#__PURE__*/_react.default.createElement(_new.default, {
     appearance: "default",
     spacing: "compact",
     onClick: function onClick(event) {
       event.preventDefault();
       event.stopPropagation();
-      onRetry();
+      onRetry === null || onRetry === void 0 || onRetry();
     },
     isLoading: isLoading,
     testId: "sync-block-retry-btn"
-  }, formatMessage(_messages.syncBlockMessages.retryButton)));
+  }, formatMessage(_messages.syncBlockMessages.retryButton));
+  return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorStateCard.SyncedBlockErrorStateCard, {
+    description: formatMessage(_messages.syncBlockMessages.generalErrorDescription)
+  }, onRetry && ((0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.buttonContainer
+  }, button) : button));
 };

package/dist/cjs/ui/SyncedBlockNodeComponentRenderer.js

@@ -20,6 +20,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var SyncedBlockNodeComponentRenderer = exports.SyncedBlockNodeComponentRenderer = function SyncedBlockNodeComponentRenderer(_ref) {
+  var _syncBlockInstance$da2;
   var nodeProps = _ref.nodeProps,
     syncBlockStoreManager = _ref.syncBlockStoreManager,
     rendererOptions = _ref.rendererOptions;
@@ -73,6 +74,17 @@ var SyncedBlockNodeComponentRenderer = exports.SyncedBlockNodeComponentRenderer
       fireAnalyticsEvent: fireAnalyticsEvent
     });
   }
+  if ((syncBlockInstance === null || syncBlockInstance === void 0 || (_syncBlockInstance$da2 = syncBlockInstance.data) === null || _syncBlockInstance$da2 === void 0 ? void 0 : _syncBlockInstance$da2.status) === 'unpublished' && (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding')) {
+    var _syncBlockInstance$da3;
+    return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorComponent.SyncedBlockErrorComponent, {
+      error: {
+        type: _editorSyncedBlockProvider.SyncBlockError.Unpublished
+      },
+      resourceId: syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.resourceId,
+      sourceURL: (_syncBlockInstance$da3 = syncBlockInstance.data) === null || _syncBlockInstance$da3 === void 0 ? void 0 : _syncBlockInstance$da3.sourceURL,
+      fireAnalyticsEvent: fireAnalyticsEvent
+    });
+  }
   var syncBlockDoc = {
     content: syncBlockInstance.data.content,
     version: 1,

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

@@ -0,0 +1,10 @@
+
+._1rjcutpp{padding-block:var(--ds-space-150,9pt)}._16jlkb7n{flex-grow:1}
+._1bah1h6o{justify-content:center}
+._1bahesu3{justify-content:flex-end}
+._1e0c1txw{display:flex}
+._1hmsglyw{text-decoration-line:none}
+._1o9zkb7n{flex-shrink:1}
+._4bfu1r31{text-decoration-color:currentColor}
+._ajmmnqa1{text-decoration-style:solid}
+._i0dlf1ug{flex-basis:0%}

package/dist/cjs/ui/SyncedBlockNotFoundError.js

@@ -1,16 +1,36 @@
+/* SyncedBlockNotFoundError.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SyncedBlockNotFoundError = void 0;
-var _react = _interopRequireDefault(require("react"));
+require("./SyncedBlockNotFoundError.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
-var _messages = require("@atlaskit/editor-common/messages");
+var _new = require("@atlaskit/button/new");
+var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
+var _syncBlock = require("@atlaskit/editor-common/sync-block");
+var _cross = _interopRequireDefault(require("@atlaskit/icon/core/cross"));
+var _eyeOpenStrikethrough = _interopRequireDefault(require("@atlaskit/icon/core/eye-open-strikethrough"));
 var _linkBroken = _interopRequireDefault(require("@atlaskit/icon/core/link-broken"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _SyncedBlockErrorStateCard = require("./SyncedBlockErrorStateCard");
+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 = {
+  link: "_4bfu1r31 _1hmsglyw _ajmmnqa1",
+  spinner: "_1rjcutpp _1e0c1txw _1bah1h6o",
+  closeButton: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1e0c1txw _1bahesu3"
+};
 var errorMap = {
   'source-block-unsynced': {
     description: _messages.syncBlockMessages.sourceUnsyncedDescription,
@@ -19,25 +39,143 @@ var errorMap = {
   'source-block-deleted': {
     description: _messages.syncBlockMessages.sourceDeletedDescription,
     icon: _linkBroken.default
+  },
+  'source-document-deleted': {
+    description: _messages.syncBlockMessages.notFoundDescription,
+    icon: _eyeOpenStrikethrough.default
+  },
+  generic: {
+    description: _messages.syncBlockMessages.genericNotFoundDescription,
+    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 useSyncBlockInfo = (0, _platformFeatureFlagsReact.conditionalHooksFactory)(function () {
+  return (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding');
+}, function () {
+  var _useSyncBlockActions;
+  var _ref = (_useSyncBlockActions = (0, _syncBlock.useSyncBlockActions)()) !== null && _useSyncBlockActions !== void 0 ? _useSyncBlockActions : {},
+    deleteSyncBlock = _ref.deleteSyncBlock,
+    fetchSourceInfo = _ref.fetchSourceInfo;
+  return {
+    deleteSyncBlock: deleteSyncBlock,
+    fetchSourceInfo: fetchSourceInfo
+  };
+}, function () {
+  return {
+    deleteSyncBlock: undefined,
+    fetchSourceInfo: undefined
+  };
+});
+var useErrorInfo = (0, _platformFeatureFlagsReact.conditionalHooksFactory)(function () {
+  return (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding');
+}, function (reason, url, title) {
   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 : {};
+  if (reason === 'source-document-deleted') {
+    var _errorMap$sourceDocu = errorMap['source-document-deleted'],
+      _icon = _errorMap$sourceDocu.icon,
+      _description = _errorMap$sourceDocu.description;
+    return {
+      description: formatMessage(_description),
+      icon: _icon
+    };
+  }
+  if (!url || !title) {
+    var _errorMap$generic = errorMap['generic'],
+      _icon2 = _errorMap$generic.icon,
+      _description2 = _errorMap$generic.description;
+    return {
+      description: formatMessage(_description2),
+      icon: _icon2
+    };
   }
-  var _errorInfo = errorInfo,
-    description = _errorInfo.description,
-    icon = _errorInfo.icon;
-  return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorStateCard.SyncedBlockErrorStateCard, {
-    description: formatMessage(description),
+  var _errorMap = errorMap[reason || 'generic'],
+    icon = _errorMap.icon,
+    description = _errorMap.description;
+  return {
+    description: formatMessage(description, {
+      title: title,
+      a: function a(chunk) {
+        return /*#__PURE__*/_react.default.createElement(_compiled.Anchor, {
+          href: url,
+          target: "_blank",
+          xcss: styles.link
+        }, chunk);
+      }
+    }),
+    icon: icon
+  };
+}, function (_) {
+  var _useIntl2 = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl2.formatMessage;
+  return {
+    description: formatMessage(_messages.syncBlockMessages.notFoundDescription),
+    icon: undefined
+  };
+});
+var SyncedBlockNotFoundError = exports.SyncedBlockNotFoundError = function SyncedBlockNotFoundError(_ref2) {
+  var _ref2$reason = _ref2.reason,
+    reason = _ref2$reason === void 0 ? 'source-block-deleted' : _ref2$reason,
+    sourceAri = _ref2.sourceAri;
+  var _useSyncBlockInfo = useSyncBlockInfo(),
+    deleteSyncBlock = _useSyncBlockInfo.deleteSyncBlock,
+    fetchSourceInfo = _useSyncBlockInfo.fetchSourceInfo;
+  var _useState = (0, _react.useState)(undefined),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    sourceInfo = _useState2[0],
+    setSourceInfo = _useState2[1];
+  var _useIntl3 = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl3.formatMessage;
+  (0, _react.useEffect)(function () {
+    if (!(0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') || !sourceAri ||
+    // Only fetch source info for these 2 cases
+    !['source-block-deleted', 'source-block-unsynced'].includes(reason)) {
+      setSourceInfo({});
+      return;
+    }
+    var getSourceInfo = /*#__PURE__*/function () {
+      var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        var sourceInfo;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return fetchSourceInfo === null || fetchSourceInfo === void 0 ? void 0 : fetchSourceInfo(sourceAri, true);
+            case 2:
+              sourceInfo = _context.sent;
+              setSourceInfo({
+                url: sourceInfo === null || sourceInfo === void 0 ? void 0 : sourceInfo.url,
+                title: sourceInfo === null || sourceInfo === void 0 ? void 0 : sourceInfo.title
+              });
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function getSourceInfo() {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+    getSourceInfo();
+  }, [reason, sourceAri, fetchSourceInfo]);
+  var _useErrorInfo = useErrorInfo(reason, sourceInfo === null || sourceInfo === void 0 ? void 0 : sourceInfo.url, sourceInfo === null || sourceInfo === void 0 ? void 0 : sourceInfo.title),
+    description = _useErrorInfo.description,
+    icon = _useErrorInfo.icon;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, sourceInfo === undefined ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.spinner
+  }, /*#__PURE__*/_react.default.createElement(_spinner.default, null)) : /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorStateCard.SyncedBlockErrorStateCard, {
+    description: description,
+    icon: icon
+  }, deleteSyncBlock && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.closeButton
+  }, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
+    appearance: "subtle",
+    icon: _cross.default,
+    label: formatMessage(_messages.default.delete),
+    onClick: deleteSyncBlock
+  })))) : /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorStateCard.SyncedBlockErrorStateCard, {
+    description: description,
     icon: icon
-  });
+  }));
 };

package/dist/cjs/ui/SyncedBlockRenderer.js

@@ -19,6 +19,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref) {
+  var _syncBlockInstance$da2;
   var syncBlockRendererOptions = _ref.syncBlockRendererOptions,
     syncBlockFetchResult = _ref.syncBlockFetchResult,
     api = _ref.api;
@@ -84,6 +85,19 @@ var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref) {
       fireAnalyticsEvent: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.fireAnalyticsEvent
     });
   }
+
+  // Check for unpublished status
+  if (((_syncBlockInstance$da2 = syncBlockInstance.data) === null || _syncBlockInstance$da2 === void 0 ? void 0 : _syncBlockInstance$da2.status) === 'unpublished' && (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding')) {
+    var _syncBlockInstance$da3, _api$analytics2;
+    return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorComponent.SyncedBlockErrorComponent, {
+      error: {
+        type: _editorSyncedBlockProvider.SyncBlockError.Unpublished
+      },
+      resourceId: syncBlockInstance.resourceId,
+      sourceURL: (_syncBlockInstance$da3 = syncBlockInstance.data) === null || _syncBlockInstance$da3 === void 0 ? void 0 : _syncBlockInstance$da3.sourceURL,
+      fireAnalyticsEvent: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions.fireAnalyticsEvent
+    });
+  }
   var syncBlockDoc = {
     content: syncBlockInstance.data.content,
     version: 1,

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

@@ -0,0 +1,3 @@
+._1hmsglyw{text-decoration-line:none}
+._4bfu1r31{text-decoration-color:currentColor}
+._ajmmnqa1{text-decoration-style:solid}

package/dist/cjs/ui/SyncedBlockUnpublishedError.js

@@ -0,0 +1,37 @@
+/* SyncedBlockUnpublishedError.tsx generated by @compiled/babel-plugin v0.38.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SyncedBlockUnpublishedError = void 0;
+require("./SyncedBlockUnpublishedError.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _messages = require("@atlaskit/editor-common/messages");
+var _eyeOpenStrikethrough = _interopRequireDefault(require("@atlaskit/icon/core/eye-open-strikethrough"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var _SyncedBlockErrorStateCard = require("./SyncedBlockErrorStateCard");
+var styles = {
+  link: "_4bfu1r31 _1hmsglyw _ajmmnqa1"
+};
+var SyncedBlockUnpublishedError = exports.SyncedBlockUnpublishedError = function SyncedBlockUnpublishedError(_ref) {
+  var sourceURL = _ref.sourceURL;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var description = formatMessage(_messages.syncBlockMessages.unpublishedError, {
+    link: function link(chunks) {
+      return sourceURL ? /*#__PURE__*/_react.default.createElement(_compiled.Text, null, /*#__PURE__*/_react.default.createElement(_compiled.Anchor, {
+        href: sourceURL,
+        target: "_blank",
+        xcss: styles.link
+      }, chunks)) : chunks;
+    }
+  });
+  return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorStateCard.SyncedBlockErrorStateCard, {
+    description: description,
+    icon: _eyeOpenStrikethrough.default
+  });
+};

package/dist/cjs/useSyncedBlockNodeComponent.js

@@ -8,6 +8,7 @@ exports.useMemoizedSyncedBlockNodeComponent = exports.getSyncBlockNodesFromDoc =
 var _react = _interopRequireWildcard(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _errorBoundary = require("@atlaskit/editor-common/error-boundary");
+var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _SyncedBlockNodeComponentRenderer = require("./ui/SyncedBlockNodeComponentRenderer");
@@ -49,12 +50,16 @@ var useMemoizedSyncedBlockNodeComponent = exports.useMemoizedSyncedBlockNodeComp
       component: _analytics.ACTION_SUBJECT.SYNCED_BLOCK,
       dispatchAnalyticsEvent: fireAnalyticsEvent,
       fallbackComponent: null
+    }, /*#__PURE__*/_react.default.createElement(_syncBlock.SyncBlockActionsProvider, {
+      fetchSyncBlockSourceInfo: function fetchSyncBlockSourceInfo(sourceAri) {
+        return syncBlockStoreManager.referenceManager.fetchSyncBlockSourceInfoBySourceAri(sourceAri);
+      }
     }, /*#__PURE__*/_react.default.createElement(_SyncedBlockNodeComponentRenderer.SyncedBlockNodeComponentRenderer, {
       key: props.localId,
       nodeProps: props,
       syncBlockStoreManager: syncBlockStoreManager,
       rendererOptions: syncBlockRendererOptions
-    })) : /*#__PURE__*/_react.default.createElement(_SyncedBlockNodeComponentRenderer.SyncedBlockNodeComponentRenderer, {
+    }))) : /*#__PURE__*/_react.default.createElement(_SyncedBlockNodeComponentRenderer.SyncedBlockNodeComponentRenderer, {
       key: props.localId,
       nodeProps: props,
       syncBlockStoreManager: syncBlockStoreManager,

package/dist/es2019/ui/SyncedBlockErrorComponent.js

@@ -7,6 +7,7 @@ import { SyncedBlockLoadError } from './SyncedBlockLoadError';
 import { SyncedBlockNotFoundError } from './SyncedBlockNotFoundError';
 import { SyncedBlockOfflineError } from './SyncedBlockOfflineError';
 import { SyncedBlockPermissionDenied } from './SyncedBlockPermissionDenied';
+import { SyncedBlockUnpublishedError } from './SyncedBlockUnpublishedError';
 const getForbiddenErrorContent = (resourceId, fireAnalyticsEvent) => {
   try {
     if (!resourceId) {
@@ -33,7 +34,8 @@ export const SyncedBlockErrorComponent = ({
   isLoading,
   onRetry,
   resourceId,
-  fireAnalyticsEvent
+  fireAnalyticsEvent,
+  sourceURL
 }) => {
   const getErrorContent = useMemo(() => {
     switch (error === null || error === void 0 ? void 0 : error.type) {
@@ -43,7 +45,12 @@ export const SyncedBlockErrorComponent = ({
         return getForbiddenErrorContent(resourceId, fireAnalyticsEvent);
       case SyncBlockError.NotFound:
         return /*#__PURE__*/React.createElement(SyncedBlockNotFoundError, {
-          reason: error.reason
+          reason: error.reason,
+          sourceAri: error.sourceAri
+        });
+      case SyncBlockError.Unpublished:
+        return /*#__PURE__*/React.createElement(SyncedBlockUnpublishedError, {
+          sourceURL: sourceURL
         });
       case SyncBlockError.Errored:
       case SyncBlockError.RateLimited:
@@ -55,7 +62,7 @@ export const SyncedBlockErrorComponent = ({
       default:
         return /*#__PURE__*/React.createElement(SyncedBlockGenericError, null);
     }
-  }, [error, isLoading, onRetry, resourceId, fireAnalyticsEvent]);
+  }, [error, isLoading, onRetry, resourceId, fireAnalyticsEvent, sourceURL]);
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop

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

@@ -1,8 +1,6 @@
 
-._zulppxbi{gap:var(--ds-space-200,1pc)}._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
-._1bahv2br{justify-content:start}
+._zulppxbi{gap:var(--ds-space-200,1pc)}
+._1rjc12x7{padding-block:var(--ds-space-075,6px)}._1bahv2br{justify-content:start}
 ._1e0c1txw{display:flex}
 ._4cvr1h6o{align-items:center}
-._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
-._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
-._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
+._bozgpxbi{padding-inline-start:var(--ds-space-200,1pc)}

package/dist/es2019/ui/SyncedBlockErrorStateCard.js

@@ -6,7 +6,8 @@ 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"
+  wrapper: "_zulppxbi _1rjc12x7 _bozgpxbi _1e0c1txw _1bahv2br _4cvr1h6o",
+  container: "_1e0c1txw"
 };
 export const SyncedBlockErrorStateCard = ({
   children,
@@ -15,11 +16,13 @@ export const SyncedBlockErrorStateCard = ({
 }) => {
   const Icon = fg('platform_synced_block_dogfooding') ? icon !== null && icon !== void 0 ? icon : WarningOutlineIcon : WarningOutlineIcon;
   return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.container
+  }, /*#__PURE__*/React.createElement(Box, {
     xcss: styles.wrapper
   }, /*#__PURE__*/React.createElement(Icon, {
     color: "var(--ds-icon-subtle, #505258)",
     label: ""
   }), /*#__PURE__*/React.createElement(Text, {
     color: "color.text.subtle"
-  }, description), children);
+  }, description), !fg('platform_synced_block_dogfooding') && children), fg('platform_synced_block_dogfooding') && children);
 };

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

@@ -0,0 +1,3 @@
+._18u0u2gc{margin-left:var(--ds-space-100,8px)}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}