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

package/src/reviews/components/WorkflowReviewChangesSection.vue

@@ -0,0 +1,219 @@
+<script setup lang="ts">
+import type {
+	WorkflowReviewRequestDecision,
+	WorkflowReviewRequestState,
+	WorkflowReviewRequestWorkflowDetail,
+	WorkflowReviewVersionSnapshot,
+} from '@n8n/api-types';
+import { N8nCallout, N8nText } from '@n8n/design-system';
+import { useI18n } from '@n8n/i18n';
+import isEqual from 'lodash/isEqual';
+import omit from 'lodash/omit';
+import { computed } from 'vue';
+import { componentRegistry } from '@n8n/frontend-module-sdk';
+
+import { getVersionLabel } from '@n8n/composables/useWorkflowVersionLabel';
+
+const WorkflowDiffView = computed(() => componentRegistry.get('workflow-diff'));
+
+const props = defineProps<{
+	workflow: WorkflowReviewRequestWorkflowDetail;
+	state: WorkflowReviewRequestState;
+	decision: WorkflowReviewRequestDecision;
+}>();
+
+const i18n = useI18n();
+
+// Only approval freezes a baseline, so an approved review diffs against what was
+// published back then; a review closed any other way has nothing to diff against.
+const isApproved = computed(() => props.state === 'closed' && props.decision === 'approved');
+const isClosedWithoutApproval = computed(
+	() => props.state === 'closed' && props.decision !== 'approved',
+);
+
+/**
+ * Label each side the way version history does, falling back to a short id.
+ * Falsy rather than nullish: the publish endpoints accept `name: ""`.
+ */
+const versionLabel = (snapshot: WorkflowReviewVersionSnapshot) =>
+	getVersionLabel({ workflowHistory: snapshot });
+
+/**
+ * A snapshot minus its identity and metadata — i.e. everything the diff renders.
+ * Derived by omission rather than an explicit field list to avoid drift; renaming
+ * a version must not read as a change.
+ */
+function contentOf(snapshot: WorkflowReviewVersionSnapshot) {
+	return omit(snapshot, ['versionId', 'name', 'createdAt']);
+}
+
+const hasChanges = computed(() => {
+	const { pinnedVersion, baselineVersion } = props.workflow;
+
+	if (!pinnedVersion) return false;
+	// No baseline means first publish: everything is a change.
+	if (!baselineVersion) return true;
+	if (pinnedVersion.versionId === baselineVersion.versionId) return false;
+
+	return !isEqual(contentOf(baselineVersion), contentOf(pinnedVersion));
+});
+
+// The dots track publish status, which approval flips: the approved version is
+// the published one now, and the baseline it replaced no longer is.
+const sourceDotClass = computed(() =>
+	isApproved.value ? 'statusDotSuperseded' : 'statusDotPublished',
+);
+const targetDotClass = computed(() =>
+	isApproved.value ? 'statusDotPublished' : 'statusDotInReview',
+);
+
+const noChangesText = computed(() =>
+	i18n.baseText(
+		isApproved.value
+			? 'workflowReviews.changes.closed.noChanges'
+			: 'workflowReviews.changes.noChanges',
+	),
+);
+const sourceEmptyText = computed(() =>
+	i18n.baseText(
+		isApproved.value
+			? 'workflowReviews.changes.closed.firstPublish.sourceEmpty'
+			: 'workflowReviews.changes.firstPublish.sourceEmpty',
+	),
+);
+
+const sourceLabel = computed(() =>
+	props.workflow.baselineVersion
+		? i18n.baseText(
+				isApproved.value
+					? 'workflowReviews.changes.closed.sourceLabel'
+					: 'workflowReviews.changes.sourceLabel',
+				{ interpolate: { version: versionLabel(props.workflow.baselineVersion) } },
+			)
+		: undefined,
+);
+const targetLabel = computed(() =>
+	props.workflow.pinnedVersion
+		? i18n.baseText(
+				isApproved.value
+					? 'workflowReviews.changes.closed.targetLabel'
+					: 'workflowReviews.changes.targetLabel',
+				{ interpolate: { version: versionLabel(props.workflow.pinnedVersion) } },
+			)
+		: undefined,
+);
+</script>
+
+<template>
+	<N8nCallout
+		v-if="isClosedWithoutApproval"
+		theme="info"
+		:class="$style.callout"
+		data-test-id="workflow-review-changes-closed-without-approval"
+	>
+		{{ i18n.baseText('workflowReviews.changes.closedWithoutApproval') }}
+	</N8nCallout>
+	<N8nCallout
+		v-else-if="!workflow.pinnedVersion"
+		theme="warning"
+		:class="$style.callout"
+		data-test-id="workflow-review-changes-version-unavailable"
+	>
+		{{ i18n.baseText('workflowReviews.changes.versionUnavailable.body') }}
+	</N8nCallout>
+	<N8nCallout
+		v-else-if="!hasChanges"
+		theme="info"
+		:class="$style.callout"
+		data-test-id="workflow-review-changes-no-changes"
+	>
+		{{ noChangesText }}
+	</N8nCallout>
+	<div v-else :class="$style.diff" data-test-id="workflow-review-changes-diff">
+		<component
+			:is="WorkflowDiffView"
+			:source-snapshot="workflow.baselineVersion ?? undefined"
+			:workflow-id="workflow.workflowId"
+			:workflow-name="workflow.workflowName"
+			:target-snapshot="workflow.pinnedVersion ?? undefined"
+			:source-label="sourceLabel"
+			:target-label="targetLabel"
+			show-fullscreen-button
+		>
+			<!-- Only when a baseline exists: with no prior published version there is
+				no publish status to represent. -->
+			<template v-if="workflow.baselineVersion" #sourceLabel>
+				<span :class="$style.versionBadge" data-test-id="workflow-review-changes-source-label">
+					<span :class="[$style.statusDot, $style[sourceDotClass]]" />
+					<N8nText color="text-dark" size="small" compact>{{ sourceLabel }}</N8nText>
+				</span>
+			</template>
+			<template #targetLabel>
+				<span :class="$style.versionBadge" data-test-id="workflow-review-changes-target-label">
+					<span :class="[$style.statusDot, $style[targetDotClass]]" />
+					<N8nText color="text-dark" size="small" compact>{{ targetLabel }}</N8nText>
+				</span>
+			</template>
+			<template #sourceEmptyText>
+				<N8nText size="small" color="text-base">{{ sourceEmptyText }}</N8nText>
+			</template>
+		</component>
+	</div>
+</template>
+
+<style module lang="scss">
+.callout {
+	max-width: var(--review-callout--max-width, 34rem);
+	margin-top: var(--spacing--5xs);
+}
+
+.versionBadge {
+	/* Keep the existing Reviews badge sizes when the root font changes. */
+	--review-version-badge--spacing: 12px;
+	--review-version-badge--radius: 4px;
+	--review-version-badge--height: 30px;
+	--review-version-badge--gap: 8px;
+	position: absolute;
+	top: var(--review-version-badge--spacing);
+	left: var(--review-version-badge--spacing);
+	z-index: 1;
+	border-radius: var(--review-version-badge--radius);
+	border: var(--border-width) solid var(--color--foreground--tint-1);
+	background: var(--color--foreground--tint-2);
+	display: flex;
+	height: var(--review-version-badge--height);
+	padding: 0 var(--review-version-badge--spacing);
+	align-items: center;
+	gap: var(--review-version-badge--gap);
+	align-self: stretch;
+}
+
+.statusDot {
+	height: var(--spacing--2xs);
+	width: var(--spacing--2xs);
+	border-radius: 50%;
+	display: inline-block;
+	flex-shrink: 0;
+}
+
+.statusDotPublished {
+	background-color: var(--color--mint-600);
+}
+
+.statusDotInReview {
+	background-color: var(--color--yellow-500);
+}
+
+.statusDotSuperseded {
+	background-color: var(--color--text--tint-1);
+}
+
+.diff {
+	height: 100%;
+	min-height: 0;
+	border: var(--border);
+	border-radius: var(--radius--2xs);
+	overflow: hidden;
+	margin-top: var(--spacing--5xs);
+}
+</style>

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

@@ -0,0 +1,175 @@
+import { WORKFLOW_REVIEW_TEXT_MAX_LENGTH } from '@n8n/api-types';
+import { createTestingPinia } from '@pinia/testing';
+import userEvent from '@testing-library/user-event';
+import { waitFor } from '@testing-library/vue';
+import { createComponentRenderer, mockedStore } from '@n8n/frontend-test-utils';
+import { createDeferredPromise } from '@n8n/utils/promise/deferred-promise';
+
+import { useReviewActivityStore } from '../reviewActivity.store';
+import WorkflowReviewCommentComposer from './WorkflowReviewCommentComposer.vue';
+
+const showError = vi.fn();
+
+vi.mock('@n8n/composables/useToast', () => ({
+	useToast: () => ({ showError }),
+}));
+
+/**
+ * The real N8nChatInput is mounted on purpose: `submitDisabled` overrides the
+ * component's whole internal send gate, which a stub cannot show.
+ */
+const renderComponent = createComponentRenderer(WorkflowReviewCommentComposer);
+
+describe('WorkflowReviewCommentComposer', () => {
+	let store: ReturnType<typeof mockedStore<typeof useReviewActivityStore>>;
+
+	beforeEach(() => {
+		createTestingPinia();
+		showError.mockReset();
+		store = mockedStore(useReviewActivityStore);
+		store.posting = false;
+		store.draft = '';
+		store.postComment.mockResolvedValue(true);
+	});
+
+	it('keeps a half-typed comment when the composer is unmounted and shown again', async () => {
+		// The Changes tab is a `v-if`, so it unmounts this component.
+		const first = renderComponent({ props: { canComment: true } });
+		await userEvent.type(first.getByRole('textbox'), 'half a thought');
+		first.unmount();
+
+		const second = renderComponent({ props: { canComment: true } });
+
+		expect(second.getByRole('textbox')).toHaveValue('half a thought');
+	});
+
+	it('clears a sent draft when a tab switch unmounts its composer', async () => {
+		const pending = createDeferredPromise<boolean>();
+		store.postComment.mockReturnValueOnce(pending.promise);
+		store.draft = 'Sent comment';
+		const first = renderComponent({ props: { canComment: true } });
+		await userEvent.click(first.getByTestId('send-message-button'));
+		first.unmount();
+		pending.resolve(true);
+		await waitFor(() => expect(store.draft).toBe(''));
+		const second = renderComponent({ props: { canComment: true } });
+		expect(second.getByRole('textbox')).toHaveValue('');
+	});
+
+	it('reports a failed post after a tab switch unmounts the composer', async () => {
+		const pending = createDeferredPromise<boolean>();
+		store.postComment.mockReturnValueOnce(pending.promise);
+		store.draft = 'Sent comment';
+		const { getByTestId, unmount } = renderComponent({ props: { canComment: true } });
+		await userEvent.click(getByTestId('send-message-button'));
+		unmount();
+		pending.reject(new Error('timeout'));
+		await pending.promise.catch(() => {});
+		expect(showError).toHaveBeenCalledWith(expect.any(Error), 'Could not post comment');
+		expect(store.draft).toBe('Sent comment');
+	});
+
+	it('disables the send button and the textarea when the viewer cannot comment', () => {
+		const { getByTestId, getByRole } = renderComponent({ props: { canComment: false } });
+
+		expect(getByTestId('send-message-button')).toBeDisabled();
+		expect(getByRole('textbox')).toBeDisabled();
+	});
+
+	it('disables only the send button while the draft is empty', () => {
+		const { getByTestId, getByRole } = renderComponent({ props: { canComment: true } });
+
+		expect(getByTestId('send-message-button')).toBeDisabled();
+		expect(getByRole('textbox')).not.toBeDisabled();
+	});
+
+	it('enables the send button once the draft has content', async () => {
+		const { getByTestId, getByRole } = renderComponent({ props: { canComment: true } });
+
+		await userEvent.type(getByRole('textbox'), 'Nice work');
+
+		await waitFor(() => expect(getByTestId('send-message-button')).not.toBeDisabled());
+	});
+
+	it('disables the send button once the draft goes over the length limit', async () => {
+		const { getByTestId, getByRole } = renderComponent({ props: { canComment: true } });
+		const textarea = getByRole('textbox');
+
+		textarea.focus();
+		await userEvent.paste('x'.repeat(WORKFLOW_REVIEW_TEXT_MAX_LENGTH));
+		await waitFor(() => expect(getByTestId('send-message-button')).not.toBeDisabled());
+		// Shift+Enter inserts the newline itself, so `maxlength` on the textarea does not stop it
+		await userEvent.keyboard('{Shift>}{Enter}{/Shift}');
+
+		expect(textarea).toHaveValue(`${'x'.repeat(WORKFLOW_REVIEW_TEXT_MAX_LENGTH)}\n`);
+		await waitFor(() => expect(getByTestId('send-message-button')).toBeDisabled());
+	});
+
+	it('posts the draft and clears it', async () => {
+		const { getByTestId, getByRole } = renderComponent({ props: { canComment: true } });
+		const textarea = getByRole('textbox');
+
+		await userEvent.type(textarea, 'Nice work');
+		await userEvent.click(getByTestId('send-message-button'));
+
+		expect(store.postComment).toHaveBeenCalledWith('Nice work');
+		await waitFor(() => expect(textarea).toHaveValue(''));
+	});
+
+	it('keeps text typed while the previous comment was still posting', async () => {
+		let resolvePost!: () => void;
+		store.postComment.mockImplementation(
+			async () =>
+				await new Promise<boolean>((resolve) => {
+					resolvePost = () => resolve(true);
+				}),
+		);
+		const { getByTestId, getByRole } = renderComponent({ props: { canComment: true } });
+		const textarea = getByRole('textbox');
+
+		await userEvent.type(textarea, 'Nice work');
+		await userEvent.click(getByTestId('send-message-button'));
+		// The textarea stays enabled during the request, so the user keeps typing
+		await userEvent.type(textarea, ' and the next one');
+		expect(store.postComment).toHaveBeenCalledWith('Nice work');
+		resolvePost();
+		await new Promise(setImmediate);
+
+		expect(textarea).toHaveValue('Nice work and the next one');
+	});
+
+	it('keeps the draft when the post it was waiting on belonged to another review', async () => {
+		let resolvePost!: () => void;
+		store.postComment.mockImplementation(
+			async () =>
+				await new Promise<boolean>((resolve) => {
+					// Stale: the viewer moved to another review while this was in flight.
+					resolvePost = () => resolve(false);
+				}),
+		);
+		const { getByTestId, getByRole } = renderComponent({ props: { canComment: true } });
+		const textarea = getByRole('textbox');
+
+		await userEvent.type(textarea, 'Nice work');
+		await userEvent.click(getByTestId('send-message-button'));
+		resolvePost();
+		await new Promise(setImmediate);
+
+		// Identical text, so only the stale result can keep it from being cleared.
+		expect(textarea).toHaveValue('Nice work');
+	});
+
+	it('keeps the draft and surfaces an error when posting fails', async () => {
+		store.postComment.mockRejectedValue(new Error('boom'));
+		const { getByTestId, getByRole } = renderComponent({ props: { canComment: true } });
+		const textarea = getByRole('textbox');
+
+		await userEvent.type(textarea, 'Nice work');
+		await userEvent.click(getByTestId('send-message-button'));
+
+		await waitFor(() =>
+			expect(showError).toHaveBeenCalledWith(expect.any(Error), 'Could not post comment'),
+		);
+		expect(textarea).toHaveValue('Nice work');
+	});
+});

package/src/reviews/components/WorkflowReviewCommentComposer.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { WORKFLOW_REVIEW_TEXT_MAX_LENGTH } from '@n8n/api-types';
+import { N8nChatInput } from '@n8n/design-system';
+import { useI18n } from '@n8n/i18n';
+import { useToast } from '@n8n/composables/useToast';
+import { storeToRefs } from 'pinia';
+import { computed } from 'vue';
+
+import { useReviewActivityStore } from '../reviewActivity.store';
+
+const props = defineProps<{ canComment: boolean }>();
+
+const i18n = useI18n();
+const { showError } = useToast();
+const store = useReviewActivityStore();
+const { posting, draft } = storeToRefs(store);
+
+// The full condition, not just `posting`: N8nChatInput uses `submitDisabled ?? …`,
+// so a bare `false` would replace its own empty/over-limit/disabled gate.
+const submitDisabled = computed(
+	() =>
+		posting.value ||
+		draft.value.trim().length === 0 ||
+		draft.value.length > WORKFLOW_REVIEW_TEXT_MAX_LENGTH ||
+		!props.canComment,
+);
+
+async function onSubmit() {
+	const submitted = draft.value;
+	const body = submitted.trim();
+	if (!body) return;
+
+	try {
+		// A stale post belongs to the review the viewer left, so its completion must not
+		// touch the draft they are typing now, even if the two strings happen to match.
+		const posted = await store.postComment(body);
+		// Don't clear text typed while the post was in flight.
+		if (posted && draft.value === submitted) draft.value = '';
+	} catch (error) {
+		showError(error, i18n.baseText('workflowReviews.detail.activity.error.post'));
+	}
+}
+</script>
+
+<template>
+	<!-- Implicit label: the textarea has no id to point a `for` at, and
+		`inheritAttrs: false` would send an aria-label to the wrapper instead. -->
+	<label :class="$style.composer">
+		<span :class="$style.srOnly">
+			{{ i18n.baseText('workflowReviews.detail.activity.composer.label') }}
+		</span>
+		<N8nChatInput
+			v-model="draft"
+			layout="adaptive"
+			:max-length="WORKFLOW_REVIEW_TEXT_MAX_LENGTH"
+			:placeholder="i18n.baseText('workflowReviews.detail.activity.composer.placeholder')"
+			refocus-after-send
+			:disabled="!canComment"
+			:disabled-tooltip="i18n.baseText('workflowReviews.detail.activity.composer.notAllowed')"
+			:submit-disabled="submitDisabled"
+			data-test-id="workflow-review-comment-composer"
+			@submit="onSubmit"
+		/>
+	</label>
+</template>
+
+<style lang="scss" module>
+.composer {
+	display: block;
+}
+
+.srOnly {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+</style>