Create test run editor

frontend/app/projects/[projectId]/runs/RunDialog.tsx

@@ -5,19 +5,31 @@ import {
   Button,
   Input,
   Textarea,
+  Select,
+  SelectItem,
   Modal,
   ModalContent,
   ModalHeader,
   ModalBody,
   ModalFooter,
 } from "@nextui-org/react";
+import { testRunStatus } from "@/config/selection";
 import { RunType } from "@/types/run";
 
+const defaultTestRun = {
+  id: 0,
+  name: "",
+  configurations: 0,
+  description: "",
+  state: 0,
+  projectId: 0,
+};
+
 type Props = {
   isOpen: boolean;
   editingRun: RunType;
   onCancel: () => void;
-  onSubmit: (name: string, detail: string) => void;
+  onSubmit: (testRun: RunType) => void;
 };
 
 export default function RunDialog({
@@ -26,73 +38,71 @@ export default function RunDialog({
   onCancel,
   onSubmit,
 }: Props) {
-  const [runName, setRunName] = useState({
+  const [testRun, setTestRun] = useState<RunType>(
-    text: editingRun ? editingRun.name : "",
+    editingRun ? editingRun : defaultTestRun
-    isValid: false,
+  );
-    errorMessage: "",
+  const [isNameInvalid, setIsNameInvalid] = useState<boolean>(false);
-  });
 
-  const [runDetail, setRunDetail] = useState({
+  // const [runName, setRunName] = useState({
-    text: editingRun ? editingRun.detail : "",
+  //   text: editingRun ? editingRun.name : "",
-    isValid: false,
+  //   isValid: false,
-    errorMessage: "",
+  //   errorMessage: "",
-  });
+  // });
 
-  useEffect(() => {
+  // const [runDetail, setRunDetail] = useState({
-    if (editingRun) {
+  //   text: editingRun ? editingRun.detail : "",
-      setRunName({
+  //   isValid: false,
-        ...runName,
+  //   errorMessage: "",
-        text: editingRun.name,
+  // });
-      });
 
-      setRunDetail({
+  // useEffect(() => {
-        ...runDetail,
+  //   if (editingRun) {
-        text: editingRun.detail ? editingRun.detail : "",
+  //     setRunName({
-      });
+  //       ...runName,
-    } else {
+  //       text: editingRun.name,
-      setRunName({
+  //     });
-        ...runName,
-        text: "",
-      });
 
-      setRunDetail({
+  //     setRunDetail({
-        ...runDetail,
+  //       ...runDetail,
-        text: "",
+  //       text: editingRun.detail ? editingRun.detail : "",
-      });
+  //     });
-    }
+  //   } else {
-  }, [editingRun]);
+  //     setRunName({
+  //       ...runName,
+  //       text: "",
+  //     });
 
-  const clear = () => {
+  //     setRunDetail({
-    setRunName({
+  //       ...runDetail,
-      isValid: false,
+  //       text: "",
-      text: "",
+  //     });
-      errorMessage: "",
+  //   }
-    });
+  // }, [editingRun]);
-    setRunDetail({
+
-      isValid: false,
+  // const clear = () => {
-      text: "",
+  //   setRunName({
-      errorMessage: "",
+  //     isValid: false,
-    });
+  //     text: "",
-  };
+  //     errorMessage: "",
+  //   });
+  //   setRunDetail({
+  //     isValid: false,
+  //     text: "",
+  //     errorMessage: "",
+  //   });
+  // };
 
   const validate = () => {
-    if (!runName.text) {
+    // do validation
-      setRunName({
-        text: "",
-        isValid: false,
-        errorMessage: "Please enter run name",
-      });
 
-      return;
+    onSubmit(testRun);
-    }
+    // clear();
-
-    onSubmit(runName.text, runDetail.text);
-    clear();
   };
 
   return (
     <Modal
       isOpen={isOpen}
+      size="3xl"
       onOpenChange={() => {
         onCancel();
       }}
@@ -100,31 +110,63 @@ export default function RunDialog({
       <ModalContent>
         <ModalHeader className="flex flex-col gap-1">Run</ModalHeader>
         <ModalBody>
+          <div className="container mx-auto">
+            <div className="flex flex-wrap-mx-4">
+              <div className="w-1/2 px-4">
                 <Input
+                  size="sm"
                   type="text"
+                  variant="bordered"
                   label="Run Name"
-            value={runName.text}
+                  value={testRun.name}
-            isInvalid={runName.isValid}
+                  isInvalid={isNameInvalid}
-            errorMessage={runName.errorMessage}
+                  errorMessage={isNameInvalid ? "please enter name" : ""}
                   onChange={(e) => {
-              setRunName({
+                    setTestRun({ ...testRun, name: e.target.value });
-                ...runName,
-                text: e.target.value,
-              });
                   }}
+                  className="mt-3"
                 />
+
                 <Textarea
+                  size="sm"
+                  variant="bordered"
                   label="Run Detail"
-            value={runDetail.text}
+                  value={testRun.description}
-            isInvalid={runDetail.isValid}
+                  onValueChange={(changeValue) => {
-            errorMessage={runDetail.errorMessage}
+                    setTestRun({ ...testRun, description: changeValue });
-            onChange={(e) => {
-              setRunDetail({
-                ...runDetail,
-                text: e.target.value,
-              });
                   }}
+                  className="mt-3"
                 />
+
+                <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 className="w-1/2 px-4">
+                <Button color="primary" onPress={onCancel}>
+                  Select Test Cases
+                </Button>
+              </div>
+            </div>
+          </div>
         </ModalBody>
         <ModalFooter>
           <Button variant="light" onPress={onCancel}>

frontend/config/selection.ts

@@ -33,4 +33,13 @@ const templates = [
   { name: "Step", uid: "step-template" },
 ];
 
-export { priorities, testTypes, automationStatus, templates };
+const testRunStatus = [
+  { name: "New", uid: "new" },
+  { name: "In progress", uid: "in-progress" },
+  { name: "Under review", uid: "under-review" },
+  { name: "Rejected", uid: "rejected" },
+  { name: "Done", uid: "done" },
+  { name: "Closed", uid: "closed" },
+]
+
+export { priorities, testTypes, automationStatus, templates, testRunStatus };