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

package/src/reviews/components/WorkflowReviewDecisionPopover.vue

@@ -0,0 +1,203 @@
+<script setup lang="ts">
+import { WORKFLOW_REVIEW_TEXT_MAX_LENGTH } from '@n8n/api-types';
+import { useToast } from '@n8n/composables/useToast';
+import { N8nButton, N8nIcon, N8nInput, N8nPopover, N8nTooltip } from '@n8n/design-system';
+import { useI18n } from '@n8n/i18n';
+import { storeToRefs } from 'pinia';
+import { computed, ref, useId } from 'vue';
+
+import { useReviewActivityStore } from '../reviewActivity.store';
+import type { WorkflowReviewDecisionInput } from '../workflowReviews.api';
+
+const props = defineProps<{
+	deciding: boolean;
+	viewerCanDecide: boolean;
+	viewerCanComment: boolean;
+	/** Why the viewer may not decide; empty when they may. */
+	ineligibilityHint: string;
+}>();
+
+const emit = defineEmits<{
+	decide: [input: WorkflowReviewDecisionInput];
+	'comment-posted': [];
+}>();
+
+const i18n = useI18n();
+const { showError } = useToast();
+const store = useReviewActivityStore();
+const { posting, decisionNote } = storeToRefs(store);
+
+const isOpen = ref(false);
+const noteInputId = useId();
+
+const note = computed(() => decisionNote.value.trim());
+
+// Every viewer who may decide may also comment, and a viewer who may not decide cannot open
+// the popover at all, so the last term only guards against those two rules drifting apart.
+const commentDisabled = computed(
+	() => posting.value || props.deciding || note.value.length === 0 || !props.viewerCanComment,
+);
+
+// A comment in flight leaves its text in the box on purpose, so without this the same text
+// goes out twice: once as the comment, once as the decision note.
+const decisionDisabled = computed(() => props.deciding || posting.value);
+
+function submitDecision(input: WorkflowReviewDecisionInput) {
+	isOpen.value = false;
+	emit('decide', input);
+}
+
+function onRequestChanges() {
+	submitDecision({ decision: 'changes_requested', note: note.value });
+}
+
+function onApprove() {
+	// The key is omitted rather than sent empty: the DTO rejects `''`.
+	submitDecision(
+		note.value ? { decision: 'approved', note: note.value } : { decision: 'approved' },
+	);
+}
+
+async function onComment() {
+	const body = note.value;
+
+	isOpen.value = false;
+	try {
+		// A comment that landed after the viewer moved on says nothing about the review they
+		// are reading now, so neither its note nor its tab may be touched.
+		if (!(await store.postComment(body))) return;
+
+		store.clearDecisionNote(body);
+		// The trigger sits outside the tab panel, so a comment posted from the Changes tab
+		// would otherwise land nowhere the viewer can see.
+		emit('comment-posted');
+	} catch (error) {
+		showError(error, i18n.baseText('workflowReviews.detail.activity.error.post'));
+	}
+}
+</script>
+
+<template>
+	<!-- 480px deviates from Figma's 440px on purpose: the three icon+label buttons do not fit
+		in 440px, and N8nPopover sets a fixed width, so the row would spill rather than wrap. -->
+	<N8nPopover
+		v-model:open="isOpen"
+		side="bottom"
+		align="end"
+		width="480px"
+		:enable-scrolling="false"
+		:content-class="$style.popover"
+	>
+		<template #trigger>
+			<!-- Wrapped only while the viewer may not decide: N8nTooltip does not forward attrs
+				on this branch, so the trigger props land on the span — which is what makes the
+				hint fire over a natively disabled button, and this trigger cannot open anything
+				anyway. An enabled trigger has to stay the bare button, or it loses `aria-expanded`
+				and the focus it gets back on close. -->
+			<span v-if="ineligibilityHint">
+				<N8nTooltip :content="ineligibilityHint" :show-after="300">
+					<N8nButton
+						size="small"
+						:disabled="deciding || !viewerCanDecide"
+						data-test-id="workflow-review-decision-trigger"
+					>
+						{{ i18n.baseText('workflowReviews.detail.decision.trigger') }}
+						<N8nIcon icon="chevron-down" />
+					</N8nButton>
+				</N8nTooltip>
+			</span>
+			<N8nButton
+				v-else
+				size="small"
+				:disabled="deciding || !viewerCanDecide"
+				data-test-id="workflow-review-decision-trigger"
+			>
+				{{ i18n.baseText('workflowReviews.detail.decision.trigger') }}
+				<N8nIcon icon="chevron-down" />
+			</N8nButton>
+		</template>
+		<template #content>
+			<div :class="$style.content" data-test-id="workflow-review-decision-popover">
+				<N8nInput
+					:id="noteInputId"
+					v-model="decisionNote"
+					:aria-label="i18n.baseText('workflowReviews.detail.decision.note.label')"
+					type="textarea"
+					:rows="3"
+					:maxlength="WORKFLOW_REVIEW_TEXT_MAX_LENGTH"
+					:placeholder="i18n.baseText('workflowReviews.detail.activity.composer.placeholder')"
+					:class="$style.input"
+					data-test-id="workflow-review-decision-note"
+				/>
+				<div :class="$style.actions">
+					<N8nButton
+						variant="outline"
+						size="small"
+						:disabled="commentDisabled"
+						data-test-id="workflow-review-decision-comment-button"
+						@click="onComment"
+					>
+						<template #icon>
+							<N8nIcon icon="message-square" />
+						</template>
+						{{ i18n.baseText('workflowReviews.detail.decision.comment') }}
+					</N8nButton>
+					<N8nTooltip
+						:disabled="!!note"
+						:content="i18n.baseText('workflowReviews.detail.decision.note.required')"
+						:show-after="300"
+					>
+						<N8nButton
+							variant="outline"
+							size="small"
+							:disabled="!note || decisionDisabled"
+							data-test-id="workflow-review-decision-request-changes-button"
+							@click="onRequestChanges"
+						>
+							<template #icon>
+								<N8nIcon icon="refresh-cw" />
+							</template>
+							{{ i18n.baseText('workflowReviews.detail.decision.requestChanges') }}
+						</N8nButton>
+					</N8nTooltip>
+					<N8nButton
+						variant="outline"
+						size="small"
+						:disabled="decisionDisabled"
+						data-test-id="workflow-review-decision-approve-button"
+						@click="onApprove"
+					>
+						<template #icon>
+							<N8nIcon icon="check" />
+						</template>
+						{{ i18n.baseText('workflowReviews.detail.decision.approveAndPublish') }}
+					</N8nButton>
+				</div>
+			</div>
+		</template>
+	</N8nPopover>
+</template>
+
+<style lang="scss" module>
+.popover {
+	padding: var(--spacing--xs);
+}
+
+.content {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing--xs);
+}
+
+.input {
+	:global(textarea) {
+		max-height: 50dvh;
+	}
+}
+
+.actions {
+	display: flex;
+	justify-content: flex-end;
+	gap: var(--spacing--2xs);
+}
+</style>

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

@@ -0,0 +1,206 @@
+import type {
+	WorkflowReviewRequestDetail,
+	WorkflowReviewRequestWorkflowDetail,
+} from '@n8n/api-types';
+import { createTestingPinia } from '@pinia/testing';
+import { createMemoryHistory, createRouter } from 'vue-router';
+
+import { createComponentRenderer } from '@n8n/frontend-test-utils';
+import { VIEWS } from '@n8n/frontend-constants/views';
+
+import WorkflowReviewDetailMetadata from './WorkflowReviewDetailMetadata.vue';
+
+const router = createRouter({
+	history: createMemoryHistory(),
+	routes: [
+		{
+			path: '/workflow/:workflowId',
+			name: VIEWS.WORKFLOW,
+			component: { template: '<div />' },
+		},
+	],
+});
+
+const renderComponent = createComponentRenderer(WorkflowReviewDetailMetadata, {
+	global: { plugins: [router], stubs: { RouterLink: false } },
+});
+
+function makeWorkflowDetail(
+	overrides: Partial<WorkflowReviewRequestWorkflowDetail> = {},
+): WorkflowReviewRequestWorkflowDetail {
+	return {
+		workflowId: 'wf-1',
+		workflowName: 'Payment Handler',
+		workflowVersionId: 'version-1',
+		pinnedVersion: null,
+		publishedVersionId: null,
+		baselineVersion: null,
+		...overrides,
+	};
+}
+
+const requester = {
+	id: 'requester-1',
+	email: 'requester@example.com',
+	firstName: 'Rita',
+	lastName: 'Requester',
+};
+
+const laterAuthor = {
+	id: 'author-2',
+	email: 'author@example.com',
+	firstName: 'Ada',
+	lastName: 'Author',
+};
+
+function makeDetail(
+	overrides: Partial<WorkflowReviewRequestDetail> = {},
+): WorkflowReviewRequestDetail {
+	return {
+		id: 'req-1',
+		projectId: 'proj-1',
+		title: 'Update Payment Handler',
+		requester,
+		// The backend always carries the requester in `authors` too.
+		authors: [{ ...requester }, laterAuthor],
+		reviewers: [
+			{
+				id: 'reviewer-1',
+				email: 'reviewer@example.com',
+				firstName: 'Riley',
+				lastName: 'Reviewer',
+			},
+		],
+		decision: 'pending',
+		state: 'open',
+		createdAt: '2024-01-01T00:00:00.000Z',
+		updatedAt: '2024-01-01T00:00:00.000Z',
+		description: null,
+		workflows: [makeWorkflowDetail()],
+		viewerCanDecide: true,
+		viewerDecisionIneligibilityReason: null,
+		viewerCanComment: true,
+		...overrides,
+	};
+}
+
+describe('WorkflowReviewDetailMetadata', () => {
+	beforeEach(() => {
+		createTestingPinia();
+	});
+
+	it('renders the status, people, and workflows', () => {
+		const { getByTestId, getByText, queryByText } = renderComponent({
+			props: { review: makeDetail() },
+		});
+
+		expect(getByTestId('workflow-review-detail-status-card')).toHaveTextContent(
+			'Open | Waiting for review',
+		);
+		expect(getByText('Riley Reviewer')).toBeInTheDocument();
+		expect(queryByText('reviewer@example.com')).not.toBeInTheDocument();
+		expect(getByText('Payment Handler')).toBeInTheDocument();
+	});
+
+	it('lists requested by, other authors, and reviewers in that order', () => {
+		const { getByTestId } = renderComponent({
+			props: { review: makeDetail() },
+		});
+
+		expect(getByTestId('workflow-review-detail-people-card').textContent).toMatch(
+			/^Requested by.*Rita Requester.*Other authors.*Ada Author.*Reviewers.*Riley Reviewer/s,
+		);
+	});
+
+	it('excludes the requester from other authors by id, not object identity', () => {
+		const { getByTestId } = renderComponent({
+			props: { review: makeDetail() },
+		});
+
+		expect(getByTestId('workflow-review-detail-other-authors')).not.toHaveTextContent(
+			'Rita Requester',
+		);
+	});
+
+	it('hides other authors when the requester is the only author', () => {
+		const { queryByTestId } = renderComponent({
+			props: { review: makeDetail({ authors: [{ ...requester }] }) },
+		});
+
+		expect(queryByTestId('workflow-review-detail-other-authors')).not.toBeInTheDocument();
+	});
+
+	it('falls back to a deleted-user message when the requester no longer exists', () => {
+		const { getByTestId } = renderComponent({
+			props: { review: makeDetail({ requester: null, authors: [laterAuthor] }) },
+		});
+
+		expect(getByTestId('workflow-review-detail-requester-deleted')).toHaveTextContent(
+			'Deleted user',
+		);
+		expect(getByTestId('workflow-review-detail-other-authors')).toHaveTextContent('Ada Author');
+	});
+
+	it('pairs the closed state with an approval decision', () => {
+		const { getByTestId } = renderComponent({
+			props: { review: makeDetail({ state: 'closed', decision: 'approved' }) },
+		});
+
+		expect(getByTestId('workflow-review-detail-status-card')).toHaveTextContent(
+			'Closed | Approved',
+		);
+	});
+
+	// Nobody is waiting on a closed review, so an undecided close reads "No decision".
+	it('pairs the closed state with a pending decision as No decision', () => {
+		const { getByTestId } = renderComponent({
+			props: { review: makeDetail({ state: 'closed', decision: 'pending' }) },
+		});
+
+		expect(getByTestId('workflow-review-detail-status-card')).toHaveTextContent(
+			'Closed | No decision',
+		);
+	});
+
+	it('pairs the closed state with a changes-requested decision', () => {
+		const { getByTestId } = renderComponent({
+			props: { review: makeDetail({ state: 'closed', decision: 'changes_requested' }) },
+		});
+
+		expect(getByTestId('workflow-review-detail-status-card')).toHaveTextContent(
+			'Closed | Changes requested',
+		);
+	});
+
+	it('pairs the open state with a changes-requested decision', () => {
+		const { getByTestId } = renderComponent({
+			props: { review: makeDetail({ state: 'open', decision: 'changes_requested' }) },
+		});
+
+		expect(getByTestId('workflow-review-detail-status-card')).toHaveTextContent(
+			'Open | Changes requested',
+		);
+	});
+
+	it('links each workflow to the editor', () => {
+		const { getByTestId } = renderComponent({
+			props: { review: makeDetail() },
+		});
+
+		expect(getByTestId('workflow-review-detail-workflow-link')).toHaveAttribute(
+			'href',
+			'/workflow/wf-1',
+		);
+	});
+
+	it('hides the changes card when there are no workflows', () => {
+		const { getByTestId, queryByTestId } = renderComponent({
+			props: { review: makeDetail({ reviewers: [], workflows: [] }) },
+		});
+
+		expect(getByTestId('workflow-review-detail-no-reviewers')).toHaveTextContent(
+			'No reviewers assigned.',
+		);
+		expect(queryByTestId('workflow-review-detail-changes-card')).not.toBeInTheDocument();
+	});
+});

package/src/reviews/components/WorkflowReviewDetailMetadata.vue

@@ -0,0 +1,245 @@
+<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', {
+							adjustToNumber: detail.workflows.length,
+						})
+					}}
+				</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>