feat(web): shared status-aware error-message helper + MutationError component (#63)

web/src/components/mutation-error.test.tsx

@@ -0,0 +1,21 @@
+import { expect, test } from "vitest";
+import { render, screen } from "@testing-library/react";
+
+import "../i18n";
+import { MutationError } from "./mutation-error";
+import { HttpError, InUseError } from "../api/queries";
+
+test("renders the status-specific message for an HttpError", () => {
+  render(<MutationError error={new HttpError(403)} />);
+  expect(screen.getByRole("alert")).toHaveTextContent(/permission/i);
+});
+
+test("renders the in-use count for an InUseError", () => {
+  render(<MutationError error={new InUseError(2)} />);
+  expect(screen.getByRole("alert")).toHaveTextContent(/2/);
+});
+
+test("renders nothing when there is no error", () => {
+  const { container } = render(<MutationError error={null} />);
+  expect(container).toBeEmptyDOMElement();
+});

web/src/components/mutation-error.tsx

@@ -0,0 +1,16 @@
+import { useTranslation } from "react-i18next";
+
+import { errorMessageKey } from "../api/error-message";
+
+/** Renders a caught mutation error as an inline alert, or nothing when error is falsy.
+ *  Replaces the duplicated `<p role="alert" className="text-xs text-destructive">` markup. */
+export function MutationError({ error }: { error: unknown }) {
+  const { t } = useTranslation();
+  if (!error) return null;
+  const { key, opts } = errorMessageKey(error);
+  return (
+    <p role="alert" className="text-xs text-destructive">
+      {t(key, opts)}
+    </p>
+  );
+}