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

This commit is contained in:
Csaba Tuncsik 2023-07-10 12:39:47 +02:00 committed by GitHub
parent a95862b6e2
commit d617f63ae9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 41 additions and 32 deletions

View file

@ -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
v-for="child in availableChildren"
:key="child.id"
:id="child.id"
:class="{
[$style.menuItem]: true,
[$style.disableActiveStyle]: !isItemActive(child),
[$style.active]: isItemActive(child),
}"
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>
<n8n-menu-item
v-for="item in availableChildren"
:key="item.id"
:item="item"
:compact="compact"
:tooltipDelay="tooltipDelay"
:popperClass="popperClass"
:mode="mode"
:activeTab="activeTab"
/>
</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>

View file

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

View file

@ -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[] = [
{
id: 'workflows',
icon: 'network-wired',
secondaryIcon: this.sourceControlStore.preferences.branchReadOnly
? { name: 'lock' }
: undefined,
label: this.$locale.baseText('mainSidebar.workflows'),
position: 'top',
activateOnRouteNames: [VIEWS.WORKFLOWS],
},
workflows,
{
id: 'templates',
icon: 'box-open',

View file

@ -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",