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

package/src/reviews/reviewDetail.store.test.ts

@@ -0,0 +1,135 @@
+import type {
+	DecideWorkflowReviewRequestResponse,
+	WorkflowReviewRequestDetail,
+} from '@n8n/api-types';
+import { ResponseError } from '@n8n/rest-api-client';
+import { createDeferredPromise } from '@n8n/utils/promise/deferred-promise';
+
+import { useReviewDetailStore } from './reviewDetail.store';
+import * as api from './workflowReviews.api';
+
+vi.mock('./workflowReviews.api');
+
+function detail(id: string): WorkflowReviewRequestDetail {
+	return {
+		id,
+		state: 'open',
+		decision: 'pending',
+		createdAt: '2026-01-01T00:00:00.000Z',
+		updatedAt: '2026-01-01T00:00:00.000Z',
+		projectId: 'project',
+		title: 'Review',
+		requester: null,
+		authors: [],
+		reviewers: [],
+		description: null,
+		workflows: [],
+		viewerCanDecide: true,
+		viewerCanComment: true,
+		viewerDecisionIneligibilityReason: null,
+	};
+}
+
+beforeEach(() => vi.resetAllMocks());
+
+it('ignores detail responses from an earlier selection', async () => {
+	const first = createDeferredPromise<WorkflowReviewRequestDetail>();
+	vi.mocked(api.fetchWorkflowReviewRequestDetail)
+		.mockReturnValueOnce(first.promise)
+		.mockResolvedValueOnce(detail('second'));
+	const store = useReviewDetailStore();
+	const pending = store.fetchDetail('first');
+	await store.fetchDetail('second');
+	first.resolve(detail('first'));
+	await pending;
+	expect(store.detail?.id).toBe('second');
+	expect(store.detailLoading).toBe(false);
+});
+
+it('keeps cached detail when a refetch reports that the review does not exist', async () => {
+	vi.mocked(api.fetchWorkflowReviewRequestDetail)
+		.mockResolvedValueOnce(detail('review'))
+		.mockRejectedValueOnce(new ResponseError('unavailable', { httpStatusCode: 404 }));
+	const store = useReviewDetailStore();
+	await store.fetchDetail('review');
+	await store.fetchDetail('review');
+	expect(store.detail?.id).toBe('review');
+	expect(store.detailNotFound).toBe(true);
+});
+
+it('reports an access error without marking the review as missing', async () => {
+	const error = new ResponseError('forbidden', { httpStatusCode: 403 });
+	vi.mocked(api.fetchWorkflowReviewRequestDetail)
+		.mockResolvedValueOnce(detail('review'))
+		.mockRejectedValueOnce(error);
+	const store = useReviewDetailStore();
+	await store.fetchDetail('review');
+	await expect(store.fetchDetail('review')).rejects.toBe(error);
+	expect(store.detail?.id).toBe('review');
+	expect(store.detailNotFound).toBe(false);
+});
+
+it('does not restore a cleared selection when its request finishes', async () => {
+	const request = createDeferredPromise<WorkflowReviewRequestDetail>();
+	vi.mocked(api.fetchWorkflowReviewRequestDetail).mockReturnValueOnce(request.promise);
+	const store = useReviewDetailStore();
+	const pending = store.fetchDetail('review');
+	store.clearDetail();
+	request.resolve(detail('review'));
+	await pending;
+	expect(store.detail).toBeNull();
+	expect(store.detailLoading).toBe(false);
+});
+
+it('applies a completed decision after the viewer returns to the same review', async () => {
+	vi.mocked(api.fetchWorkflowReviewRequestDetail).mockImplementation(async (_context, id) =>
+		detail(id),
+	);
+	const response = createDeferredPromise<DecideWorkflowReviewRequestResponse>();
+	vi.mocked(api.decideWorkflowReviewRequest).mockReturnValue(response.promise);
+	const store = useReviewDetailStore();
+	await store.fetchDetail('review');
+	const decision = store.decideOnReview('review', { decision: 'approved' });
+	store.clearDetail();
+	await store.fetchDetail('other');
+	store.clearDetail();
+	await store.fetchDetail('review');
+	response.resolve({
+		id: 'review',
+		state: 'closed',
+		decision: 'approved',
+		workflowVersionId: null,
+		createdAt: '2026-01-01T00:00:00.000Z',
+		updatedAt: '2026-01-01T00:00:00.000Z',
+	});
+	await decision;
+	expect(store.detail?.state).toBe('closed');
+	expect(store.detail?.decision).toBe('approved');
+});
+
+it('keeps a different review request when an earlier decision finishes', async () => {
+	const request = createDeferredPromise<WorkflowReviewRequestDetail>();
+	const response = createDeferredPromise<DecideWorkflowReviewRequestResponse>();
+	vi.mocked(api.fetchWorkflowReviewRequestDetail)
+		.mockResolvedValueOnce(detail('review'))
+		.mockReturnValueOnce(request.promise);
+	vi.mocked(api.decideWorkflowReviewRequest).mockReturnValueOnce(response.promise);
+	const store = useReviewDetailStore();
+	await store.fetchDetail('review');
+	const decision = store.decideOnReview('review', { decision: 'approved' });
+	store.clearDetail();
+	const pending = store.fetchDetail('other');
+	response.resolve({
+		...detail('review'),
+		state: 'closed',
+		decision: 'approved',
+		workflowVersionId: null,
+	});
+	await decision;
+	expect(store.detailLoading).toBe(true);
+	request.resolve(detail('other'));
+	await pending;
+	expect(store.detail?.state).toBe('open');
+	expect(store.detail?.id).toBe('other');
+	expect(store.detailLoading).toBe(false);
+});

package/src/reviews/reviewDetail.store.ts

@@ -0,0 +1,74 @@
+import type { WorkflowReviewRequestDetail } from '@n8n/api-types';
+import { ResponseError } from '@n8n/rest-api-client';
+import { useRootStore } from '@n8n/stores/useRootStore';
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+import {
+	decideWorkflowReviewRequest,
+	fetchWorkflowReviewRequestDetail,
+	type WorkflowReviewDecisionInput,
+} from './workflowReviews.api';
+
+export const useReviewDetailStore = defineStore('workflowReviewDetail', () => {
+	const rootStore = useRootStore();
+	const detail = ref<WorkflowReviewRequestDetail | null>(null);
+	const detailLoading = ref(false);
+	const detailNotFound = ref(false);
+	const deciding = ref(false);
+	const selectionRevision = ref(0);
+	let requestSeq = 0;
+
+	async function fetchDetail(id: string) {
+		const seq = ++requestSeq;
+		if (detail.value?.id !== id) {
+			detail.value = null;
+			detailLoading.value = true;
+			detailNotFound.value = false;
+		}
+		try {
+			const response = await fetchWorkflowReviewRequestDetail(rootStore.restApiContext, id);
+			if (seq !== requestSeq) return;
+			detail.value = response;
+			detailNotFound.value = false;
+		} catch (error) {
+			if (seq !== requestSeq) return;
+			if (error instanceof ResponseError && error.httpStatusCode === 404) {
+				detailNotFound.value = true;
+				return;
+			}
+			throw error;
+		} finally {
+			if (seq === requestSeq) detailLoading.value = false;
+		}
+	}
+
+	async function decideOnReview(id: string, input: WorkflowReviewDecisionInput) {
+		const response = await decideWorkflowReviewRequest(rootStore.restApiContext, id, input);
+		if (detail.value?.id === id) {
+			detail.value.decision = response.decision;
+			detail.value.state = response.state;
+			detail.value.updatedAt = response.updatedAt;
+		}
+		return response;
+	}
+
+	function clearDetail() {
+		requestSeq++;
+		selectionRevision.value++;
+		detail.value = null;
+		detailLoading.value = false;
+		detailNotFound.value = false;
+	}
+
+	return {
+		detail,
+		detailLoading,
+		detailNotFound,
+		deciding,
+		selectionRevision,
+		fetchDetail,
+		decideOnReview,
+		clearDetail,
+	};
+});

package/src/reviews/workflowReviewStatus.utils.ts

@@ -0,0 +1,44 @@
+import type { WorkflowReviewRequestDecision, WorkflowReviewRequestState } from '@n8n/api-types';
+import type { BaseTextKey, useI18n } from '@n8n/i18n';
+
+export type WorkflowReviewStatusDisplay = {
+	/** The state half alone, for surfaces that compose the two halves themselves. */
+	stateLabel: string;
+	/** The decision half alone, for surfaces where the state is implied. */
+	decisionLabel: string;
+	/** Color class of {@link WorkflowReviewStatusDot}. */
+	colorClass: 'pending' | 'changesRequested' | 'approved' | 'closed';
+};
+
+/**
+ * The one mapping from review state/decision to what users see — card badge,
+ * detail status card, and status dot all render from here so their labels and
+ * colors cannot drift apart. A closed review that never got a decision reads
+ * `No decision`, not `Waiting for review`: nobody is waiting anymore.
+ */
+export function getWorkflowReviewStatusDisplay(
+	i18n: ReturnType<typeof useI18n>,
+	state: WorkflowReviewRequestState,
+	decision: WorkflowReviewRequestDecision,
+): WorkflowReviewStatusDisplay {
+	const decisionKey: BaseTextKey =
+		state === 'closed' && decision === 'pending'
+			? 'workflowReviews.decision.noDecision'
+			: (`workflowReviews.decision.${decision}` as BaseTextKey);
+
+	const decisionLabel = i18n.baseText(decisionKey);
+	const stateLabel = i18n.baseText(`workflowReviews.status.${state}` as BaseTextKey);
+
+	const colorClass =
+		state === 'open'
+			? decision === 'changes_requested'
+				? 'changesRequested'
+				: decision === 'approved'
+					? 'approved'
+					: 'pending'
+			: decision === 'approved'
+				? 'approved'
+				: 'closed';
+
+	return { stateLabel, decisionLabel, colorClass };
+}

package/src/reviews/workflowReviews.api.ts

@@ -0,0 +1,61 @@
+import type {
+	DecideWorkflowReviewRequestDto,
+	DecideWorkflowReviewRequestResponse,
+	ListWorkflowReviewActivityResponse,
+	WorkflowReviewActivityEntry,
+	WorkflowReviewRequestDetail,
+} from '@n8n/api-types';
+import { makeRestApiRequest, type IRestApiContext } from '@n8n/rest-api-client';
+
+/** What a reviewer submits with a decision; `pending` is the initial state, never an input. */
+export type WorkflowReviewDecisionInput = Pick<DecideWorkflowReviewRequestDto, 'decision' | 'note'>;
+
+export async function decideWorkflowReviewRequest(
+	context: IRestApiContext,
+	workflowReviewRequestId: string,
+	payload: DecideWorkflowReviewRequestDto,
+): Promise<DecideWorkflowReviewRequestResponse> {
+	return await makeRestApiRequest<DecideWorkflowReviewRequestResponse>(
+		context,
+		'POST',
+		`/workflow-review-requests/${encodeURIComponent(workflowReviewRequestId)}/decision`,
+		{ ...payload },
+	);
+}
+
+export async function fetchWorkflowReviewRequestDetail(
+	context: IRestApiContext,
+	workflowReviewRequestId: string,
+): Promise<WorkflowReviewRequestDetail> {
+	return await makeRestApiRequest(
+		context,
+		'GET',
+		`/workflow-review-requests/${encodeURIComponent(workflowReviewRequestId)}`,
+	);
+}
+
+export async function fetchWorkflowReviewActivity(
+	context: IRestApiContext,
+	workflowReviewRequestId: string,
+	params: { limit?: number; cursor?: string },
+): Promise<ListWorkflowReviewActivityResponse> {
+	return await makeRestApiRequest(
+		context,
+		'GET',
+		`/workflow-review-requests/${encodeURIComponent(workflowReviewRequestId)}/activity`,
+		params,
+	);
+}
+
+export async function createWorkflowReviewComment(
+	context: IRestApiContext,
+	workflowReviewRequestId: string,
+	payload: { body: string },
+): Promise<WorkflowReviewActivityEntry> {
+	return await makeRestApiRequest(
+		context,
+		'POST',
+		`/workflow-review-requests/${encodeURIComponent(workflowReviewRequestId)}/comments`,
+		{ ...payload },
+	);
+}

package/src/reviews/workflowReviews.utils.ts

@@ -0,0 +1,18 @@
+export function toError(error: unknown): Error {
+	return error instanceof Error ? error : new Error(String(error));
+}
+
+type UserNameParts = {
+	firstName?: string | null;
+	lastName?: string | null;
+	email?: string | null;
+};
+
+export function formatUserDisplayName(user: UserNameParts): string {
+	return [user.firstName, user.lastName].filter(Boolean).join(' ') || user.email || '';
+}
+
+/** Names whoever produced an activity entry. The fallback is passed in to keep i18n out of here. */
+export function formatActorName(actor: UserNameParts | null, fallback: string): string {
+	return actor ? formatUserDisplayName(actor) : fallback;
+}

package/src/self-healing/SelfHealingResultDetail.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { N8nEmptyState } from '@n8n/design-system';
+import { useI18n } from '@n8n/i18n';
+
+import type { InboxSelection } from '../inbox.constants';
+
+// AST-1518 replaces this rollout-gated integration point with the report and actions.
+defineProps<{ selection: Extract<InboxSelection, { type: 'self_healing_result' }> }>();
+const i18n = useI18n();
+</script>
+
+<template>
+	<N8nEmptyState
+		:heading="i18n.baseText('inbox.resultUnavailable.title')"
+		:description="i18n.baseText('inbox.resultUnavailable.body')"
+		data-test-id="inbox-self-healing-detail"
+		:data-result-id="selection.id"
+	/>
+</template>