@n8n/frontend-module-inbox 0.1.0 → 0.2.1

package/src/reviews/components/WorkflowReviewDetailTabs.test.ts

@@ -5,6 +5,7 @@ import type {
 } from '@n8n/api-types';
 import { createTestingPinia } from '@pinia/testing';
 import { createComponentRenderer } from '@n8n/frontend-test-utils';
+import userEvent from '@testing-library/user-event';
 
 import WorkflowReviewDetailTabs from './WorkflowReviewDetailTabs.vue';
 
@@ -13,7 +14,7 @@ vi.mock('./WorkflowReviewChangesSection.vue', () => ({
 		name: 'WorkflowReviewChangesSection',
 		props: ['workflow', 'state', 'decision'],
 		template:
-			'<div data-test-id="workflow-review-changes-section" :data-state="state" :data-decision="decision" />',
+			'<div data-test-id="workflow-review-changes-section" :data-workflow-id="workflow.workflowId" :data-state="state" :data-decision="decision" />',
 	},
 }));
 
@@ -293,7 +294,7 @@ describe('WorkflowReviewDetailTabs', () => {
 	});
 
 	describe('changes tab', () => {
-		it('renders one section per workflow', () => {
+		it('renders one item per workflow and opens only the first', () => {
 			const { getAllByTestId } = renderComponent({
 				props: {
 					review: makeDetail({
@@ -307,7 +308,72 @@ describe('WorkflowReviewDetailTabs', () => {
 				},
 			});
 
-			expect(getAllByTestId('workflow-review-changes-section')).toHaveLength(2);
+			expect(getAllByTestId('workflow-review-changes-item')).toHaveLength(2);
+			expect(getAllByTestId('workflow-review-changes-section')).toHaveLength(1);
+		});
+
+		it('keeps the open workflow when the user switches tabs', async () => {
+			const review = makeDetail({
+				workflows: [makeWorkflowDetail(), makeWorkflowDetail({ workflowId: 'wf-2' })],
+			});
+			const { getAllByTestId, getByTestId, rerender } = renderComponent({
+				props: { review, tab: 'changes', deciding: false },
+			});
+
+			await userEvent.click(getAllByTestId('workflow-review-changes-item-trigger')[1]);
+			await rerender({ review, tab: 'activity', deciding: false });
+			await rerender({ review, tab: 'changes', deciding: false });
+
+			expect(getByTestId('workflow-review-changes-section')).toHaveAttribute(
+				'data-workflow-id',
+				'wf-2',
+			);
+		});
+
+		it('opens the first workflow again when another review is selected', async () => {
+			const workflows = [makeWorkflowDetail(), makeWorkflowDetail({ workflowId: 'wf-2' })];
+			const { getAllByTestId, getByTestId, rerender } = renderComponent({
+				props: { review: makeDetail({ workflows }), tab: 'changes', deciding: false },
+			});
+
+			await userEvent.click(getAllByTestId('workflow-review-changes-item-trigger')[1]);
+			await rerender({
+				review: makeDetail({ id: 'req-2', workflows }),
+				tab: 'changes',
+				deciding: false,
+			});
+
+			expect(getByTestId('workflow-review-changes-section')).toHaveAttribute(
+				'data-workflow-id',
+				'wf-1',
+			);
+		});
+
+		// The detail lists only the workflows the viewer can read, so a refresh can drop one.
+		it('opens the first workflow when a refresh removes the open one', async () => {
+			const first = makeWorkflowDetail();
+			const third = makeWorkflowDetail({ workflowId: 'wf-3' });
+			const { getAllByTestId, findByTestId, rerender } = renderComponent({
+				props: {
+					review: makeDetail({
+						workflows: [first, makeWorkflowDetail({ workflowId: 'wf-2' }), third],
+					}),
+					tab: 'changes',
+					deciding: false,
+				},
+			});
+
+			await userEvent.click(getAllByTestId('workflow-review-changes-item-trigger')[1]);
+			await rerender({
+				review: makeDetail({ workflows: [first, third] }),
+				tab: 'changes',
+				deciding: false,
+			});
+
+			expect(await findByTestId('workflow-review-changes-section')).toHaveAttribute(
+				'data-workflow-id',
+				'wf-1',
+			);
 		});
 
 		// A closed review keeps its diff: the backend serves the baseline frozen at

package/src/reviews/components/WorkflowReviewDetailTabs.vue

@@ -2,12 +2,12 @@
 import type { WorkflowReviewInboxItem, WorkflowReviewRequestDetail } from '@n8n/api-types';
 import { N8nCallout, N8nTabs, N8nText } from '@n8n/design-system';
 import { useI18n } from '@n8n/i18n';
-import { computed, provide, useTemplateRef } from 'vue';
+import { computed, provide, ref, useTemplateRef, watch } from 'vue';
 
 import { ReviewDetailScrollContainerKey, ReviewLinkedWorkflowsKey } from '../constants';
 import type { WorkflowReviewDecisionInput } from '../workflowReviews.api';
 import WorkflowReviewActivityFeed from './WorkflowReviewActivityFeed.vue';
-import WorkflowReviewChangesSection from './WorkflowReviewChangesSection.vue';
+import WorkflowReviewChangesList from './WorkflowReviewChangesList.vue';
 import WorkflowReviewCommentComposer from './WorkflowReviewCommentComposer.vue';
 import WorkflowReviewDecisionPopover from './WorkflowReviewDecisionPopover.vue';
 import WorkflowReviewDetailMetadata from './WorkflowReviewDetailMetadata.vue';
@@ -33,6 +33,26 @@ const detail = computed<WorkflowReviewRequestDetail | null>(() =>
 	'workflows' in props.review ? props.review : null,
 );
 
+// Held here, not in the list: the detail body remounts on every tab switch.
+const expandedWorkflowId = ref<string>();
+// The review that `expandedWorkflowId` belongs to.
+let expandedReviewId: string | undefined;
+
+// Open the first workflow for each new review. A refetch keeps the choice while the
+// open workflow is still listed. The detail lists only readable workflows, so it can drop one.
+watch(
+	detail,
+	(value) => {
+		if (!value?.workflows.length) return;
+		const open = expandedWorkflowId.value;
+		const isListed = value.workflows.some(({ workflowId }) => workflowId === open);
+		if (value.id === expandedReviewId && (open === undefined || isListed)) return;
+		expandedReviewId = value.id;
+		expandedWorkflowId.value = value.workflows[0].workflowId;
+	},
+	{ immediate: true },
+);
+
 const viewerCanDecide = computed(() => detail.value?.viewerCanDecide ?? false);
 const viewerCanComment = computed(() => detail.value?.viewerCanComment ?? false);
 
@@ -190,15 +210,13 @@ const tabOptions = computed(() => [
 				>
 					{{ i18n.baseText('workflowReviews.changes.unavailable') }}
 				</N8nCallout>
-				<template v-else-if="detail.workflows.length > 0">
-					<WorkflowReviewChangesSection
-						v-for="workflow in detail.workflows"
-						:key="workflow.workflowId"
-						:workflow="workflow"
-						:state="detail.state"
-						:decision="detail.decision"
-					/>
-				</template>
+				<WorkflowReviewChangesList
+					v-else-if="detail.workflows.length > 0"
+					v-model:expanded="expandedWorkflowId"
+					:workflows="detail.workflows"
+					:state="detail.state"
+					:decision="detail.decision"
+				/>
 				<!-- No rows left: the workflow was deleted, or the requester lost access to it. -->
 				<N8nCallout
 					v-else

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>

package/src/views/InboxView.test.ts

@@ -1,5 +1,6 @@
 import type {
 	DecideWorkflowReviewRequestResponse,
+	InboxSelfHealingItem,
 	InboxWorkflowReviewItem,
 	WorkflowReviewRequestDetail,
 } from '@n8n/api-types';
@@ -54,6 +55,7 @@ const renderOptions = {
      <button data-test-id="retry-waiting" @click="$emit('retry', 'waiting')" />
      <button data-test-id="select-review" @click="$emit('select', { type: 'workflow_review', id: 'req-1' })" />
      <button data-test-id="select-other-review" @click="$emit('select', { type: 'workflow_review', id: 'req-2' })" />
+     <button data-test-id="select-result" @click="$emit('select', { type: 'self_healing_result', id: 'req-1', projectId: 'p1', workflowId: 'w1' })" />
      <button data-test-id="clear-review" @click="$emit('clear')" />
      <button data-test-id="select-closed-tab" @click="$emit('update:active-tab', 'closed')" />
     </div>`,
@@ -79,6 +81,10 @@ const renderOptions = {
     <slot v-if="!listItem" />
     </div>`,
 			}),
+			SelfHealingResultDetail: {
+				props: ['selection'],
+				template: '<div data-test-id="result-detail" :data-id="selection.id" />',
+			},
 		},
 	},
 };
@@ -93,7 +99,7 @@ beforeEach(async () => {
 	await router.isReady();
 	mockedStore(useSettingsStore).settings.inbox = {
 		enabled: true,
-		availableTypes: ['workflow_review'],
+		availableTypes: ['workflow_review', 'self_healing_result'],
 		failedTypes: [],
 	};
 	store = mockedStore(useInboxStore);
@@ -113,17 +119,18 @@ it('refreshes the list and summary on mount', async () => {
 it('keeps the loaded list when navigating between Inbox routes', async () => {
 	const { getByTestId, queryByTestId } = renderRoutedComponent();
 	await waitAllPromises();
-	store.lists.waiting.items = [reviewItem(), { ...reviewItem(), id: 'req-2' }];
+	store.lists.waiting.items = [reviewItem(), resultItem()];
 	store.lists.waiting.nextCursor = 'next-page';
-	for (const button of ['select-review', 'select-other-review', 'clear-review']) {
+	for (const button of ['select-review', 'select-result', 'clear-review']) {
 		getByTestId(button).click();
 		await waitAllPromises();
 	}
 	expect(router.currentRoute.value.fullPath).toBe('/inbox');
 	expect(queryByTestId('review-detail')).not.toBeInTheDocument();
+	expect(queryByTestId('result-detail')).not.toBeInTheDocument();
 	expect(store.reset).toHaveBeenCalledOnce();
 	expect(store.refreshListAndSummary).toHaveBeenCalledOnce();
-	expect(store.lists.waiting.items).toEqual([reviewItem(), { ...reviewItem(), id: 'req-2' }]);
+	expect(store.lists.waiting.items).toEqual([reviewItem(), resultItem()]);
 	expect(store.lists.waiting.nextCursor).toBe('next-page');
 });
 
@@ -135,8 +142,24 @@ it('passes the selected review and list fallback to its detail entry', async ()
 	expect(getByTestId('review-detail')).toHaveAttribute('data-title', 'List review');
 });
 
-it('clears selection and keeps the current state and tab', async () => {
-	await router.replace('/inbox/reviews/req-1?state=closed&tab=changes');
+it('selects a result with the same ID without rendering the review entry', async () => {
+	await router.replace('/inbox/reviews/req-1');
+	const { getByTestId, queryByTestId } = renderComponent();
+	getByTestId('select-result').click();
+	await waitAllPromises();
+	expect(router.currentRoute.value.query).toEqual({
+		projectId: 'p1',
+		workflowId: 'w1',
+	});
+	expect(router.currentRoute.value.path).toBe('/inbox/assistant-results/req-1');
+	expect(getByTestId('result-detail')).toHaveAttribute('data-id', 'req-1');
+	expect(queryByTestId('review-detail')).not.toBeInTheDocument();
+});
+
+it('clears source context and keeps the current state and tab', async () => {
+	await router.replace(
+		'/inbox/assistant-results/r1?projectId=p1&workflowId=w1&state=closed&tab=changes',
+	);
 	const { getByTestId } = renderComponent();
 	getByTestId('clear-review').click();
 	await waitAllPromises();
@@ -237,7 +260,7 @@ it('reloads Closed without replacing the URL when a review closes there', async
 	expect(store.fetchActiveTab).toHaveBeenCalledOnce();
 });
 
-it.each(['select-other-review'])(
+it.each(['select-other-review', 'select-result'])(
 	'reconciles a late decision without following it after %s',
 	async (target) => {
 		await router.replace('/inbox/reviews/req-1');
@@ -280,6 +303,7 @@ it.each([
 	['/inbox/reviews/req-1', false],
 	['/inbox/reviews/req-1', true],
 	['/inbox/reviews/req-2', false],
+	['/inbox/assistant-results/result-1?projectId=p1&workflowId=w1', false],
 	['/other', false],
 ])(
 	'reconciles approval after leaving the page for %s (pending detail: %s)',
@@ -399,6 +423,22 @@ function reviewItem(): InboxWorkflowReviewItem {
 		updatedAt: '2024-01-01T00:00:00.000Z',
 	};
 }
+function resultItem(): InboxSelfHealingItem {
+	return {
+		type: 'self_healing_result',
+		id: 'req-1',
+		projectId: 'p1',
+		workflowId: 'w1',
+		workflowName: 'Workflow',
+		state: 'open',
+		outcome: 'fix_ready',
+		summary: 'Fix ready',
+		createdAt: '2024-01-01T00:00:00.000Z',
+		updatedAt: '2024-01-01T00:00:00.000Z',
+		completedAt: '2024-01-01T00:00:00.000Z',
+	};
+}
+
 it('routes group pagination and retry to the named slice', async () => {
 	const loadAuthored = vi.spyOn(store.lists.authored, 'loadMore').mockResolvedValue(undefined);
 	const retryWaiting = vi.spyOn(store.lists.waiting, 'retry').mockResolvedValue(undefined);
@@ -474,7 +514,7 @@ it('restarts a partial group after a page failure while retaining exact page ret
 	const request = vi
 		.fn()
 		.mockResolvedValueOnce({
-			data: [reviewItem()],
+			data: [resultItem()],
 			nextCursor: 'partial-next',
 			hasMore: true,
 			partial: true,
@@ -484,7 +524,7 @@ it('restarts a partial group after a page failure while retaining exact page ret
 		.mockRejectedValueOnce(new Error('Page failed'))
 		.mockRejectedValueOnce(new Error('Page still failed'))
 		.mockResolvedValueOnce({
-			data: [reviewItem(), { ...reviewItem(), id: 'req-2' }],
+			data: [reviewItem(), resultItem()],
 			nextCursor: null,
 			hasMore: false,
 			partial: false,
@@ -503,7 +543,10 @@ it('restarts a partial group after a page failure while retaining exact page ret
 	getByTestId('refresh-waiting').click();
 	await waitAllPromises();
 	expect(request).toHaveBeenLastCalledWith();
-	expect(waiting.items.map((item) => item.type)).toEqual(['workflow_review', 'workflow_review']);
+	expect(waiting.items.map((item) => item.type)).toEqual([
+		'workflow_review',
+		'self_healing_result',
+	]);
 	expect(waiting.partial).toBe(false);
 	expect(waiting.error).toBeNull();
 	expect(waiting.nextCursor).toBeNull();

package/src/views/InboxView.vue

@@ -15,6 +15,7 @@ import { INBOX_VIEW, type InboxItemChange } from '../inbox.constants';
 import { inboxItemLocation, isInboxRoute, selectionFromRoute } from '../inbox.routes';
 import { useInboxStore } from '../inbox.store';
 import WorkflowReviewDetail from '../reviews/WorkflowReviewDetail.vue';
+import SelfHealingResultDetail from '../self-healing/SelfHealingResultDetail.vue';
 
 const store = useInboxStore();
 const settingsStore = useSettingsStore();
@@ -92,6 +93,7 @@ function onSelect(item: InboxItem) {
 function onClearSelection() {
 	if (!isOnInbox()) return;
 	const query = { ...route.query };
+	for (const key of ['projectId', 'workflowId']) delete query[key];
 	void router.replace({ name: INBOX_VIEW, query });
 }
 function onActiveTabChange(tab: 'open' | 'closed') {
@@ -186,7 +188,14 @@ onBeforeUnmount(() => {
 				<template v-else>
 					<div :class="$style.columnTitle" />
 					<div :class="$style.mainBody">
-						<InboxEmptyState />
+						<SelfHealingResultDetail
+							v-if="
+								selection?.type === 'self_healing_result' &&
+								!store.disabledSources.includes(selection.type)
+							"
+							:selection="selection"
+						/>
+						<InboxEmptyState v-else />
 					</div>
 				</template>
 			</div>