fix(editor): Update design system menu item component (#6659)

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: {

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'"
+					:placement="item.secondaryIcon?.tooltip?.placement || 'right'"
-					:content="item.tooltip?.content"
+					:content="item.secondaryIcon?.tooltip?.content"
-					:disabled="compact || !item.tooltip?.content || item.tooltip?.bindTo !== 'secondaryIcon'"
+					:disabled="compact || !item.secondaryIcon?.tooltip?.content"
 					:open-delay="tooltipDelay"
 				>
 					<n8n-icon :icon="item.secondaryIcon.name" :size="item.secondaryIcon.size || 'small'" />

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 = {

packages/editor-ui/src/components/MainSidebar.vue

@@ -202,10 +202,11 @@ export default defineComponent({
 			};
 
 			if (this.sourceControlStore.preferences.branchReadOnly) {
-				workflows.secondaryIcon = { name: 'lock' };
+				workflows.secondaryIcon = {
-				workflows.tooltip = {
+					name: 'lock',
+					tooltip: {
 						content: this.$locale.baseText('mainSidebar.workflows.readOnlyEnv.tooltip'),
-					bindTo: 'secondaryIcon',
+					},
 				};
 			}