- {hasChanges ? (
+ {hasValidationErrors ? (
+
+ Fix validation errors before saving
+
+ ) : hasChanges ? (
You have unsaved changes
) : (
Settings saved to project config
@@ -235,7 +300,7 @@ function SettingsForm({ config, sources, onSave, isSaving }) {
variant="primary"
onClick={handleSave}
loading={isSaving}
- disabled={!hasChanges}
+ disabled={!hasChanges || hasValidationErrors}
>
Save Changes
diff --git a/src/reporter/src/hooks/queries/batch-mutation-utils.js b/src/reporter/src/hooks/queries/batch-mutation-utils.js
new file mode 100644
index 0000000..6f1d69b
--- /dev/null
+++ b/src/reporter/src/hooks/queries/batch-mutation-utils.js
@@ -0,0 +1,138 @@
+function getComparisonIdentifiers(comparison) {
+ return [comparison?.id, comparison?.signature, comparison?.name].filter(
+ Boolean
+ );
+}
+
+function comparisonMatchesIdSet(comparison, idSet) {
+ let identifiers = getComparisonIdentifiers(comparison);
+ return identifiers.some(identifier => idSet.has(identifier));
+}
+
+function createComparisonLookup(comparisons = []) {
+ let lookup = new Map();
+
+ for (let comparison of comparisons) {
+ let identifiers = getComparisonIdentifiers(comparison);
+ for (let identifier of identifiers) {
+ if (!lookup.has(identifier)) {
+ lookup.set(identifier, comparison);
+ }
+ }
+ }
+
+ return lookup;
+}
+
+function createBatchMutationError(actionVerb, succeededIds, failedIds, errors) {
+ let total = succeededIds.length + failedIds.length;
+ let message =
+ succeededIds.length > 0
+ ? `Some baselines failed to ${actionVerb} (${failedIds.length}/${total}).`
+ : `Failed to ${actionVerb} ${failedIds.length} baseline${failedIds.length === 1 ? '' : 's'}.`;
+
+ let error = new Error(message);
+ error.name = 'BatchMutationError';
+ error.action = actionVerb;
+ error.succeededIds = succeededIds;
+ error.failedIds = failedIds;
+ error.errors = errors;
+ return error;
+}
+
+export function asIdList(value) {
+ if (Array.isArray(value)) {
+ return value.filter(Boolean);
+ }
+
+ if (value) {
+ return [value];
+ }
+
+ return [];
+}
+
+export function updateComparisonsUserAction(old, ids, userAction) {
+ if (!old?.comparisons || ids.length === 0) {
+ return old;
+ }
+
+ let idSet = new Set(ids);
+ return {
+ ...old,
+ comparisons: old.comparisons.map(comparison => {
+ let matches = comparisonMatchesIdSet(comparison, idSet);
+ return matches ? { ...comparison, userAction } : comparison;
+ }),
+ };
+}
+
+export function restoreComparisonsFromPrevious(current, previous, ids) {
+ if (!current?.comparisons || !previous?.comparisons || ids.length === 0) {
+ return current;
+ }
+
+ let idSet = new Set(ids);
+ let previousLookup = createComparisonLookup(previous.comparisons);
+
+ return {
+ ...current,
+ comparisons: current.comparisons.map(comparison => {
+ if (!comparisonMatchesIdSet(comparison, idSet)) {
+ return comparison;
+ }
+
+ let identifiers = getComparisonIdentifiers(comparison);
+ for (let identifier of identifiers) {
+ let previousComparison = previousLookup.get(identifier);
+ if (previousComparison) {
+ return previousComparison;
+ }
+ }
+
+ return comparison;
+ }),
+ };
+}
+
+export async function runBatchMutation(ids, mutationFn, actionVerb) {
+ let idList = asIdList(ids);
+ if (idList.length === 0) {
+ return {
+ succeededIds: [],
+ failedIds: [],
+ errors: [],
+ };
+ }
+
+ let results = await Promise.allSettled(idList.map(id => mutationFn(id)));
+ let succeededIds = [];
+ let failedIds = [];
+ let errors = [];
+
+ for (let index = 0; index < results.length; index++) {
+ let result = results[index];
+ let id = idList[index];
+
+ if (result.status === 'fulfilled') {
+ succeededIds.push(id);
+ continue;
+ }
+
+ failedIds.push(id);
+ errors.push({
+ id,
+ error: result.reason,
+ });
+ }
+
+ if (failedIds.length > 0) {
+ throw createBatchMutationError(actionVerb, succeededIds, failedIds, errors);
+ }
+
+ return {
+ succeededIds,
+ failedIds,
+ errors,
+ };
+}
diff --git a/src/reporter/src/hooks/queries/use-tdd-queries.js b/src/reporter/src/hooks/queries/use-tdd-queries.js
index fcf1f4d..a34e4c9 100644
--- a/src/reporter/src/hooks/queries/use-tdd-queries.js
+++ b/src/reporter/src/hooks/queries/use-tdd-queries.js
@@ -2,6 +2,31 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { tdd } from '../../api/client.js';
import { queryKeys } from '../../lib/query-keys.js';
import { SSE_STATE, useSSEState } from '../use-sse.js';
+import {
+ asIdList,
+ restoreComparisonsFromPrevious,
+ runBatchMutation,
+ updateComparisonsUserAction,
+} from './batch-mutation-utils.js';
+
+function rollbackBatchMutationError(queryClient, context, error) {
+ if (!context?.previousData) {
+ return;
+ }
+
+ let failedIds = asIdList(error?.failedIds);
+ let succeededIds = asIdList(error?.succeededIds);
+ let hasPartialSuccess = failedIds.length > 0 && succeededIds.length > 0;
+
+ if (hasPartialSuccess) {
+ queryClient.setQueryData(queryKeys.reportData(), old =>
+ restoreComparisonsFromPrevious(old, context.previousData, failedIds)
+ );
+ return;
+ }
+
+ queryClient.setQueryData(queryKeys.reportData(), context.previousData);
+}
export function useComparison(id, options = {}) {
return useQuery({
@@ -33,25 +58,20 @@ export function useReportData(options = {}) {
}
export function useAcceptBaseline() {
- const queryClient = useQueryClient();
+ let queryClient = useQueryClient();
return useMutation({
mutationFn: id => tdd.acceptBaseline(id),
onMutate: async id => {
+ let ids = asIdList(id);
+
// Cancel any outgoing refetches
await queryClient.cancelQueries({ queryKey: queryKeys.reportData() });
+
// Optimistically update the comparison
- const previousData = queryClient.getQueryData(queryKeys.reportData());
- queryClient.setQueryData(queryKeys.reportData(), old => {
- if (!old?.comparisons) return old;
- return {
- ...old,
- comparisons: old.comparisons.map(c =>
- c.id === id || c.signature === id || c.name === id
- ? { ...c, userAction: 'accepted' }
- : c
- ),
- };
- });
+ let previousData = queryClient.getQueryData(queryKeys.reportData());
+ queryClient.setQueryData(queryKeys.reportData(), old =>
+ updateComparisonsUserAction(old, ids, 'accepted')
+ );
return { previousData };
},
onError: (_err, _id, context) => {
@@ -67,7 +87,7 @@ export function useAcceptBaseline() {
}
export function useAcceptAllBaselines() {
- const queryClient = useQueryClient();
+ let queryClient = useQueryClient();
return useMutation({
mutationFn: () => tdd.acceptAllBaselines(),
onSuccess: () => {
@@ -77,7 +97,7 @@ export function useAcceptAllBaselines() {
}
export function useResetBaselines() {
- const queryClient = useQueryClient();
+ let queryClient = useQueryClient();
return useMutation({
mutationFn: () => tdd.resetBaselines(),
onSuccess: () => {
@@ -87,25 +107,20 @@ export function useResetBaselines() {
}
export function useRejectBaseline() {
- const queryClient = useQueryClient();
+ let queryClient = useQueryClient();
return useMutation({
mutationFn: id => tdd.rejectBaseline(id),
onMutate: async id => {
+ let ids = asIdList(id);
+
// Cancel any outgoing refetches
await queryClient.cancelQueries({ queryKey: queryKeys.reportData() });
+
// Optimistically update the comparison
- const previousData = queryClient.getQueryData(queryKeys.reportData());
- queryClient.setQueryData(queryKeys.reportData(), old => {
- if (!old?.comparisons) return old;
- return {
- ...old,
- comparisons: old.comparisons.map(c =>
- c.id === id || c.signature === id || c.name === id
- ? { ...c, userAction: 'rejected' }
- : c
- ),
- };
- });
+ let previousData = queryClient.getQueryData(queryKeys.reportData());
+ queryClient.setQueryData(queryKeys.reportData(), old =>
+ updateComparisonsUserAction(old, ids, 'rejected')
+ );
return { previousData };
},
onError: (_err, _id, context) => {
@@ -120,8 +135,60 @@ export function useRejectBaseline() {
});
}
+export function useAcceptBaselinesBatch() {
+ let queryClient = useQueryClient();
+ return useMutation({
+ mutationFn: ids =>
+ runBatchMutation(ids, id => tdd.acceptBaseline(id), 'accept'),
+ onMutate: async ids => {
+ let idList = asIdList(ids);
+
+ await queryClient.cancelQueries({ queryKey: queryKeys.reportData() });
+
+ let previousData = queryClient.getQueryData(queryKeys.reportData());
+ queryClient.setQueryData(queryKeys.reportData(), old =>
+ updateComparisonsUserAction(old, idList, 'accepted')
+ );
+
+ return { previousData };
+ },
+ onError: (error, _ids, context) => {
+ rollbackBatchMutationError(queryClient, context, error);
+ },
+ onSettled: () => {
+ queryClient.invalidateQueries({ queryKey: queryKeys.tdd });
+ },
+ });
+}
+
+export function useRejectBaselinesBatch() {
+ let queryClient = useQueryClient();
+ return useMutation({
+ mutationFn: ids =>
+ runBatchMutation(ids, id => tdd.rejectBaseline(id), 'reject'),
+ onMutate: async ids => {
+ let idList = asIdList(ids);
+
+ await queryClient.cancelQueries({ queryKey: queryKeys.reportData() });
+
+ let previousData = queryClient.getQueryData(queryKeys.reportData());
+ queryClient.setQueryData(queryKeys.reportData(), old =>
+ updateComparisonsUserAction(old, idList, 'rejected')
+ );
+
+ return { previousData };
+ },
+ onError: (error, _ids, context) => {
+ rollbackBatchMutationError(queryClient, context, error);
+ },
+ onSettled: () => {
+ queryClient.invalidateQueries({ queryKey: queryKeys.tdd });
+ },
+ });
+}
+
export function useDeleteComparison() {
- const queryClient = useQueryClient();
+ let queryClient = useQueryClient();
return useMutation({
mutationFn: id => tdd.deleteComparison(id),
onSuccess: () => {
diff --git a/src/reporter/vite.config.js b/src/reporter/vite.config.js
index 1420827..0c07dba 100644
--- a/src/reporter/vite.config.js
+++ b/src/reporter/vite.config.js
@@ -3,7 +3,13 @@ import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
export default defineConfig({
- plugins: [react()],
+ plugins: [
+ react({
+ babel: {
+ plugins: ['babel-plugin-react-compiler'],
+ },
+ }),
+ ],
css: {
postcss: '../../postcss.config.js',
},
diff --git a/src/reporter/vite.dev.config.js b/src/reporter/vite.dev.config.js
index 219205f..e3f3912 100644
--- a/src/reporter/vite.dev.config.js
+++ b/src/reporter/vite.dev.config.js
@@ -2,7 +2,13 @@ import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
export default defineConfig({
- plugins: [react()],
+ plugins: [
+ react({
+ babel: {
+ plugins: ['babel-plugin-react-compiler'],
+ },
+ }),
+ ],
root: './src',
css: {
postcss: '../../postcss.config.js',
diff --git a/src/reporter/vite.ssr.config.js b/src/reporter/vite.ssr.config.js
index a5d40b9..fb8e878 100644
--- a/src/reporter/vite.ssr.config.js
+++ b/src/reporter/vite.ssr.config.js
@@ -7,7 +7,13 @@ import { defineConfig } from 'vite';
* Outputs a Node-compatible ES module that can render React to HTML strings.
*/
export default defineConfig({
- plugins: [react()],
+ plugins: [
+ react({
+ babel: {
+ plugins: ['babel-plugin-react-compiler'],
+ },
+ }),
+ ],
css: {
postcss: '../../postcss.config.js',
},
diff --git a/tests/reporter/specs/builds-workflow.spec.js b/tests/reporter/specs/builds-workflow.spec.js
new file mode 100644
index 0000000..0f851ac
--- /dev/null
+++ b/tests/reporter/specs/builds-workflow.spec.js
@@ -0,0 +1,75 @@
+import { readFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { expect, test } from '@playwright/test';
+import { createReporterTestServer } from '../test-helper.js';
+
+let __filename = fileURLToPath(import.meta.url);
+let __dirname = dirname(__filename);
+let fixturesDir = join(__dirname, '..', 'fixtures');
+
+test.describe('Builds Workflow', () => {
+ let fixtureData;
+ let port = 3474;
+
+ test.beforeAll(() => {
+ fixtureData = JSON.parse(
+ readFileSync(join(fixturesDir, 'empty-state.json'), 'utf8')
+ );
+ });
+
+ test('signed-out users do not fetch projects', async ({ page }) => {
+ let server = createReporterTestServer(fixtureData, port, {
+ authenticated: false,
+ });
+ await server.start();
+
+ try {
+ await page.goto(`http://localhost:${port}/builds`);
+ await expect(
+ page.getByRole('heading', { name: /sign in required/i })
+ ).toBeVisible();
+
+ let requestLogResponse = await page.request.get(
+ `http://localhost:${port}/__test__/requests`
+ );
+ let requestLog = await requestLogResponse.json();
+ let projectRequests = requestLog.requests.filter(
+ request => request.path === '/api/projects'
+ );
+
+ expect(projectRequests.length).toBe(0);
+ } finally {
+ await server.stop();
+ }
+ });
+
+ test('signed-in users fetch projects', async ({ page }) => {
+ let server = createReporterTestServer(fixtureData, port, {
+ authenticated: true,
+ });
+ await server.start();
+
+ try {
+ await page.goto(`http://localhost:${port}/builds`);
+ await expect(
+ page.getByRole('heading', { name: /remote builds/i })
+ ).toBeVisible();
+ await expect(
+ page.getByRole('heading', { name: /no projects found/i })
+ ).toBeVisible();
+
+ let requestLogResponse = await page.request.get(
+ `http://localhost:${port}/__test__/requests`
+ );
+ let requestLog = await requestLogResponse.json();
+ let projectRequests = requestLog.requests.filter(
+ request => request.path === '/api/projects'
+ );
+
+ expect(projectRequests.length).toBeGreaterThan(0);
+ } finally {
+ await server.stop();
+ }
+ });
+});
diff --git a/tests/reporter/specs/settings-workflow.spec.js b/tests/reporter/specs/settings-workflow.spec.js
index 439806b..d4fe654 100644
--- a/tests/reporter/specs/settings-workflow.spec.js
+++ b/tests/reporter/specs/settings-workflow.spec.js
@@ -117,4 +117,25 @@ test.describe('Settings Workflow', () => {
// Verify reset button is disabled again
await expect(resetButton).toBeDisabled();
});
+
+ test('save is disabled while numeric fields are invalid', async ({
+ page,
+ }) => {
+ await page.goto(`http://localhost:${port}/settings`);
+
+ let thresholdInput = page.getByRole('spinbutton').first();
+ let saveButton = page.getByRole('button', { name: 'Save Changes' });
+
+ await thresholdInput.fill('');
+ await expect(
+ page.getByText('Threshold must be a number greater than or equal to 0.')
+ ).toBeVisible();
+ await expect(saveButton).toBeDisabled();
+
+ await thresholdInput.fill('1.5');
+ await expect(
+ page.getByText('Threshold must be a number greater than or equal to 0.')
+ ).not.toBeVisible();
+ await expect(saveButton).toBeEnabled();
+ });
});
diff --git a/tests/reporter/test-helper.js b/tests/reporter/test-helper.js
index e4e7356..5a1239e 100644
--- a/tests/reporter/test-helper.js
+++ b/tests/reporter/test-helper.js
@@ -31,6 +31,7 @@ export function createReporterTestServer(
// Track mutations for test verification
let mutations = [];
+ let requests = [];
// Mutable copy of fixture data for state changes
let currentData = JSON.parse(JSON.stringify(fixtureData));
@@ -55,6 +56,11 @@ export function createReporterTestServer(
}
const parsedUrl = new URL(req.url, `http://${req.headers.host}`);
+ requests.push({
+ method: req.method,
+ path: parsedUrl.pathname,
+ timestamp: Date.now(),
+ });
// Serve main dashboard for all HTML routes (client-side routing)
if (
@@ -63,6 +69,7 @@ export function createReporterTestServer(
parsedUrl.pathname === '/dashboard' ||
parsedUrl.pathname === '/stats' ||
parsedUrl.pathname === '/settings' ||
+ parsedUrl.pathname === '/builds' ||
parsedUrl.pathname === '/projects' ||
parsedUrl.pathname.startsWith('/comparison/'))
) {
@@ -237,9 +244,18 @@ export function createReporterTestServer(
return;
}
+ // Test helper: get captured request log
+ if (req.method === 'GET' && parsedUrl.pathname === '/__test__/requests') {
+ res.setHeader('Content-Type', 'application/json');
+ res.statusCode = 200;
+ res.end(JSON.stringify({ requests }));
+ return;
+ }
+
// Test helper: reset state
if (req.method === 'POST' && parsedUrl.pathname === '/__test__/reset') {
mutations = [];
+ requests = [];
currentData = JSON.parse(JSON.stringify(fixtureData));
res.setHeader('Content-Type', 'application/json');
res.statusCode = 200;
diff --git a/tests/unit/reporter-batch-mutation-utils.test.js b/tests/unit/reporter-batch-mutation-utils.test.js
new file mode 100644
index 0000000..5c4c66f
--- /dev/null
+++ b/tests/unit/reporter-batch-mutation-utils.test.js
@@ -0,0 +1,87 @@
+import assert from 'node:assert';
+import { describe, it } from 'node:test';
+import {
+ asIdList,
+ restoreComparisonsFromPrevious,
+ runBatchMutation,
+ updateComparisonsUserAction,
+} from '../../src/reporter/src/hooks/queries/batch-mutation-utils.js';
+
+describe('reporter batch mutation utils', () => {
+ it('normalizes ids into a list', () => {
+ assert.deepStrictEqual(asIdList('abc'), ['abc']);
+ assert.deepStrictEqual(asIdList(['a', null, '', 'b']), ['a', 'b']);
+ assert.deepStrictEqual(asIdList(undefined), []);
+ });
+
+ it('applies user action to matching comparisons', () => {
+ let data = {
+ comparisons: [
+ { id: 'a', name: 'alpha', userAction: null },
+ { id: 'b', name: 'beta', userAction: null },
+ ],
+ };
+
+ let updated = updateComparisonsUserAction(data, ['beta'], 'accepted');
+
+ assert.strictEqual(updated.comparisons[0].userAction, null);
+ assert.strictEqual(updated.comparisons[1].userAction, 'accepted');
+ });
+
+ it('restores only failed ids from previous data', () => {
+ let previous = {
+ comparisons: [
+ { id: 'a', name: 'alpha', userAction: null },
+ { id: 'b', name: 'beta', userAction: null },
+ ],
+ };
+ let optimistic = {
+ comparisons: [
+ { id: 'a', name: 'alpha', userAction: 'accepted' },
+ { id: 'b', name: 'beta', userAction: 'accepted' },
+ ],
+ };
+
+ let restored = restoreComparisonsFromPrevious(optimistic, previous, ['b']);
+
+ assert.strictEqual(restored.comparisons[0].userAction, 'accepted');
+ assert.strictEqual(restored.comparisons[1].userAction, null);
+ });
+
+ it('returns success metadata when all mutations succeed', async () => {
+ let result = await runBatchMutation(
+ ['a', 'b'],
+ async id => ({ ok: true, id }),
+ 'accept'
+ );
+
+ assert.deepStrictEqual(result.succeededIds, ['a', 'b']);
+ assert.deepStrictEqual(result.failedIds, []);
+ assert.deepStrictEqual(result.errors, []);
+ });
+
+ it('throws rich error metadata on partial failure', async () => {
+ await assert.rejects(
+ runBatchMutation(
+ ['a', 'b', 'c'],
+ async id => {
+ if (id === 'b') {
+ throw new Error('boom');
+ }
+ return { ok: true, id };
+ },
+ 'accept'
+ ),
+ error => {
+ assert.strictEqual(error.name, 'BatchMutationError');
+ assert.strictEqual(error.action, 'accept');
+ assert.deepStrictEqual(error.succeededIds, ['a', 'c']);
+ assert.deepStrictEqual(error.failedIds, ['b']);
+ assert.strictEqual(error.errors.length, 1);
+ assert.strictEqual(error.errors[0].id, 'b');
+ assert.match(error.message, /failed to accept/i);
+ return true;
+ }
+ );
+ });
+});