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

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 17.0.9
+
+### Patch Changes
+
+- [`ef5742162c47b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ef5742162c47b) -
+  EDITOR-9184: Make the synced locations dropdown field-aware for Jira work items, behind the
+  `editor_synced_blocks_jira_custom_rich_text` experiment. Each Jira location's title and tooltip
+  name the work item field holding the block, a location in the field being viewed reads "This work
+  item field" and one in another field of the same work item reads "This work item"; `editor-common`
+  gains the three `syncBlockMessages` descriptors this uses. With the experiment off the dropdown
+  renders as before.
+- Updated dependencies
+
 ## 17.0.8
 
 ### Patch Changes

package/dist/cjs/ui/SyncedLocationDropdown.js

@@ -6,7 +6,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.processReferenceData = exports.SyncedLocationDropdownWithCount = exports.SyncedLocationDropdown = void 0;
+exports.processReferenceData = exports.buildFieldAwareItems = exports.SyncedLocationDropdownWithCount = exports.SyncedLocationDropdown = void 0;
 require("./SyncedLocationDropdown.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
@@ -14,6 +14,7 @@ var _runtime = require("@compiled/react/runtime");
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react2 = require("@compiled/react");
 var _dropdownMenuItem = _interopRequireDefault(require("@atlaskit/dropdown-menu/dropdown-menu-item"));
 var _dropdownMenuItemGroup = _interopRequireDefault(require("@atlaskit/dropdown-menu/dropdown-menu-item-group"));
@@ -37,6 +38,7 @@ var _iconTile = _interopRequireDefault(require("@atlaskit/icon/icon-tile"));
 var _logo = require("@atlaskit/logo");
 var _atlassianIcon = require("@atlaskit/logo/atlassian-icon");
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge/lozenge"));
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner/spinner"));
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
@@ -45,6 +47,8 @@ var _Tooltip = _interopRequireDefault(require("@atlaskit/tooltip/Tooltip"));
 var _types = require("../types");
 var _SyncedLocationsEmptyStateIllustration = require("./assets/SyncedLocationsEmptyStateIllustration");
 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; }
 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; } // eslint-disable-next-line import/order -- CI requires icon-lab imports before core icon imports.
@@ -63,6 +67,8 @@ var 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",
@@ -71,6 +77,21 @@ var 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. */
+
+var EMPTY_LOCATIONS = {
+  kind: 'control',
+  references: []
+};
+var countLocations = function countLocations(locations) {
+  return locations.kind === 'control' ? locations.references.length : locations.items.length;
+};
 var shouldApplyMinHeight = function shouldApplyMinHeight(fetchStatus, itemCount) {
   // When there are 1/2 items, dropdown height is less than minHeight 144px
   return !(fetchStatus === 'success' && itemCount > 0);
@@ -306,14 +327,114 @@ var processReferenceData = exports.processReferenceData = function processRefere
   });
   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,
-    floatingToolbarRenderContext = _ref4.floatingToolbarRenderContext;
+var isFieldAwareLocationList = function isFieldAwareLocationList(references) {
+  var _references$some;
+  return ((_references$some = references === null || references === void 0 ? void 0 : references.some(function (reference) {
+    return (reference === null || reference === void 0 ? void 0 : reference.productType) === 'jira-work-item';
+  })) !== null && _references$some !== void 0 ? _references$some : false) && (0, _isExperimentEnabled.isExperimentEnabled)('editor_synced_blocks_jira_custom_rich_text');
+};
+var groupBySourceAri = function groupBySourceAri(referenceData) {
+  var groups = new Map();
+  referenceData === null || referenceData === void 0 || referenceData.forEach(function (reference) {
+    if (!reference) {
+      return;
+    }
+    var 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. */
+var compareLocationOrder = function 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. */
+var getBaseTitle = function getBaseTitle(_ref4) {
+  var blockIndex = _ref4.blockIndex,
+    formatMessage = _ref4.formatMessage,
+    reference = _ref4.reference;
+  var title = reference.title === '' && reference.hasAccess ? formatMessage(_messages.syncBlockMessages.syncedLocationDropdownUntitledPage) : reference.title || reference.url || '';
+  return blockIndex === undefined ? title : "".concat(title, ": ").concat(formatMessage(_messages.syncBlockMessages.syncedLocationDropdownTitleBlockIndex, {
+    index: blockIndex
+  }));
+};
+
+/** Jira rows are noted from `locationScope`; other rows keep the pre-experiment `onSameDocument` note. */
+var getFieldAwareNote = function getFieldAwareNote(reference, formatMessage) {
+  var _reference$locationSc;
+  if (reference.productType !== 'jira-work-item') {
+    if (!reference.onSameDocument) {
+      return undefined;
+    }
+    return formatMessage(reference.productType === 'confluence-page' ? _messages.syncBlockMessages.syncedLocationDropdownTitleNoteForConfluencePage : _messages.syncBlockMessages.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.
+  var 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.syncBlockMessages.syncedLocationDropdownTitleNoteForJiraWorkItemField);
+    case 'same-parent-document':
+      return formatMessage(_messages.syncBlockMessages.syncedLocationDropdownTitleNoteForJiraWorkItem);
+    default:
+      return undefined;
+  }
+};
+var buildFieldAwareItems = exports.buildFieldAwareItems = function buildFieldAwareItems(referenceData, formatMessage) {
+  return Array.from(groupBySourceAri(referenceData).values()).flatMap(function (group) {
+    return group.map(function (reference, index) {
+      var fieldName = reference.productType === 'jira-work-item' ? reference.fieldName : undefined;
+      var note = getFieldAwareNote(reference, formatMessage);
+      return _objectSpread(_objectSpread(_objectSpread({
+        baseTitle: getBaseTitle({
+          blockIndex: group.length > 1 ? index + 1 : undefined,
+          formatMessage: formatMessage,
+          reference: reference
+        })
+      }, fieldName !== undefined && {
+        fieldName: fieldName
+      }), {}, {
+        key: "".concat(reference.sourceAri, "#").concat(index)
+      }, note !== undefined && {
+        note: note
+      }), {}, {
+        reference: reference
+      });
+    });
+  }).sort(function (a, b) {
+    return compareLocationOrder(a.reference, b.reference) || a.baseTitle.localeCompare(b.baseTitle);
+  });
+};
+var toSyncedLocations = function toSyncedLocations(references, intl) {
+  return isFieldAwareLocationList(references) ? {
+    kind: 'field-aware',
+    items: buildFieldAwareItems(references, intl.formatMessage)
+  } : {
+    kind: 'control',
+    references: processReferenceData(references, intl)
+  };
+};
+var SyncedLocationDropdown = exports.SyncedLocationDropdown = function SyncedLocationDropdown(_ref5) {
+  var syncBlockStore = _ref5.syncBlockStore,
+    resourceId = _ref5.resourceId,
+    intl = _ref5.intl,
+    isSource = _ref5.isSource,
+    localId = _ref5.localId,
+    api = _ref5.api,
+    floatingToolbarRenderContext = _ref5.floatingToolbarRenderContext;
   return /*#__PURE__*/React.createElement(EditorPositionedSyncedLocationDropdown, {
     syncBlockStore: syncBlockStore,
     resourceId: resourceId,
@@ -324,14 +445,14 @@ var SyncedLocationDropdown = exports.SyncedLocationDropdown = function SyncedLoc
     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 EditorPositionedSyncedLocationDropdown = function EditorPositionedSyncedLocationDropdown(_ref6) {
+  var syncBlockStore = _ref6.syncBlockStore,
+    resourceId = _ref6.resourceId,
+    intl = _ref6.intl,
+    isSource = _ref6.isSource,
+    localId = _ref6.localId,
+    api = _ref6.api,
+    floatingToolbarRenderContext = _ref6.floatingToolbarRenderContext;
   var triggerTitle = intl.formatMessage(_messages.syncBlockMessages.syncedLocationDropdownTitle);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -394,14 +515,14 @@ var EditorPositionedSyncedLocationDropdown = function EditorPositionedSyncedLoca
     }
   }, content);
 };
-var SyncedLocationDropdownWithCount = exports.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 SyncedLocationDropdownWithCount = exports.SyncedLocationDropdownWithCount = function SyncedLocationDropdownWithCount(_ref7) {
+  var syncBlockStore = _ref7.syncBlockStore,
+    resourceId = _ref7.resourceId,
+    intl = _ref7.intl,
+    isSource = _ref7.isSource,
+    localId = _ref7.localId,
+    api = _ref7.api,
+    floatingToolbarRenderContext = _ref7.floatingToolbarRenderContext;
   var _useState3 = (0, _react.useState)(false),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     isOpen = _useState4[0],
@@ -414,20 +535,28 @@ var SyncedLocationDropdownWithCount = exports.SyncedLocationDropdownWithCount =
       syncBlockStore: syncBlockStore
     }),
     fetchStatus = _useReferenceData.fetchStatus,
-    referenceData = _useReferenceData.referenceData;
+    locations = _useReferenceData.locations;
   var referenceCount = (0, _react.useMemo)(function () {
-    return referenceData.filter(function (_ref7) {
-      var isSourceItem = _ref7.isSource;
-      return !isSourceItem;
-    }).length;
-  }, [referenceData]);
+    switch (locations.kind) {
+      case 'control':
+        return locations.references.filter(function (_ref8) {
+          var isSourceItem = _ref8.isSource;
+          return !isSourceItem;
+        }).length;
+      case 'field-aware':
+        return locations.items.filter(function (_ref9) {
+          var reference = _ref9.reference;
+          return !reference.isSource;
+        }).length;
+    }
+  }, [locations]);
   var tooltipContent = !isOpen && fetchStatus === 'success' && referenceCount === 0 ? intl.formatMessage(_messages.syncBlockMessages.syncedLocationDropdownNoReferencesTooltip) : null;
   var content = isOpen ? /*#__PURE__*/React.createElement(DropdownContentWithReferenceData, {
     resourceId: resourceId,
     intl: intl,
     api: api,
     fetchStatus: fetchStatus,
-    referenceData: referenceData
+    locations: locations
   }) : null;
   var toggleOpen = (0, _react.useCallback)(function () {
     setIsOpen(function (currentIsOpen) {
@@ -485,25 +614,25 @@ var SyncedLocationDropdownWithCount = exports.SyncedLocationDropdownWithCount =
     }
   }, 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 DropdownContent = function DropdownContent(_ref0) {
+  var syncBlockStore = _ref0.syncBlockStore,
+    resourceId = _ref0.resourceId,
+    intl = _ref0.intl,
+    isSource = _ref0.isSource,
+    localId = _ref0.localId,
+    api = _ref0.api;
   var _useState5 = (0, _react.useState)('none'),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     fetchStatus = _useState6[0],
     setFetchStatus = _useState6[1];
-  var _useState7 = (0, _react.useState)([]),
+  var _useState7 = (0, _react.useState)(EMPTY_LOCATIONS),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    referenceData = _useState8[0],
-    setReferenceData = _useState8[1];
+    locations = _useState8[0],
+    setLocations = _useState8[1];
   (0, _react.useEffect)(function () {
     setFetchStatus('loading');
     var getReferenceData = /*#__PURE__*/function () {
-      var _ref9 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var _ref1 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
         var response;
         return _regenerator.default.wrap(function (_context) {
           while (1) switch (_context.prev = _context.next) {
@@ -519,7 +648,7 @@ var DropdownContent = function DropdownContent(_ref8) {
               setFetchStatus('error');
               return _context.abrupt("return");
             case 2:
-              setReferenceData(processReferenceData(response.references, intl));
+              setLocations(toSyncedLocations(response.references, intl));
               setFetchStatus('success');
             case 3:
             case "end":
@@ -528,7 +657,7 @@ var DropdownContent = function DropdownContent(_ref8) {
         }, _callee);
       }));
       return function getReferenceData() {
-        return _ref9.apply(this, arguments);
+        return _ref1.apply(this, arguments);
       };
     }();
     void getReferenceData();
@@ -538,15 +667,15 @@ var DropdownContent = function DropdownContent(_ref8) {
     intl: intl,
     api: api,
     fetchStatus: fetchStatus,
-    referenceData: referenceData
+    locations: locations
   });
 };
-var useReferenceData = function useReferenceData(_ref0) {
-  var syncBlockStore = _ref0.syncBlockStore,
-    resourceId = _ref0.resourceId,
-    intl = _ref0.intl,
-    isSource = _ref0.isSource,
-    localId = _ref0.localId;
+var useReferenceData = function useReferenceData(_ref10) {
+  var syncBlockStore = _ref10.syncBlockStore,
+    resourceId = _ref10.resourceId,
+    intl = _ref10.intl,
+    isSource = _ref10.isSource,
+    localId = _ref10.localId;
   var _useState9 = (0, _react.useState)(function () {
       return isSource && syncBlockStore.sourceManager.isNewSourceBlock(resourceId);
     }),
@@ -555,7 +684,7 @@ var useReferenceData = function useReferenceData(_ref0) {
   var _useState1 = (0, _react.useState)(function () {
       return {
         fetchStatus: isNewSourceBlock ? 'success' : 'loading',
-        referenceData: []
+        locations: EMPTY_LOCATIONS
       };
     }),
     _useState10 = (0, _slicedToArray2.default)(_useState1, 2),
@@ -565,10 +694,10 @@ var useReferenceData = function useReferenceData(_ref0) {
     var isCurrentRequest = true;
     setState({
       fetchStatus: isNewSourceBlock ? 'success' : 'loading',
-      referenceData: []
+      locations: EMPTY_LOCATIONS
     });
     var getReferenceData = /*#__PURE__*/function () {
-      var _ref1 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+      var _ref11 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
         var response;
         return _regenerator.default.wrap(function (_context2) {
           while (1) switch (_context2.prev = _context2.next) {
@@ -592,13 +721,13 @@ var useReferenceData = function useReferenceData(_ref0) {
               }
               setState({
                 fetchStatus: 'error',
-                referenceData: []
+                locations: EMPTY_LOCATIONS
               });
               return _context2.abrupt("return");
             case 3:
               setState({
                 fetchStatus: 'success',
-                referenceData: processReferenceData(response.references, intl)
+                locations: toSyncedLocations(response.references, intl)
               });
             case 4:
             case "end":
@@ -607,7 +736,7 @@ var useReferenceData = function useReferenceData(_ref0) {
         }, _callee2);
       }));
       return function getReferenceData() {
-        return _ref1.apply(this, arguments);
+        return _ref11.apply(this, arguments);
       };
     }();
     void getReferenceData();
@@ -617,13 +746,13 @@ var useReferenceData = function useReferenceData(_ref0) {
   }, [syncBlockStore, resourceId, intl, isSource, localId, isNewSourceBlock]);
   return {
     fetchStatus: state.fetchStatus,
-    referenceData: state.referenceData
+    locations: state.locations
   };
 };
-var SyncedLocationTriggerContent = function SyncedLocationTriggerContent(_ref10) {
-  var intl = _ref10.intl,
-    fetchStatus = _ref10.fetchStatus,
-    referenceCount = _ref10.referenceCount;
+var SyncedLocationTriggerContent = function SyncedLocationTriggerContent(_ref12) {
+  var intl = _ref12.intl,
+    fetchStatus = _ref12.fetchStatus,
+    referenceCount = _ref12.referenceCount;
   var formatMessage = intl.formatMessage;
   var triggerTitle = formatMessage(_messages.syncBlockMessages.syncedLocationDropdownTitle);
   var syncedLocationCount = referenceCount === 0 ? 0 : referenceCount + 1;
@@ -648,13 +777,14 @@ var SyncedLocationTriggerContent = function SyncedLocationTriggerContent(_ref10)
       return triggerTitle;
   }
 };
-var DropdownContentWithReferenceData = function DropdownContentWithReferenceData(_ref11) {
-  var resourceId = _ref11.resourceId,
-    intl = _ref11.intl,
-    api = _ref11.api,
-    fetchStatus = _ref11.fetchStatus,
-    referenceData = _ref11.referenceData;
+var DropdownContentWithReferenceData = function DropdownContentWithReferenceData(_ref13) {
+  var resourceId = _ref13.resourceId,
+    intl = _ref13.intl,
+    api = _ref13.api,
+    fetchStatus = _ref13.fetchStatus,
+    locations = _ref13.locations;
   var formatMessage = intl.formatMessage;
+  var locationCount = countLocations(locations);
   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({
@@ -678,43 +808,22 @@ var DropdownContentWithReferenceData = function DropdownContentWithReferenceData
           formatMessage: formatMessage
         });
       case 'success':
-        if (referenceData.length > 0) {
+        if (locationCount > 0) {
           return /*#__PURE__*/React.createElement("div", {
             "data-testid": "synced-locations-dropdown-content",
             className: (0, _runtime.ax)([styles.contentContainer, "_ku9g126e _18bk1rpy"])
           }, /*#__PURE__*/React.createElement(_dropdownMenuItemGroup.default, {
             title: formatMessage(_messages.syncBlockMessages.syncedLocationDropdownHeading, {
-              count: "".concat(referenceData.length > 99 ? '99+' : referenceData.length)
+              count: "".concat(locationCount > 99 ? '99+' : locationCount)
             })
-          }, referenceData.map(function (reference) {
-            var title = reference.title === '' && reference.hasAccess ? 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(_dropdownMenuItem.default, {
-              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
-            }))));
+          }, 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, {
@@ -724,17 +833,127 @@ var DropdownContentWithReferenceData = function DropdownContentWithReferenceData
     }
   };
   return /*#__PURE__*/React.createElement(_compiled.Box, {
-    xcss: (0, _react2.cx)(styles.dropdownContent, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_sync_block_activation', 'isEnabled', true) && fetchStatus === 'success' && referenceData.length === 0 && styles.activationDropdownContent, shouldApplyMinHeight(fetchStatus, referenceData.length) && styles.containerWithMinHeight)
+    xcss: (0, _react2.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, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_sync_block_activation', 'isEnabled', true) && fetchStatus === 'success' && locationCount === 0 && styles.activationDropdownContent, shouldApplyMinHeight(fetchStatus, locationCount) && styles.containerWithMinHeight)
   }, content());
 };
-var LoadingScreen = function LoadingScreen(_ref12) {
-  var formatMessage = _ref12.formatMessage;
+// The pre-experiment rows. This block is master's, moved into a component; remove with the experiment.
+var ControlLocationRows = function ControlLocationRows(_ref14) {
+  var referenceData = _ref14.referenceData,
+    intl = _ref14.intl,
+    handleLocationClick = _ref14.handleLocationClick;
+  var formatMessage = intl.formatMessage;
+  return /*#__PURE__*/React.createElement(_react.Fragment, null, referenceData.map(function (reference) {
+    var title = reference.title === '' && reference.hasAccess ? 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(_dropdownMenuItem.default, {
+      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
+    }))));
+  }));
+};
+var FieldAwareItemTitle = function FieldAwareItemTitle(_ref15) {
+  var _ref15$item = _ref15.item,
+    baseTitle = _ref15$item.baseTitle,
+    fieldName = _ref15$item.fieldName,
+    note = _ref15$item.note,
+    reference = _ref15$item.reference,
+    formatMessage = _ref15.formatMessage;
+  var titleLine = /*#__PURE__*/React.createElement(_compiled.Inline, null, /*#__PURE__*/React.createElement(_compiled.Box, {
+    as: "span",
+    xcss: styles.title
+  }, baseTitle), note && /*#__PURE__*/React.createElement(_compiled.Box, {
+    as: "span",
+    xcss: styles.note
+  }, "\xA0- ", note), reference.isSource && /*#__PURE__*/React.createElement(_compiled.Box, {
+    as: "span",
+    xcss: styles.lozenge
+  }, /*#__PURE__*/React.createElement(_lozenge.default, null, formatMessage(_messages.syncBlockMessages.syncedLocationDropdownSourceLozenge))), !reference.hasAccess && /*#__PURE__*/React.createElement(_compiled.Box, {
+    as: "span",
+    xcss: styles.requestAccess
+  }, formatMessage(_messages.syncBlockMessages.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(_compiled.Stack, null, titleLine, /*#__PURE__*/React.createElement(_compiled.Box, {
+    as: "span",
+    xcss: styles.fieldSecondLine
+  }, /*#__PURE__*/React.createElement(_compiled.Text, {
+    size: "small",
+    color: "color.text.subtlest"
+  }, fieldName)));
+};
+var FieldAwareLocationRows = function FieldAwareLocationRows(_ref16) {
+  var items = _ref16.items,
+    intl = _ref16.intl,
+    handleLocationClick = _ref16.handleLocationClick;
+  var formatMessage = intl.formatMessage;
+  return /*#__PURE__*/React.createElement(_react.Fragment, null, items.map(function (item) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: item.key,
+      className: (0, _runtime.ax)(["_2ll012x7"])
+    }, /*#__PURE__*/React.createElement(_Tooltip.default, {
+      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(_react.Fragment, null, item.baseTitle, /*#__PURE__*/React.createElement("br", null), formatMessage(_messages.syncBlockMessages.syncedLocationDropdownTooltipFieldName, {
+        fieldName: item.fieldName
+      })) : item.baseTitle
+    }, /*#__PURE__*/React.createElement(_dropdownMenuItem.default, {
+      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: function onClick() {
+        return handleLocationClick();
+      }
+    }, /*#__PURE__*/React.createElement(FieldAwareItemTitle, {
+      item: item,
+      formatMessage: formatMessage
+    }))));
+  }));
+};
+var LoadingScreen = function LoadingScreen(_ref17) {
+  var formatMessage = _ref17.formatMessage;
   return /*#__PURE__*/React.createElement(_compiled.Box, null, /*#__PURE__*/React.createElement(_spinner.default, {
     label: formatMessage(_messages.syncBlockMessages.syncedLocationDropdownLoading)
   }));
 };
-var ErrorScreen = function ErrorScreen(_ref13) {
-  var formatMessage = _ref13.formatMessage;
+var ErrorScreen = function ErrorScreen(_ref18) {
+  var formatMessage = _ref18.formatMessage;
   return /*#__PURE__*/React.createElement(_compiled.Box, {
     xcss: styles.errorContainer,
     testId: "synced-locations-dropdown-content-error"
@@ -750,8 +969,8 @@ var ErrorScreen = function ErrorScreen(_ref13) {
     size: "medium"
   }, formatMessage(_messages.syncBlockMessages.syncedLocationDropdownError)));
 };
-var NoResultScreen = function NoResultScreen(_ref14) {
-  var formatMessage = _ref14.formatMessage;
+var NoResultScreen = function NoResultScreen(_ref19) {
+  var formatMessage = _ref19.formatMessage;
   return (0, _expValEquals.expValEquals)('platform_editor_sync_block_activation', 'isEnabled', true) ? /*#__PURE__*/React.createElement(_compiled.Box, {
     xcss: styles.activationNoResultsContainer,
     testId: "synced-locations-dropdown-content-no-results"