@atlaskit/editor-plugin-synced-block 20.0.11 → 20.1.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 20.1.0
+
+### Minor Changes
+
+- [`70b2bc3a11027`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/70b2bc3a11027) -
+  [ux] EDITOR-9295 Link the unsaved Jira source from the "Pasted from unsaved item" flag, behind
+  `editor_synced_blocks_jira_custom_rich_text`. Adds optional `resourceId` to `ActiveFlag`.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 20.0.11
 
 ### Patch Changes

package/dist/cjs/pm-plugins/main.js

@@ -677,7 +677,8 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
           return tr.setMeta(syncedBlockPluginKey, {
             activeFlag: {
               id: _types.FLAG_ID.UNPUBLISHED_SYNC_BLOCK_PASTED,
-              sourceProduct: sourceProduct
+              sourceProduct: sourceProduct,
+              resourceId: resourceId
             }
           });
         });

package/dist/cjs/ui/Flag.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getSyncBlockCopiedDescription = exports.Flag = void 0;
 require("./Flag.compiled.css");
 var _runtime = require("@compiled/react/runtime");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
@@ -22,6 +23,7 @@ var _megaphone = _interopRequireDefault(require("@atlaskit/icon/core/megaphone")
 var _statusSuccess = _interopRequireDefault(require("@atlaskit/icon/core/status-success"));
 var _statusWarning = _interopRequireDefault(require("@atlaskit/icon/core/status-warning"));
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
+var _anchor = require("@atlaskit/primitives/compiled/anchor");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _main = require("../pm-plugins/main");
 var _types = require("../types");
@@ -85,22 +87,54 @@ var getSyncBlockCopiedDescription = exports.getSyncBlockCopiedDescription = func
   }
   return activeFlag.isLivePage || !activeFlag.isSourceContentUnpublished ? _messages.syncBlockMessages.syncBlockCopiedLivePageDescription : _messages.syncBlockMessages.syncBlockCopiedUnpublishedDescription;
 };
+var useSyncBlockSourceUrl = function useSyncBlockSourceUrl(syncBlockStore, resourceId) {
+  var _React$useState = _react.default.useState(),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    sourceUrl = _React$useState2[0],
+    setSourceUrl = _React$useState2[1];
+  _react.default.useEffect(function () {
+    setSourceUrl(undefined);
+    if (!syncBlockStore || !resourceId) {
+      return;
+    }
+    var referenceManager = syncBlockStore.referenceManager;
+    var cachedSourceUrl = referenceManager.getSyncBlockURL(resourceId);
+    if (cachedSourceUrl) {
+      setSourceUrl(cachedSourceUrl);
+      return;
+    }
+    var isCancelled = false;
+    void referenceManager.fetchSyncBlockSourceInfo(resourceId).then(function (sourceInfo) {
+      if (!isCancelled) {
+        setSourceUrl(sourceInfo === null || sourceInfo === void 0 ? void 0 : sourceInfo.url);
+      }
+    });
+    return function () {
+      isCancelled = true;
+    };
+  }, [syncBlockStore, resourceId]);
+  return sourceUrl;
+};
 var Flag = exports.Flag = function Flag(_ref) {
   var api = _ref.api,
     onFeedbackPromptShown = _ref.onFeedbackPromptShown,
     onGiveFeedback = _ref.onGiveFeedback;
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['syncedBlock', 'connectivity'], function (states) {
-      var _states$syncedBlockSt, _states$connectivityS;
+      var _states$syncedBlockSt, _states$connectivityS, _states$syncedBlockSt2;
       return {
         activeFlag: (_states$syncedBlockSt = states.syncedBlockState) === null || _states$syncedBlockSt === void 0 ? void 0 : _states$syncedBlockSt.activeFlag,
-        mode: (_states$connectivityS = states.connectivityState) === null || _states$connectivityS === void 0 ? void 0 : _states$connectivityS.mode
+        mode: (_states$connectivityS = states.connectivityState) === null || _states$connectivityS === void 0 ? void 0 : _states$connectivityS.mode,
+        syncBlockStore: (_states$syncedBlockSt2 = states.syncedBlockState) === null || _states$syncedBlockSt2 === void 0 ? void 0 : _states$syncedBlockSt2.syncBlockStore
       };
     }),
     activeFlag = _useSharedPluginState.activeFlag,
-    mode = _useSharedPluginState.mode;
+    mode = _useSharedPluginState.mode,
+    syncBlockStore = _useSharedPluginState.syncBlockStore;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var isFeedbackPromptVisible = activeFlag && activeFlag.id === _types.FLAG_ID.SYNC_BLOCK_FEEDBACK_PROMPT;
+  var isJiraUnpublishedPaste = !!activeFlag && activeFlag.id === _types.FLAG_ID.UNPUBLISHED_SYNC_BLOCK_PASTED && activeFlag.sourceProduct === 'jira-work-item';
+  var sourceUrl = useSyncBlockSourceUrl(syncBlockStore, activeFlag && isJiraUnpublishedPaste && (0, _isExperimentEnabled.isExperimentEnabled)('editor_synced_blocks_jira_custom_rich_text') ? activeFlag.resourceId : undefined);
   _react.default.useEffect(function () {
     if (!isFeedbackPromptVisible || !onFeedbackPromptShown) {
       return;
@@ -122,14 +156,20 @@ var Flag = exports.Flag = function Flag(_ref) {
     type = _flagMap$activeFlag$i.type;
   var onRetry = activeFlag.onRetry,
     onDismissedCallback = activeFlag.onDismissed;
-
-  // Copy and unpublished-paste flags vary their guidance by source product.
-  var isJiraUnpublishedPaste = activeFlag.id === _types.FLAG_ID.UNPUBLISHED_SYNC_BLOCK_PASTED && activeFlag.sourceProduct === 'jira-work-item';
   var isCopiedFlag = activeFlag.id === _types.FLAG_ID.SYNC_BLOCK_COPIED;
   var isCopiedDescriptionEnabled = isCopiedFlag && ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_blocks_patch_11') || activeFlag.sourceProduct === 'confluence-page' && (0, _expValEquals.expValEquals)('platform_editor_sync_block_activation', 'isEnabled', true));
   var copiedDescription = getSyncBlockCopiedDescription(activeFlag, isCopiedDescriptionEnabled);
   var title = isJiraUnpublishedPaste ? _messages.syncBlockMessages.unpublishedSyncBlockPastedTitleJiraWorkItem : defaultTitle;
   var description = copiedDescription !== null && copiedDescription !== void 0 ? copiedDescription : isJiraUnpublishedPaste ? _messages.syncBlockMessages.unpublishedSyncBlockPastedDescriptionJiraWorkItem : defaultDescription;
+  var descriptionContent = description ? formatMessage(description, {
+    link: function link(chunks) {
+      return sourceUrl ? /*#__PURE__*/_react.default.createElement(_anchor.Anchor, {
+        href: sourceUrl,
+        target: "_blank",
+        rel: "noopener noreferrer"
+      }, chunks) : chunks;
+    }
+  }) : undefined;
 
   // Retry button often involves network request, hence we dismiss the flag in offline mode to avoid retry
   if ((0, _editorPluginConnectivity.isOfflineMode)(mode) && !!onRetry) {
@@ -198,7 +238,7 @@ var Flag = exports.Flag = function Flag(_ref) {
   var flag = /*#__PURE__*/_react.default.createElement(FlagComponent, {
     onDismissed: onDismissed,
     title: formatMessage(title),
-    description: description ? formatMessage(description) : undefined,
+    description: descriptionContent,
     id: activeFlag.id,
     testId: activeFlag.id,
     icon: typeToIcon(type),

package/dist/es2019/pm-plugins/main.js

@@ -615,7 +615,8 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
         }) => tr.setMeta(syncedBlockPluginKey, {
           activeFlag: {
             id: FLAG_ID.UNPUBLISHED_SYNC_BLOCK_PASTED,
-            sourceProduct
+            sourceProduct,
+            resourceId
           }
         }));
       });

package/dist/es2019/ui/Flag.js

@@ -14,6 +14,7 @@ import MegaphoneIcon from '@atlaskit/icon/core/megaphone';
 import StatusSuccessIcon from '@atlaskit/icon/core/status-success';
 import StatusWarningIcon from '@atlaskit/icon/core/status-warning';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import { Anchor } from '@atlaskit/primitives/compiled/anchor';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { syncedBlockPluginKey } from '../pm-plugins/main';
 import { FLAG_ID } from '../types';
@@ -86,6 +87,33 @@ export const getSyncBlockCopiedDescription = (activeFlag, isCopiedDescriptionEna
   }
   return activeFlag.isLivePage || !activeFlag.isSourceContentUnpublished ? messages.syncBlockCopiedLivePageDescription : messages.syncBlockCopiedUnpublishedDescription;
 };
+const useSyncBlockSourceUrl = (syncBlockStore, resourceId) => {
+  const [sourceUrl, setSourceUrl] = React.useState();
+  React.useEffect(() => {
+    setSourceUrl(undefined);
+    if (!syncBlockStore || !resourceId) {
+      return;
+    }
+    const {
+      referenceManager
+    } = syncBlockStore;
+    const cachedSourceUrl = referenceManager.getSyncBlockURL(resourceId);
+    if (cachedSourceUrl) {
+      setSourceUrl(cachedSourceUrl);
+      return;
+    }
+    let isCancelled = false;
+    void referenceManager.fetchSyncBlockSourceInfo(resourceId).then(sourceInfo => {
+      if (!isCancelled) {
+        setSourceUrl(sourceInfo === null || sourceInfo === void 0 ? void 0 : sourceInfo.url);
+      }
+    });
+    return () => {
+      isCancelled = true;
+    };
+  }, [syncBlockStore, resourceId]);
+  return sourceUrl;
+};
 export const Flag = ({
   api,
   onFeedbackPromptShown,
@@ -93,18 +121,22 @@ export const Flag = ({
 }) => {
   const {
     activeFlag,
-    mode
+    mode,
+    syncBlockStore
   } = useSharedPluginStateWithSelector(api, ['syncedBlock', 'connectivity'], states => {
-    var _states$syncedBlockSt, _states$connectivityS;
+    var _states$syncedBlockSt, _states$connectivityS, _states$syncedBlockSt2;
     return {
       activeFlag: (_states$syncedBlockSt = states.syncedBlockState) === null || _states$syncedBlockSt === void 0 ? void 0 : _states$syncedBlockSt.activeFlag,
-      mode: (_states$connectivityS = states.connectivityState) === null || _states$connectivityS === void 0 ? void 0 : _states$connectivityS.mode
+      mode: (_states$connectivityS = states.connectivityState) === null || _states$connectivityS === void 0 ? void 0 : _states$connectivityS.mode,
+      syncBlockStore: (_states$syncedBlockSt2 = states.syncedBlockState) === null || _states$syncedBlockSt2 === void 0 ? void 0 : _states$syncedBlockSt2.syncBlockStore
     };
   });
   const {
     formatMessage
   } = useIntl();
   const isFeedbackPromptVisible = activeFlag && activeFlag.id === FLAG_ID.SYNC_BLOCK_FEEDBACK_PROMPT;
+  const isJiraUnpublishedPaste = !!activeFlag && activeFlag.id === FLAG_ID.UNPUBLISHED_SYNC_BLOCK_PASTED && activeFlag.sourceProduct === 'jira-work-item';
+  const sourceUrl = useSyncBlockSourceUrl(syncBlockStore, activeFlag && isJiraUnpublishedPaste && isExperimentEnabled('editor_synced_blocks_jira_custom_rich_text') ? activeFlag.resourceId : undefined);
   React.useEffect(() => {
     if (!isFeedbackPromptVisible || !onFeedbackPromptShown) {
       return;
@@ -129,14 +161,18 @@ export const Flag = ({
     onRetry,
     onDismissed: onDismissedCallback
   } = activeFlag;
-
-  // Copy and unpublished-paste flags vary their guidance by source product.
-  const isJiraUnpublishedPaste = activeFlag.id === FLAG_ID.UNPUBLISHED_SYNC_BLOCK_PASTED && activeFlag.sourceProduct === 'jira-work-item';
   const isCopiedFlag = activeFlag.id === FLAG_ID.SYNC_BLOCK_COPIED;
   const isCopiedDescriptionEnabled = isCopiedFlag && (isExperimentEnabled('platform_editor_blocks_patch_11') || activeFlag.sourceProduct === 'confluence-page' && expValEquals('platform_editor_sync_block_activation', 'isEnabled', true));
   const copiedDescription = getSyncBlockCopiedDescription(activeFlag, isCopiedDescriptionEnabled);
   const title = isJiraUnpublishedPaste ? messages.unpublishedSyncBlockPastedTitleJiraWorkItem : defaultTitle;
   const description = copiedDescription !== null && copiedDescription !== void 0 ? copiedDescription : isJiraUnpublishedPaste ? messages.unpublishedSyncBlockPastedDescriptionJiraWorkItem : defaultDescription;
+  const descriptionContent = description ? formatMessage(description, {
+    link: chunks => sourceUrl ? /*#__PURE__*/React.createElement(Anchor, {
+      href: sourceUrl,
+      target: "_blank",
+      rel: "noopener noreferrer"
+    }, chunks) : chunks
+  }) : undefined;
 
   // Retry button often involves network request, hence we dismiss the flag in offline mode to avoid retry
   if (isOfflineMode(mode) && !!onRetry) {
@@ -206,7 +242,7 @@ export const Flag = ({
   const flag = /*#__PURE__*/React.createElement(FlagComponent, {
     onDismissed: onDismissed,
     title: formatMessage(title),
-    description: description ? formatMessage(description) : undefined,
+    description: descriptionContent,
     id: activeFlag.id,
     testId: activeFlag.id,
     icon: typeToIcon(type),

package/dist/esm/pm-plugins/main.js

@@ -670,7 +670,8 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
           return tr.setMeta(syncedBlockPluginKey, {
             activeFlag: {
               id: FLAG_ID.UNPUBLISHED_SYNC_BLOCK_PASTED,
-              sourceProduct: sourceProduct
+              sourceProduct: sourceProduct,
+              resourceId: resourceId
             }
           });
         });

package/dist/esm/ui/Flag.js

@@ -1,4 +1,5 @@
 /* Flag.tsx generated by @compiled/babel-plugin v3.0.2 */
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _flagMap;
 import "./Flag.compiled.css";
@@ -18,6 +19,7 @@ import MegaphoneIcon from '@atlaskit/icon/core/megaphone';
 import StatusSuccessIcon from '@atlaskit/icon/core/status-success';
 import StatusWarningIcon from '@atlaskit/icon/core/status-warning';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import { Anchor } from '@atlaskit/primitives/compiled/anchor';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { syncedBlockPluginKey } from '../pm-plugins/main';
 import { FLAG_ID } from '../types';
@@ -78,22 +80,54 @@ export var getSyncBlockCopiedDescription = function getSyncBlockCopiedDescriptio
   }
   return activeFlag.isLivePage || !activeFlag.isSourceContentUnpublished ? messages.syncBlockCopiedLivePageDescription : messages.syncBlockCopiedUnpublishedDescription;
 };
+var useSyncBlockSourceUrl = function useSyncBlockSourceUrl(syncBlockStore, resourceId) {
+  var _React$useState = React.useState(),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    sourceUrl = _React$useState2[0],
+    setSourceUrl = _React$useState2[1];
+  React.useEffect(function () {
+    setSourceUrl(undefined);
+    if (!syncBlockStore || !resourceId) {
+      return;
+    }
+    var referenceManager = syncBlockStore.referenceManager;
+    var cachedSourceUrl = referenceManager.getSyncBlockURL(resourceId);
+    if (cachedSourceUrl) {
+      setSourceUrl(cachedSourceUrl);
+      return;
+    }
+    var isCancelled = false;
+    void referenceManager.fetchSyncBlockSourceInfo(resourceId).then(function (sourceInfo) {
+      if (!isCancelled) {
+        setSourceUrl(sourceInfo === null || sourceInfo === void 0 ? void 0 : sourceInfo.url);
+      }
+    });
+    return function () {
+      isCancelled = true;
+    };
+  }, [syncBlockStore, resourceId]);
+  return sourceUrl;
+};
 export var Flag = function Flag(_ref) {
   var api = _ref.api,
     onFeedbackPromptShown = _ref.onFeedbackPromptShown,
     onGiveFeedback = _ref.onGiveFeedback;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['syncedBlock', 'connectivity'], function (states) {
-      var _states$syncedBlockSt, _states$connectivityS;
+      var _states$syncedBlockSt, _states$connectivityS, _states$syncedBlockSt2;
       return {
         activeFlag: (_states$syncedBlockSt = states.syncedBlockState) === null || _states$syncedBlockSt === void 0 ? void 0 : _states$syncedBlockSt.activeFlag,
-        mode: (_states$connectivityS = states.connectivityState) === null || _states$connectivityS === void 0 ? void 0 : _states$connectivityS.mode
+        mode: (_states$connectivityS = states.connectivityState) === null || _states$connectivityS === void 0 ? void 0 : _states$connectivityS.mode,
+        syncBlockStore: (_states$syncedBlockSt2 = states.syncedBlockState) === null || _states$syncedBlockSt2 === void 0 ? void 0 : _states$syncedBlockSt2.syncBlockStore
       };
     }),
     activeFlag = _useSharedPluginState.activeFlag,
-    mode = _useSharedPluginState.mode;
+    mode = _useSharedPluginState.mode,
+    syncBlockStore = _useSharedPluginState.syncBlockStore;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var isFeedbackPromptVisible = activeFlag && activeFlag.id === FLAG_ID.SYNC_BLOCK_FEEDBACK_PROMPT;
+  var isJiraUnpublishedPaste = !!activeFlag && activeFlag.id === FLAG_ID.UNPUBLISHED_SYNC_BLOCK_PASTED && activeFlag.sourceProduct === 'jira-work-item';
+  var sourceUrl = useSyncBlockSourceUrl(syncBlockStore, activeFlag && isJiraUnpublishedPaste && isExperimentEnabled('editor_synced_blocks_jira_custom_rich_text') ? activeFlag.resourceId : undefined);
   React.useEffect(function () {
     if (!isFeedbackPromptVisible || !onFeedbackPromptShown) {
       return;
@@ -115,14 +149,20 @@ export var Flag = function Flag(_ref) {
     type = _flagMap$activeFlag$i.type;
   var onRetry = activeFlag.onRetry,
     onDismissedCallback = activeFlag.onDismissed;
-
-  // Copy and unpublished-paste flags vary their guidance by source product.
-  var isJiraUnpublishedPaste = activeFlag.id === FLAG_ID.UNPUBLISHED_SYNC_BLOCK_PASTED && activeFlag.sourceProduct === 'jira-work-item';
   var isCopiedFlag = activeFlag.id === FLAG_ID.SYNC_BLOCK_COPIED;
   var isCopiedDescriptionEnabled = isCopiedFlag && (isExperimentEnabled('platform_editor_blocks_patch_11') || activeFlag.sourceProduct === 'confluence-page' && expValEquals('platform_editor_sync_block_activation', 'isEnabled', true));
   var copiedDescription = getSyncBlockCopiedDescription(activeFlag, isCopiedDescriptionEnabled);
   var title = isJiraUnpublishedPaste ? messages.unpublishedSyncBlockPastedTitleJiraWorkItem : defaultTitle;
   var description = copiedDescription !== null && copiedDescription !== void 0 ? copiedDescription : isJiraUnpublishedPaste ? messages.unpublishedSyncBlockPastedDescriptionJiraWorkItem : defaultDescription;
+  var descriptionContent = description ? formatMessage(description, {
+    link: function link(chunks) {
+      return sourceUrl ? /*#__PURE__*/React.createElement(Anchor, {
+        href: sourceUrl,
+        target: "_blank",
+        rel: "noopener noreferrer"
+      }, chunks) : chunks;
+    }
+  }) : undefined;
 
   // Retry button often involves network request, hence we dismiss the flag in offline mode to avoid retry
   if (isOfflineMode(mode) && !!onRetry) {
@@ -191,7 +231,7 @@ export var Flag = function Flag(_ref) {
   var flag = /*#__PURE__*/React.createElement(FlagComponent, {
     onDismissed: onDismissed,
     title: formatMessage(title),
-    description: description ? formatMessage(description) : undefined,
+    description: descriptionContent,
     id: activeFlag.id,
     testId: activeFlag.id,
     icon: typeToIcon(type),

package/dist/types/types/index.d.ts

@@ -26,6 +26,7 @@ type FlagConfig = {
     isSourceContentUnpublished?: boolean;
     onDismissed?: (tr: Transaction) => Transaction | void;
     onRetry?: () => void;
+    resourceId?: string;
     /**
      * Optional source product for the synced block triggering this flag. Used to tailor
      * unpublished paste copy and copied-block reuse guidance by product.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "20.0.11",
+	"version": "20.1.0",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",