review fixes

Author: carderne

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.apikeys/route.tsx

@@ -7,9 +7,9 @@ import {
   PlusIcon,
 } from "@heroicons/react/20/solid";
 import { DialogClose } from "@radix-ui/react-dialog";
-import { type MetaFunction, Form, useFetcher, useSearchParams } from "@remix-run/react";
+import { type MetaFunction, Form, useSearchParams } from "@remix-run/react";
 import { useEffect, useState } from "react";
-import { typedjson, useTypedLoaderData } from "remix-typedjson";
+import { typedjson, useTypedFetcher, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
 import { AdminDebugTooltip } from "~/components/admin/debugTooltip";
 import { CopyableText } from "~/components/primitives/CopyableText";
@@ -104,7 +104,7 @@ const CreateApiKeySchema = z.object({
   presetId: z.string().trim().min(1),
   taskScope: z.enum(["all", "selected"]).optional(),
   taskIdentifiers: z
-    .array(z.string())
+    .array(z.string().trim().min(1, "Task identifiers cannot be blank"))
     .max(MAX_API_KEY_TASK_IDENTIFIERS, {
       message: `You can select at most ${MAX_API_KEY_TASK_IDENTIFIERS} tasks`,
     })
@@ -560,8 +560,9 @@ function NewApiKeyDialog({
   availableTasks: string[];
   presets: ApiKeyPreset[] | null;
 }) {
-  const fetcher = useFetcher<typeof action>();
+  const fetcher = useTypedFetcher<typeof action>();
   const actionData = fetcher.data as ApiKeyActionData | undefined;
+  const [showError, setShowError] = useState(false);
   const [open, setOpen] = useState(false);
   const [name, setName] = useState("");
   const [expiresAt, setExpiresAt] = useState<Date>();
@@ -572,8 +573,14 @@ function NewApiKeyDialog({
   const [createdApiKey, setCreatedApiKey] = useState<string>();
 
   useEffect(() => {
-    if (fetcher.state === "idle" && actionData?.ok && actionData.action === "create") {
+    if (fetcher.state !== "idle") {
+      return;
+    }
+
+    if (actionData?.ok && actionData.action === "create") {
       setCreatedApiKey(actionData.apiKey);
+    } else if (actionData && !actionData.ok) {
+      setShowError(true);
     }
   }, [actionData, fetcher.state]);
 
@@ -593,6 +600,7 @@ function NewApiKeyDialog({
           setTaskScope("all");
           setSelectedTasks([]);
           setCreatedApiKey(undefined);
+          setShowError(false);
         }
       }}
     >
@@ -635,7 +643,7 @@ function NewApiKeyDialog({
             />
           </div>
         ) : (
-          <fetcher.Form method="post">
+          <fetcher.Form method="post" onSubmit={() => setShowError(false)}>
             <input type="hidden" name="action" value="create" />
             {expiresAt ? (
               <input type="hidden" name="expiresAt" value={expiresAt.toISOString()} />
@@ -741,7 +749,7 @@ function NewApiKeyDialog({
                 </InputGroup>
               ) : null}
 
-              {actionData && !actionData.ok ? (
+              {showError && actionData && !actionData.ok ? (
                 <Paragraph variant="small" className="text-error">
                   {actionData.error}
                 </Paragraph>

apps/webapp/test/publicTokensRoute.test.ts

@@ -203,7 +203,7 @@ describe("POST /api/v1/auth/public-tokens", () => {
     // A single parse governs both the cap check and the claim.
     const exp = (validation as { payload: { exp: number } }).payload.exp;
     expect(exp).toBeGreaterThanOrEqual(before + 600);
-    expect(exp).toBeLessThanOrEqual(before + 601);
+    expect(exp).toBeLessThanOrEqual(before + 605);
   });
 
   it("does not allow a public JWT bearer to mint another token", async () => {