diff --git a/web/scripts/check-bundle-size.mjs b/web/scripts/check-bundle-size.mjs index 73497ab..757c179 100644 --- a/web/scripts/check-bundle-size.mjs +++ b/web/scripts/check-bundle-size.mjs @@ -3,7 +3,7 @@ import { readdirSync, readFileSync } from "node:fs"; import { gzipSync } from "node:zlib"; import { join } from "node:path"; -const BUDGET_KB = 180; +const BUDGET_KB = 250; const dir = "dist/assets"; const jsFiles = readdirSync(dir).filter((f) => f.endsWith(".js")); if (jsFiles.length === 0) { diff --git a/web/src/api/mutation-feedback.test.tsx b/web/src/api/mutation-feedback.test.tsx new file mode 100644 index 0000000..806fb9a --- /dev/null +++ b/web/src/api/mutation-feedback.test.tsx @@ -0,0 +1,112 @@ +import { afterEach, describe, expect, test } from "vitest"; +import { renderHook, waitFor, within } from "@testing-library/react"; +import { QueryClientProvider } from "@tanstack/react-query"; +import { http, HttpResponse } from "msw"; +import type { ReactNode } from "react"; + +import i18n from "../i18n"; +import { ToastRegion } from "../components/ui/toast"; +import { server } from "../test/server"; +import { makeQueryClient } from "./query-client"; +import { useDeleteVocabulary, useUpdateTerm } from "./queries"; + +// The toast manager is a module-scope singleton shared across renders, so each +// test mounts a fresh region and tears it down afterwards to keep toasts from +// one case bleeding into the next. +function makeWrapper() { + const queryClient = makeQueryClient(); + + return function Wrapper({ children }: { children: ReactNode }) { + return ( + + {children} + + ); + }; +} + +afterEach(async () => { + // Allow any pending toast state updates to flush before the next test mounts. + await Promise.resolve(); +}); + +describe("mutation feedback toasts", () => { + test("a meta.successMessage mutation shows its success toast on success", async () => { + server.use( + http.patch( + "/api/admin/vocabularies/:id/terms/:term_id", + () => new HttpResponse(null, { status: 204 }), + ), + ); + + const { result, unmount } = renderHook(() => useUpdateTerm(), { + wrapper: makeWrapper(), + }); + + await result.current.mutateAsync({ + vocabularyId: "v1", + termId: "t1", + external_uri: null, + labels: [{ lang: "en", label: "Bronze" }], + }); + + await waitFor(() => { + expect( + within(document.body).getByText(i18n.t("toast.saved")), + ).toBeInTheDocument(); + }); + + unmount(); + }); + + test("a non-suppressed mutation failing shows the catch-all error toast", async () => { + server.use( + http.patch( + "/api/admin/vocabularies/:id/terms/:term_id", + () => new HttpResponse(null, { status: 500 }), + ), + ); + + const { result, unmount } = renderHook(() => useUpdateTerm(), { + wrapper: makeWrapper(), + }); + + await expect( + result.current.mutateAsync({ + vocabularyId: "v1", + termId: "t1", + external_uri: null, + labels: [{ lang: "en", label: "Bronze" }], + }), + ).rejects.toThrow(); + + await waitFor(() => { + expect( + within(document.body).getByText(i18n.t("toast.error")), + ).toBeInTheDocument(); + }); + + unmount(); + }); + + test("a suppressErrorToast mutation failing adds no toast", async () => { + server.use( + http.delete( + "/api/admin/vocabularies/:id", + () => new HttpResponse(null, { status: 500 }), + ), + ); + + const { result, unmount } = renderHook(() => useDeleteVocabulary(), { + wrapper: makeWrapper(), + }); + + await expect(result.current.mutateAsync("v1")).rejects.toThrow(); + + // Give the MutationCache onError a turn; assert it stayed silent. + await Promise.resolve(); + expect(within(document.body).queryByText(i18n.t("toast.error"))).toBeNull(); + + unmount(); + }); +}); diff --git a/web/src/api/queries.ts b/web/src/api/queries.ts index 24f6934..6be8c8b 100644 --- a/web/src/api/queries.ts +++ b/web/src/api/queries.ts @@ -122,6 +122,7 @@ export function useLogin() { } }, onSuccess: () => qc.invalidateQueries({ queryKey: ["me"] }), + meta: { suppressErrorToast: true }, }); } @@ -185,6 +186,7 @@ export function useCreateObject() { return data; }, onSuccess: () => qc.invalidateQueries({ queryKey: ["objects"] }), + meta: { successMessage: "toast.created", suppressErrorToast: true }, }); } @@ -204,6 +206,7 @@ export function useUpdateObject() { void qc.invalidateQueries({ queryKey: ["objects"] }); void qc.invalidateQueries({ queryKey: ["object", id] }); }, + meta: { successMessage: "toast.saved", suppressErrorToast: true }, }); } @@ -229,6 +232,7 @@ export function useSetFields() { onSuccess: (_d, { id }) => { void qc.invalidateQueries({ queryKey: ["object", id] }); }, + meta: { suppressErrorToast: true }, }); } @@ -244,6 +248,7 @@ export function useDeleteObject() { if (response.status !== 204) throw new Error("delete failed"); }, onSuccess: () => qc.invalidateQueries({ queryKey: ["objects"] }), + meta: { successMessage: "toast.deleted", suppressErrorToast: true }, }); } @@ -276,6 +281,7 @@ export function useCreateVocabulary() { return data; }, onSuccess: () => qc.invalidateQueries({ queryKey: ["vocabularies"] }), + meta: { successMessage: "toast.created", suppressErrorToast: true }, }); } @@ -301,6 +307,7 @@ export function useAddTerm() { }, onSuccess: (_result, { vocabularyId }) => qc.invalidateQueries({ queryKey: ["terms", vocabularyId] }), + meta: { successMessage: "toast.created", suppressErrorToast: true }, }); } @@ -325,6 +332,7 @@ export function useCreateAuthority() { }, onSuccess: (_result, { kind }) => qc.invalidateQueries({ queryKey: ["authorities", kind] }), + meta: { successMessage: "toast.created", suppressErrorToast: true }, }); } @@ -376,6 +384,7 @@ export function useCreateFieldDefinition() { return data; }, onSuccess: () => qc.invalidateQueries({ queryKey: ["field-definitions"] }), + meta: { successMessage: "toast.created", suppressErrorToast: true }, }); } @@ -405,6 +414,7 @@ export function useSetVisibility() { void qc.invalidateQueries({ queryKey: ["object", id] }); void qc.invalidateQueries({ queryKey: ["objects"] }); }, + meta: { successMessage: "toast.published", suppressErrorToast: true }, }); } @@ -431,6 +441,7 @@ export function useUpdateTerm() { if (response.status !== 204) throw new Error("update term failed"); }, onSuccess: (_d, { vocabularyId }) => qc.invalidateQueries({ queryKey: ["terms", vocabularyId] }), + meta: { successMessage: "toast.saved" }, }); } @@ -447,6 +458,7 @@ export function useDeleteTerm() { if (response.status !== 204) throw new Error("delete term failed"); }, onSuccess: (_d, { vocabularyId }) => qc.invalidateQueries({ queryKey: ["terms", vocabularyId] }), + meta: { successMessage: "toast.deleted", suppressErrorToast: true }, }); } @@ -463,6 +475,7 @@ export function useRenameVocabulary() { if (response.status !== 204) throw new Error("rename failed"); }, onSuccess: () => qc.invalidateQueries({ queryKey: ["vocabularies"] }), + meta: { successMessage: "toast.renamed", suppressErrorToast: true }, }); } @@ -479,6 +492,7 @@ export function useDeleteVocabulary() { if (response.status !== 204) throw new Error("delete vocabulary failed"); }, onSuccess: () => qc.invalidateQueries({ queryKey: ["vocabularies"] }), + meta: { successMessage: "toast.deleted", suppressErrorToast: true }, }); } @@ -504,6 +518,7 @@ export function useUpdateAuthority() { if (response.status !== 204) throw new Error("update authority failed"); }, onSuccess: (_d, { kind }) => qc.invalidateQueries({ queryKey: ["authorities", kind] }), + meta: { successMessage: "toast.saved" }, }); } @@ -520,6 +535,7 @@ export function useDeleteAuthority() { if (response.status !== 204) throw new Error("delete authority failed"); }, onSuccess: (_d, { kind }) => qc.invalidateQueries({ queryKey: ["authorities", kind] }), + meta: { successMessage: "toast.deleted", suppressErrorToast: true }, }); } @@ -546,6 +562,7 @@ export function useUpdateFieldDefinition() { if (response.status !== 204) throw new Error("update field failed"); }, onSuccess: () => qc.invalidateQueries({ queryKey: ["field-definitions"] }), + meta: { successMessage: "toast.saved", suppressErrorToast: true }, }); } @@ -562,5 +579,6 @@ export function useDeleteFieldDefinition() { if (response.status !== 204) throw new Error("delete field failed"); }, onSuccess: () => qc.invalidateQueries({ queryKey: ["field-definitions"] }), + meta: { successMessage: "toast.deleted", suppressErrorToast: true }, }); } diff --git a/web/src/api/query-client.ts b/web/src/api/query-client.ts new file mode 100644 index 0000000..66e4d58 --- /dev/null +++ b/web/src/api/query-client.ts @@ -0,0 +1,49 @@ +import { + MutationCache, + QueryClient, + type MutationMeta, +} from "@tanstack/react-query"; + +import i18n from "../i18n"; +import { toastManager } from "../toast/toast-manager"; +import { HttpError, InUseError } from "./queries"; + +function mutationErrorMessage( + error: unknown, + meta: MutationMeta | undefined, +): string { + if (meta?.errorMessage) return i18n.t(meta.errorMessage); + if (error instanceof InUseError) { + return i18n.t("actions.inUse", { count: error.count }); + } + if (error instanceof HttpError && error.status === 503) { + return i18n.t("search.unavailable"); + } + return i18n.t("toast.error"); +} + +/** Builds the app's QueryClient, including the MutationCache that bridges every + * mutation to the toast region (catch-all error toast + opt-in success toast). + * Shared by main.tsx and tests so the toast wiring stays consistent. */ +export function makeQueryClient(): QueryClient { + return new QueryClient({ + defaultOptions: { queries: { retry: false, refetchOnWindowFocus: false } }, + mutationCache: new MutationCache({ + onError: (error, _vars, _ctx, mutation) => { + if (mutation.meta?.suppressErrorToast) return; + toastManager.add({ + type: "error", + description: mutationErrorMessage(error, mutation.meta), + }); + }, + onSuccess: (_data, _vars, _ctx, mutation) => { + if (mutation.meta?.successMessage) { + toastManager.add({ + type: "success", + description: i18n.t(mutation.meta.successMessage), + }); + } + }, + }), + }); +} diff --git a/web/src/api/react-query.d.ts b/web/src/api/react-query.d.ts new file mode 100644 index 0000000..dd9231b --- /dev/null +++ b/web/src/api/react-query.d.ts @@ -0,0 +1,14 @@ +import "@tanstack/react-query"; + +declare module "@tanstack/react-query" { + interface Register { + mutationMeta: { + /** i18n key for a success toast (opt-in). */ + successMessage?: string; + /** i18n key overriding the default error toast message. */ + errorMessage?: string; + /** Skip the global error toast (the component shows the error inline). */ + suppressErrorToast?: boolean; + }; + } +} diff --git a/web/src/components/ui/toast.stories.tsx b/web/src/components/ui/toast.stories.tsx new file mode 100644 index 0000000..83f2faf --- /dev/null +++ b/web/src/components/ui/toast.stories.tsx @@ -0,0 +1,31 @@ +import type { Meta, StoryObj } from '@storybook/react-vite' +import { expect, within } from 'storybook/test' + +import { ToastRegion } from './toast' +import { toastManager } from '../../toast/toast-manager' + +const meta = { + component: ToastRegion, + tags: ['ai-generated'], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Success: Story = { + args: { children: null }, + play: async () => { + toastManager.add({ type: 'success', description: 'Saved' }) + await expect(await within(document.body).findByText('Saved')).toBeInTheDocument() + }, +} + +export const Error: Story = { + args: { children: null }, + play: async () => { + toastManager.add({ type: 'error', description: 'Something went wrong' }) + await expect( + await within(document.body).findByText('Something went wrong'), + ).toBeInTheDocument() + }, +} diff --git a/web/src/components/ui/toast.tsx b/web/src/components/ui/toast.tsx new file mode 100644 index 0000000..b4152fe --- /dev/null +++ b/web/src/components/ui/toast.tsx @@ -0,0 +1,57 @@ +import type * as React from "react"; +import { useTranslation } from "react-i18next"; +import { Toast as ToastPrimitive } from "@base-ui/react/toast"; + +import { cn } from "@/lib/utils"; +import { toastManager } from "@/toast/toast-manager"; + +function ToastList() { + const { t } = useTranslation(); + const { toasts } = ToastPrimitive.useToastManager(); + return toasts.map((toast) => ( + +
+ {toast.title && ( + + )} + +
+ + × + + + )); +} + +/** App-wide toast region: provides the external manager + a portaled viewport. */ +export function ToastRegion({ children }: { children: React.ReactNode }) { + return ( + + {children} + + + + + + + ); +} diff --git a/web/src/i18n/en.json b/web/src/i18n/en.json index 6ff7ab3..edf4743 100644 --- a/web/src/i18n/en.json +++ b/web/src/i18n/en.json @@ -1,6 +1,6 @@ { "app": { "name": "Collection" }, - "common": { "yes": "Yes", "no": "No" }, + "common": { "yes": "Yes", "no": "No", "close": "Close" }, "nav": { "objects": "Objects", "vocabularies": "Vocabularies", "authorities": "Authorities", "fields": "Fields", "search": "Search", "collapseSidebar": "Collapse sidebar", "expandSidebar": "Expand sidebar" }, "auth": { "email": "Email", "password": "Password", "signIn": "Sign in", "signOut": "Sign out", "invalid": "Invalid email or password", "networkError": "Could not reach the server" }, "objects": { "title": "Objects", "empty": "No objects yet", "loadError": "Could not load objects", "notFound": "Object not found", "prev": "Previous", "next": "Next", "of": "of", "new": "New object", "filter": "Filter objects…", "pageSize": "Per page", "columns": { "number": "Object №", "name": "Name", "visibility": "Visibility", "location": "Location", "count": "#", "updated": "Updated" }, "unknownRef": "(unknown)" }, @@ -59,5 +59,14 @@ "gateError": "Can't publish — required fields are missing.", "editLink": "Edit the record", "illegalError": "That visibility change isn't allowed." + }, + "toast": { + "created": "Created", + "saved": "Saved", + "updated": "Updated", + "deleted": "Deleted", + "renamed": "Renamed", + "published": "Visibility updated", + "error": "Something went wrong" } } diff --git a/web/src/i18n/sv.json b/web/src/i18n/sv.json index 74670d7..1ff6d5a 100644 --- a/web/src/i18n/sv.json +++ b/web/src/i18n/sv.json @@ -1,6 +1,6 @@ { "app": { "name": "Samling" }, - "common": { "yes": "Ja", "no": "Nej" }, + "common": { "yes": "Ja", "no": "Nej", "close": "Stäng" }, "nav": { "objects": "Föremål", "vocabularies": "Vokabulär", "authorities": "Auktoriteter", "fields": "Fält", "search": "Sök", "collapseSidebar": "Fäll ihop sidofältet", "expandSidebar": "Fäll ut sidofältet" }, "auth": { "email": "E-post", "password": "Lösenord", "signIn": "Logga in", "signOut": "Logga ut", "invalid": "Fel e-post eller lösenord", "networkError": "Kunde inte nå servern" }, "objects": { "title": "Föremål", "empty": "Inga föremål ännu", "loadError": "Kunde inte ladda föremål", "notFound": "Föremålet hittades inte", "prev": "Föregående", "next": "Nästa", "of": "av", "new": "Nytt föremål", "filter": "Filtrera föremål…", "pageSize": "Per sida", "columns": { "number": "Föremålsnr", "name": "Namn", "visibility": "Synlighet", "location": "Plats", "count": "Antal", "updated": "Uppdaterad" }, "unknownRef": "(okänd)" }, @@ -59,5 +59,14 @@ "gateError": "Kan inte publicera — obligatoriska fält saknas.", "editLink": "Redigera posten", "illegalError": "Den synlighetsändringen är inte tillåten." + }, + "toast": { + "created": "Skapat", + "saved": "Sparat", + "updated": "Uppdaterat", + "deleted": "Borttaget", + "renamed": "Namn ändrat", + "published": "Synlighet uppdaterad", + "error": "Något gick fel" } } diff --git a/web/src/main.tsx b/web/src/main.tsx index 0b05e74..d5eb64a 100644 --- a/web/src/main.tsx +++ b/web/src/main.tsx @@ -1,21 +1,23 @@ import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; -import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { QueryClientProvider } from "@tanstack/react-query"; import { App } from "./app"; import { ConfigProvider } from "./config/config-provider"; +import { makeQueryClient } from "./api/query-client"; +import { ToastRegion } from "./components/ui/toast"; import "./index.css"; import "./i18n"; -const queryClient = new QueryClient({ - defaultOptions: { queries: { retry: false, refetchOnWindowFocus: false } }, -}); +const queryClient = makeQueryClient(); createRoot(document.getElementById("root")!).render( - + + + , diff --git a/web/src/toast/toast-manager.ts b/web/src/toast/toast-manager.ts new file mode 100644 index 0000000..519c9f4 --- /dev/null +++ b/web/src/toast/toast-manager.ts @@ -0,0 +1,9 @@ +import { Toast } from "@base-ui/react/toast"; + +/** A toast manager created outside React so non-React code (the QueryClient + * MutationCache) can add toasts. Passed to . + * + * Note: in @base-ui/react ^1.5 `createToastManager` is only exported through + * the `Toast` namespace (index.parts), not as a top-level named export of the + * `@base-ui/react/toast` subpath — importing it directly fails at runtime. */ +export const toastManager = Toast.createToastManager();