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

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>

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

@@ -0,0 +1,288 @@
+import { useToast } from '@n8n/composables/useToast';
+import { createTestingPinia } from '@pinia/testing';
+import userEvent from '@testing-library/user-event';
+import { createComponentRenderer, mockedStore, waitAllPromises } from '@n8n/frontend-test-utils';
+import { createDeferredPromise } from '@n8n/utils/promise/deferred-promise';
+
+import { useReviewActivityStore } from '../reviewActivity.store';
+import WorkflowReviewDecisionPopover from './WorkflowReviewDecisionPopover.vue';
+
+vi.mock('@n8n/composables/useToast', () => ({
+	useToast: vi.fn(),
+}));
+
+/**
+ * Reka UI popovers do not open in jsdom, so the four primitives N8nPopover imports are
+ * stubbed to render inline. Copied rather than imported: the design system keeps its own
+ * set private. Reka's trigger machinery goes with them, hence the open button standing in
+ * for it — everything after that is the component's own `v-model:open`.
+ */
+const rekaStubs = {
+	PopoverRoot: {
+		props: ['open'],
+		emits: ['update:open'],
+		template: `
+			<div :data-open="open" data-test-id="popover-root">
+				<button data-test-id="open-popover" @click="$emit('update:open', true)" />
+				<slot />
+			</div>`,
+	},
+	PopoverTrigger: { template: '<div><slot /></div>' },
+	PopoverPortal: { template: '<div><slot /></div>' },
+	PopoverContent: { template: '<div><slot /></div>' },
+};
+
+// The real tooltip renders its content in a portal on hover, which jsdom cannot exercise;
+// expose the bindings as attributes instead.
+const tooltipStub = {
+	N8nTooltip: {
+		props: ['disabled', 'content'],
+		template:
+			'<div data-test-id="decision-tooltip" :data-disabled="disabled" :data-content="content"><slot /></div>',
+	},
+};
+
+const renderComponent = createComponentRenderer(WorkflowReviewDecisionPopover, {
+	global: { stubs: { ...rekaStubs, ...tooltipStub } },
+	props: {
+		deciding: false,
+		viewerCanDecide: true,
+		viewerCanComment: true,
+		ineligibilityHint: '',
+	},
+});
+
+function tooltipOf(button: HTMLElement) {
+	const tooltip = button.closest('[data-test-id="decision-tooltip"]');
+	if (!tooltip) throw new Error('button is not wrapped in a tooltip');
+	return tooltip;
+}
+
+const showError = vi.fn();
+
+describe('WorkflowReviewDecisionPopover', () => {
+	let store: ReturnType<typeof mockedStore<typeof useReviewActivityStore>>;
+
+	beforeEach(() => {
+		createTestingPinia();
+		showError.mockReset();
+		vi.mocked(useToast).mockReturnValue({ showError } as unknown as ReturnType<typeof useToast>);
+		store = mockedStore(useReviewActivityStore);
+		store.decisionNote = '';
+		store.posting = false;
+		store.postComment.mockResolvedValue(true);
+	});
+
+	it('needs a note before the reviewer can request changes or comment', async () => {
+		const { getByTestId } = renderComponent();
+
+		const requestChanges = getByTestId('workflow-review-decision-request-changes-button');
+		expect(requestChanges).toBeDisabled();
+		expect(getByTestId('workflow-review-decision-comment-button')).toBeDisabled();
+		expect(tooltipOf(requestChanges)).toHaveAttribute(
+			'data-content',
+			'Add a note to request changes',
+		);
+		expect(tooltipOf(requestChanges)).toHaveAttribute('data-disabled', 'false');
+
+		await userEvent.type(getByTestId('workflow-review-decision-note'), 'Please add retries');
+
+		expect(requestChanges).not.toBeDisabled();
+		expect(getByTestId('workflow-review-decision-comment-button')).not.toBeDisabled();
+		expect(tooltipOf(requestChanges)).toHaveAttribute('data-disabled', 'true');
+	});
+
+	it('reports a failed comment after the selected review changes', async () => {
+		const pending = createDeferredPromise<boolean>();
+		store.postComment.mockReturnValueOnce(pending.promise);
+		store.decisionNote = 'Sent comment';
+		const { getByTestId, unmount } = renderComponent();
+		await userEvent.click(getByTestId('workflow-review-decision-comment-button'));
+		unmount();
+		store.decisionNote = 'New note';
+		const error = new Error('timeout');
+		pending.reject(error);
+		await waitAllPromises();
+
+		expect(showError).toHaveBeenCalledWith(error, 'Could not post comment');
+		expect(store.decisionNote).toBe('New note');
+	});
+
+	it.each<[string, { viewerCanComment?: boolean; deciding?: boolean }, boolean]>([
+		['a viewer who is not allowed to comment', { viewerCanComment: false }, false],
+		['a comment that is already being posted', {}, true],
+		['a reviewer whose decision is in flight', { deciding: true }, false],
+	])('offers no Comment button to %s, note or not', async (_label, props, posting) => {
+		store.posting = posting;
+
+		const { getByTestId } = renderComponent({ props });
+
+		await userEvent.type(getByTestId('workflow-review-decision-note'), 'Just a thought');
+
+		expect(getByTestId('workflow-review-decision-comment-button')).toBeDisabled();
+	});
+
+	// Posting a comment leaves its text in the box on purpose, so a decision taken meanwhile
+	// would send the very same text a second time as its note.
+	it.each<[string, { posting: boolean; deciding: boolean }]>([
+		['a comment is still being posted', { posting: true, deciding: false }],
+		['a decision is already in flight', { posting: false, deciding: true }],
+	])('offers no decision while %s', async (_label, { posting, deciding }) => {
+		store.posting = posting;
+
+		const { getByTestId } = renderComponent({ props: { deciding } });
+
+		await userEvent.type(getByTestId('workflow-review-decision-note'), 'Please add retries');
+
+		expect(getByTestId('workflow-review-decision-request-changes-button')).toBeDisabled();
+		expect(getByTestId('workflow-review-decision-approve-button')).toBeDisabled();
+	});
+
+	it('submits a change request with the note', async () => {
+		const { getByTestId, emitted } = renderComponent();
+
+		await userEvent.type(getByTestId('workflow-review-decision-note'), 'Please add retries');
+		await userEvent.click(getByTestId('workflow-review-decision-request-changes-button'));
+
+		expect(emitted('decide')).toEqual([
+			[{ decision: 'changes_requested', note: 'Please add retries' }],
+		]);
+	});
+
+	it('submits an approval with the note', async () => {
+		const { getByTestId, emitted } = renderComponent();
+
+		await userEvent.type(getByTestId('workflow-review-decision-note'), 'Ship it');
+		await userEvent.click(getByTestId('workflow-review-decision-approve-button'));
+
+		expect(emitted('decide')).toEqual([[{ decision: 'approved', note: 'Ship it' }]]);
+	});
+
+	it('approves without a note rather than sending an empty one', async () => {
+		const { getByTestId, emitted } = renderComponent();
+
+		await userEvent.click(getByTestId('workflow-review-decision-approve-button'));
+
+		expect(emitted('decide')).toEqual([[{ decision: 'approved' }]]);
+	});
+
+	it('clears its open state once a decision is submitted', async () => {
+		const { getByTestId } = renderComponent();
+
+		await userEvent.click(getByTestId('open-popover'));
+		expect(getByTestId('popover-root')).toHaveAttribute('data-open', 'true');
+
+		await userEvent.click(getByTestId('workflow-review-decision-approve-button'));
+
+		expect(getByTestId('popover-root')).toHaveAttribute('data-open', 'false');
+	});
+
+	it('posts the note as a comment and shows the viewer where it landed', async () => {
+		const { getByTestId, emitted } = renderComponent();
+
+		await userEvent.type(getByTestId('workflow-review-decision-note'), 'Just a thought');
+		await userEvent.click(getByTestId('workflow-review-decision-comment-button'));
+
+		expect(store.postComment).toHaveBeenCalledWith('Just a thought');
+		expect(emitted('comment-posted')).toHaveLength(1);
+		expect(store.clearDecisionNote).toHaveBeenCalledWith('Just a thought');
+		expect(emitted('decide')).toBeUndefined();
+	});
+
+	// The note is only dropped after the post comes back, by which time the viewer may be
+	// typing the next one. Whether that text is theirs to drop is the store's rule.
+	it('drops the note it posted, not whatever the viewer typed meanwhile', async () => {
+		let resolvePost!: (landed: boolean) => void;
+		store.postComment.mockReturnValue(
+			new Promise((resolve) => {
+				resolvePost = resolve;
+			}),
+		);
+
+		const { getByTestId, emitted } = renderComponent();
+
+		await userEvent.type(getByTestId('workflow-review-decision-note'), 'Just a thought');
+		await userEvent.click(getByTestId('workflow-review-decision-comment-button'));
+
+		store.decisionNote = 'and one more thing';
+		resolvePost(true);
+		await waitAllPromises();
+
+		expect(store.clearDecisionNote).toHaveBeenCalledWith('Just a thought');
+		expect(emitted('comment-posted')).toHaveLength(1);
+	});
+
+	// The comment is written either way, but it says nothing about the review now on screen.
+	it('leaves the review the viewer moved to alone when the comment lands late', async () => {
+		store.postComment.mockResolvedValue(false);
+
+		const { getByTestId, emitted } = renderComponent();
+
+		await userEvent.type(getByTestId('workflow-review-decision-note'), 'Just a thought');
+		await userEvent.click(getByTestId('workflow-review-decision-comment-button'));
+
+		expect(store.clearDecisionNote).not.toHaveBeenCalled();
+		expect(emitted('comment-posted')).toBeUndefined();
+	});
+
+	it('keeps the note when the comment could not be posted', async () => {
+		const error = new Error('nope');
+		store.postComment.mockRejectedValueOnce(error);
+
+		const { getByTestId, emitted } = renderComponent();
+
+		await userEvent.type(getByTestId('workflow-review-decision-note'), 'Just a thought');
+		await userEvent.click(getByTestId('workflow-review-decision-comment-button'));
+
+		expect(showError).toHaveBeenCalledWith(error, 'Could not post comment');
+		expect(store.clearDecisionNote).not.toHaveBeenCalled();
+		expect(getByTestId('workflow-review-decision-note')).toHaveValue('Just a thought');
+		expect(emitted('comment-posted')).toBeUndefined();
+	});
+
+	// The draft has to outlive both the popover closing and a switch to another review,
+	// so the input is bound to the store rather than to a local ref.
+	it('shows the note the review already has and writes edits back', async () => {
+		store.decisionNote = 'started earlier';
+
+		const { getByTestId } = renderComponent();
+
+		expect(getByTestId('workflow-review-decision-note')).toHaveValue('started earlier');
+
+		await userEvent.type(getByTestId('workflow-review-decision-note'), ' and continued');
+
+		expect(store.decisionNote).toBe('started earlier and continued');
+	});
+
+	it('says why the viewer cannot decide instead of just blocking them', () => {
+		const { getByTestId } = renderComponent({
+			props: {
+				viewerCanDecide: false,
+				ineligibilityHint: 'You contributed a version to this review.',
+			},
+		});
+
+		const trigger = getByTestId('workflow-review-decision-trigger');
+		expect(trigger).toBeDisabled();
+		expect(tooltipOf(trigger)).toHaveAttribute(
+			'data-content',
+			'You contributed a version to this review.',
+		);
+	});
+
+	// A wrapper around the trigger takes the popover's own trigger props with it: the click,
+	// the expanded state a screen reader announces, and focus coming back on close.
+	it('hands a reviewer who may decide the trigger itself rather than a wrapper', () => {
+		const { getByTestId } = renderComponent();
+
+		expect(
+			getByTestId('workflow-review-decision-trigger').closest('[data-test-id="decision-tooltip"]'),
+		).toBeNull();
+	});
+
+	it('keeps the reviewer out while their decision is in flight', () => {
+		const { getByTestId } = renderComponent({ props: { deciding: true } });
+
+		expect(getByTestId('workflow-review-decision-trigger')).toBeDisabled();
+	});
+});