Add skill tags to accept submission dialog

Author: codex

web/src/api/client.test.ts

@@ -375,7 +375,11 @@ describe("API functions", () => {
 
   it("accept() calls POST with stamp data", async () => {
     setActiveUpstream("hop/wl-commons");
-    await accept("abc", { quality: 5, reliability: 4 });
+    await accept("abc", {
+      quality: 5,
+      reliability: 4,
+      skill_tags: ["ops", "review"],
+    });
     const call = vi.mocked(globalThis.fetch).mock.calls[0];
     expect(call[0]).toBe("/api/wanted/abc/accept");
     expect(call[1]?.headers).toEqual(
@@ -387,6 +391,7 @@ describe("API functions", () => {
     expect(JSON.parse(call[1]?.body as string)).toEqual({
       quality: 5,
       reliability: 4,
+      skill_tags: ["ops", "review"],
     });
   });
 
@@ -398,7 +403,12 @@ describe("API functions", () => {
         rig_handle: "charlie",
         pr_url: "https://www.dolthub.com/repositories/org/db/pulls/1",
       },
-      { quality: 5, reliability: 4, severity: "branch" },
+      {
+        quality: 5,
+        reliability: 4,
+        severity: "branch",
+        skill_tags: ["go", "sql"],
+      },
     );
     const call = vi.mocked(globalThis.fetch).mock.calls[0];
     expect(call[0]).toBe("/api/wanted/abc/accept-upstream");
@@ -415,6 +425,7 @@ describe("API functions", () => {
       quality: 5,
       reliability: 4,
       severity: "branch",
+      skill_tags: ["go", "sql"],
     });
   });
 

web/src/components/AcceptDialog.module.css

@@ -47,6 +47,7 @@
 }
 
 .select,
+.input,
 .textarea {
   width: 100%;
   box-sizing: border-box;
@@ -128,6 +129,7 @@
   .cancelBtn,
   .confirmBtn,
   .select,
+  .input,
   .textarea {
     min-height: 44px;
   }

web/src/components/AcceptDialog.tsx

@@ -6,6 +6,7 @@ export interface AcceptStampInput {
   quality: number;
   reliability?: number;
   severity?: string;
+  skill_tags?: string[];
   message?: string;
 }
 
@@ -22,6 +23,7 @@ export function AcceptDialog({ label, submitting, onCancel, onSubmit }: AcceptDi
   const [quality, setQuality] = useState("5");
   const [reliability, setReliability] = useState("");
   const [severity, setSeverity] = useState("leaf");
+  const [skillTags, setSkillTags] = useState("");
   const [message, setMessage] = useState("");
 
   useEffect(() => {
@@ -33,10 +35,15 @@ export function AcceptDialog({ label, submitting, onCancel, onSubmit }: AcceptDi
   }, [onCancel, submitting]);
 
   const submit = async () => {
+    const parsedTags = skillTags
+      .split(",")
+      .map((tag) => tag.trim())
+      .filter(Boolean);
     await onSubmit({
       quality: Number(quality),
       reliability: reliability ? Number(reliability) : undefined,
       severity,
+      skill_tags: parsedTags.length > 0 ? parsedTags : undefined,
       message: message.trim() || undefined,
     });
   };
@@ -103,6 +110,18 @@ export function AcceptDialog({ label, submitting, onCancel, onSubmit }: AcceptDi
           </select>
         </label>
 
+        <label className={styles.field}>
+          <span className={styles.label}>Tags</span>
+          <input
+            className={styles.input}
+            type="text"
+            value={skillTags}
+            onChange={(e) => setSkillTags(e.target.value)}
+            placeholder="go, sql, testing"
+            disabled={submitting}
+          />
+        </label>
+
         <label className={styles.field}>
           <span className={styles.label}>Message</span>
           <textarea

web/src/components/DetailView.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { MemoryRouter, Route, Routes } from "react-router-dom";
 import { afterEach, describe, expect, it, vi } from "vitest";
@@ -59,6 +59,7 @@ function renderDetail(id = "item-1") {
 let cleanupFetch: () => void;
 
 afterEach(() => {
+  cleanup();
   setActiveUpstream(null);
   localStorage.removeItem("wl_active");
   cleanupFetch?.();
@@ -525,17 +526,28 @@ describe("DetailView", () => {
         screen.getByRole("button", { name: "accept" }),
       ).toBeInTheDocument(),
     );
-    await userEvent.click(screen.getByRole("button", { name: "accept" }));
+    fireEvent.click(screen.getByRole("button", { name: "accept" }));
     await waitFor(() =>
       expect(
         screen.getByRole("dialog", { name: "Accept Submission" }),
       ).toBeInTheDocument(),
     );
-    await userEvent.selectOptions(screen.getByLabelText("Quality"), "4");
-    await userEvent.selectOptions(screen.getByLabelText("Reliability"), "3");
-    await userEvent.selectOptions(screen.getByLabelText("Severity"), "branch");
-    await userEvent.type(screen.getByLabelText("Message"), "Solid review");
-    await userEvent.click(screen.getByRole("button", { name: "Accept" }));
+    fireEvent.change(screen.getByLabelText("Quality"), {
+      target: { value: "4" },
+    });
+    fireEvent.change(screen.getByLabelText("Reliability"), {
+      target: { value: "3" },
+    });
+    fireEvent.change(screen.getByLabelText("Severity"), {
+      target: { value: "branch" },
+    });
+    fireEvent.change(screen.getByLabelText("Tags"), {
+      target: { value: "go, sql" },
+    });
+    fireEvent.change(screen.getByLabelText("Message"), {
+      target: { value: "Solid review" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Accept" }));
     await waitFor(() => {
       const acceptCalls = fetchFn.mock.calls.filter(([u]) =>
         u.endsWith("/accept-upstream"),
@@ -548,11 +560,12 @@ describe("DetailView", () => {
           quality: 4,
           reliability: 3,
           severity: "branch",
+          skill_tags: ["go", "sql"],
           message: "Solid review",
         }),
       );
     });
-  });
+  }, 10000);
 
   it("opens an accept dialog for mainline acceptance and lets reliability default to quality", async () => {
     setActiveUpstream("hop/wl-commons");
@@ -573,16 +586,21 @@ describe("DetailView", () => {
         screen.getByRole("button", { name: "accept" }),
       ).toBeInTheDocument(),
     );
-    await userEvent.click(screen.getByRole("button", { name: "accept" }));
+    fireEvent.click(screen.getByRole("button", { name: "accept" }));
     expect(
       screen.getByRole("dialog", { name: "Accept Submission" }),
     ).toBeInTheDocument();
     expect(
       fetchFn.mock.calls.filter(([u]) => u.endsWith("/accept")),
     ).toHaveLength(0);
 
-    await userEvent.selectOptions(screen.getByLabelText("Quality"), "5");
-    await userEvent.click(screen.getByRole("button", { name: "Accept" }));
+    fireEvent.change(screen.getByLabelText("Quality"), {
+      target: { value: "5" },
+    });
+    fireEvent.change(screen.getByLabelText("Tags"), {
+      target: { value: "ops, review" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Accept" }));
 
     await waitFor(() => {
       const acceptCalls = fetchFn.mock.calls.filter(([u]) =>
@@ -593,10 +611,11 @@ describe("DetailView", () => {
         JSON.stringify({
           quality: 5,
           severity: "leaf",
+          skill_tags: ["ops", "review"],
         }),
       );
     });
-  });
+  }, 10000);
 
   it("reloads detail after a conflicting mainline accept", async () => {
     setActiveUpstream("hop/wl-commons");