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

package/src/components/InboxList.vue

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import type { InboxItem, InboxState } from '@n8n/api-types';
+import { N8nButton, N8nHeading, N8nLoading, N8nTabs, N8nText } from '@n8n/design-system';
+import { useI18n } from '@n8n/i18n';
+import { useIntersectionObserver } from '@vueuse/core';
+import { computed, useTemplateRef } from 'vue';
+
+import { useReviewInboxSectionCollapse } from '../composables/useReviewInboxSectionCollapse';
+import type { InboxSectionKey } from '../inbox.constants';
+import InboxListSection from './InboxListSection.vue';
+import type { InboxListSection as ListSection } from './InboxListSection.vue';
+
+const props = defineProps<{
+	sections: ListSection[];
+	activeTab: InboxState;
+	selectedKey: string | null;
+	openCount: number | null;
+	closedCount: number | null;
+}>();
+const emit = defineEmits<{
+	select: [item: InboxItem];
+	clear: [];
+	'update:active-tab': [state: InboxState];
+	loadMore: [section: InboxSectionKey];
+	retry: [section: InboxSectionKey];
+	retryActiveTab: [];
+	refreshSection: [section: InboxSectionKey];
+}>();
+const i18n = useI18n();
+const { isCollapsed, toggleSection } = useReviewInboxSectionCollapse();
+const loading = computed(() => props.sections.some((section) => section.loading));
+const hasUsableRows = computed(() => props.sections.some((section) => section.items.length > 0));
+const showInitialLoadError = computed(
+	() =>
+		!hasUsableRows.value &&
+		props.sections.some((section) => section.failedRequest === 'list') &&
+		!props.sections.some((section) => section.partial),
+);
+const visibleSections = computed(() =>
+	props.sections.filter(
+		(section) =>
+			!loading.value &&
+			!showInitialLoadError.value &&
+			(section.error || section.partial || section.items.length > 0 || section.hasMore),
+	),
+);
+const listRef = useTemplateRef<HTMLElement>('list');
+const loadMoreSentinel = useTemplateRef<HTMLElement>('loadMoreSentinel');
+const canAutoLoad = computed(() => {
+	const closed = props.sections.find((section) => section.key === 'closed');
+	// A failed page waits for Retry. A visible sentinel would otherwise retry in a loop.
+	return (
+		props.activeTab === 'closed' &&
+		closed?.hasMore &&
+		!loading.value &&
+		!closed.loadingMore &&
+		!closed.error
+	);
+});
+useIntersectionObserver(
+	loadMoreSentinel,
+	([entry]) => {
+		if (entry?.isIntersecting && canAutoLoad.value) emit('loadMore', 'closed');
+	},
+	{ root: listRef, threshold: 0.01 },
+);
+const tabs = computed(() => [
+	{
+		value: 'open',
+		label: i18n.baseText('inbox.tabs.open'),
+		tag: props.openCount === null ? undefined : String(props.openCount),
+	},
+	{
+		value: 'closed',
+		label: i18n.baseText('inbox.tabs.closed'),
+		tag: props.closedCount === null ? undefined : String(props.closedCount),
+	},
+]);
+function onTabChange(value: string | number | boolean) {
+	if (value === 'open' || value === 'closed') emit('update:active-tab', value);
+}
+
+function onListBackgroundClick() {
+	if (props.selectedKey) emit('clear');
+}
+</script>
+
+<template>
+	<aside :class="$style.sidebar" data-test-id="inbox-list">
+		<div :class="$style.title">
+			<N8nHeading bold tag="h2" size="xlarge">{{ i18n.baseText('inbox.title') }}</N8nHeading>
+		</div>
+		<div :class="$style.header">
+			<N8nTabs
+				:model-value="activeTab"
+				:options="tabs"
+				variant="modern"
+				data-test-id="inbox-tabs"
+				@update:model-value="onTabChange"
+			/>
+		</div>
+		<div ref="list" :class="$style.list" @click.self="onListBackgroundClick">
+			<N8nLoading v-if="loading" :loading="true" :rows="3" data-test-id="inbox-list-skeleton" />
+			<div
+				v-else-if="showInitialLoadError"
+				:class="$style.sectionError"
+				role="alert"
+				data-test-id="inbox-list-error"
+			>
+				<N8nText color="danger" size="small">{{ i18n.baseText('inbox.loadError') }}</N8nText>
+				<N8nButton
+					variant="outline"
+					size="mini"
+					:label="i18n.baseText('generic.retry')"
+					@click="emit('retryActiveTab')"
+				/>
+			</div>
+			<InboxListSection
+				v-for="section in visibleSections"
+				:key="section.key"
+				:section="section"
+				:collapsed="section.key !== 'closed' && isCollapsed(section.key)"
+				:selected-key="selectedKey"
+				@select="emit('select', $event)"
+				@toggle="toggleSection"
+				@load-more="emit('loadMore', section.key)"
+				@retry="emit('retry', section.key)"
+				@refresh-section="emit('refreshSection', section.key)"
+			/>
+			<div v-if="canAutoLoad" ref="loadMoreSentinel" :class="$style.sentinel" />
+			<div
+				v-else-if="activeTab === 'closed' && !loading && !showInitialLoadError"
+				:class="$style.sentinel"
+			/>
+		</div>
+	</aside>
+</template>
+
+<style module lang="scss">
+.sidebar {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	min-width: 0;
+	height: 100%;
+	border-right: var(--border-width) solid var(--border-color);
+}
+
+.title {
+	display: flex;
+	align-items: center;
+	min-height: var(--spacing--2xl);
+	padding: 0 var(--spacing--md) var(--spacing--sm) 0;
+}
+
+.header {
+	position: relative;
+	display: flex;
+	align-items: center;
+	height: var(--review-tab-bar--height, var(--height--sm));
+	padding-right: var(--spacing--md);
+	margin-bottom: var(--review-tab-bar--gap);
+
+	&::after {
+		content: '';
+		position: absolute;
+		left: 0;
+		right: var(--spacing--md);
+		bottom: calc(-1 * var(--review-tab-bar--indicator-overhang) - var(--border-width));
+		border-bottom: var(--border-width) solid var(--border-color);
+	}
+}
+
+.list {
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	gap: var(--spacing--sm);
+	min-width: 0;
+	overflow-y: auto;
+	padding: 0 var(--spacing--md) var(--spacing--md) 0;
+}
+
+.sectionError {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--spacing--2xs);
+	padding: 0 var(--spacing--2xs);
+}
+
+.sentinel {
+	height: var(--border-width);
+}
+</style>

package/src/components/InboxListItem.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import type { InboxItem } from '@n8n/api-types';
+import { N8nBadge, N8nCard, N8nIcon, N8nText, N8nTimeAgo } from '@n8n/design-system';
+import { useRootStore } from '@n8n/stores/useRootStore';
+
+import WorkflowReviewStatusDot from '../reviews/components/WorkflowReviewStatusDot.vue';
+
+defineProps<{ item: InboxItem; selected: boolean }>();
+const emit = defineEmits<{ select: [] }>();
+const rootStore = useRootStore();
+</script>
+
+<template>
+	<N8nCard
+		:class="[$style.card, { [$style.selected]: selected }]"
+		role="option"
+		tabindex="0"
+		:aria-selected="selected"
+		:data-source="item.type"
+		data-test-id="inbox-row"
+		@click="emit('select')"
+		@keydown.enter.prevent="emit('select')"
+		@keydown.space.prevent="emit('select')"
+	>
+		<div :class="$style.cardContent">
+			<div :class="$style.cardHeader">
+				<N8nText bold tag="h3" :class="$style.cardTitle">{{ item.title }}</N8nText>
+				<WorkflowReviewStatusDot :state="item.state" :decision="item.decision" />
+			</div>
+			<div :class="$style.meta">
+				<N8nBadge v-if="item.workflowName" variant="outline" :class="$style.workflowBadge">
+					<span :class="$style.workflowBadgeText" :title="item.workflowName"
+						><N8nIcon icon="workflow" size="small" /><span>{{ item.workflowName }}</span></span
+					>
+				</N8nBadge>
+				<div :class="$style.metaActions">
+					<N8nText :class="$style.time" size="xsmall" color="text-light">
+						<N8nTimeAgo :date="item.createdAt" :locale="rootStore.defaultLocale" />
+					</N8nText>
+				</div>
+			</div>
+		</div>
+	</N8nCard>
+</template>
+
+<style module lang="scss">
+.card {
+	cursor: pointer;
+	padding: var(--spacing--xs);
+	align-items: stretch;
+	border: var(--border-width) solid var(--border-color);
+}
+
+.card:hover:not(.selected) {
+	background-color: var(--background--hover);
+	border-color: transparent;
+}
+
+.selected {
+	background-color: var(--background--active);
+	border-color: transparent;
+}
+.card:focus-visible {
+	border-color: var(--focus--border-color);
+}
+.cardContent {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: var(--spacing--2xs);
+	min-width: 0;
+	width: 100%;
+}
+.cardHeader {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--spacing--2xs);
+	width: 100%;
+	min-width: 0;
+}
+.cardTitle {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	min-width: 0;
+	font-size: var(--font-size--sm);
+}
+
+.meta {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--spacing--sm);
+	width: 100%;
+	min-width: 0;
+}
+.workflowBadge {
+	flex: 0 1 auto;
+	min-width: 0;
+	border: var(--border);
+	border-radius: var(--radius);
+	padding: var(--spacing--4xs) var(--spacing--2xs);
+	color: var(--color--text);
+	> span {
+		max-width: 100%;
+	}
+}
+.workflowBadgeText {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing--3xs);
+	max-width: 100%;
+	min-width: 0;
+	line-height: calc(var(--font-size--sm) + var(--border-width));
+	> span {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		min-width: 0;
+	}
+}
+.metaActions {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing--sm);
+	margin-left: auto;
+	flex-shrink: 0;
+}
+
+.time {
+	white-space: nowrap;
+}
+</style>

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="listbox"
+			: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">
+				<InboxListItem
+					v-for="item in section.items"
+					:key="`${item.type}:${item.id}`"
+					:item="item"
+					:selected="selectedKey === `${item.type}:${item.id}`"
+					@select="emit('select', item)"
+				/>
+			</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,16 @@
+import type { InboxSourceType, InboxState, WorkflowReviewRequestDecision } from '@n8n/api-types';
+
+export const INBOX_VIEW = 'Inbox';
+export const INBOX_PAGE_LIMIT = 15;
+
+export type InboxSectionKey = 'waiting' | 'authored' | 'closed';
+
+export type InboxSelection = { type: 'workflow_review'; id: string };
+
+export type InboxItemChange = {
+	type: InboxSourceType;
+	id: string;
+	state?: InboxState;
+	decision?: WorkflowReviewRequestDecision;
+	updatedAt?: string;
+};

package/src/inbox.module.ts

@@ -0,0 +1,50 @@
+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: 'The shared Inbox for workflow reviews.',
+	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',
+		},
+	],
+});