refactor(editor): Migrate header WorkflowDetails to composition api (no-changelog) (#9186)

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;
 		},

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();
+	});
+});

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);