fix(editor): Extend menu item and use it as a recursive component (#6618)

packages/design-system/src/components/N8nMenuItem/MenuItem.vue

@@ -1,7 +1,7 @@
 <template>
 	<div :class="['n8n-menu-item', $style.item]">
 		<el-submenu
-			v-if="item.children && item.children.length > 0"
+			v-if="item.children?.length"
 			:id="item.id"
 			:class="{
 				[$style.submenu]: true,
@@ -21,25 +21,16 @@
 				/>
 				<span :class="$style.label">{{ item.label }}</span>
 			</template>
-			<el-menu-item
+			<n8n-menu-item
-				v-for="child in availableChildren"
+				v-for="item in availableChildren"
-				:key="child.id"
+				:key="item.id"
-				:id="child.id"
+				:item="item"
-				:class="{
+				:compact="compact"
-					[$style.menuItem]: true,
+				:tooltipDelay="tooltipDelay"
-					[$style.disableActiveStyle]: !isItemActive(child),
+				:popperClass="popperClass"
-					[$style.active]: isItemActive(child),
+				:mode="mode"
-				}"
+				:activeTab="activeTab"
-				data-test-id="menu-item"
+			/>
-				:index="child.id"
-				@click="onItemClick(child, $event)"
-			>
-				<n8n-icon v-if="child.icon" :class="$style.icon" :icon="child.icon" />
-				<span :class="$style.label">{{ child.label }}</span>
-				<span v-if="child.secondaryIcon" :class="$style.secondaryIcon">
-					<n8n-icon :icon="child.secondaryIcon.name" :size="child.secondaryIcon.size || 'small'" />
-				</span>
-			</el-menu-item>
 		</el-submenu>
 		<n8n-tooltip
 			v-else
@@ -68,9 +59,16 @@
 					:size="item.customIconSize || 'large'"
 				/>
 				<span :class="$style.label">{{ item.label }}</span>
-				<span v-if="item.secondaryIcon" :class="$style.secondaryIcon">
+				<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'"
+					:open-delay="tooltipDelay"
+				>
 					<n8n-icon :icon="item.secondaryIcon.name" :size="item.secondaryIcon.size || 'small'" />
-				</span>
+				</n8n-tooltip>
 			</el-menu-item>
 		</n8n-tooltip>
 	</div>

packages/design-system/src/types/menu.ts

@@ -1,3 +1,5 @@
+import type { Tooltip } from 'element-ui';
+
 export type IMenuItem = {
 	id: string;
 	label: string;
@@ -14,6 +16,7 @@ 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

@@ -193,6 +193,22 @@ export default defineComponent({
 			const items: IMenuItem[] = [];
 			const injectedItems = this.uiStore.sidebarMenuItems;
 
+			const workflows: IMenuItem = {
+				id: 'workflows',
+				icon: 'network-wired',
+				label: this.$locale.baseText('mainSidebar.workflows'),
+				position: 'top',
+				activateOnRouteNames: [VIEWS.WORKFLOWS],
+			};
+
+			if (this.sourceControlStore.preferences.branchReadOnly) {
+				workflows.secondaryIcon = { name: 'lock' };
+				workflows.tooltip = {
+					content: this.$locale.baseText('mainSidebar.workflows.readOnlyEnv.tooltip'),
+					bindTo: 'secondaryIcon',
+				};
+			}
+
 			if (injectedItems && injectedItems.length > 0) {
 				for (const item of injectedItems) {
 					items.push({
@@ -209,16 +225,7 @@ export default defineComponent({
 			}
 
 			const regularItems: IMenuItem[] = [
-				{
+				workflows,
-					id: 'workflows',
-					icon: 'network-wired',
-					secondaryIcon: this.sourceControlStore.preferences.branchReadOnly
-						? { name: 'lock' }
-						: undefined,
-					label: this.$locale.baseText('mainSidebar.workflows'),
-					position: 'top',
-					activateOnRouteNames: [VIEWS.WORKFLOWS],
-				},
 				{
 					id: 'templates',
 					icon: 'box-open',

packages/editor-ui/src/plugins/i18n/locales/en.json

@@ -619,6 +619,7 @@
 	"mainSidebar.showMessage.stopExecution.title": "Execution stopped",
 	"mainSidebar.templates": "Templates",
 	"mainSidebar.workflows": "Workflows",
+	"mainSidebar.workflows.readOnlyEnv.tooltip": "Protected mode is active, so no workflows changes are allowed. Change this in Settings, under 'Source Control'",
 	"mainSidebar.executions": "All executions",
 	"menuActions.duplicate": "Duplicate",
 	"menuActions.download": "Download",