Create test run editor

2024-04-13 00:18:11 +09:00
parent 5f9d849ee1
commit 4b2608d176
10 changed files with 238 additions and 258 deletions
--- a/frontend/app/projects/[projectId]/runs/[runId]/RunEditor.tsx
+++ b/frontend/app/projects/[projectId]/runs/[runId]/RunEditor.tsx
@@ -0,0 +1,144 @@
+"use client";
+import React from "react";
+import { useState, useEffect } from "react";
+import {
+  Button,
+  Input,
+  Textarea,
+  Select,
+  SelectItem,
+  Tooltip,
+} from "@nextui-org/react";
+import { useRouter } from "next/navigation";
+import { Save, ArrowLeft, Plus } from "lucide-react";
+import { testRunStatus } from "@/config/selection";
+import { RunType } from "@/types/run";
+import { fetchRun, updateRun } from "../runsControl";
+
+const defaultTestRun = {
+  id: 0,
+  title: "",
+  configurations: 0,
+  description: "",
+  state: 0,
+  projectId: 0,
+};
+
+type Props = {
+  projectId: string;
+  runId: string;
+};
+
+export default function RunEditor({ projectId, runId }: Props) {
+  const [testRun, setTestRun] = useState<RunType>(defaultTestRun);
+  const [isTitleInvalid, setIsTitleInvalid] = useState<boolean>(false);
+  const [isUpdating, setIsUpdating] = useState<boolean>(false);
+  const router = useRouter();
+
+  useEffect(() => {
+    async function fetchDataEffect() {
+      try {
+        const data = await fetchRun(runId);
+        setTestRun(data);
+      } catch (error) {
+        console.error("Error in effect:", error.message);
+      }
+    }
+
+    fetchDataEffect();
+  }, []);
+
+  return (
+    <>
+      <div className="border-b-1 dark:border-neutral-700 w-full p-3 flex items-center justify-between">
+        <div className="flex items-center">
+          <Tooltip content="Back to runs" placement="left">
+            <Button
+              isIconOnly
+              size="sm"
+              className="rounded-full bg-neutral-50 dark:bg-neutral-600"
+              onPress={() => router.push(`/projects/${projectId}/runs`)}
+            >
+              <ArrowLeft size={16} />
+            </Button>
+          </Tooltip>
+          <h3 className="font-bold ms-2">{testRun.title}</h3>
+        </div>
+        <Button
+          startContent={<Save size={16} />}
+          size="sm"
+          color="primary"
+          isLoading={isUpdating}
+          onPress={async () => {
+            setIsUpdating(true);
+            await updateRun(testRun);
+            setIsUpdating(false);
+          }}
+        >
+          {isUpdating ? "Updating..." : "Update"}
+        </Button>
+      </div>
+
+      <div className="container mx-auto max-w-3xl pt-6 px-6 flex-grow">
+        <Input
+          size="sm"
+          type="text"
+          variant="bordered"
+          label="Title"
+          value={testRun.title}
+          isInvalid={isTitleInvalid}
+          errorMessage={isTitleInvalid ? "please enter title" : ""}
+          onChange={(e) => {
+            setTestRun({ ...testRun, title: e.target.value });
+          }}
+          className="mt-3"
+        />
+
+        <Button
+          startContent={<Plus size={16} />}
+          size="sm"
+          color="primary"
+          onPress={async () => {}}
+          className="mt-3"
+        >
+          Select test case
+        </Button>
+
+        <Textarea
+          size="sm"
+          variant="bordered"
+          label="Description"
+          placeholder="Test run description"
+          value={testRun.description}
+          onValueChange={(changeValue) => {
+            setTestRun({ ...testRun, description: changeValue });
+          }}
+          className="mt-3"
+        />
+
+        <div>
+          <Select
+            size="sm"
+            variant="bordered"
+            selectedKeys={[testRunStatus[testRun.state].uid]}
+            onSelectionChange={(e) => {
+              const selectedUid = e.anchorKey;
+              const index = testRunStatus.findIndex(
+                (template) => template.uid === selectedUid
+              );
+              setTestRun({ ...testRun, state: index });
+            }}
+            label="template"
+            className="mt-3 max-w-xs"
+          >
+            {testRunStatus.map((state, index) => (
+              <SelectItem key={state.uid} value={index}>
+                {state.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </div>
+      </div>
+    </>
+  );
+}