@atlaskit/editor-plugin-synced-block 17.0.8 → 17.0.9

package/dist/es2019/ui/SyncedLocationDropdown.js

@@ -2,7 +2,7 @@
 import "./SyncedLocationDropdown.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import { cx } from '@compiled/react';
 import DropdownItem from '@atlaskit/dropdown-menu/dropdown-menu-item';
 import DropdownItemGroup from '@atlaskit/dropdown-menu/dropdown-menu-item-group';
@@ -27,6 +27,7 @@ import IconTile from '@atlaskit/icon/icon-tile';
 import { ConfluenceIcon, JiraIcon } from '@atlaskit/logo';
 import { AtlassianIcon } from '@atlaskit/logo/atlassian-icon';
 import Lozenge from '@atlaskit/lozenge/lozenge';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { Box, Text, Inline, Anchor, Stack } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner/spinner';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -49,6 +50,8 @@ const styles = {
   activationDropdownContent: "_1rjcze3t _1bsb1kdj",
   activationNoResultsContainer: "_vchhusvi _1bsb1kdj _ca0q1ejb _n3td1ejb",
   activationNoResultsContent: "_195g1wug _1bsb12aa _y3gn1h6o",
+  fieldAwareDropdownContent: "_1bsb1kdj",
+  fieldSecondLine: "_1reo15vq _18m915vq _o5721q9c _1bto1l2s",
   dropdownContent: "_1rjcv77o _1bsbsmdz _c71lko4j _1e0c1txw _1bah1h6o _4cvr1h6o",
   containerWithMinHeight: "_1tkeqkoa",
   contentContainer: "_y44vfmxe _1bsb1osq _1wpz1fhb _18m91wug",
@@ -57,6 +60,19 @@ const styles = {
   learnMoreLink: "_4bfu1r31 _1hmsglyw _ajmmnqa1",
   requestAccess: "_1bsb19n7 _o5721q9c _ahbq12x7 _syaz1rpy"
 };
+
+/**
+ * One field-aware dropdown row. Every string the row shows is composed here from the untouched
+ * provider `reference`. Only built with `editor_synced_blocks_jira_custom_rich_text` on.
+ */
+
+/** Decided once per fetch. The control shape is what the dropdown held before the experiment. */
+
+const EMPTY_LOCATIONS = {
+  kind: 'control',
+  references: []
+};
+const countLocations = locations => locations.kind === 'control' ? locations.references.length : locations.items.length;
 const shouldApplyMinHeight = (fetchStatus, itemCount) => {
   // When there are 1/2 items, dropdown height is less than minHeight 144px
   return !(fetchStatus === 'success' && itemCount > 0);
@@ -287,6 +303,97 @@ export const processReferenceData = (referenceData, intl) => {
   });
   return sortedReferences;
 };
+const isFieldAwareLocationList = references => {
+  var _references$some;
+  return ((_references$some = references === null || references === void 0 ? void 0 : references.some(reference => (reference === null || reference === void 0 ? void 0 : reference.productType) === 'jira-work-item')) !== null && _references$some !== void 0 ? _references$some : false) && isExperimentEnabled('editor_synced_blocks_jira_custom_rich_text');
+};
+const groupBySourceAri = referenceData => {
+  const groups = new Map();
+  referenceData === null || referenceData === void 0 ? void 0 : referenceData.forEach(reference => {
+    if (!reference) {
+      return;
+    }
+    const group = groups.get(reference.sourceAri);
+    if (group) {
+      group.push(reference);
+    } else {
+      groups.set(reference.sourceAri, [reference]);
+    }
+  });
+  return groups;
+};
+
+/** Sources first, then accessible locations. `0` leaves the title order to the caller. */
+const compareLocationOrder = (a, b) => {
+  if (a.isSource !== b.isSource) {
+    return b.isSource ? 1 : -1;
+  }
+  if (a.hasAccess !== b.hasAccess) {
+    return a.hasAccess ? -1 : 1;
+  }
+  return 0;
+};
+
+/** The title alone. The field name is placed by the row and the tooltip, not baked in here. */
+const getBaseTitle = ({
+  blockIndex,
+  formatMessage,
+  reference
+}) => {
+  const title = reference.title === '' && reference.hasAccess ? formatMessage(messages.syncedLocationDropdownUntitledPage) : reference.title || reference.url || '';
+  return blockIndex === undefined ? title : `${title}: ${formatMessage(messages.syncedLocationDropdownTitleBlockIndex, {
+    index: blockIndex
+  })}`;
+};
+
+/** Jira rows are noted from `locationScope`; other rows keep the pre-experiment `onSameDocument` note. */
+const getFieldAwareNote = (reference, formatMessage) => {
+  var _reference$locationSc;
+  if (reference.productType !== 'jira-work-item') {
+    if (!reference.onSameDocument) {
+      return undefined;
+    }
+    return formatMessage(reference.productType === 'confluence-page' ? messages.syncedLocationDropdownTitleNoteForConfluencePage : messages.syncedLocationDropdownTitleNoteForJiraWorkItem);
+  }
+
+  // A provider that computes no scope still reports `onSameDocument`. It is the same host
+  // comparison `getLocationScope` starts with, and in Jira the host document is one field.
+  const locationScope = (_reference$locationSc = reference.locationScope) !== null && _reference$locationSc !== void 0 ? _reference$locationSc : reference.onSameDocument ? 'same-document' : undefined;
+  switch (locationScope) {
+    case 'same-document':
+      return formatMessage(messages.syncedLocationDropdownTitleNoteForJiraWorkItemField);
+    case 'same-parent-document':
+      return formatMessage(messages.syncedLocationDropdownTitleNoteForJiraWorkItem);
+    default:
+      return undefined;
+  }
+};
+export const buildFieldAwareItems = (referenceData, formatMessage) => Array.from(groupBySourceAri(referenceData).values()).flatMap(group => group.map((reference, index) => {
+  const fieldName = reference.productType === 'jira-work-item' ? reference.fieldName : undefined;
+  const note = getFieldAwareNote(reference, formatMessage);
+  return {
+    baseTitle: getBaseTitle({
+      blockIndex: group.length > 1 ? index + 1 : undefined,
+      formatMessage,
+      reference
+    }),
+    ...(fieldName !== undefined && {
+      fieldName
+    }),
+    key: `${reference.sourceAri}#${index}`,
+    ...(note !== undefined && {
+      note
+    }),
+    reference
+  };
+})).sort((a, b) => compareLocationOrder(a.reference, b.reference) || a.baseTitle.localeCompare(b.baseTitle));
+const toSyncedLocations = (references, intl) => isFieldAwareLocationList(references) ? {
+  kind: 'field-aware',
+  items: buildFieldAwareItems(references, intl.formatMessage)
+} : {
+  kind: 'control',
+  references: processReferenceData(references, intl)
+};
 export const SyncedLocationDropdown = ({
   syncBlockStore,
   resourceId,
@@ -382,7 +489,7 @@ export const SyncedLocationDropdownWithCount = ({
   const [isOpen, setIsOpen] = useState(false);
   const {
     fetchStatus,
-    referenceData
+    locations
   } = useReferenceData({
     intl,
     isSource,
@@ -390,16 +497,25 @@ export const SyncedLocationDropdownWithCount = ({
     resourceId,
     syncBlockStore
   });
-  const referenceCount = useMemo(() => referenceData.filter(({
-    isSource: isSourceItem
-  }) => !isSourceItem).length, [referenceData]);
+  const referenceCount = useMemo(() => {
+    switch (locations.kind) {
+      case 'control':
+        return locations.references.filter(({
+          isSource: isSourceItem
+        }) => !isSourceItem).length;
+      case 'field-aware':
+        return locations.items.filter(({
+          reference
+        }) => !reference.isSource).length;
+    }
+  }, [locations]);
   const tooltipContent = !isOpen && fetchStatus === 'success' && referenceCount === 0 ? intl.formatMessage(messages.syncedLocationDropdownNoReferencesTooltip) : null;
   const content = isOpen ? /*#__PURE__*/React.createElement(DropdownContentWithReferenceData, {
     resourceId: resourceId,
     intl: intl,
     api: api,
     fetchStatus: fetchStatus,
-    referenceData: referenceData
+    locations: locations
   }) : null;
   const toggleOpen = useCallback(() => {
     setIsOpen(currentIsOpen => !currentIsOpen);
@@ -462,7 +578,7 @@ const DropdownContent = ({
   api
 }) => {
   const [fetchStatus, setFetchStatus] = useState('none');
-  const [referenceData, setReferenceData] = useState([]);
+  const [locations, setLocations] = useState(EMPTY_LOCATIONS);
   useEffect(() => {
     setFetchStatus('loading');
     const getReferenceData = async () => {
@@ -471,7 +587,7 @@ const DropdownContent = ({
         setFetchStatus('error');
         return;
       }
-      setReferenceData(processReferenceData(response.references, intl));
+      setLocations(toSyncedLocations(response.references, intl));
       setFetchStatus('success');
     };
     void getReferenceData();
@@ -481,7 +597,7 @@ const DropdownContent = ({
     intl: intl,
     api: api,
     fetchStatus: fetchStatus,
-    referenceData: referenceData
+    locations: locations
   });
 };
 const useReferenceData = ({
@@ -494,13 +610,13 @@ const useReferenceData = ({
   const [isNewSourceBlock] = useState(() => isSource && syncBlockStore.sourceManager.isNewSourceBlock(resourceId));
   const [state, setState] = useState(() => ({
     fetchStatus: isNewSourceBlock ? 'success' : 'loading',
-    referenceData: []
+    locations: EMPTY_LOCATIONS
   }));
   useEffect(() => {
     let isCurrentRequest = true;
     setState({
       fetchStatus: isNewSourceBlock ? 'success' : 'loading',
-      referenceData: []
+      locations: EMPTY_LOCATIONS
     });
     const getReferenceData = async () => {
       const response = await syncBlockStore.fetchReferencesSourceInfo(resourceId, localId, isSource);
@@ -513,13 +629,13 @@ const useReferenceData = ({
       if (response.error) {
         setState({
           fetchStatus: 'error',
-          referenceData: []
+          locations: EMPTY_LOCATIONS
         });
         return;
       }
       setState({
         fetchStatus: 'success',
-        referenceData: processReferenceData(response.references, intl)
+        locations: toSyncedLocations(response.references, intl)
       });
     };
     void getReferenceData();
@@ -529,7 +645,7 @@ const useReferenceData = ({
   }, [syncBlockStore, resourceId, intl, isSource, localId, isNewSourceBlock]);
   return {
     fetchStatus: state.fetchStatus,
-    referenceData: state.referenceData
+    locations: state.locations
   };
 };
 const SyncedLocationTriggerContent = ({
@@ -568,11 +684,12 @@ const DropdownContentWithReferenceData = ({
   intl,
   api,
   fetchStatus,
-  referenceData
+  locations
 }) => {
   const {
     formatMessage
   } = intl;
+  const locationCount = countLocations(locations);
   const handleLocationClick = () => {
     var _api$analytics, _api$analytics$action;
     api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : _api$analytics$action.fireAnalyticsEvent({
@@ -596,41 +713,22 @@ const DropdownContentWithReferenceData = ({
           formatMessage: formatMessage
         });
       case 'success':
-        if (referenceData.length > 0) {
+        if (locationCount > 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: `${referenceData.length > 99 ? '99+' : referenceData.length}`
+              count: `${locationCount > 99 ? '99+' : locationCount}`
             })
-          }, referenceData.map(reference => {
-            const 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: () => handleLocationClick()
-            }, /*#__PURE__*/React.createElement(ItemTitle, {
-              title: title,
-              formatMessage: formatMessage,
-              onSameDocument: reference.onSameDocument,
-              isSource: reference.isSource,
-              hasAccess: reference.hasAccess,
-              productType: reference.productType
-            }))));
+          }, locations.kind === 'field-aware' ? /*#__PURE__*/React.createElement(FieldAwareLocationRows, {
+            items: locations.items,
+            intl: intl,
+            handleLocationClick: handleLocationClick
+          }) : /*#__PURE__*/React.createElement(ControlLocationRows, {
+            referenceData: locations.references,
+            intl: intl,
+            handleLocationClick: handleLocationClick
           })));
         } else {
           return /*#__PURE__*/React.createElement(NoResultScreen, {
@@ -640,9 +738,121 @@ const DropdownContentWithReferenceData = ({
     }
   };
   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)
+    xcss: cx(styles.dropdownContent,
+    // Read off the discriminant rather than the experiment, so the control cohort
+    // cannot reach this width and no second exposure is fired for a style.
+    locations.kind === 'field-aware' && styles.fieldAwareDropdownContent, expValEqualsNoExposure('platform_editor_sync_block_activation', 'isEnabled', true) && fetchStatus === 'success' && locationCount === 0 && styles.activationDropdownContent, shouldApplyMinHeight(fetchStatus, locationCount) && styles.containerWithMinHeight)
   }, content());
 };
+// The pre-experiment rows. This block is master's, moved into a component; remove with the experiment.
+const ControlLocationRows = ({
+  referenceData,
+  intl,
+  handleLocationClick
+}) => {
+  const {
+    formatMessage
+  } = intl;
+  return /*#__PURE__*/React.createElement(Fragment, null, referenceData.map(reference => {
+    const 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: () => handleLocationClick()
+    }, /*#__PURE__*/React.createElement(ItemTitle, {
+      title: title,
+      formatMessage: formatMessage,
+      onSameDocument: reference.onSameDocument,
+      isSource: reference.isSource,
+      hasAccess: reference.hasAccess,
+      productType: reference.productType
+    }))));
+  }));
+};
+const FieldAwareItemTitle = ({
+  item: {
+    baseTitle,
+    fieldName,
+    note,
+    reference
+  },
+  formatMessage
+}) => {
+  const titleLine = /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.title
+  }, baseTitle), note && /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.note
+  }, "\xA0- ", note), reference.isSource && /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.lozenge
+  }, /*#__PURE__*/React.createElement(Lozenge, null, formatMessage(messages.syncedLocationDropdownSourceLozenge))), !reference.hasAccess && /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.requestAccess
+  }, formatMessage(messages.syncedLocationDropdownRequestAccess)));
+  if (fieldName === undefined) {
+    return titleLine;
+  }
+
+  // AGG localises the field name, so it is shown as given rather than wrapped in a message.
+  return /*#__PURE__*/React.createElement(Stack, null, titleLine, /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.fieldSecondLine
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: "small",
+    color: "color.text.subtlest"
+  }, fieldName)));
+};
+const FieldAwareLocationRows = ({
+  items,
+  intl,
+  handleLocationClick
+}) => {
+  const {
+    formatMessage
+  } = intl;
+  return /*#__PURE__*/React.createElement(Fragment, null, items.map(item => /*#__PURE__*/React.createElement("div", {
+    key: item.key,
+    className: ax(["_2ll012x7"])
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    content: item.fieldName ?
+    /*#__PURE__*/
+    // Two lines in the tooltip's own text flow. Wrapping them in `Text` would
+    // default to `font.body` and override the container's `font.body.small`,
+    // so the field-aware tooltip would not match every other one.
+    React.createElement(Fragment, null, item.baseTitle, /*#__PURE__*/React.createElement("br", null), formatMessage(messages.syncedLocationDropdownTooltipFieldName, {
+      fieldName: item.fieldName
+    })) : item.baseTitle
+  }, /*#__PURE__*/React.createElement(DropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(ItemIcon, {
+      reference: item.reference,
+      intl: intl
+    }),
+    href: item.reference.url,
+    target: "_blank",
+    rel: "noopener noreferrer"
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    ,
+    onClick: () => handleLocationClick()
+  }, /*#__PURE__*/React.createElement(FieldAwareItemTitle, {
+    item: item,
+    formatMessage: formatMessage
+  }))))));
+};
 const LoadingScreen = ({
   formatMessage
 }) => {