@atlaskit/editor-plugin-synced-block
Version:
SyncedBlock plugin for @atlaskit/editor-core
228 lines (226 loc) • 8.63 kB
JavaScript
/* Flag.tsx generated by @compiled/babel-plugin v2.0.0 */
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 AkFlag, { AutoDismissFlag, FlagGroup } from '@atlaskit/flag';
import MegaphoneIcon from '@atlaskit/icon/core/megaphone';
import StatusSuccessIcon from '@atlaskit/icon/core/status-success';
import StatusWarningIcon from '@atlaskit/icon/core/status-warning';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
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, isSyncBlockActivationEnabled) => {
if (!activeFlag || activeFlag.id !== FLAG_ID.SYNC_BLOCK_COPIED || activeFlag.sourceProduct !== 'confluence-page' || !isSyncBlockActivationEnabled) {
return undefined;
}
return activeFlag.isLivePage || !activeFlag.isSourceContentUnpublished ? messages.syncBlockCopiedLivePageDescription : messages.syncBlockCopiedUnpublishedDescription;
};
export const Flag = ({
api,
onFeedbackPromptShown,
onGiveFeedback
}) => {
const {
activeFlag,
mode
} = useSharedPluginStateWithSelector(api, ['syncedBlock', 'connectivity'], states => {
var _states$syncedBlockSt, _states$connectivityS;
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
};
});
const {
formatMessage
} = useIntl();
const isFeedbackPromptVisible = activeFlag && activeFlag.id === FLAG_ID.SYNC_BLOCK_FEEDBACK_PROMPT;
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;
// For the unpublished-paste flag, swap to the Jira-flavoured copy when the source
// is a Jira work item. Other flags don't currently vary by product.
const isJiraUnpublishedPaste = activeFlag.id === FLAG_ID.UNPUBLISHED_SYNC_BLOCK_PASTED && activeFlag.sourceProduct === 'jira-work-item';
const copiedDescription = getSyncBlockCopiedDescription(activeFlag, activeFlag.id === FLAG_ID.SYNC_BLOCK_COPIED && expValEquals('platform_editor_sync_block_activation', 'isEnabled', true));
const title = isJiraUnpublishedPaste ? messages.unpublishedSyncBlockPastedTitleJiraWorkItem : defaultTitle;
const description = copiedDescription !== null && copiedDescription !== void 0 ? copiedDescription : isJiraUnpublishedPaste ? messages.unpublishedSyncBlockPastedDescriptionJiraWorkItem : defaultDescription;
// 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: description ? formatMessage(description) : undefined,
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)"
});
};