From 84466e983336a3cfa8c20b30ead8d58abbf07cf0 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Thu, 13 Jul 2023 13:27:25 +0200
Subject: [PATCH] fix(editor): Update design system menu item component (#6659)

---
 .../N8nMenuItem/MenuItem.stories.ts           | 27 +++++++++++++++++++
 .../src/components/N8nMenuItem/MenuItem.vue   |  6 ++---
 packages/design-system/src/types/menu.ts      |  7 +++--
 .../editor-ui/src/components/MainSidebar.vue  |  9 ++++---
 4 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/packages/design-system/src/components/N8nMenuItem/MenuItem.stories.ts b/packages/design-system/src/components/N8nMenuItem/MenuItem.stories.ts
index 5d035d0fcd..342bac227f 100644
--- a/packages/design-system/src/components/N8nMenuItem/MenuItem.stories.ts
+++ b/packages/design-system/src/components/N8nMenuItem/MenuItem.stories.ts
@@ -31,6 +31,33 @@ defaultMenuItem.args = {
 	},
 };
 
+export const withSecondaryIcon = template.bind({});
+withSecondaryIcon.args = {
+	item: {
+		id: 'workflows',
+		icon: 'heart',
+		label: 'Workflows',
+		secondaryIcon: { name: 'lock', size: 'small' },
+	},
+};
+
+export const withSecondaryIconTooltip = template.bind({});
+withSecondaryIconTooltip.args = {
+	item: {
+		id: 'workflows',
+		icon: 'heart',
+		label: 'Workflows',
+		secondaryIcon: {
+			name: 'lock',
+			size: 'small',
+			tooltip: {
+				content: 'Locked secret',
+				bindTo: 'secondaryIcon',
+			},
+		},
+	},
+};
+
 export const compact = template.bind({});
 compact.args = {
 	item: {
diff --git a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
index 1647cfd873..a62a33fb2d 100644
--- a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
+++ b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
@@ -62,9 +62,9 @@
 				<n8n-tooltip
 					v-if="item.secondaryIcon"
 					:class="$style.secondaryIcon"
-					:placement="item.tooltip?.placement || 'right'"
-					:content="item.tooltip?.content"
-					:disabled="compact || !item.tooltip?.content || item.tooltip?.bindTo !== 'secondaryIcon'"
+					:placement="item.secondaryIcon?.tooltip?.placement || 'right'"
+					:content="item.secondaryIcon?.tooltip?.content"
+					:disabled="compact || !item.secondaryIcon?.tooltip?.content"
 					:open-delay="tooltipDelay"
 				>
 					<n8n-icon :icon="item.secondaryIcon.name" :size="item.secondaryIcon.size || 'small'" />
diff --git a/packages/design-system/src/types/menu.ts b/packages/design-system/src/types/menu.ts
index d65b328bfa..ce5640df72 100644
--- a/packages/design-system/src/types/menu.ts
+++ b/packages/design-system/src/types/menu.ts
@@ -4,7 +4,11 @@ export type IMenuItem = {
 	id: string;
 	label: string;
 	icon?: string;
-	secondaryIcon?: { name: string; size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' };
+	secondaryIcon?: {
+		name: string;
+		size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+		tooltip?: Tooltip;
+	};
 	customIconSize?: 'medium' | 'small';
 	available?: boolean;
 	position?: 'top' | 'bottom';
@@ -16,7 +20,6 @@ export type IMenuItem = {
 	// For more specific matching, we can use paths
 	activateOnRoutePaths?: string[];
 	children?: IMenuItem[];
-	tooltip?: Tooltip & { bindTo?: 'menuItem' | 'secondaryIcon' };
 };
 
 export type ILinkMenuItemProperties = {
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 4551a3ce2b..7ff4983098 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -202,10 +202,11 @@ export default defineComponent({
 			};
 
 			if (this.sourceControlStore.preferences.branchReadOnly) {
-				workflows.secondaryIcon = { name: 'lock' };
-				workflows.tooltip = {
-					content: this.$locale.baseText('mainSidebar.workflows.readOnlyEnv.tooltip'),
-					bindTo: 'secondaryIcon',
+				workflows.secondaryIcon = {
+					name: 'lock',
+					tooltip: {
+						content: this.$locale.baseText('mainSidebar.workflows.readOnlyEnv.tooltip'),
+					},
 				};
 			}