@n8n/frontend-module-inbox 0.0.0-stage → 0.2.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/WorkflowReviewChangesList.test.ts

@@ -0,0 +1,97 @@
+import type {
+	WorkflowReviewRequestWorkflowDetail,
+	WorkflowReviewVersionSnapshot,
+} from '@n8n/api-types';
+import { createTestingPinia } from '@pinia/testing';
+import userEvent from '@testing-library/user-event';
+import { createComponentRenderer } from '@n8n/frontend-test-utils';
+
+import WorkflowReviewChangesList from './WorkflowReviewChangesList.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" />',
+	},
+}));
+
+const renderComponent = createComponentRenderer(WorkflowReviewChangesList);
+
+function makeSnapshot(
+	overrides: Partial<WorkflowReviewVersionSnapshot> = {},
+): WorkflowReviewVersionSnapshot {
+	return {
+		versionId: 'version-1',
+		name: null,
+		nodes: [],
+		connections: {},
+		nodeGroups: [],
+		createdAt: '2024-01-01T00:00:00.000Z',
+		...overrides,
+	};
+}
+
+function makeWorkflowDetail(
+	overrides: Partial<WorkflowReviewRequestWorkflowDetail> = {},
+): WorkflowReviewRequestWorkflowDetail {
+	return {
+		workflowId: 'wf-1',
+		workflowName: 'My workflow',
+		workflowVersionId: 'version-1',
+		pinnedVersion: makeSnapshot(),
+		publishedVersionId: null,
+		baselineVersion: null,
+		...overrides,
+	};
+}
+
+describe('WorkflowReviewChangesList', () => {
+	beforeEach(() => {
+		createTestingPinia();
+	});
+
+	it('opens one workflow at a time and closes it on a second click', async () => {
+		const { getAllByTestId, queryAllByTestId } = renderComponent({
+			props: {
+				workflows: [
+					makeWorkflowDetail(),
+					makeWorkflowDetail({ workflowId: 'wf-2', workflowName: 'Other workflow' }),
+				],
+				state: 'open',
+				decision: 'pending',
+			},
+		});
+		const [firstTrigger, secondTrigger] = getAllByTestId('workflow-review-changes-item-trigger');
+
+		await userEvent.click(firstTrigger);
+		await userEvent.click(secondTrigger);
+
+		const sections = getAllByTestId('workflow-review-changes-section');
+		expect(sections).toHaveLength(1);
+		expect(sections[0]).toHaveAttribute('data-workflow-id', 'wf-2');
+
+		await userEvent.click(secondTrigger);
+
+		expect(queryAllByTestId('workflow-review-changes-section')).toHaveLength(0);
+	});
+
+	it('shows the version next to the workflow name, and only the name when the version is missing', () => {
+		const { getAllByTestId } = renderComponent({
+			props: {
+				workflows: [
+					makeWorkflowDetail({ pinnedVersion: makeSnapshot({ name: 'Fix retries' }) }),
+					makeWorkflowDetail({ workflowId: 'wf-2', workflowName: 'Pruned', pinnedVersion: null }),
+				],
+				state: 'open',
+				decision: 'pending',
+			},
+		});
+		const [withVersion, withoutVersion] = getAllByTestId('workflow-review-changes-item-trigger');
+
+		expect(withVersion).toHaveTextContent('My workflow');
+		expect(withVersion).toHaveTextContent('Fix retries');
+		expect(withoutVersion).toHaveTextContent(/^Pruned$/);
+	});
+});

package/src/reviews/components/WorkflowReviewChangesList.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import type {
+	WorkflowReviewRequestDecision,
+	WorkflowReviewRequestState,
+	WorkflowReviewRequestWorkflowDetail,
+} from '@n8n/api-types';
+import { N8nIcon, N8nText } from '@n8n/design-system';
+import {
+	AccordionContent,
+	AccordionHeader,
+	AccordionItem,
+	AccordionRoot,
+	AccordionTrigger,
+} from 'reka-ui';
+
+import { getVersionLabel } from '@n8n/composables/useWorkflowVersionLabel';
+import WorkflowReviewChangesSection from './WorkflowReviewChangesSection.vue';
+
+defineProps<{
+	workflows: WorkflowReviewRequestWorkflowDetail[];
+	state: WorkflowReviewRequestState;
+	decision: WorkflowReviewRequestDecision;
+}>();
+
+/** The open workflow's id. The parent owns it, so it survives a tab switch. */
+const expanded = defineModel<string | undefined>('expanded');
+</script>
+
+<template>
+	<!-- Closed items unmount, so only the open workflow pays for its diff canvases. -->
+	<AccordionRoot v-model="expanded" type="single" collapsible unmount-on-hide :class="$style.list">
+		<AccordionItem
+			v-for="workflow in workflows"
+			:key="workflow.workflowId"
+			:value="workflow.workflowId"
+			:class="$style.item"
+			data-test-id="workflow-review-changes-item"
+		>
+			<AccordionHeader :class="$style.header">
+				<AccordionTrigger
+					:class="$style.trigger"
+					data-test-id="workflow-review-changes-item-trigger"
+				>
+					<N8nIcon icon="chevron-down" size="small" :class="$style.chevron" />
+					<N8nText bold size="medium" color="text-dark" :class="$style.name">
+						{{ workflow.workflowName }}
+					</N8nText>
+					<N8nText
+						v-if="workflow.pinnedVersion"
+						size="small"
+						color="text-light"
+						:class="$style.version"
+						data-test-id="workflow-review-changes-item-version"
+					>
+						{{ getVersionLabel({ workflowHistory: workflow.pinnedVersion }) }}
+					</N8nText>
+				</AccordionTrigger>
+			</AccordionHeader>
+			<AccordionContent :class="$style.content">
+				<WorkflowReviewChangesSection :workflow="workflow" :state="state" :decision="decision" />
+			</AccordionContent>
+		</AccordionItem>
+	</AccordionRoot>
+</template>
+
+<style module lang="scss">
+.list {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing--2xs);
+	/* A definite height, so the diff canvas can size itself with percentages. */
+	height: 100%;
+}
+
+.item {
+	display: flex;
+	flex-direction: column;
+	flex-shrink: 0;
+	border: var(--border);
+	border-radius: var(--radius--2xs);
+	overflow: hidden;
+
+	/* Only a diff takes the free height. A callout keeps its natural size. */
+	&[data-state='open']:has([data-review-diff]) {
+		flex: 1 0 auto;
+		min-height: var(--review-diff--min-height, 28rem);
+	}
+}
+
+.header {
+	margin: 0;
+}
+
+.trigger {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing--2xs);
+	width: 100%;
+	padding: var(--spacing--xs) var(--spacing--sm);
+	border: none;
+	background: var(--color--background--light-3);
+	text-align: left;
+	cursor: pointer;
+
+	&:focus-visible {
+		outline: var(--focus--border-width) solid var(--focus--outline-color);
+		outline-offset: calc(-1 * var(--focus--border-width));
+	}
+
+	&[data-state='open'] {
+		border-bottom: var(--border);
+	}
+}
+
+.chevron {
+	flex-shrink: 0;
+	color: var(--color--text--tint-1);
+	transition: transform 0.15s ease;
+
+	[data-state='closed'] > & {
+		transform: rotate(-90deg);
+	}
+}
+
+.name,
+.version {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.version {
+	flex-shrink: 0;
+	max-width: 40%;
+}
+
+.content {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0;
+}
+</style>