yellowadmin/pp-tcms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Create test run editor

Browse Source
This commit is contained in:
Takeshi Kimata
2024-04-10 22:18:48 +09:00
parent b0c2168463
commit 5f9d849ee1
2 changed files with 132 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
frontend/app/projects/[projectId]/runs/RunDialog.tsx
View File

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

11
frontend/config/selection.ts
View File

@@ -33,4 +33,13 @@ const templates = [
{ name: "Step", uid: "step-template" }, { 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 };