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

package/src/reviews/components/WorkflowReviewDetailTabs.vue

@@ -0,0 +1,329 @@
+<script setup lang="ts">
+import type { WorkflowReviewInboxItem, WorkflowReviewRequestDetail } from '@n8n/api-types';
+import { N8nCallout, N8nTabs, N8nText } from '@n8n/design-system';
+import { useI18n } from '@n8n/i18n';
+import { computed, provide, ref, useTemplateRef, watch } from 'vue';
+
+import { ReviewDetailScrollContainerKey, ReviewLinkedWorkflowsKey } from '../constants';
+import type { WorkflowReviewDecisionInput } from '../workflowReviews.api';
+import WorkflowReviewActivityFeed from './WorkflowReviewActivityFeed.vue';
+import WorkflowReviewChangesList from './WorkflowReviewChangesList.vue';
+import WorkflowReviewCommentComposer from './WorkflowReviewCommentComposer.vue';
+import WorkflowReviewDecisionPopover from './WorkflowReviewDecisionPopover.vue';
+import WorkflowReviewDetailMetadata from './WorkflowReviewDetailMetadata.vue';
+
+export type WorkflowReviewDetailTab = 'activity' | 'changes';
+
+const props = defineProps<{
+	review: WorkflowReviewInboxItem | WorkflowReviewRequestDetail;
+	tab: WorkflowReviewDetailTab;
+	deciding: boolean;
+}>();
+
+const emit = defineEmits<{
+	'update:tab': [tab: WorkflowReviewDetailTab];
+	decide: [input: WorkflowReviewDecisionInput];
+}>();
+
+const i18n = useI18n();
+
+provide(ReviewDetailScrollContainerKey, useTemplateRef<HTMLElement>('detailBody'));
+
+const detail = computed<WorkflowReviewRequestDetail | null>(() =>
+	'workflows' in props.review ? props.review : null,
+);
+
+// Held here, not in the list: the detail body remounts on every tab switch.
+const expandedWorkflowId = ref<string>();
+// The review that `expandedWorkflowId` belongs to.
+let expandedReviewId: string | undefined;
+
+// Open the first workflow for each new review. A refetch keeps the choice while the
+// open workflow is still listed. The detail lists only readable workflows, so it can drop one.
+watch(
+	detail,
+	(value) => {
+		if (!value?.workflows.length) return;
+		const open = expandedWorkflowId.value;
+		const isListed = value.workflows.some(({ workflowId }) => workflowId === open);
+		if (value.id === expandedReviewId && (open === undefined || isListed)) return;
+		expandedReviewId = value.id;
+		expandedWorkflowId.value = value.workflows[0].workflowId;
+	},
+	{ immediate: true },
+);
+
+const viewerCanDecide = computed(() => detail.value?.viewerCanDecide ?? false);
+const viewerCanComment = computed(() => detail.value?.viewerCanComment ?? false);
+
+// See the key's doc: read-time names for feed entries, never snapshotted into payloads.
+provide(
+	ReviewLinkedWorkflowsKey,
+	computed(
+		() =>
+			new Map(
+				(detail.value?.workflows ?? []).map((workflow) => [
+					workflow.workflowId,
+					{
+						workflowName: workflow.workflowName,
+						pinnedVersionId: workflow.workflowVersionId,
+						pinnedVersionName: workflow.pinnedVersion?.name ?? null,
+					},
+				]),
+			),
+	),
+);
+
+const ineligibilityHint = computed(() => {
+	if (!detail.value || detail.value.viewerCanDecide) return '';
+	// Any reason other than 'author' gets the generic permission hint, so new
+	// backend reasons degrade gracefully instead of breaking the UI.
+	return detail.value.viewerDecisionIneligibilityReason === 'author'
+		? i18n.baseText('workflowReviews.detail.decision.ineligible.author')
+		: i18n.baseText('generic.missing.permissions');
+});
+
+/**
+ * Whether to append the approved-and-published summary below the feed. Derived at read
+ * time from the live published pointer, not from a `workflow.published` entry: an entry
+ * can sit on an unfetched feed page, and it would keep the summary up after a newer
+ * version replaced this one. The pointer cannot claim a publication that isn't live —
+ * a failed publish either left the pin unpublished (no summary) or never touched a pin
+ * that was already live (summary true) — and it is the signal the canvas banner trusts,
+ * so the two cannot disagree. A lifecycle close needs no summary here: its
+ * `review.closed` entry renders as a callout.
+ */
+const showApprovedAndPublished = computed(() => {
+	const review = detail.value;
+	if (review?.state !== 'closed' || review.decision !== 'approved') return false;
+
+	return (
+		review.workflows.length > 0 &&
+		review.workflows.every(
+			(workflow) =>
+				workflow.workflowVersionId !== null &&
+				workflow.publishedVersionId === workflow.workflowVersionId,
+		)
+	);
+});
+
+const tabOptions = computed(() => [
+	{
+		label: i18n.baseText('workflowReviews.detail.tabs.activity'),
+		value: 'activity' as const,
+	},
+	{
+		label: i18n.baseText('workflowReviews.detail.tabs.changes'),
+		value: 'changes' as const,
+	},
+]);
+</script>
+
+<template>
+	<div :class="$style.container" data-test-id="workflow-review-detail-tabs">
+		<div :class="$style.tabRow">
+			<N8nTabs
+				:model-value="tab"
+				:options="tabOptions"
+				variant="modern"
+				data-test-id="workflow-review-detail-tab-bar"
+				@update:model-value="emit('update:tab', $event)"
+			/>
+
+			<!-- Gated on `detail`, not `review`: eligibility only arrives with the
+				detail payload, so the list item alone can't say who may decide. -->
+			<div v-if="detail?.state === 'open'" :class="$style.decisionActions">
+				<WorkflowReviewDecisionPopover
+					:deciding="deciding"
+					:viewer-can-decide="viewerCanDecide"
+					:viewer-can-comment="viewerCanComment"
+					:ineligibility-hint="ineligibilityHint"
+					@decide="emit('decide', $event)"
+					@comment-posted="emit('update:tab', 'activity')"
+				/>
+			</div>
+		</div>
+
+		<!-- Keyed so another review or tab starts at the top. -->
+		<div :key="`${review.id}:${tab}`" ref="detailBody" :class="$style.detailBody">
+			<div
+				v-if="tab === 'activity'"
+				:class="$style.activityPanel"
+				data-test-id="workflow-review-activity-panel"
+			>
+				<WorkflowReviewActivityFeed :key="review.id">
+					<template #header>
+						<!-- Carded and labelled so the review's own words are not mistaken for the
+							first entry of the feed below it. -->
+						<div :class="$style.descriptionCard">
+							<N8nText tag="h3" bold color="text-light" size="medium">
+								{{ i18n.baseText('workflowReviews.detail.activity.description') }}
+							</N8nText>
+							<N8nText
+								v-if="detail?.description"
+								color="text-base"
+								size="medium"
+								:class="$style.description"
+								data-test-id="workflow-review-description"
+							>
+								{{ detail.description }}
+							</N8nText>
+							<N8nText
+								v-else
+								color="text-light"
+								size="medium"
+								data-test-id="workflow-review-no-description"
+							>
+								{{ i18n.baseText('workflowReviews.detail.activity.noDescription') }}
+							</N8nText>
+						</div>
+					</template>
+					<template v-if="showApprovedAndPublished" #footer>
+						<N8nCallout
+							theme="success"
+							:class="$style.closedCallout"
+							data-test-id="workflow-review-closed-callout"
+						>
+							<div :class="$style.closedCalloutContent">
+								<N8nText bold size="medium">
+									{{ i18n.baseText('workflowReviews.detail.closedCallout.title') }}
+								</N8nText>
+								<N8nText size="medium">
+									{{ i18n.baseText('workflowReviews.detail.closedCallout.approvedAndPublished') }}
+								</N8nText>
+							</div>
+						</N8nCallout>
+					</template>
+					<!-- Closed reviews take no new comments (the backend 409s) -->
+					<template v-if="review.state === 'open'" #composer>
+						<WorkflowReviewCommentComposer :can-comment="viewerCanComment" />
+					</template>
+				</WorkflowReviewActivityFeed>
+			</div>
+
+			<div v-else :class="$style.panel" data-test-id="workflow-review-changes-panel">
+				<N8nCallout
+					v-if="!detail"
+					theme="warning"
+					:class="$style.callout"
+					data-test-id="workflow-review-changes-unavailable"
+				>
+					{{ i18n.baseText('workflowReviews.changes.unavailable') }}
+				</N8nCallout>
+				<WorkflowReviewChangesList
+					v-else-if="detail.workflows.length > 0"
+					v-model:expanded="expandedWorkflowId"
+					:workflows="detail.workflows"
+					:state="detail.state"
+					:decision="detail.decision"
+				/>
+				<!-- No rows left: the workflow was deleted, or the requester lost access to it. -->
+				<N8nCallout
+					v-else
+					theme="warning"
+					:class="$style.callout"
+					data-test-id="workflow-review-changes-workflow-unavailable"
+				>
+					{{ i18n.baseText('workflowReviews.changes.workflowUnavailable') }}
+				</N8nCallout>
+			</div>
+
+			<WorkflowReviewDetailMetadata :review="review" />
+		</div>
+	</div>
+</template>
+
+<style module lang="scss">
+@use './activity-card' as *;
+
+.container {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	min-height: 0;
+	container-name: review-detail;
+	container-type: inline-size;
+}
+
+.tabRow {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--spacing--sm);
+	margin-right: var(--spacing--md);
+	/* Holds the active-tab indicator, so the border sits under it. */
+	padding-bottom: var(--review-tab-bar--indicator-overhang);
+	border-bottom: var(--border);
+
+	> :global(.n8n-tabs) {
+		transform: translateY(var(--spacing--sm));
+	}
+}
+
+.detailBody {
+	display: flex;
+	flex: 1;
+	gap: var(--spacing--sm);
+	min-height: 0;
+	overflow: auto;
+	/* Inside the scroll area, so the content keeps clear of the scrollbar. */
+	padding: var(--spacing--sm) var(--spacing--md) 0 0;
+}
+
+.panel {
+	flex: 1;
+	min-width: 0;
+}
+
+.activityPanel {
+	flex: 1;
+	min-width: 0;
+	max-width: var(--review-activity--max-width, 45rem);
+	margin-inline: auto;
+}
+
+.descriptionCard {
+	@include activity-card;
+
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing--4xs);
+}
+
+.callout {
+	max-width: var(--review-callout--max-width, 34rem);
+}
+
+/* line up the summary's edges with the entry cards above it. */
+.closedCallout {
+	margin-inline: calc(-1 * var(--spacing--sm));
+}
+
+.closedCalloutContent {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing--5xs);
+}
+
+/* `pre-wrap` alone does not break a pasted URL, which is the one thing that could scroll the
+	card sideways. */
+.description {
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+}
+
+.decisionActions {
+	flex-shrink: 0;
+}
+
+@container review-detail (max-width: 44rem) {
+	.detailBody {
+		flex-direction: column;
+	}
+
+	/* Auto margins would stop the stacked column from stretching. */
+	.activityPanel {
+		margin-inline: 0;
+	}
+}
+</style>

package/src/reviews/components/WorkflowReviewStatusDot.vue

@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import type { WorkflowReviewRequestDecision, WorkflowReviewRequestState } from '@n8n/api-types';
+import { useI18n } from '@n8n/i18n';
+import { computed } from 'vue';
+
+import { getWorkflowReviewStatusDisplay } from '../workflowReviewStatus.utils';
+
+const props = withDefaults(
+	defineProps<{
+		state: WorkflowReviewRequestState;
+		decision: WorkflowReviewRequestDecision;
+		size?: 'small' | 'medium';
+		/**
+		 * Set where the parent already renders the status in text. The dot then
+		 * carries no accessible name, so the status is announced once, not twice.
+		 */
+		decorative?: boolean;
+	}>(),
+	{ size: 'medium', decorative: false },
+);
+
+const i18n = useI18n();
+
+const status = computed(() => getWorkflowReviewStatusDisplay(i18n, props.state, props.decision));
+</script>
+
+<template>
+	<div
+		:class="[$style.dot, $style[status.colorClass], size === 'small' && $style.small]"
+		data-test-id="workflow-review-request-status-dot"
+		v-bind="
+			decorative
+				? { 'aria-hidden': 'true' }
+				: { role: 'img', 'aria-label': `${status.stateLabel} | ${status.decisionLabel}` }
+		"
+	/>
+</template>
+
+<style module lang="scss">
+.dot {
+	flex-shrink: 0;
+	width: var(--font-size--3xs);
+	height: var(--font-size--3xs);
+	border-radius: 50%;
+}
+
+.small {
+	width: var(--spacing--2xs);
+	height: var(--spacing--2xs);
+}
+
+.pending {
+	background-color: var(--color--blue-500);
+}
+
+.changesRequested {
+	background-color: var(--color--yellow-500);
+}
+
+.approved {
+	background-color: var(--color--green-500);
+}
+
+.closed {
+	background-color: var(--color--neutral-500);
+}
+</style>

package/src/reviews/components/_activity-card.scss

@@ -0,0 +1,36 @@
+// Shared by the feed's entry cards and the description card above them.
+
+/* The negative margin cancels the list's inset so every avatar sits in one column, boxed or
+	not; the border comes out of the padding so carded text starts on that same column. */
+@mixin activity-card {
+	margin-inline: calc(-1 * var(--spacing--sm));
+	padding: var(--spacing--xs) calc(var(--spacing--sm) - var(--border-width, 1px));
+	border: var(--border);
+	border-radius: var(--radius--2xs);
+}
+
+@mixin activity-row {
+	display: flex;
+	align-items: flex-start;
+	gap: var(--spacing--2xs);
+}
+
+/* An avatar is shorter than a line of text, so the row's `flex-start` hangs it above the name.
+	Half the leading puts it back on that line — and only that line, so it stays put when a note
+	or a wrapped headline makes the row taller. Every entry kind must include this; without it
+	the avatar reads as sitting too high. */
+@mixin activity-avatar {
+	flex-shrink: 0;
+	margin-block-start: calc(
+		(var(--review-activity--line-height) - var(--review-activity--avatar-size)) / 2
+	);
+}
+
+/* The actor, the sentence and its timestamp read as one line, so every entry kind spaces
+	them by a word's worth. */
+@mixin activity-headline {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing--4xs);
+	flex-wrap: wrap;
+}

package/src/reviews/components/activity-entries/WorkflowReviewActivityActorAvatar.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { WorkflowReviewEligibleReviewer } from '@n8n/api-types';
+import { N8nAvatar, N8nIcon } from '@n8n/design-system';
+
+/**
+ * The avatar column of a feed entry that names a person: the actor's avatar, or a person
+ * silhouette when the actor was deleted.
+ */
+defineProps<{
+	actor: Pick<WorkflowReviewEligibleReviewer, 'firstName' | 'lastName'> | null;
+}>();
+</script>
+
+<template>
+	<N8nAvatar
+		v-if="actor"
+		size="xxsmall"
+		:class="$style.avatar"
+		:first-name="actor.firstName"
+		:last-name="actor.lastName"
+	/>
+	<!-- Decorative: the sentence beside it already says "Deleted user". -->
+	<div
+		v-else
+		:class="$style.deletedActor"
+		aria-hidden="true"
+		data-test-id="workflow-review-activity-deleted-actor"
+	>
+		<N8nIcon icon="circle-user-round" :size="16" color="text-light" />
+	</div>
+</template>
+
+<style lang="scss" module>
+@use '../activity-card' as *;
+
+.avatar {
+	@include activity-avatar;
+}
+
+/* Sized and centred exactly like the avatar, so the two columns cannot drift apart. */
+.deletedActor {
+	@include activity-avatar;
+
+	display: flex;
+	width: var(--review-activity--avatar-size);
+	height: var(--review-activity--avatar-size);
+	align-items: center;
+	justify-content: center;
+}
+</style>

package/src/reviews/components/activity-entries/WorkflowReviewActivityComment.test.ts

@@ -0,0 +1,103 @@
+import type { WorkflowReviewActivityEntry, WorkflowReviewActivityMessage } from '@n8n/api-types';
+import { createTestingPinia } from '@pinia/testing';
+import { createComponentRenderer } from '@n8n/frontend-test-utils';
+
+import WorkflowReviewActivityComment from './WorkflowReviewActivityComment.vue';
+
+const renderComponent = createComponentRenderer(WorkflowReviewActivityComment);
+
+function makeMessage(
+	overrides: Partial<WorkflowReviewActivityMessage> = {},
+): WorkflowReviewActivityMessage {
+	return {
+		id: 'msg-1',
+		body: 'Looks good to me',
+		createdBy: {
+			id: 'user-1',
+			email: 'ada@example.com',
+			firstName: 'Ada',
+			lastName: 'Lovelace',
+		},
+		createdAt: '2024-01-01T10:00:00.000Z',
+		updatedAt: null,
+		deletedAt: null,
+		...overrides,
+	};
+}
+
+function makeEntry(
+	messages: WorkflowReviewActivityMessage[] = [makeMessage()],
+): Extract<WorkflowReviewActivityEntry, { type: 'comment.created' }> {
+	return {
+		id: '1',
+		type: 'comment.created',
+		typeVersion: 1,
+		data: null,
+		createdBy: messages[0]?.createdBy ?? null,
+		createdAt: '2024-01-01T10:00:00.000Z',
+		messages,
+	};
+}
+
+describe('WorkflowReviewActivityComment', () => {
+	beforeEach(() => {
+		createTestingPinia();
+	});
+
+	it('renders the body, the author name and a machine-readable timestamp', () => {
+		const { getByTestId } = renderComponent({ props: { entry: makeEntry() } });
+
+		expect(getByTestId('workflow-review-activity-comment-body')).toHaveTextContent(
+			'Looks good to me',
+		);
+		expect(getByTestId('workflow-review-activity-comment-author')).toHaveTextContent(
+			'Ada Lovelace',
+		);
+		expect(getByTestId('workflow-review-activity-comment-time')).toHaveAttribute(
+			'datetime',
+			'2024-01-01T10:00:00.000Z',
+		);
+	});
+
+	it('falls back to the email when the author has no name', () => {
+		const { getByTestId } = renderComponent({
+			props: {
+				entry: makeEntry([
+					makeMessage({
+						createdBy: { id: 'user-1', email: 'ada@example.com', firstName: null, lastName: null },
+					}),
+				]),
+			},
+		});
+
+		expect(getByTestId('workflow-review-activity-comment-author')).toHaveTextContent(
+			'ada@example.com',
+		);
+	});
+
+	it('names a deleted author and shows a person silhouette where their avatar would be', () => {
+		const { getByTestId } = renderComponent({
+			props: { entry: makeEntry([makeMessage({ createdBy: null })]) },
+		});
+
+		expect(getByTestId('workflow-review-activity-comment-author')).toHaveTextContent(
+			'Deleted user',
+		);
+		expect(getByTestId('workflow-review-activity-deleted-actor')).toBeInTheDocument();
+	});
+
+	// Keys on `deletedAt`, not on a null body: a null body from any other writer
+	// must not read as a tombstone.
+	it('shows that a comment was deleted instead of its text', () => {
+		const { getByTestId, queryByTestId } = renderComponent({
+			props: {
+				entry: makeEntry([makeMessage({ body: null, deletedAt: '2024-01-02T10:00:00.000Z' })]),
+			},
+		});
+
+		expect(getByTestId('workflow-review-activity-comment-deleted')).toHaveTextContent(
+			'This comment was deleted.',
+		);
+		expect(queryByTestId('workflow-review-activity-comment-body')).not.toBeInTheDocument();
+	});
+});

package/src/reviews/components/activity-entries/WorkflowReviewActivityComment.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import type { WorkflowReviewActivityEntry, WorkflowReviewActivityMessage } from '@n8n/api-types';
+import { N8nText, N8nTimeAgo } from '@n8n/design-system';
+import { useI18n } from '@n8n/i18n';
+
+import { useRootStore } from '@n8n/stores/useRootStore';
+
+import { formatActorName } from '../../workflowReviews.utils';
+import WorkflowReviewActivityActorAvatar from './WorkflowReviewActivityActorAvatar.vue';
+
+defineProps<{
+	entry: Extract<WorkflowReviewActivityEntry, { type: 'comment.created' }>;
+}>();
+
+const i18n = useI18n();
+const rootStore = useRootStore();
+
+function authorName(message: WorkflowReviewActivityMessage): string {
+	return formatActorName(
+		message.createdBy,
+		i18n.baseText('workflowReviews.detail.activity.unknownAuthor'),
+	);
+}
+</script>
+
+<template>
+	<div :class="$style.entry">
+		<div v-for="message in entry.messages" :key="message.id" :class="$style.message">
+			<WorkflowReviewActivityActorAvatar :actor="message.createdBy" />
+			<div :class="$style.content">
+				<div :class="$style.header">
+					<N8nText
+						size="medium"
+						color="text-base"
+						:class="$style.line"
+						data-test-id="workflow-review-activity-comment-author"
+					>
+						{{ authorName(message) }}
+					</N8nText>
+					<N8nText size="medium" color="text-light">
+						<time
+							:datetime="message.createdAt"
+							data-test-id="workflow-review-activity-comment-time"
+							:class="$style.timeStamp"
+						>
+							<N8nTimeAgo :date="message.createdAt" :locale="rootStore.defaultLocale" />
+						</time>
+					</N8nText>
+				</div>
+				<N8nText
+					v-if="message.deletedAt"
+					size="small"
+					color="text-light"
+					:class="$style.deleted"
+					data-test-id="workflow-review-activity-comment-deleted"
+				>
+					{{ i18n.baseText('workflowReviews.detail.activity.comment.deleted') }}
+				</N8nText>
+				<N8nText
+					v-else
+					size="medium"
+					color="text-dark"
+					:class="[$style.body, $style.line]"
+					data-test-id="workflow-review-activity-comment-body"
+				>
+					{{ message.body }}
+				</N8nText>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" module>
+@use '../activity-card' as *;
+
+/* A comment is prose, so it gets the same card as a decision that carries a note. */
+.entry {
+	@include activity-card;
+
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing--xs);
+}
+
+.message {
+	@include activity-row;
+}
+
+.content {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing--3xs);
+	min-width: 0;
+}
+
+.header {
+	@include activity-headline;
+}
+
+.line {
+	line-height: var(--review-activity--line-height);
+}
+
+.timeStamp {
+	padding-left: var(--spacing--4xs);
+}
+
+.body {
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+}
+
+.deleted {
+	font-style: italic;
+}
+</style>