@atlaskit/editor-plugin-synced-block/dist/es2019/ui/Flag.js

SyncedBlock plugin for @atlaskit/editor-core

/* Flag.tsx generated by @compiled/babel-plugin v3.0.2 */
import "./Flag.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React from 'react';
import { useIntl } from 'react-intl';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
import { SYNCED_BLOCKS_DOCUMENTATION_URL } from '@atlaskit/editor-common/sync-block';
import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
import AutoDismissFlag from '@atlaskit/flag/auto-dismiss-flag';
import AkFlag from '@atlaskit/flag/flag';
import { FlagGroup } from '@atlaskit/flag/flag-group';
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 { syncedBlockPluginKey } from '../pm-plugins/main';
import { FLAG_ID } from '../types';
const feedbackFlagStyles = null;
const flagMap = {
  [FLAG_ID.CANNOT_DELETE_WHEN_OFFLINE]: {
    title: messages.failToDeleteTitle,
    description: messages.failToDeleteWhenOfflineDescription,
    type: 'error'
  },
  [FLAG_ID.CANNOT_EDIT_WHEN_OFFLINE]: {
    title: messages.failToEditTitle,
    description: messages.failToEditWhenOfflineDescription,
    type: 'error'
  },
  [FLAG_ID.CANNOT_CREATE_WHEN_OFFLINE]: {
    title: messages.failToCreateTitle,
    description: messages.failToCreateWhenOfflineDescription,
    type: 'error'
  },
  [FLAG_ID.FAIL_TO_DELETE]: {
    title: messages.cannotDeleteTitle,
    description: messages.cannotDeleteDescription,
    type: 'error'
  },
  [FLAG_ID.SYNC_BLOCK_COPIED]: {
    title: messages.syncBlockCopiedTitle,
    type: 'info'
  },
  [FLAG_ID.UNPUBLISHED_SYNC_BLOCK_PASTED]: {
    title: messages.unpublishedSyncBlockPastedTitle,
    description: messages.unpublishedSyncBlockPastedDescription,
    type: 'info'
  },
  [FLAG_ID.CANNOT_CREATE_SYNC_BLOCK]: {
    title: messages.cannotCreateSyncBlockTitle,
    description: messages.CannotCreateSyncBlockDescription,
    type: 'error'
  },
  [FLAG_ID.EXTENSION_IN_SYNC_BLOCK]: {
    title: messages.extensionInSyncBlockTitle,
    description: messages.extensionInSyncBlockDescription,
    type: 'error'
  },
  [FLAG_ID.INLINE_EXTENSION_IN_SYNC_BLOCK]: {
    title: messages.inlineExtensionInSyncBlockTitle,
    description: messages.inlineExtensionInSyncBlockDescription,
    type: 'error'
  },
  [FLAG_ID.DUPLICATE_SOURCE_SYNC_BLOCK]: {
    title: messages.duplicateSourceSyncBlockTitle,
    description: messages.duplicateSourceSyncBlockDescription,
    type: 'error'
  },
  [FLAG_ID.SYNC_BLOCK_FEEDBACK_PROMPT]: {
    title: messages.feedbackFlagTitle,
    description: messages.feedbackFlagDescription,
    type: 'feedback'
  }
};
export const getSyncBlockCopiedDescription = (activeFlag, isCopiedDescriptionEnabled) => {
  if (!activeFlag || activeFlag.id !== FLAG_ID.SYNC_BLOCK_COPIED || !isCopiedDescriptionEnabled) {
    return undefined;
  }
  if (activeFlag.sourceProduct === 'jira-work-item') {
    return activeFlag.isSourceContentUnpublished ? messages.syncBlockCopiedJiraUnsavedFieldDescription : messages.syncBlockCopiedLivePageDescription;
  }
  if (activeFlag.sourceProduct !== 'confluence-page') {
    return undefined;
  }
  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,
  onGiveFeedback
}) => {
  const {
    activeFlag,
    mode,
    syncBlockStore
  } = useSharedPluginStateWithSelector(api, ['syncedBlock', 'connectivity'], states => {
    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,
      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;
    }
    try {
      const promptShownResult = onFeedbackPromptShown();
      void Promise.resolve(promptShownResult).catch(() => {});
    } catch {
      // Prompt persistence is optional product UI.
    }
  }, [isFeedbackPromptVisible, onFeedbackPromptShown]);
  if (!activeFlag) {
    return;
  }
  const {
    title: defaultTitle,
    description: defaultDescription,
    action,
    type
  } = flagMap[activeFlag.id];
  const {
    onRetry,
    onDismissed: onDismissedCallback
  } = activeFlag;
  const isCopiedFlag = activeFlag.id === FLAG_ID.SYNC_BLOCK_COPIED;
  const isCopiedDescriptionEnabled = isCopiedFlag && (isExperimentEnabled('platform_editor_blocks_patch_11') || activeFlag.sourceProduct === 'confluence-page');
  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) {
    api === null || api === void 0 ? void 0 : api.core.actions.execute(({
      tr
    }) => {
      tr.setMeta(syncedBlockPluginKey, {
        activeFlag: false
      });
      return tr;
    });
    return;
  }
  const dismissFlag = shouldFocusEditor => {
    api === null || api === void 0 ? void 0 : api.core.actions.execute(({
      tr
    }) => {
      onDismissedCallback === null || onDismissedCallback === void 0 ? void 0 : onDismissedCallback(tr);
      const oldMeta = tr.getMeta(syncedBlockPluginKey);
      tr.setMeta(syncedBlockPluginKey, {
        ...oldMeta,
        activeFlag: false
      });
      return tr;
    });
    if (shouldFocusEditor) {
      api === null || api === void 0 ? void 0 : api.core.actions.focus();
    }
  };
  const onDismissed = () => dismissFlag(true);
  const typeToActions = () => {
    if (type === 'error') {
      if (onRetry) {
        return [{
          content: formatMessage(messages.deleteRetryButton),
          onClick: onRetry
        }];
      }
    } else if (type === 'info' && action) {
      return [{
        content: formatMessage(action),
        href: SYNCED_BLOCKS_DOCUMENTATION_URL,
        target: '_blank',
        rel: 'noopener noreferrer'
      }];
    } else if (type === 'feedback' && activeFlag.id === FLAG_ID.SYNC_BLOCK_FEEDBACK_PROMPT && activeFlag.feedbackContext) {
      const feedbackContext = activeFlag.feedbackContext;
      return [{
        content: formatMessage(messages.feedbackFlagGiveFeedback),
        onClick: () => {
          dismissFlag(false);
          try {
            const feedbackResult = onGiveFeedback === null || onGiveFeedback === void 0 ? void 0 : onGiveFeedback(feedbackContext);
            void Promise.resolve(feedbackResult).catch(() => {});
          } catch {
            // Feedback collectors are optional product UI.
          }
        }
      }, {
        content: formatMessage(messages.feedbackFlagNoThanks),
        onClick: onDismissed
      }];
    }
    return undefined;
  };
  const FlagComponent = type === 'info' ? AutoDismissFlag : AkFlag;
  const flag = /*#__PURE__*/React.createElement(FlagComponent, {
    onDismissed: onDismissed,
    title: formatMessage(title),
    description: descriptionContent,
    id: activeFlag.id,
    testId: activeFlag.id,
    icon: typeToIcon(type),
    actions: typeToActions()
  });
  return /*#__PURE__*/React.createElement(FlagGroup, null, type === 'feedback' ? /*#__PURE__*/React.createElement("div", {
    id: activeFlag.id,
    className: ax(["_btc7grf3"])
  }, flag) : flag);
};
const typeToIcon = type => {
  if (type === 'error') {
    return /*#__PURE__*/React.createElement(StatusWarningIcon, {
      label: "",
      color: "var(--ds-icon-warning, #E06C00)"
    });
  }
  if (type === 'feedback') {
    return /*#__PURE__*/React.createElement(MegaphoneIcon, {
      label: "",
      spacing: "spacious",
      color: "var(--ds-icon, #292A2E)"
    });
  }
  return /*#__PURE__*/React.createElement(StatusSuccessIcon, {
    label: "",
    color: "var(--ds-icon-success, #6A9A23)"
  });
};