@n8n/frontend-module-mcp 0.1.0

package/src/modals/MCPConnectAgentsModal.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { useI18n } from '@n8n/i18n';
+import MCPAgentsSelect from '../components/MCPAgentsSelect.vue';
+import { N8nButton, N8nDialog, N8nDialogFooter, N8nNotice } from '@n8n/design-system';
+import { computed, ref, watch } from 'vue';
+import { useTelemetry } from '@n8n/composables/useTelemetry';
+import { TELEMETRY_EVENT } from '@n8n/telemetry';
+
+const props = defineProps<{
+	enableMcpAccess: (agentIds: string[]) => Promise<void>;
+}>();
+
+const open = defineModel<boolean>('open', { default: false });
+
+const i18n = useI18n();
+const telemetry = useTelemetry();
+
+const isSaving = ref(false);
+const selectedAgentIds = ref<string[]>([]);
+// typescript-eslint reads an SFC import as `any`, so the ref names the one method it calls.
+const selectRef = ref<{ focusOnInput: () => void } | null>(null);
+const closedByAction = ref(false);
+
+const canSave = computed(() => selectedAgentIds.value.length > 0);
+
+// The view keeps this component mounted, so every opening starts from an empty selection.
+watch(open, (isOpen) => {
+	if (isOpen) {
+		selectedAgentIds.value = [];
+		closedByAction.value = false;
+	} else if (!closedByAction.value) {
+		telemetry.track(TELEMETRY_EVENT.AGENTS.USER_DISMISSED_MCP_AGENTS_DIALOG, {});
+	}
+});
+
+async function save() {
+	if (selectedAgentIds.value.length === 0) return;
+
+	isSaving.value = true;
+	try {
+		await props.enableMcpAccess(selectedAgentIds.value);
+		closedByAction.value = true;
+		telemetry.track(TELEMETRY_EVENT.AGENTS.USER_SELECTED_AGENTS_FOR_MCP, {
+			agentIds: selectedAgentIds.value,
+			count: selectedAgentIds.value.length,
+		});
+		open.value = false;
+	} finally {
+		isSaving.value = false;
+	}
+}
+
+function onSelectReady() {
+	selectRef.value?.focusOnInput();
+}
+
+function onConfirm() {
+	if (!isSaving.value) {
+		void save();
+	}
+}
+
+function preventOutsideClose(event: Event) {
+	event.preventDefault();
+}
+</script>
+
+<template>
+	<N8nDialog
+		v-model:open="open"
+		size="xlarge"
+		:header="i18n.baseText('settings.mcp.connectAgents.modalTitle')"
+		data-test-id="mcp-connect-agents-dialog"
+		@interact-outside="preventOutsideClose"
+	>
+		<div :class="$style.content">
+			<N8nNotice
+				data-test-id="mcp-connect-agents-info-notice"
+				theme="info"
+				:content="i18n.baseText('settings.mcp.connectAgents.notice')"
+				:class="$style.notice"
+			/>
+			<MCPAgentsSelect
+				ref="selectRef"
+				v-model="selectedAgentIds"
+				:placeholder="i18n.baseText('settings.mcp.connectAgents.input.placeholder')"
+				:disabled="isSaving"
+				@ready="onSelectReady"
+				@confirm="onConfirm"
+			/>
+		</div>
+		<N8nDialogFooter>
+			<N8nButton
+				variant="subtle"
+				:label="i18n.baseText('generic.cancel')"
+				:disabled="isSaving"
+				data-test-id="mcp-connect-agents-cancel-button"
+				@click="open = false"
+			/>
+			<N8nButton
+				variant="solid"
+				:label="i18n.baseText('settings.mcp.connectAgents.confirm.label')"
+				:loading="isSaving"
+				:disabled="!canSave || isSaving"
+				data-test-id="mcp-connect-agents-save-button"
+				@click="save"
+			/>
+		</N8nDialogFooter>
+	</N8nDialog>
+</template>
+
+<style module lang="scss">
+.content {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing--sm);
+
+	.notice {
+		margin: 0;
+	}
+}
+</style>

package/src/modals/MCPConnectWorkflowsModal.test.ts

@@ -0,0 +1,303 @@
+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 MCPConnectWorkflowsModal from './MCPConnectWorkflowsModal.vue';
+import { useMCPStore } from '../mcp.store';
+import { createWorkflow } from '../mcp.test.utils';
+import { useTelemetry } from '@n8n/composables/useTelemetry';
+import { type Mock } from 'vitest';
+
+vi.mock('@n8n/composables/useTelemetry', () => {
+	const track = vi.fn();
+	return {
+		useTelemetry: () => ({
+			track,
+		}),
+	};
+});
+
+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 renderModal = createComponentRenderer(MCPConnectWorkflowsModal);
+
+const telemetry = useTelemetry();
+
+let pinia: ReturnType<typeof createTestingPinia>;
+let mcpStore: MockedStore<typeof useMCPStore>;
+let mockOnEnableMcpAccess: Mock;
+
+describe('MCPConnectWorkflowsModal', () => {
+	beforeEach(() => {
+		pinia = createTestingPinia();
+		mcpStore = mockedStore(useMCPStore);
+		mcpStore.getMcpEligibleWorkflows.mockResolvedValue({
+			count: 0,
+			data: [],
+		});
+		mockOnEnableMcpAccess = vi.fn().mockResolvedValue(undefined);
+	});
+
+	afterEach(() => {
+		vi.clearAllMocks();
+	});
+
+	const createProps = () => ({
+		open: true,
+		enableMcpAccess: mockOnEnableMcpAccess,
+	});
+
+	describe('Initial rendering', () => {
+		it('should not load eligible workflows while closed', async () => {
+			const { queryByTestId } = renderModal({
+				pinia,
+				props: { ...createProps(), open: false },
+			});
+			await nextTick();
+
+			expect(queryByTestId('mcp-workflows-select')).not.toBeInTheDocument();
+			expect(mcpStore.getMcpEligibleWorkflows).not.toHaveBeenCalled();
+		});
+
+		it('should render workflow select component', async () => {
+			const { getByTestId } = renderModal({
+				pinia,
+				props: createProps(),
+			});
+			await nextTick();
+
+			expect(getByTestId('mcp-workflows-select')).toBeInTheDocument();
+		});
+
+		it('should render cancel and save buttons', async () => {
+			const { getByTestId } = renderModal({
+				pinia,
+				props: createProps(),
+			});
+			await nextTick();
+
+			expect(getByTestId('mcp-connect-workflows-cancel-button')).toBeInTheDocument();
+			expect(getByTestId('mcp-connect-workflows-save-button')).toBeInTheDocument();
+		});
+
+		it('should have save button disabled when no workflow is selected', async () => {
+			const { getByTestId } = renderModal({
+				pinia,
+				props: createProps(),
+			});
+			await nextTick();
+
+			expect(getByTestId('mcp-connect-workflows-save-button')).toBeDisabled();
+		});
+	});
+
+	describe('Workflow selection', () => {
+		it('should enable save button when workflow is selected', async () => {
+			const workflows = [createWorkflow({ id: 'wf-1', name: 'Test Workflow' })];
+			mcpStore.getMcpEligibleWorkflows.mockResolvedValue({
+				count: 1,
+				data: workflows,
+			});
+
+			const { getByTestId } = renderModal({
+				pinia,
+				props: createProps(),
+			});
+			await nextTick();
+
+			// Wait for workflows to load
+			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(1);
+			});
+
+			const option = document.querySelector('.el-select-dropdown__item');
+			if (option) {
+				await userEvent.click(option);
+			}
+
+			await waitFor(() => {
+				expect(getByTestId('mcp-connect-workflows-save-button')).not.toBeDisabled();
+			});
+		});
+	});
+
+	describe('Save action', () => {
+		it('should call onEnableMcpAccess with selected workflow ids when save is clicked', async () => {
+			const workflows = [createWorkflow({ id: 'wf-1', name: 'Test Workflow' })];
+			mcpStore.getMcpEligibleWorkflows.mockResolvedValue({
+				count: 1,
+				data: workflows,
+			});
+
+			const { getByTestId } = renderModal({
+				pinia,
+				props: createProps(),
+			});
+			await nextTick();
+
+			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(1);
+			});
+
+			const option = document.querySelector('.el-select-dropdown__item');
+			if (option) {
+				await userEvent.click(option);
+			}
+
+			await waitFor(() => {
+				expect(getByTestId('mcp-connect-workflows-save-button')).not.toBeDisabled();
+			});
+
+			await userEvent.click(getByTestId('mcp-connect-workflows-save-button'));
+
+			await waitFor(() => {
+				expect(mockOnEnableMcpAccess).toHaveBeenCalledWith(['wf-1']);
+			});
+		});
+
+		it('should track telemetry event when workflow is selected and saved', async () => {
+			const workflows = [createWorkflow({ id: 'wf-1', name: 'Test Workflow' })];
+			mcpStore.getMcpEligibleWorkflows.mockResolvedValue({
+				count: 1,
+				data: workflows,
+			});
+
+			const { getByTestId } = renderModal({
+				pinia,
+				props: createProps(),
+			});
+			await nextTick();
+
+			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(1);
+			});
+
+			const option = document.querySelector('.el-select-dropdown__item');
+			if (option) {
+				await userEvent.click(option);
+			}
+
+			await waitFor(() => {
+				expect(getByTestId('mcp-connect-workflows-save-button')).not.toBeDisabled();
+			});
+
+			await userEvent.click(getByTestId('mcp-connect-workflows-save-button'));
+
+			await waitFor(() => {
+				expect(telemetry.track).toHaveBeenCalledWith('User selected workflow from list', {
+					workflowIds: ['wf-1'],
+					count: 1,
+				});
+			});
+		});
+	});
+
+	describe('Cancel action', () => {
+		it('should track telemetry event when cancel is clicked', async () => {
+			const { getByTestId } = renderModal({
+				pinia,
+				props: createProps(),
+			});
+			await nextTick();
+
+			await userEvent.click(getByTestId('mcp-connect-workflows-cancel-button'));
+
+			expect(telemetry.track).toHaveBeenCalledWith('User dismissed mcp workflows dialog');
+		});
+	});
+
+	describe('Loading state', () => {
+		it('should disable buttons while saving', async () => {
+			const workflows = [createWorkflow({ id: 'wf-1', name: 'Test Workflow' })];
+			mcpStore.getMcpEligibleWorkflows.mockResolvedValue({
+				count: 1,
+				data: workflows,
+			});
+
+			// Create a promise that doesn't resolve immediately
+			let resolvePromise: (value?: unknown) => void;
+			mockOnEnableMcpAccess.mockImplementation(
+				async () =>
+					await new Promise((resolve) => {
+						resolvePromise = resolve;
+					}),
+			);
+
+			const { getByTestId } = renderModal({
+				pinia,
+				props: createProps(),
+			});
+			await nextTick();
+
+			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(1);
+			});
+
+			const option = document.querySelector('.el-select-dropdown__item');
+			if (option) {
+				await userEvent.click(option);
+			}
+
+			await waitFor(() => {
+				expect(getByTestId('mcp-connect-workflows-save-button')).not.toBeDisabled();
+			});
+
+			await userEvent.click(getByTestId('mcp-connect-workflows-save-button'));
+
+			// While saving, buttons should be disabled
+			await waitFor(() => {
+				expect(getByTestId('mcp-connect-workflows-cancel-button')).toBeDisabled();
+				expect(getByTestId('mcp-connect-workflows-save-button')).toBeDisabled();
+			});
+
+			// Resolve the promise
+			resolvePromise!();
+		});
+	});
+});

package/src/modals/MCPConnectWorkflowsModal.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { useI18n } from '@n8n/i18n';
+import MCPWorkflowsSelect from '../components/MCPWorkflowsSelect.vue';
+import { N8nButton, N8nDialog, N8nDialogFooter } from '@n8n/design-system';
+import { computed, ref, watch } from 'vue';
+import { useTelemetry } from '@n8n/composables/useTelemetry';
+
+const props = defineProps<{
+	enableMcpAccess: (workflowIds: string[]) => Promise<void>;
+}>();
+
+const open = defineModel<boolean>('open', { default: false });
+
+const i18n = useI18n();
+const telemetry = useTelemetry();
+
+const isSaving = ref(false);
+const selectedWorkflowIds = ref<string[]>([]);
+// typescript-eslint reads an SFC import as `any`, so the ref names the one method it calls.
+const selectRef = ref<{ focusOnInput: () => void } | null>(null);
+const closedByAction = ref(false);
+
+const canSave = computed(() => selectedWorkflowIds.value.length > 0);
+
+// The view keeps this component mounted, so every opening starts from an empty selection.
+watch(open, (isOpen) => {
+	if (isOpen) {
+		selectedWorkflowIds.value = [];
+		closedByAction.value = false;
+	} else if (!closedByAction.value) {
+		telemetry.track('User dismissed mcp workflows dialog');
+	}
+});
+
+async function save() {
+	if (selectedWorkflowIds.value.length === 0) return;
+
+	isSaving.value = true;
+	try {
+		await props.enableMcpAccess(selectedWorkflowIds.value);
+		closedByAction.value = true;
+		telemetry.track('User selected workflow from list', {
+			workflowIds: selectedWorkflowIds.value,
+			count: selectedWorkflowIds.value.length,
+		});
+		open.value = false;
+	} finally {
+		isSaving.value = false;
+	}
+}
+
+function onSelectReady() {
+	selectRef.value?.focusOnInput();
+}
+
+function onConfirm() {
+	if (!isSaving.value) {
+		void save();
+	}
+}
+
+function preventOutsideClose(event: Event) {
+	event.preventDefault();
+}
+</script>
+
+<template>
+	<N8nDialog
+		v-model:open="open"
+		size="xlarge"
+		:header="i18n.baseText('settings.mcp.connectWorkflows.modalTitle')"
+		data-test-id="mcp-connect-workflows-dialog"
+		@interact-outside="preventOutsideClose"
+	>
+		<MCPWorkflowsSelect
+			ref="selectRef"
+			v-model="selectedWorkflowIds"
+			:placeholder="i18n.baseText('settings.mcp.connectWorkflows.input.placeholder')"
+			:disabled="isSaving"
+			@ready="onSelectReady"
+			@confirm="onConfirm"
+		/>
+		<N8nDialogFooter>
+			<N8nButton
+				variant="subtle"
+				:label="i18n.baseText('generic.cancel')"
+				:disabled="isSaving"
+				data-test-id="mcp-connect-workflows-cancel-button"
+				@click="open = false"
+			/>
+			<N8nButton
+				variant="solid"
+				:label="i18n.baseText('settings.mcp.connectWorkflows.confirm.label')"
+				:loading="isSaving"
+				:disabled="!canSave || isSaving"
+				data-test-id="mcp-connect-workflows-save-button"
+				@click="save"
+			/>
+		</N8nDialogFooter>
+	</N8nDialog>
+</template>

package/src/redirect-uris.utils.ts

@@ -0,0 +1,22 @@
+export type RedirectUriError = 'invalidUrl' | 'invalidProtocol' | 'httpsRequired';
+
+/** Validates a single OAuth redirect URI; returns the error kind or null when valid. */
+export function validateRedirectUri(uri: string): RedirectUriError | null {
+	let url: URL;
+	try {
+		url = new URL(uri);
+	} catch {
+		return 'invalidUrl';
+	}
+
+	if (url.protocol !== 'http:' && url.protocol !== 'https:') {
+		return 'invalidProtocol';
+	}
+
+	const isLocalhost = url.hostname === 'localhost' || url.hostname === '127.0.0.1';
+	if (!isLocalhost && url.protocol !== 'https:') {
+		return 'httpsRequired';
+	}
+
+	return null;
+}

package/stylelint.config.mjs

@@ -0,0 +1,9 @@
+import { baseConfig } from '@n8n/stylelint-config/base';
+
+export default {
+	...baseConfig,
+	rules: {
+		...baseConfig.rules,
+		'@n8n/css-var-naming': [true, { severity: 'error' }],
+	},
+};

package/vite.config.ts

@@ -0,0 +1,52 @@
+import vue from '@vitejs/plugin-vue';
+import { fileURLToPath } from 'node:url';
+import { resolve } from 'node:path';
+import icons from 'unplugin-icons/vite';
+import svgLoader from 'vite-svg-loader';
+import { defineConfig, mergeConfig } from 'vite';
+import { frontendAliases } from '@n8n/frontend-vite-config';
+import { vitestConfig } from '@n8n/vitest-config/frontend';
+
+const packageDir = fileURLToPath(new URL('.', import.meta.url));
+const packagesDir = resolve(packageDir, '..', '..', '..');
+
+export default mergeConfig(
+	defineConfig({
+		// `@n8n/design-system`'s icon set reaches for two things Vite does not handle on its
+		// own: `~icons/lucide/*` virtual modules and `./custom/*.svg` single-file components.
+		// Consuming design-system from source makes both the consumer's problem — without
+		// `svgLoader` an `.svg` import returns a data-URI string, which Vue then renders as a
+		// tag name and jsdom rejects. Every module that renders a design-system component
+		// needs these two plugins. `src/__tests__/design-system-icons.test.ts` guards them.
+		plugins: [
+			vue(),
+			// Off, so a test never reaches the network for a missing collection. The collection
+			// comes from the `@iconify/json` devDependency instead.
+			icons({ compiler: 'vue3', autoInstall: false }),
+			svgLoader({
+				svgoConfig: {
+					plugins: [
+						{
+							name: 'preset-default',
+							params: {
+								overrides: {
+									// The icons rely on their ids, and on a viewBox to stay scalable.
+									cleanupIds: false,
+									removeViewBox: false,
+								},
+							},
+						},
+					],
+				},
+			}),
+		],
+		resolve: {
+			// The same platform mapping the editor-ui dev server uses, so a test resolves
+			// `@n8n/stores/...` from source rather than from a stale `dist` — the two disagreeing is
+			// what put 1,111 specifiers on the wrong side of the src/dist line. Sibling modules are
+			// deliberately absent: nothing here should make a cross-module import resolve.
+			alias: frontendAliases(packagesDir),
+		},
+	}),
+	vitestConfig,
+);