@atlaskit/editor-plugin-synced-block
Version:
SyncedBlock plugin for @atlaskit/editor-core
222 lines (219 loc) • 12.1 kB
JavaScript
/* Flag.tsx generated by @compiled/babel-plugin v2.0.0 */
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getSyncBlockCopiedDescription = exports.Flag = void 0;
require("./Flag.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _reactIntl = require("react-intl");
var _hooks = require("@atlaskit/editor-common/hooks");
var _messages = require("@atlaskit/editor-common/messages");
var _syncBlock = require("@atlaskit/editor-common/sync-block");
var _editorPluginConnectivity = require("@atlaskit/editor-plugin-connectivity");
var _flag = _interopRequireWildcard(require("@atlaskit/flag"));
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 _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _main = require("../pm-plugins/main");
var _types = require("../types");
var _flagMap;
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); }
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 feedbackFlagStyles = null;
var flagMap = (_flagMap = {}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_flagMap, _types.FLAG_ID.CANNOT_DELETE_WHEN_OFFLINE, {
title: _messages.syncBlockMessages.failToDeleteTitle,
description: _messages.syncBlockMessages.failToDeleteWhenOfflineDescription,
type: 'error'
}), _types.FLAG_ID.CANNOT_EDIT_WHEN_OFFLINE, {
title: _messages.syncBlockMessages.failToEditTitle,
description: _messages.syncBlockMessages.failToEditWhenOfflineDescription,
type: 'error'
}), _types.FLAG_ID.CANNOT_CREATE_WHEN_OFFLINE, {
title: _messages.syncBlockMessages.failToCreateTitle,
description: _messages.syncBlockMessages.failToCreateWhenOfflineDescription,
type: 'error'
}), _types.FLAG_ID.FAIL_TO_DELETE, {
title: _messages.syncBlockMessages.cannotDeleteTitle,
description: _messages.syncBlockMessages.cannotDeleteDescription,
type: 'error'
}), _types.FLAG_ID.SYNC_BLOCK_COPIED, {
title: _messages.syncBlockMessages.syncBlockCopiedTitle,
type: 'info'
}), _types.FLAG_ID.UNPUBLISHED_SYNC_BLOCK_PASTED, {
title: _messages.syncBlockMessages.unpublishedSyncBlockPastedTitle,
description: _messages.syncBlockMessages.unpublishedSyncBlockPastedDescription,
type: 'info'
}), _types.FLAG_ID.CANNOT_CREATE_SYNC_BLOCK, {
title: _messages.syncBlockMessages.cannotCreateSyncBlockTitle,
description: _messages.syncBlockMessages.CannotCreateSyncBlockDescription,
type: 'error'
}), _types.FLAG_ID.EXTENSION_IN_SYNC_BLOCK, {
title: _messages.syncBlockMessages.extensionInSyncBlockTitle,
description: _messages.syncBlockMessages.extensionInSyncBlockDescription,
type: 'error'
}), _types.FLAG_ID.INLINE_EXTENSION_IN_SYNC_BLOCK, {
title: _messages.syncBlockMessages.inlineExtensionInSyncBlockTitle,
description: _messages.syncBlockMessages.inlineExtensionInSyncBlockDescription,
type: 'error'
}), _types.FLAG_ID.DUPLICATE_SOURCE_SYNC_BLOCK, {
title: _messages.syncBlockMessages.duplicateSourceSyncBlockTitle,
description: _messages.syncBlockMessages.duplicateSourceSyncBlockDescription,
type: 'error'
}), (0, _defineProperty2.default)(_flagMap, _types.FLAG_ID.SYNC_BLOCK_FEEDBACK_PROMPT, {
title: _messages.syncBlockMessages.feedbackFlagTitle,
description: _messages.syncBlockMessages.feedbackFlagDescription,
type: 'feedback'
}));
var getSyncBlockCopiedDescription = exports.getSyncBlockCopiedDescription = function getSyncBlockCopiedDescription(activeFlag, isSyncBlockActivationEnabled) {
if (!activeFlag || activeFlag.id !== _types.FLAG_ID.SYNC_BLOCK_COPIED || activeFlag.sourceProduct !== 'confluence-page' || !isSyncBlockActivationEnabled) {
return undefined;
}
return activeFlag.isLivePage || !activeFlag.isSourceContentUnpublished ? _messages.syncBlockMessages.syncBlockCopiedLivePageDescription : _messages.syncBlockMessages.syncBlockCopiedUnpublishedDescription;
};
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;
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
};
}),
activeFlag = _useSharedPluginState.activeFlag,
mode = _useSharedPluginState.mode;
var _useIntl = (0, _reactIntl.useIntl)(),
formatMessage = _useIntl.formatMessage;
var isFeedbackPromptVisible = activeFlag && activeFlag.id === _types.FLAG_ID.SYNC_BLOCK_FEEDBACK_PROMPT;
_react.default.useEffect(function () {
if (!isFeedbackPromptVisible || !onFeedbackPromptShown) {
return;
}
try {
var promptShownResult = onFeedbackPromptShown();
void Promise.resolve(promptShownResult).catch(function () {});
} catch (_unused) {
// Prompt persistence is optional product UI.
}
}, [isFeedbackPromptVisible, onFeedbackPromptShown]);
if (!activeFlag) {
return;
}
var _flagMap$activeFlag$i = flagMap[activeFlag.id],
defaultTitle = _flagMap$activeFlag$i.title,
defaultDescription = _flagMap$activeFlag$i.description,
action = _flagMap$activeFlag$i.action,
type = _flagMap$activeFlag$i.type;
var onRetry = activeFlag.onRetry,
onDismissedCallback = activeFlag.onDismissed;
// 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.
var isJiraUnpublishedPaste = activeFlag.id === _types.FLAG_ID.UNPUBLISHED_SYNC_BLOCK_PASTED && activeFlag.sourceProduct === 'jira-work-item';
var copiedDescription = getSyncBlockCopiedDescription(activeFlag, activeFlag.id === _types.FLAG_ID.SYNC_BLOCK_COPIED && (0, _expValEquals.expValEquals)('platform_editor_sync_block_activation', 'isEnabled', true));
var title = isJiraUnpublishedPaste ? _messages.syncBlockMessages.unpublishedSyncBlockPastedTitleJiraWorkItem : defaultTitle;
var description = copiedDescription !== null && copiedDescription !== void 0 ? copiedDescription : isJiraUnpublishedPaste ? _messages.syncBlockMessages.unpublishedSyncBlockPastedDescriptionJiraWorkItem : defaultDescription;
// Retry button often involves network request, hence we dismiss the flag in offline mode to avoid retry
if ((0, _editorPluginConnectivity.isOfflineMode)(mode) && !!onRetry) {
api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
var tr = _ref2.tr;
tr.setMeta(_main.syncedBlockPluginKey, {
activeFlag: false
});
return tr;
});
return;
}
var dismissFlag = function dismissFlag(shouldFocusEditor) {
api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
var tr = _ref3.tr;
onDismissedCallback === null || onDismissedCallback === void 0 || onDismissedCallback(tr);
var oldMeta = tr.getMeta(_main.syncedBlockPluginKey);
tr.setMeta(_main.syncedBlockPluginKey, _objectSpread(_objectSpread({}, oldMeta), {}, {
activeFlag: false
}));
return tr;
});
if (shouldFocusEditor) {
api === null || api === void 0 || api.core.actions.focus();
}
};
var onDismissed = function onDismissed() {
return dismissFlag(true);
};
var typeToActions = function typeToActions() {
if (type === 'error') {
if (onRetry) {
return [{
content: formatMessage(_messages.syncBlockMessages.deleteRetryButton),
onClick: onRetry
}];
}
} else if (type === 'info' && action) {
return [{
content: formatMessage(action),
href: _syncBlock.SYNCED_BLOCKS_DOCUMENTATION_URL,
target: '_blank',
rel: 'noopener noreferrer'
}];
} else if (type === 'feedback' && activeFlag.id === _types.FLAG_ID.SYNC_BLOCK_FEEDBACK_PROMPT && activeFlag.feedbackContext) {
var feedbackContext = activeFlag.feedbackContext;
return [{
content: formatMessage(_messages.syncBlockMessages.feedbackFlagGiveFeedback),
onClick: function onClick() {
dismissFlag(false);
try {
var feedbackResult = onGiveFeedback === null || onGiveFeedback === void 0 ? void 0 : onGiveFeedback(feedbackContext);
void Promise.resolve(feedbackResult).catch(function () {});
} catch (_unused2) {
// Feedback collectors are optional product UI.
}
}
}, {
content: formatMessage(_messages.syncBlockMessages.feedbackFlagNoThanks),
onClick: onDismissed
}];
}
return undefined;
};
var FlagComponent = type === 'info' ? _flag.AutoDismissFlag : _flag.default;
var flag = /*#__PURE__*/_react.default.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.default.createElement(_flag.FlagGroup, null, type === 'feedback' ? /*#__PURE__*/_react.default.createElement("div", {
id: activeFlag.id,
className: (0, _runtime.ax)(["_btc7grf3"])
}, flag) : flag);
};
var typeToIcon = function typeToIcon(type) {
if (type === 'error') {
return /*#__PURE__*/_react.default.createElement(_statusWarning.default, {
label: "",
color: "var(--ds-icon-warning, #E06C00)"
});
}
if (type === 'feedback') {
return /*#__PURE__*/_react.default.createElement(_megaphone.default, {
label: "",
spacing: "spacious",
color: "var(--ds-icon, #292A2E)"
});
}
return /*#__PURE__*/_react.default.createElement(_statusSuccess.default, {
label: "",
color: "var(--ds-icon-success, #6A9A23)"
});
};