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

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

@@ -0,0 +1,288 @@
+import { useToast } from '@n8n/composables/useToast';
+import { createTestingPinia } from '@pinia/testing';
+import userEvent from '@testing-library/user-event';
+import { createComponentRenderer, mockedStore, waitAllPromises } from '@n8n/frontend-test-utils';
+import { createDeferredPromise } from '@n8n/utils/promise/deferred-promise';
+
+import { useReviewActivityStore } from '../reviewActivity.store';
+import WorkflowReviewDecisionPopover from './WorkflowReviewDecisionPopover.vue';
+
+vi.mock('@n8n/composables/useToast', () => ({
+	useToast: vi.fn(),
+}));
+
+/**
+ * Reka UI popovers do not open in jsdom, so the four primitives N8nPopover imports are
+ * stubbed to render inline. Copied rather than imported: the design system keeps its own
+ * set private. Reka's trigger machinery goes with them, hence the open button standing in
+ * for it — everything after that is the component's own `v-model:open`.
+ */
+const rekaStubs = {
+	PopoverRoot: {
+		props: ['open'],
+		emits: ['update:open'],
+		template: `
+			<div :data-open="open" data-test-id="popover-root">
+				<button data-test-id="open-popover" @click="$emit('update:open', true)" />
+				<slot />
+			</div>`,
+	},
+	PopoverTrigger: { template: '<div><slot /></div>' },
+	PopoverPortal: { template: '<div><slot /></div>' },
+	PopoverContent: { template: '<div><slot /></div>' },
+};
+
+// The real tooltip renders its content in a portal on hover, which jsdom cannot exercise;
+// expose the bindings as attributes instead.
+const tooltipStub = {
+	N8nTooltip: {
+		props: ['disabled', 'content'],
+		template:
+			'<div data-test-id="decision-tooltip" :data-disabled="disabled" :data-content="content"><slot /></div>',
+	},
+};
+
+const renderComponent = createComponentRenderer(WorkflowReviewDecisionPopover, {
+	global: { stubs: { ...rekaStubs, ...tooltipStub } },
+	props: {
+		deciding: false,
+		viewerCanDecide: true,
+		viewerCanComment: true,
+		ineligibilityHint: '',
+	},
+});
+
+function tooltipOf(button: HTMLElement) {
+	const tooltip = button.closest('[data-test-id="decision-tooltip"]');
+	if (!tooltip) throw new Error('button is not wrapped in a tooltip');
+	return tooltip;
+}
+
+const showError = vi.fn();
+
+describe('WorkflowReviewDecisionPopover', () => {
+	let store: ReturnType<typeof mockedStore<typeof useReviewActivityStore>>;
+
+	beforeEach(() => {
+		createTestingPinia();
+		showError.mockReset();
+		vi.mocked(useToast).mockReturnValue({ showError } as unknown as ReturnType<typeof useToast>);
+		store = mockedStore(useReviewActivityStore);
+		store.decisionNote = '';
+		store.posting = false;
+		store.postComment.mockResolvedValue(true);
+	});
+
+	it('needs a note before the reviewer can request changes or comment', async () => {
+		const { getByTestId } = renderComponent();
+
+		const requestChanges = getByTestId('workflow-review-decision-request-changes-button');
+		expect(requestChanges).toBeDisabled();
+		expect(getByTestId('workflow-review-decision-comment-button')).toBeDisabled();
+		expect(tooltipOf(requestChanges)).toHaveAttribute(
+			'data-content',
+			'Add a note to request changes',
+		);
+		expect(tooltipOf(requestChanges)).toHaveAttribute('data-disabled', 'false');
+
+		await userEvent.type(getByTestId('workflow-review-decision-note'), 'Please add retries');
+
+		expect(requestChanges).not.toBeDisabled();
+		expect(getByTestId('workflow-review-decision-comment-button')).not.toBeDisabled();
+		expect(tooltipOf(requestChanges)).toHaveAttribute('data-disabled', 'true');
+	});
+
+	it('reports a failed comment after the selected review changes', async () => {
+		const pending = createDeferredPromise<boolean>();
+		store.postComment.mockReturnValueOnce(pending.promise);
+		store.decisionNote = 'Sent comment';
+		const { getByTestId, unmount } = renderComponent();
+		await userEvent.click(getByTestId('workflow-review-decision-comment-button'));
+		unmount();
+		store.decisionNote = 'New note';
+		const error = new Error('timeout');
+		pending.reject(error);
+		await waitAllPromises();
+
+		expect(showError).toHaveBeenCalledWith(error, 'Could not post comment');
+		expect(store.decisionNote).toBe('New note');
+	});
+
+	it.each<[string, { viewerCanComment?: boolean; deciding?: boolean }, boolean]>([
+		['a viewer who is not allowed to comment', { viewerCanComment: false }, false],
+		['a comment that is already being posted', {}, true],
+		['a reviewer whose decision is in flight', { deciding: true }, false],
+	])('offers no Comment button to %s, note or not', async (_label, props, posting) => {
+		store.posting = posting;
+
+		const { getByTestId } = renderComponent({ props });
+
+		await userEvent.type(getByTestId('workflow-review-decision-note'), 'Just a thought');
+
+		expect(getByTestId('workflow-review-decision-comment-button')).toBeDisabled();
+	});
+
+	// Posting a comment leaves its text in the box on purpose, so a decision taken meanwhile
+	// would send the very same text a second time as its note.
+	it.each<[string, { posting: boolean; deciding: boolean }]>([
+		['a comment is still being posted', { posting: true, deciding: false }],
+		['a decision is already in flight', { posting: false, deciding: true }],
+	])('offers no decision while %s', async (_label, { posting, deciding }) => {
+		store.posting = posting;
+
+		const { getByTestId } = renderComponent({ props: { deciding } });
+
+		await userEvent.type(getByTestId('workflow-review-decision-note'), 'Please add retries');
+
+		expect(getByTestId('workflow-review-decision-request-changes-button')).toBeDisabled();
+		expect(getByTestId('workflow-review-decision-approve-button')).toBeDisabled();
+	});
+
+	it('submits a change request with the note', async () => {
+		const { getByTestId, emitted } = renderComponent();
+
+		await userEvent.type(getByTestId('workflow-review-decision-note'), 'Please add retries');
+		await userEvent.click(getByTestId('workflow-review-decision-request-changes-button'));
+
+		expect(emitted('decide')).toEqual([
+			[{ decision: 'changes_requested', note: 'Please add retries' }],
+		]);
+	});
+
+	it('submits an approval with the note', async () => {
+		const { getByTestId, emitted } = renderComponent();
+
+		await userEvent.type(getByTestId('workflow-review-decision-note'), 'Ship it');
+		await userEvent.click(getByTestId('workflow-review-decision-approve-button'));
+
+		expect(emitted('decide')).toEqual([[{ decision: 'approved', note: 'Ship it' }]]);
+	});
+
+	it('approves without a note rather than sending an empty one', async () => {
+		const { getByTestId, emitted } = renderComponent();
+
+		await userEvent.click(getByTestId('workflow-review-decision-approve-button'));
+
+		expect(emitted('decide')).toEqual([[{ decision: 'approved' }]]);
+	});
+
+	it('clears its open state once a decision is submitted', async () => {
+		const { getByTestId } = renderComponent();
+
+		await userEvent.click(getByTestId('open-popover'));
+		expect(getByTestId('popover-root')).toHaveAttribute('data-open', 'true');
+
+		await userEvent.click(getByTestId('workflow-review-decision-approve-button'));
+
+		expect(getByTestId('popover-root')).toHaveAttribute('data-open', 'false');
+	});
+
+	it('posts the note as a comment and shows the viewer where it landed', async () => {
+		const { getByTestId, emitted } = renderComponent();
+
+		await userEvent.type(getByTestId('workflow-review-decision-note'), 'Just a thought');
+		await userEvent.click(getByTestId('workflow-review-decision-comment-button'));
+
+		expect(store.postComment).toHaveBeenCalledWith('Just a thought');
+		expect(emitted('comment-posted')).toHaveLength(1);
+		expect(store.clearDecisionNote).toHaveBeenCalledWith('Just a thought');
+		expect(emitted('decide')).toBeUndefined();
+	});
+
+	// The note is only dropped after the post comes back, by which time the viewer may be
+	// typing the next one. Whether that text is theirs to drop is the store's rule.
+	it('drops the note it posted, not whatever the viewer typed meanwhile', async () => {
+		let resolvePost!: (landed: boolean) => void;
+		store.postComment.mockReturnValue(
+			new Promise((resolve) => {
+				resolvePost = resolve;
+			}),
+		);
+
+		const { getByTestId, emitted } = renderComponent();
+
+		await userEvent.type(getByTestId('workflow-review-decision-note'), 'Just a thought');
+		await userEvent.click(getByTestId('workflow-review-decision-comment-button'));
+
+		store.decisionNote = 'and one more thing';
+		resolvePost(true);
+		await waitAllPromises();
+
+		expect(store.clearDecisionNote).toHaveBeenCalledWith('Just a thought');
+		expect(emitted('comment-posted')).toHaveLength(1);
+	});
+
+	// The comment is written either way, but it says nothing about the review now on screen.
+	it('leaves the review the viewer moved to alone when the comment lands late', async () => {
+		store.postComment.mockResolvedValue(false);
+
+		const { getByTestId, emitted } = renderComponent();
+
+		await userEvent.type(getByTestId('workflow-review-decision-note'), 'Just a thought');
+		await userEvent.click(getByTestId('workflow-review-decision-comment-button'));
+
+		expect(store.clearDecisionNote).not.toHaveBeenCalled();
+		expect(emitted('comment-posted')).toBeUndefined();
+	});
+
+	it('keeps the note when the comment could not be posted', async () => {
+		const error = new Error('nope');
+		store.postComment.mockRejectedValueOnce(error);
+
+		const { getByTestId, emitted } = renderComponent();
+
+		await userEvent.type(getByTestId('workflow-review-decision-note'), 'Just a thought');
+		await userEvent.click(getByTestId('workflow-review-decision-comment-button'));
+
+		expect(showError).toHaveBeenCalledWith(error, 'Could not post comment');
+		expect(store.clearDecisionNote).not.toHaveBeenCalled();
+		expect(getByTestId('workflow-review-decision-note')).toHaveValue('Just a thought');
+		expect(emitted('comment-posted')).toBeUndefined();
+	});
+
+	// The draft has to outlive both the popover closing and a switch to another review,
+	// so the input is bound to the store rather than to a local ref.
+	it('shows the note the review already has and writes edits back', async () => {
+		store.decisionNote = 'started earlier';
+
+		const { getByTestId } = renderComponent();
+
+		expect(getByTestId('workflow-review-decision-note')).toHaveValue('started earlier');
+
+		await userEvent.type(getByTestId('workflow-review-decision-note'), ' and continued');
+
+		expect(store.decisionNote).toBe('started earlier and continued');
+	});
+
+	it('says why the viewer cannot decide instead of just blocking them', () => {
+		const { getByTestId } = renderComponent({
+			props: {
+				viewerCanDecide: false,
+				ineligibilityHint: 'You contributed a version to this review.',
+			},
+		});
+
+		const trigger = getByTestId('workflow-review-decision-trigger');
+		expect(trigger).toBeDisabled();
+		expect(tooltipOf(trigger)).toHaveAttribute(
+			'data-content',
+			'You contributed a version to this review.',
+		);
+	});
+
+	// A wrapper around the trigger takes the popover's own trigger props with it: the click,
+	// the expanded state a screen reader announces, and focus coming back on close.
+	it('hands a reviewer who may decide the trigger itself rather than a wrapper', () => {
+		const { getByTestId } = renderComponent();
+
+		expect(
+			getByTestId('workflow-review-decision-trigger').closest('[data-test-id="decision-tooltip"]'),
+		).toBeNull();
+	});
+
+	it('keeps the reviewer out while their decision is in flight', () => {
+		const { getByTestId } = renderComponent({ props: { deciding: true } });
+
+		expect(getByTestId('workflow-review-decision-trigger')).toBeDisabled();
+	});
+});

package/src/reviews/components/WorkflowReviewDecisionPopover.vue

@@ -0,0 +1,203 @@
+<script setup lang="ts">
+import { WORKFLOW_REVIEW_TEXT_MAX_LENGTH } from '@n8n/api-types';
+import { useToast } from '@n8n/composables/useToast';
+import { N8nButton, N8nIcon, N8nInput, N8nPopover, N8nTooltip } from '@n8n/design-system';
+import { useI18n } from '@n8n/i18n';
+import { storeToRefs } from 'pinia';
+import { computed, ref, useId } from 'vue';
+
+import { useReviewActivityStore } from '../reviewActivity.store';
+import type { WorkflowReviewDecisionInput } from '../workflowReviews.api';
+
+const props = defineProps<{
+	deciding: boolean;
+	viewerCanDecide: boolean;
+	viewerCanComment: boolean;
+	/** Why the viewer may not decide; empty when they may. */
+	ineligibilityHint: string;
+}>();
+
+const emit = defineEmits<{
+	decide: [input: WorkflowReviewDecisionInput];
+	'comment-posted': [];
+}>();
+
+const i18n = useI18n();
+const { showError } = useToast();
+const store = useReviewActivityStore();
+const { posting, decisionNote } = storeToRefs(store);
+
+const isOpen = ref(false);
+const noteInputId = useId();
+
+const note = computed(() => decisionNote.value.trim());
+
+// Every viewer who may decide may also comment, and a viewer who may not decide cannot open
+// the popover at all, so the last term only guards against those two rules drifting apart.
+const commentDisabled = computed(
+	() => posting.value || props.deciding || note.value.length === 0 || !props.viewerCanComment,
+);
+
+// A comment in flight leaves its text in the box on purpose, so without this the same text
+// goes out twice: once as the comment, once as the decision note.
+const decisionDisabled = computed(() => props.deciding || posting.value);
+
+function submitDecision(input: WorkflowReviewDecisionInput) {
+	isOpen.value = false;
+	emit('decide', input);
+}
+
+function onRequestChanges() {
+	submitDecision({ decision: 'changes_requested', note: note.value });
+}
+
+function onApprove() {
+	// The key is omitted rather than sent empty: the DTO rejects `''`.
+	submitDecision(
+		note.value ? { decision: 'approved', note: note.value } : { decision: 'approved' },
+	);
+}
+
+async function onComment() {
+	const body = note.value;
+
+	isOpen.value = false;
+	try {
+		// A comment that landed after the viewer moved on says nothing about the review they
+		// are reading now, so neither its note nor its tab may be touched.
+		if (!(await store.postComment(body))) return;
+
+		store.clearDecisionNote(body);
+		// The trigger sits outside the tab panel, so a comment posted from the Changes tab
+		// would otherwise land nowhere the viewer can see.
+		emit('comment-posted');
+	} catch (error) {
+		showError(error, i18n.baseText('workflowReviews.detail.activity.error.post'));
+	}
+}
+</script>
+
+<template>
+	<!-- 480px deviates from Figma's 440px on purpose: the three icon+label buttons do not fit
+		in 440px, and N8nPopover sets a fixed width, so the row would spill rather than wrap. -->
+	<N8nPopover
+		v-model:open="isOpen"
+		side="bottom"
+		align="end"
+		width="480px"
+		:enable-scrolling="false"
+		:content-class="$style.popover"
+	>
+		<template #trigger>
+			<!-- Wrapped only while the viewer may not decide: N8nTooltip does not forward attrs
+				on this branch, so the trigger props land on the span — which is what makes the
+				hint fire over a natively disabled button, and this trigger cannot open anything
+				anyway. An enabled trigger has to stay the bare button, or it loses `aria-expanded`
+				and the focus it gets back on close. -->
+			<span v-if="ineligibilityHint">
+				<N8nTooltip :content="ineligibilityHint" :show-after="300">
+					<N8nButton
+						size="small"
+						:disabled="deciding || !viewerCanDecide"
+						data-test-id="workflow-review-decision-trigger"
+					>
+						{{ i18n.baseText('workflowReviews.detail.decision.trigger') }}
+						<N8nIcon icon="chevron-down" />
+					</N8nButton>
+				</N8nTooltip>
+			</span>
+			<N8nButton
+				v-else
+				size="small"
+				:disabled="deciding || !viewerCanDecide"
+				data-test-id="workflow-review-decision-trigger"
+			>
+				{{ i18n.baseText('workflowReviews.detail.decision.trigger') }}
+				<N8nIcon icon="chevron-down" />
+			</N8nButton>
+		</template>
+		<template #content>
+			<div :class="$style.content" data-test-id="workflow-review-decision-popover">
+				<N8nInput
+					:id="noteInputId"
+					v-model="decisionNote"
+					:aria-label="i18n.baseText('workflowReviews.detail.decision.note.label')"
+					type="textarea"
+					:rows="3"
+					:maxlength="WORKFLOW_REVIEW_TEXT_MAX_LENGTH"
+					:placeholder="i18n.baseText('workflowReviews.detail.activity.composer.placeholder')"
+					:class="$style.input"
+					data-test-id="workflow-review-decision-note"
+				/>
+				<div :class="$style.actions">
+					<N8nButton
+						variant="outline"
+						size="small"
+						:disabled="commentDisabled"
+						data-test-id="workflow-review-decision-comment-button"
+						@click="onComment"
+					>
+						<template #icon>
+							<N8nIcon icon="message-square" />
+						</template>
+						{{ i18n.baseText('workflowReviews.detail.decision.comment') }}
+					</N8nButton>
+					<N8nTooltip
+						:disabled="!!note"
+						:content="i18n.baseText('workflowReviews.detail.decision.note.required')"
+						:show-after="300"
+					>
+						<N8nButton
+							variant="outline"
+							size="small"
+							:disabled="!note || decisionDisabled"
+							data-test-id="workflow-review-decision-request-changes-button"
+							@click="onRequestChanges"
+						>
+							<template #icon>
+								<N8nIcon icon="refresh-cw" />
+							</template>
+							{{ i18n.baseText('workflowReviews.detail.decision.requestChanges') }}
+						</N8nButton>
+					</N8nTooltip>
+					<N8nButton
+						variant="outline"
+						size="small"
+						:disabled="decisionDisabled"
+						data-test-id="workflow-review-decision-approve-button"
+						@click="onApprove"
+					>
+						<template #icon>
+							<N8nIcon icon="check" />
+						</template>
+						{{ i18n.baseText('workflowReviews.detail.decision.approveAndPublish') }}
+					</N8nButton>
+				</div>
+			</div>
+		</template>
+	</N8nPopover>
+</template>
+
+<style lang="scss" module>
+.popover {
+	padding: var(--spacing--xs);
+}
+
+.content {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing--xs);
+}
+
+.input {
+	:global(textarea) {
+		max-height: 50dvh;
+	}
+}
+
+.actions {
+	display: flex;
+	justify-content: flex-end;
+	gap: var(--spacing--2xs);
+}
+</style>

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

@@ -0,0 +1,206 @@
+import type {
+	WorkflowReviewRequestDetail,
+	WorkflowReviewRequestWorkflowDetail,
+} from '@n8n/api-types';
+import { createTestingPinia } from '@pinia/testing';
+import { createMemoryHistory, createRouter } from 'vue-router';
+
+import { createComponentRenderer } from '@n8n/frontend-test-utils';
+import { VIEWS } from '@n8n/frontend-constants/views';
+
+import WorkflowReviewDetailMetadata from './WorkflowReviewDetailMetadata.vue';
+
+const router = createRouter({
+	history: createMemoryHistory(),
+	routes: [
+		{
+			path: '/workflow/:workflowId',
+			name: VIEWS.WORKFLOW,
+			component: { template: '<div />' },
+		},
+	],
+});
+
+const renderComponent = createComponentRenderer(WorkflowReviewDetailMetadata, {
+	global: { plugins: [router], stubs: { RouterLink: false } },
+});
+
+function makeWorkflowDetail(
+	overrides: Partial<WorkflowReviewRequestWorkflowDetail> = {},
+): WorkflowReviewRequestWorkflowDetail {
+	return {
+		workflowId: 'wf-1',
+		workflowName: 'Payment Handler',
+		workflowVersionId: 'version-1',
+		pinnedVersion: null,
+		publishedVersionId: null,
+		baselineVersion: null,
+		...overrides,
+	};
+}
+
+const requester = {
+	id: 'requester-1',
+	email: 'requester@example.com',
+	firstName: 'Rita',
+	lastName: 'Requester',
+};
+
+const laterAuthor = {
+	id: 'author-2',
+	email: 'author@example.com',
+	firstName: 'Ada',
+	lastName: 'Author',
+};
+
+function makeDetail(
+	overrides: Partial<WorkflowReviewRequestDetail> = {},
+): WorkflowReviewRequestDetail {
+	return {
+		id: 'req-1',
+		projectId: 'proj-1',
+		title: 'Update Payment Handler',
+		requester,
+		// The backend always carries the requester in `authors` too.
+		authors: [{ ...requester }, laterAuthor],
+		reviewers: [
+			{
+				id: 'reviewer-1',
+				email: 'reviewer@example.com',
+				firstName: 'Riley',
+				lastName: 'Reviewer',
+			},
+		],
+		decision: 'pending',
+		state: 'open',
+		createdAt: '2024-01-01T00:00:00.000Z',
+		updatedAt: '2024-01-01T00:00:00.000Z',
+		description: null,
+		workflows: [makeWorkflowDetail()],
+		viewerCanDecide: true,
+		viewerDecisionIneligibilityReason: null,
+		viewerCanComment: true,
+		...overrides,
+	};
+}
+
+describe('WorkflowReviewDetailMetadata', () => {
+	beforeEach(() => {
+		createTestingPinia();
+	});
+
+	it('renders the status, people, and workflows', () => {
+		const { getByTestId, getByText, queryByText } = renderComponent({
+			props: { review: makeDetail() },
+		});
+
+		expect(getByTestId('workflow-review-detail-status-card')).toHaveTextContent(
+			'Open | Waiting for review',
+		);
+		expect(getByText('Riley Reviewer')).toBeInTheDocument();
+		expect(queryByText('reviewer@example.com')).not.toBeInTheDocument();
+		expect(getByText('Payment Handler')).toBeInTheDocument();
+	});
+
+	it('lists requested by, other authors, and reviewers in that order', () => {
+		const { getByTestId } = renderComponent({
+			props: { review: makeDetail() },
+		});
+
+		expect(getByTestId('workflow-review-detail-people-card').textContent).toMatch(
+			/^Requested by.*Rita Requester.*Other authors.*Ada Author.*Reviewers.*Riley Reviewer/s,
+		);
+	});
+
+	it('excludes the requester from other authors by id, not object identity', () => {
+		const { getByTestId } = renderComponent({
+			props: { review: makeDetail() },
+		});
+
+		expect(getByTestId('workflow-review-detail-other-authors')).not.toHaveTextContent(
+			'Rita Requester',
+		);
+	});
+
+	it('hides other authors when the requester is the only author', () => {
+		const { queryByTestId } = renderComponent({
+			props: { review: makeDetail({ authors: [{ ...requester }] }) },
+		});
+
+		expect(queryByTestId('workflow-review-detail-other-authors')).not.toBeInTheDocument();
+	});
+
+	it('falls back to a deleted-user message when the requester no longer exists', () => {
+		const { getByTestId } = renderComponent({
+			props: { review: makeDetail({ requester: null, authors: [laterAuthor] }) },
+		});
+
+		expect(getByTestId('workflow-review-detail-requester-deleted')).toHaveTextContent(
+			'Deleted user',
+		);
+		expect(getByTestId('workflow-review-detail-other-authors')).toHaveTextContent('Ada Author');
+	});
+
+	it('pairs the closed state with an approval decision', () => {
+		const { getByTestId } = renderComponent({
+			props: { review: makeDetail({ state: 'closed', decision: 'approved' }) },
+		});
+
+		expect(getByTestId('workflow-review-detail-status-card')).toHaveTextContent(
+			'Closed | Approved',
+		);
+	});
+
+	// Nobody is waiting on a closed review, so an undecided close reads "No decision".
+	it('pairs the closed state with a pending decision as No decision', () => {
+		const { getByTestId } = renderComponent({
+			props: { review: makeDetail({ state: 'closed', decision: 'pending' }) },
+		});
+
+		expect(getByTestId('workflow-review-detail-status-card')).toHaveTextContent(
+			'Closed | No decision',
+		);
+	});
+
+	it('pairs the closed state with a changes-requested decision', () => {
+		const { getByTestId } = renderComponent({
+			props: { review: makeDetail({ state: 'closed', decision: 'changes_requested' }) },
+		});
+
+		expect(getByTestId('workflow-review-detail-status-card')).toHaveTextContent(
+			'Closed | Changes requested',
+		);
+	});
+
+	it('pairs the open state with a changes-requested decision', () => {
+		const { getByTestId } = renderComponent({
+			props: { review: makeDetail({ state: 'open', decision: 'changes_requested' }) },
+		});
+
+		expect(getByTestId('workflow-review-detail-status-card')).toHaveTextContent(
+			'Open | Changes requested',
+		);
+	});
+
+	it('links each workflow to the editor', () => {
+		const { getByTestId } = renderComponent({
+			props: { review: makeDetail() },
+		});
+
+		expect(getByTestId('workflow-review-detail-workflow-link')).toHaveAttribute(
+			'href',
+			'/workflow/wf-1',
+		);
+	});
+
+	it('hides the changes card when there are no workflows', () => {
+		const { getByTestId, queryByTestId } = renderComponent({
+			props: { review: makeDetail({ reviewers: [], workflows: [] }) },
+		});
+
+		expect(getByTestId('workflow-review-detail-no-reviewers')).toHaveTextContent(
+			'No reviewers assigned.',
+		);
+		expect(queryByTestId('workflow-review-detail-changes-card')).not.toBeInTheDocument();
+	});
+});