Implemented test run editor's test case selection
This commit is contained in:
Takeshi Kimata
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
import React from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import {
|
||||
Button,
|
||||
Input,
|
||||
@@ -11,9 +12,21 @@ import {
|
||||
Listbox,
|
||||
ListboxItem,
|
||||
Divider,
|
||||
Selection,
|
||||
DropdownTrigger,
|
||||
Dropdown,
|
||||
DropdownMenu,
|
||||
DropdownItem,
|
||||
} from "@nextui-org/react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Save, ArrowLeft, Folder } from "lucide-react";
|
||||
import {
|
||||
Save,
|
||||
ArrowLeft,
|
||||
Folder,
|
||||
ChevronDown,
|
||||
CopyPlus,
|
||||
CopyMinus,
|
||||
} from "lucide-react";
|
||||
import TestCaseSelector from "./TestCaseSelector";
|
||||
import { testRunStatus } from "@/config/selection";
|
||||
import { RunType } from "@/types/run";
|
||||
import { FolderType } from "@/types/folder";
|
||||
@@ -38,8 +51,9 @@ type Props = {
|
||||
export default function RunEditor({ projectId, runId }: Props) {
|
||||
const [testRun, setTestRun] = useState<RunType>(defaultTestRun);
|
||||
const [folders, setFolders] = useState([]);
|
||||
const [testcases, setTestCases] = useState([]);
|
||||
const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set([]));
|
||||
const [selectedFolder, setSelectedFolder] = useState<FolderType>({});
|
||||
const [testcases, setTestCases] = useState([]);
|
||||
const [isNameInvalid, setIsNameInvalid] = useState<boolean>(false);
|
||||
const [isUpdating, setIsUpdating] = useState<boolean>(false);
|
||||
const router = useRouter();
|
||||
@@ -74,6 +88,18 @@ export default function RunEditor({ projectId, runId }: Props) {
|
||||
fetchCasesData();
|
||||
}, [selectedFolder]);
|
||||
|
||||
const onIncludeExcludeClick = async (mode: string) => {
|
||||
console.log(mode)
|
||||
if (selectedKeys === "all") {
|
||||
const allKeys = testcases.map((item) => item.id);
|
||||
console.log(allKeys);
|
||||
} else {
|
||||
console.log([...selectedKeys]);
|
||||
}
|
||||
|
||||
setSelectedKeys(new Set([]));
|
||||
};
|
||||
|
||||
const baseClass = "";
|
||||
const selectedClass = `${baseClass} bg-neutral-200 dark:bg-neutral-700`;
|
||||
|
||||
@@ -160,7 +186,41 @@ export default function RunEditor({ projectId, runId }: Props) {
|
||||
</div>
|
||||
|
||||
<Divider className="my-6" />
|
||||
<h6>Select test cases</h6>
|
||||
<div className="flex items-center justify-between">
|
||||
<h6 className="h-8">Select test cases</h6>
|
||||
<div>
|
||||
{selectedKeys.size > 0 || selectedKeys === "all" ? (
|
||||
<Dropdown>
|
||||
<DropdownTrigger>
|
||||
<Button
|
||||
size="sm"
|
||||
color="primary"
|
||||
endContent={<ChevronDown size={16} />}
|
||||
>
|
||||
Test case selection
|
||||
</Button>
|
||||
</DropdownTrigger>
|
||||
<DropdownMenu aria-label="test case select actions">
|
||||
<DropdownItem
|
||||
startContent={<CopyPlus size={16} />}
|
||||
onClick={() => onIncludeExcludeClick("include")}
|
||||
>
|
||||
Include in run
|
||||
</DropdownItem>
|
||||
<DropdownItem
|
||||
startContent={<CopyMinus size={16} />}
|
||||
onClick={() => onIncludeExcludeClick("exclude")}
|
||||
>
|
||||
Exclude from run
|
||||
</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-3 flex rounded-small border-2 dark:border-neutral-700">
|
||||
<div className="w-3/12 border-r-1 dark:border-neutral-700">
|
||||
<Listbox aria-label="Listbox Variants" variant="light">
|
||||
@@ -182,10 +242,13 @@ export default function RunEditor({ projectId, runId }: Props) {
|
||||
))}
|
||||
</Listbox>
|
||||
</div>
|
||||
<div className="">
|
||||
{testcases.map((testcase, index) => (
|
||||
<div key={index}>{testcase.title}</div>
|
||||
))}
|
||||
<div className="w-9/12">
|
||||
<TestCaseSelector
|
||||
projectId={projectId}
|
||||
cases={testcases}
|
||||
selectedKeys={selectedKeys}
|
||||
onSelectionChange={setSelectedKeys}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,179 @@
|
||||
import { useState, useMemo, useCallback } from "react";
|
||||
import {
|
||||
Table,
|
||||
TableHeader,
|
||||
TableColumn,
|
||||
TableBody,
|
||||
TableRow,
|
||||
TableCell,
|
||||
Button,
|
||||
Chip,
|
||||
DropdownTrigger,
|
||||
Dropdown,
|
||||
DropdownMenu,
|
||||
DropdownItem,
|
||||
Selection,
|
||||
SortDescriptor,
|
||||
Link,
|
||||
} from "@nextui-org/react";
|
||||
import { Plus, MoreVertical, Trash } from "lucide-react";
|
||||
|
||||
const headerColumns = [
|
||||
{ name: "ID", uid: "id", sortable: true },
|
||||
{ name: "Title", uid: "title", sortable: true },
|
||||
{ name: "Priority", uid: "priority", sortable: true },
|
||||
{ name: "Actions", uid: "actions" },
|
||||
];
|
||||
|
||||
import { priorities } from "@/config/selection";
|
||||
|
||||
type Case = {
|
||||
id: number;
|
||||
title: string;
|
||||
state: number;
|
||||
priority: number;
|
||||
type: number;
|
||||
automationStatus: number;
|
||||
description: string;
|
||||
template: number;
|
||||
preConditions: string;
|
||||
expectedResults: string;
|
||||
folderId: number;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
};
|
||||
|
||||
type Props = {
|
||||
projectId: string;
|
||||
cases: Case[];
|
||||
selectedKeys: Selection;
|
||||
onSelectionChange: React.Dispatch<React.SetStateAction<Selection>>;
|
||||
};
|
||||
|
||||
export default function TestCaseSelector({
|
||||
projectId,
|
||||
cases,
|
||||
selectedKeys,
|
||||
onSelectionChange,
|
||||
}: Props) {
|
||||
const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({
|
||||
column: "id",
|
||||
direction: "ascending",
|
||||
});
|
||||
|
||||
const sortedItems = useMemo(() => {
|
||||
return [...cases].sort((a: Case, b: Case) => {
|
||||
const first = a[sortDescriptor.column as keyof Case] as number;
|
||||
const second = b[sortDescriptor.column as keyof Case] as number;
|
||||
const cmp = first < second ? -1 : first > second ? 1 : 0;
|
||||
|
||||
return sortDescriptor.direction === "descending" ? -cmp : cmp;
|
||||
});
|
||||
}, [sortDescriptor, cases]);
|
||||
const renderCell = useCallback((testCase: Case, columnKey: Key) => {
|
||||
const cellValue = testCase[columnKey as keyof Case];
|
||||
|
||||
switch (columnKey) {
|
||||
case "id":
|
||||
return <span>{cellValue}</span>;
|
||||
case "title":
|
||||
return (
|
||||
<Link
|
||||
underline="hover"
|
||||
href={`/projects/${projectId}/folders/${testCase.folderId}/cases/${testCase.id}`}
|
||||
className="dark:text-white"
|
||||
>
|
||||
{cellValue}
|
||||
</Link>
|
||||
);
|
||||
case "priority":
|
||||
return (
|
||||
<Chip
|
||||
className="border-none gap-1 text-default-600"
|
||||
color={priorities[cellValue].color}
|
||||
size="sm"
|
||||
variant="dot"
|
||||
>
|
||||
{priorities[cellValue].name}
|
||||
</Chip>
|
||||
);
|
||||
case "actions":
|
||||
return (
|
||||
<Dropdown>
|
||||
<DropdownTrigger>
|
||||
<Button isIconOnly radius="full" size="sm" variant="light">
|
||||
<MoreVertical size={16} />
|
||||
</Button>
|
||||
</DropdownTrigger>
|
||||
<DropdownMenu aria-label="test case actions">
|
||||
<DropdownItem className="text-danger" onClick={() => {}}>
|
||||
status change
|
||||
</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
);
|
||||
default:
|
||||
return cellValue;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const classNames = useMemo(
|
||||
() => ({
|
||||
wrapper: ["min-w-3xl"],
|
||||
th: ["bg-transparent", "text-default-500", "border-b", "border-divider"],
|
||||
td: [
|
||||
// changing the rows border radius
|
||||
// first
|
||||
"group-data-[first=true]:first:before:rounded-none",
|
||||
"group-data-[first=true]:last:before:rounded-none",
|
||||
// middle
|
||||
"group-data-[middle=true]:before:rounded-none",
|
||||
// last
|
||||
"group-data-[last=true]:first:before:rounded-none",
|
||||
"group-data-[last=true]:last:before:rounded-none",
|
||||
],
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
const handleSelectionChange = (keys: Selection) => {
|
||||
onSelectionChange(keys)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Table
|
||||
isCompact
|
||||
removeWrapper
|
||||
aria-label="Tese cases table"
|
||||
classNames={classNames}
|
||||
selectedKeys={selectedKeys}
|
||||
selectionMode="multiple"
|
||||
sortDescriptor={sortDescriptor}
|
||||
onSelectionChange={handleSelectionChange}
|
||||
onSortChange={setSortDescriptor}
|
||||
>
|
||||
<TableHeader columns={headerColumns}>
|
||||
{(column) => (
|
||||
<TableColumn
|
||||
key={column.uid}
|
||||
align={column.uid === "actions" ? "center" : "start"}
|
||||
allowsSorting={column.sortable}
|
||||
>
|
||||
{column.name}
|
||||
</TableColumn>
|
||||
)}
|
||||
</TableHeader>
|
||||
<TableBody emptyContent={"No cases found"} items={sortedItems}>
|
||||
{(item) => (
|
||||
<TableRow key={item.id}>
|
||||
{(columnKey) => (
|
||||
<TableCell>{renderCell(item, columnKey)}</TableCell>
|
||||
)}
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user