Update run options when selecting a recent run

myftija · myftija · commit 2da25167379d · 2025-07-07T09:30:21.000+02:00
diff --git a/apps/webapp/app/components/primitives/DurationPicker.tsx b/apps/webapp/app/components/primitives/DurationPicker.tsx
@@ -7,6 +7,7 @@ export interface DurationPickerProps {
   id?: string; // used for the hidden input for form submission
   name?: string; // used for the hidden input for form submission
   defaultValueSeconds?: number;
+  value?: number;
   onChange?: (totalSeconds: number) => void;
   variant?: "small" | "medium";
   showClearButton?: boolean;
@@ -15,13 +16,17 @@ export interface DurationPickerProps {
 export function DurationPicker({
   name,
   defaultValueSeconds: defaultValue = 0,
+  value: controlledValue,
   onChange,
   variant = "small",
   showClearButton = true,
 }: DurationPickerProps) {
-  const defaultHours = Math.floor(defaultValue / 3600);
-  const defaultMinutes = Math.floor((defaultValue % 3600) / 60);
-  const defaultSeconds = defaultValue % 60;
+  // Use controlled value if provided, otherwise use default
+  const initialValue = controlledValue ?? defaultValue;
+
+  const defaultHours = Math.floor(initialValue / 3600);
+  const defaultMinutes = Math.floor((initialValue % 3600) / 60);
+  const defaultSeconds = initialValue % 60;
 
   const [hours, setHours] = useState<number>(defaultHours);
   const [minutes, setMinutes] = useState<number>(defaultMinutes);
@@ -35,6 +40,19 @@ export function DurationPicker({
 
   const isEmpty = hours === 0 && minutes === 0 && seconds === 0;
 
+  // Sync internal state with external value changes
+  useEffect(() => {
+    if (controlledValue !== undefined && controlledValue !== totalSeconds) {
+      const newHours = Math.floor(controlledValue / 3600);
+      const newMinutes = Math.floor((controlledValue % 3600) / 60);
+      const newSeconds = controlledValue % 60;
+
+      setHours(newHours);
+      setMinutes(newMinutes);
+      setSeconds(newSeconds);
+    }
+  }, [controlledValue]);
+
   useEffect(() => {
     onChange?.(totalSeconds);
   }, [totalSeconds, onChange]);
diff --git a/apps/webapp/app/components/runs/v3/RunTagInput.tsx b/apps/webapp/app/components/runs/v3/RunTagInput.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useState, type KeyboardEvent } from "react";
+import { useCallback, useState, useEffect, type KeyboardEvent } from "react";
 import { AnimatePresence, motion } from "framer-motion";
 import { Input } from "~/components/primitives/Input";
 import { RunTag } from "./RunTag";
@@ -7,6 +7,7 @@ interface TagInputProps {
   id?: string; // used for the hidden input for form submission
   name?: string; // used for the hidden input for form submission
   defaultTags?: string[];
+  tags?: string[];
   placeholder?: string;
   variant?: "small" | "medium";
   maxTags?: number;
@@ -18,15 +19,26 @@ export function RunTagInput({
   id,
   name,
   defaultTags = [],
+  tags: controlledTags,
   placeholder = "Type and press Enter to add tags",
   variant = "small",
   maxTags = 10,
   maxTagLength = 128,
   onTagsChange,
 }: TagInputProps) {
-  const [tags, setTags] = useState<string[]>(defaultTags);
+  // Use controlled tags if provided, otherwise use default
+  const initialTags = controlledTags ?? defaultTags;
+
+  const [tags, setTags] = useState<string[]>(initialTags);
   const [inputValue, setInputValue] = useState("");
 
+  // Sync internal state with external tag changes
+  useEffect(() => {
+    if (controlledTags !== undefined) {
+      setTags(controlledTags);
+    }
+  }, [controlledTags]);
+
   const addTag = useCallback(
     (tagText: string) => {
       const trimmedTag = tagText.trim();
diff --git a/apps/webapp/app/presenters/v3/TestTaskPresenter.server.ts b/apps/webapp/app/presenters/v3/TestTaskPresenter.server.ts
@@ -4,6 +4,7 @@ import { type PrismaClient, prisma, sqlDatabaseSchema } from "~/db.server";
 import { getTimezones } from "~/utils/timezones.server";
 import { findCurrentWorkerDeployment } from "~/v3/models/workerDeployment.server";
 import { queueTypeFromType } from "./QueueRetrievePresenter.server";
+import parse from "parse-duration";
 
 type TestTaskOptions = {
   userId: string;
@@ -70,20 +71,30 @@ type RawRun = {
   runtimeEnvironmentId: string;
   seedMetadata?: string;
   seedMetadataType?: string;
+  concurrencyKey?: string;
+  maxAttempts?: number;
+  maxDurationInSeconds?: number;
+  machinePreset?: string;
+  ttl?: string;
+  idempotencyKey?: string;
+  runTags: string[];
 };
 
-export type StandardRun = Omit<RawRun, "number"> & {
+export type StandardRun = Omit<RawRun, "number" | "ttl"> & {
   number: number;
+  metadata?: string;
+  ttlSeconds?: number;
 };
 
-export type ScheduledRun = Omit<RawRun, "number" | "payload"> & {
+export type ScheduledRun = Omit<RawRun, "number" | "payload" | "ttl"> & {
   number: number;
   payload: {
     timestamp: Date;
     lastTimestamp?: Date;
     externalId?: string;
     timezone: string;
   };
+  ttlSeconds?: number;
 };
 
 export class TestTaskPresenter {
@@ -148,7 +159,7 @@ export class TestTaskPresenter {
           createdAt: "desc",
         },
         // only the latest version has active workers in development,
-        // so we hide the older versions to avoid runs getting stuck
+        // so we hide the older versions to avoid confusion from stuck runs
         take: environment.type === "DEVELOPMENT" ? 1 : 20,
       })
     ).map((v) => v.version);
@@ -182,7 +193,13 @@ export class TestTaskPresenter {
         taskr."payloadType",
         taskr."seedMetadata",
         taskr."seedMetadataType",
-        taskr."runtimeEnvironmentId"
+        taskr."runtimeEnvironmentId",
+        taskr."concurrencyKey",
+        taskr."maxAttempts",
+        taskr."maxDurationInSeconds",
+        taskr."machinePreset",
+        taskr."ttl",
+        taskr."runTags"
     FROM
         taskruns AS taskr
     WHERE
@@ -223,7 +240,8 @@ export class TestTaskPresenter {
                   metadata: r.seedMetadata
                     ? await prettyPrintPacket(r.seedMetadata, r.seedMetadataType)
                     : undefined,
-                };
+                  ttlSeconds: r.ttl ? parse(r.ttl, "s") ?? undefined : undefined,
+                } satisfies StandardRun;
               })
             ),
             latestVersions,
@@ -249,7 +267,8 @@ export class TestTaskPresenter {
                       ...r,
                       number,
                       payload: payload.data,
-                    };
+                      ttlSeconds: r.ttl ? parse(r.ttl, "s") ?? undefined : undefined,
+                    } satisfies ScheduledRun;
                   }
                 })
               )
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/route.tsx
@@ -238,6 +238,19 @@ function StandardTaskForm({
 
   const currentMetadataJson = useRef<string>(defaultMetadataJson);
 
+  const [ttlValue, setTtlValue] = useState<number | undefined>(selectedCodeSample?.ttlSeconds);
+  const [concurrencyKeyValue, setConcurrencyKeyValue] = useState<string | undefined>(
+    selectedCodeSample?.concurrencyKey
+  );
+  const [queueValue, setQueueValue] = useState<string | undefined>(selectedCodeSample?.queue);
+  const [maxAttemptsValue, setMaxAttemptsValue] = useState<number | undefined>(
+    selectedCodeSample?.maxAttempts
+  );
+  const [maxDurationValue, setMaxDurationValue] = useState<number | undefined>(
+    selectedCodeSample?.maxDurationInSeconds
+  );
+  const [tagsValue, setTagsValue] = useState<string[]>(selectedCodeSample?.runTags ?? []);
+
   const queueFetcher = useFetcher<typeof queuesLoader>();
 
   useEffect(() => {
@@ -402,7 +415,12 @@ function StandardTaskForm({
               </InputGroup>
               <InputGroup>
                 <Label>TTL</Label>
-                <DurationPicker name={ttlSeconds.name} id={ttlSeconds.id} />
+                <DurationPicker
+                  name={ttlSeconds.name}
+                  id={ttlSeconds.id}
+                  value={ttlValue}
+                  onChange={setTtlValue}
+                />
                 <FormError id={ttlSeconds.errorId}>{ttlSeconds.error}</FormError>
               </InputGroup>
               <InputGroup>
@@ -430,7 +448,8 @@ function StandardTaskForm({
                   dropdownIcon
                   items={queues}
                   filter={{ keys: ["label"] }}
-                  defaultValue={undefined}
+                  value={queueValue}
+                  setValue={setQueueValue}
                 >
                   {(matches) =>
                     matches.map((queueItem) => (
@@ -461,7 +480,12 @@ function StandardTaskForm({
               </InputGroup>
               <InputGroup>
                 <Label htmlFor={concurrencyKey.id}>Concurrency key</Label>
-                <Input {...conform.input(concurrencyKey, { type: "text" })} variant="small" />
+                <Input
+                  {...conform.input(concurrencyKey, { type: "text" })}
+                  variant="small"
+                  value={concurrencyKeyValue ?? ""}
+                  onChange={(e) => setConcurrencyKeyValue(e.target.value)}
+                />
                 <FormError id={concurrencyKey.errorId}>{concurrencyKey.error}</FormError>
               </InputGroup>
               <InputGroup>
@@ -471,6 +495,10 @@ function StandardTaskForm({
                   className="[&::-webkit-inner-spin-button]:appearance-none"
                   variant="small"
                   min={1}
+                  value={maxAttemptsValue}
+                  onChange={(e) =>
+                    setMaxAttemptsValue(e.target.value ? parseInt(e.target.value) : undefined)
+                  }
                   onKeyDown={(e) => {
                     // only allow entering integers > 1
                     if (["-", "+", ".", "e", "E"].includes(e.key)) {
@@ -488,12 +516,23 @@ function StandardTaskForm({
               </InputGroup>
               <InputGroup>
                 <Label>Max duration</Label>
-                <DurationPicker name={maxDurationSeconds.name} id={maxDurationSeconds.id} />
+                <DurationPicker
+                  name={maxDurationSeconds.name}
+                  id={maxDurationSeconds.id}
+                  value={maxDurationValue}
+                  onChange={setMaxDurationValue}
+                />
                 <FormError id={maxDurationSeconds.errorId}>{maxDurationSeconds.error}</FormError>
               </InputGroup>
               <InputGroup>
                 <Label htmlFor={tags.id}>Tags</Label>
-                <RunTagInput name={tags.name} id={tags.id} variant="small" />
+                <RunTagInput
+                  name={tags.name}
+                  id={tags.id}
+                  variant="small"
+                  tags={tagsValue}
+                  onTagsChange={setTagsValue}
+                />
                 <FormError id={tags.errorId}>{tags.error}</FormError>
               </InputGroup>
               <InputGroup>
@@ -554,6 +593,12 @@ function StandardTaskForm({
                         run.seedMetadata && setMetadata(run.seedMetadata);
                         setSelectedCodeSampleId(run.id);
                         setIsRecentRunsPopoverOpen(false);
+                        setTtlValue(run.ttlSeconds);
+                        setConcurrencyKeyValue(run.concurrencyKey);
+                        setMaxAttemptsValue(run.maxAttempts);
+                        setMaxDurationValue(run.maxDurationInSeconds);
+                        setTagsValue(run.runTags ?? []);
+                        setQueueValue(run.queue);
                       }}
                       className="flex w-full items-center gap-2 rounded-sm px-2 py-2 outline-none transition-colors focus-custom hover:bg-charcoal-900	"
                     >
