@atlaskit/editor-plugin-synced-block
Version:
SyncedBlock plugin for @atlaskit/editor-core
775 lines (767 loc) • 33 kB
JavaScript
/* SyncedLocationDropdown.tsx generated by @compiled/babel-plugin v2.0.0 */
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "./SyncedLocationDropdown.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import _regeneratorRuntime from "@babel/runtime/regenerator";
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; }
import { useCallback, useEffect, useMemo, useState } from 'react';
import { cx } from '@compiled/react';
import { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
import { SYNCED_BLOCKS_DOCUMENTATION_URL } from '@atlaskit/editor-common/sync-block';
import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
import { ArrowKeyNavigationType, DropdownContainer } from '@atlaskit/editor-common/ui-menu';
import { getPageIdAndTypeFromConfluencePageAri } from '@atlaskit/editor-synced-block-provider';
import { IconTile } from '@atlaskit/icon';
// eslint-disable-next-line import/order -- CI requires icon-lab imports before core icon imports.
import PageLiveDocIcon from '@atlaskit/icon-lab/core/page-live-doc';
import BugIcon from '@atlaskit/icon/core/bug';
import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
import EpicIcon from '@atlaskit/icon/core/epic';
import PageIcon from '@atlaskit/icon/core/page';
import QuotationMarkIcon from '@atlaskit/icon/core/quotation-mark';
import StatusErrorIcon from '@atlaskit/icon/core/status-error';
import StoryIcon from '@atlaskit/icon/core/story';
import SubtaskIcon from '@atlaskit/icon/core/subtasks';
import TaskIcon from '@atlaskit/icon/core/task';
import { ConfluenceIcon, JiraIcon, AtlassianIcon } from '@atlaskit/logo';
import Lozenge from '@atlaskit/lozenge';
import { Box, Text, Inline, Anchor, Stack } from '@atlaskit/primitives/compiled';
import Spinner from '@atlaskit/spinner';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
import Tooltip from '@atlaskit/tooltip';
import { SYNCED_BLOCK_BUTTON_TEST_ID } from '../types';
import { SyncedLocationsEmptyStateIllustration } from './assets/SyncedLocationsEmptyStateIllustration';
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 SYNCED_LOCATIONS_DROPDOWN_TEST_ID = 'synced-block-synced-locations-dropdown';
var styles = {
title: "_1reo15vq _18m915vq _syazazsu _1bto1l2s _o5721q9c",
note: "_syaz1rpy _o5721q9c",
lozenge: "_ahbq12x7 _1ul91wqb",
noResultsContainer: "_1bsbo8uj _y3gn1h6o",
activationDropdownContent: "_1rjcze3t _1bsb1kdj",
activationNoResultsContainer: "_vchhusvi _1bsb1kdj _ca0q1ejb _n3td1ejb",
activationNoResultsContent: "_195g1wug _1bsb12aa _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(Inline, null, /*#__PURE__*/React.createElement(Box, {
as: "span",
xcss: styles.title
}, title), onSameDocument && /*#__PURE__*/React.createElement(Box, {
as: "span",
xcss: styles.note
}, "\xA0-", ' ', formatMessage(productType === 'confluence-page' ? messages.syncedLocationDropdownTitleNoteForConfluencePage : messages.syncedLocationDropdownTitleNoteForJiraWorkItem)), isSource && /*#__PURE__*/React.createElement(Box, {
as: "span",
xcss: styles.lozenge
}, /*#__PURE__*/React.createElement(Lozenge, null, formatMessage(messages.syncedLocationDropdownSourceLozenge))), !hasAccess && /*#__PURE__*/React.createElement(Box, {
as: "span",
xcss: styles.requestAccess
}, formatMessage(messages.syncedLocationDropdownRequestAccess)));
};
var productIconMap = {
'confluence-page': ConfluenceIcon,
'jira-work-item': JiraIcon
};
var subTypeIconMap = {
live: PageLiveDocIcon,
page: PageIcon
};
var getConfluenceSubTypeIcon = function getConfluenceSubTypeIcon(sourceAri, subType) {
try {
var _getPageIdAndTypeFrom = getPageIdAndTypeFromConfluencePageAri({
ari: sourceAri
}),
pageType = _getPageIdAndTypeFrom.type;
if (pageType === 'blogpost') {
return QuotationMarkIcon;
} else {
return subType && subType in subTypeIconMap ? subTypeIconMap[subType] : PageIcon;
}
} catch (_unused) {
return PageIcon;
}
};
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 : AtlassianIcon : AtlassianIcon;
return /*#__PURE__*/React.createElement("span", {
className: ax(["_2rkol0p1 _bfhki8nm _1bsbgktf _4t3igktf _1e0c1txw _4cvr1h6o _1bah1h6o"])
}, /*#__PURE__*/React.createElement(ProductIcon, {
size: "xxsmall",
appearance: "neutral"
}));
};
// Map AGG issue-type names to ADS icons. The mapping is by the English `name` returned
// from AGG because Jira's REST/GraphQL API does not localise it at this layer. Custom
// (non-default) issue types fall through to the AGG `iconUrl`.
//
// Type the icons as the same shape as `TaskIcon` so we don't import `NewCoreIconProps`
// from a private icon entrypoint.
var jiraIssueTypeIconMap = {
Task: {
icon: TaskIcon,
messageKey: 'syncedLocationDropdownIssueTypeTask'
},
Bug: {
icon: BugIcon,
messageKey: 'syncedLocationDropdownIssueTypeBug'
},
Story: {
icon: StoryIcon,
messageKey: 'syncedLocationDropdownIssueTypeStory'
},
Epic: {
icon: EpicIcon,
messageKey: 'syncedLocationDropdownIssueTypeEpic'
},
Subtask: {
icon: SubtaskIcon,
messageKey: 'syncedLocationDropdownIssueTypeSubtask'
},
'Sub-task': {
icon: SubtaskIcon,
messageKey: 'syncedLocationDropdownIssueTypeSubtask'
}
};
/**
* Creates an icon component from a custom Jira issue-type `iconUrl` that conforms to the
* ADS icon component contract expected by `IconTile`. This lets us reuse `IconTile` for
* custom issue types — ensuring consistent sizing, background, and border-radius with the
* standard ADS icons used for known issue types (Bug, Story, etc.).
*
* The returned component ignores ADS icon props (color, spacing, etc.) because the image
* is an external raster/SVG asset that doesn't respond to design tokens.
*/
var customIconCache = new Map();
var createCustomIssueTypeIcon = function createCustomIssueTypeIcon(iconUrl) {
var cached = customIconCache.get(iconUrl);
if (cached) {
return cached;
}
var CustomIssueTypeIcon = function CustomIssueTypeIcon() {
return /*#__PURE__*/React.createElement("img", {
src: iconUrl,
alt: "",
width: "12",
height: "12"
});
};
CustomIssueTypeIcon.displayName = 'CustomIssueTypeIcon';
customIconCache.set(iconUrl, CustomIssueTypeIcon);
return CustomIssueTypeIcon;
};
/**
* Returns the icon to render for a Jira issue type, or `null` when neither an ADS icon
* mapping nor an AGG-provided `iconUrl` is available so the caller can fall back to a
* generic product icon.
*
* Implemented as a plain function (not a React component) so the `null` check actually
* narrows — a JSX expression always evaluates to a truthy `ReactElement` object,
* meaning callers cannot distinguish a "would render nothing" component from one that
* renders an icon.
*/
var renderJiraIssueTypeIcon = function renderJiraIssueTypeIcon(issueType, intl) {
var mapped = jiraIssueTypeIconMap[issueType.name];
if (mapped) {
var label = intl.formatMessage(messages[mapped.messageKey]);
return /*#__PURE__*/React.createElement(IconTile, {
icon: mapped.icon,
label: label,
appearance: 'gray',
size: "xsmall"
});
}
// Custom Jira issue types — render inside `IconTile` using a wrapper component so the
// icon gets the same tile background, border-radius, and sizing as known issue types.
if (issueType.iconUrl) {
var CustomIcon = createCustomIssueTypeIcon(issueType.iconUrl);
var _label = intl.formatMessage(messages.syncedLocationDropdownIssueTypeGeneric);
return /*#__PURE__*/React.createElement(IconTile, {
icon: CustomIcon,
label: _label,
appearance: 'gray',
size: "xsmall"
});
}
return null;
};
var ItemIcon = function ItemIcon(_ref3) {
var reference = _ref3.reference,
intl = _ref3.intl;
var hasAccess = reference.hasAccess,
subType = reference.subType,
productType = reference.productType,
sourceAri = reference.sourceAri,
issueType = reference.issueType;
if (productType === 'confluence-page' && hasAccess) {
return /*#__PURE__*/React.createElement(IconTile, {
icon: getConfluenceSubTypeIcon(sourceAri, subType),
label: "",
appearance: 'gray',
size: "xsmall"
});
}
// Render a Jira issue-type icon when we have one.
// Falls through to the generic product icon when:
// - we don't have access (issueType is not surfaced for no-access references),
// - AGG returned no `issueType` (partial index, deleted, etc.), or
// - the issue type is unrecognised AND has no `iconUrl`.
if (productType === 'jira-work-item' && hasAccess && issueType) {
var icon = renderJiraIssueTypeIcon(issueType, intl);
if (icon !== null) {
return icon;
}
}
// Generic product fallback for `jira-work-item` (and any future product).
return /*#__PURE__*/React.createElement(ProductIcon, {
product: productType
});
};
export var 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 ? formatMessage(messages.syncedLocationDropdownUntitledPage) : reference.title, ": ").concat(formatMessage(messages.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;
};
export var SyncedLocationDropdown = function SyncedLocationDropdown(_ref4) {
var syncBlockStore = _ref4.syncBlockStore,
resourceId = _ref4.resourceId,
intl = _ref4.intl,
isSource = _ref4.isSource,
localId = _ref4.localId,
api = _ref4.api,
floatingToolbarRenderContext = _ref4.floatingToolbarRenderContext;
return /*#__PURE__*/React.createElement(EditorPositionedSyncedLocationDropdown, {
syncBlockStore: syncBlockStore,
resourceId: resourceId,
intl: intl,
isSource: isSource,
localId: localId,
api: api,
floatingToolbarRenderContext: floatingToolbarRenderContext
});
};
var EditorPositionedSyncedLocationDropdown = function EditorPositionedSyncedLocationDropdown(_ref5) {
var syncBlockStore = _ref5.syncBlockStore,
resourceId = _ref5.resourceId,
intl = _ref5.intl,
isSource = _ref5.isSource,
localId = _ref5.localId,
api = _ref5.api,
floatingToolbarRenderContext = _ref5.floatingToolbarRenderContext;
var triggerTitle = intl.formatMessage(messages.syncedLocationDropdownTitle);
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
isOpen = _useState2[0],
setIsOpen = _useState2[1];
var content = isOpen ? /*#__PURE__*/React.createElement(DropdownContent, {
syncBlockStore: syncBlockStore,
resourceId: resourceId,
intl: intl,
isSource: isSource,
localId: localId,
api: api
}) : null;
var toggleOpen = useCallback(function () {
setIsOpen(function (currentIsOpen) {
return !currentIsOpen;
});
}, []);
var closeDropdown = useCallback(function () {
setIsOpen(false);
}, []);
var setDisableParentScroll = floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.setDisableParentScroll;
useEffect(function () {
if (!isOpen) {
return;
}
setDisableParentScroll === null || setDisableParentScroll === void 0 || setDisableParentScroll(true);
return function () {
setDisableParentScroll === null || setDisableParentScroll === void 0 || setDisableParentScroll(false);
};
}, [isOpen, setDisableParentScroll]);
var trigger = useMemo(function () {
return /*#__PURE__*/React.createElement(Button, {
areAnyNewToolbarFlagsEnabled: true,
testId: SYNCED_BLOCK_BUTTON_TEST_ID.syncedBlockToolbarSyncedLocationsTrigger,
selected: isOpen,
iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {
color: "currentColor",
spacing: "spacious",
label: "",
size: "small"
}),
onClick: toggleOpen,
ariaHasPopup: true
}, triggerTitle);
}, [isOpen, toggleOpen, triggerTitle]);
return /*#__PURE__*/React.createElement(DropdownContainer, {
testId: SYNCED_LOCATIONS_DROPDOWN_TEST_ID,
isOpen: isOpen,
trigger: trigger,
handleClickOutside: closeDropdown,
handleEscapeKeydown: closeDropdown,
mountTo: floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.popupsMountPoint,
boundariesElement: floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.popupsBoundariesElement,
scrollableElement: floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.popupsScrollableElement
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
arrowKeyNavigationProviderOptions: {
type: ArrowKeyNavigationType.MENU
}
}, content);
};
export var SyncedLocationDropdownWithCount = function SyncedLocationDropdownWithCount(_ref6) {
var syncBlockStore = _ref6.syncBlockStore,
resourceId = _ref6.resourceId,
intl = _ref6.intl,
isSource = _ref6.isSource,
localId = _ref6.localId,
api = _ref6.api,
floatingToolbarRenderContext = _ref6.floatingToolbarRenderContext;
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
isOpen = _useState4[0],
setIsOpen = _useState4[1];
var _useReferenceData = useReferenceData({
intl: intl,
isSource: isSource,
localId: localId,
resourceId: resourceId,
syncBlockStore: syncBlockStore
}),
fetchStatus = _useReferenceData.fetchStatus,
referenceData = _useReferenceData.referenceData;
var referenceCount = useMemo(function () {
return referenceData.filter(function (_ref7) {
var isSourceItem = _ref7.isSource;
return !isSourceItem;
}).length;
}, [referenceData]);
var tooltipContent = !isOpen && fetchStatus === 'success' && referenceCount === 0 ? intl.formatMessage(messages.syncedLocationDropdownNoReferencesTooltip) : null;
var content = isOpen ? /*#__PURE__*/React.createElement(DropdownContentWithReferenceData, {
resourceId: resourceId,
intl: intl,
api: api,
fetchStatus: fetchStatus,
referenceData: referenceData
}) : null;
var toggleOpen = useCallback(function () {
setIsOpen(function (currentIsOpen) {
return !currentIsOpen;
});
}, []);
var closeDropdown = useCallback(function () {
setIsOpen(false);
}, []);
var setDisableParentScroll = floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.setDisableParentScroll;
useEffect(function () {
if (!isOpen) {
return;
}
setDisableParentScroll === null || setDisableParentScroll === void 0 || setDisableParentScroll(true);
return function () {
setDisableParentScroll === null || setDisableParentScroll === void 0 || setDisableParentScroll(false);
};
}, [isOpen, setDisableParentScroll]);
var trigger = useMemo(function () {
return /*#__PURE__*/React.createElement(Button, {
areAnyNewToolbarFlagsEnabled: true,
testId: SYNCED_BLOCK_BUTTON_TEST_ID.syncedBlockToolbarSyncedLocationsTrigger,
selected: isOpen,
iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {
color: "currentColor",
spacing: "spacious",
label: "",
size: "small"
}),
onClick: toggleOpen,
ariaHasPopup: true,
tooltipContent: tooltipContent !== null && tooltipContent !== void 0 ? tooltipContent : undefined
}, /*#__PURE__*/React.createElement(SyncedLocationTriggerContent, {
intl: intl,
fetchStatus: fetchStatus,
referenceCount: referenceCount
}));
}, [fetchStatus, intl, isOpen, referenceCount, toggleOpen, tooltipContent]);
return /*#__PURE__*/React.createElement(DropdownContainer, {
alignDropdownWithParentElement: true,
alignX: "left",
testId: SYNCED_LOCATIONS_DROPDOWN_TEST_ID,
isOpen: isOpen,
trigger: trigger,
handleClickOutside: closeDropdown,
handleEscapeKeydown: closeDropdown,
mountTo: floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.popupsMountPoint,
boundariesElement: floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.popupsBoundariesElement,
scrollableElement: floatingToolbarRenderContext === null || floatingToolbarRenderContext === void 0 ? void 0 : floatingToolbarRenderContext.popupsScrollableElement
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
arrowKeyNavigationProviderOptions: {
type: ArrowKeyNavigationType.MENU
}
}, content);
};
var DropdownContent = function DropdownContent(_ref8) {
var syncBlockStore = _ref8.syncBlockStore,
resourceId = _ref8.resourceId,
intl = _ref8.intl,
isSource = _ref8.isSource,
localId = _ref8.localId,
api = _ref8.api;
var _useState5 = useState('none'),
_useState6 = _slicedToArray(_useState5, 2),
fetchStatus = _useState6[0],
setFetchStatus = _useState6[1];
var _useState7 = useState([]),
_useState8 = _slicedToArray(_useState7, 2),
referenceData = _useState8[0],
setReferenceData = _useState8[1];
useEffect(function () {
setFetchStatus('loading');
var getReferenceData = /*#__PURE__*/function () {
var _ref9 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
var response;
return _regeneratorRuntime.wrap(function (_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_context.next = 1;
return syncBlockStore.fetchReferencesSourceInfo(resourceId, localId, isSource);
case 1:
response = _context.sent;
if (!response.error) {
_context.next = 2;
break;
}
setFetchStatus('error');
return _context.abrupt("return");
case 2:
setReferenceData(processReferenceData(response.references, intl));
setFetchStatus('success');
case 3:
case "end":
return _context.stop();
}
}, _callee);
}));
return function getReferenceData() {
return _ref9.apply(this, arguments);
};
}();
void getReferenceData();
}, [syncBlockStore, intl, isSource, localId, resourceId]);
return /*#__PURE__*/React.createElement(DropdownContentWithReferenceData, {
resourceId: resourceId,
intl: intl,
api: api,
fetchStatus: fetchStatus,
referenceData: referenceData
});
};
var useReferenceData = function useReferenceData(_ref0) {
var syncBlockStore = _ref0.syncBlockStore,
resourceId = _ref0.resourceId,
intl = _ref0.intl,
isSource = _ref0.isSource,
localId = _ref0.localId;
var _useState9 = useState(function () {
return isSource && syncBlockStore.sourceManager.isNewSourceBlock(resourceId);
}),
_useState0 = _slicedToArray(_useState9, 1),
isNewSourceBlock = _useState0[0];
var _useState1 = useState(function () {
return {
fetchStatus: isNewSourceBlock ? 'success' : 'loading',
referenceData: []
};
}),
_useState10 = _slicedToArray(_useState1, 2),
state = _useState10[0],
setState = _useState10[1];
useEffect(function () {
var isCurrentRequest = true;
setState({
fetchStatus: isNewSourceBlock ? 'success' : 'loading',
referenceData: []
});
var getReferenceData = /*#__PURE__*/function () {
var _ref1 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
var response;
return _regeneratorRuntime.wrap(function (_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
_context2.next = 1;
return syncBlockStore.fetchReferencesSourceInfo(resourceId, localId, isSource);
case 1:
response = _context2.sent;
if (isCurrentRequest) {
_context2.next = 2;
break;
}
return _context2.abrupt("return");
case 2:
if (isNewSourceBlock) {
syncBlockStore.sourceManager.clearNewSourceBlock(resourceId);
}
if (!response.error) {
_context2.next = 3;
break;
}
setState({
fetchStatus: 'error',
referenceData: []
});
return _context2.abrupt("return");
case 3:
setState({
fetchStatus: 'success',
referenceData: processReferenceData(response.references, intl)
});
case 4:
case "end":
return _context2.stop();
}
}, _callee2);
}));
return function getReferenceData() {
return _ref1.apply(this, arguments);
};
}();
void getReferenceData();
return function () {
isCurrentRequest = false;
};
}, [syncBlockStore, resourceId, intl, isSource, localId, isNewSourceBlock]);
return {
fetchStatus: state.fetchStatus,
referenceData: state.referenceData
};
};
var SyncedLocationTriggerContent = function SyncedLocationTriggerContent(_ref10) {
var intl = _ref10.intl,
fetchStatus = _ref10.fetchStatus,
referenceCount = _ref10.referenceCount;
var formatMessage = intl.formatMessage;
var triggerTitle = formatMessage(messages.syncedLocationDropdownTitle);
var syncedLocationCount = referenceCount === 0 ? 0 : referenceCount + 1;
switch (fetchStatus) {
case 'loading':
return /*#__PURE__*/React.createElement(Inline, {
alignBlock: "center",
space: "space.050"
}, triggerTitle, /*#__PURE__*/React.createElement(Spinner, {
size: "small",
label: formatMessage(messages.syncedLocationDropdownLoading)
}));
case 'success':
{
var count = syncedLocationCount > 99 ? '99+' : intl.formatNumber(syncedLocationCount);
return formatMessage(messages.syncedLocationDropdownTitleWithCount, {
count: count
});
}
case 'none':
case 'error':
return triggerTitle;
}
};
var DropdownContentWithReferenceData = function DropdownContentWithReferenceData(_ref11) {
var resourceId = _ref11.resourceId,
intl = _ref11.intl,
api = _ref11.api,
fetchStatus = _ref11.fetchStatus,
referenceData = _ref11.referenceData;
var formatMessage = intl.formatMessage;
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: EVENT_TYPE.OPERATIONAL,
action: ACTION.CLICKED,
actionSubject: ACTION_SUBJECT.SYNCED_BLOCK,
actionSubjectId: ACTION_SUBJECT_ID.SYNCED_BLOCK_CLICK_SYNCED_LOCATION,
attributes: {
resourceId: resourceId
}
});
};
var content = function content() {
switch (fetchStatus) {
case 'loading':
return /*#__PURE__*/React.createElement(LoadingScreen, {
formatMessage: formatMessage
});
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: ax([styles.contentContainer, "_ku9g126e _18bk1rpy"])
}, /*#__PURE__*/React.createElement(DropdownItemGroup, {
title: formatMessage(messages.syncedLocationDropdownHeading, {
count: "".concat(referenceData.length > 99 ? '99+' : referenceData.length)
})
}, referenceData.map(function (reference) {
var title = reference.title === '' && reference.hasAccess ? formatMessage(messages.syncedLocationDropdownUntitledPage) : reference.title || reference.url || '';
return /*#__PURE__*/React.createElement("div", {
key: reference.title,
className: ax(["_2ll012x7"])
}, /*#__PURE__*/React.createElement(Tooltip, {
content: title
}, /*#__PURE__*/React.createElement(DropdownItem, {
elemBefore: /*#__PURE__*/React.createElement(ItemIcon, {
reference: reference,
intl: intl
}),
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(Box, {
xcss: cx(styles.dropdownContent, expValEqualsNoExposure('platform_editor_sync_block_activation', 'isEnabled', true) && fetchStatus === 'success' && referenceData.length === 0 && styles.activationDropdownContent, shouldApplyMinHeight(fetchStatus, referenceData.length) && styles.containerWithMinHeight)
}, content());
};
var LoadingScreen = function LoadingScreen(_ref12) {
var formatMessage = _ref12.formatMessage;
return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Spinner, {
label: formatMessage(messages.syncedLocationDropdownLoading)
}));
};
var ErrorScreen = function ErrorScreen(_ref13) {
var formatMessage = _ref13.formatMessage;
return /*#__PURE__*/React.createElement(Box, {
xcss: styles.errorContainer,
testId: "synced-locations-dropdown-content-error"
}, /*#__PURE__*/React.createElement(Box, {
xcss: styles.errorIcon
}, /*#__PURE__*/React.createElement(StatusErrorIcon, {
color: "var(--ds-icon-danger, #C9372C)",
spacing: "spacious",
label: "",
size: "small"
})), /*#__PURE__*/React.createElement(Text, {
as: "p",
size: "medium"
}, formatMessage(messages.syncedLocationDropdownError)));
};
var NoResultScreen = function NoResultScreen(_ref14) {
var formatMessage = _ref14.formatMessage;
return expValEquals('platform_editor_sync_block_activation', 'isEnabled', true) ? /*#__PURE__*/React.createElement(Box, {
xcss: styles.activationNoResultsContainer,
testId: "synced-locations-dropdown-content-no-results"
}, /*#__PURE__*/React.createElement(Stack, {
alignInline: "center",
xcss: styles.activationNoResultsContent,
space: "space.150"
}, /*#__PURE__*/React.createElement(SyncedLocationsEmptyStateIllustration, null), /*#__PURE__*/React.createElement(Text, {
as: "p"
}, formatMessage(messages.syncedLocationDropdownActivationNoResults)), /*#__PURE__*/React.createElement(Text, {
as: "p"
}, /*#__PURE__*/React.createElement(Anchor, {
href: SYNCED_BLOCKS_DOCUMENTATION_URL,
target: "_blank",
rel: "noopener noreferrer",
xcss: styles.learnMoreLink
}, formatMessage(messages.syncedLocationDropdownLearnMoreLink))))) : /*#__PURE__*/React.createElement(Stack, {
xcss: styles.noResultsContainer,
space: "space.100",
testId: "synced-locations-dropdown-content-no-results"
}, /*#__PURE__*/React.createElement(Text, {
as: "p"
}, formatMessage(messages.syncedLocationDropdownNoResults)), /*#__PURE__*/React.createElement(Text, {
as: "p"
}, /*#__PURE__*/React.createElement(Anchor, {
href: SYNCED_BLOCKS_DOCUMENTATION_URL,
target: "_blank",
rel: "noopener noreferrer",
xcss: styles.learnMoreLink
}, formatMessage(messages.syncedLocationDropdownLearnMoreLink))));
};