@n8n/frontend-module-mcp 0.1.0

package/src/components/tabs/AgentsTable.vue

@@ -0,0 +1,312 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { useI18n } from '@n8n/i18n';
+import type { McpAgent } from '../../mcp.types';
+import type { TableHeader, TableOptions, UserAction } from '@n8n/design-system';
+import {
+	N8nActionToggle,
+	N8nButton,
+	N8nDataTableServer,
+	N8nLink,
+	N8nLoading,
+	N8nSelectedItemsInfo,
+	N8nText,
+} from '@n8n/design-system';
+import { AGENT_VIEW, PROJECT_AGENTS } from '@n8n/frontend-constants/agents';
+import { useRouter } from 'vue-router';
+
+type Props = {
+	agents: McpAgent[];
+	totalCount?: number;
+	loading: boolean;
+};
+
+const props = defineProps<Props>();
+
+const tableOptions = defineModel<TableOptions>('tableOptions', {
+	default: () => ({
+		page: 0,
+		itemsPerPage: 10,
+		sortBy: [],
+	}),
+});
+
+const tablePage = computed({
+	get: () => tableOptions.value.page,
+	set: (page: number) => {
+		tableOptions.value = { ...tableOptions.value, page };
+	},
+});
+
+const tableItemsPerPage = computed({
+	get: () => tableOptions.value.itemsPerPage,
+	set: (itemsPerPage: number) => {
+		tableOptions.value = { ...tableOptions.value, itemsPerPage };
+	},
+});
+
+const tableSortBy = computed({
+	get: () => tableOptions.value.sortBy,
+	set: (sortBy: TableOptions['sortBy']) => {
+		tableOptions.value = { ...tableOptions.value, sortBy };
+	},
+});
+
+const emit = defineEmits<{
+	removeMcpAccess: [agent: McpAgent];
+	bulkRemoveMcpAccess: [agentIds: string[]];
+	connectAgents: [];
+	'update:options': [payload: TableOptions];
+}>();
+
+const i18n = useI18n();
+const router = useRouter();
+
+const itemsLength = computed(() => props.totalCount ?? props.agents.length);
+
+const selectedAgentIds = ref<string[]>([]);
+
+// Selection references loaded rows, so any data reload invalidates it
+watch(
+	() => props.agents,
+	() => {
+		selectedAgentIds.value = [];
+	},
+);
+
+const clearSelection = () => {
+	selectedAgentIds.value = [];
+};
+
+const onBulkRemoveMcpAccess = () => {
+	emit('bulkRemoveMcpAccess', selectedAgentIds.value);
+};
+
+const tableHeaders = ref<Array<TableHeader<McpAgent>>>([
+	{
+		title: i18n.baseText('settings.mcp.agents.table.column.name'),
+		key: 'agent',
+		width: 300,
+		disableSort: true,
+		value() {
+			return;
+		},
+	},
+	{
+		title: i18n.baseText('settings.mcp.agents.table.column.location'),
+		key: 'location',
+		width: 300,
+		disableSort: true,
+		value() {
+			return;
+		},
+	},
+	{
+		title: '',
+		key: 'actions',
+		align: 'end',
+		width: 50,
+		disableSort: true,
+		value() {
+			return;
+		},
+	},
+]);
+
+const availableActions: Array<UserAction<McpAgent>> = [
+	{
+		label: i18n.baseText('settings.mcp.agents.table.action.removeMCPAccess'),
+		value: 'removeFromMCP',
+	},
+];
+
+const onAgentAction = (action: string, agent: McpAgent) => {
+	if (action === 'removeFromMCP') {
+		emit('removeMcpAccess', agent);
+	}
+};
+
+const onConnectClick = () => {
+	emit('connectAgents');
+};
+
+const agentLink = (agent: McpAgent) =>
+	router.resolve({
+		name: AGENT_VIEW,
+		params: { projectId: agent.projectId, agentId: agent.id },
+	}).fullPath;
+
+const projectName = (agent: McpAgent) =>
+	agent.project?.type === 'personal'
+		? i18n.baseText('projects.menu.personal')
+		: (agent.project?.name ?? '');
+
+const projectLink = (agent: McpAgent) =>
+	router.resolve({
+		name: PROJECT_AGENTS,
+		params: { projectId: agent.projectId },
+	}).fullPath;
+</script>
+
+<template>
+	<div>
+		<div v-if="props.loading">
+			<N8nLoading :loading="props.loading" variant="h1" class="mb-l" />
+			<N8nLoading :loading="props.loading" variant="p" :rows="5" :shrink-last="false" />
+		</div>
+		<div v-else class="mt-s mb-xl" :class="$style['table-container']">
+			<N8nDataTableServer
+				v-model:sort-by="tableSortBy"
+				v-model:page="tablePage"
+				v-model:items-per-page="tableItemsPerPage"
+				v-model:selection="selectedAgentIds"
+				:class="$style['agent-table']"
+				data-test-id="mcp-agent-table"
+				:headers="tableHeaders"
+				:items="props.agents"
+				:items-length="itemsLength"
+				:page-sizes="[10, 25, 50]"
+				:show-select="itemsLength > 0"
+				@update:options="emit('update:options', $event)"
+			>
+				<template v-if="itemsLength === 0" #cover>
+					<div :class="$style['empty-state']">
+						<N8nText data-test-id="mcp-agent-table-empty-state" size="large" color="text-base">
+							{{ i18n.baseText('settings.mcp.agents.table.empty.title') }}
+						</N8nText>
+						<N8nText
+							data-test-id="mcp-agent-table-empty-state-description"
+							size="small"
+							color="text-base"
+						>
+							{{ i18n.baseText('settings.mcp.agents.table.empty.description') }}
+						</N8nText>
+						<N8nButton
+							variant="solid"
+							data-test-id="mcp-agent-table-empty-state-button"
+							:label="i18n.baseText('settings.mcp.connectAgents')"
+							@click="onConnectClick"
+						/>
+					</div>
+				</template>
+				<template #[`item.agent`]="{ item }">
+					<div :class="$style['agent-cell']" data-test-id="mcp-agent-cell">
+						<N8nLink
+							data-test-id="mcp-agent-name-link"
+							:new-window="true"
+							:to="agentLink(item)"
+							:theme="'text'"
+							:class="[$style['table-link'], $style.truncate]"
+						>
+							<N8nText :class="$style.truncate" data-test-id="mcp-agent-name">{{
+								item.name
+							}}</N8nText>
+						</N8nLink>
+					</div>
+				</template>
+				<template #[`item.location`]="{ item }">
+					<div :class="$style['location-cell']" data-test-id="mcp-agent-location-cell">
+						<N8nLink
+							data-test-id="mcp-agent-project-link"
+							:new-window="true"
+							:to="projectLink(item)"
+							:theme="'text'"
+							:class="[$style['table-link'], $style.truncate]"
+						>
+							<N8nText :class="$style.truncate" data-test-id="mcp-agent-project-name">{{
+								projectName(item)
+							}}</N8nText>
+						</N8nLink>
+					</div>
+				</template>
+				<template #[`item.actions`]="{ item }">
+					<N8nActionToggle
+						:class="$style['action-toggle']"
+						data-test-id="mcp-agent-action-toggle"
+						placement="bottom"
+						:actions="availableActions"
+						theme="dark"
+						@action="onAgentAction($event, item)"
+					/>
+				</template>
+			</N8nDataTableServer>
+			<N8nSelectedItemsInfo
+				:class="$style['selection-bar']"
+				:selected-count="selectedAgentIds.length"
+				@clear-selection="clearSelection"
+			>
+				<template #actions>
+					<N8nButton
+						variant="subtle"
+						data-test-id="mcp-bulk-remove-agent-access-button"
+						:label="i18n.baseText('settings.mcp.agents.table.action.removeMCPAccess')"
+						@click="onBulkRemoveMcpAccess"
+					/>
+				</template>
+			</N8nSelectedItemsInfo>
+		</div>
+	</div>
+</template>
+
+<style module lang="scss">
+// The selection bar's default absolute positioning assumes a tall anchor
+// container and overlaps the header when the table is short. Sticky keeps
+// it below the table, floating at the viewport bottom only while a long
+// table extends past it.
+.table-container .selection-bar {
+	position: sticky;
+	bottom: var(--spacing--3xl);
+	left: auto;
+	transform: none;
+	width: fit-content;
+	margin: 0 auto;
+}
+
+.agent-table {
+	margin-bottom: var(--spacing--sm);
+
+	:global(.table-scroll) {
+		overflow-y: hidden;
+	}
+
+	tr:last-child {
+		border-bottom: none !important;
+	}
+}
+
+.empty-state {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: var(--spacing--sm);
+	padding: var(--spacing--lg) 0;
+	min-height: 250px;
+}
+
+.agent-cell {
+	display: flex;
+	padding: var(--spacing--2xs) 0;
+	min-width: 0;
+	overflow: hidden;
+}
+
+.location-cell {
+	display: flex;
+	padding: var(--spacing--2xs) 0;
+	min-width: 0;
+	overflow: hidden;
+}
+
+.table-link {
+	color: var(--color--text);
+}
+
+.truncate {
+	display: block;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	min-width: 0;
+}
+</style>

package/src/components/tabs/OAuthClientOwnerCell.vue

@@ -0,0 +1,71 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import type { OAuthClientResponseDto } from '@n8n/api-types';
+import { N8nAvatar, N8nText } from '@n8n/design-system';
+import { useI18n } from '@n8n/i18n';
+
+const props = defineProps<{
+	owner: NonNullable<OAuthClientResponseDto['owner']>;
+	isCurrentUser?: boolean;
+}>();
+
+const i18n = useI18n();
+
+// Pending or nameless users fall back to their email, which is never empty.
+const displayName = computed(() => {
+	const name = [props.owner.firstName, props.owner.lastName].filter(Boolean).join(' ').trim();
+	return name || props.owner.email;
+});
+</script>
+
+<template>
+	<div :class="$style.cell" data-test-id="mcp-client-owner-cell">
+		<N8nAvatar
+			:first-name="owner.firstName ?? ''"
+			:last-name="owner.lastName ?? ''"
+			size="xsmall"
+			:class="$style.avatar"
+		/>
+		<div :class="$style.info">
+			<N8nText size="small" color="text-dark" :class="$style.name">
+				{{ displayName }}
+				<!-- text-base: subtler than the name but the lightest DS text color
+				     that still passes WCAG AA contrast on the row background. -->
+				<N8nText v-if="isCurrentUser" size="small" color="text-base">
+					{{ i18n.baseText('settings.mcp.oAuthClients.owner.you') }}
+				</N8nText>
+			</N8nText>
+			<N8nText size="xsmall" color="text-light" :class="$style.email" data-test-id="user-email">
+				{{ owner.email }}
+			</N8nText>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" module>
+/* Same compact owner treatment as the API keys table, so the two settings tables read alike. */
+.cell {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing--2xs);
+	min-width: 0;
+}
+
+.avatar {
+	flex-shrink: 0;
+}
+
+.info {
+	display: flex;
+	flex-direction: column;
+	min-width: 0;
+}
+
+.name,
+.email {
+	display: block;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+</style>

package/src/components/tabs/OAuthClientsFilters.test.ts

@@ -0,0 +1,86 @@
+import userEvent from '@testing-library/user-event';
+import { createTestingPinia } from '@pinia/testing';
+import { createComponentRenderer } from '@n8n/frontend-test-utils';
+import OAuthClientsFilters from './OAuthClientsFilters.vue';
+import { EMPTY_OAUTH_CLIENT_FILTERS } from '../../clients.utils';
+
+const createComponent = createComponentRenderer(OAuthClientsFilters, {
+	pinia: createTestingPinia(),
+});
+
+describe('OAuthClientsFilters', () => {
+	afterEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it('should render the type and connected selects but no owner select on the mine view', async () => {
+		const { getByTestId, queryByTestId } = createComponent({
+			props: {
+				modelValue: { ...EMPTY_OAUTH_CLIENT_FILTERS },
+				showOwnerFilter: false,
+			},
+		});
+
+		await userEvent.click(getByTestId('mcp-clients-filters-trigger'));
+
+		expect(getByTestId('mcp-clients-filters-dropdown')).toBeVisible();
+		expect(getByTestId('mcp-clients-filter-type')).toBeInTheDocument();
+		expect(getByTestId('mcp-clients-filter-connected')).toBeInTheDocument();
+		expect(queryByTestId('mcp-clients-filter-owner')).not.toBeInTheDocument();
+	});
+
+	it('should render the owner select on the all view', async () => {
+		const { getByTestId } = createComponent({
+			props: {
+				modelValue: { ...EMPTY_OAUTH_CLIENT_FILTERS },
+				showOwnerFilter: true,
+				owners: [{ id: 'user-1', firstName: 'Jane', lastName: 'Doe', email: 'jane@n8n.io' }],
+			},
+		});
+
+		await userEvent.click(getByTestId('mcp-clients-filters-trigger'));
+
+		expect(getByTestId('mcp-clients-filter-owner')).toBeInTheDocument();
+	});
+
+	it('should show the active filter count on the trigger', () => {
+		const { getByTestId } = createComponent({
+			props: {
+				modelValue: { ...EMPTY_OAUTH_CLIENT_FILTERS, type: 'cli', connected: 'last7' },
+			},
+		});
+
+		expect(getByTestId('mcp-clients-filters-count')).toHaveTextContent('2');
+	});
+
+	it('should not count the text search as an active filter', () => {
+		const { queryByTestId } = createComponent({
+			props: {
+				modelValue: { ...EMPTY_OAUTH_CLIENT_FILTERS, search: 'claude' },
+			},
+		});
+
+		expect(queryByTestId('mcp-clients-filters-count')).not.toBeInTheDocument();
+	});
+
+	it('should reset the popover filters but keep the search term', async () => {
+		const { getByTestId, emitted } = createComponent({
+			props: {
+				modelValue: {
+					search: 'claude',
+					type: 'cli' as const,
+					ownerId: 'user-1',
+					connected: 'last7' as const,
+				},
+				showOwnerFilter: true,
+			},
+		});
+
+		await userEvent.click(getByTestId('mcp-clients-filters-trigger'));
+		await userEvent.click(getByTestId('mcp-clients-filters-reset'));
+
+		expect(emitted('update:modelValue')).toEqual([
+			[{ search: 'claude', type: null, ownerId: null, connected: null }],
+		]);
+	});
+});

package/src/components/tabs/OAuthClientsFilters.vue

@@ -0,0 +1,201 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from '@n8n/i18n';
+import type { BaseTextKey } from '@n8n/i18n';
+import type { IUser } from '@n8n/design-system';
+import {
+	N8nBadge,
+	N8nButton,
+	N8nInputLabel,
+	N8nLink,
+	N8nOption,
+	N8nPopover,
+	N8nSelect,
+	N8nUserSelect,
+} from '@n8n/design-system';
+
+import type { McpClientConnectedPeriod, McpClientTypeFilter } from '@n8n/api-types';
+import { MCP_CLIENT_CONNECTED_PERIODS, MCP_CLIENT_TYPE_FILTERS } from '@n8n/api-types';
+
+import type { OAuthClientFilters } from '../../clients.utils';
+
+const props = defineProps<{
+	modelValue: OAuthClientFilters;
+	/** Consent owners offered by the "Connected by" select (All tab only). */
+	owners?: IUser[];
+	showOwnerFilter?: boolean;
+	currentUserId?: string;
+}>();
+
+const emit = defineEmits<{
+	'update:modelValue': [value: OAuthClientFilters];
+}>();
+
+const i18n = useI18n();
+
+const CLIENT_TYPE_OPTIONS: readonly McpClientTypeFilter[] = MCP_CLIENT_TYPE_FILTERS;
+const CONNECTED_OPTIONS: readonly McpClientConnectedPeriod[] = MCP_CLIENT_CONNECTED_PERIODS;
+
+const connectedOptionLabels: Record<McpClientConnectedPeriod, string> = {
+	last7: i18n.baseText('settings.mcp.oAuthClients.filters.connected.lastXDays', {
+		interpolate: { count: 7 },
+	}),
+	last30: i18n.baseText('settings.mcp.oAuthClients.filters.connected.lastXDays', {
+		interpolate: { count: 30 },
+	}),
+	older: i18n.baseText('settings.mcp.oAuthClients.filters.connected.older'),
+};
+
+// The search input lives outside the popover, so it doesn't count as a filter.
+const filtersLength = computed(() => {
+	const { type, ownerId, connected } = props.modelValue;
+	return [type, ownerId, connected].filter((value) => value !== null).length;
+});
+
+const hasFilters = computed(() => filtersLength.value > 0);
+
+// Selects can't carry null values, so '' stands in for "no filter".
+function setKeyValue(key: keyof OAuthClientFilters, value: string) {
+	emit('update:modelValue', { ...props.modelValue, [key]: value === '' ? null : value });
+}
+
+function resetFilters() {
+	emit('update:modelValue', { ...props.modelValue, type: null, ownerId: null, connected: null });
+}
+</script>
+
+<template>
+	<N8nPopover width="304px" :content-class="$style['popover-content']" align="end">
+		<template #trigger>
+			<span :class="$style['trigger-wrapper']">
+				<N8nButton
+					variant="outline"
+					icon="funnel"
+					size="medium"
+					:icon-only="!hasFilters"
+					:active="hasFilters"
+					:aria-label="i18n.baseText('forms.resourceFiltersDropdown.filters')"
+					data-test-id="mcp-clients-filters-trigger"
+				>
+					<N8nBadge
+						v-if="hasFilters"
+						:class="$style['filter-button-count']"
+						data-test-id="mcp-clients-filters-count"
+						variant="primary"
+					>
+						{{ filtersLength }}
+					</N8nBadge>
+					<span v-if="hasFilters">
+						{{ i18n.baseText('forms.resourceFiltersDropdown.filters') }}
+					</span>
+				</N8nButton>
+			</span>
+		</template>
+		<template #content>
+			<div :class="$style['filters-dropdown']" data-test-id="mcp-clients-filters-dropdown">
+				<N8nInputLabel
+					:label="i18n.baseText('settings.mcp.oAuthClients.filters.clientType')"
+					:bold="false"
+					size="small"
+					color="text-base"
+					class="mb-3xs"
+				/>
+				<N8nSelect
+					:model-value="modelValue.type ?? ''"
+					size="medium"
+					data-test-id="mcp-clients-filter-type"
+					@update:model-value="setKeyValue('type', $event)"
+				>
+					<N8nOption
+						value=""
+						:label="i18n.baseText('settings.mcp.oAuthClients.filters.clientType.all')"
+					/>
+					<N8nOption
+						v-for="type in CLIENT_TYPE_OPTIONS"
+						:key="type"
+						:value="type"
+						:label="
+							i18n.baseText(`settings.mcp.oAuthClients.filters.clientType.${type}` as BaseTextKey)
+						"
+					/>
+				</N8nSelect>
+
+				<template v-if="showOwnerFilter">
+					<N8nInputLabel
+						:label="i18n.baseText('settings.mcp.oAuthClients.filters.connectedBy')"
+						:bold="false"
+						size="small"
+						color="text-base"
+						class="mt-s mb-3xs"
+					/>
+					<N8nUserSelect
+						:users="owners ?? []"
+						:model-value="modelValue.ownerId ?? ''"
+						:current-user-id="currentUserId"
+						:placeholder="i18n.baseText('settings.mcp.oAuthClients.filters.connectedBy.all')"
+						size="medium"
+						clearable
+						data-test-id="mcp-clients-filter-owner"
+						@update:model-value="setKeyValue('ownerId', $event ?? '')"
+					/>
+				</template>
+
+				<N8nInputLabel
+					:label="i18n.baseText('settings.mcp.oAuthClients.filters.connected')"
+					:bold="false"
+					size="small"
+					color="text-base"
+					class="mt-s mb-3xs"
+				/>
+				<N8nSelect
+					:model-value="modelValue.connected ?? ''"
+					size="medium"
+					data-test-id="mcp-clients-filter-connected"
+					@update:model-value="setKeyValue('connected', $event)"
+				>
+					<N8nOption
+						value=""
+						:label="i18n.baseText('settings.mcp.oAuthClients.filters.connected.allTime')"
+					/>
+					<N8nOption
+						v-for="period in CONNECTED_OPTIONS"
+						:key="period"
+						:value="period"
+						:label="connectedOptionLabels[period]"
+					/>
+				</N8nSelect>
+
+				<div v-if="hasFilters" :class="[$style['filters-dropdown-footer'], 'mt-s']">
+					<N8nLink data-test-id="mcp-clients-filters-reset" @click="resetFilters">
+						{{ i18n.baseText('forms.resourceFiltersDropdown.reset') }}
+					</N8nLink>
+				</div>
+			</div>
+		</template>
+	</N8nPopover>
+</template>
+
+<style lang="scss" module>
+.popover-content {
+	padding: var(--spacing--sm);
+}
+
+.trigger-wrapper {
+	display: inline-flex;
+
+	&[data-state='open'] button {
+		background-color: var(--button--color--background-active);
+	}
+}
+
+.filter-button-count > span {
+	font-size: var(--font-size--3xs);
+	font-weight: var(--font-weight--semibold);
+}
+
+.filters-dropdown-footer {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+</style>