feat(editor): Improve new canvas discovery design by specifying ALPHA…

… version (no-changelog) (#11373)
n8n-io · Oct 23, 2024 · 197a126 · 197a126
1 parent 066aa48
commit 197a126
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 4 deletions.
diff --git a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
@@ -118,7 +118,9 @@ defineExpose({ open, close });
 								{{ item.label }}
 							</span>
 							<span v-if="item.badge">
-								<N8nBadge theme="primary" size="xsmall">{{ item.badge }}</N8nBadge>
+								<N8nBadge theme="primary" size="xsmall" v-bind="item.badgeProps">
+									{{ item.badge }}
+								</N8nBadge>
 							</span>
 							<N8nKeyboardShortcut
 								v-if="item.shortcut"

diff --git a/packages/design-system/src/types/action-dropdown.ts b/packages/design-system/src/types/action-dropdown.ts
@@ -4,6 +4,7 @@ export interface ActionDropdownItem {
 	id: string;
 	label: string;
 	badge?: string;
+	badgeProps?: Record<string, unknown>;
 	icon?: string;
 	divided?: boolean;
 	disabled?: boolean;

diff --git a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
@@ -189,9 +189,18 @@ const workflowMenuItems = computed<ActionDropdownItem[]>(() => {
 
 	actions.push({
 		id: WORKFLOW_MENU_ACTIONS.SWITCH_NODE_VIEW_VERSION,
-		...(nodeViewSwitcherDiscovered.value || nodeViewVersion.value === '2'
+		...(nodeViewVersion.value === '2'
 			? {}
-			: { badge: locale.baseText('menuActions.badge.new') }),
+			: nodeViewSwitcherDiscovered.value
+				? {
+						badge: locale.baseText('menuActions.badge.alpha'),
+						badgeProps: {
+							theme: 'tertiary',
+						},
+					}
+				: {
+						badge: locale.baseText('menuActions.badge.new'),
+					}),
 		label:
 			nodeViewVersion.value === '2'
 				? locale.baseText('menuActions.switchToOldNodeViewVersion')
@@ -735,14 +744,17 @@ function showCreateWorkflowSuccessToast(id?: string) {
 					data-test-id="workflow-import-input"
 					@change="handleFileImport()"
 				/>
-				<N8nTooltip dismissible :visible="isNodeViewDiscoveryTooltipVisible">
+				<N8nTooltip :visible="isNodeViewDiscoveryTooltipVisible">
 					<N8nActionDropdown
 						:items="workflowMenuItems"
 						data-test-id="workflow-menu"
 						@select="onWorkflowMenuSelect"
 						@visible-change="onWorkflowMenuOpen"
 					/>
 					<template #content>
+						<div class="mb-4xs">
+							<N8nBadge>{{ $locale.baseText('menuActions.badge.alpha') }}</N8nBadge>
+						</div>
 						{{ $locale.baseText('menuActions.nodeViewDiscovery.tooltip') }}
 						<N8nIcon
 							:class="$style.closeNodeViewDiscovery"

diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -908,6 +908,7 @@
 	"menuActions.switchToNewNodeViewVersion": "Switch to new canvas",
 	"menuActions.switchToOldNodeViewVersion": "Switch to old canvas",
 	"menuActions.badge.new": "NEW",
+	"menuActions.badge.alpha": "ALPHA",
 	"menuActions.nodeViewDiscovery.tooltip": "Try our new, more performant canvas",
 	"multipleParameter.addItem": "Add item",
 	"multipleParameter.currentlyNoItemsExist": "Currently no items exist",