i18n by next-intl
This commit is contained in:
Takeshi Kimata
@@ -0,0 +1,72 @@
|
||||
"use client";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Button } from "@nextui-org/react";
|
||||
import { Plus } from "lucide-react";
|
||||
import RunsTable from "./RunsTable";
|
||||
import { fetchRuns, createRun, deleteRun } from "./runsControl";
|
||||
|
||||
type Props = {
|
||||
projectId: string;
|
||||
};
|
||||
|
||||
export default function RunsPage({ projectId }: Props) {
|
||||
const [runs, setRuns] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchDataEffect() {
|
||||
try {
|
||||
const data = await fetchRuns(projectId);
|
||||
setRuns(data);
|
||||
} catch (error: any) {
|
||||
console.error("Error in effect:", error.message);
|
||||
}
|
||||
}
|
||||
|
||||
fetchDataEffect();
|
||||
}, []);
|
||||
|
||||
const onCreateClick = async () => {
|
||||
try {
|
||||
const newRun = await createRun(projectId);
|
||||
const updateRuns = [...runs];
|
||||
updateRuns.push(newRun);
|
||||
setRuns(updateRuns);
|
||||
} catch (error: any) {
|
||||
console.error("Error deleting run:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const onDeleteClick = async (runId: number) => {
|
||||
try {
|
||||
await deleteRun(runId);
|
||||
const data = await fetchRuns(projectId);
|
||||
setRuns(data);
|
||||
} catch (error: any) {
|
||||
console.error("Error deleting run:", error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container mx-auto max-w-3xl pt-6 px-6 flex-grow">
|
||||
<div className="w-full p-3 flex items-center justify-between">
|
||||
<h3 className="font-bold">Runs</h3>
|
||||
<div>
|
||||
<Button
|
||||
startContent={<Plus size={16} />}
|
||||
size="sm"
|
||||
color="primary"
|
||||
onClick={onCreateClick}
|
||||
>
|
||||
New Run
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<RunsTable
|
||||
projectId={projectId}
|
||||
runs={runs}
|
||||
onDeleteRun={onDeleteClick}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
import { useState, useMemo, useCallback } from "react";
|
||||
import {
|
||||
Table,
|
||||
TableHeader,
|
||||
TableColumn,
|
||||
TableBody,
|
||||
TableRow,
|
||||
TableCell,
|
||||
Button,
|
||||
DropdownTrigger,
|
||||
Dropdown,
|
||||
DropdownMenu,
|
||||
DropdownItem,
|
||||
SortDescriptor,
|
||||
Link,
|
||||
} from "@nextui-org/react";
|
||||
import { MoreVertical } from "lucide-react";
|
||||
import { RunType } from "@/types/run";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
const headerColumns = [
|
||||
{ name: "ID", uid: "id", sortable: true },
|
||||
{ name: "Name", uid: "name", sortable: true },
|
||||
{ name: "Description", uid: "description", sortable: true },
|
||||
{ name: "Last update", uid: "updatedAt", sortable: true },
|
||||
{ name: "Actions", uid: "actions" },
|
||||
];
|
||||
|
||||
type Props = {
|
||||
projectId: string;
|
||||
runs: RunType[];
|
||||
onDeleteRun: (runId: number) => void;
|
||||
};
|
||||
|
||||
export default function RunsTable({ projectId, runs, onDeleteRun }: Props) {
|
||||
const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({
|
||||
column: "id",
|
||||
direction: "ascending",
|
||||
});
|
||||
|
||||
const sortedItems = useMemo(() => {
|
||||
return [...runs].sort((a: RunType, b: RunType) => {
|
||||
const first = a[sortDescriptor.column as keyof RunType] as number;
|
||||
const second = b[sortDescriptor.column as keyof RunType] as number;
|
||||
const cmp = first < second ? -1 : first > second ? 1 : 0;
|
||||
|
||||
return sortDescriptor.direction === "descending" ? -cmp : cmp;
|
||||
});
|
||||
}, [sortDescriptor, runs]);
|
||||
|
||||
const truncateText = (text: string, maxLength: number) => {
|
||||
return text.length > maxLength ? text.slice(0, maxLength) + "..." : text;
|
||||
};
|
||||
|
||||
const renderCell = useCallback((run: RunType, columnKey: Key) => {
|
||||
const cellValue = run[columnKey as keyof RunType];
|
||||
|
||||
switch (columnKey) {
|
||||
case "id":
|
||||
return <span>{cellValue}</span>;
|
||||
case "name":
|
||||
return (
|
||||
<Link
|
||||
underline="hover"
|
||||
href={`/projects/${projectId}/runs/${run.id}`}
|
||||
className="text-blue-500"
|
||||
>
|
||||
{cellValue}
|
||||
</Link>
|
||||
);
|
||||
case "detail":
|
||||
const maxLength = 20;
|
||||
const truncatedValue = truncateText(cellValue, maxLength);
|
||||
return (
|
||||
<div className="flex items-center space-x-2">
|
||||
<div>{truncatedValue}</div>
|
||||
</div>
|
||||
);
|
||||
case "updatedAt":
|
||||
return <span>{dayjs(cellValue).format("YYYY/MM/DD HH:mm")}</span>;
|
||||
case "actions":
|
||||
return (
|
||||
<Dropdown>
|
||||
<DropdownTrigger>
|
||||
<Button isIconOnly radius="full" size="sm" variant="light">
|
||||
<MoreVertical size={16} />
|
||||
</Button>
|
||||
</DropdownTrigger>
|
||||
<DropdownMenu aria-label="run actions">
|
||||
<DropdownItem
|
||||
className="text-danger"
|
||||
onClick={() => onDeleteRun(run.id)}
|
||||
>
|
||||
Delete run
|
||||
</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
);
|
||||
default:
|
||||
return cellValue;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const classNames = useMemo(
|
||||
() => ({
|
||||
wrapper: ["max-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",
|
||||
],
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Table
|
||||
isCompact
|
||||
aria-label="Runs table"
|
||||
classNames={classNames}
|
||||
sortDescriptor={sortDescriptor}
|
||||
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 runs found"} items={sortedItems}>
|
||||
{(item) => (
|
||||
<TableRow key={item.id}>
|
||||
{(columnKey) => (
|
||||
<TableCell>{renderCell(item, columnKey)}</TableCell>
|
||||
)}
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,391 @@
|
||||
"use client";
|
||||
import React from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import {
|
||||
Button,
|
||||
Input,
|
||||
Textarea,
|
||||
Select,
|
||||
SelectItem,
|
||||
Tooltip,
|
||||
Listbox,
|
||||
ListboxItem,
|
||||
Divider,
|
||||
Selection,
|
||||
DropdownTrigger,
|
||||
Dropdown,
|
||||
DropdownMenu,
|
||||
DropdownItem,
|
||||
} from "@nextui-org/react";
|
||||
import {
|
||||
Save,
|
||||
ArrowLeft,
|
||||
Folder,
|
||||
ChevronDown,
|
||||
CopyPlus,
|
||||
CopyMinus,
|
||||
RotateCw,
|
||||
} from "lucide-react";
|
||||
import RunProgressChart from "./RunPregressDonutChart";
|
||||
import TestCaseSelector from "./TestCaseSelector";
|
||||
import { testRunStatus } from "@/config/selection";
|
||||
import {
|
||||
RunType,
|
||||
RunCaseType,
|
||||
RunCaseInfoType,
|
||||
RunStatusCountType,
|
||||
} from "@/types/run";
|
||||
import { CaseType } from "@/types/case";
|
||||
import { FolderType } from "@/types/folder";
|
||||
import {
|
||||
fetchRun,
|
||||
updateRun,
|
||||
fetchRunCases,
|
||||
createRunCase,
|
||||
updateRunCase,
|
||||
bulkCreateRunCases,
|
||||
deleteRunCase,
|
||||
bulkDeleteRunCases,
|
||||
} from "../runsControl";
|
||||
import { fetchFolders } from "../../folders/foldersControl";
|
||||
import { fetchCases } from "../../folders/[folderId]/cases/caseControl";
|
||||
|
||||
const defaultTestRun = {
|
||||
id: 0,
|
||||
name: "",
|
||||
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 [folders, setFolders] = useState([]);
|
||||
const [runCases, setRunCases] = useState<RunCaseType[]>([]);
|
||||
const [runStatusCounts, setRunStatusCounts] =
|
||||
useState<RunStatusCountType[]>();
|
||||
const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set([]));
|
||||
const [selectedFolder, setSelectedFolder] = useState<FolderType>({});
|
||||
const [testcases, setTestCases] = useState<CaseType[]>([]);
|
||||
const [isNameInvalid, setIsNameInvalid] = useState<boolean>(false);
|
||||
const [isUpdating, setIsUpdating] = useState<boolean>(false);
|
||||
const router = useRouter();
|
||||
|
||||
const fetchRunAndStatusCount = async () => {
|
||||
const { run, statusCounts } = await fetchRun(runId);
|
||||
setTestRun(run);
|
||||
setRunStatusCounts(statusCounts);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchDataEffect() {
|
||||
try {
|
||||
await fetchRunAndStatusCount();
|
||||
const foldersData = await fetchFolders(projectId);
|
||||
setFolders(foldersData);
|
||||
setSelectedFolder(foldersData[0]);
|
||||
} catch (error: any) {
|
||||
console.error("Error in effect:", error.message);
|
||||
}
|
||||
}
|
||||
|
||||
fetchDataEffect();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchCasesData() {
|
||||
if (selectedFolder && selectedFolder.id) {
|
||||
try {
|
||||
const latestRunCases = await fetchRunCases(runId);
|
||||
setRunCases(latestRunCases);
|
||||
|
||||
const testCasesData = await fetchCases(selectedFolder.id);
|
||||
// Check if each testCase has an association with testRun
|
||||
// and add "isIncluded" property
|
||||
const updatedTestCasesData = testCasesData.map((testCase) => {
|
||||
const runCase = latestRunCases.find(
|
||||
(runCase) => runCase.caseId === testCase.id
|
||||
);
|
||||
|
||||
const isIncluded = runCase ? true : false;
|
||||
const runStatus = runCase ? runCase.status : 0;
|
||||
return {
|
||||
...testCase,
|
||||
isIncluded,
|
||||
runStatus,
|
||||
};
|
||||
});
|
||||
|
||||
setTestCases(updatedTestCasesData);
|
||||
} catch (error: any) {
|
||||
console.error("Error fetching cases data:", error.message);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fetchCasesData();
|
||||
}, [selectedFolder]);
|
||||
|
||||
const handleChangeStatus = async (changeCaseId: number, status: number) => {
|
||||
await updateRunCase(runId, changeCaseId, status);
|
||||
setTestCases((prevTestCases) => {
|
||||
return prevTestCases.map((testCase) => {
|
||||
if (testCase.id === changeCaseId) {
|
||||
return { ...testCase, runStatus: status };
|
||||
}
|
||||
return testCase;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const handleIncludeExcludeCase = async (
|
||||
isInclude: boolean,
|
||||
clickedTestCaseId: number
|
||||
) => {
|
||||
if (isInclude) {
|
||||
const createdRunCase = await createRunCase(runId, clickedTestCaseId);
|
||||
setRunCases((prevRunCases) => {
|
||||
return [...prevRunCases, createdRunCase];
|
||||
});
|
||||
} else {
|
||||
await deleteRunCase(runId, clickedTestCaseId);
|
||||
setRunCases((prevRunCases) => {
|
||||
return prevRunCases.filter(
|
||||
(runCase) => runCase.caseId !== clickedTestCaseId
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
setTestCases((prevTestCases) => {
|
||||
return prevTestCases.map((testCase) => {
|
||||
if (testCase.id === clickedTestCaseId) {
|
||||
return { ...testCase, isIncluded: isInclude };
|
||||
}
|
||||
return testCase;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const handleBulkIncludeExcludeCases = async (isInclude: boolean) => {
|
||||
let keys: number[] = [];
|
||||
if (selectedKeys === "all") {
|
||||
keys = testcases.map((item) => item.id);
|
||||
} else {
|
||||
keys = Array.from(selectedKeys).map(Number);
|
||||
}
|
||||
|
||||
const runCaseInfo: RunCaseInfoType[] = keys.map((caseId) => ({
|
||||
runId: runId,
|
||||
caseId: caseId,
|
||||
}));
|
||||
if (isInclude) {
|
||||
const createdRunCases = await bulkCreateRunCases(runCaseInfo);
|
||||
setRunCases((prevRunCases) => [...prevRunCases, ...createdRunCases]);
|
||||
} else {
|
||||
await bulkDeleteRunCases(runCaseInfo);
|
||||
setRunCases((prevRunCases) => {
|
||||
return prevRunCases.filter((runCase) => {
|
||||
return !runCaseInfo.some((info) => info.caseId === runCase.caseId);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const updatedTestCases = testcases.map((testcase) => {
|
||||
if (keys.includes(testcase.id)) {
|
||||
return { ...testcase, isIncluded: isInclude };
|
||||
}
|
||||
return testcase;
|
||||
});
|
||||
setTestCases(updatedTestCases);
|
||||
|
||||
setSelectedKeys(new Set([]));
|
||||
};
|
||||
|
||||
const baseClass = "";
|
||||
const selectedClass = `${baseClass} bg-neutral-200 dark:bg-neutral-700`;
|
||||
|
||||
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">
|
||||
<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.name}</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-5xl pt-6 px-6 flex-grow">
|
||||
<div className="flex">
|
||||
<div>
|
||||
<div className="w-96 h-72">
|
||||
<div className="flex items-center">
|
||||
<h4 className="font-bold">Progress</h4>
|
||||
<Tooltip content="Refresh">
|
||||
<Button
|
||||
isIconOnly
|
||||
size="sm"
|
||||
className="rounded-full bg-transparent ms-1"
|
||||
onPress={fetchRunAndStatusCount}
|
||||
>
|
||||
<RotateCw size={16} />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<RunProgressChart statusCounts={runStatusCounts} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-grow">
|
||||
<Input
|
||||
size="sm"
|
||||
type="text"
|
||||
variant="bordered"
|
||||
label="Name"
|
||||
value={testRun.name}
|
||||
isInvalid={isNameInvalid}
|
||||
errorMessage={isNameInvalid ? "please enter name" : ""}
|
||||
onChange={(e) => {
|
||||
setTestRun({ ...testRun, name: e.target.value });
|
||||
}}
|
||||
className="mt-3"
|
||||
/>
|
||||
|
||||
<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="status"
|
||||
className="mt-3 max-w-xs"
|
||||
>
|
||||
{testRunStatus.map((state, index) => (
|
||||
<SelectItem key={state.uid} value={index}>
|
||||
{state.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Divider className="my-6" />
|
||||
<div className="flex items-center justify-between">
|
||||
<h6 className="h-8 font-bold">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={() => handleBulkIncludeExcludeCases(true)}
|
||||
>
|
||||
Include selected cases in run
|
||||
</DropdownItem>
|
||||
<DropdownItem
|
||||
startContent={<CopyMinus size={16} />}
|
||||
onClick={() => handleBulkIncludeExcludeCases(false)}
|
||||
>
|
||||
Exclude selected cases from run
|
||||
</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-3 flex rounded-small border-2 dark:border-neutral-700 mb-12">
|
||||
<div className="w-3/12 border-r-1 dark:border-neutral-700">
|
||||
<Listbox aria-label="Listbox Variants" variant="light">
|
||||
{folders.map((folder, index) => (
|
||||
<ListboxItem
|
||||
key={index}
|
||||
onClick={() => setSelectedFolder(folder)}
|
||||
startContent={
|
||||
<Folder size={20} color="#F7C24E" fill="#F7C24E" />
|
||||
}
|
||||
className={
|
||||
selectedFolder && folder.id === selectedFolder.id
|
||||
? selectedClass
|
||||
: baseClass
|
||||
}
|
||||
>
|
||||
{folder.name}
|
||||
</ListboxItem>
|
||||
))}
|
||||
</Listbox>
|
||||
</div>
|
||||
<div className="w-9/12">
|
||||
<TestCaseSelector
|
||||
cases={testcases}
|
||||
selectedKeys={selectedKeys}
|
||||
onSelectionChange={setSelectedKeys}
|
||||
onStatusChange={handleChangeStatus}
|
||||
onIncludeCase={(includeTestId) =>
|
||||
handleIncludeExcludeCase(true, includeTestId)
|
||||
}
|
||||
onExcludeCase={(excludeCaseId) =>
|
||||
handleIncludeExcludeCase(false, excludeCaseId)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import React from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import dynamic from "next/dynamic";
|
||||
import { testRunCaseStatus } from "@/config/selection";
|
||||
import { RunStatusCountType } from "@/types/run";
|
||||
const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });
|
||||
|
||||
type Props = {
|
||||
statusCounts: RunStatusCountType[];
|
||||
};
|
||||
|
||||
export default function RunProgressDounut({ statusCounts }: Props) {
|
||||
const [chartData, setChartData] = useState({
|
||||
series: [],
|
||||
options: {
|
||||
labels: [],
|
||||
colors: [],
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const updateChartDate = () => {
|
||||
if (statusCounts) {
|
||||
const series = testRunCaseStatus.map((entry, index) => {
|
||||
const found = statusCounts.find((itr) => itr.status === index);
|
||||
return found ? found.count : 0;
|
||||
});
|
||||
|
||||
const labels = testRunCaseStatus.map((entry) => entry.name);
|
||||
const colors = testRunCaseStatus.map((entry) => entry.chartColor);
|
||||
|
||||
setChartData({
|
||||
series,
|
||||
options: { labels, colors },
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
updateChartDate();
|
||||
}, [statusCounts]);
|
||||
|
||||
return (
|
||||
<Chart
|
||||
options={chartData.options}
|
||||
series={chartData.series}
|
||||
type="donut"
|
||||
width={"100%"}
|
||||
height={"100%"}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,233 @@
|
||||
import { useState, useMemo } from "react";
|
||||
import {
|
||||
Table,
|
||||
TableHeader,
|
||||
TableColumn,
|
||||
TableBody,
|
||||
TableRow,
|
||||
TableCell,
|
||||
Button,
|
||||
DropdownTrigger,
|
||||
Dropdown,
|
||||
DropdownMenu,
|
||||
DropdownItem,
|
||||
Selection,
|
||||
SortDescriptor,
|
||||
} from "@nextui-org/react";
|
||||
import {
|
||||
ChevronDown,
|
||||
MoreVertical,
|
||||
CopyPlus,
|
||||
CopyMinus,
|
||||
Circle,
|
||||
CircleCheck,
|
||||
CircleDashed,
|
||||
CircleX,
|
||||
CircleSlash2,
|
||||
} from "lucide-react";
|
||||
import { priorities, testRunCaseStatus } from "@/config/selection";
|
||||
import { CaseType } from "@/types/case";
|
||||
|
||||
const headerColumns = [
|
||||
{ name: "ID", uid: "id", sortable: true },
|
||||
{ name: "Title", uid: "title", sortable: true },
|
||||
{ name: "Priority", uid: "priority", sortable: true },
|
||||
{ name: "Status", uid: "runStatus", sortable: true },
|
||||
{ name: "Actions", uid: "actions" },
|
||||
];
|
||||
|
||||
type Props = {
|
||||
cases: CaseType[];
|
||||
selectedKeys: Selection;
|
||||
onSelectionChange: React.Dispatch<React.SetStateAction<Selection>>;
|
||||
onStatusChange: (changeCaseId: number, status: number) => {};
|
||||
onIncludeCase: (includeCaseId: number) => {};
|
||||
onExcludeCase: (excludeCaseId: number) => {};
|
||||
};
|
||||
|
||||
export default function TestCaseSelector({
|
||||
cases,
|
||||
selectedKeys,
|
||||
onSelectionChange,
|
||||
onStatusChange,
|
||||
onIncludeCase,
|
||||
onExcludeCase,
|
||||
}: Props) {
|
||||
const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({
|
||||
column: "id",
|
||||
direction: "ascending",
|
||||
});
|
||||
|
||||
const sortedItems = useMemo(() => {
|
||||
return [...cases].sort((a: CaseType, b: CaseType) => {
|
||||
const first = a[sortDescriptor.column as keyof CaseType] as number;
|
||||
const second = b[sortDescriptor.column as keyof CaseType] as number;
|
||||
const cmp = first < second ? -1 : first > second ? 1 : 0;
|
||||
|
||||
return sortDescriptor.direction === "descending" ? -cmp : cmp;
|
||||
});
|
||||
}, [sortDescriptor, cases]);
|
||||
|
||||
const notIncludedCaseClass = "text-neutral-200 dark:text-neutral-600";
|
||||
const chipBaseClass = "flex items-center text-default-600";
|
||||
|
||||
const renderStatusIcon = (uid: string) => {
|
||||
if (uid === "untested") {
|
||||
return <Circle size={16} color="#d4d4d8" />;
|
||||
} else if (uid === "passed") {
|
||||
return <CircleCheck size={16} color="#17c964" />;
|
||||
} else if (uid === "retest") {
|
||||
return <CircleDashed size={16} color="#f5a524" />;
|
||||
} else if (uid === "failed") {
|
||||
return <CircleX size={16} color="#f31260" />;
|
||||
} else if (uid === "skipped") {
|
||||
return <CircleSlash2 size={16} color="#52525b" />;
|
||||
}
|
||||
};
|
||||
|
||||
const renderCell = (testCase: CaseType, columnKey: Key) => {
|
||||
const cellValue = testCase[columnKey as keyof CaseType];
|
||||
const isIncluded = testCase.isIncluded;
|
||||
|
||||
switch (columnKey) {
|
||||
case "priority":
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
isIncluded ? chipBaseClass : chipBaseClass + notIncludedCaseClass
|
||||
}
|
||||
>
|
||||
<Circle
|
||||
size={8}
|
||||
color={isIncluded ? priorities[cellValue].color : "#d4d4d8"}
|
||||
fill={isIncluded ? priorities[cellValue].color : "#d4d4d8"}
|
||||
/>
|
||||
<div className="ms-3">{priorities[cellValue].name}</div>
|
||||
</div>
|
||||
);
|
||||
case "runStatus":
|
||||
return (
|
||||
<Dropdown>
|
||||
<DropdownTrigger>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="light"
|
||||
isDisabled={!isIncluded}
|
||||
startContent={
|
||||
isIncluded &&
|
||||
renderStatusIcon(testRunCaseStatus[cellValue].uid)
|
||||
}
|
||||
endContent={isIncluded && <ChevronDown size={16} />}
|
||||
>
|
||||
<span className="w-12">
|
||||
{isIncluded && testRunCaseStatus[cellValue].name}
|
||||
</span>
|
||||
</Button>
|
||||
</DropdownTrigger>
|
||||
<DropdownMenu aria-label="test case actions">
|
||||
{testRunCaseStatus.map((runCaseStatus, index) => (
|
||||
<DropdownItem
|
||||
key={index}
|
||||
startContent={renderStatusIcon(runCaseStatus.uid)}
|
||||
onPress={() => onStatusChange(testCase.id, index)}
|
||||
>
|
||||
{runCaseStatus.name}
|
||||
</DropdownItem>
|
||||
))}
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
);
|
||||
case "actions":
|
||||
return (
|
||||
<Dropdown>
|
||||
<DropdownTrigger>
|
||||
<Button isIconOnly radius="full" size="sm" variant="light">
|
||||
<MoreVertical size={16} />
|
||||
</Button>
|
||||
</DropdownTrigger>
|
||||
<DropdownMenu aria-label="include or exclude actions">
|
||||
<DropdownItem
|
||||
startContent={<CopyPlus size={16} />}
|
||||
isDisabled={testCase.isIncluded}
|
||||
onPress={() => onIncludeCase(testCase.id)}
|
||||
>
|
||||
Include in run
|
||||
</DropdownItem>
|
||||
<DropdownItem
|
||||
startContent={<CopyMinus size={16} />}
|
||||
isDisabled={!testCase.isIncluded}
|
||||
onPress={() => onExcludeCase(testCase.id)}
|
||||
>
|
||||
Exclude from run
|
||||
</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}
|
||||
className={!item.isIncluded ? notIncludedCaseClass : ""}
|
||||
>
|
||||
{(columnKey) => (
|
||||
<TableCell>{renderCell(item, columnKey)}</TableCell>
|
||||
)}
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import RunEditor from "./RunEditor";
|
||||
|
||||
export default function Page({
|
||||
params,
|
||||
}: {
|
||||
params: { projectId: string; runId: string };
|
||||
}) {
|
||||
return <RunEditor projectId={params.projectId} runId={params.runId} />;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import RunsPage from "./RunsPage";
|
||||
|
||||
export default function Page({ params }: { params: { projectId: string } }) {
|
||||
return (
|
||||
<>
|
||||
<RunsPage projectId={params.projectId} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,273 @@
|
||||
import Config from "@/config/config";
|
||||
const apiServer = Config.apiServer;
|
||||
import { RunType, RunCaseInfoType } from "@/types/run";
|
||||
|
||||
async function fetchRun(runId: string) {
|
||||
const url = `${apiServer}/runs/${runId}`;
|
||||
|
||||
try {
|
||||
const response = await fetch(url, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! Status: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return data;
|
||||
} catch (error: any) {
|
||||
console.error("Error fetching data:", error.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchRuns(projectId: string) {
|
||||
const url = `${apiServer}/runs?projectId=${projectId}`;
|
||||
|
||||
try {
|
||||
const response = await fetch(url, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! Status: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return data;
|
||||
} catch (error: any) {
|
||||
console.error("Error fetching data:", error.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function createRun(projectId: string) {
|
||||
const newTestRun = {
|
||||
name: "untitled run",
|
||||
configurations: 0,
|
||||
description: "",
|
||||
state: 0,
|
||||
projectId: projectId,
|
||||
};
|
||||
|
||||
const fetchOptions = {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(newTestRun),
|
||||
};
|
||||
|
||||
const url = `${apiServer}/runs`;
|
||||
|
||||
try {
|
||||
const response = await fetch(url, fetchOptions);
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! Status: ${response.status}`);
|
||||
}
|
||||
const data = await response.json();
|
||||
return data;
|
||||
} catch (error: any) {
|
||||
console.error("Error creating new test run:", error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
async function updateRun(updateTestRun: RunType) {
|
||||
const fetchOptions = {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(updateTestRun),
|
||||
};
|
||||
|
||||
const url = `${apiServer}/runs/${updateTestRun.id}`;
|
||||
|
||||
try {
|
||||
const response = await fetch(url, fetchOptions);
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! Status: ${response.status}`);
|
||||
}
|
||||
const data = await response.json();
|
||||
return data;
|
||||
} catch (error: any) {
|
||||
console.error("Error updating run:", error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteRun(runId: number) {
|
||||
const fetchOptions = {
|
||||
method: "DELETE",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
};
|
||||
|
||||
const url = `${apiServer}/runs/${runId}`;
|
||||
|
||||
try {
|
||||
const response = await fetch(url, fetchOptions);
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! Status: ${response.status}`);
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error("Error deleting run:", error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchRunCases(runId: string) {
|
||||
const url = `${apiServer}/runcases?runId=${runId}`;
|
||||
|
||||
try {
|
||||
const response = await fetch(url, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! Status: ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return data;
|
||||
} catch (error: any) {
|
||||
console.error("Error fetching data:", error.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function createRunCase(runId: string, caseId: number) {
|
||||
const fetchOptions = {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
};
|
||||
|
||||
const url = `${apiServer}/runcases?runId=${runId}&caseId=${caseId}`;
|
||||
|
||||
try {
|
||||
const response = await fetch(url, fetchOptions);
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! Status: ${response.status}`);
|
||||
}
|
||||
const data = await response.json();
|
||||
return data;
|
||||
} catch (error: any) {
|
||||
console.error("Error creating new runcase:", error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
async function updateRunCase(runId: string, caseId: number, status: number) {
|
||||
const fetchOptions = {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
};
|
||||
|
||||
const url = `${apiServer}/runcases?runId=${runId}&caseId=${caseId}&status=${status}`;
|
||||
|
||||
try {
|
||||
const response = await fetch(url, fetchOptions);
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! Status: ${response.status}`);
|
||||
}
|
||||
const data = await response.json();
|
||||
return data;
|
||||
} catch (error: any) {
|
||||
console.error("Error updating runcase:", error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
async function bulkCreateRunCases(runCaseInfo: RunCaseInfoType[]) {
|
||||
const fetchOptions = {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(runCaseInfo),
|
||||
};
|
||||
|
||||
const url = `${apiServer}/runcases/bulknew`;
|
||||
|
||||
try {
|
||||
const response = await fetch(url, fetchOptions);
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! Status: ${response.status}`);
|
||||
}
|
||||
const data = await response.json();
|
||||
return data;
|
||||
} catch (error: any) {
|
||||
console.error("Error creating new runcase:", error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteRunCase(runId: string, caseId: number) {
|
||||
const fetchOptions = {
|
||||
method: "DELETE",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
};
|
||||
|
||||
const url = `${apiServer}/runcases?runId=${runId}&caseId=${caseId}`;
|
||||
|
||||
try {
|
||||
const response = await fetch(url, fetchOptions);
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! Status: ${response.status}`);
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error("Error deleting runcase:", error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
async function bulkDeleteRunCases(runCaseInfo: RunCaseInfoType[]) {
|
||||
const fetchOptions = {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(runCaseInfo),
|
||||
};
|
||||
|
||||
const url = `${apiServer}/runcases/bulkdelete`;
|
||||
|
||||
try {
|
||||
const response = await fetch(url, fetchOptions);
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! Status: ${response.status}`);
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error("Error deleting runcase:", error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
export {
|
||||
fetchRun,
|
||||
fetchRuns,
|
||||
createRun,
|
||||
updateRun,
|
||||
deleteRun,
|
||||
fetchRunCases,
|
||||
createRunCase,
|
||||
updateRunCase,
|
||||
bulkCreateRunCases,
|
||||
deleteRunCase,
|
||||
bulkDeleteRunCases,
|
||||
};
|
||||
Reference in New Issue
Block a user