@n8n/frontend-module-mcp 0.1.0

package/src/components/MCPWorkflowsSelect.test.ts

@@ -0,0 +1,384 @@
+import { nextTick } from 'vue';
+import { createTestingPinia } from '@pinia/testing';
+import { waitFor } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { createComponentRenderer, mockedStore, type MockedStore } from '@n8n/frontend-test-utils';
+import MCPWorkflowsSelect from './MCPWorkflowsSelect.vue';
+import { useMCPStore } from '../mcp.store';
+import { createWorkflow } from '../mcp.test.utils';
+import type { McpWorkflow } from '../mcp.types';
+
+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: '/' };
+		}),
+	}),
+}));
+
+let pinia: ReturnType<typeof createTestingPinia>;
+let mcpStore: MockedStore<typeof useMCPStore>;
+
+const createComponent = createComponentRenderer(MCPWorkflowsSelect);
+
+describe('MCPWorkflowsSelect', () => {
+	beforeEach(() => {
+		pinia = createTestingPinia();
+		mcpStore = mockedStore(useMCPStore);
+		mcpStore.getMcpEligibleWorkflows.mockResolvedValue({
+			count: 0,
+			data: [],
+		});
+	});
+
+	afterEach(() => {
+		vi.clearAllMocks();
+	});
+
+	describe('Initial rendering', () => {
+		it('should render the select component', async () => {
+			const { getByTestId } = createComponent({ pinia });
+			await nextTick();
+
+			expect(getByTestId('mcp-workflows-select')).toBeInTheDocument();
+		});
+
+		it('should render with placeholder prop', async () => {
+			const { getByTestId } = createComponent({
+				pinia,
+				props: {
+					placeholder: 'Search workflows...',
+				},
+			});
+			await nextTick();
+
+			const select = getByTestId('mcp-workflows-select');
+			// In multiple mode the placeholder lives on the main input, not the inline filter input
+			const inputs = Array.from(select.querySelectorAll('input'));
+			expect(
+				inputs.some((input) => input.getAttribute('placeholder') === 'Search workflows...'),
+			).toBe(true);
+		});
+
+		it('should render as disabled when disabled prop is true', async () => {
+			const { container } = createComponent({
+				pinia,
+				props: {
+					disabled: true,
+				},
+			});
+			await nextTick();
+
+			// The disabled class is applied to the inner el-select element
+			const elSelect = container.querySelector('.el-select');
+			expect(elSelect).toHaveClass('el-select--disabled');
+		});
+	});
+
+	describe('Fetching workflows on mount', () => {
+		it('should fetch workflows on mount', async () => {
+			createComponent({ pinia });
+			await nextTick();
+
+			expect(mcpStore.getMcpEligibleWorkflows).toHaveBeenCalledWith({
+				take: 10,
+				query: undefined,
+			});
+		});
+
+		it('should handle async workflow fetching', async () => {
+			// Create a promise that doesn't resolve immediately
+			let resolvePromise: (value: { count: number; data: McpWorkflow[] }) => void;
+			mcpStore.getMcpEligibleWorkflows.mockImplementation(
+				async () =>
+					await new Promise((resolve) => {
+						resolvePromise = resolve;
+					}),
+			);
+
+			const { getByTestId } = createComponent({ pinia });
+			await nextTick();
+
+			// The component should be rendered while loading
+			expect(getByTestId('mcp-workflows-select')).toBeInTheDocument();
+
+			// Resolve the promise with workflows
+			const workflows = [createWorkflow({ id: 'wf-1', name: 'Test Workflow' })];
+			resolvePromise!({ count: 1, data: workflows });
+
+			await nextTick();
+
+			// Verify the API was called
+			expect(mcpStore.getMcpEligibleWorkflows).toHaveBeenCalled();
+		});
+	});
+
+	describe('Workflow options rendering', () => {
+		it('should render workflow options after fetching', async () => {
+			const workflows = [
+				createWorkflow({ id: 'wf-1', name: 'Workflow One' }),
+				createWorkflow({ id: 'wf-2', name: 'Workflow Two' }),
+			];
+
+			mcpStore.getMcpEligibleWorkflows.mockResolvedValue({
+				count: 2,
+				data: workflows,
+			});
+
+			const { getByTestId } = createComponent({ pinia });
+			await nextTick();
+
+			// Wait for loading to complete
+			await waitFor(() => {
+				expect(mcpStore.getMcpEligibleWorkflows).toHaveBeenCalled();
+			});
+
+			const select = getByTestId('mcp-workflows-select');
+			await userEvent.click(select);
+
+			await waitFor(() => {
+				const options = document.querySelectorAll('.el-select-dropdown__item');
+				expect(options.length).toBe(2);
+			});
+		});
+
+		it('should show empty state when no workflows are returned', async () => {
+			mcpStore.getMcpEligibleWorkflows.mockResolvedValue({
+				count: 0,
+				data: [],
+			});
+
+			const { getByTestId } = createComponent({ pinia });
+			await nextTick();
+
+			// Wait for the fetch to complete
+			await waitFor(() => {
+				expect(mcpStore.getMcpEligibleWorkflows).toHaveBeenCalled();
+			});
+
+			const select = getByTestId('mcp-workflows-select');
+			await userEvent.click(select);
+
+			await waitFor(() => {
+				const emptyText = document.querySelector('.el-select-dropdown__empty');
+				expect(emptyText).toBeInTheDocument();
+			});
+		});
+	});
+
+	describe('Remote search', () => {
+		it('should search workflows when user types in input', async () => {
+			mcpStore.getMcpEligibleWorkflows.mockResolvedValue({
+				count: 0,
+				data: [],
+			});
+
+			const { getByTestId } = createComponent({ pinia });
+			await nextTick();
+
+			// Wait for initial fetch
+			await waitFor(() => {
+				expect(mcpStore.getMcpEligibleWorkflows).toHaveBeenCalled();
+			});
+
+			// Clear mocks to track new calls
+			mcpStore.getMcpEligibleWorkflows.mockClear();
+			mcpStore.getMcpEligibleWorkflows.mockResolvedValue({
+				count: 1,
+				data: [createWorkflow({ id: 'wf-1', name: 'Searched Workflow' })],
+			});
+
+			const select = getByTestId('mcp-workflows-select');
+			const input = select.querySelector('input');
+
+			if (input) {
+				await userEvent.type(input, 'test');
+			}
+
+			await waitFor(() => {
+				expect(mcpStore.getMcpEligibleWorkflows).toHaveBeenCalledWith({
+					take: 10,
+					query: 'test',
+				});
+			});
+		});
+	});
+
+	describe('v-model binding', () => {
+		it('should collect selected options into the modelValue array', async () => {
+			const workflows = [
+				createWorkflow({ id: 'wf-1', name: 'Selectable Workflow' }),
+				createWorkflow({ id: 'wf-2', name: 'Another Workflow' }),
+			];
+			mcpStore.getMcpEligibleWorkflows.mockResolvedValue({
+				count: 2,
+				data: workflows,
+			});
+
+			const { getByTestId, emitted } = createComponent({ pinia });
+			await nextTick();
+
+			// Wait for fetch to complete
+			await waitFor(() => {
+				expect(mcpStore.getMcpEligibleWorkflows).toHaveBeenCalled();
+			});
+
+			const select = getByTestId('mcp-workflows-select');
+			await userEvent.click(select);
+
+			await waitFor(() => {
+				const options = document.querySelectorAll('.el-select-dropdown__item');
+				expect(options.length).toBe(2);
+			});
+
+			const options = document.querySelectorAll('.el-select-dropdown__item');
+			await userEvent.click(options[0]);
+
+			await waitFor(() => {
+				expect(emitted('update:modelValue')).toBeTruthy();
+				expect(emitted('update:modelValue')[0]).toEqual([['wf-1']]);
+			});
+
+			await userEvent.click(options[1]);
+
+			await waitFor(() => {
+				expect(emitted('update:modelValue')[1]).toEqual([['wf-1', 'wf-2']]);
+			});
+		});
+	});
+
+	describe('WorkflowLocation rendering in options', () => {
+		it('should render workflow location with project name', async () => {
+			const workflows = [
+				createWorkflow({
+					id: 'wf-1',
+					name: 'My Workflow',
+					homeProject: {
+						id: 'project-1',
+						type: 'team',
+						name: 'Team Project',
+						icon: null,
+						createdAt: '2025-01-01',
+						updatedAt: '2025-01-01',
+					},
+				}),
+			];
+
+			mcpStore.getMcpEligibleWorkflows.mockResolvedValue({
+				count: 1,
+				data: workflows,
+			});
+
+			const { getByTestId } = createComponent({ pinia });
+			await nextTick();
+
+			// Wait for fetch to complete
+			await waitFor(() => {
+				expect(mcpStore.getMcpEligibleWorkflows).toHaveBeenCalled();
+			});
+
+			const select = getByTestId('mcp-workflows-select');
+			await userEvent.click(select);
+
+			await waitFor(() => {
+				const projectName = document.querySelector(
+					'[data-test-id="workflow-location-project-name"]',
+				);
+				expect(projectName).toBeInTheDocument();
+				expect(projectName).toHaveTextContent('Team Project');
+			});
+		});
+
+		it('should render workflow location with folder when parentFolder is provided', async () => {
+			const workflows = [
+				createWorkflow({
+					id: 'wf-1',
+					name: 'My Workflow',
+					homeProject: {
+						id: 'project-1',
+						type: 'team',
+						name: 'Team Project',
+						icon: null,
+						createdAt: '2025-01-01',
+						updatedAt: '2025-01-01',
+					},
+					parentFolder: {
+						id: 'folder-1',
+						name: 'My Folder',
+						parentFolderId: null,
+					},
+				}),
+			];
+
+			mcpStore.getMcpEligibleWorkflows.mockResolvedValue({
+				count: 1,
+				data: workflows,
+			});
+
+			const { getByTestId } = createComponent({ pinia });
+			await nextTick();
+
+			// Wait for fetch to complete
+			await waitFor(() => {
+				expect(mcpStore.getMcpEligibleWorkflows).toHaveBeenCalled();
+			});
+
+			const select = getByTestId('mcp-workflows-select');
+			await userEvent.click(select);
+
+			await waitFor(() => {
+				const folderName = document.querySelector('[data-test-id="workflow-location-folder-name"]');
+				expect(folderName).toBeInTheDocument();
+				expect(folderName).toHaveTextContent('My Folder');
+			});
+		});
+
+		it('should render Personal for personal project type', async () => {
+			const workflows = [
+				createWorkflow({
+					id: 'wf-1',
+					name: 'My Workflow',
+					homeProject: {
+						id: 'personal-project',
+						type: 'personal',
+						name: 'User<user@n8n.io>',
+						icon: null,
+						createdAt: '2025-01-01',
+						updatedAt: '2025-01-01',
+					},
+				}),
+			];
+
+			mcpStore.getMcpEligibleWorkflows.mockResolvedValue({
+				count: 1,
+				data: workflows,
+			});
+
+			const { getByTestId } = createComponent({ pinia });
+			await nextTick();
+
+			// Wait for fetch to complete
+			await waitFor(() => {
+				expect(mcpStore.getMcpEligibleWorkflows).toHaveBeenCalled();
+			});
+
+			const select = getByTestId('mcp-workflows-select');
+			await userEvent.click(select);
+
+			await waitFor(() => {
+				const projectName = document.querySelector(
+					'[data-test-id="workflow-location-project-name"]',
+				);
+				expect(projectName).toBeInTheDocument();
+				expect(projectName).toHaveTextContent('Personal');
+			});
+		});
+	});
+});

package/src/components/MCPWorkflowsSelect.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { useMCPStore } from '../mcp.store';
+import { LOADING_INDICATOR_TIMEOUT } from '../mcp.constants';
+import { N8nSelect, N8nOption } from '@n8n/design-system';
+import { computed, onMounted, ref, useCssModule } from 'vue';
+import type { McpWorkflow } from '../mcp.types';
+import WorkflowLocation from './WorkflowLocation.vue';
+import { useI18n } from '@n8n/i18n';
+import { useToast } from '@n8n/composables/useToast';
+
+defineProps<{
+	placeholder?: string;
+	disabled?: boolean;
+}>();
+
+const i18n = useI18n();
+const toast = useToast();
+
+const modelValue = defineModel<string[]>({ default: () => [] });
+
+const emit = defineEmits<{
+	ready: [];
+	confirm: [];
+}>();
+
+const mcpStore = useMCPStore();
+
+const isLoading = ref(false);
+const hasFetched = ref(false);
+const isDropdownVisible = ref(false);
+const selectRef = ref<InstanceType<typeof N8nSelect>>();
+const workflowOptions = ref<McpWorkflow[]>([]);
+let loadingTimeoutId: ReturnType<typeof setTimeout> | null = null;
+
+const showEmptyState = computed(() => {
+	return !isLoading.value && hasFetched.value && workflowOptions.value.length === 0;
+});
+
+const $style = useCssModule();
+
+// `popper-class` is a string prop, so the classes are joined here rather than
+// passed as an object binding.
+const popperClass = computed(() =>
+	[
+		isLoading.value ? $style['mcp-workflows-select-loading'] : '',
+		showEmptyState.value ? $style['mcp-workflows-select-empty'] : '',
+	]
+		.filter(Boolean)
+		.join(' '),
+);
+
+async function searchWorkflows(query?: string) {
+	if (loadingTimeoutId) {
+		clearTimeout(loadingTimeoutId);
+		loadingTimeoutId = null;
+	}
+	isLoading.value = true;
+	hasFetched.value = false;
+	try {
+		const response = await mcpStore.getMcpEligibleWorkflows({
+			take: 10,
+			query: query ?? undefined,
+		});
+		workflowOptions.value = response?.data ?? [];
+	} catch (e) {
+		toast.showError(e, i18n.baseText('settings.mcp.connectWorkflows.error'));
+	} finally {
+		await waitFor(LOADING_INDICATOR_TIMEOUT);
+		isLoading.value = false;
+		hasFetched.value = true;
+	}
+}
+
+async function waitFor(timeout: number) {
+	await new Promise<void>((resolve) => {
+		setTimeout(() => {
+			resolve();
+		}, timeout);
+	});
+}
+
+function focusOnInput() {
+	selectRef.value?.focusOnInput();
+}
+
+function onVisibleChange(visible: boolean) {
+	isDropdownVisible.value = visible;
+}
+
+function onKeydownCapture(event: KeyboardEvent) {
+	if (event.key === 'Enter' && !isDropdownVisible.value && modelValue.value.length > 0) {
+		event.preventDefault();
+		event.stopPropagation();
+		emit('confirm');
+	}
+}
+
+onMounted(async () => {
+	await searchWorkflows();
+	emit('ready');
+});
+
+defineExpose({
+	focusOnInput,
+});
+</script>
+
+<template>
+	<div @keydown.enter.capture="onKeydownCapture">
+		<N8nSelect
+			ref="selectRef"
+			v-model="modelValue"
+			data-test-id="mcp-workflows-select"
+			:placeholder="placeholder"
+			:disabled="disabled"
+			:loading="isLoading"
+			:multiple="true"
+			:filterable="true"
+			:remote="true"
+			:remote-method="searchWorkflows"
+			size="medium"
+			:popper-class="popperClass"
+			:teleported="false"
+			@visible-change="onVisibleChange"
+		>
+			<N8nOption v-if="showEmptyState" value="" disabled :class="$style['empty-option']">
+				{{ i18n.baseText('settings.mcp.connectWorkflows.emptyState') }}
+			</N8nOption>
+			<N8nOption
+				v-for="workflow in workflowOptions"
+				:key="workflow.id"
+				:value="workflow.id"
+				:label="workflow.name"
+			>
+				<WorkflowLocation
+					:workflow-id="workflow.id"
+					:workflow-name="workflow.name"
+					:home-project="workflow.homeProject"
+					:parent-folder="workflow.parentFolder"
+				/>
+			</N8nOption>
+		</N8nSelect>
+	</div>
+</template>
+
+<style module lang="scss">
+.mcp-workflows-select-loading,
+.mcp-workflows-select-empty {
+	display: flex;
+	min-height: var(--spacing--5xl);
+	align-items: center;
+	justify-content: space-around;
+}
+
+.empty-option {
+	cursor: default !important;
+	color: var(--color--text) !important;
+}
+</style>

package/src/components/McpAccessToggle.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { ElSwitch } from 'element-plus';
+import { N8nText, N8nTooltip } from '@n8n/design-system';
+import { useI18n } from '@n8n/i18n';
+
+import { computed } from 'vue';
+
+type Props = {
+	modelValue: boolean;
+	disabled?: boolean;
+	loading?: boolean;
+	managedByEnv?: boolean;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+	disabled: false,
+	loading: false,
+	managedByEnv: false,
+});
+
+const emit = defineEmits<{
+	disableMcpAccess: [];
+}>();
+
+const i18n = useI18n();
+
+const disabledTooltip = computed(() =>
+	props.managedByEnv
+		? i18n.baseText('settings.mcp.managedByEnv.tooltip')
+		: i18n.baseText('settings.mcp.toggle.disabled.tooltip'),
+);
+
+const onUpdateMCPEnabled = () => {
+	emit('disableMcpAccess');
+};
+</script>
+
+<template>
+	<div :class="$style['main-toggle-container']">
+		<div :class="$style['main-toggle-info']">
+			<N8nText :bold="true" :color="modelValue ? `success` : `text-light`" size="small">
+				{{
+					modelValue
+						? i18n.baseText('settings.mcp.header.toggle.enabled')
+						: i18n.baseText('settings.mcp.header.toggle.disabled')
+				}}
+			</N8nText>
+		</div>
+		<div :class="$style['main-toggle']" data-test-id="mcp-toggle-container">
+			<N8nTooltip :content="disabledTooltip" :disabled="!props.disabled" placement="top">
+				<ElSwitch
+					size="large"
+					data-test-id="mcp-access-toggle"
+					:model-value="props.modelValue"
+					:disabled="props.disabled"
+					:loading="props.loading"
+					@update:model-value="onUpdateMCPEnabled"
+				/>
+			</N8nTooltip>
+		</div>
+	</div>
+</template>
+
+<style module lang="scss">
+.main-toggle-container {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing--2xs);
+}
+
+.main-toggle {
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	flex-shrink: 0;
+}
+</style>