@atlaskit/editor-plugin-synced-block 21.0.1 → 21.0.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 21.0.2
+
+### Patch Changes
+
+- [`21140f5f58c3f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/21140f5f58c3f) -
+  EDITOR-9292: Synced locations show the Jira work item avatar for every issue type, matching smart
+  links and breadcrumbs, behind the platform_editor_blocks_patch_11 experiment.
+- Updated dependencies
+
 ## 21.0.1
 
 ### Patch Changes

package/dist/cjs/ui/SyncedLocationDropdown.compiled.css

@@ -18,6 +18,7 @@
 ._1bto1l2s{text-overflow:ellipsis}
 ._1e0c1txw{display:flex}
 ._1hmsglyw{text-decoration-line:none}
+._1o9zidpf{flex-shrink:0}
 ._1reo15vq{overflow-x:hidden}
 ._1tkeqkoa{min-height:9pc}
 ._1ul91wqb{min-width:60px}

package/dist/cjs/ui/SyncedLocationDropdown.js

@@ -56,6 +56,10 @@ var dropdownItemStyles = null;
 
 // logo icon does not fit in ADS IconTile, hence we need custom styles to match with other icons
 var logoTileStyles = null;
+
+// Breadcrumbs and smart links draw the work item avatar without a tile. The 20px box keeps
+// Jira rows aligned with the tiled Confluence rows.
+var issueTypeAvatarStyles = null;
 var SYNCED_LOCATIONS_DROPDOWN_TEST_ID = 'synced-block-synced-locations-dropdown';
 var styles = {
   title: "_1reo15vq _18m915vq _syazazsu _1bto1l2s _o5721q9c",
@@ -150,8 +154,8 @@ var ProductIcon = function ProductIcon(_ref2) {
 };
 
 // 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`.
+// from AGG because Jira's REST/GraphQL API does not localise it at this layer. With
+// `platform_editor_blocks_patch_11` the AGG `iconUrl` wins and these icons are the fallback.
 //
 // Type the icons as the same shape as `TaskIcon` so we don't import `NewCoreIconProps`
 // from a private icon entrypoint.
@@ -223,8 +227,18 @@ var createCustomIssueTypeIcon = function createCustomIssueTypeIcon(iconUrl) {
  */
 var renderJiraIssueTypeIcon = function renderJiraIssueTypeIcon(issueType, intl) {
   var mapped = jiraIssueTypeIconMap[issueType.name];
+  var label = intl.formatMessage(mapped ? _messages.syncBlockMessages[mapped.messageKey] : _messages.syncBlockMessages.syncedLocationDropdownIssueTypeGeneric);
+  if (issueType.iconUrl && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_blocks_patch_11')) {
+    return /*#__PURE__*/React.createElement("span", {
+      className: (0, _runtime.ax)(["_1bsbgktf _4t3igktf _1e0c1txw _1o9zidpf _4cvr1h6o _1bah1h6o"])
+    }, /*#__PURE__*/React.createElement("img", {
+      src: issueType.iconUrl,
+      alt: label,
+      width: "16",
+      height: "16"
+    }));
+  }
   if (mapped) {
-    var label = intl.formatMessage(_messages.syncBlockMessages[mapped.messageKey]);
     return /*#__PURE__*/React.createElement(_iconTile.default, {
       icon: mapped.icon,
       label: label,
@@ -237,10 +251,9 @@ var renderJiraIssueTypeIcon = function renderJiraIssueTypeIcon(issueType, intl)
   // 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.syncBlockMessages.syncedLocationDropdownIssueTypeGeneric);
     return /*#__PURE__*/React.createElement(_iconTile.default, {
       icon: CustomIcon,
-      label: _label,
+      label: label,
       appearance: 'gray',
       size: "xsmall"
     });

package/dist/es2019/ui/SyncedLocationDropdown.compiled.css

@@ -18,6 +18,7 @@
 ._1bto1l2s{text-overflow:ellipsis}
 ._1e0c1txw{display:flex}
 ._1hmsglyw{text-decoration-line:none}
+._1o9zidpf{flex-shrink:0}
 ._1reo15vq{overflow-x:hidden}
 ._1tkeqkoa{min-height:9pc}
 ._1ul91wqb{min-width:60px}

package/dist/es2019/ui/SyncedLocationDropdown.js

@@ -39,6 +39,10 @@ const dropdownItemStyles = null;
 
 // logo icon does not fit in ADS IconTile, hence we need custom styles to match with other icons
 const logoTileStyles = null;
+
+// Breadcrumbs and smart links draw the work item avatar without a tile. The 20px box keeps
+// Jira rows aligned with the tiled Confluence rows.
+const issueTypeAvatarStyles = null;
 const SYNCED_LOCATIONS_DROPDOWN_TEST_ID = 'synced-block-synced-locations-dropdown';
 const styles = {
   title: "_1reo15vq _18m915vq _syazazsu _1bto1l2s _o5721q9c",
@@ -134,8 +138,8 @@ const ProductIcon = ({
 };
 
 // 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`.
+// from AGG because Jira's REST/GraphQL API does not localise it at this layer. With
+// `platform_editor_blocks_patch_11` the AGG `iconUrl` wins and these icons are the fallback.
 //
 // Type the icons as the same shape as `TaskIcon` so we don't import `NewCoreIconProps`
 // from a private icon entrypoint.
@@ -205,8 +209,18 @@ const createCustomIssueTypeIcon = iconUrl => {
  */
 const renderJiraIssueTypeIcon = (issueType, intl) => {
   const mapped = jiraIssueTypeIconMap[issueType.name];
+  const label = intl.formatMessage(mapped ? messages[mapped.messageKey] : messages.syncedLocationDropdownIssueTypeGeneric);
+  if (issueType.iconUrl && isExperimentEnabled('platform_editor_blocks_patch_11')) {
+    return /*#__PURE__*/React.createElement("span", {
+      className: ax(["_1bsbgktf _4t3igktf _1e0c1txw _1o9zidpf _4cvr1h6o _1bah1h6o"])
+    }, /*#__PURE__*/React.createElement("img", {
+      src: issueType.iconUrl,
+      alt: label,
+      width: "16",
+      height: "16"
+    }));
+  }
   if (mapped) {
-    const label = intl.formatMessage(messages[mapped.messageKey]);
     return /*#__PURE__*/React.createElement(IconTile, {
       icon: mapped.icon,
       label: label,
@@ -219,7 +233,6 @@ const renderJiraIssueTypeIcon = (issueType, intl) => {
   // icon gets the same tile background, border-radius, and sizing as known issue types.
   if (issueType.iconUrl) {
     const CustomIcon = createCustomIssueTypeIcon(issueType.iconUrl);
-    const label = intl.formatMessage(messages.syncedLocationDropdownIssueTypeGeneric);
     return /*#__PURE__*/React.createElement(IconTile, {
       icon: CustomIcon,
       label: label,

package/dist/esm/ui/SyncedLocationDropdown.compiled.css

@@ -18,6 +18,7 @@
 ._1bto1l2s{text-overflow:ellipsis}
 ._1e0c1txw{display:flex}
 ._1hmsglyw{text-decoration-line:none}
+._1o9zidpf{flex-shrink:0}
 ._1reo15vq{overflow-x:hidden}
 ._1tkeqkoa{min-height:9pc}
 ._1ul91wqb{min-width:60px}

package/dist/esm/ui/SyncedLocationDropdown.js

@@ -48,6 +48,10 @@ var dropdownItemStyles = null;
 
 // logo icon does not fit in ADS IconTile, hence we need custom styles to match with other icons
 var logoTileStyles = null;
+
+// Breadcrumbs and smart links draw the work item avatar without a tile. The 20px box keeps
+// Jira rows aligned with the tiled Confluence rows.
+var issueTypeAvatarStyles = null;
 var SYNCED_LOCATIONS_DROPDOWN_TEST_ID = 'synced-block-synced-locations-dropdown';
 var styles = {
   title: "_1reo15vq _18m915vq _syazazsu _1bto1l2s _o5721q9c",
@@ -142,8 +146,8 @@ var ProductIcon = function ProductIcon(_ref2) {
 };
 
 // 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`.
+// from AGG because Jira's REST/GraphQL API does not localise it at this layer. With
+// `platform_editor_blocks_patch_11` the AGG `iconUrl` wins and these icons are the fallback.
 //
 // Type the icons as the same shape as `TaskIcon` so we don't import `NewCoreIconProps`
 // from a private icon entrypoint.
@@ -215,8 +219,18 @@ var createCustomIssueTypeIcon = function createCustomIssueTypeIcon(iconUrl) {
  */
 var renderJiraIssueTypeIcon = function renderJiraIssueTypeIcon(issueType, intl) {
   var mapped = jiraIssueTypeIconMap[issueType.name];
+  var label = intl.formatMessage(mapped ? messages[mapped.messageKey] : messages.syncedLocationDropdownIssueTypeGeneric);
+  if (issueType.iconUrl && isExperimentEnabled('platform_editor_blocks_patch_11')) {
+    return /*#__PURE__*/React.createElement("span", {
+      className: ax(["_1bsbgktf _4t3igktf _1e0c1txw _1o9zidpf _4cvr1h6o _1bah1h6o"])
+    }, /*#__PURE__*/React.createElement("img", {
+      src: issueType.iconUrl,
+      alt: label,
+      width: "16",
+      height: "16"
+    }));
+  }
   if (mapped) {
-    var label = intl.formatMessage(messages[mapped.messageKey]);
     return /*#__PURE__*/React.createElement(IconTile, {
       icon: mapped.icon,
       label: label,
@@ -229,10 +243,9 @@ var renderJiraIssueTypeIcon = function renderJiraIssueTypeIcon(issueType, intl)
   // 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,
+      label: label,
       appearance: 'gray',
       size: "xsmall"
     });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "21.0.1",
+	"version": "21.0.2",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -53,7 +53,7 @@
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/primitives": "^22.5.0",
 		"@atlaskit/spinner": "20.4.4",
-		"@atlaskit/tmp-editor-statsig": "^219.0.0",
+		"@atlaskit/tmp-editor-statsig": "^220.0.0",
 		"@atlaskit/tokens": "20.1.0",
 		"@atlaskit/tooltip": "^24.4.0",
 		"@atlaskit/visually-hidden": "^4.4.0",
@@ -65,7 +65,7 @@
 		"memoize-one": "^6.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^127.1.0",
+		"@atlaskit/editor-common": "^127.2.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},