@n8n/frontend-module-mcp 0.1.0

package/src/components/WorkflowLocation.test.ts

@@ -0,0 +1,329 @@
+import { createComponentRenderer } from '@n8n/frontend-test-utils';
+import WorkflowLocation from './WorkflowLocation.vue';
+import { createHomeProject, createParentFolder } from '../mcp.test.utils';
+
+vi.mock('vue-router', async (importOriginal) => ({
+	...(await importOriginal()),
+	useRouter: () => ({
+		resolve: vi.fn(({ name, params }) => {
+			if (name === 'NodeViewExisting') {
+				return { fullPath: `/workflows/${params.workflowId}` };
+			}
+			if (name === 'ProjectsWorkflows') {
+				return { fullPath: `/projects/${params.projectId}` };
+			}
+			return { fullPath: '/' };
+		}),
+	}),
+}));
+
+const createComponent = createComponentRenderer(WorkflowLocation);
+
+describe('WorkflowLocation', () => {
+	afterEach(() => {
+		vi.clearAllMocks();
+	});
+
+	describe('Project rendering', () => {
+		it('should render project name for team project', () => {
+			const { getByTestId } = createComponent({
+				props: {
+					workflowId: 'workflow-1',
+					workflowName: 'My Workflow',
+					homeProject: createHomeProject({ name: 'My Team Project', type: 'team' }),
+				},
+			});
+
+			expect(getByTestId('workflow-location-project-name')).toHaveTextContent('My Team Project');
+		});
+
+		it('should render "Personal" for personal project type', () => {
+			const { getByTestId } = createComponent({
+				props: {
+					workflowId: 'workflow-1',
+					workflowName: 'My Workflow',
+					homeProject: createHomeProject({ name: 'User<user@n8n.io>', type: 'personal' }),
+				},
+			});
+
+			expect(getByTestId('workflow-location-project-name')).toHaveTextContent('Personal');
+		});
+
+		it('should not render project when homeProject is not provided', () => {
+			const { queryByTestId } = createComponent({
+				props: {
+					workflowId: 'workflow-1',
+					workflowName: 'My Workflow',
+				},
+			});
+
+			expect(queryByTestId('workflow-location-project-name')).not.toBeInTheDocument();
+		});
+	});
+
+	describe('Folder rendering', () => {
+		it('should render folder name when parentFolder is provided', () => {
+			const { getByTestId } = createComponent({
+				props: {
+					workflowId: 'workflow-1',
+					workflowName: 'My Workflow',
+					homeProject: createHomeProject(),
+					parentFolder: createParentFolder({ name: 'My Folder' }),
+				},
+			});
+
+			expect(getByTestId('workflow-location-folder-name')).toHaveTextContent('My Folder');
+		});
+
+		it('should not render folder when parentFolder is not provided', () => {
+			const { queryByTestId } = createComponent({
+				props: {
+					workflowId: 'workflow-1',
+					workflowName: 'My Workflow',
+					homeProject: createHomeProject(),
+				},
+			});
+
+			expect(queryByTestId('workflow-location-folder-name')).not.toBeInTheDocument();
+		});
+
+		it('should render ellipsis when folder has a grandparent folder', () => {
+			const { getByTestId } = createComponent({
+				props: {
+					workflowId: 'workflow-1',
+					workflowName: 'My Workflow',
+					homeProject: createHomeProject(),
+					parentFolder: createParentFolder({ parentFolderId: 'grandparent-folder-id' }),
+				},
+			});
+
+			expect(getByTestId('workflow-location-grandparent')).toBeVisible();
+			expect(getByTestId('workflow-location-ellipsis-separator')).toBeVisible();
+		});
+
+		it('should not render ellipsis when folder is in project root', () => {
+			const { queryByTestId } = createComponent({
+				props: {
+					workflowId: 'workflow-1',
+					workflowName: 'My Workflow',
+					homeProject: createHomeProject(),
+					parentFolder: createParentFolder({ parentFolderId: null }),
+				},
+			});
+
+			expect(queryByTestId('workflow-location-grandparent')).not.toBeInTheDocument();
+		});
+	});
+
+	describe('Workflow name rendering', () => {
+		it('should render workflow name', () => {
+			const { getByTestId } = createComponent({
+				props: {
+					workflowId: 'workflow-1',
+					workflowName: 'My Awesome Workflow',
+					homeProject: createHomeProject(),
+				},
+			});
+
+			expect(getByTestId('workflow-location-workflow-name')).toHaveTextContent(
+				'My Awesome Workflow',
+			);
+		});
+
+		it('should not render workflow name when empty', () => {
+			const { queryByTestId } = createComponent({
+				props: {
+					workflowId: 'workflow-1',
+					workflowName: '',
+					homeProject: createHomeProject(),
+				},
+			});
+
+			expect(queryByTestId('workflow-location-workflow-name')).not.toBeInTheDocument();
+		});
+	});
+
+	describe('Separators', () => {
+		it('should render separator between project and workflow name', () => {
+			const { getByTestId } = createComponent({
+				props: {
+					workflowId: 'workflow-1',
+					workflowName: 'My Workflow',
+					homeProject: createHomeProject(),
+				},
+			});
+
+			expect(getByTestId('workflow-location-separator')).toBeVisible();
+		});
+
+		it('should render separator between project and folder', () => {
+			const { getAllByText } = createComponent({
+				props: {
+					workflowId: 'workflow-1',
+					workflowName: 'My Workflow',
+					homeProject: createHomeProject(),
+					parentFolder: createParentFolder(),
+				},
+			});
+
+			// Should have multiple separators (project/folder and folder/workflow)
+			const separators = getAllByText('/');
+			expect(separators.length).toBeGreaterThanOrEqual(2);
+		});
+
+		it('should not render separator when no workflow name or folder', () => {
+			const { queryByTestId } = createComponent({
+				props: {
+					workflowId: 'workflow-1',
+					workflowName: '',
+					homeProject: createHomeProject(),
+				},
+			});
+
+			expect(queryByTestId('workflow-location-separator')).not.toBeInTheDocument();
+		});
+	});
+
+	describe('Links rendering (asLinks=true)', () => {
+		it('should render project as link when asLinks is true', () => {
+			const { getByTestId } = createComponent({
+				props: {
+					workflowId: 'workflow-1',
+					workflowName: 'My Workflow',
+					homeProject: createHomeProject({ id: 'project-123' }),
+					asLinks: true,
+				},
+			});
+
+			const projectLink = getByTestId('workflow-location-project-link');
+			expect(projectLink).toBeInTheDocument();
+			expect(projectLink).toHaveAttribute('href', '/projects/project-123');
+		});
+
+		it('should render folder as link when asLinks is true', () => {
+			const { getByTestId } = createComponent({
+				props: {
+					workflowId: 'workflow-1',
+					workflowName: 'My Workflow',
+					homeProject: createHomeProject({ id: 'project-123' }),
+					parentFolder: createParentFolder({ id: 'folder-456' }),
+					asLinks: true,
+				},
+			});
+
+			const folderLink = getByTestId('workflow-location-folder-link');
+			expect(folderLink).toBeInTheDocument();
+			expect(folderLink).toHaveAttribute(
+				'href',
+				'/projects/project-123/folders/folder-456/workflows',
+			);
+		});
+
+		it('should render workflow name as link when asLinks is true', () => {
+			const { getByTestId } = createComponent({
+				props: {
+					workflowId: 'workflow-789',
+					workflowName: 'My Workflow',
+					homeProject: createHomeProject(),
+					asLinks: true,
+				},
+			});
+
+			const workflowLink = getByTestId('workflow-location-workflow-link');
+			expect(workflowLink).toBeInTheDocument();
+			expect(workflowLink).toHaveAttribute('href', '/workflows/workflow-789');
+		});
+	});
+
+	describe('Text rendering (asLinks=false)', () => {
+		it('should render project as plain text when asLinks is false', () => {
+			const { getByTestId, queryByTestId } = createComponent({
+				props: {
+					workflowId: 'workflow-1',
+					workflowName: 'My Workflow',
+					homeProject: createHomeProject(),
+					asLinks: false,
+				},
+			});
+
+			expect(getByTestId('workflow-location-project-name')).toBeInTheDocument();
+			expect(queryByTestId('workflow-location-project-link')).not.toBeInTheDocument();
+		});
+
+		it('should render folder as plain text when asLinks is false', () => {
+			const { getByTestId, queryByTestId } = createComponent({
+				props: {
+					workflowId: 'workflow-1',
+					workflowName: 'My Workflow',
+					homeProject: createHomeProject(),
+					parentFolder: createParentFolder(),
+					asLinks: false,
+				},
+			});
+
+			expect(getByTestId('workflow-location-folder-name')).toBeInTheDocument();
+			expect(queryByTestId('workflow-location-folder-link')).not.toBeInTheDocument();
+		});
+
+		it('should render workflow name as plain text when asLinks is false', () => {
+			const { getByTestId, queryByTestId } = createComponent({
+				props: {
+					workflowId: 'workflow-1',
+					workflowName: 'My Workflow',
+					homeProject: createHomeProject(),
+					asLinks: false,
+				},
+			});
+
+			expect(getByTestId('workflow-location-workflow-name')).toBeInTheDocument();
+			expect(queryByTestId('workflow-location-workflow-link')).not.toBeInTheDocument();
+		});
+	});
+
+	describe('Full location path rendering', () => {
+		it('should render complete path: Project / Folder / Workflow', () => {
+			const { getByTestId } = createComponent({
+				props: {
+					workflowId: 'workflow-1',
+					workflowName: 'My Workflow',
+					homeProject: createHomeProject({ name: 'My Project' }),
+					parentFolder: createParentFolder({ name: 'My Folder' }),
+				},
+			});
+
+			expect(getByTestId('workflow-location-project-name')).toHaveTextContent('My Project');
+			expect(getByTestId('workflow-location-folder-name')).toHaveTextContent('My Folder');
+			expect(getByTestId('workflow-location-workflow-name')).toHaveTextContent('My Workflow');
+		});
+
+		it('should render path with ellipsis for nested folder: Project / ... / Folder / Workflow', () => {
+			const { getByTestId } = createComponent({
+				props: {
+					workflowId: 'workflow-1',
+					workflowName: 'My Workflow',
+					homeProject: createHomeProject({ name: 'My Project' }),
+					parentFolder: createParentFolder({ name: 'Nested Folder', parentFolderId: 'parent-id' }),
+				},
+			});
+
+			expect(getByTestId('workflow-location-project-name')).toHaveTextContent('My Project');
+			expect(getByTestId('workflow-location-grandparent')).toBeVisible();
+			expect(getByTestId('workflow-location-folder-name')).toHaveTextContent('Nested Folder');
+			expect(getByTestId('workflow-location-workflow-name')).toHaveTextContent('My Workflow');
+		});
+
+		it('should render minimal path: Project only', () => {
+			const { getByTestId, queryByTestId } = createComponent({
+				props: {
+					workflowId: 'workflow-1',
+					workflowName: '',
+					homeProject: createHomeProject({ name: 'My Project' }),
+				},
+			});
+
+			expect(getByTestId('workflow-location-project-name')).toHaveTextContent('My Project');
+			expect(queryByTestId('workflow-location-folder-name')).not.toBeInTheDocument();
+			expect(queryByTestId('workflow-location-workflow-name')).not.toBeInTheDocument();
+		});
+	});
+});

package/src/components/WorkflowLocation.vue

@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from '@n8n/i18n';
+import { N8nLink, N8nText } from '@n8n/design-system';
+import { VIEWS } from '@n8n/frontend-constants/views';
+import type { ProjectSharingData } from 'n8n-workflow';
+import { useRouter } from 'vue-router';
+
+type ParentFolder = {
+	id: string;
+	name: string;
+	parentFolderId: string | null;
+};
+
+// If workflow name is not provided, only project and folder (if any) will be shown.
+const props = withDefaults(
+	defineProps<{
+		workflowId: string;
+		workflowName?: string;
+		homeProject?: ProjectSharingData;
+		parentFolder?: ParentFolder;
+		asLinks?: boolean;
+	}>(),
+	{
+		workflowName: undefined,
+		homeProject: undefined,
+		parentFolder: undefined,
+		asLinks: false,
+	},
+);
+
+const i18n = useI18n();
+const router = useRouter();
+
+const projectName = computed(() => {
+	if (props.homeProject?.type === 'personal') {
+		return i18n.baseText('projects.menu.personal');
+	}
+	return props.homeProject?.name ?? '';
+});
+
+const projectLink = computed(() => {
+	if (!props.homeProject) return '';
+	return router.resolve({
+		name: VIEWS.PROJECTS_WORKFLOWS,
+		params: { projectId: props.homeProject.id },
+	}).fullPath;
+});
+
+const folderLink = computed(() => {
+	if (!props.homeProject || !props.parentFolder) return '';
+	return `/projects/${props.homeProject.id}/folders/${props.parentFolder.id}/workflows`;
+});
+
+const workflowLink = computed(() => {
+	if (!props.workflowId) return '';
+	return router.resolve({
+		name: VIEWS.WORKFLOW,
+		params: { workflowId: props.workflowId },
+	}).fullPath;
+});
+
+const hasGrandparentFolder = computed(() => !!props.parentFolder?.parentFolderId);
+</script>
+
+<template>
+	<div :class="$style['location-container']">
+		<!-- Project -->
+		<span v-if="homeProject" :class="$style.truncate">
+			<N8nLink
+				v-if="asLinks"
+				data-test-id="workflow-location-project-link"
+				:to="projectLink"
+				:theme="'text'"
+				:class="[$style['location-link'], $style.truncate]"
+				:new-window="true"
+			>
+				<N8nText :class="$style.truncate" data-test-id="workflow-location-project-name">
+					{{ projectName }}
+				</N8nText>
+			</N8nLink>
+			<N8nText v-else :class="$style.truncate" data-test-id="workflow-location-project-name">
+				{{ projectName }}
+			</N8nText>
+		</span>
+
+		<!-- Separator after project -->
+		<span
+			v-if="parentFolder || workflowName"
+			:class="$style.separator"
+			data-test-id="workflow-location-separator"
+		>
+			/
+		</span>
+
+		<!-- Ellipsis for grandparent folder -->
+		<span
+			v-if="hasGrandparentFolder"
+			:class="$style.grandparent"
+			data-test-id="workflow-location-grandparent"
+		>
+			<span :class="$style.ellipsis">...</span>
+			<span :class="$style.separator" data-test-id="workflow-location-ellipsis-separator">/</span>
+		</span>
+
+		<!-- Parent folder -->
+		<span v-if="parentFolder" :class="$style['parent-folder']">
+			<N8nLink
+				v-if="asLinks && homeProject"
+				data-test-id="workflow-location-folder-link"
+				:to="folderLink"
+				:theme="'text'"
+				:class="[$style['location-link'], $style.truncate]"
+				:new-window="true"
+			>
+				<N8nText :class="$style.truncate" data-test-id="workflow-location-folder-name">
+					{{ parentFolder.name }}
+				</N8nText>
+			</N8nLink>
+			<N8nText v-else :class="$style.truncate" data-test-id="workflow-location-folder-name">
+				{{ parentFolder.name }}
+			</N8nText>
+		</span>
+
+		<!-- Separator before workflow name -->
+		<span v-if="parentFolder && workflowName" :class="$style.separator">/</span>
+
+		<!-- Workflow name -->
+		<span v-if="workflowName" :class="[$style['workflow-name'], $style.truncate]">
+			<N8nLink
+				v-if="asLinks && workflowId"
+				data-test-id="workflow-location-workflow-link"
+				:to="workflowLink"
+				:theme="'text'"
+				:class="[$style['location-link'], $style.truncate]"
+				:new-window="true"
+			>
+				<N8nText :class="$style.truncate" data-test-id="workflow-location-workflow-name">
+					{{ workflowName }}
+				</N8nText>
+			</N8nLink>
+			<N8nText v-else :class="$style.truncate" data-test-id="workflow-location-workflow-name">
+				{{ workflowName }}
+			</N8nText>
+		</span>
+	</div>
+</template>
+
+<style module lang="scss">
+.location-container {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing--4xs);
+	color: var(--color--text);
+	min-width: 0;
+	overflow: hidden;
+}
+
+.ellipsis {
+	padding-right: var(--spacing--4xs);
+}
+
+.ellipsis,
+.separator {
+	user-select: none;
+	color: var(--color--text--tint-1);
+}
+
+.grandparent {
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
+}
+
+.parent-folder {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing--4xs);
+	min-width: 0;
+	overflow: hidden;
+}
+
+.truncate {
+	display: block;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	min-width: 0;
+}
+
+.location-link {
+	color: var(--color--text);
+}
+
+.workflow-name {
+	color: var(--color--text--shade-1);
+}
+</style>