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 @@ 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'), + }, }; }