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

package/src/reviews/components/WorkflowReviewDetailMetadata.vue

@@ -0,0 +1,241 @@
+<script setup lang="ts">
+import type { WorkflowReviewInboxItem, WorkflowReviewRequestDetail } from '@n8n/api-types';
+import { N8nAvatar, N8nCard, N8nIcon, N8nLink, N8nText } from '@n8n/design-system';
+import { useI18n } from '@n8n/i18n';
+import { computed } from 'vue';
+
+import { VIEWS } from '@n8n/frontend-constants/views';
+import { formatUserDisplayName } from '../workflowReviews.utils';
+import { getWorkflowReviewStatusDisplay } from '../workflowReviewStatus.utils';
+import WorkflowReviewStatusDot from './WorkflowReviewStatusDot.vue';
+
+const props = defineProps<{
+	review: WorkflowReviewInboxItem | WorkflowReviewRequestDetail;
+}>();
+
+const i18n = useI18n();
+
+const detail = computed<WorkflowReviewRequestDetail | null>(() =>
+	'workflows' in props.review ? props.review : null,
+);
+
+// Authors include the requester, who already has their own section above.
+const otherAuthors = computed(() =>
+	props.review.authors.filter((author) => author.id !== props.review.requester?.id),
+);
+
+const statusSummary = computed(() =>
+	getWorkflowReviewStatusDisplay(i18n, props.review.state, props.review.decision),
+);
+</script>
+
+<template>
+	<aside :class="$style.metadata" data-test-id="workflow-review-detail-metadata">
+		<N8nCard :class="$style.card" data-test-id="workflow-review-detail-status-card">
+			<template #header>
+				<N8nText bold color="text-light" size="medium">
+					{{ i18n.baseText('workflowReviews.detail.metadata.status') }}
+				</N8nText>
+			</template>
+			<div :class="$style.status">
+				<WorkflowReviewStatusDot :state="review.state" :decision="review.decision" decorative />
+				<N8nText size="medium">
+					{{ statusSummary.stateLabel }}
+					<span aria-hidden="true" :class="$style.statusSeparator">|</span>
+					{{ statusSummary.decisionLabel }}
+				</N8nText>
+			</div>
+		</N8nCard>
+
+		<N8nCard
+			:class="[$style.card, $style.peopleCard]"
+			data-test-id="workflow-review-detail-people-card"
+		>
+			<div :class="$style.section">
+				<N8nText bold color="text-light" size="medium">
+					{{ i18n.baseText('workflowReviews.detail.metadata.requestedBy') }}
+				</N8nText>
+				<div v-if="review.requester" :class="$style.person">
+					<N8nAvatar
+						:first-name="review.requester.firstName"
+						:last-name="review.requester.lastName"
+						size="xsmall"
+					/>
+					<N8nText size="medium">{{ formatUserDisplayName(review.requester) }}</N8nText>
+				</div>
+				<N8nText
+					v-else
+					color="text-light"
+					size="medium"
+					data-test-id="workflow-review-detail-requester-deleted"
+				>
+					{{ i18n.baseText('workflowReviews.detail.metadata.requesterDeleted') }}
+				</N8nText>
+			</div>
+
+			<div
+				v-if="otherAuthors.length > 0"
+				:class="$style.section"
+				data-test-id="workflow-review-detail-other-authors"
+			>
+				<N8nText bold color="text-light" size="medium">
+					{{ i18n.baseText('workflowReviews.detail.metadata.otherAuthors') }}
+				</N8nText>
+				<div v-for="author in otherAuthors" :key="author.id" :class="$style.person">
+					<N8nAvatar :first-name="author.firstName" :last-name="author.lastName" size="xsmall" />
+					<N8nText size="medium">{{ formatUserDisplayName(author) }}</N8nText>
+				</div>
+			</div>
+
+			<div :class="$style.section">
+				<N8nText bold color="text-light" size="medium">
+					{{ i18n.baseText('workflowReviews.detail.metadata.reviewers') }}
+				</N8nText>
+				<div v-for="reviewer in review.reviewers" :key="reviewer.id" :class="$style.person">
+					<N8nAvatar
+						:first-name="reviewer.firstName"
+						:last-name="reviewer.lastName"
+						size="xsmall"
+					/>
+					<N8nText size="medium">{{ formatUserDisplayName(reviewer) }}</N8nText>
+				</div>
+				<N8nText
+					v-if="review.reviewers.length === 0"
+					color="text-light"
+					size="medium"
+					data-test-id="workflow-review-detail-no-reviewers"
+				>
+					{{ i18n.baseText('workflowReviews.detail.metadata.noReviewers') }}
+				</N8nText>
+			</div>
+		</N8nCard>
+
+		<N8nCard
+			v-if="detail?.workflows.length"
+			:class="$style.card"
+			data-test-id="workflow-review-detail-changes-card"
+		>
+			<template #header>
+				<N8nText bold color="text-light" size="medium">
+					{{ i18n.baseText('workflowReviews.detail.metadata.workflow') }}
+				</N8nText>
+			</template>
+			<div :class="$style.workflows">
+				<N8nLink
+					v-for="workflow in detail.workflows"
+					:key="workflow.workflowId"
+					:to="{ name: VIEWS.WORKFLOW, params: { workflowId: workflow.workflowId } }"
+					theme="text"
+					size="medium"
+					:class="$style.workflow"
+					data-test-id="workflow-review-detail-workflow-link"
+				>
+					<N8nIcon icon="workflow" size="medium" :class="$style.workflowIcon" />
+					<span :class="$style.workflowName">{{ workflow.workflowName }}</span>
+				</N8nLink>
+			</div>
+		</N8nCard>
+	</aside>
+</template>
+
+<style module lang="scss">
+.metadata {
+	position: sticky;
+	top: 0;
+	align-self: flex-start;
+	display: flex;
+	flex: 0 0 min(18rem, 30%);
+	flex-direction: column;
+	gap: var(--spacing--2xs);
+	min-width: 14rem;
+	padding-top: var(--spacing--5xs);
+}
+
+.card {
+	--card--padding: var(--spacing--xs);
+	--n8n--card-body--gap: var(--spacing--2xs);
+
+	align-items: stretch;
+	border-color: var(--border-color);
+	background-color: transparent;
+
+	> div {
+		gap: var(--spacing--4xs);
+	}
+}
+
+.status {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing--2xs);
+}
+
+.section,
+.workflows {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing--2xs);
+	min-width: 0;
+}
+
+.statusSeparator {
+	margin-inline: var(--spacing--3xs);
+	color: var(--text-color--subtler);
+}
+
+.peopleCard {
+	--n8n--card-body--gap: var(--spacing--sm);
+}
+
+.person {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing--2xs);
+	min-width: 0;
+	/* Names wrap at spaces; an email breaks mid-word only when it does not fit. */
+	overflow-wrap: anywhere;
+}
+
+.workflow {
+	display: flex;
+	width: 100%;
+	min-width: 0;
+
+	> span,
+	> span > span {
+		display: flex;
+		flex: 1;
+		align-items: flex-start;
+		min-width: 0;
+	}
+}
+
+.workflowName {
+	flex: 1;
+	min-width: 0;
+	/* A name with no spaces still has to break somewhere. */
+	overflow-wrap: anywhere;
+}
+
+.workflowIcon {
+	flex-shrink: 0;
+	margin-right: var(--spacing--4xs);
+	/* Optically centre the icon on the first line of text. */
+	margin-top: calc((1lh - 1em) / 2);
+}
+
+@media (max-width: 75rem) {
+	.metadata {
+		flex-basis: 15rem;
+		min-width: 12rem;
+	}
+}
+
+@container review-detail (max-width: 44rem) {
+	.metadata {
+		flex-basis: auto;
+		width: 100%;
+		min-width: 0;
+	}
+}
+</style>

package/src/reviews/components/WorkflowReviewDetailTabs.decisionNote.test.ts

@@ -0,0 +1,90 @@
+import type { WorkflowReviewRequestDetail } from '@n8n/api-types';
+import { createTestingPinia } from '@pinia/testing';
+import userEvent from '@testing-library/user-event';
+import { createComponentRenderer } from '@n8n/frontend-test-utils';
+
+import { useReviewActivityStore } from '../reviewActivity.store';
+import WorkflowReviewDetailTabs from './WorkflowReviewDetailTabs.vue';
+
+/**
+ * The real decision popover is kept, so this pins the two facts the draft note depends on:
+ * it lives in the store, and its trigger sits outside the tab panel that unmounts.
+ * Reka UI popovers do not open in jsdom, so its primitives render inline instead.
+ */
+const rekaStubs = {
+	PopoverRoot: { template: '<div><slot /></div>' },
+	PopoverTrigger: { template: '<div><slot /></div>' },
+	PopoverPortal: { template: '<div><slot /></div>' },
+	PopoverContent: { template: '<div><slot /></div>' },
+};
+
+const childStubs = {
+	WorkflowReviewActivityFeed: { template: '<div><slot name="header" /></div>' },
+	WorkflowReviewChangesSection: { template: '<div />' },
+	WorkflowReviewCommentComposer: { template: '<div />' },
+	WorkflowReviewDetailMetadata: { template: '<aside />' },
+};
+
+const renderComponent = createComponentRenderer(WorkflowReviewDetailTabs, {
+	global: { stubs: { ...rekaStubs, ...childStubs } },
+});
+
+const review: WorkflowReviewRequestDetail = {
+	id: 'req-1',
+	projectId: 'proj-1',
+	title: 'Needs review',
+	requester: null,
+	authors: [],
+	reviewers: [],
+	decision: 'pending',
+	state: 'open',
+	createdAt: '2024-01-01T00:00:00.000Z',
+	updatedAt: '2024-01-01T00:00:00.000Z',
+	description: null,
+	workflows: [],
+	viewerCanDecide: true,
+	viewerDecisionIneligibilityReason: null,
+	viewerCanComment: true,
+};
+
+describe('WorkflowReviewDetailTabs decision note', () => {
+	beforeEach(() => {
+		createTestingPinia();
+	});
+
+	it('keeps a half-written decision note across a tab switch', async () => {
+		const { getByTestId, rerender } = renderComponent({
+			props: { review, tab: 'activity', deciding: false },
+		});
+
+		await userEvent.type(getByTestId('workflow-review-decision-note'), 'Half a thought');
+
+		await rerender({ tab: 'changes' });
+		await rerender({ tab: 'activity' });
+
+		expect(getByTestId('workflow-review-decision-note')).toHaveValue('Half a thought');
+	});
+
+	// The two facts that make the note survive: it is typed into the store, and the popover
+	// sits outside the panel the tab switch unmounts. Asserted separately because either one
+	// alone still reads back the note above.
+	it('holds the note in the store rather than in the popover', async () => {
+		const { getByTestId } = renderComponent({
+			props: { review, tab: 'activity', deciding: false },
+		});
+
+		await userEvent.type(getByTestId('workflow-review-decision-note'), 'Half a thought');
+
+		expect(useReviewActivityStore().decisionNote).toBe('Half a thought');
+	});
+
+	it('keeps the decision popover out of the tab panel', () => {
+		const { getByTestId } = renderComponent({
+			props: { review, tab: 'activity', deciding: false },
+		});
+
+		expect(getByTestId('workflow-review-activity-panel')).not.toContainElement(
+			getByTestId('workflow-review-decision-note'),
+		);
+	});
+});