@n8n/frontend-module-inbox 0.0.0-stage → 0.2.0

package/src/components/InboxListSection.vue

@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import type { InboxItem } from '@n8n/api-types';
+import { N8nButton, N8nIcon, N8nLoading, N8nText } from '@n8n/design-system';
+import { useI18n } from '@n8n/i18n';
+import { useUsersStore } from '@n8n/stores/users.store';
+
+import type { CollapsibleReviewInboxSection } from '../composables/useReviewInboxSectionCollapse';
+import type { InboxSectionKey } from '../inbox.constants';
+import InboxListItem from './InboxListItem.vue';
+
+export type InboxListSection = {
+	key: InboxSectionKey;
+	items: InboxItem[];
+	loading: boolean;
+	loadingMore: boolean;
+	hasMore: boolean;
+	error: Error | null;
+	failedRequest: 'list' | 'loadMore' | null;
+	partial: boolean;
+};
+
+defineProps<{
+	section: InboxListSection;
+	collapsed: boolean;
+	selectedKey: string | null;
+}>();
+const emit = defineEmits<{
+	select: [item: InboxItem];
+	toggle: [key: CollapsibleReviewInboxSection];
+	loadMore: [];
+	retry: [];
+	refreshSection: [];
+}>();
+const i18n = useI18n();
+const usersStore = useUsersStore();
+
+function sectionTitle(key: 'waiting' | 'authored') {
+	return key === 'waiting' && usersStore.isAdminOrOwner
+		? i18n.baseText('workflowReviews.sidebar.section.waiting.titleAdmin')
+		: i18n.baseText(`workflowReviews.sidebar.section.${key}.title`);
+}
+</script>
+
+<template>
+	<div :class="$style.section" :data-section="section.key">
+		<button
+			v-if="section.key !== 'closed'"
+			:id="`inbox-section-header-${section.key}`"
+			type="button"
+			:class="$style.sectionHeader"
+			:aria-expanded="!collapsed"
+			:aria-controls="`inbox-section-${section.key}`"
+			data-test-id="inbox-section-header"
+			@click="emit('toggle', section.key)"
+		>
+			<N8nIcon
+				icon="chevron-down"
+				size="small"
+				:class="[$style.chevron, { [$style.chevronCollapsed]: collapsed }]"
+			/>
+			<N8nText bold size="small" color="text-base">{{ sectionTitle(section.key) }}</N8nText>
+		</button>
+		<div
+			:id="`inbox-section-${section.key}`"
+			:class="$style.group"
+			role="list"
+			:aria-labelledby="
+				section.key !== 'closed' ? `inbox-section-header-${section.key}` : undefined
+			"
+			:aria-label="section.key === 'closed' ? i18n.baseText('inbox.tabs.closed') : undefined"
+		>
+			<template v-if="!collapsed">
+				<div v-for="item in section.items" :key="`${item.type}:${item.id}`" role="listitem">
+					<InboxListItem
+						:item="item"
+						:selected="selectedKey === `${item.type}:${item.id}`"
+						@select="emit('select', item)"
+					/>
+				</div>
+			</template>
+		</div>
+		<template v-if="!collapsed">
+			<div v-if="section.loadingMore" :class="$style.loadingMore">
+				<N8nLoading :loading="true" :rows="1" />
+			</div>
+			<div v-if="section.partial" :class="$style.notice" role="status" data-test-id="inbox-partial">
+				<N8nText size="small">{{ i18n.baseText('inbox.partial') }}</N8nText>
+				<N8nButton
+					size="mini"
+					variant="outline"
+					:label="i18n.baseText('generic.retry')"
+					@click="emit('refreshSection')"
+				/>
+			</div>
+			<div v-if="section.error" :class="$style.notice" role="alert" data-test-id="inbox-list-error">
+				<N8nText color="danger" size="small">{{ i18n.baseText('inbox.loadError') }}</N8nText>
+				<N8nButton
+					size="mini"
+					variant="outline"
+					:label="i18n.baseText('generic.retry')"
+					@click="emit('retry')"
+				/>
+			</div>
+			<N8nButton
+				v-if="section.key !== 'closed' && section.hasMore"
+				:class="$style.loadMore"
+				size="small"
+				variant="outline"
+				:loading="section.loadingMore"
+				:disabled="section.loading"
+				:label="i18n.baseText('inbox.loadMore')"
+				data-test-id="inbox-load-more"
+				@click="emit('loadMore')"
+			/>
+		</template>
+	</div>
+</template>
+
+<style module lang="scss">
+.section,
+.group {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing--2xs);
+	min-width: 0;
+}
+
+.sectionHeader {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing--3xs);
+	width: 100%;
+	padding: var(--spacing--3xs) var(--spacing--2xs);
+	border: none;
+	border-radius: var(--radius);
+	background: transparent;
+	cursor: pointer;
+	text-align: left;
+}
+.sectionHeader:hover {
+	background-color: var(--background--active);
+}
+.sectionHeader:focus-visible {
+	outline: var(--border-width) solid var(--focus--border-color);
+}
+.chevron {
+	transition: transform var(--duration--snappy) ease;
+	color: var(--color--text--tint-1);
+}
+.chevronCollapsed {
+	transform: rotate(-90deg);
+}
+.notice {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--spacing--2xs);
+	padding: 0 var(--spacing--2xs);
+}
+
+.loadMore {
+	align-self: center;
+}
+
+.loadingMore {
+	padding: var(--spacing--sm);
+}
+</style>

package/src/composables/useReviewInboxSectionCollapse.test.ts

@@ -0,0 +1,66 @@
+import { createPinia, setActivePinia } from 'pinia';
+import { nextTick } from 'vue';
+
+import { useUsersStore } from '@n8n/stores/users.store';
+import { useReviewInboxSectionCollapse } from './useReviewInboxSectionCollapse';
+
+describe('useReviewInboxSectionCollapse', () => {
+	beforeEach(() => {
+		localStorage.clear();
+		setActivePinia(createPinia());
+	});
+
+	it('starts with both sections expanded and writes nothing until toggled', () => {
+		useUsersStore().currentUserId = 'user-1';
+		const { isCollapsed } = useReviewInboxSectionCollapse();
+
+		expect(isCollapsed('waiting')).toBe(false);
+		expect(isCollapsed('authored')).toBe(false);
+		expect(localStorage.getItem('user-1_N8N_WORKFLOW_REVIEW_INBOX_COLLAPSED_SECTIONS')).toBeNull();
+	});
+
+	it('restores the existing review section preference', () => {
+		useUsersStore().currentUserId = 'user-1';
+		localStorage.setItem(
+			'user-1_N8N_WORKFLOW_REVIEW_INBOX_COLLAPSED_SECTIONS',
+			JSON.stringify({ waiting: true, authored: false }),
+		);
+		const { isCollapsed } = useReviewInboxSectionCollapse();
+		expect(isCollapsed('waiting')).toBe(true);
+		expect(isCollapsed('authored')).toBe(false);
+	});
+
+	it('persists a collapsed section for the current user', async () => {
+		useUsersStore().currentUserId = 'user-1';
+		const { isCollapsed, toggleSection } = useReviewInboxSectionCollapse();
+
+		toggleSection('authored');
+		await nextTick();
+
+		expect(isCollapsed('authored')).toBe(true);
+		expect(isCollapsed('waiting')).toBe(false);
+		expect(localStorage.getItem('user-1_N8N_WORKFLOW_REVIEW_INBOX_COLLAPSED_SECTIONS')).toBe(
+			JSON.stringify({ waiting: false, authored: true }),
+		);
+	});
+
+	it('keeps the choice independent between users', () => {
+		useUsersStore().currentUserId = 'user-1';
+		useReviewInboxSectionCollapse().toggleSection('waiting');
+
+		setActivePinia(createPinia());
+		useUsersStore().currentUserId = 'user-2';
+
+		expect(useReviewInboxSectionCollapse().isCollapsed('waiting')).toBe(false);
+	});
+
+	it('falls back to a non-persistent ref when there is no current user', async () => {
+		const { isCollapsed, toggleSection } = useReviewInboxSectionCollapse();
+
+		toggleSection('waiting');
+		await nextTick();
+
+		expect(isCollapsed('waiting')).toBe(true);
+		expect(localStorage.getItem('_N8N_WORKFLOW_REVIEW_INBOX_COLLAPSED_SECTIONS')).toBeNull();
+	});
+});

package/src/composables/useReviewInboxSectionCollapse.ts

@@ -0,0 +1,42 @@
+import { useLocalStorage } from '@vueuse/core';
+import { ref } from 'vue';
+
+import { useUsersStore } from '@n8n/stores/users.store';
+
+/** Only the open tab is sectioned, so only those two sections can collapse. */
+export type CollapsibleReviewInboxSection = 'waiting' | 'authored';
+
+export type CollapsedReviewInboxSections = Record<CollapsibleReviewInboxSection, boolean>;
+
+const DEFAULT_COLLAPSED: CollapsedReviewInboxSections = { waiting: false, authored: false };
+
+/**
+ * Which inbox sections are collapsed, persisted per user. Collapsing only hides
+ * rows — the store keeps the loaded items and their cursors, so re-expanding
+ * never refetches.
+ */
+export const useReviewInboxSectionCollapse = () => {
+	const usersStore = useUsersStore();
+	const userId = usersStore.currentUserId;
+
+	const collapsedSections = userId
+		? useLocalStorage<CollapsedReviewInboxSections>(
+				`${userId}_N8N_WORKFLOW_REVIEW_INBOX_COLLAPSED_SECTIONS`,
+				{ ...DEFAULT_COLLAPSED },
+				{ writeDefaults: false },
+			)
+		: ref<CollapsedReviewInboxSections>({ ...DEFAULT_COLLAPSED });
+
+	function isCollapsed(section: CollapsibleReviewInboxSection): boolean {
+		return collapsedSections.value[section] ?? false;
+	}
+
+	function toggleSection(section: CollapsibleReviewInboxSection): void {
+		collapsedSections.value = {
+			...collapsedSections.value,
+			[section]: !isCollapsed(section),
+		};
+	}
+
+	return { collapsedSections, isCollapsed, toggleSection };
+};

package/src/inbox.api.ts

@@ -0,0 +1,20 @@
+import type {
+	GetInboxSummaryResponse,
+	InboxCategory,
+	InboxState,
+	ListInboxResponse,
+} from '@n8n/api-types';
+import { makeRestApiRequest, type IRestApiContext } from '@n8n/rest-api-client';
+
+export async function fetchInbox(
+	context: IRestApiContext,
+	query: { state: InboxState; category?: InboxCategory; limit: number; cursor?: string },
+): Promise<ListInboxResponse> {
+	return await makeRestApiRequest(context, 'GET', '/inbox', query);
+}
+
+export async function fetchInboxSummary(
+	context: IRestApiContext,
+): Promise<GetInboxSummaryResponse> {
+	return await makeRestApiRequest(context, 'GET', '/inbox/summary');
+}

package/src/inbox.constants.ts

@@ -0,0 +1,19 @@
+import type { InboxSourceType, InboxState, WorkflowReviewRequestDecision } from '@n8n/api-types';
+
+export const INBOX_VIEW = 'Inbox';
+export const INBOX_ASSISTANT_RESULT_VIEW = 'InboxAssistantResult';
+export const INBOX_PAGE_LIMIT = 15;
+
+export type InboxSectionKey = 'waiting' | 'authored' | 'closed';
+
+export type InboxSelection =
+	| { type: 'workflow_review'; id: string }
+	| { type: 'self_healing_result'; id: string; projectId: string; workflowId: string };
+
+export type InboxItemChange = {
+	type: InboxSourceType;
+	id: string;
+	state?: InboxState;
+	decision?: WorkflowReviewRequestDecision;
+	updatedAt?: string;
+};

package/src/inbox.module.ts

@@ -0,0 +1,55 @@
+import { defineFrontendModule } from '@n8n/frontend-module-sdk';
+import type { RouteRecordSingleView } from 'vue-router';
+
+const inboxView = {
+	component: async () => await import('./views/InboxView.vue'),
+
+	async beforeEnter() {
+		const { useSettingsStore } = await import('@n8n/stores/settings.store');
+
+		return useSettingsStore().settings.inbox?.enabled === true || '/';
+	},
+
+	meta: { layout: 'default', middleware: ['authenticated', 'custom'] },
+} satisfies Pick<RouteRecordSingleView, 'component' | 'beforeEnter' | 'meta'>;
+
+export const InboxModule = defineFrontendModule({
+	id: 'inbox',
+	name: 'Inbox',
+	description: 'Workflow reviews and saved Assistant results.',
+	icon: 'inbox',
+	routes: [
+		// Keep legacy /reviews links working after the move to Inbox.
+		{
+			path: '/reviews/:reviewRequestId?',
+			redirect: (to) => {
+				const reviewId = to.params.reviewRequestId;
+
+				if (typeof reviewId === 'string' && reviewId) {
+					return {
+						name: 'WorkflowReviewRequestsView',
+						params: { reviewId },
+						query: to.query,
+					};
+				}
+
+				return { name: 'Inbox', query: to.query };
+			},
+		},
+		{
+			...inboxView,
+			path: '/inbox',
+			name: 'Inbox',
+		},
+		{
+			...inboxView,
+			path: '/inbox/reviews/:reviewId',
+			name: 'WorkflowReviewRequestsView',
+		},
+		{
+			...inboxView,
+			path: '/inbox/assistant-results/:resultId',
+			name: 'InboxAssistantResult',
+		},
+	],
+});

package/src/inbox.routes.test.ts

@@ -0,0 +1,140 @@
+import { createMemoryHistory, createRouter } from 'vue-router';
+
+import { InboxModule } from './inbox.module';
+import { inboxItemLocation, isInboxRoute, selectionFromRoute } from './inbox.routes';
+
+const settingsStore = vi.hoisted(() => ({ settings: { inbox: { enabled: true } } }));
+vi.mock('@n8n/stores/settings.store', () => ({ useSettingsStore: () => settingsStore }));
+
+beforeEach(() => {
+	settingsStore.settings.inbox.enabled = true;
+});
+
+function createInboxRouter() {
+	const routes = (InboxModule.routes ?? []).map((route) =>
+		'component' in route ? { ...route, component: { template: '<div />' } } : route,
+	);
+	return createRouter({ history: createMemoryHistory(), routes });
+}
+
+const result = {
+	type: 'self_healing_result',
+	id: 'result-1',
+	state: 'open',
+	projectId: 'project',
+	workflowId: 'workflow',
+	workflowName: 'Workflow',
+	summary: 'Summary',
+	outcome: 'fix_ready',
+	createdAt: '',
+	updatedAt: '',
+	completedAt: '',
+} as const;
+
+it('redirects to home when Inbox is disabled', async () => {
+	settingsStore.settings.inbox.enabled = false;
+	const router = createInboxRouter();
+	router.addRoute({ path: '/', name: 'home', component: { template: '<div />' } });
+	await router.push('/inbox');
+	expect(router.currentRoute.value).toMatchObject({ path: '/', name: 'home' });
+});
+
+it('redirects an old review link and preserves filters and the detail tab', async () => {
+	const router = createInboxRouter();
+	await router.push('/reviews/review-1?state=closed&tab=changes&filter=a&filter=b');
+	expect(router.currentRoute.value.path).toBe('/inbox/reviews/review-1');
+	expect(router.currentRoute.value.query).toEqual({
+		state: 'closed',
+		tab: 'changes',
+		filter: ['a', 'b'],
+	});
+});
+
+it('redirects the old review list without selecting an item', async () => {
+	const router = createInboxRouter();
+	await router.push('/reviews?state=closed');
+	expect(router.currentRoute.value.fullPath).toBe('/inbox?state=closed');
+	expect(selectionFromRoute(router.currentRoute.value)).toBeNull();
+});
+
+it.each([
+	['/inbox/reviews/review-1', { type: 'workflow_review', id: 'review-1' }],
+	[
+		'/inbox/assistant-results/result-1?projectId=project&workflowId=workflow',
+		{
+			type: result.type,
+			id: result.id,
+			projectId: result.projectId,
+			workflowId: result.workflowId,
+		},
+	],
+])('selects the item when opening %s directly', async (path, selection) => {
+	const router = createInboxRouter();
+	await router.push(path);
+	expect(selectionFromRoute(router.currentRoute.value)).toEqual(selection);
+});
+
+it.each(['', '?projectId=project', '?workflowId=workflow'])(
+	'requires Assistant scope: %s',
+	async (query) => {
+		const router = createInboxRouter();
+		await router.push(`/inbox/assistant-results/result-1${query}`);
+		expect(selectionFromRoute(router.currentRoute.value)).toBeNull();
+	},
+);
+
+it.each([
+	['Inbox', true],
+	['WorkflowReviewRequestsView', true],
+	['InboxAssistantResult', true],
+	['Workflow', false],
+	[undefined, false],
+])('recognizes the Inbox route %s: %s', (name, expected) => {
+	expect(isInboxRoute({ name })).toBe(expected);
+});
+
+it('keeps the tab only when selecting the same item', async () => {
+	const router = createInboxRouter();
+	await router.push(
+		'/inbox/assistant-results/result-1?projectId=project&workflowId=workflow&state=closed&tab=changes',
+	);
+	expect(router.resolve(inboxItemLocation(result, router.currentRoute.value))).toMatchObject({
+		path: '/inbox/assistant-results/result-1',
+		query: { projectId: 'project', workflowId: 'workflow', state: 'closed', tab: 'changes' },
+	});
+	expect(
+		router.resolve(inboxItemLocation({ ...result, id: 'result-2' }, router.currentRoute.value))
+			.query,
+	).toEqual({
+		projectId: 'project',
+		workflowId: 'workflow',
+		state: 'closed',
+	});
+	await router.push('/inbox/reviews/result-1?state=closed&tab=changes');
+	expect(router.resolve(inboxItemLocation(result, router.currentRoute.value)).query).toEqual({
+		projectId: 'project',
+		workflowId: 'workflow',
+		state: 'closed',
+	});
+});
+
+it('restores selection and tabs when navigating back and forward', async () => {
+	const router = createInboxRouter();
+	await router.push('/inbox');
+	await router.push('/inbox/reviews/review-1?tab=changes');
+	await router.push(inboxItemLocation(result, router.currentRoute.value));
+	router.back();
+	await vi.waitFor(() =>
+		expect(router.currentRoute.value.fullPath).toBe('/inbox/reviews/review-1?tab=changes'),
+	);
+	expect(selectionFromRoute(router.currentRoute.value)).toEqual({
+		type: 'workflow_review',
+		id: 'review-1',
+	});
+	router.forward();
+	await vi.waitFor(() =>
+		expect(router.currentRoute.value.path).toBe('/inbox/assistant-results/result-1'),
+	);
+	expect(selectionFromRoute(router.currentRoute.value)?.id).toBe(result.id);
+	expect(router.currentRoute.value.query.tab).toBeUndefined();
+});

package/src/inbox.routes.ts

@@ -0,0 +1,49 @@
+import type { InboxItem } from '@n8n/api-types';
+import type { LocationQuery, RouteLocationNormalizedLoaded, RouteLocationRaw } from 'vue-router';
+
+import { INBOX_ASSISTANT_RESULT_VIEW, INBOX_VIEW, type InboxSelection } from './inbox.constants';
+import { WORKFLOW_REVIEW_REQUESTS_VIEW } from './reviews/constants';
+
+type InboxRoute = Pick<RouteLocationNormalizedLoaded, 'name' | 'params' | 'query'>;
+
+function stringParam(value: LocationQuery[string]): string | undefined {
+	return typeof value === 'string' && value.length > 0 ? value : undefined;
+}
+
+export function isInboxRoute(route: Pick<InboxRoute, 'name'>): boolean {
+	return (
+		route.name === INBOX_VIEW ||
+		route.name === WORKFLOW_REVIEW_REQUESTS_VIEW ||
+		route.name === INBOX_ASSISTANT_RESULT_VIEW
+	);
+}
+
+export function selectionFromRoute({ name, params, query }: InboxRoute): InboxSelection | null {
+	if (name === WORKFLOW_REVIEW_REQUESTS_VIEW) {
+		const id = stringParam(params.reviewId);
+		return id ? { type: 'workflow_review', id } : null;
+	}
+	if (name !== INBOX_ASSISTANT_RESULT_VIEW) return null;
+	const id = stringParam(params.resultId);
+	if (!id) return null;
+	const projectId = stringParam(query.projectId);
+	const workflowId = stringParam(query.workflowId);
+	if (projectId && workflowId) {
+		return { type: 'self_healing_result', id, projectId, workflowId };
+	}
+	return null;
+}
+
+export function inboxItemLocation(item: InboxItem, route?: InboxRoute): RouteLocationRaw {
+	const next: LocationQuery = { ...route?.query };
+	const selected = route ? selectionFromRoute(route) : null;
+	if (selected?.type !== item.type || selected.id !== item.id) delete next.tab;
+	delete next.projectId;
+	delete next.workflowId;
+	if (item.type === 'self_healing_result') {
+		next.projectId = item.projectId;
+		next.workflowId = item.workflowId;
+		return { name: INBOX_ASSISTANT_RESULT_VIEW, params: { resultId: item.id }, query: next };
+	}
+	return { name: WORKFLOW_REVIEW_REQUESTS_VIEW, params: { reviewId: item.id }, query: next };
+}