@n8n/frontend-module-mcp 0.1.0

package/src/components/McpAccessTokenTab.test.ts

@@ -0,0 +1,220 @@
+import userEvent from '@testing-library/user-event';
+import { waitFor } from '@testing-library/vue';
+import { createComponentRenderer } from '@n8n/frontend-test-utils';
+import { createTestingPinia } from '@pinia/testing';
+import McpAccessTokenTab from './McpAccessTokenTab.vue';
+
+const mockCopy = vi.fn();
+const mockCopied = { value: false };
+
+vi.mock('@n8n/composables/useClipboard', () => ({
+	useClipboard: () => ({
+		copy: mockCopy,
+		copied: mockCopied,
+		isSupported: { value: true },
+	}),
+}));
+
+const mockGetOrCreateApiKey = vi.fn();
+const mockGenerateNewApiKey = vi.fn();
+const mockResetCurrentUserMCPKey = vi.fn();
+let mockCurrentUserMCPKey: { apiKey: string } | null = { apiKey: 'test-api-key-12345' };
+
+vi.mock('../mcp.store', () => ({
+	useMCPStore: () => ({
+		get currentUserMCPKey() {
+			return mockCurrentUserMCPKey;
+		},
+		getOrCreateApiKey: mockGetOrCreateApiKey,
+		generateNewApiKey: mockGenerateNewApiKey,
+		resetCurrentUserMCPKey: mockResetCurrentUserMCPKey,
+	}),
+}));
+
+vi.mock('./ConnectionParameter.vue', () => ({
+	default: {
+		name: 'ConnectionParameter',
+		template: `
+			<div :data-test-id="'connection-parameter-' + id">
+				<span data-test-id="connection-parameter-label">{{ label }}</span>
+				<span data-test-id="connection-parameter-value">{{ value }}</span>
+				<button data-test-id="connection-parameter-copy-button" @click="$emit('copy', value)">Copy</button>
+			</div>
+		`,
+		props: ['id', 'label', 'value', 'infoTip', 'maxWidth', 'allowCopy'],
+		emits: ['copy'],
+	},
+}));
+
+const renderComponent = createComponentRenderer(McpAccessTokenTab, {
+	pinia: createTestingPinia(),
+});
+
+describe('McpAccessTokenTab', () => {
+	beforeEach(() => {
+		vi.useFakeTimers();
+		mockCurrentUserMCPKey = { apiKey: 'test-api-key-12345' };
+		mockGetOrCreateApiKey.mockResolvedValue({ apiKey: 'test-api-key-12345' });
+		mockGenerateNewApiKey.mockResolvedValue({ apiKey: 'new-api-key-67890' });
+	});
+
+	afterEach(() => {
+		vi.clearAllMocks();
+		vi.useRealTimers();
+	});
+
+	describe('Rendering', () => {
+		it('should render server URL connection parameter', () => {
+			const serverUrl = 'http://localhost:5678/mcp';
+			const { getByTestId } = renderComponent({
+				props: {
+					serverUrl,
+				},
+			});
+
+			expect(getByTestId('mcp-access-token-tab')).toBeVisible();
+			const serverUrlParam = getByTestId('connection-parameter-oauth-server-url');
+			expect(serverUrlParam).toBeVisible();
+			expect(
+				serverUrlParam.querySelector('[data-test-id="connection-parameter-value"]'),
+			).toHaveTextContent(serverUrl);
+		});
+
+		it('should render access token connection parameter when API key is loaded', async () => {
+			const { getByTestId } = renderComponent({
+				props: {
+					serverUrl: 'http://localhost:5678/mcp',
+				},
+			});
+
+			// Advance timers to complete loading timeout
+			await vi.runAllTimersAsync();
+
+			await waitFor(() => {
+				const accessTokenParam = getByTestId('connection-parameter-access-token');
+				expect(accessTokenParam).toBeVisible();
+				expect(
+					accessTokenParam.querySelector('[data-test-id="connection-parameter-value"]'),
+				).toHaveTextContent('test-api-key-12345');
+			});
+		});
+
+		it('should render JSON configuration block when loaded', async () => {
+			const { getByTestId } = renderComponent({
+				props: {
+					serverUrl: 'http://localhost:5678/mcp',
+				},
+			});
+
+			await vi.runAllTimersAsync();
+
+			await waitFor(() => {
+				expect(getByTestId('mcp-access-token-json')).toBeVisible();
+			});
+		});
+	});
+
+	describe('Events', () => {
+		it('should emit copied event with serverUrl type when server URL is copied', async () => {
+			const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+			const serverUrl = 'http://localhost:5678/mcp';
+			const { getByTestId, emitted } = renderComponent({
+				props: {
+					serverUrl,
+				},
+			});
+
+			const serverUrlParam = getByTestId('connection-parameter-oauth-server-url');
+			const copyButton = serverUrlParam.querySelector(
+				'[data-test-id="connection-parameter-copy-button"]',
+			) as HTMLButtonElement;
+
+			await user.click(copyButton);
+
+			expect(emitted().copied).toBeTruthy();
+			expect(emitted().copied[0]).toEqual(['serverUrl', serverUrl]);
+		});
+
+		it('should emit copied event with accessToken type when access token is copied', async () => {
+			const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+			const { getByTestId, emitted } = renderComponent({
+				props: {
+					serverUrl: 'http://localhost:5678/mcp',
+				},
+			});
+
+			await vi.runAllTimersAsync();
+
+			await waitFor(() => {
+				expect(getByTestId('connection-parameter-access-token')).toBeVisible();
+			});
+
+			const accessTokenParam = getByTestId('connection-parameter-access-token');
+			const copyButton = accessTokenParam.querySelector(
+				'[data-test-id="connection-parameter-copy-button"]',
+			) as HTMLButtonElement;
+
+			await user.click(copyButton);
+
+			expect(emitted().copied).toBeTruthy();
+			expect(emitted().copied[0]).toEqual(['accessToken', 'test-api-key-12345']);
+		});
+
+		it('should emit copied event with mcpJson type when JSON config is copied', async () => {
+			const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+			const { getByTestId, emitted } = renderComponent({
+				props: {
+					serverUrl: 'http://localhost:5678/mcp',
+				},
+			});
+
+			await vi.runAllTimersAsync();
+
+			await waitFor(() => {
+				expect(getByTestId('mcp-config-snippet-copy')).toBeVisible();
+			});
+
+			const copyButton = getByTestId('mcp-config-snippet-copy');
+
+			await user.click(copyButton);
+
+			expect(emitted().copied).toBeTruthy();
+			const copyEvent = emitted().copied[0];
+			expect(Array.isArray(copyEvent)).toBe(true);
+			if (Array.isArray(copyEvent)) {
+				expect(copyEvent[0]).toEqual('mcpJson');
+				expect(copyEvent[1]).toContain('mcpServers');
+			}
+		});
+	});
+
+	describe('API Key handling', () => {
+		it('should call getOrCreateApiKey on mount when no API key exists', async () => {
+			mockCurrentUserMCPKey = null;
+
+			renderComponent({
+				props: {
+					serverUrl: 'http://localhost:5678/mcp',
+				},
+			});
+
+			await vi.runAllTimersAsync();
+
+			expect(mockGetOrCreateApiKey).toHaveBeenCalled();
+		});
+
+		it('should not call getOrCreateApiKey on mount when API key already exists', async () => {
+			mockCurrentUserMCPKey = { apiKey: 'existing-key' };
+
+			renderComponent({
+				props: {
+					serverUrl: 'http://localhost:5678/mcp',
+				},
+			});
+
+			await vi.runAllTimersAsync();
+
+			expect(mockGetOrCreateApiKey).not.toHaveBeenCalled();
+		});
+	});
+});

package/src/components/McpAccessTokenTab.vue

@@ -0,0 +1,201 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from '@n8n/i18n';
+import { useToast } from '@n8n/composables/useToast';
+import { useMCPStore } from '../mcp.store';
+import { LOADING_INDICATOR_TIMEOUT, MCP_TOOLTIP_DELAY } from '../mcp.constants';
+import { N8nLoading, N8nTooltip, N8nButton, N8nNotice } from '@n8n/design-system';
+import ConnectionParameter from './ConnectionParameter.vue';
+import McpConfigSnippet from './McpConfigSnippet.vue';
+
+type Props = {
+	serverUrl: string;
+};
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+	copied: [type: 'serverUrl' | 'accessToken' | 'mcpJson', value: string];
+}>();
+
+const i18n = useI18n();
+const toast = useToast();
+const mcpStore = useMCPStore();
+
+const loadingApiKey = ref(true);
+const keyRotating = ref(false);
+const apiKey = computed(() => mcpStore.currentUserMCPKey);
+
+// mcp.json value that's to be copied / rendered as the config snippet
+const connectionString = computed(() => {
+	return `{
+  "mcpServers": {
+    "n8n-mcp": {
+      "type": "http",
+      "url": "${props.serverUrl}",
+      "headers": {
+        "Authorization": "Bearer ${apiKeyText.value}"
+      }
+    }
+  }
+}`;
+});
+
+const isKeyRedacted = computed(() => {
+	return apiKey.value?.apiKey?.includes('******') ?? false;
+});
+
+const apiKeyText = computed(() => {
+	if (keyRotating.value) {
+		return `<${i18n.baseText('generic.loading')}...>`;
+	}
+	return isKeyRedacted.value ? '<YOUR_ACCESS_TOKEN_HERE>' : apiKey.value?.apiKey;
+});
+
+const fetchApiKey = async () => {
+	try {
+		loadingApiKey.value = true;
+		await mcpStore.getOrCreateApiKey();
+	} catch (error) {
+		toast.showError(error, i18n.baseText('settings.mcp.error.fetching.apiKey'));
+	} finally {
+		setTimeout(() => {
+			loadingApiKey.value = false;
+		}, LOADING_INDICATOR_TIMEOUT);
+	}
+};
+
+const rotateKey = async () => {
+	try {
+		keyRotating.value = true;
+		await mcpStore.generateNewApiKey();
+	} catch (error) {
+		toast.showError(error, i18n.baseText('settings.mcp.error.rotating.apiKey'));
+	} finally {
+		setTimeout(() => {
+			keyRotating.value = false;
+		}, LOADING_INDICATOR_TIMEOUT);
+	}
+};
+
+const handleConnectionStringCopy = (value: string) => {
+	emit('copied', 'mcpJson', value);
+};
+
+const handleUrlCopy = (url: string) => {
+	emit('copied', 'serverUrl', url);
+};
+
+const handleAccessTokenCopy = () => {
+	if (apiKey.value?.apiKey) {
+		emit('copied', 'accessToken', apiKey.value.apiKey);
+	}
+};
+
+onMounted(async () => {
+	if (!apiKey.value) {
+		await fetchApiKey();
+	} else {
+		loadingApiKey.value = false;
+	}
+});
+</script>
+
+<template>
+	<div :class="$style.container" data-test-id="mcp-access-token-tab">
+		<ConnectionParameter
+			id="oauth-server-url"
+			:label="i18n.baseText('settings.mcp.connectDialog.serverUrl')"
+			:value="props.serverUrl"
+			@copy="handleUrlCopy"
+		/>
+		<div v-if="loadingApiKey" :class="$style['loading-container']">
+			<N8nLoading :loading="loadingApiKey" variant="h1" :class="$style['url-skeleton']" />
+			<N8nLoading :loading="loadingApiKey" variant="button" :class="$style['code-skeleton']" />
+		</div>
+
+		<div v-else-if="apiKey?.apiKey" :class="$style['parameters-container']">
+			<ConnectionParameter
+				id="access-token"
+				:value="apiKey.apiKey"
+				:value-loading="keyRotating"
+				:label="i18n.baseText('settings.mcp.connectDialog.tab.accessToken')"
+				:info-tip="i18n.baseText('settings.mcp.instructions.apiKey.tip')"
+				:allow-copy="!isKeyRedacted"
+				@copy="handleAccessTokenCopy"
+			>
+				<template #customActions>
+					<N8nTooltip
+						:content="i18n.baseText('settings.mcp.instructions.rotateKey.tooltip')"
+						:show-after="MCP_TOOLTIP_DELAY"
+					>
+						<N8nButton
+							variant="subtle"
+							icon-only
+							icon="refresh-cw"
+							:disabled="keyRotating"
+							@click="rotateKey"
+						/>
+					</N8nTooltip>
+				</template>
+			</ConnectionParameter>
+			<N8nNotice v-if="!isKeyRedacted">
+				{{ i18n.baseText('settings.mcp.access.token.notice') }}
+			</N8nNotice>
+			<div :class="$style['json-container']" data-test-id="mcp-access-token-json">
+				<label :class="$style.label">
+					{{ i18n.baseText('settings.mcp.connectDialog.jsonConfig') }}
+				</label>
+				<McpConfigSnippet
+					:value="connectionString"
+					:disabled="keyRotating"
+					@copy="handleConnectionStringCopy"
+				/>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" module>
+.container {
+	display: flex;
+	flex-direction: column;
+}
+
+.loading-container {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing--xs);
+}
+
+// Make skeletons same height as the actual content
+// so nothing moves when loading finishes
+.url-skeleton div {
+	width: 100%;
+	min-height: 40px;
+}
+
+.code-skeleton div {
+	width: 100%;
+	min-height: 350px;
+}
+
+.parameters-container {
+	display: flex;
+	flex-direction: column;
+
+	padding-top: var(--spacing--sm);
+}
+
+.json-container {
+	flex-grow: 1;
+	margin-top: var(--spacing--sm);
+
+	.label {
+		display: inline-flex;
+		font-size: var(--font-size--sm);
+		color: var(--color--text--shade-1);
+		margin-bottom: var(--spacing--4xs);
+	}
+}
+</style>

package/src/components/McpAllowedCallbackUrlsDialog.test.ts

@@ -0,0 +1,122 @@
+import { within, waitFor } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { createComponentRenderer } from '@n8n/frontend-test-utils';
+import McpAllowedCallbackUrlsDialog from './McpAllowedCallbackUrlsDialog.vue';
+
+const renderComponent = createComponentRenderer(McpAllowedCallbackUrlsDialog);
+
+// The dialog teleports to document.body; its root is renderless, so wait for content.
+const body = () => within(document.body);
+
+const saveButton = () => body().getByTestId('mcp-callback-urls-save');
+
+const renderDialog = async (uris: string[]) => {
+	const rendered = renderComponent({ props: { open: true, uris } });
+	await waitFor(() => {
+		expect(body().getByTestId('mcp-callback-urls-save')).toBeInTheDocument();
+	});
+	return rendered;
+};
+
+describe('McpAllowedCallbackUrlsDialog', () => {
+	it('should preselect "all" mode with no URL list when nothing is configured', async () => {
+		await renderDialog([]);
+
+		expect(body().queryByTestId('mcp-callback-url-input')).not.toBeInTheDocument();
+		// Saving the default "all" selection is allowed (idempotent), no tweak needed.
+		expect(saveButton()).toBeEnabled();
+	});
+
+	it('should preselect "trusted" mode with the persisted URLs', async () => {
+		await renderDialog(['https://a.example.com/cb', 'https://b.example.com/cb']);
+
+		expect(body().getAllByTestId('mcp-callback-url-input')).toHaveLength(2);
+		// A valid, unchanged selection can still be re-saved.
+		expect(saveButton()).toBeEnabled();
+	});
+
+	it('should emit the trimmed URL list when saving trusted URLs', async () => {
+		const { emitted } = await renderDialog([]);
+
+		await userEvent.click(body().getByTestId('mcp-callback-urls-mode-trusted'));
+		await userEvent.type(
+			body().getByTestId('mcp-callback-url-input'),
+			'  https://client.example.com/callback  ',
+		);
+
+		expect(saveButton()).toBeEnabled();
+		await userEvent.click(saveButton());
+
+		expect(emitted('save')).toEqual([[['https://client.example.com/callback']]]);
+	});
+
+	it('should show a validation error and block saving for an invalid URL', async () => {
+		await renderDialog([]);
+
+		await userEvent.click(body().getByTestId('mcp-callback-urls-mode-trusted'));
+		await userEvent.type(body().getByTestId('mcp-callback-url-input'), 'not-a-url');
+
+		expect(body().getByTestId('mcp-callback-urls-error')).toBeVisible();
+		expect(saveButton()).toBeDisabled();
+	});
+
+	it('should require https for non-localhost URLs', async () => {
+		await renderDialog([]);
+
+		await userEvent.click(body().getByTestId('mcp-callback-urls-mode-trusted'));
+		await userEvent.type(
+			body().getByTestId('mcp-callback-url-input'),
+			'http://client.example.com/callback',
+		);
+
+		expect(body().getByTestId('mcp-callback-urls-error')).toBeVisible();
+		expect(saveButton()).toBeDisabled();
+	});
+
+	it('should allow http for localhost URLs', async () => {
+		await renderDialog([]);
+
+		await userEvent.click(body().getByTestId('mcp-callback-urls-mode-trusted'));
+		await userEvent.type(body().getByTestId('mcp-callback-url-input'), 'http://localhost/callback');
+
+		expect(body().queryByTestId('mcp-callback-urls-error')).not.toBeInTheDocument();
+		expect(saveButton()).toBeEnabled();
+	});
+
+	it('should emit an empty list when switching back to allowing all URLs', async () => {
+		const { emitted } = await renderDialog(['https://a.example.com/cb']);
+
+		await userEvent.click(body().getByTestId('mcp-callback-urls-mode-all'));
+
+		expect(saveButton()).toBeEnabled();
+		await userEvent.click(saveButton());
+
+		expect(emitted('save')).toEqual([[[]]]);
+	});
+
+	it('should sync to the persisted URLs when they load after the dialog is already open', async () => {
+		// Dialog opened before the async allow-list resolved: it starts on "all".
+		const { rerender } = await renderDialog([]);
+		expect(body().queryByTestId('mcp-callback-url-input')).not.toBeInTheDocument();
+
+		// The load resolves and the prop updates; the form must adopt the trusted list
+		// rather than keep the default "all" (which would erase it on save).
+		await rerender({ open: true, uris: ['https://a.example.com/cb'] });
+
+		await waitFor(() => {
+			expect(body().getAllByTestId('mcp-callback-url-input')).toHaveLength(1);
+		});
+	});
+
+	it('should add and remove URL rows', async () => {
+		await renderDialog(['https://a.example.com/cb']);
+
+		await userEvent.click(body().getByTestId('mcp-callback-url-add'));
+		expect(body().getAllByTestId('mcp-callback-url-input')).toHaveLength(2);
+
+		await userEvent.click(body().getAllByTestId('mcp-callback-url-remove')[0]);
+		await waitFor(() => {
+			expect(body().getAllByTestId('mcp-callback-url-input')).toHaveLength(1);
+		});
+	});
+});