i18n by next-intl

This commit is contained in:
Takeshi Kimata
2024-05-03 11:44:02 +09:00
parent 7af70399a1
commit 1e01535134
51 changed files with 194 additions and 87 deletions

View File

@@ -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>
</>
);
}

View File

@@ -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%"}
/>
);
}

View File

@@ -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>
</>
);
}

View File

@@ -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} />;
}