From 1c261f85a316a0e769864d82d80cda088ed9d6d1 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Mon, 29 Apr 2024 07:53:42 +0300
Subject: [PATCH] refactor(editor): Migrate header WorkflowDetails to
 composition api (no-changelog) (#9186)

---
 .../N8nActionDropdown/ActionDropdown.vue      |   16 +-
 packages/design-system/src/css/tag.scss       |    6 +-
 .../src/types/action-dropdown.ts              |   11 +
 packages/design-system/src/types/index.ts     |    1 +
 packages/editor-ui/src/__tests__/setup.ts     |   25 +
 .../src/components/MainHeader/MainHeader.vue  |    7 +-
 .../MainHeader/WorkflowDetails.spec.ts        |  115 ++
 .../components/MainHeader/WorkflowDetails.vue | 1115 ++++++++---------
 .../editor-ui/src/components/TagsDropdown.vue |    2 +-
 .../src/composables/useContextMenu.ts         |    9 +-
 packages/editor-ui/src/n8n-theme.scss         |    4 +-
 11 files changed, 716 insertions(+), 595 deletions(-)
 create mode 100644 packages/design-system/src/types/action-dropdown.ts
 create mode 100644 packages/editor-ui/src/components/MainHeader/WorkflowDetails.spec.ts

diff --git a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
index 063b228a35274..2ec50e72bc066 100644
--- a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
+++ b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
@@ -61,23 +61,13 @@ import { ref, useCssModule, useAttrs, computed } from 'vue';
 import { ElDropdown, ElDropdownMenu, ElDropdownItem, type Placement } from 'element-plus';
 import N8nIcon from '../N8nIcon';
 import { N8nKeyboardShortcut } from '../N8nKeyboardShortcut';
-import type { KeyboardShortcut } from '../../types';
+import type { ActionDropdownItem } from '../../types';
 import type { IconSize } from '@/types/icon';
 
-interface IActionDropdownItem {
-	id: string;
-	label: string;
-	icon?: string;
-	divided?: boolean;
-	disabled?: boolean;
-	shortcut?: KeyboardShortcut;
-	customClass?: string;
-}
-
 const TRIGGER = ['click', 'hover'] as const;
 
 interface ActionDropdownProps {
-	items: IActionDropdownItem[];
+	items: ActionDropdownItem[];
 	placement?: Placement;
 	activatorIcon?: string;
 	activatorSize?: IconSize;
@@ -99,7 +89,7 @@ const $attrs = useAttrs();
 const testIdPrefix = $attrs['data-test-id'];
 
 const $style = useCssModule();
-const getItemClasses = (item: IActionDropdownItem): Record<string, boolean> => {
+const getItemClasses = (item: ActionDropdownItem): Record<string, boolean> => {
 	return {
 		[$style.itemContainer]: true,
 		[$style.disabled]: !!item.disabled,
diff --git a/packages/design-system/src/css/tag.scss b/packages/design-system/src/css/tag.scss
index a1634b5d4ab84..10b09cf32b212 100644
--- a/packages/design-system/src/css/tag.scss
+++ b/packages/design-system/src/css/tag.scss
@@ -127,6 +127,7 @@
 	border-radius: var.$tag-border-radius;
 	box-sizing: border-box;
 	white-space: nowrap;
+	line-height: 1;
 
 	.el-icon.el-tag__close {
 		border-radius: 50%;
@@ -137,9 +138,8 @@
 		height: 16px;
 		width: 16px;
 		line-height: 16px;
-		vertical-align: middle;
-		top: -1px;
-		right: -5px;
+		margin-top: 0;
+		margin-right: 0;
 
 		&::before {
 			display: block;
diff --git a/packages/design-system/src/types/action-dropdown.ts b/packages/design-system/src/types/action-dropdown.ts
new file mode 100644
index 0000000000000..8caf6560f8fc3
--- /dev/null
+++ b/packages/design-system/src/types/action-dropdown.ts
@@ -0,0 +1,11 @@
+import type { KeyboardShortcut } from '@/types/keyboardshortcut';
+
+export interface ActionDropdownItem {
+	id: string;
+	label: string;
+	icon?: string;
+	divided?: boolean;
+	disabled?: boolean;
+	shortcut?: KeyboardShortcut;
+	customClass?: string;
+}
diff --git a/packages/design-system/src/types/index.ts b/packages/design-system/src/types/index.ts
index eec00e1154eea..1336f17b63149 100644
--- a/packages/design-system/src/types/index.ts
+++ b/packages/design-system/src/types/index.ts
@@ -1,3 +1,4 @@
+export * from './action-dropdown';
 export * from './button';
 export * from './datatable';
 export * from './form';
diff --git a/packages/editor-ui/src/__tests__/setup.ts b/packages/editor-ui/src/__tests__/setup.ts
index 4c75c226e6d37..3b9c07462ea29 100644
--- a/packages/editor-ui/src/__tests__/setup.ts
+++ b/packages/editor-ui/src/__tests__/setup.ts
@@ -19,3 +19,28 @@ Range.prototype.getClientRects = vi.fn(() => ({
 	length: 0,
 	[Symbol.iterator]: vi.fn(),
 }));
+
+export class IntersectionObserver {
+	root = null;
+	rootMargin = '';
+	thresholds = [];
+
+	disconnect() {
+		return null;
+	}
+
+	observe() {
+		return null;
+	}
+
+	takeRecords() {
+		return [];
+	}
+
+	unobserve() {
+		return null;
+	}
+}
+
+window.IntersectionObserver = IntersectionObserver;
+global.IntersectionObserver = IntersectionObserver;
diff --git a/packages/editor-ui/src/components/MainHeader/MainHeader.vue b/packages/editor-ui/src/components/MainHeader/MainHeader.vue
index 668b8b5d2a580..53eb1fd6348b0 100644
--- a/packages/editor-ui/src/components/MainHeader/MainHeader.vue
+++ b/packages/editor-ui/src/components/MainHeader/MainHeader.vue
@@ -2,7 +2,7 @@
 	<div>
 		<div :class="{ 'main-header': true, expanded: !uiStore.sidebarMenuCollapsed }">
 			<div v-show="!hideMenuBar" class="top-menu">
-				<WorkflowDetails :read-only="readOnly" />
+				<WorkflowDetails v-if="workflow?.name" :workflow="workflow" :read-only="readOnly" />
 				<TabBar
 					v-if="onWorkflowPage"
 					:items="tabBarItems"
@@ -27,7 +27,7 @@ import {
 	STICKY_NODE_TYPE,
 	VIEWS,
 } from '@/constants';
-import type { INodeUi, ITabBarItem } from '@/Interface';
+import type { INodeUi, ITabBarItem, IWorkflowDb } from '@/Interface';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useSourceControlStore } from '@/stores/sourceControl.store';
 import { useUIStore } from '@/stores/ui.store';
@@ -75,6 +75,9 @@ export default defineComponent({
 		hideMenuBar(): boolean {
 			return Boolean(this.activeNode && this.activeNode.type !== STICKY_NODE_TYPE);
 		},
+		workflow(): IWorkflowDb {
+			return this.workflowsStore.workflow;
+		},
 		workflowName(): string {
 			return this.workflowsStore.workflowName;
 		},
diff --git a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.spec.ts b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.spec.ts
new file mode 100644
index 0000000000000..16735639902c5
--- /dev/null
+++ b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.spec.ts
@@ -0,0 +1,115 @@
+import WorkflowDetails from '@/components/MainHeader/WorkflowDetails.vue';
+import { createComponentRenderer } from '@/__tests__/render';
+import { STORES } from '@/constants';
+import { createTestingPinia } from '@pinia/testing';
+import { fireEvent } from '@testing-library/vue';
+
+vi.mock('vue-router', async () => {
+	const actual = await import('vue-router');
+
+	return {
+		...actual,
+		useRoute: () => ({
+			value: {
+				params: {
+					id: '1',
+				},
+			},
+		}),
+	};
+});
+
+const initialState = {
+	[STORES.SETTINGS]: {
+		settings: {
+			enterprise: {
+				sharing: true,
+			},
+		},
+		areTagsEnabled: true,
+	},
+	[STORES.TAGS]: {
+		tags: {
+			1: {
+				id: '1',
+				name: 'tag1',
+			},
+			2: {
+				id: '2',
+				name: 'tag2',
+			},
+		},
+	},
+};
+
+const renderComponent = createComponentRenderer(WorkflowDetails, {
+	pinia: createTestingPinia({ initialState }),
+});
+
+describe('WorkflowDetails', () => {
+	it('renders workflow name and tags', async () => {
+		const workflow = {
+			id: '1',
+			name: 'Test Workflow',
+			tags: ['1', '2'],
+		};
+
+		const { getByTestId, getByText } = renderComponent({
+			props: {
+				workflow,
+				readOnly: false,
+			},
+		});
+
+		const workflowName = getByTestId('workflow-name-input');
+		const workflowNameInput = workflowName.querySelector('input');
+
+		expect(workflowNameInput).toHaveValue('Test Workflow');
+		expect(getByText('tag1')).toBeInTheDocument();
+		expect(getByText('tag2')).toBeInTheDocument();
+	});
+
+	it('calls save function on save button click', async () => {
+		const onSaveButtonClick = vi.fn();
+		const { getByTestId } = renderComponent({
+			props: {
+				workflow: {
+					id: '1',
+					name: 'Test Workflow',
+					tags: [],
+				},
+				readOnly: false,
+			},
+			global: {
+				mocks: {
+					onSaveButtonClick,
+				},
+			},
+		});
+
+		await fireEvent.click(getByTestId('workflow-save-button'));
+		expect(onSaveButtonClick).toHaveBeenCalled();
+	});
+
+	it('opens share modal on share button click', async () => {
+		const onShareButtonClick = vi.fn();
+		const { getByTestId } = renderComponent({
+			props: {
+				workflow: {
+					id: '1',
+					name: 'Test Workflow',
+					tags: [],
+				},
+				readOnly: false,
+			},
+			global: {
+				mocks: {
+					onShareButtonClick,
+				},
+			},
+		});
+
+		await fireEvent.click(getByTestId('workflow-share-button'));
+		expect(onShareButtonClick).toHaveBeenCalled();
+	});
+});
diff --git a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
index b38f72235ce98..4dc59ef378f29 100644
--- a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
+++ b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
@@ -1,16 +1,536 @@
+<script lang="ts" setup>
+import {
+	DUPLICATE_MODAL_KEY,
+	EnterpriseEditionFeature,
+	MAX_WORKFLOW_NAME_LENGTH,
+	MODAL_CONFIRM,
+	PLACEHOLDER_EMPTY_WORKFLOW_ID,
+	SOURCE_CONTROL_PUSH_MODAL_KEY,
+	VIEWS,
+	WORKFLOW_MENU_ACTIONS,
+	WORKFLOW_SETTINGS_MODAL_KEY,
+	WORKFLOW_SHARE_MODAL_KEY,
+} from '@/constants';
+
+import ShortenName from '@/components/ShortenName.vue';
+import TagsContainer from '@/components/TagsContainer.vue';
+import PushConnectionTracker from '@/components/PushConnectionTracker.vue';
+import WorkflowActivator from '@/components/WorkflowActivator.vue';
+import SaveButton from '@/components/SaveButton.vue';
+import TagsDropdown from '@/components/TagsDropdown.vue';
+import InlineTextEdit from '@/components/InlineTextEdit.vue';
+import BreakpointsObserver from '@/components/BreakpointsObserver.vue';
+import CollaborationPane from '@/components/MainHeader/CollaborationPane.vue';
+
+import { useRootStore } from '@/stores/n8nRoot.store';
+import { useSettingsStore } from '@/stores/settings.store';
+import { useSourceControlStore } from '@/stores/sourceControl.store';
+import { useTagsStore } from '@/stores/tags.store';
+import { useUIStore } from '@/stores/ui.store';
+import { useUsersStore } from '@/stores/users.store';
+import { useWorkflowsStore } from '@/stores/workflows.store';
+
+import { saveAs } from 'file-saver';
+import { useTitleChange } from '@/composables/useTitleChange';
+import { useMessage } from '@/composables/useMessage';
+import { useToast } from '@/composables/useToast';
+
+import { getWorkflowPermissions } from '@/permissions';
+import { createEventBus } from 'n8n-design-system/utils';
+import { nodeViewEventBus } from '@/event-bus';
+import { hasPermission } from '@/rbac/permissions';
+import { useCanvasStore } from '@/stores/canvas.store';
+import { useRoute, useRouter } from 'vue-router';
+import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
+import { computed, ref, useCssModule, watch } from 'vue';
+import type {
+	ActionDropdownItem,
+	IWorkflowDataUpdate,
+	IWorkflowDb,
+	IWorkflowToShare,
+} from '@/Interface';
+import { useI18n } from '@/composables/useI18n';
+import { useTelemetry } from '@/composables/useTelemetry';
+import type { MessageBoxInputData } from 'element-plus';
+import type { BaseTextKey } from '../../plugins/i18n';
+
+const props = defineProps<{
+	workflow: IWorkflowDb;
+	readOnly?: boolean;
+}>();
+
+const $style = useCssModule();
+
+const rootStore = useRootStore();
+const canvasStore = useCanvasStore();
+const settingsStore = useSettingsStore();
+const sourceControlStore = useSourceControlStore();
+const tagsStore = useTagsStore();
+const uiStore = useUIStore();
+const usersStore = useUsersStore();
+const workflowsStore = useWorkflowsStore();
+
+const router = useRouter();
+const route = useRoute();
+
+const locale = useI18n();
+const telemetry = useTelemetry();
+const message = useMessage();
+const toast = useToast();
+const titleChange = useTitleChange();
+const workflowHelpers = useWorkflowHelpers({ router });
+
+const isTagsEditEnabled = ref(false);
+const isNameEditEnabled = ref(false);
+const appliedTagIds = ref<string[]>([]);
+const tagsSaving = ref(false);
+const importFileRef = ref<HTMLInputElement | undefined>();
+
+const tagsEventBus = createEventBus();
+const sourceControlModalEventBus = createEventBus();
+
+const hasChanged = (prev: string[], curr: string[]) => {
+	if (prev.length !== curr.length) {
+		return true;
+	}
+
+	const set = new Set(prev);
+	return curr.reduce((acc, val) => acc || !set.has(val), false);
+};
+
+const isNewWorkflow = computed(() => {
+	return (
+		!props.workflow.id ||
+		props.workflow.id === PLACEHOLDER_EMPTY_WORKFLOW_ID ||
+		props.workflow.id === 'new'
+	);
+});
+
+const isWorkflowSaving = computed(() => {
+	return uiStore.isActionActive('workflowSaving');
+});
+
+const onWorkflowPage = computed(() => {
+	return route.meta && (route.meta.nodeView || route.meta.keepWorkflowAlive === true);
+});
+
+const onExecutionsTab = computed(() => {
+	return [
+		VIEWS.EXECUTION_HOME.toString(),
+		VIEWS.WORKFLOW_EXECUTIONS.toString(),
+		VIEWS.EXECUTION_PREVIEW,
+	].includes((route.name as string) || '');
+});
+
+const workflowPermissions = computed(() => {
+	return getWorkflowPermissions(usersStore.currentUser, props.workflow);
+});
+
+const workflowMenuItems = computed<ActionDropdownItem[]>(() => {
+	const actions: ActionDropdownItem[] = [
+		{
+			id: WORKFLOW_MENU_ACTIONS.DOWNLOAD,
+			label: locale.baseText('menuActions.download'),
+			disabled: !onWorkflowPage.value,
+		},
+	];
+
+	if (!props.readOnly) {
+		actions.unshift({
+			id: WORKFLOW_MENU_ACTIONS.DUPLICATE,
+			label: locale.baseText('menuActions.duplicate'),
+			disabled: !onWorkflowPage.value || !props.workflow.id,
+		});
+
+		actions.push(
+			{
+				id: WORKFLOW_MENU_ACTIONS.IMPORT_FROM_URL,
+				label: locale.baseText('menuActions.importFromUrl'),
+				disabled: !onWorkflowPage.value || onExecutionsTab.value,
+			},
+			{
+				id: WORKFLOW_MENU_ACTIONS.IMPORT_FROM_FILE,
+				label: locale.baseText('menuActions.importFromFile'),
+				disabled: !onWorkflowPage.value || onExecutionsTab.value,
+			},
+		);
+	}
+
+	if (hasPermission(['rbac'], { rbac: { scope: 'sourceControl:push' } })) {
+		actions.push({
+			id: WORKFLOW_MENU_ACTIONS.PUSH,
+			label: locale.baseText('menuActions.push'),
+			disabled:
+				!sourceControlStore.isEnterpriseSourceControlEnabled ||
+				!onWorkflowPage.value ||
+				onExecutionsTab.value ||
+				sourceControlStore.preferences.branchReadOnly,
+		});
+	}
+
+	actions.push({
+		id: WORKFLOW_MENU_ACTIONS.SETTINGS,
+		label: locale.baseText('generic.settings'),
+		disabled: !onWorkflowPage.value || isNewWorkflow.value,
+	});
+
+	if (workflowPermissions.value.delete && !props.readOnly) {
+		actions.push({
+			id: WORKFLOW_MENU_ACTIONS.DELETE,
+			label: locale.baseText('menuActions.delete'),
+			disabled: !onWorkflowPage.value || isNewWorkflow.value,
+			customClass: $style.deleteItem,
+			divided: true,
+		});
+	}
+
+	return actions;
+});
+
+const isWorkflowHistoryFeatureEnabled = computed(() => {
+	return settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.WorkflowHistory);
+});
+
+const workflowHistoryRoute = computed<{ name: string; params: { workflowId: string } }>(() => {
+	return {
+		name: VIEWS.WORKFLOW_HISTORY,
+		params: {
+			workflowId: props.workflow.id,
+		},
+	};
+});
+
+const isWorkflowHistoryButtonDisabled = computed(() => {
+	return isNewWorkflow.value;
+});
+
+watch(
+	() => props.workflow.id,
+	() => {
+		isTagsEditEnabled.value = false;
+		isNameEditEnabled.value = false;
+	},
+);
+
+async function onSaveButtonClick() {
+	// If the workflow is saving, do not allow another save
+	if (isWorkflowSaving.value) {
+		return;
+	}
+
+	let id: string | undefined = undefined;
+	if (props.workflow.id !== PLACEHOLDER_EMPTY_WORKFLOW_ID) {
+		id = props.workflow.id;
+	} else if (route.params.name && route.params.name !== 'new') {
+		id = route.params.name as string;
+	}
+
+	const name = props.workflow.name;
+	const tags = props.workflow.tags as string[];
+
+	const saved = await workflowHelpers.saveCurrentWorkflow({
+		id,
+		name,
+		tags,
+	});
+
+	if (saved) {
+		await settingsStore.fetchPromptsData();
+
+		if (route.name === VIEWS.EXECUTION_DEBUG) {
+			await router.replace({
+				name: VIEWS.WORKFLOW,
+				params: { name: props.workflow.id },
+			});
+		}
+	}
+}
+
+function onShareButtonClick() {
+	uiStore.openModalWithData({
+		name: WORKFLOW_SHARE_MODAL_KEY,
+		data: { id: props.workflow.id },
+	});
+
+	telemetry.track('User opened sharing modal', {
+		workflow_id: props.workflow.id,
+		user_id_sharer: usersStore.currentUser?.id,
+		sub_view: route.name === VIEWS.WORKFLOWS ? 'Workflows listing' : 'Workflow editor',
+	});
+}
+
+function onTagsEditEnable() {
+	appliedTagIds.value = (props.workflow.tags ?? []) as string[];
+	isTagsEditEnabled.value = true;
+
+	setTimeout(() => {
+		// allow name update to occur before disabling name edit
+		isNameEditEnabled.value = false;
+		tagsEventBus.emit('focus');
+	}, 0);
+}
+
+async function onTagsBlur() {
+	const current = (props.workflow.tags ?? []) as string[];
+	const tags = appliedTagIds.value;
+	if (!hasChanged(current, tags)) {
+		isTagsEditEnabled.value = false;
+
+		return;
+	}
+	if (tagsSaving.value) {
+		return;
+	}
+	tagsSaving.value = true;
+
+	const saved = await workflowHelpers.saveCurrentWorkflow({ tags });
+	telemetry.track('User edited workflow tags', {
+		workflow_id: props.workflow.id,
+		new_tag_count: tags.length,
+	});
+
+	tagsSaving.value = false;
+	if (saved) {
+		isTagsEditEnabled.value = false;
+	}
+}
+
+function onTagsEditEsc() {
+	isTagsEditEnabled.value = false;
+}
+
+function onNameToggle() {
+	isNameEditEnabled.value = !isNameEditEnabled.value;
+	if (isNameEditEnabled.value) {
+		if (isTagsEditEnabled.value) {
+			void onTagsBlur();
+		}
+
+		isTagsEditEnabled.value = false;
+	}
+}
+
+async function onNameSubmit({
+	name,
+	onSubmit,
+}: {
+	name: string;
+	onSubmit: (saved: boolean) => void;
+}) {
+	const newName = name.trim();
+	if (!newName) {
+		toast.showMessage({
+			title: locale.baseText('workflowDetails.showMessage.title'),
+			message: locale.baseText('workflowDetails.showMessage.message'),
+			type: 'error',
+		});
+
+		onSubmit(false);
+		return;
+	}
+
+	if (newName === props.workflow.name) {
+		isNameEditEnabled.value = false;
+
+		onSubmit(true);
+		return;
+	}
+
+	uiStore.addActiveAction('workflowSaving');
+	const saved = await workflowHelpers.saveCurrentWorkflow({ name });
+	if (saved) {
+		isNameEditEnabled.value = false;
+	}
+	uiStore.removeActiveAction('workflowSaving');
+	onSubmit(saved);
+}
+
+async function handleFileImport(): Promise<void> {
+	const inputRef = importFileRef.value;
+	if (inputRef?.files && inputRef.files.length !== 0) {
+		const reader = new FileReader();
+		reader.onload = () => {
+			let workflowData: IWorkflowDataUpdate;
+			try {
+				workflowData = JSON.parse(reader.result as string);
+			} catch (error) {
+				toast.showMessage({
+					title: locale.baseText('mainSidebar.showMessage.handleFileImport.title'),
+					message: locale.baseText('mainSidebar.showMessage.handleFileImport.message'),
+					type: 'error',
+				});
+				return;
+			} finally {
+				reader.onload = null;
+				inputRef.value = '';
+			}
+
+			nodeViewEventBus.emit('importWorkflowData', { data: workflowData });
+		};
+		reader.readAsText(inputRef.files[0]);
+	}
+}
+
+async function onWorkflowMenuSelect(action: string): Promise<void> {
+	switch (action) {
+		case WORKFLOW_MENU_ACTIONS.DUPLICATE: {
+			uiStore.openModalWithData({
+				name: DUPLICATE_MODAL_KEY,
+				data: {
+					id: props.workflow.id,
+					name: props.workflow.name,
+					tags: props.workflow.tags,
+				},
+			});
+			break;
+		}
+		case WORKFLOW_MENU_ACTIONS.DOWNLOAD: {
+			const workflowData = await workflowHelpers.getWorkflowDataToSave();
+			const { tags, ...data } = workflowData;
+			const exportData: IWorkflowToShare = {
+				...data,
+				meta: {
+					...(props.workflow.meta ?? {}),
+					instanceId: rootStore.instanceId,
+				},
+				tags: (tags ?? []).map((tagId) => {
+					const { usageCount, ...tag } = tagsStore.getTagById(tagId);
+
+					return tag;
+				}),
+			};
+
+			const blob = new Blob([JSON.stringify(exportData, null, 2)], {
+				type: 'application/json;charset=utf-8',
+			});
+
+			let name = props.workflow.name || 'unsaved_workflow';
+			name = name.replace(/[^a-z0-9]/gi, '_');
+
+			telemetry.track('User exported workflow', { workflow_id: workflowData.id });
+			saveAs(blob, name + '.json');
+			break;
+		}
+		case WORKFLOW_MENU_ACTIONS.IMPORT_FROM_URL: {
+			try {
+				const promptResponse = (await message.prompt(
+					locale.baseText('mainSidebar.prompt.workflowUrl') + ':',
+					locale.baseText('mainSidebar.prompt.importWorkflowFromUrl') + ':',
+					{
+						confirmButtonText: locale.baseText('mainSidebar.prompt.import'),
+						cancelButtonText: locale.baseText('mainSidebar.prompt.cancel'),
+						inputErrorMessage: locale.baseText('mainSidebar.prompt.invalidUrl'),
+						inputPattern: /^http[s]?:\/\/.*\.json$/i,
+					},
+				)) as MessageBoxInputData;
+
+				if ((promptResponse as unknown as string) === 'cancel') {
+					return;
+				}
+
+				nodeViewEventBus.emit('importWorkflowUrl', { url: promptResponse.value });
+			} catch (e) {}
+			break;
+		}
+		case WORKFLOW_MENU_ACTIONS.IMPORT_FROM_FILE: {
+			importFileRef.value?.click();
+			break;
+		}
+		case WORKFLOW_MENU_ACTIONS.PUSH: {
+			canvasStore.startLoading();
+			try {
+				await onSaveButtonClick();
+
+				const status = await sourceControlStore.getAggregatedStatus();
+
+				uiStore.openModalWithData({
+					name: SOURCE_CONTROL_PUSH_MODAL_KEY,
+					data: { eventBus: sourceControlModalEventBus, status },
+				});
+			} catch (error) {
+				// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+				switch (error.message) {
+					case 'source_control_not_connected':
+						toast.showError(
+							{ ...error, message: '' },
+							locale.baseText('settings.sourceControl.error.not.connected.title'),
+							locale.baseText('settings.sourceControl.error.not.connected.message'),
+						);
+						break;
+					default:
+						toast.showError(error, locale.baseText('error'));
+				}
+			} finally {
+				canvasStore.stopLoading();
+			}
+
+			break;
+		}
+		case WORKFLOW_MENU_ACTIONS.SETTINGS: {
+			uiStore.openModal(WORKFLOW_SETTINGS_MODAL_KEY);
+			break;
+		}
+		case WORKFLOW_MENU_ACTIONS.DELETE: {
+			const deleteConfirmed = await message.confirm(
+				locale.baseText('mainSidebar.confirmMessage.workflowDelete.message', {
+					interpolate: { workflowName: props.workflow.name },
+				}),
+				locale.baseText('mainSidebar.confirmMessage.workflowDelete.headline'),
+				{
+					type: 'warning',
+					confirmButtonText: locale.baseText(
+						'mainSidebar.confirmMessage.workflowDelete.confirmButtonText',
+					),
+					cancelButtonText: locale.baseText(
+						'mainSidebar.confirmMessage.workflowDelete.cancelButtonText',
+					),
+				},
+			);
+
+			if (deleteConfirmed !== MODAL_CONFIRM) {
+				return;
+			}
+
+			try {
+				await workflowsStore.deleteWorkflow(props.workflow.id);
+			} catch (error) {
+				toast.showError(error, locale.baseText('generic.deleteWorkflowError'));
+				return;
+			}
+			uiStore.stateIsDirty = false;
+			// Reset tab title since workflow is deleted.
+			titleChange.titleReset();
+			toast.showMessage({
+				title: locale.baseText('mainSidebar.showMessage.handleSelect1.title'),
+				type: 'success',
+			});
+
+			await router.push({ name: VIEWS.NEW_WORKFLOW });
+			break;
+		}
+		default:
+			break;
+	}
+}
+
+function goToUpgrade() {
+	void uiStore.goToUpgrade('workflow_sharing', 'upgrade-workflow-sharing');
+}
+</script>
+
 <template>
-	<div v-if="workflowName" class="container">
+	<div class="container">
 		<BreakpointsObserver :value-x-s="15" :value-s-m="25" :value-m-d="50" class="name-container">
 			<template #default="{ value }">
 				<ShortenName
-					:name="workflowName"
+					:name="workflow.name"
 					:limit="value"
 					:custom="true"
 					test-id="workflow-name-input"
 				>
 					<template #default="{ shortenedName }">
 						<InlineTextEdit
-							:model-value="workflowName"
+							:model-value="workflow.name"
 							:preview-value="shortenedName"
 							:is-edit-enabled="isNameEditEnabled"
 							:max-length="MAX_WORKFLOW_NAME_LENGTH"
@@ -31,22 +551,22 @@
 				ref="dropdown"
 				v-model="appliedTagIds"
 				:create-enabled="true"
-				:event-bus="tagsEditBus"
+				:event-bus="tagsEventBus"
 				:placeholder="$locale.baseText('workflowDetails.chooseOrCreateATag')"
 				class="tags-edit"
 				data-test-id="workflow-tags-dropdown"
 				@blur="onTagsBlur"
 				@esc="onTagsEditEsc"
 			/>
-			<div v-else-if="currentWorkflowTagIds.length === 0 && !readOnly">
+			<div v-else-if="(workflow.tags ?? []).length === 0 && !readOnly">
 				<span class="add-tag clickable" data-test-id="new-tag-link" @click="onTagsEditEnable">
 					+ {{ $locale.baseText('workflowDetails.addTag') }}
 				</span>
 			</div>
 			<TagsContainer
 				v-else
-				:key="currentWorkflowId"
-				:tag-ids="currentWorkflowTagIds"
+				:key="workflow.id"
+				:tag-ids="workflow.tags"
 				:clickable="true"
 				:responsive="true"
 				data-test-id="workflow-tags"
@@ -57,28 +577,29 @@
 
 		<PushConnectionTracker class="actions">
 			<span :class="`activator ${$style.group}`">
-				<WorkflowActivator :workflow-active="isWorkflowActive" :workflow-id="currentWorkflowId" />
+				<WorkflowActivator :workflow-active="workflow.active" :workflow-id="workflow.id" />
 			</span>
-			<enterprise-edition :features="[EnterpriseEditionFeature.Sharing]">
+			<EnterpriseEdition :features="[EnterpriseEditionFeature.Sharing]">
 				<div :class="$style.group">
 					<CollaborationPane />
-					<n8n-button
+					<N8nButton
 						type="secondary"
 						data-test-id="workflow-share-button"
 						@click="onShareButtonClick"
 					>
 						{{ $locale.baseText('workflowDetails.share') }}
-					</n8n-button>
+					</N8nButton>
 				</div>
 				<template #fallback>
-					<n8n-tooltip>
-						<n8n-button type="secondary" :class="['mr-2xs', $style.disabledShareButton]">
+					<N8nTooltip>
+						<N8nButton type="secondary" :class="['mr-2xs', $style.disabledShareButton]">
 							{{ $locale.baseText('workflowDetails.share') }}
-						</n8n-button>
+						</N8nButton>
 						<template #content>
 							<i18n-t
 								:keypath="
-									contextBasedTranslationKeys.workflows.sharing.unavailable.description.tooltip
+									uiStore.contextBasedTranslationKeys.workflows.sharing.unavailable.description
+										.tooltip
 								"
 								tag="span"
 							>
@@ -86,30 +607,31 @@
 									<a @click="goToUpgrade">
 										{{
 											$locale.baseText(
-												contextBasedTranslationKeys.workflows.sharing.unavailable.button,
+												uiStore.contextBasedTranslationKeys.workflows.sharing.unavailable
+													.button as BaseTextKey,
 											)
 										}}
 									</a>
 								</template>
 							</i18n-t>
 						</template>
-					</n8n-tooltip>
+					</N8nTooltip>
 				</template>
-			</enterprise-edition>
+			</EnterpriseEdition>
 			<div :class="$style.group">
 				<SaveButton
 					type="primary"
-					:saved="!isDirty && !isNewWorkflow"
+					:saved="!uiStore.stateIsDirty && !isNewWorkflow"
 					:disabled="isWorkflowSaving || readOnly"
 					data-test-id="workflow-save-button"
 					@click="onSaveButtonClick"
 				/>
-				<router-link
+				<RouterLink
 					v-if="isWorkflowHistoryFeatureEnabled"
 					:to="workflowHistoryRoute"
 					:class="$style.workflowHistoryButton"
 				>
-					<n8n-icon-button
+					<N8nIconButton
 						:disabled="isWorkflowHistoryButtonDisabled"
 						data-test-id="workflow-history-button"
 						type="tertiary"
@@ -117,17 +639,17 @@
 						size="medium"
 						text
 					/>
-				</router-link>
+				</RouterLink>
 			</div>
 			<div :class="[$style.workflowMenuContainer, $style.group]">
 				<input
-					ref="importFile"
+					ref="importFileRef"
 					:class="$style.hiddenInput"
 					type="file"
 					data-test-id="workflow-import-input"
 					@change="handleFileImport()"
 				/>
-				<n8n-action-dropdown
+				<N8nActionDropdown
 					:items="workflowMenuItems"
 					data-test-id="workflow-menu"
 					@select="onWorkflowMenuSelect"
@@ -137,551 +659,6 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { mapStores } from 'pinia';
-
-import {
-	DUPLICATE_MODAL_KEY,
-	EnterpriseEditionFeature,
-	MAX_WORKFLOW_NAME_LENGTH,
-	MODAL_CONFIRM,
-	PLACEHOLDER_EMPTY_WORKFLOW_ID,
-	SOURCE_CONTROL_PUSH_MODAL_KEY,
-	VIEWS,
-	WORKFLOW_MENU_ACTIONS,
-	WORKFLOW_SETTINGS_MODAL_KEY,
-	WORKFLOW_SHARE_MODAL_KEY,
-} from '@/constants';
-
-import ShortenName from '@/components/ShortenName.vue';
-import TagsContainer from '@/components/TagsContainer.vue';
-import PushConnectionTracker from '@/components/PushConnectionTracker.vue';
-import WorkflowActivator from '@/components/WorkflowActivator.vue';
-import SaveButton from '@/components/SaveButton.vue';
-import TagsDropdown from '@/components/TagsDropdown.vue';
-import InlineTextEdit from '@/components/InlineTextEdit.vue';
-import BreakpointsObserver from '@/components/BreakpointsObserver.vue';
-import CollaborationPane from '@/components/MainHeader/CollaborationPane.vue';
-import type { IUser, IWorkflowDataUpdate, IWorkflowDb, IWorkflowToShare } from '@/Interface';
-
-import { saveAs } from 'file-saver';
-import { useTitleChange } from '@/composables/useTitleChange';
-import { useMessage } from '@/composables/useMessage';
-import { useToast } from '@/composables/useToast';
-import type { MessageBoxInputData } from 'element-plus';
-import { useRootStore } from '@/stores/n8nRoot.store';
-import { useSettingsStore } from '@/stores/settings.store';
-import { useSourceControlStore } from '@/stores/sourceControl.store';
-import { useTagsStore } from '@/stores/tags.store';
-import { useUIStore } from '@/stores/ui.store';
-import { useUsageStore } from '@/stores/usage.store';
-import { useUsersStore } from '@/stores/users.store';
-import { useWorkflowsStore } from '@/stores/workflows.store';
-import type { IPermissions } from '@/permissions';
-import { getWorkflowPermissions } from '@/permissions';
-import { createEventBus } from 'n8n-design-system/utils';
-import { nodeViewEventBus } from '@/event-bus';
-import { hasPermission } from '@/rbac/permissions';
-import { useCanvasStore } from '@/stores/canvas.store';
-import { useRouter } from 'vue-router';
-import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
-
-const hasChanged = (prev: string[], curr: string[]) => {
-	if (prev.length !== curr.length) {
-		return true;
-	}
-
-	const set = new Set(prev);
-	return curr.reduce((accu, val) => accu || !set.has(val), false);
-};
-
-export default defineComponent({
-	name: 'WorkflowDetails',
-	components: {
-		TagsContainer,
-		PushConnectionTracker,
-		ShortenName,
-		WorkflowActivator,
-		SaveButton,
-		TagsDropdown,
-		InlineTextEdit,
-		BreakpointsObserver,
-		CollaborationPane,
-	},
-	props: {
-		readOnly: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	setup() {
-		const router = useRouter();
-		const workflowHelpers = useWorkflowHelpers({ router });
-
-		return {
-			workflowHelpers,
-			...useTitleChange(),
-			...useToast(),
-			...useMessage(),
-		};
-	},
-	data() {
-		return {
-			isTagsEditEnabled: false,
-			isNameEditEnabled: false,
-			appliedTagIds: [],
-			tagsEditBus: createEventBus(),
-			MAX_WORKFLOW_NAME_LENGTH,
-			tagsSaving: false,
-			eventBus: createEventBus(),
-			EnterpriseEditionFeature,
-		};
-	},
-	computed: {
-		...mapStores(
-			useTagsStore,
-			useRootStore,
-			useSettingsStore,
-			useUIStore,
-			useUsageStore,
-			useWorkflowsStore,
-			useUsersStore,
-			useSourceControlStore,
-			useCanvasStore,
-		),
-		currentUser(): IUser | null {
-			return this.usersStore.currentUser;
-		},
-		contextBasedTranslationKeys() {
-			return this.uiStore.contextBasedTranslationKeys;
-		},
-		isWorkflowActive(): boolean {
-			return this.workflowsStore.isWorkflowActive;
-		},
-		workflowName(): string {
-			return this.workflowsStore.workflowName;
-		},
-		isDirty(): boolean {
-			return this.uiStore.stateIsDirty;
-		},
-		readOnlyEnv(): boolean {
-			return this.sourceControlStore.preferences.branchReadOnly;
-		},
-		currentWorkflowTagIds(): string[] {
-			return this.workflowsStore.workflowTags;
-		},
-		isNewWorkflow(): boolean {
-			return (
-				!this.currentWorkflowId ||
-				this.currentWorkflowId === PLACEHOLDER_EMPTY_WORKFLOW_ID ||
-				this.currentWorkflowId === 'new'
-			);
-		},
-		isWorkflowSaving(): boolean {
-			return this.uiStore.isActionActive('workflowSaving');
-		},
-		workflow(): IWorkflowDb {
-			return this.workflowsStore.workflow;
-		},
-		currentWorkflowId(): string {
-			return this.workflowsStore.workflowId;
-		},
-		onWorkflowPage(): boolean {
-			return (
-				this.$route.meta &&
-				(this.$route.meta.nodeView || this.$route.meta.keepWorkflowAlive === true)
-			);
-		},
-		onExecutionsTab(): boolean {
-			return [
-				VIEWS.EXECUTION_HOME.toString(),
-				VIEWS.WORKFLOW_EXECUTIONS.toString(),
-				VIEWS.EXECUTION_PREVIEW,
-			].includes(this.$route.name || '');
-		},
-		workflowPermissions(): IPermissions {
-			return getWorkflowPermissions(this.currentUser, this.workflow);
-		},
-		workflowMenuItems(): Array<{}> {
-			const actions = [
-				{
-					id: WORKFLOW_MENU_ACTIONS.DOWNLOAD,
-					label: this.$locale.baseText('menuActions.download'),
-					disabled: !this.onWorkflowPage,
-				},
-			];
-
-			if (!this.readOnly) {
-				actions.unshift({
-					id: WORKFLOW_MENU_ACTIONS.DUPLICATE,
-					label: this.$locale.baseText('menuActions.duplicate'),
-					disabled: !this.onWorkflowPage || !this.currentWorkflowId,
-				});
-
-				actions.push(
-					{
-						id: WORKFLOW_MENU_ACTIONS.IMPORT_FROM_URL,
-						label: this.$locale.baseText('menuActions.importFromUrl'),
-						disabled: !this.onWorkflowPage || this.onExecutionsTab,
-					},
-					{
-						id: WORKFLOW_MENU_ACTIONS.IMPORT_FROM_FILE,
-						label: this.$locale.baseText('menuActions.importFromFile'),
-						disabled: !this.onWorkflowPage || this.onExecutionsTab,
-					},
-				);
-			}
-
-			if (hasPermission(['rbac'], { rbac: { scope: 'sourceControl:push' } })) {
-				actions.push({
-					id: WORKFLOW_MENU_ACTIONS.PUSH,
-					label: this.$locale.baseText('menuActions.push'),
-					disabled:
-						!this.sourceControlStore.isEnterpriseSourceControlEnabled ||
-						!this.onWorkflowPage ||
-						this.onExecutionsTab ||
-						this.readOnlyEnv,
-				});
-			}
-
-			actions.push({
-				id: WORKFLOW_MENU_ACTIONS.SETTINGS,
-				label: this.$locale.baseText('generic.settings'),
-				disabled: !this.onWorkflowPage || this.isNewWorkflow,
-			});
-
-			if (this.workflowPermissions.delete && !this.readOnly) {
-				actions.push({
-					id: WORKFLOW_MENU_ACTIONS.DELETE,
-					label: this.$locale.baseText('menuActions.delete'),
-					disabled: !this.onWorkflowPage || this.isNewWorkflow,
-					customClass: this.$style.deleteItem,
-					divided: true,
-				});
-			}
-
-			return actions;
-		},
-		isWorkflowHistoryFeatureEnabled(): boolean {
-			return this.settingsStore.isEnterpriseFeatureEnabled(
-				EnterpriseEditionFeature.WorkflowHistory,
-			);
-		},
-		workflowHistoryRoute(): { name: string; params: { workflowId: string } } {
-			return {
-				name: VIEWS.WORKFLOW_HISTORY,
-				params: {
-					workflowId: this.currentWorkflowId,
-				},
-			};
-		},
-		isWorkflowHistoryButtonDisabled(): boolean {
-			return this.workflowsStore.isNewWorkflow;
-		},
-	},
-	watch: {
-		currentWorkflowId() {
-			this.isTagsEditEnabled = false;
-			this.isNameEditEnabled = false;
-		},
-	},
-	methods: {
-		async onSaveButtonClick() {
-			// If the workflow is saving, do not allow another save
-			if (this.isWorkflowSaving) {
-				return;
-			}
-			let currentId = undefined;
-			if (this.currentWorkflowId !== PLACEHOLDER_EMPTY_WORKFLOW_ID) {
-				currentId = this.currentWorkflowId;
-			} else if (this.$route.params.name && this.$route.params.name !== 'new') {
-				currentId = this.$route.params.name;
-			}
-			const saved = await this.workflowHelpers.saveCurrentWorkflow({
-				id: currentId,
-				name: this.workflowName,
-				tags: this.currentWorkflowTagIds,
-			});
-
-			if (saved) {
-				await this.settingsStore.fetchPromptsData();
-
-				if (this.$route.name === VIEWS.EXECUTION_DEBUG) {
-					await this.$router.replace({
-						name: VIEWS.WORKFLOW,
-						params: { name: this.currentWorkflowId },
-					});
-				}
-			}
-		},
-		onShareButtonClick() {
-			this.uiStore.openModalWithData({
-				name: WORKFLOW_SHARE_MODAL_KEY,
-				data: { id: this.currentWorkflowId },
-			});
-
-			this.$telemetry.track('User opened sharing modal', {
-				workflow_id: this.currentWorkflowId,
-				user_id_sharer: this.currentUser?.id,
-				sub_view: this.$route.name === VIEWS.WORKFLOWS ? 'Workflows listing' : 'Workflow editor',
-			});
-		},
-		onTagsEditEnable() {
-			this.appliedTagIds = this.currentWorkflowTagIds;
-			this.isTagsEditEnabled = true;
-
-			setTimeout(() => {
-				// allow name update to occur before disabling name edit
-				this.isNameEditEnabled = false;
-				this.tagsEditBus.emit('focus');
-			}, 0);
-		},
-
-		async onTagsBlur() {
-			const current = this.currentWorkflowTagIds;
-			const tags = this.appliedTagIds;
-			if (!hasChanged(current, tags)) {
-				this.isTagsEditEnabled = false;
-
-				return;
-			}
-			if (this.tagsSaving) {
-				return;
-			}
-			this.tagsSaving = true;
-
-			const saved = await this.workflowHelpers.saveCurrentWorkflow({ tags });
-			this.$telemetry.track('User edited workflow tags', {
-				workflow_id: this.currentWorkflowId,
-				new_tag_count: tags.length,
-			});
-
-			this.tagsSaving = false;
-			if (saved) {
-				this.isTagsEditEnabled = false;
-			}
-		},
-		onTagsEditEsc() {
-			this.isTagsEditEnabled = false;
-		},
-		onNameToggle() {
-			this.isNameEditEnabled = !this.isNameEditEnabled;
-			if (this.isNameEditEnabled) {
-				if (this.isTagsEditEnabled) {
-					// @ts-ignore
-					void this.onTagsBlur();
-				}
-
-				this.isTagsEditEnabled = false;
-			}
-		},
-		async onNameSubmit({
-			name,
-			onSubmit: cb,
-		}: {
-			name: string;
-			onSubmit: (saved: boolean) => void;
-		}) {
-			const newName = name.trim();
-			if (!newName) {
-				this.showMessage({
-					title: this.$locale.baseText('workflowDetails.showMessage.title'),
-					message: this.$locale.baseText('workflowDetails.showMessage.message'),
-					type: 'error',
-				});
-
-				cb(false);
-				return;
-			}
-
-			if (newName === this.workflowName) {
-				this.isNameEditEnabled = false;
-
-				cb(true);
-				return;
-			}
-			this.uiStore.addActiveAction('workflowSaving');
-			const saved = await this.workflowHelpers.saveCurrentWorkflow({ name });
-			if (saved) {
-				this.isNameEditEnabled = false;
-			}
-			this.uiStore.removeActiveAction('workflowSaving');
-			cb(saved);
-		},
-		async handleFileImport(): Promise<void> {
-			const inputRef = this.$refs.importFile as HTMLInputElement | undefined;
-			if (inputRef?.files && inputRef.files.length !== 0) {
-				const reader = new FileReader();
-				reader.onload = () => {
-					let workflowData: IWorkflowDataUpdate;
-					try {
-						workflowData = JSON.parse(reader.result as string);
-					} catch (error) {
-						this.showMessage({
-							title: this.$locale.baseText('mainSidebar.showMessage.handleFileImport.title'),
-							message: this.$locale.baseText('mainSidebar.showMessage.handleFileImport.message'),
-							type: 'error',
-						});
-						return;
-					} finally {
-						reader.onload = undefined;
-						inputRef.value = null;
-					}
-
-					nodeViewEventBus.emit('importWorkflowData', { data: workflowData });
-				};
-				reader.readAsText(inputRef.files[0]);
-			}
-		},
-		async onWorkflowMenuSelect(action: string): Promise<void> {
-			switch (action) {
-				case WORKFLOW_MENU_ACTIONS.DUPLICATE: {
-					this.uiStore.openModalWithData({
-						name: DUPLICATE_MODAL_KEY,
-						data: {
-							id: this.workflowsStore.workflowId,
-							name: this.workflowsStore.workflowName,
-							tags: this.workflowsStore.workflowTags,
-						},
-					});
-					break;
-				}
-				case WORKFLOW_MENU_ACTIONS.DOWNLOAD: {
-					const workflowData = await this.workflowHelpers.getWorkflowDataToSave();
-					const { tags, ...data } = workflowData;
-					const exportData: IWorkflowToShare = {
-						...data,
-						meta: {
-							...(this.workflowsStore.workflow.meta || {}),
-							instanceId: this.rootStore.instanceId,
-						},
-						tags: (tags || []).map((tagId) => {
-							const { usageCount, ...tag } = this.tagsStore.getTagById(tagId);
-
-							return tag;
-						}),
-					};
-
-					const blob = new Blob([JSON.stringify(exportData, null, 2)], {
-						type: 'application/json;charset=utf-8',
-					});
-
-					let workflowName = this.workflowName || 'unsaved_workflow';
-					workflowName = workflowName.replace(/[^a-z0-9]/gi, '_');
-
-					this.$telemetry.track('User exported workflow', { workflow_id: workflowData.id });
-					saveAs(blob, workflowName + '.json');
-					break;
-				}
-				case WORKFLOW_MENU_ACTIONS.IMPORT_FROM_URL: {
-					try {
-						const promptResponse = (await this.prompt(
-							this.$locale.baseText('mainSidebar.prompt.workflowUrl') + ':',
-							this.$locale.baseText('mainSidebar.prompt.importWorkflowFromUrl') + ':',
-							{
-								confirmButtonText: this.$locale.baseText('mainSidebar.prompt.import'),
-								cancelButtonText: this.$locale.baseText('mainSidebar.prompt.cancel'),
-								inputErrorMessage: this.$locale.baseText('mainSidebar.prompt.invalidUrl'),
-								inputPattern: /^http[s]?:\/\/.*\.json$/i,
-							},
-						)) as MessageBoxInputData;
-
-						if (promptResponse === 'cancel') {
-							return;
-						}
-
-						nodeViewEventBus.emit('importWorkflowUrl', { url: promptResponse.value });
-					} catch (e) {}
-					break;
-				}
-				case WORKFLOW_MENU_ACTIONS.IMPORT_FROM_FILE: {
-					(this.$refs.importFile as HTMLInputElement).click();
-					break;
-				}
-				case WORKFLOW_MENU_ACTIONS.PUSH: {
-					this.canvasStore.startLoading();
-					try {
-						await this.onSaveButtonClick();
-
-						const status = await this.sourceControlStore.getAggregatedStatus();
-
-						this.uiStore.openModalWithData({
-							name: SOURCE_CONTROL_PUSH_MODAL_KEY,
-							data: { eventBus: this.eventBus, status },
-						});
-					} catch (error) {
-						// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-						switch (error.message) {
-							case 'source_control_not_connected':
-								this.showError(
-									{ ...error, message: '' },
-									this.$locale.baseText('settings.sourceControl.error.not.connected.title'),
-									this.$locale.baseText('settings.sourceControl.error.not.connected.message'),
-								);
-								break;
-							default:
-								this.showError(error, this.$locale.baseText('error'));
-						}
-					} finally {
-						this.canvasStore.stopLoading();
-					}
-
-					break;
-				}
-				case WORKFLOW_MENU_ACTIONS.SETTINGS: {
-					this.uiStore.openModal(WORKFLOW_SETTINGS_MODAL_KEY);
-					break;
-				}
-				case WORKFLOW_MENU_ACTIONS.DELETE: {
-					const deleteConfirmed = await this.confirm(
-						this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.message', {
-							interpolate: { workflowName: this.workflowName },
-						}),
-						this.$locale.baseText('mainSidebar.confirmMessage.workflowDelete.headline'),
-						{
-							type: 'warning',
-							confirmButtonText: this.$locale.baseText(
-								'mainSidebar.confirmMessage.workflowDelete.confirmButtonText',
-							),
-							cancelButtonText: this.$locale.baseText(
-								'mainSidebar.confirmMessage.workflowDelete.cancelButtonText',
-							),
-						},
-					);
-
-					if (deleteConfirmed !== MODAL_CONFIRM) {
-						return;
-					}
-
-					try {
-						await this.workflowsStore.deleteWorkflow(this.currentWorkflowId);
-					} catch (error) {
-						this.showError(error, this.$locale.baseText('generic.deleteWorkflowError'));
-						return;
-					}
-					this.uiStore.stateIsDirty = false;
-					// Reset tab title since workflow is deleted.
-					this.titleReset();
-					this.showMessage({
-						title: this.$locale.baseText('mainSidebar.showMessage.handleSelect1.title'),
-						type: 'success',
-					});
-
-					await this.$router.push({ name: VIEWS.NEW_WORKFLOW });
-					break;
-				}
-				default:
-					break;
-			}
-		},
-		goToUpgrade() {
-			void this.uiStore.goToUpgrade('workflow_sharing', 'upgrade-workflow-sharing');
-		},
-	},
-});
-</script>
-
 <style scoped lang="scss">
 $--text-line-height: 24px;
 $--header-spacing: 20px;
diff --git a/packages/editor-ui/src/components/TagsDropdown.vue b/packages/editor-ui/src/components/TagsDropdown.vue
index f0fdf49e4e743..7f321b3a81c5c 100644
--- a/packages/editor-ui/src/components/TagsDropdown.vue
+++ b/packages/editor-ui/src/components/TagsDropdown.vue
@@ -318,7 +318,7 @@ export default defineComponent({
 	}
 
 	.el-tag {
-		padding: 1px var(--spacing-4xs);
+		padding: var(--spacing-5xs) var(--spacing-4xs);
 		color: var(--color-text-dark);
 		background-color: var(--color-background-base);
 		border-radius: var(--border-radius-base);
diff --git a/packages/editor-ui/src/composables/useContextMenu.ts b/packages/editor-ui/src/composables/useContextMenu.ts
index b4aa25b9e3ef6..8517bb89c4e73 100644
--- a/packages/editor-ui/src/composables/useContextMenu.ts
+++ b/packages/editor-ui/src/composables/useContextMenu.ts
@@ -1,10 +1,9 @@
-import type { XYPosition } from '@/Interface';
+import type { ActionDropdownItem, XYPosition } from '@/Interface';
 import { NOT_DUPLICATABE_NODE_TYPES, STICKY_NODE_TYPE } from '@/constants';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useSourceControlStore } from '@/stores/sourceControl.store';
 import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
-import type { IActionDropdownItem } from 'n8n-design-system/src/components/N8nActionDropdown/ActionDropdown.vue';
 import type { INode, INodeTypeDescription } from 'n8n-workflow';
 import { computed, ref, watch } from 'vue';
 import { getMousePosition } from '../utils/nodeViewUtils';
@@ -34,7 +33,7 @@ export type ContextMenuAction =
 const position = ref<XYPosition>([0, 0]);
 const isOpen = ref(false);
 const target = ref<ContextMenuTarget>({ source: 'canvas' });
-const actions = ref<IActionDropdownItem[]>([]);
+const actions = ref<ActionDropdownItem[]>([]);
 const actionCallback = ref<ContextMenuActionCallback>(() => {});
 
 export const useContextMenu = (onAction: ContextMenuActionCallback = () => {}) => {
@@ -147,7 +146,7 @@ export const useContextMenu = (onAction: ContextMenuActionCallback = () => {}) =
 				...selectionActions,
 			];
 		} else {
-			const menuActions: IActionDropdownItem[] = [
+			const menuActions: ActionDropdownItem[] = [
 				!onlyStickies && {
 					id: 'toggle_activation',
 					label: nodes.every((node) => node.disabled)
@@ -183,7 +182,7 @@ export const useContextMenu = (onAction: ContextMenuActionCallback = () => {}) =
 					shortcut: { keys: ['Del'] },
 					disabled: isReadOnly.value,
 				},
-			].filter(Boolean) as IActionDropdownItem[];
+			].filter(Boolean) as ActionDropdownItem[];
 
 			if (nodes.length === 1) {
 				const singleNodeActions = onlyStickies
diff --git a/packages/editor-ui/src/n8n-theme.scss b/packages/editor-ui/src/n8n-theme.scss
index 97503a8dd41d3..4ef2e828d40ff 100644
--- a/packages/editor-ui/src/n8n-theme.scss
+++ b/packages/editor-ui/src/n8n-theme.scss
@@ -354,7 +354,7 @@
 		font-size: 12px;
 		font-weight: 400;
 		display: flex;
-		align-items: flex-end;
+		align-items: center;
 
 		&.is-closable {
 			overflow-y: hidden;
@@ -363,7 +363,7 @@
 		.el-tag__close {
 			max-height: 15px;
 			max-width: 15px;
-			margin-right: 6px;
+			margin-left: var(--spacing-4xs);
 
 			&:hover {
 				background-color: $tag-close-background-hover-color !important;