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

package/src/reviews/components/WorkflowReviewActivityFeed.vue

@@ -0,0 +1,312 @@
+<script setup lang="ts">
+import { N8nButton, N8nLoading, N8nText } from '@n8n/design-system';
+import { useI18n } from '@n8n/i18n';
+import { useResizeObserver } from '@vueuse/core';
+import { storeToRefs } from 'pinia';
+import { inject, onMounted, ref, watch } from 'vue';
+
+import { useIntersectionObserver } from '@n8n/composables/useIntersectionObserver';
+
+import { ReviewDetailScrollContainerKey } from '../constants';
+import { useReviewActivityStore } from '../reviewActivity.store';
+import { resolveActivityComponent } from './activityEntryRegistry';
+
+const i18n = useI18n();
+const store = useReviewActivityStore();
+const { entries, loading, loadingMore, hasMore, error } = storeToRefs(store);
+
+const scrollContainer = inject(ReviewDetailScrollContainerKey, ref(null));
+const feed = ref<HTMLElement | null>(null);
+const list = ref<HTMLElement | null>(null);
+const sentinel = ref<HTMLElement | null>(null);
+const composer = ref<HTMLElement | null>(null);
+// Held back until the initial scroll position is applied, so the sentinel cannot
+// intersect at scrollTop 0 and pull in the whole feed before the user sees it.
+const initialScrollApplied = ref(false);
+
+let prependAnchor: { element: Element; top: number } | null = null;
+
+const enteringIds = ref<ReadonlySet<string>>(new Set());
+
+function scrollToBottom() {
+	const container = scrollContainer.value;
+	if (container) container.scrollTop = container.scrollHeight;
+}
+
+const { observe } = useIntersectionObserver({
+	root: scrollContainer,
+	threshold: 0.01,
+	onIntersect: () => {
+		// Captured here, not in the post-flush watcher: by then the older page is
+		// already in the DOM and the difference would be zero.
+		const element = list.value?.firstElementChild ?? null;
+		prependAnchor = element ? { element, top: element.getBoundingClientRect().top } : null;
+		void store.loadMore();
+	},
+});
+
+watch(
+	[sentinel, hasMore, loadingMore, () => entries.value.length],
+	([sentinelElement, moreToLoad, isLoadingMore]) => {
+		if (sentinelElement && moreToLoad && !isLoadingMore) {
+			observe(sentinelElement);
+		}
+	},
+	{ immediate: true, flush: 'post' },
+);
+
+watch(
+	entries,
+	(next, previous) => {
+		// Good for this update only, and only while its element is still in the list: `loadMore`
+		// bails out on a cursor it has already spent, leaving an anchor behind, and a refetch
+		// drops the entries an older anchor points at.
+		const anchor = prependAnchor?.element.isConnected === true ? prependAnchor : null;
+		prependAnchor = null;
+
+		if (next.length === 0) return;
+		if (!previous || previous.length === 0) {
+			scrollToBottom();
+			return;
+		}
+		if (next[0]?.id !== previous[0]?.id) {
+			const container = scrollContainer.value;
+			// With no anchor the list was replaced rather than prepended to — a refetch keeps
+			// only what is newer than the page it got — so the newest entry is what to show.
+			if (!container || !anchor) {
+				scrollToBottom();
+				return;
+			}
+			container.scrollTop += anchor.element.getBoundingClientRect().top - anchor.top;
+			return;
+		}
+		if (next.at(-1)?.id !== previous.at(-1)?.id) scrollToBottom();
+	},
+	{ flush: 'post' },
+);
+
+// Ids, not positions: a refetch can replace the first entries and still add new ones.
+watch(
+	entries,
+	(next, previous) => {
+		if (next.length === 0) {
+			enteringIds.value = new Set();
+			return;
+		}
+		const lastShown = previous?.at(-1);
+		if (!lastShown) return;
+
+		const newer = next.filter((entry) => Number(entry.id) > Number(lastShown.id));
+		// Only replaced on new entries, so a prepend does not cut a running fade.
+		if (newer.length > 0) enteringIds.value = new Set(newer.map((entry) => entry.id));
+	},
+	{ flush: 'post' },
+);
+
+// Keeps the feed at the bottom while the composer grows, unless the viewer scrolled up.
+// The first size counts too: a restored draft grows the input after the initial scroll.
+let composerHeight = 0;
+useResizeObserver(composer, ([entry]) => {
+	const height = entry?.borderBoxSize[0]?.blockSize ?? 0;
+	const growth = height - composerHeight;
+	composerHeight = height;
+
+	feed.value?.style.setProperty('--review-activity--composer-height', `${height}px`);
+
+	const container = scrollContainer.value;
+	if (!container || growth <= 0) return;
+
+	// Was at the bottom before this growth. 1px covers rounding.
+	const distanceToBottom = container.scrollHeight - container.clientHeight - container.scrollTop;
+	if (distanceToBottom <= growth + 1) scrollToBottom();
+});
+
+// `loadMore` is a no-op with no cursor, so a failed first page has to refetch. Shared by both
+// error rows: posting onto a failed feed moves the viewer from the first to the second, which
+// would otherwise hit that dead end and leave the earlier activity unreachable.
+function retry() {
+	if (!store.nextCursor) {
+		if (store.currentReviewId) void store.fetchFeed(store.currentReviewId);
+		return;
+	}
+	void store.loadMore();
+}
+
+// Entries may already be loaded on mount (Changes -> Activity round trip).
+onMounted(() => {
+	if (entries.value.length > 0) scrollToBottom();
+	initialScrollApplied.value = true;
+});
+</script>
+
+<template>
+	<div
+		ref="feed"
+		:class="[$style.feed, { [$style.feedWithComposer]: $slots.composer }]"
+		data-test-id="workflow-review-activity-feed"
+	>
+		<div v-if="$slots.header" :class="$style.header">
+			<slot name="header" />
+		</div>
+		<N8nLoading v-if="loading && entries.length === 0" :loading="true" :rows="3" />
+		<div
+			v-else-if="error && entries.length === 0"
+			:class="$style.errorRow"
+			data-test-id="workflow-review-activity-error"
+		>
+			<N8nText color="danger" size="small">
+				{{ i18n.baseText('workflowReviews.detail.activity.error.load') }}
+			</N8nText>
+			<N8nButton
+				size="mini"
+				variant="outline"
+				data-test-id="workflow-review-activity-retry"
+				@click="retry()"
+			>
+				{{ i18n.baseText('generic.retry') }}
+			</N8nButton>
+		</div>
+		<template v-else>
+			<div
+				v-if="initialScrollApplied && hasMore && !error"
+				ref="sentinel"
+				:class="$style.sentinel"
+				data-test-id="workflow-review-activity-load-more-sentinel"
+			/>
+			<!-- `loading` too: a retry that keeps a posted comment on screen leaves this the
+				only place a refetch can show progress. -->
+			<N8nLoading v-if="loadingMore || loading" :loading="true" :rows="1" />
+			<div v-if="error" :class="$style.errorRow">
+				<N8nText color="danger" size="small">
+					{{ i18n.baseText('workflowReviews.detail.activity.error.load') }}
+				</N8nText>
+				<N8nButton
+					size="mini"
+					variant="outline"
+					data-test-id="workflow-review-activity-load-more-retry"
+					@click="retry()"
+				>
+					{{ i18n.baseText('generic.retry') }}
+				</N8nButton>
+			</div>
+			<N8nText bold color="text-light" size="medium" :class="$style.header">{{
+				i18n.baseText('workflowReviews.detail.tabs.activity')
+			}}</N8nText>
+			<div
+				ref="list"
+				role="list"
+				:aria-label="i18n.baseText('workflowReviews.detail.activity.listLabel')"
+				:class="$style.list"
+			>
+				<div
+					v-for="entry in entries"
+					:key="entry.id"
+					role="listitem"
+					:class="[$style.item, { [$style.itemEntering]: enteringIds.has(entry.id) }]"
+					data-test-id="workflow-review-activity-entry"
+				>
+					<component :is="resolveActivityComponent(entry)" :entry="entry" />
+				</div>
+				<div v-if="$slots.footer" role="listitem" :class="$style.item">
+					<slot name="footer" />
+				</div>
+			</div>
+		</template>
+		<!-- Outside the loading and error states, so the composer stays mounted through them. -->
+		<div v-if="$slots.composer" ref="composer" :class="$style.composer">
+			<slot name="composer" />
+		</div>
+	</div>
+</template>
+
+<style lang="scss" module>
+@use '@n8n/design-system/css/mixins/motion';
+
+.feed {
+	/* Set here so the list, its rail and the composer share them. */
+	--review-activity--gap: var(--spacing--md);
+	/* Every entry leads with an `xxsmall` avatar (`N8nAvatar/avatarSizes.ts`), and a boxed
+		entry's negative margin and padding cancel out, so all avatars share this column. The
+		rail below is centred on it. */
+	--review-activity--avatar-size: 16px;
+	--review-activity--line-height: 20px;
+
+	display: flex;
+	flex-direction: column;
+	padding-block: var(--spacing--5xs) var(--spacing--sm);
+}
+
+/* Same inset the list gives its entries, so a card here starts on the avatar column. */
+.header {
+	padding-inline: var(--spacing--sm);
+	padding-bottom: var(--spacing--sm);
+}
+
+.list {
+	display: flex;
+	flex-direction: column;
+	gap: var(--review-activity--gap);
+	/* Entries sit inset; a boxed entry cancels this to reach the panel edge. */
+	padding-inline: var(--spacing--sm);
+}
+
+.item {
+	position: relative;
+}
+
+/* Keeps focused entry links above the composer. Not scroll padding on the feed: that also
+	scrolls the feed for the caret while typing. */
+.list * {
+	scroll-margin-bottom: var(--review-activity--composer-height, 0);
+}
+
+.itemEntering {
+	--animation--fade-in-up--translate: var(--spacing--2xs);
+	--animation--fade-in-up--easing: var(--easing--ease-out-quint);
+
+	@include motion.fade-in-up;
+}
+
+/* Threads the entries into one timeline. Drawn in the gap above each entry rather than
+	inside it, because the line belongs to the space between two entries and only the list
+	knows that gap. The first entry has nothing above it to join. */
+.item:not(:first-child)::before {
+	content: '';
+	position: absolute;
+	/* Floats clear of both neighbours instead of butting into them, as the design does. The
+		row is taller than its avatar, so the same inset reads as a wider gap at the top. */
+	bottom: calc(100% + var(--spacing--5xs));
+	height: calc(var(--review-activity--gap) - 2 * var(--spacing--5xs));
+	left: calc(var(--review-activity--avatar-size) / 2);
+	border-left: var(--border);
+}
+
+/* The composer holds the bottom space, so it sticks flush to the edge. */
+.feedWithComposer {
+	padding-block-end: 0;
+}
+
+/* Sticks to the bottom when the entries overflow. The background hides entries under it. */
+.composer {
+	position: sticky;
+	bottom: 0;
+	z-index: 1;
+	flex-shrink: 0;
+	padding-block: var(--review-activity--gap) var(--spacing--sm);
+	/* Room for the input's focus ring, which the scroll container would clip. */
+	padding-inline: var(--focus--border-width);
+	background-color: var(--color--background--light-2);
+}
+
+.errorRow {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing--md);
+	padding-block: var(--spacing--xs);
+}
+
+.sentinel {
+	height: var(--spacing--4xs);
+	flex-shrink: 0;
+}
+</style>

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

@@ -0,0 +1,327 @@
+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',
+		'targetSnapshot',
+		'workflowId',
+		'workflowName',
+		'sourceLabel',
+		'targetLabel',
+		'showFullscreenButton',
+	],
+	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(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();
+	});
+});