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

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

@@ -0,0 +1,331 @@
+import type {
+	WorkflowReviewRequestDecision,
+	WorkflowReviewRequestState,
+	WorkflowReviewRequestWorkflowDetail,
+	WorkflowReviewVersionSnapshot,
+} from '@n8n/api-types';
+import { createTestingPinia } from '@pinia/testing';
+import type { INode } from 'n8n-workflow';
+import { defineComponent } from 'vue';
+import { createComponentRenderer } from '@n8n/frontend-test-utils';
+import { componentRegistry, type SlotWorkflowDiffProps } from '@n8n/frontend-module-sdk';
+
+import WorkflowReviewChangesSection from './WorkflowReviewChangesSection.vue';
+
+type DiffViewProps = SlotWorkflowDiffProps;
+
+const { diffViewProps } = vi.hoisted(() => ({
+	diffViewProps: [] as DiffViewProps[],
+}));
+
+const DiffView = defineComponent({
+	name: 'WorkflowDiffView',
+	props: {
+		sourceSnapshot: null,
+		targetSnapshot: null,
+		workflowId: String,
+		workflowName: String,
+		sourceLabel: String,
+		targetLabel: String,
+		showFullscreenButton: Boolean,
+		canvasIdPrefix: String,
+		hideTitle: Boolean,
+	},
+	setup(props) {
+		diffViewProps.push(props as SlotWorkflowDiffProps);
+	},
+	template:
+		'<div data-test-id="workflow-diff-view-stub"><slot name="sourceLabel" /><slot name="targetLabel" /><slot name="sourceEmptyText" /></div>',
+});
+beforeEach(() => {
+	componentRegistry.clear();
+	componentRegistry.register('workflow-diff', DiffView);
+});
+afterEach(() => componentRegistry.clear());
+
+const renderSection = createComponentRenderer(WorkflowReviewChangesSection);
+
+/** Defaults to an open review; closed cases pass `state` and `decision` themselves. */
+const renderComponent = (options: {
+	props: {
+		workflow: WorkflowReviewRequestWorkflowDetail;
+		state?: WorkflowReviewRequestState;
+		decision?: WorkflowReviewRequestDecision;
+	};
+}) => renderSection({ props: { state: 'open', decision: 'pending', ...options.props } });
+
+function makeNode(overrides: Partial<INode> = {}): INode {
+	return {
+		id: 'node-1',
+		name: 'Node 1',
+		type: 'n8n-nodes-base.noOp',
+		typeVersion: 1,
+		position: [0, 0],
+		parameters: {},
+		...overrides,
+	};
+}
+
+function makeSnapshot(
+	overrides: Partial<WorkflowReviewVersionSnapshot> = {},
+): WorkflowReviewVersionSnapshot {
+	return {
+		versionId: '77b70644-0000-0000-0000-000000000000',
+		name: null,
+		nodes: [makeNode()],
+		connections: {},
+		nodeGroups: [],
+		createdAt: '2024-01-01T00:00:00.000Z',
+		...overrides,
+	};
+}
+
+function makeWorkflow(
+	overrides: Partial<WorkflowReviewRequestWorkflowDetail> = {},
+): WorkflowReviewRequestWorkflowDetail {
+	return {
+		workflowId: 'wf-1',
+		workflowName: 'Payment handler',
+		workflowVersionId: '77b70644-0000-0000-0000-000000000000',
+		pinnedVersion: makeSnapshot(),
+		publishedVersionId: null,
+		baselineVersion: makeSnapshot({
+			versionId: '0f123890-0000-0000-0000-000000000000',
+			nodes: [makeNode({ id: 'node-removed', name: 'Removed node' }), makeNode()],
+		}),
+		...overrides,
+	};
+}
+
+describe('WorkflowReviewChangesSection', () => {
+	beforeEach(() => {
+		createTestingPinia();
+		diffViewProps.length = 0;
+	});
+
+	it('labels both diff sides with a version status', () => {
+		const { getByTestId } = renderComponent({ props: { workflow: makeWorkflow() } });
+
+		expect(getByTestId('workflow-review-changes-source-label')).toHaveTextContent('0f123890');
+		expect(getByTestId('workflow-review-changes-target-label')).toHaveTextContent('77b70644');
+	});
+
+	it('labels a named version by its name instead of its id', () => {
+		const { getByTestId } = renderComponent({
+			props: {
+				workflow: makeWorkflow({
+					pinnedVersion: makeSnapshot({ name: 'Version hotpink' }),
+					baselineVersion: makeSnapshot({
+						versionId: '0f123890-0000-0000-0000-000000000000',
+						name: 'Version teal',
+						nodes: [makeNode({ id: 'node-removed', name: 'Removed node' }), makeNode()],
+					}),
+				}),
+			},
+		});
+
+		expect(getByTestId('workflow-review-changes-source-label')).toHaveTextContent(
+			'Published: Version teal',
+		);
+		expect(getByTestId('workflow-review-changes-target-label')).toHaveTextContent(
+			'In review: Version hotpink',
+		);
+	});
+
+	// The publish endpoints accept an empty name, so a stored '' must still label.
+	it.each([
+		['null', null],
+		['empty', ''],
+	])('falls back to the id-derived label when the name is %s', (_case, name) => {
+		const { getByTestId } = renderComponent({
+			props: { workflow: makeWorkflow({ pinnedVersion: makeSnapshot({ name }) }) },
+		});
+
+		expect(getByTestId('workflow-review-changes-target-label')).toHaveTextContent(
+			'In review: Version 77b70644',
+		);
+	});
+
+	it('shows a no-changes state when versions differ only by name', () => {
+		const { getByTestId, queryByTestId } = renderComponent({
+			props: {
+				workflow: makeWorkflow({
+					pinnedVersion: makeSnapshot({ name: 'Version hotpink' }),
+					baselineVersion: makeSnapshot({
+						versionId: '0f123890-0000-0000-0000-000000000000',
+						name: 'Version teal',
+					}),
+				}),
+			},
+		});
+
+		expect(getByTestId('workflow-review-changes-no-changes')).toBeInTheDocument();
+		expect(queryByTestId('workflow-diff-view-stub')).not.toBeInTheDocument();
+	});
+
+	it('shows an unavailable state when the pinned version was pruned', () => {
+		const { getByTestId, queryByTestId } = renderComponent({
+			props: {
+				workflow: makeWorkflow({
+					workflowVersionId: null,
+					pinnedVersion: null,
+				}),
+			},
+		});
+
+		expect(getByTestId('workflow-review-changes-version-unavailable')).toBeInTheDocument();
+		expect(queryByTestId('workflow-diff-view-stub')).not.toBeInTheDocument();
+	});
+
+	it('shows a no-changes state when pinned and baseline are the same version', () => {
+		const snapshot = makeSnapshot();
+		const { getByTestId, queryByTestId } = renderComponent({
+			props: {
+				workflow: makeWorkflow({ pinnedVersion: snapshot, baselineVersion: snapshot }),
+			},
+		});
+
+		expect(getByTestId('workflow-review-changes-no-changes')).toBeInTheDocument();
+		expect(queryByTestId('workflow-diff-view-stub')).not.toBeInTheDocument();
+	});
+
+	it('shows a no-changes state when versions differ only by id', () => {
+		const { getByTestId, queryByTestId } = renderComponent({
+			props: {
+				workflow: makeWorkflow({
+					pinnedVersion: makeSnapshot(),
+					baselineVersion: makeSnapshot({ versionId: 'other-version-id' }),
+				}),
+			},
+		});
+
+		expect(getByTestId('workflow-review-changes-no-changes')).toBeInTheDocument();
+		expect(queryByTestId('workflow-diff-view-stub')).not.toBeInTheDocument();
+	});
+
+	// First publish: no baseline, so the diff gets no source workflow — and that
+	// side carries no publish-status label either, since nothing was published.
+	it('renders a sourceless diff with no source label for a first publish', () => {
+		const { getByTestId, queryByTestId } = renderComponent({
+			props: {
+				workflow: makeWorkflow({ baselineVersion: null }),
+			},
+		});
+
+		expect(getByTestId('workflow-diff-view-stub')).toBeInTheDocument();
+		expect(diffViewProps).toHaveLength(1);
+		expect(diffViewProps[0].sourceSnapshot).toBeUndefined();
+		expect(diffViewProps[0].workflowId).toBe('wf-1');
+		expect(queryByTestId('workflow-review-changes-source-label')).not.toBeInTheDocument();
+		expect(getByTestId('workflow-review-changes-target-label')).toBeInTheDocument();
+	});
+
+	it('passes workflow identity, snapshots, and labels to the editor renderer', () => {
+		const workflow = makeWorkflow();
+		renderComponent({ props: { workflow } });
+
+		expect(diffViewProps).toHaveLength(1);
+		const { sourceSnapshot, targetSnapshot, sourceLabel, targetLabel } = diffViewProps[0];
+
+		expect(diffViewProps[0].workflowId).toBe('wf-1');
+		expect(diffViewProps[0].workflowName).toBe('Payment handler');
+		expect(diffViewProps[0].canvasIdPrefix).toBe('wf-1');
+		expect(diffViewProps[0].hideTitle).toBe(true);
+		expect(sourceSnapshot?.versionId).toBe('0f123890-0000-0000-0000-000000000000');
+		expect(sourceSnapshot?.nodes.map((node) => node.id)).toEqual(['node-removed', 'node-1']);
+
+		expect(targetSnapshot?.versionId).toBe('77b70644-0000-0000-0000-000000000000');
+		expect(targetSnapshot?.nodes.map((node) => node.id)).toEqual(['node-1']);
+
+		expect(sourceLabel).toContain('Published');
+		expect(sourceLabel).toContain('0f123890');
+		expect(targetLabel).toContain('In review');
+		expect(targetLabel).toContain('77b70644');
+	});
+
+	describe('closed reviews', () => {
+		const approved = { state: 'closed', decision: 'approved' } as const;
+
+		it('labels the frozen baseline and the approved version', () => {
+			const { getByTestId } = renderComponent({
+				props: {
+					...approved,
+					workflow: makeWorkflow({
+						pinnedVersion: makeSnapshot({ name: 'Version hotpink' }),
+						baselineVersion: makeSnapshot({
+							versionId: '0f123890-0000-0000-0000-000000000000',
+							name: 'Version teal',
+							nodes: [makeNode({ id: 'node-removed', name: 'Removed node' }), makeNode()],
+						}),
+					}),
+				},
+			});
+
+			expect(getByTestId('workflow-review-changes-source-label')).toHaveTextContent(
+				'Previously published: Version teal',
+			);
+			expect(getByTestId('workflow-review-changes-target-label')).toHaveTextContent(
+				'Approved: Version hotpink',
+			);
+		});
+
+		// Nothing was published when this was approved, so the baseline is empty by
+		// right — not missing. The diff still renders, sourceless.
+		it('renders a sourceless diff when nothing was published at approval', () => {
+			const { getByTestId, queryByTestId } = renderComponent({
+				props: { ...approved, workflow: makeWorkflow({ baselineVersion: null }) },
+			});
+
+			expect(getByTestId('workflow-diff-view-stub')).toBeInTheDocument();
+			expect(diffViewProps[0].sourceSnapshot).toBeUndefined();
+			expect(
+				queryByTestId('workflow-review-changes-closed-without-approval'),
+			).not.toBeInTheDocument();
+		});
+
+		it('phrases the no-changes state in the past tense', () => {
+			const snapshot = makeSnapshot();
+			const { getByTestId } = renderComponent({
+				props: {
+					...approved,
+					workflow: makeWorkflow({ pinnedVersion: snapshot, baselineVersion: snapshot }),
+				},
+			});
+
+			expect(getByTestId('workflow-review-changes-no-changes')).toHaveTextContent(
+				'No changes compared to the previously published version.',
+			);
+		});
+
+		// Auto-closed by archiving, transferring or deleting the workflow: approval
+		// is the only thing that freezes a baseline, so there is nothing to diff.
+		it.each(['pending', 'changes_requested'] as const)(
+			'explains that a review closed with decision %s has no changes to compare',
+			(decision) => {
+				const { getByTestId, queryByTestId } = renderComponent({
+					props: { state: 'closed', decision, workflow: makeWorkflow() },
+				});
+
+				expect(getByTestId('workflow-review-changes-closed-without-approval')).toBeInTheDocument();
+				expect(queryByTestId('workflow-diff-view-stub')).not.toBeInTheDocument();
+			},
+		);
+	});
+
+	it('renders the diff when versions differ only by an execution flag', () => {
+		const { getByTestId, queryByTestId } = renderComponent({
+			props: {
+				workflow: makeWorkflow({
+					pinnedVersion: makeSnapshot({ nodes: [makeNode({ disabled: true })] }),
+					baselineVersion: makeSnapshot({
+						versionId: '0f123890-0000-0000-0000-000000000000',
+						nodes: [makeNode()],
+					}),
+				}),
+			},
+		});
+
+		expect(getByTestId('workflow-diff-view-stub')).toBeInTheDocument();
+		expect(queryByTestId('workflow-review-changes-no-changes')).not.toBeInTheDocument();
+	});
+});

package/src/reviews/components/WorkflowReviewChangesSection.vue

@@ -0,0 +1,217 @@
+<script setup lang="ts">
+import type {
+	WorkflowReviewRequestDecision,
+	WorkflowReviewRequestState,
+	WorkflowReviewRequestWorkflowDetail,
+	WorkflowReviewVersionSnapshot,
+} from '@n8n/api-types';
+import { N8nCallout, N8nText } from '@n8n/design-system';
+import { useI18n } from '@n8n/i18n';
+import isEqual from 'lodash/isEqual';
+import omit from 'lodash/omit';
+import { computed } from 'vue';
+import { componentRegistry } from '@n8n/frontend-module-sdk';
+
+import { getVersionLabel } from '@n8n/composables/useWorkflowVersionLabel';
+
+const WorkflowDiffView = computed(() => componentRegistry.get('workflow-diff'));
+
+const props = defineProps<{
+	workflow: WorkflowReviewRequestWorkflowDetail;
+	state: WorkflowReviewRequestState;
+	decision: WorkflowReviewRequestDecision;
+}>();
+
+const i18n = useI18n();
+
+// Only approval freezes a baseline, so an approved review diffs against what was
+// published back then; a review closed any other way has nothing to diff against.
+const isApproved = computed(() => props.state === 'closed' && props.decision === 'approved');
+const isClosedWithoutApproval = computed(
+	() => props.state === 'closed' && props.decision !== 'approved',
+);
+
+/**
+ * Label each side the way version history does, falling back to a short id.
+ * Falsy rather than nullish: the publish endpoints accept `name: ""`.
+ */
+const versionLabel = (snapshot: WorkflowReviewVersionSnapshot) =>
+	getVersionLabel({ workflowHistory: snapshot });
+
+/**
+ * A snapshot minus its identity and metadata — i.e. everything the diff renders.
+ * Derived by omission rather than an explicit field list to avoid drift; renaming
+ * a version must not read as a change.
+ */
+function contentOf(snapshot: WorkflowReviewVersionSnapshot) {
+	return omit(snapshot, ['versionId', 'name', 'createdAt']);
+}
+
+const hasChanges = computed(() => {
+	const { pinnedVersion, baselineVersion } = props.workflow;
+
+	if (!pinnedVersion) return false;
+	// No baseline means first publish: everything is a change.
+	if (!baselineVersion) return true;
+	if (pinnedVersion.versionId === baselineVersion.versionId) return false;
+
+	return !isEqual(contentOf(baselineVersion), contentOf(pinnedVersion));
+});
+
+// The dots track publish status, which approval flips: the approved version is
+// the published one now, and the baseline it replaced no longer is.
+const sourceDotClass = computed(() =>
+	isApproved.value ? 'statusDotSuperseded' : 'statusDotPublished',
+);
+const targetDotClass = computed(() =>
+	isApproved.value ? 'statusDotPublished' : 'statusDotInReview',
+);
+
+const noChangesText = computed(() =>
+	i18n.baseText(
+		isApproved.value
+			? 'workflowReviews.changes.closed.noChanges'
+			: 'workflowReviews.changes.noChanges',
+	),
+);
+const sourceEmptyText = computed(() =>
+	i18n.baseText(
+		isApproved.value
+			? 'workflowReviews.changes.closed.firstPublish.sourceEmpty'
+			: 'workflowReviews.changes.firstPublish.sourceEmpty',
+	),
+);
+
+const sourceLabel = computed(() =>
+	props.workflow.baselineVersion
+		? i18n.baseText(
+				isApproved.value
+					? 'workflowReviews.changes.closed.sourceLabel'
+					: 'workflowReviews.changes.sourceLabel',
+				{ interpolate: { version: versionLabel(props.workflow.baselineVersion) } },
+			)
+		: undefined,
+);
+const targetLabel = computed(() =>
+	props.workflow.pinnedVersion
+		? i18n.baseText(
+				isApproved.value
+					? 'workflowReviews.changes.closed.targetLabel'
+					: 'workflowReviews.changes.targetLabel',
+				{ interpolate: { version: versionLabel(props.workflow.pinnedVersion) } },
+			)
+		: undefined,
+);
+</script>
+
+<template>
+	<N8nCallout
+		v-if="isClosedWithoutApproval"
+		theme="info"
+		:class="$style.callout"
+		data-test-id="workflow-review-changes-closed-without-approval"
+	>
+		{{ i18n.baseText('workflowReviews.changes.closedWithoutApproval') }}
+	</N8nCallout>
+	<N8nCallout
+		v-else-if="!workflow.pinnedVersion"
+		theme="warning"
+		:class="$style.callout"
+		data-test-id="workflow-review-changes-version-unavailable"
+	>
+		{{ i18n.baseText('workflowReviews.changes.versionUnavailable.body') }}
+	</N8nCallout>
+	<N8nCallout
+		v-else-if="!hasChanges"
+		theme="info"
+		:class="$style.callout"
+		data-test-id="workflow-review-changes-no-changes"
+	>
+		{{ noChangesText }}
+	</N8nCallout>
+	<div v-else :class="$style.diff" data-review-diff data-test-id="workflow-review-changes-diff">
+		<component
+			:is="WorkflowDiffView"
+			:source-snapshot="workflow.baselineVersion ?? undefined"
+			:workflow-id="workflow.workflowId"
+			:workflow-name="workflow.workflowName"
+			:target-snapshot="workflow.pinnedVersion ?? undefined"
+			:source-label="sourceLabel"
+			:target-label="targetLabel"
+			:canvas-id-prefix="workflow.workflowId"
+			show-fullscreen-button
+			hide-title
+		>
+			<!-- Only when a baseline exists: with no prior published version there is
+				no publish status to represent. -->
+			<template v-if="workflow.baselineVersion" #sourceLabel>
+				<span :class="$style.versionBadge" data-test-id="workflow-review-changes-source-label">
+					<span :class="[$style.statusDot, $style[sourceDotClass]]" />
+					<N8nText color="text-dark" size="small" compact>{{ sourceLabel }}</N8nText>
+				</span>
+			</template>
+			<template #targetLabel>
+				<span :class="$style.versionBadge" data-test-id="workflow-review-changes-target-label">
+					<span :class="[$style.statusDot, $style[targetDotClass]]" />
+					<N8nText color="text-dark" size="small" compact>{{ targetLabel }}</N8nText>
+				</span>
+			</template>
+			<template #sourceEmptyText>
+				<N8nText size="small" color="text-base">{{ sourceEmptyText }}</N8nText>
+			</template>
+		</component>
+	</div>
+</template>
+
+<style module lang="scss">
+.callout {
+	max-width: var(--review-callout--max-width, 34rem);
+	margin: var(--spacing--xs);
+}
+
+.versionBadge {
+	/* Keep the existing Reviews badge sizes when the root font changes. */
+	--review-version-badge--spacing: 12px;
+	--review-version-badge--radius: 4px;
+	--review-version-badge--height: 30px;
+	--review-version-badge--gap: 8px;
+	position: absolute;
+	top: var(--review-version-badge--spacing);
+	left: var(--review-version-badge--spacing);
+	z-index: 1;
+	border-radius: var(--review-version-badge--radius);
+	border: var(--border-width) solid var(--color--foreground--tint-1);
+	background: var(--color--foreground--tint-2);
+	display: flex;
+	height: var(--review-version-badge--height);
+	padding: 0 var(--review-version-badge--spacing);
+	align-items: center;
+	gap: var(--review-version-badge--gap);
+	align-self: stretch;
+}
+
+.statusDot {
+	height: var(--spacing--2xs);
+	width: var(--spacing--2xs);
+	border-radius: 50%;
+	display: inline-block;
+	flex-shrink: 0;
+}
+
+.statusDotPublished {
+	background-color: var(--color--mint-600);
+}
+
+.statusDotInReview {
+	background-color: var(--color--yellow-500);
+}
+
+.statusDotSuperseded {
+	background-color: var(--color--text--tint-1);
+}
+
+.diff {
+	flex: 1;
+	min-height: 0;
+}
+</style>