@n8n/frontend-module-mcp 0.1.0

package/src/components/McpEmptyStateCard.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { N8nText } from '@n8n/design-system';
+import McpClientLogoCards from './McpClientLogoCards.vue';
+
+withDefaults(
+	defineProps<{
+		title: string;
+		description: string;
+		/** White surface instead of the page background (for the standalone disabled state). */
+		surface?: boolean;
+		dataTestId?: string;
+	}>(),
+	{ surface: false, dataTestId: undefined },
+);
+</script>
+
+<template>
+	<div :class="[$style.card, surface && $style.surface]" :data-test-id="dataTestId">
+		<McpClientLogoCards :class="$style.cards" />
+		<div :class="$style.copy">
+			<N8nText bold size="large" color="text-dark">{{ title }}</N8nText>
+			<N8nText size="small" color="text-light">{{ description }}</N8nText>
+		</div>
+		<div v-if="$slots.actions" :class="$style.actions">
+			<slot name="actions" />
+		</div>
+	</div>
+</template>
+
+<style lang="scss" module>
+.card {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	text-align: center;
+	gap: var(--spacing--sm);
+	padding: var(--spacing--2xl) var(--spacing--xl);
+	border: var(--border-width) dashed var(--border-color);
+	border-radius: var(--radius--lg);
+	/* Gentle entrance, matching the prototype's empty states. */
+	animation: mcp-reveal-in var(--duration--snappy) var(--easing--ease-out);
+}
+
+.surface {
+	background: var(--background--surface);
+}
+
+@keyframes mcp-reveal-in {
+	from {
+		opacity: 0;
+		transform: translateY(var(--spacing--2xs));
+	}
+
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.card {
+		animation: none;
+	}
+}
+
+.cards {
+	margin-bottom: var(--spacing--sm);
+}
+
+.copy {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing--3xs);
+	max-width: 32rem;
+}
+
+.actions {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: var(--spacing--2xs);
+}
+</style>

package/src/components/McpStatusControl.test.ts

@@ -0,0 +1,33 @@
+import { within, waitFor } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { createComponentRenderer } from '@n8n/frontend-test-utils';
+import McpStatusControl from './McpStatusControl.vue';
+
+const renderComponent = createComponentRenderer(McpStatusControl);
+
+describe('McpStatusControl', () => {
+	it('should render the Enabled trigger', () => {
+		const { getByTestId } = renderComponent();
+
+		expect(getByTestId('mcp-status-control-trigger')).toHaveTextContent('Enabled');
+	});
+
+	it('should emit disable when the menu item is selected', async () => {
+		const { getByTestId, emitted } = renderComponent();
+
+		await userEvent.click(getByTestId('mcp-status-control-trigger'));
+		// The dropdown menu teleports to document.body.
+		await waitFor(() => {
+			expect(within(document.body).getByText('Disable')).toBeInTheDocument();
+		});
+		await userEvent.click(within(document.body).getByText('Disable'));
+
+		expect(emitted('disable')).toHaveLength(1);
+	});
+
+	it('should disable the trigger when the user cannot toggle MCP', () => {
+		const { getByTestId } = renderComponent({ props: { disabled: true } });
+
+		expect(getByTestId('mcp-status-control-trigger')).toBeDisabled();
+	});
+});

package/src/components/McpStatusControl.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from '@n8n/i18n';
+import { N8nButton, N8nDropdownMenu, N8nIcon, N8nText, N8nTooltip } from '@n8n/design-system';
+
+const props = withDefaults(
+	defineProps<{
+		/** User cannot toggle MCP (member, or setting managed by env). */
+		disabled?: boolean;
+		loading?: boolean;
+		managedByEnv?: boolean;
+	}>(),
+	{ disabled: false, loading: false, managedByEnv: false },
+);
+
+const emit = defineEmits<{ disable: [] }>();
+
+const i18n = useI18n();
+
+const disabledTooltip = computed(() =>
+	props.managedByEnv
+		? i18n.baseText('settings.mcp.managedByEnv.tooltip')
+		: i18n.baseText('settings.mcp.toggle.disabled.tooltip'),
+);
+
+// The leading icon is rendered by the #item-leading slot below, so the item
+// itself carries no icon.
+const menuItems = computed(() => [
+	{
+		id: 'disable',
+		label: i18n.baseText('settings.mcp.status.disable'),
+	},
+]);
+
+const onSelect = (id: string) => {
+	if (id === 'disable') emit('disable');
+};
+</script>
+
+<template>
+	<N8nTooltip :content="disabledTooltip" :disabled="!props.disabled" placement="top">
+		<N8nDropdownMenu
+			:items="menuItems"
+			placement="bottom-end"
+			:disabled="props.disabled || props.loading"
+			data-test-id="mcp-status-control"
+			@select="onSelect"
+		>
+			<template #trigger>
+				<N8nButton
+					variant="outline"
+					size="medium"
+					:disabled="props.disabled"
+					:loading="props.loading"
+					:aria-label="i18n.baseText('settings.mcp.status.ariaLabel')"
+					data-test-id="mcp-status-control-trigger"
+				>
+					<span :class="$style.dot" />
+					{{ i18n.baseText('settings.mcp.header.toggle.enabled') }}
+					<N8nIcon icon="chevron-down" size="small" />
+				</N8nButton>
+			</template>
+			<template #item-leading>
+				<N8nIcon icon="power" size="large" color="danger" />
+			</template>
+			<template #item-label="{ item }">
+				<N8nText size="medium" color="danger" data-test-id="mcp-status-disable-item">
+					{{ item.label }}
+				</N8nText>
+			</template>
+		</N8nDropdownMenu>
+	</N8nTooltip>
+</template>
+
+<style lang="scss" module>
+.dot {
+	width: 8px;
+	height: 8px;
+	flex-shrink: 0;
+	border-radius: 50%;
+	background-color: var(--color--success);
+	animation: mcp-status-pulse 2s ease-in-out infinite;
+}
+
+@keyframes mcp-status-pulse {
+	50% {
+		opacity: 0.4;
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.dot {
+		animation: none;
+	}
+}
+</style>

package/src/components/OAuthClientDetailsModal.vue

@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import type { OAuthClientResponseDto } from '@n8n/api-types';
+import {
+	N8nButton,
+	N8nDialog,
+	N8nDialogDescription,
+	N8nDialogFooter,
+	N8nDialogHeader,
+	N8nDialogTitle,
+	N8nIcon,
+	N8nText,
+	N8nTimeAgo,
+} from '@n8n/design-system';
+import { useI18n } from '@n8n/i18n';
+import type { BaseTextKey } from '@n8n/i18n';
+import { useRootStore } from '@n8n/stores/useRootStore';
+
+import { getClientBrand, scopeLabel } from '../clients.utils';
+
+const props = defineProps<{
+	client: OAuthClientResponseDto | null;
+	open: boolean;
+}>();
+
+const emit = defineEmits<{
+	'update:open': [value: boolean];
+	revoke: [client: OAuthClientResponseDto];
+}>();
+
+const i18n = useI18n();
+const rootStore = useRootStore();
+
+const brand = computed(() => (props.client ? getClientBrand(props.client.name) : null));
+
+const ownerLabel = computed(() => {
+	const owner = props.client?.owner;
+	if (!owner) return null;
+	const name = [owner.firstName, owner.lastName].filter(Boolean).join(' ');
+	return name ? `${name} (${owner.email})` : owner.email;
+});
+
+const subtitle = computed(() => {
+	const type = brand.value?.type;
+	if (!type) return i18n.baseText('settings.mcp.oAuthClients.details.subtitle');
+	return i18n.baseText('settings.mcp.oAuthClients.details.subtitleWithType', {
+		interpolate: {
+			type: i18n.baseText(`settings.mcp.oAuthClients.clientType.${type}` as BaseTextKey),
+		},
+	});
+});
+
+/** Granted scopes as human labels, listed plainly in grant order. */
+const grantedScopes = computed(() => props.client?.scopes ?? []);
+
+function onRevoke() {
+	if (!props.client) return;
+	emit('revoke', props.client);
+	emit('update:open', false);
+}
+</script>
+
+<template>
+	<N8nDialog :open="open" size="medium" @update:open="emit('update:open', $event)">
+		<div v-if="client" :class="$style.container" data-test-id="mcp-client-details-modal">
+			<N8nDialogHeader>
+				<N8nDialogTitle>
+					<span :class="$style.title">
+						<span :class="$style['icon-chip']">
+							<component :is="brand.icon" v-if="brand?.icon" :class="$style.icon" />
+							<N8nIcon v-else icon="mcp" :class="$style.icon" />
+						</span>
+						{{ client.name }}
+					</span>
+				</N8nDialogTitle>
+				<N8nDialogDescription>{{ subtitle }}</N8nDialogDescription>
+			</N8nDialogHeader>
+
+			<div :class="$style.details">
+				<template v-if="ownerLabel">
+					<N8nText color="text-light" size="small">
+						{{ i18n.baseText('settings.mcp.oAuthClients.details.connectedBy') }}
+					</N8nText>
+					<N8nText color="text-dark" size="small" data-test-id="mcp-client-details-connected-by">
+						{{ ownerLabel }}
+					</N8nText>
+				</template>
+
+				<N8nText color="text-light" size="small">
+					{{ i18n.baseText('settings.mcp.oAuthClients.details.connectedOn') }}
+				</N8nText>
+				<N8nText color="text-dark" size="small" data-test-id="mcp-client-details-connected-on">
+					<N8nTimeAgo
+						:date="new Date(client.grantedAt).toISOString()"
+						capitalize
+						:locale="rootStore.defaultLocale"
+					/>
+				</N8nText>
+
+				<N8nText color="text-light" size="small">
+					{{ i18n.baseText('settings.mcp.oAuthClients.details.access') }}
+				</N8nText>
+				<div :class="$style.access" data-test-id="mcp-client-details-access">
+					<N8nText
+						v-for="scope in grantedScopes"
+						:key="scope"
+						color="text-dark"
+						size="small"
+						:data-test-id="`mcp-client-details-scope-${scope}`"
+					>
+						{{ scopeLabel(i18n, scope) }}
+					</N8nText>
+				</div>
+			</div>
+
+			<N8nDialogFooter>
+				<N8nButton
+					variant="subtle"
+					data-test-id="mcp-client-details-close"
+					@click="emit('update:open', false)"
+				>
+					{{ i18n.baseText('generic.close') }}
+				</N8nButton>
+				<N8nButton variant="destructive" data-test-id="mcp-client-details-revoke" @click="onRevoke">
+					{{ i18n.baseText('settings.mcp.oAuthClients.table.action.revokeAccess') }}
+				</N8nButton>
+			</N8nDialogFooter>
+		</div>
+	</N8nDialog>
+</template>
+
+<style lang="scss" module>
+.container {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing--sm);
+}
+
+.title {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing--2xs);
+}
+
+.icon-chip {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: var(--spacing--xl);
+	height: var(--spacing--xl);
+	flex-shrink: 0;
+	/* fixed white tile so dark brand marks stay visible on the dark theme */
+	background-color: var(--color--neutral-white);
+	border: var(--border);
+	border-radius: var(--radius);
+}
+
+.icon {
+	width: var(--spacing--md);
+	height: var(--spacing--md);
+	/* the tile is always white, so the fallback MCP glyph must stay dark in both themes */
+	color: var(--color--neutral-black);
+}
+
+.details {
+	display: grid;
+	grid-template-columns: minmax(120px, auto) 1fr;
+	column-gap: var(--spacing--lg);
+	row-gap: var(--spacing--xs);
+	align-items: start;
+	max-height: 60vh;
+	overflow-y: auto;
+}
+
+.access {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing--3xs);
+	min-width: 0;
+}
+</style>

package/src/components/RevokeOAuthClientConfirmModal.vue

@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useI18n } from '@n8n/i18n';
+import type { OAuthClientResponseDto } from '@n8n/api-types';
+import { N8nAlertDialog } from '@n8n/design-system';
+
+const props = defineProps<{
+	client: OAuthClientResponseDto | null;
+	open: boolean;
+	loading?: boolean;
+	/** When the caller is not the consent owner — admin revoking another user's client. */
+	revokingForOther?: boolean;
+}>();
+
+const emit = defineEmits<{
+	'update:open': [value: boolean];
+	confirm: [];
+	cancel: [];
+}>();
+
+const i18n = useI18n();
+
+const title = computed(() =>
+	props.client
+		? i18n.baseText('settings.mcp.oAuthClients.revoke.title', {
+				interpolate: { name: props.client.name },
+			})
+		: '',
+);
+
+const description = computed(() => {
+	if (!props.client) return '';
+	if (props.revokingForOther) {
+		const owner = props.client.owner;
+		const ownerName =
+			[owner?.firstName, owner?.lastName].filter(Boolean).join(' ') || owner?.email || '';
+		return i18n.baseText('settings.mcp.oAuthClients.revoke.description.other', {
+			interpolate: { ownerName },
+		});
+	}
+	return i18n.baseText('settings.mcp.oAuthClients.revoke.description.own');
+});
+</script>
+
+<template>
+	<N8nAlertDialog
+		:open="open"
+		:title="title"
+		:description="description"
+		:action-label="i18n.baseText('settings.mcp.oAuthClients.revoke.button')"
+		:cancel-label="i18n.baseText('generic.cancel')"
+		action-variant="destructive"
+		:loading="loading"
+		size="medium"
+		data-test-id="mcp-client-revoke-confirm"
+		@action="emit('confirm')"
+		@cancel="emit('cancel')"
+		@update:open="emit('update:open', $event)"
+	/>
+</template>