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

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

@@ -0,0 +1,90 @@
+import type { WorkflowReviewRequestDetail } from '@n8n/api-types';
+import { createTestingPinia } from '@pinia/testing';
+import userEvent from '@testing-library/user-event';
+import { createComponentRenderer } from '@n8n/frontend-test-utils';
+
+import { useReviewActivityStore } from '../reviewActivity.store';
+import WorkflowReviewDetailTabs from './WorkflowReviewDetailTabs.vue';
+
+/**
+ * The real decision popover is kept, so this pins the two facts the draft note depends on:
+ * it lives in the store, and its trigger sits outside the tab panel that unmounts.
+ * Reka UI popovers do not open in jsdom, so its primitives render inline instead.
+ */
+const rekaStubs = {
+	PopoverRoot: { template: '<div><slot /></div>' },
+	PopoverTrigger: { template: '<div><slot /></div>' },
+	PopoverPortal: { template: '<div><slot /></div>' },
+	PopoverContent: { template: '<div><slot /></div>' },
+};
+
+const childStubs = {
+	WorkflowReviewActivityFeed: { template: '<div><slot name="header" /></div>' },
+	WorkflowReviewChangesSection: { template: '<div />' },
+	WorkflowReviewCommentComposer: { template: '<div />' },
+	WorkflowReviewDetailMetadata: { template: '<aside />' },
+};
+
+const renderComponent = createComponentRenderer(WorkflowReviewDetailTabs, {
+	global: { stubs: { ...rekaStubs, ...childStubs } },
+});
+
+const review: WorkflowReviewRequestDetail = {
+	id: 'req-1',
+	projectId: 'proj-1',
+	title: 'Needs review',
+	requester: null,
+	authors: [],
+	reviewers: [],
+	decision: 'pending',
+	state: 'open',
+	createdAt: '2024-01-01T00:00:00.000Z',
+	updatedAt: '2024-01-01T00:00:00.000Z',
+	description: null,
+	workflows: [],
+	viewerCanDecide: true,
+	viewerDecisionIneligibilityReason: null,
+	viewerCanComment: true,
+};
+
+describe('WorkflowReviewDetailTabs decision note', () => {
+	beforeEach(() => {
+		createTestingPinia();
+	});
+
+	it('keeps a half-written decision note across a tab switch', async () => {
+		const { getByTestId, rerender } = renderComponent({
+			props: { review, tab: 'activity', deciding: false },
+		});
+
+		await userEvent.type(getByTestId('workflow-review-decision-note'), 'Half a thought');
+
+		await rerender({ tab: 'changes' });
+		await rerender({ tab: 'activity' });
+
+		expect(getByTestId('workflow-review-decision-note')).toHaveValue('Half a thought');
+	});
+
+	// The two facts that make the note survive: it is typed into the store, and the popover
+	// sits outside the panel the tab switch unmounts. Asserted separately because either one
+	// alone still reads back the note above.
+	it('holds the note in the store rather than in the popover', async () => {
+		const { getByTestId } = renderComponent({
+			props: { review, tab: 'activity', deciding: false },
+		});
+
+		await userEvent.type(getByTestId('workflow-review-decision-note'), 'Half a thought');
+
+		expect(useReviewActivityStore().decisionNote).toBe('Half a thought');
+	});
+
+	it('keeps the decision popover out of the tab panel', () => {
+		const { getByTestId } = renderComponent({
+			props: { review, tab: 'activity', deciding: false },
+		});
+
+		expect(getByTestId('workflow-review-activity-panel')).not.toContainElement(
+			getByTestId('workflow-review-decision-note'),
+		);
+	});
+});

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

@@ -0,0 +1,500 @@
+import type {
+	WorkflowReviewInboxItem,
+	WorkflowReviewRequestDetail,
+	WorkflowReviewRequestWorkflowDetail,
+} 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';
+
+vi.mock('./WorkflowReviewChangesSection.vue', () => ({
+	default: {
+		name: 'WorkflowReviewChangesSection',
+		props: ['workflow', 'state', 'decision'],
+		template:
+			'<div data-test-id="workflow-review-changes-section" :data-workflow-id="workflow.workflowId" :data-state="state" :data-decision="decision" />',
+	},
+}));
+
+vi.mock('./WorkflowReviewActivityFeed.vue', async () => {
+	const { computed, inject } = await import('vue');
+	const { ReviewLinkedWorkflowsKey } = await import('../constants');
+	return {
+		default: {
+			name: 'WorkflowReviewActivityFeed',
+			setup() {
+				const linkedWorkflows = inject(
+					ReviewLinkedWorkflowsKey,
+					computed(() => new Map()),
+				);
+				return {
+					linkedWorkflowsJson: computed(() =>
+						JSON.stringify(Object.fromEntries(linkedWorkflows.value)),
+					),
+				};
+			},
+			template:
+				'<div data-test-id="workflow-review-activity-feed" :data-linked-workflows="linkedWorkflowsJson"><slot name="header" /><slot name="footer" /><slot name="composer" /></div>',
+		},
+	};
+});
+
+vi.mock('./WorkflowReviewCommentComposer.vue', () => ({
+	default: {
+		name: 'WorkflowReviewCommentComposer',
+		props: ['canComment'],
+		template:
+			'<div data-test-id="workflow-review-comment-composer" :data-can-comment="canComment" />',
+	},
+}));
+
+vi.mock('./WorkflowReviewDetailMetadata.vue', () => ({
+	default: {
+		name: 'WorkflowReviewDetailMetadata',
+		template: '<aside data-test-id="workflow-review-detail-metadata" />',
+	},
+}));
+
+// The real popover cannot open in jsdom (Reka UI), so expose what this component passes
+// down as attributes and let a button stand in for the comment it reports back.
+vi.mock('./WorkflowReviewDecisionPopover.vue', () => ({
+	default: {
+		name: 'WorkflowReviewDecisionPopover',
+		props: ['deciding', 'viewerCanDecide', 'viewerCanComment', 'ineligibilityHint'],
+		template: `
+			<div
+				data-test-id="workflow-review-decision-popover"
+				:data-can-decide="viewerCanDecide"
+				:data-ineligibility-hint="ineligibilityHint"
+			>
+				<button data-test-id="emit-comment-posted" @click="$emit('comment-posted')" />
+			</div>`,
+	},
+}));
+
+const renderComponent = createComponentRenderer(WorkflowReviewDetailTabs);
+
+function makeInboxItem(overrides: Partial<WorkflowReviewInboxItem> = {}): WorkflowReviewInboxItem {
+	return {
+		id: 'req-1',
+		projectId: 'proj-1',
+		title: 'Needs review',
+		workflowName: 'My workflow',
+		workflowVersionId: null,
+		requester: null,
+		authors: [],
+		reviewers: [],
+		decision: 'pending',
+		state: 'open',
+		createdAt: '2024-01-01T00:00:00.000Z',
+		updatedAt: '2024-01-01T00:00:00.000Z',
+		...overrides,
+	};
+}
+
+function makeWorkflowDetail(
+	overrides: Partial<WorkflowReviewRequestWorkflowDetail> = {},
+): WorkflowReviewRequestWorkflowDetail {
+	return {
+		workflowId: 'wf-1',
+		workflowName: 'My workflow',
+		workflowVersionId: 'version-1',
+		pinnedVersion: null,
+		publishedVersionId: null,
+		baselineVersion: null,
+		...overrides,
+	};
+}
+
+function makeDetail(
+	overrides: Partial<WorkflowReviewRequestDetail> = {},
+): WorkflowReviewRequestDetail {
+	return {
+		...makeInboxItem(),
+		description: null,
+		workflows: [makeWorkflowDetail()],
+		viewerCanDecide: true,
+		viewerDecisionIneligibilityReason: null,
+		viewerCanComment: true,
+		...overrides,
+	};
+}
+
+describe('WorkflowReviewDetailTabs', () => {
+	beforeEach(() => {
+		createTestingPinia();
+	});
+
+	it('lets the viewer switch between the Activity and Changes tabs', async () => {
+		const { getByText, emitted } = renderComponent({
+			props: { review: makeDetail(), tab: 'activity', deciding: false },
+		});
+
+		getByText('Changes').click();
+
+		expect(emitted('update:tab')).toEqual([['changes']]);
+	});
+
+	describe('activity tab', () => {
+		it('renders the description when present', () => {
+			const { getByTestId, queryByTestId } = renderComponent({
+				props: {
+					review: makeDetail({ description: 'Adds retry logic' }),
+					tab: 'activity',
+					deciding: false,
+				},
+			});
+
+			expect(getByTestId('workflow-review-description')).toHaveTextContent('Adds retry logic');
+			expect(queryByTestId('workflow-review-no-description')).not.toBeInTheDocument();
+		});
+
+		it('renders a fallback when the review has no description', () => {
+			const { getByTestId } = renderComponent({
+				props: { review: makeDetail(), tab: 'activity', deciding: false },
+			});
+
+			expect(getByTestId('workflow-review-no-description')).toBeInTheDocument();
+		});
+
+		// Both go inside the feed, so they scroll with the entries.
+		it('places the description and the composer inside the feed', () => {
+			const { getByTestId } = renderComponent({
+				props: {
+					review: makeDetail({ description: 'Adds retry logic' }),
+					tab: 'activity',
+					deciding: false,
+				},
+			});
+
+			const feed = getByTestId('workflow-review-activity-feed');
+			const description = getByTestId('workflow-review-description');
+			const composer = getByTestId('workflow-review-comment-composer');
+
+			expect(feed).toContainElement(description);
+			expect(feed).toContainElement(composer);
+		});
+
+		it.each([
+			['lets a viewer who may comment use the composer', true],
+			['locks the composer for a viewer who may not', false],
+		])('%s', (_label, viewerCanComment) => {
+			const { getByTestId } = renderComponent({
+				props: { review: makeDetail({ viewerCanComment }), tab: 'activity', deciding: false },
+			});
+
+			expect(getByTestId('workflow-review-comment-composer')).toHaveAttribute(
+				'data-can-comment',
+				String(viewerCanComment),
+			);
+		});
+
+		it('defaults the composer to read-only on a review whose detail never loaded', () => {
+			const { getByTestId } = renderComponent({
+				props: { review: makeInboxItem(), tab: 'activity', deciding: false },
+			});
+
+			expect(getByTestId('workflow-review-comment-composer')).toHaveAttribute(
+				'data-can-comment',
+				'false',
+			);
+		});
+
+		it('provides the linked workflows to the feed', () => {
+			const { getByTestId } = renderComponent({
+				props: { review: makeDetail(), tab: 'activity', deciding: false },
+			});
+
+			expect(getByTestId('workflow-review-activity-feed')).toHaveAttribute(
+				'data-linked-workflows',
+				JSON.stringify({
+					'wf-1': {
+						workflowName: 'My workflow',
+						pinnedVersionId: 'version-1',
+						pinnedVersionName: null,
+					},
+				}),
+			);
+		});
+
+		describe('closed-state callout', () => {
+			it('celebrates a review that was approved and published', () => {
+				const { getByTestId } = renderComponent({
+					props: {
+						review: makeDetail({
+							state: 'closed',
+							decision: 'approved',
+							workflows: [makeWorkflowDetail({ publishedVersionId: 'version-1' })],
+						}),
+						tab: 'activity',
+						deciding: false,
+					},
+				});
+
+				const callout = getByTestId('workflow-review-closed-callout');
+				expect(callout).toHaveTextContent('Submission closed');
+				expect(callout).toHaveTextContent(
+					'The review was approved and the workflow was published.',
+				);
+			});
+
+			it('shows no callout while the review is open', () => {
+				const { queryByTestId } = renderComponent({
+					props: { review: makeDetail(), tab: 'activity', deciding: false },
+				});
+
+				expect(queryByTestId('workflow-review-closed-callout')).not.toBeInTheDocument();
+			});
+
+			it('shows no callout when the approved version is not the published one', () => {
+				const { queryByTestId } = renderComponent({
+					props: {
+						review: makeDetail({
+							state: 'closed',
+							decision: 'approved',
+							workflows: [makeWorkflowDetail({ publishedVersionId: 'other-version' })],
+						}),
+						tab: 'activity',
+						deciding: false,
+					},
+				});
+
+				expect(queryByTestId('workflow-review-closed-callout')).not.toBeInTheDocument();
+			});
+
+			// A lifecycle close is already summarized by its `review.closed` feed entry,
+			// which renders as a callout; a second one here would say the same thing twice.
+			it('adds no summary for a review closed without an approval', () => {
+				const { queryByTestId } = renderComponent({
+					props: {
+						review: makeDetail({ state: 'closed', decision: 'changes_requested' }),
+						tab: 'activity',
+						deciding: false,
+					},
+				});
+
+				expect(queryByTestId('workflow-review-closed-callout')).not.toBeInTheDocument();
+			});
+		});
+
+		it('does not render the composer on closed reviews', () => {
+			const { getByTestId, queryByTestId } = renderComponent({
+				props: {
+					review: makeDetail({ state: 'closed', decision: 'approved' }),
+					tab: 'activity',
+					deciding: false,
+				},
+			});
+
+			expect(getByTestId('workflow-review-activity-feed')).toBeInTheDocument();
+			expect(queryByTestId('workflow-review-comment-composer')).not.toBeInTheDocument();
+		});
+	});
+
+	describe('changes tab', () => {
+		it('renders one item per workflow and opens only the first', () => {
+			const { getAllByTestId } = renderComponent({
+				props: {
+					review: makeDetail({
+						workflows: [
+							makeWorkflowDetail(),
+							makeWorkflowDetail({ workflowId: 'wf-2', workflowName: 'Other workflow' }),
+						],
+					}),
+					tab: 'changes',
+					deciding: false,
+				},
+			});
+
+			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
+		// approval, and the section needs the lifecycle to phrase the sides.
+		it('renders the diff for a closed review and forwards its lifecycle', () => {
+			const { getByTestId } = renderComponent({
+				props: {
+					review: makeDetail({ state: 'closed', decision: 'approved' }),
+					tab: 'changes',
+					deciding: false,
+				},
+			});
+
+			const section = getByTestId('workflow-review-changes-section');
+			expect(section).toHaveAttribute('data-state', 'closed');
+			expect(section).toHaveAttribute('data-decision', 'approved');
+		});
+
+		it('shows an unavailable state when the detail has no workflows left', () => {
+			const { getByTestId } = renderComponent({
+				props: {
+					review: makeDetail({ state: 'closed', workflows: [] }),
+					tab: 'changes',
+					deciding: false,
+				},
+			});
+
+			expect(getByTestId('workflow-review-changes-workflow-unavailable')).toBeInTheDocument();
+		});
+
+		it('shows an error state when the detail fetch failed', () => {
+			const { getByTestId, queryByTestId } = renderComponent({
+				props: { review: makeInboxItem(), tab: 'changes', deciding: false },
+			});
+
+			expect(getByTestId('workflow-review-changes-unavailable')).toBeInTheDocument();
+			expect(queryByTestId('workflow-review-changes-workflow-unavailable')).not.toBeInTheDocument();
+		});
+	});
+
+	describe('decision actions', () => {
+		// The trigger lives outside the tab panel, so a comment posted from the Changes tab
+		// would otherwise succeed with nothing to show for it.
+		it('switches to the activity tab once a comment was posted from the popover', () => {
+			const { getByTestId, emitted } = renderComponent({
+				props: { review: makeDetail(), tab: 'changes', deciding: false },
+			});
+
+			getByTestId('emit-comment-posted').click();
+
+			expect(emitted('update:tab')).toEqual([['activity']]);
+		});
+
+		it('offers no decision on a closed review', () => {
+			const { queryByTestId } = renderComponent({
+				props: {
+					review: makeDetail({ state: 'closed', decision: 'approved' }),
+					tab: 'activity',
+					deciding: false,
+				},
+			});
+
+			expect(queryByTestId('workflow-review-decision-popover')).not.toBeInTheDocument();
+		});
+
+		it('offers no decision on a review whose detail payload never loaded', () => {
+			const { queryByTestId } = renderComponent({
+				props: { review: makeInboxItem(), tab: 'activity', deciding: false },
+			});
+
+			expect(queryByTestId('workflow-review-decision-popover')).not.toBeInTheDocument();
+		});
+
+		it('leaves the decision actions open with no hint when the viewer can decide', () => {
+			const { getByTestId } = renderComponent({
+				props: { review: makeDetail(), tab: 'activity', deciding: false },
+			});
+
+			const popover = getByTestId('workflow-review-decision-popover');
+			expect(popover).toHaveAttribute('data-can-decide', 'true');
+			expect(popover).toHaveAttribute('data-ineligibility-hint', '');
+		});
+
+		it('says the viewer contributed a version when that is why they cannot decide', () => {
+			const { getByTestId } = renderComponent({
+				props: {
+					review: makeDetail({
+						viewerCanDecide: false,
+						viewerDecisionIneligibilityReason: 'author',
+					}),
+					tab: 'activity',
+					deciding: false,
+				},
+			});
+
+			const popover = getByTestId('workflow-review-decision-popover');
+			expect(popover).toHaveAttribute('data-can-decide', 'false');
+			expect(popover).toHaveAttribute(
+				'data-ineligibility-hint',
+				'You contributed a version to this review.',
+			);
+		});
+
+		it('falls back to the generic permission hint for any other reason', () => {
+			const { getByTestId } = renderComponent({
+				props: {
+					review: makeDetail({
+						viewerCanDecide: false,
+						viewerDecisionIneligibilityReason: 'missing_reviewer_permission',
+					}),
+					tab: 'activity',
+					deciding: false,
+				},
+			});
+
+			const popover = getByTestId('workflow-review-decision-popover');
+			expect(popover).toHaveAttribute('data-can-decide', 'false');
+			expect(popover).toHaveAttribute(
+				'data-ineligibility-hint',
+				'Missing permissions to perform this action',
+			);
+		});
+	});
+});