@atlaskit/editor-plugin-synced-block
Version:
SyncedBlock plugin for @atlaskit/editor-core
390 lines (387 loc) • 19.4 kB
JavaScript
/* SyncedLocationDropdown.tsx generated by @compiled/babel-plugin v0.39.1 */
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.processReferenceData = exports.SyncedLocationDropdown = void 0;
require("./SyncedLocationDropdown.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react2 = require("@compiled/react");
var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
var _analytics = require("@atlaskit/editor-common/analytics");
var _messages = require("@atlaskit/editor-common/messages");
var _syncBlock = require("@atlaskit/editor-common/sync-block");
var _ui = require("@atlaskit/editor-common/ui");
var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
var _icon = require("@atlaskit/icon");
var _pageLiveDoc = _interopRequireDefault(require("@atlaskit/icon-lab/core/page-live-doc"));
var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
var _page = _interopRequireDefault(require("@atlaskit/icon/core/page"));
var _quotationMark = _interopRequireDefault(require("@atlaskit/icon/core/quotation-mark"));
var _statusError = _interopRequireDefault(require("@atlaskit/icon/core/status-error"));
var _logo = require("@atlaskit/logo");
var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _compiled = require("@atlaskit/primitives/compiled");
var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
var _excluded = ["triggerRef"];
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 _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
var fadeIn = null;
var headingStyles = null;
var dropdownItemStyles = null;
// logo icon does not fit in ADS IconTile, hence we need custom styles to match with other icons
var logoTileStyles = null;
var styles = {
title: "_1reo15vq _18m915vq _syazazsu _1bto1l2s _o5721q9c",
note: "_syaz1rpy _o5721q9c",
lozenge: "_ahbq12x7 _1ul91wqb",
noResultsContainer: "_1bsbo8uj _y3gn1h6o",
dropdownContent: "_1rjcv77o _1bsbsmdz _c71lko4j _1e0c1txw _1bah1h6o _4cvr1h6o",
containerWithMinHeight: "_1tkeqkoa",
contentContainer: "_y44vfmxe _1bsb1osq _1wpz1fhb _18m91wug",
errorContainer: "_1bsbo8uj _1e0c1txw",
errorIcon: "_1mour5cr",
learnMoreLink: "_4bfu1r31 _1hmsglyw _ajmmnqa1",
requestAccess: "_1bsb19n7 _o5721q9c _ahbq12x7 _syaz1rpy"
};
var shouldApplyMinHeight = function shouldApplyMinHeight(fetchStatus, itemCount) {
// When there are 1/2 items, dropdown height is less than minHeight 144px
return !(fetchStatus === 'success' && itemCount > 0);
};
var ItemTitle = function ItemTitle(_ref) {
var title = _ref.title,
formatMessage = _ref.formatMessage,
onSameDocument = _ref.onSameDocument,
isSource = _ref.isSource,
hasAccess = _ref.hasAccess,
productType = _ref.productType;
return /*#__PURE__*/React.createElement(_compiled.Inline, null, /*#__PURE__*/React.createElement(_compiled.Box, {
as: "span",
xcss: styles.title
}, title), onSameDocument && /*#__PURE__*/React.createElement(_compiled.Box, {
as: "span",
xcss: styles.note
}, "\xA0-", ' ', formatMessage(productType === 'confluence-page' ? _messages.syncBlockMessages.syncedLocationDropdownTitleNoteForConfluencePage : _messages.syncBlockMessages.syncedLocationDropdownTitleNoteForJiraWorkItem)), isSource && /*#__PURE__*/React.createElement(_compiled.Box, {
as: "span",
xcss: styles.lozenge
}, /*#__PURE__*/React.createElement(_lozenge.default, null, formatMessage(_messages.syncBlockMessages.syncedLocationDropdownSourceLozenge))), !hasAccess && /*#__PURE__*/React.createElement(_compiled.Box, {
as: "span",
xcss: styles.requestAccess
}, formatMessage(_messages.syncBlockMessages.syncedLocationDropdownRequestAccess)));
};
var productIconMap = {
'confluence-page': _logo.ConfluenceIcon,
'jira-work-item': _logo.JiraIcon
};
var subTypeIconMap = {
live: _pageLiveDoc.default,
page: _page.default
};
var getConfluenceSubTypeIcon = function getConfluenceSubTypeIcon(sourceAri, subType) {
try {
var _getPageIdAndTypeFrom = (0, _editorSyncedBlockProvider.getPageIdAndTypeFromConfluencePageAri)({
ari: sourceAri
}),
pageType = _getPageIdAndTypeFrom.type;
if (pageType === 'blogpost') {
return _quotationMark.default;
} else {
return subType && subType in subTypeIconMap ? subTypeIconMap[subType] : _page.default;
}
} catch (_unused) {
return _page.default;
}
};
var ProductIcon = function ProductIcon(_ref2) {
var _productIconMap$produ;
var product = _ref2.product;
var ProductIcon = product ? (_productIconMap$produ = productIconMap[product]) !== null && _productIconMap$produ !== void 0 ? _productIconMap$produ : _logo.AtlassianIcon : _logo.AtlassianIcon;
return /*#__PURE__*/React.createElement("span", {
className: (0, _runtime.ax)(["_2rkol0p1 _bfhki8nm _1bsbgktf _4t3igktf _1e0c1txw _4cvr1h6o _1bah1h6o"])
}, /*#__PURE__*/React.createElement(ProductIcon, {
size: "xxsmall",
appearance: "neutral"
}));
};
var ItemIcon = function ItemIcon(_ref3) {
var reference = _ref3.reference;
var hasAccess = reference.hasAccess,
subType = reference.subType,
productType = reference.productType,
sourceAri = reference.sourceAri;
if (productType === 'confluence-page' && hasAccess) {
return /*#__PURE__*/React.createElement(_icon.IconTile, {
icon: getConfluenceSubTypeIcon(sourceAri, subType),
label: "",
appearance: 'gray',
size: "xsmall"
});
}
// For `jira-work-item` (and any future product), we fall back to the generic product logo icon.
// Jira issues don't have an equivalent page/blog subtype concept, so no rich IconTile is shown.
// Future enhancement: if Jira issue type icons are needed, add an `issueType` field to
// `SyncBlockSourceInfo` and fetch it in `fetchJiraWorkItemInfo` via the GraphQL query.
return /*#__PURE__*/React.createElement(ProductIcon, {
product: productType
});
};
var processReferenceData = exports.processReferenceData = function processReferenceData(referenceData, intl) {
var formatMessage = intl.formatMessage;
var sourceInfoMap = new Map();
referenceData === null || referenceData === void 0 || referenceData.forEach(function (reference) {
if (!reference) {
return;
}
if (sourceInfoMap.has(reference.sourceAri)) {
var _sourceInfoMap$get;
(_sourceInfoMap$get = sourceInfoMap.get(reference.sourceAri)) === null || _sourceInfoMap$get === void 0 || _sourceInfoMap$get.push(reference);
} else {
sourceInfoMap.set(reference.sourceAri, [reference]);
}
});
var _iterator = _createForOfIteratorHelper(sourceInfoMap.values()),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var references = _step.value;
if (references.length > 1) {
references.forEach(function (reference, index) {
return reference.title = "".concat(reference.title === '' && reference.hasAccess && (0, _platformFeatureFlags.fg)('platform_synced_block_patch_8') ? formatMessage(_messages.syncBlockMessages.syncedLocationDropdownUntitledPage) : reference.title, ": ").concat(formatMessage(_messages.syncBlockMessages.syncedLocationDropdownTitleBlockIndex, {
index: index + 1
}));
});
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
var sortedReferences = Array.from(sourceInfoMap.values()).flat().sort(function (a, b) {
if (a.isSource !== b.isSource) {
return b.isSource ? 1 : -1;
}
if (a.hasAccess !== b.hasAccess) {
return a.hasAccess ? -1 : 1;
}
return (a.title || '').localeCompare(b.title || '');
});
return sortedReferences;
};
var SyncedLocationDropdown = exports.SyncedLocationDropdown = function SyncedLocationDropdown(_ref4) {
var syncBlockStore = _ref4.syncBlockStore,
resourceId = _ref4.resourceId,
intl = _ref4.intl,
isSource = _ref4.isSource,
localId = _ref4.localId,
api = _ref4.api;
var formatMessage = intl.formatMessage;
var triggerTitle = formatMessage(_messages.syncBlockMessages.syncedLocationDropdownTitle);
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
isOpen = _useState2[0],
setIsOpen = _useState2[1];
return /*#__PURE__*/React.createElement(_dropdownMenu.default, {
isOpen: isOpen
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onOpenChange: function onOpenChange(_ref5) {
var isOpen = _ref5.isOpen;
return setIsOpen(isOpen);
},
testId: "synced-block-synced-locations-dropdown"
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
trigger: function trigger(_ref6) {
var triggerRef = _ref6.triggerRef,
triggerProps = (0, _objectWithoutProperties2.default)(_ref6, _excluded);
return /*#__PURE__*/React.createElement(_ui.FloatingToolbarButton, (0, _extends2.default)({
ref: triggerRef,
areAnyNewToolbarFlagsEnabled: true,
selected: isOpen,
iconAfter: /*#__PURE__*/React.createElement(_chevronDown.default, {
color: "currentColor",
spacing: "spacious",
label: "",
size: "small"
})
// eslint-disable-next-line react/jsx-props-no-spreading
}, triggerProps), triggerTitle);
}
}, isOpen && /*#__PURE__*/React.createElement(DropdownContent, {
syncBlockStore: syncBlockStore,
resourceId: resourceId,
intl: intl,
isSource: isSource,
localId: localId,
api: api
}));
};
var DropdownContent = function DropdownContent(_ref7) {
var syncBlockStore = _ref7.syncBlockStore,
resourceId = _ref7.resourceId,
intl = _ref7.intl,
isSource = _ref7.isSource,
localId = _ref7.localId,
api = _ref7.api;
var formatMessage = intl.formatMessage;
var _useState3 = (0, _react.useState)('none'),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
fetchStatus = _useState4[0],
setFetchStatus = _useState4[1];
var _useState5 = (0, _react.useState)([]),
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
referenceData = _useState6[0],
setReferenceData = _useState6[1];
(0, _react.useEffect)(function () {
setFetchStatus('loading');
var getReferenceData = /*#__PURE__*/function () {
var _ref8 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
var response;
return _regenerator.default.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return syncBlockStore.fetchReferencesSourceInfo(resourceId, localId, isSource);
case 2:
response = _context.sent;
if (!response.error) {
_context.next = 6;
break;
}
setFetchStatus('error');
return _context.abrupt("return");
case 6:
setReferenceData(processReferenceData(response.references, intl));
setFetchStatus('success');
case 8:
case "end":
return _context.stop();
}
}, _callee);
}));
return function getReferenceData() {
return _ref8.apply(this, arguments);
};
}();
getReferenceData();
}, [syncBlockStore, intl, isSource, localId, resourceId]);
var handleLocationClick = function handleLocationClick() {
var _api$analytics;
api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || _api$analytics.fireAnalyticsEvent({
eventType: _analytics.EVENT_TYPE.OPERATIONAL,
action: _analytics.ACTION.CLICKED,
actionSubject: _analytics.ACTION_SUBJECT.SYNCED_BLOCK,
actionSubjectId: _analytics.ACTION_SUBJECT_ID.SYNCED_BLOCK_CLICK_SYNCED_LOCATION,
attributes: {
resourceId: resourceId
}
});
};
var content = function content() {
switch (fetchStatus) {
case 'loading':
return /*#__PURE__*/React.createElement(LoadingScreen, null);
case 'error':
return /*#__PURE__*/React.createElement(ErrorScreen, {
formatMessage: formatMessage
});
case 'success':
if (referenceData.length > 0) {
return /*#__PURE__*/React.createElement("div", {
"data-testid": "synced-locations-dropdown-content",
className: (0, _runtime.ax)([styles.contentContainer, "_ku9g126e _18bk1rpy"])
}, /*#__PURE__*/React.createElement(_dropdownMenu.DropdownItemGroup, {
title: formatMessage(_messages.syncBlockMessages.syncedLocationDropdownHeading, {
count: "".concat(referenceData.length > 99 ? '99+' : referenceData.length)
})
}, referenceData.map(function (reference) {
var title = reference.title === '' && reference.hasAccess && (0, _platformFeatureFlags.fg)('platform_synced_block_patch_8') ? formatMessage(_messages.syncBlockMessages.syncedLocationDropdownUntitledPage) : reference.title || reference.url || '';
return /*#__PURE__*/React.createElement("div", {
key: reference.title,
className: (0, _runtime.ax)(["_2ll012x7"])
}, /*#__PURE__*/React.createElement(_tooltip.default, {
content: title
}, /*#__PURE__*/React.createElement(_dropdownMenu.DropdownItem, {
elemBefore: /*#__PURE__*/React.createElement(ItemIcon, {
reference: reference
}),
href: reference.url,
target: "_blank",
key: reference.title,
rel: "noopener noreferrer"
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onClick: function onClick() {
return handleLocationClick();
}
}, /*#__PURE__*/React.createElement(ItemTitle, {
title: title,
formatMessage: formatMessage,
onSameDocument: reference.onSameDocument,
isSource: reference.isSource,
hasAccess: reference.hasAccess,
productType: reference.productType
}))));
})));
} else {
return /*#__PURE__*/React.createElement(NoResultScreen, {
formatMessage: formatMessage
});
}
}
};
return /*#__PURE__*/React.createElement(_compiled.Box, {
xcss: (0, _react2.cx)(styles.dropdownContent, shouldApplyMinHeight(fetchStatus, referenceData.length) && styles.containerWithMinHeight)
}, content());
};
var LoadingScreen = function LoadingScreen() {
return /*#__PURE__*/React.createElement(_compiled.Box, null, /*#__PURE__*/React.createElement(_spinner.default, null));
};
var ErrorScreen = function ErrorScreen(_ref9) {
var formatMessage = _ref9.formatMessage;
return /*#__PURE__*/React.createElement(_compiled.Box, {
xcss: styles.errorContainer,
testId: "synced-locations-dropdown-content-error"
}, /*#__PURE__*/React.createElement(_compiled.Box, {
xcss: styles.errorIcon
}, /*#__PURE__*/React.createElement(_statusError.default, {
color: "var(--ds-icon-danger, #C9372C)",
spacing: "spacious",
label: "",
size: "small"
})), /*#__PURE__*/React.createElement(_compiled.Text, {
as: "p",
size: "medium"
}, formatMessage(_messages.syncBlockMessages.syncedLocationDropdownError)));
};
var NoResultScreen = function NoResultScreen(_ref0) {
var formatMessage = _ref0.formatMessage;
return /*#__PURE__*/React.createElement(_compiled.Stack, {
xcss: styles.noResultsContainer,
space: "space.100",
testId: "synced-locations-dropdown-content-no-results"
}, /*#__PURE__*/React.createElement(_compiled.Text, {
as: "p"
}, formatMessage(_messages.syncBlockMessages.syncedLocationDropdownNoResults)), /*#__PURE__*/React.createElement(_compiled.Text, {
as: "p"
}, /*#__PURE__*/React.createElement(_compiled.Anchor, {
href: _syncBlock.SYNCED_BLOCKS_DOCUMENTATION_URL,
target: "_blank",
rel: "noopener noreferrer",
xcss: styles.learnMoreLink
}, formatMessage(_messages.syncBlockMessages.syncedLocationDropdownLearnMoreLink))));
};