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

feat: nested folders (#266)

Browse Source
This commit is contained in:
Eliezer Castro
2025-08-06 10:26:38 -03:00
committed by GitHub
parent d4c5f59755
commit 424b1bdbc7
10 changed files with 457 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
backend/migrations/20250804175803-add-cascade-delete-parent-folder.js Normal file
View File

@@ -0,0 +1,22 @@
'use strict';
/** @type {import('sequelize-cli').Migration} */
module.exports = {
async up(queryInterface) {
await queryInterface.addConstraint('folders', {
fields: ['parentFolderId'],
type: 'foreign key',
name: 'fk_folders_parentFolderId',
references: {
table: 'folders',
field: 'id',
},
onDelete: 'CASCADE',
onUpdate: 'CASCADE',
});
},
async down(queryInterface) {
await queryInterface.removeConstraint('folders', 'fk_folders_parentFolderId');
},
};

6
backend/models/folders.js
View File

@@ -11,6 +11,11 @@ function defineFolder(sequelize, DataTypes) {
parentFolderId: {
type: DataTypes.INTEGER,
allowNull: true,
references: {
model: 'folder',
key: 'id',
},
onDelete: 'CASCADE',
},
projectId: {
type: DataTypes.INTEGER,
@@ -25,6 +30,7 @@ function defineFolder(sequelize, DataTypes) {
Folder.associate = (models) => {
Folder.belongsTo(models.Project, { foreignKey: 'projectId', onDelete: 'CASCADE' });
Folder.belongsTo(models.folder, { foreignKey: 'parentFolderId', onDelete: 'CASCADE' });
Folder.hasMany(models.Case, { foreignKey: 'folderId' });
};

46
frontend/components/TreeItem.tsx Normal file
View File

@@ -0,0 +1,46 @@
import { cn } from '@heroui/react';
import { ReactNode } from 'react';
interface TreeItemProps {
style: React.CSSProperties;
isSelected: boolean | null;
onClick: () => void;
toggleButton?: ReactNode;
icon: ReactNode;
label: string;
actions?: ReactNode;
className?: string;
}
export default function TreeItem({
style,
isSelected,
onClick,
toggleButton,
icon,
label,
actions,
className,
}: TreeItemProps) {
const baseClass = '';
const selectedClass = `${baseClass} bg-neutral-200 dark:bg-neutral-700 dark:hover:bg-neutral-600 hover:bg-neutral-300`;
return (
<div className="mx-2">
<div
style={style}
className={cn(
'w-full py-1 pr-2 flex items-center rounded-md cursor-pointer transition-colors hover:bg-neutral-100 dark:hover:bg-neutral-600',
isSelected ? selectedClass : baseClass,
className
)}
onClick={onClick}
>
{toggleButton || <div className="ml-2" />}
{icon}
<span className="truncate ml-1.5">{label}</span>
{actions && <div className="ml-auto flex items-center">{actions}</div>}
</div>
</div>
);
}

139
frontend/package-lock.json generated
View File

@@ -30,6 +30,7 @@
"postcss": "8.5.3",
"react": "^18.3.1",
"react-apexcharts": "^1.7.0",
"react-arborist": "^3.4.3",
"react-dom": "18.3.1",
"sharp": "^0.33.5",
"tailwind-variants": "^0.3.1",
@@ -9310,6 +9311,24 @@
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
}
},
"node_modules/@react-dnd/asap": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-4.0.1.tgz",
"integrity": "sha512-kLy0PJDDwvwwTXxqTFNAAllPHD73AycE9ypWeln/IguoGBEbvFcPDbCV03G52bEcC5E+YgupBE0VzHGdC8SIXg==",
"license": "MIT"
},
"node_modules/@react-dnd/invariant": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-2.0.0.tgz",
"integrity": "sha512-xL4RCQBCBDJ+GRwKTFhGUW8GXa4yoDfJrPbLblc3U09ciS+9ZJXJ3Qrcs/x2IODOdIE5kQxvMmE2UKyqUictUw==",
"license": "MIT"
},
"node_modules/@react-dnd/shallowequal": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-2.0.0.tgz",
"integrity": "sha512-Pc/AFTdwZwEKJxFJvlxrSmGe/di+aAOBn60sremrpLo6VI/6cmiUYNNwlI5KNYttg7uypzA3ILPMPgxB2GYZEg==",
"license": "MIT"
},
"node_modules/@react-stately/flags": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/@react-stately/flags/-/flags-3.0.5.tgz",
@@ -10135,6 +10154,26 @@
"resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
"integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
},
"node_modules/dnd-core": {
"version": "14.0.1",
"resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-14.0.1.tgz",
"integrity": "sha512-+PVS2VPTgKFPYWo3vAFEA8WPbTf7/xo43TifH9G8S1KqnrQu0o77A3unrF5yOugy4mIz7K5wAVFHUcha7wsz6A==",
"license": "MIT",
"dependencies": {
"@react-dnd/asap": "^4.0.0",
"@react-dnd/invariant": "^2.0.0",
"redux": "^4.1.1"
}
},
"node_modules/dnd-core/node_modules/redux": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
"integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.9.2"
}
},
"node_modules/eastasianwidth": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -10158,6 +10197,12 @@
"node": ">=6"
}
},
"node_modules/fast-deep-equal": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
"license": "MIT"
},
"node_modules/fast-glob": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -10312,6 +10357,15 @@
"node": ">= 0.4"
}
},
"node_modules/hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"license": "BSD-3-Clause",
"dependencies": {
"react-is": "^16.7.0"
}
},
"node_modules/input-otp": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/input-otp/-/input-otp-1.4.1.tgz",
@@ -10455,6 +10509,12 @@
"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
}
},
"node_modules/memoize-one": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
"integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==",
"license": "MIT"
},
"node_modules/merge2": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -10934,6 +10994,62 @@
"react": ">=0.13"
}
},
"node_modules/react-arborist": {
"version": "3.4.3",
"resolved": "https://registry.npmjs.org/react-arborist/-/react-arborist-3.4.3.tgz",
"integrity": "sha512-yFnq1nIQhT2uJY4TZVz2tgAiBb9lxSyvF4vC3S8POCK8xLzjGIxVv3/4dmYquQJ7AHxaZZArRGHiHKsEewKdTQ==",
"license": "MIT",
"dependencies": {
"react-dnd": "^14.0.3",
"react-dnd-html5-backend": "^14.0.3",
"react-window": "^1.8.11",
"redux": "^5.0.0",
"use-sync-external-store": "^1.2.0"
},
"peerDependencies": {
"react": ">= 16.14",
"react-dom": ">= 16.14"
}
},
"node_modules/react-dnd": {
"version": "14.0.5",
"resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-14.0.5.tgz",
"integrity": "sha512-9i1jSgbyVw0ELlEVt/NkCUkxy1hmhJOkePoCH713u75vzHGyXhPDm28oLfc2NMSBjZRM1Y+wRjHXJT3sPrTy+A==",
"license": "MIT",
"dependencies": {
"@react-dnd/invariant": "^2.0.0",
"@react-dnd/shallowequal": "^2.0.0",
"dnd-core": "14.0.1",
"fast-deep-equal": "^3.1.3",
"hoist-non-react-statics": "^3.3.2"
},
"peerDependencies": {
"@types/hoist-non-react-statics": ">= 3.3.1",
"@types/node": ">= 12",
"@types/react": ">= 16",
"react": ">= 16.14"
},
"peerDependenciesMeta": {
"@types/hoist-non-react-statics": {
"optional": true
},
"@types/node": {
"optional": true
},
"@types/react": {
"optional": true
}
}
},
"node_modules/react-dnd-html5-backend": {
"version": "14.1.0",
"resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-14.1.0.tgz",
"integrity": "sha512-6ONeqEC3XKVf4eVmMTe0oPds+c5B9Foyj8p/ZKLb7kL2qh9COYxiBHv3szd6gztqi/efkmriywLUVlPotqoJyw==",
"license": "MIT",
"dependencies": {
"dnd-core": "14.0.1"
}
},
"node_modules/react-dom": {
"version": "18.3.1",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
@@ -10967,6 +11083,23 @@
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
}
},
"node_modules/react-window": {
"version": "1.8.11",
"resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.11.tgz",
"integrity": "sha512-+SRbUVT2scadgFSWx+R1P754xHPEqvcfSfVX10QYg6POOz+WNgkN48pS+BtZNIMGiL1HYrSEiCkwsMS15QogEQ==",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.0.0",
"memoize-one": ">=3.1.1 <6"
},
"engines": {
"node": ">8.0.0"
},
"peerDependencies": {
"react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
"react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
}
},
"node_modules/read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -10986,6 +11119,12 @@
"node": ">=8.10.0"
}
},
"node_modules/redux": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
"integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
"license": "MIT"
},
"node_modules/regenerator-runtime": {
"version": "0.14.0",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",

1
frontend/package.json
View File

@@ -31,6 +31,7 @@
"postcss": "8.5.3",
"react": "^18.3.1",
"react-apexcharts": "^1.7.0",
"react-arborist": "^3.4.3",
"react-dom": "18.3.1",
"sharp": "^0.33.5",
"tailwind-variants": "^0.3.1",

83
frontend/src/app/[locale]/projects/[projectId]/folders/FolderTree.tsx Normal file
View File

@@ -0,0 +1,83 @@
import { Button } from '@heroui/react';
import { ChevronDown, ChevronRight, Folder, Plus } from 'lucide-react';
import { NodeApi } from 'react-arborist';
import { useContext } from 'react';
import FolderEditMenu from './FolderEditMenu';
import { FolderType, FoldersMessages, TreeNodeData } from '@/types/folder';
import { useRouter } from '@/src/i18n/routing';
import { TokenContext } from '@/utils/TokenProvider';
import TreeItem from '@/components/TreeItem';
interface FolderItemProps {
node: NodeApi<TreeNodeData>;
style: React.CSSProperties;
projectId: string;
selectedFolder: FolderType | null;
locale: string;
messages: FoldersMessages;
openDialogForCreate: (folderId: number | null) => void;
onEditClick: (folder: FolderType) => void;
onDeleteClick: (folderId: number) => void;
}
export default function FolderItem({
node,
style,
projectId,
selectedFolder,
locale,
messages,
openDialogForCreate,
onEditClick,
onDeleteClick,
}: FolderItemProps) {
const router = useRouter();
const context = useContext(TokenContext);
const isSelected = selectedFolder && node.data.folderData.id === selectedFolder.id;
const toggleButton =
node.data.children && node.data.children.length > 0 ? (
<Button
size="sm"
className="bg-transparent rounded-full h-6 w-6 min-w-4"
isIconOnly
onPress={() => node.toggle()}
>
{node.isOpen ? <ChevronDown size={20} color="#F7C24E" /> : <ChevronRight size={20} color="#F7C24E" />}
</Button>
) : null;
const actions = (
<>
<Button
size="sm"
isIconOnly
className="bg-transparent rounded-full"
isDisabled={!context.isProjectDeveloper(Number(projectId))}
onPress={() => openDialogForCreate(node.data.folderData.id)}
>
<Plus size={16} />
</Button>
<FolderEditMenu
folder={node.data.folderData}
isDisabled={!context.isProjectDeveloper(Number(projectId))}
onEditClick={onEditClick}
onDeleteClick={onDeleteClick}
messages={messages}
/>
</>
);
return (
<TreeItem
style={style}
isSelected={isSelected}
onClick={() => router.push(`/projects/${projectId}/folders/${node.data.folderData.id}/cases`, { locale })}
toggleButton={toggleButton}
icon={<Folder size={20} color="#F7C24E" fill="#F7C24E" className="flex-shrink-0" />}
label={node.data.name}
actions={actions}
/>
);
}

115
frontend/src/app/[locale]/projects/[projectId]/folders/FoldersPane.tsx
View File

@@ -1,16 +1,18 @@
'use client';
import { useState, useEffect, useContext } from 'react';
import { Button, Listbox, ListboxItem } from '@heroui/react';
import { Folder, Plus } from 'lucide-react';
import { Button } from '@heroui/react';
import { Plus } from 'lucide-react';
import { Tree } from 'react-arborist';
import FolderDialog from './FolderDialog';
import FolderEditMenu from './FolderEditMenu';
import { fetchFolders, createFolder, updateFolder, deleteFolder } from './foldersControl';
import FolderItem from './FolderTree';
import { usePathname, useRouter } from '@/src/i18n/routing';
import { TokenContext } from '@/utils/TokenProvider';
import useGetCurrentIds from '@/utils/useGetCurrentIds';
import DeleteConfirmDialog from '@/components/DeleteConfirmDialog';
import { FolderType, FoldersMessages } from '@/types/folder';
import { FolderType, FoldersMessages, TreeNodeData } from '@/types/folder';
import { logError } from '@/utils/errorHandler';
import { buildFolderTree } from '@/utils/buildFolderTree';
type Props = {
projectId: string;
@@ -22,11 +24,12 @@ export default function FoldersPane({ projectId, messages, locale }: Props) {
const router = useRouter();
const pathname = usePathname();
const context = useContext(TokenContext);
const [folders, setFolders] = useState<FolderType[]>([]);
const [treeData, setTreeData] = useState<TreeNodeData[]>([]);
const [selectedFolder, setSelectedFolder] = useState<FolderType | null>(null);
const { folderId } = useGetCurrentIds();
const [isFolderDialogOpen, setIsFolderDialogOpen] = useState(false);
const [editingFolder, setEditingFolder] = useState<FolderType | null>(null);
const [parentFolderId, setParentFolderId] = useState<number | null>(null);
useEffect(() => {
async function fetchDataEffect() {
@@ -34,21 +37,20 @@ export default function FoldersPane({ projectId, messages, locale }: Props) {
return;
}
try {
const folders: FolderType[] = await fetchFolders(context.token.access_token, Number(projectId));
setFolders(folders);
const fetchedFolders: FolderType[] = await fetchFolders(context.token.access_token, Number(projectId));
const tree = buildFolderTree(fetchedFolders);
setTreeData(tree);
// no folder on project
if (folders.length === 0) {
if (tree.length === 0) {
return;
}
const selectedFolderFromUrl = folders.find((folder) => folder.id === folderId);
const selectedFolderFromUrl = fetchedFolders.find((folder) => folder.id === folderId);
setSelectedFolder(selectedFolderFromUrl ? selectedFolderFromUrl : null);
// Redirect to the smallest folder ID page if the path is "projects/[projectId]/folders
if (pathname === `/projects/${projectId}/folders`) {
const smallestFolderId = Math.min(...folders.map((folder) => folder.id));
router.push(`/projects/${projectId}/folders/${smallestFolderId}/cases`, { locale: locale });
const smallestFolderId = Math.min(...fetchedFolders.map((folder) => folder.id));
router.push(`/projects/${projectId}/folders/${smallestFolderId}/cases`, { locale });
}
} catch (error: unknown) {
logError('Error fetching folders:', error);
@@ -58,7 +60,8 @@ export default function FoldersPane({ projectId, messages, locale }: Props) {
fetchDataEffect();
}, [context, folderId, locale, pathname, projectId, router]);
const openDialogForCreate = () => {
const openDialogForCreate = (folderId: number | null = null) => {
setParentFolderId(folderId);
setIsFolderDialogOpen(true);
setEditingFolder(null);
};
@@ -66,35 +69,30 @@ export default function FoldersPane({ projectId, messages, locale }: Props) {
const closeDialog = () => {
setIsFolderDialogOpen(false);
setEditingFolder(null);
setParentFolderId(null);
};
const onSubmit = async (name: string, detail: string) => {
if (editingFolder) {
const updatedProject = await updateFolder(
context.token.access_token,
editingFolder.id,
name,
detail,
projectId,
null
);
const updatedProjects = folders.map((project) => (project.id === updatedProject.id ? updatedProject : project));
setFolders(updatedProjects);
await updateFolder(context.token.access_token, editingFolder.id, name, detail, projectId, parentFolderId);
} else {
const newProject = await createFolder(context.token.access_token, name, detail, projectId, null);
setFolders([...folders, newProject]);
await createFolder(context.token.access_token, name, detail, projectId, parentFolderId);
}
const fetchedFolders: FolderType[] = await fetchFolders(context.token.access_token, Number(projectId));
const tree = buildFolderTree(fetchedFolders);
setTreeData(tree);
closeDialog();
};
const onEditClick = (folder: FolderType) => {
setEditingFolder(folder);
setParentFolderId(folder.parentFolderId);
setIsFolderDialogOpen(true);
};
// Delete confirm dialog
const [isDeleteConfirmDialogOpen, setIsDeleteConfirmDialogOpen] = useState(false);
const [deleteFolderId, setDeleteFolderId] = useState<number | null>(null);
const closeDeleteConfirmDialog = () => {
setIsDeleteConfirmDialogOpen(false);
setDeleteFolderId(null);
@@ -108,48 +106,57 @@ export default function FoldersPane({ projectId, messages, locale }: Props) {
const onConfirm = async () => {
if (deleteFolderId) {
await deleteFolder(context.token.access_token, deleteFolderId);
router.push(`/projects/${projectId}/folders`, { locale: locale });
const fetchedFolders: FolderType[] = await fetchFolders(context.token.access_token, Number(projectId));
const tree = buildFolderTree(fetchedFolders);
setTreeData(tree);
router.push(`/projects/${projectId}/folders`, { locale });
closeDeleteConfirmDialog();
}
};
const baseClass = '';
const selectedClass = `${baseClass} bg-neutral-200 dark:bg-neutral-700`;
return (
<>
<div className="w-64 min-h-[calc(100vh-64px)] border-r-1 dark:border-neutral-700">
<div className="w-80 min-h-[calc(100vh-64px)] border-r-1 dark:border-neutral-700">
<Button
startContent={<Plus size={16} />}
size="sm"
variant="bordered"
className="m-2"
isDisabled={!context.isProjectDeveloper(Number(projectId))}
onPress={openDialogForCreate}
onPress={() => openDialogForCreate()}
>
{messages.newFolder}
</Button>
<Listbox aria-label="Listbox Variants" variant="light">
{folders.map((folder, index) => (
<ListboxItem
key={index}
onPress={() => router.push(`/projects/${projectId}/folders/${folder.id}/cases`, { locale: locale })}
startContent={<Folder size={20} color="#F7C24E" fill="#F7C24E" />}
className={selectedFolder && folder.id === selectedFolder.id ? selectedClass : baseClass}
endContent={
<FolderEditMenu
folder={folder}
isDisabled={!context.isProjectDeveloper(Number(projectId))}
onEditClick={onEditClick}
onDeleteClick={onDeleteClick}
messages={messages}
/>
}
>
{folder.name}
</ListboxItem>
))}
</Listbox>
{treeData.length > 0 && (
<Tree
data={treeData}
className="w-full"
indent={16}
rowHeight={42}
overscanCount={5}
paddingTop={20}
paddingBottom={20}
padding={20}
width="100%"
openByDefault={false}
disableDrop={true}
disableDrag={true}
>
{(props) => (
<FolderItem
{...props}
projectId={projectId}
selectedFolder={selectedFolder}
locale={locale}
messages={messages}
openDialogForCreate={openDialogForCreate}
onEditClick={onEditClick}
onDeleteClick={onDeleteClick}
/>
)}
</Tree>
)}
</div>
<FolderDialog

78
frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunEditor.tsx
View File

@@ -7,8 +7,6 @@ import {
Select,
SelectItem,
Tooltip,
Listbox,
ListboxItem,
Divider,
Selection,
DropdownTrigger,
@@ -22,7 +20,6 @@ import {
import {
Save,
ArrowLeft,
Folder,
ChevronDown,
CopyPlus,
CopyMinus,
@@ -31,8 +28,11 @@ import {
FileSpreadsheet,
FileCode,
FileJson,
ChevronRight,
Folder,
} from 'lucide-react';
import { useTheme } from 'next-themes';
import { NodeApi, Tree } from 'react-arborist';
import {
fetchRun,
updateRun,
@@ -49,13 +49,15 @@ import { useRouter } from '@/src/i18n/routing';
import { testRunStatus } from '@/config/selection';
import { RunType, RunStatusCountType, RunMessages } from '@/types/run';
import { CaseType } from '@/types/case';
import { FolderType } from '@/types/folder';
import { TreeNodeData } from '@/types/folder';
import { TokenContext } from '@/utils/TokenProvider';
import { useFormGuard } from '@/utils/formGuard';
import { PriorityMessages } from '@/types/priority';
import { RunStatusMessages, TestRunCaseStatusMessages } from '@/types/status';
import { TestTypeMessages } from '@/types/testType';
import { logError } from '@/utils/errorHandler';
import TreeItem from '@/components/TreeItem';
import { buildFolderTree } from '@/utils/buildFolderTree';
const defaultTestRun = {
id: 0,
@@ -92,10 +94,10 @@ export default function RunEditor({
const tokenContext = useContext(TokenContext);
const { theme } = useTheme();
const [testRun, setTestRun] = useState<RunType>(defaultTestRun);
const [folders, setFolders] = useState<FolderType[]>([]);
const [treeData, setTreeData] = useState<TreeNodeData[]>([]);
const [runStatusCounts, setRunStatusCounts] = useState<RunStatusCountType[]>([]);
const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set([]));
const [selectedFolder, setSelectedFolder] = useState<FolderType | null>(null);
const [selectedFolder, setSelectedFolder] = useState<TreeNodeData | null>(null);
const [testCases, setTestCases] = useState<CaseType[]>([]);
const [filteredTestCases, setFilteredTestCases] = useState<CaseType[]>([]);
const [isNameInvalid] = useState<boolean>(false);
@@ -130,7 +132,8 @@ export default function RunEditor({
try {
await fetchRunAndStatusCount();
const foldersData = await fetchFolders(tokenContext.token.access_token, Number(projectId));
setFolders(foldersData);
const tree = buildFolderTree(foldersData);
setTreeData(tree);
setSelectedFolder(foldersData[0]);
initTestCases();
} catch (error: unknown) {
@@ -146,7 +149,7 @@ export default function RunEditor({
function onFilter() {
if (selectedFolder && selectedFolder.id) {
try {
const filteredData = testCases.filter((testCase) => testCase.folderId === selectedFolder.id);
const filteredData = testCases.filter((testCase) => testCase.folderId.toString() === selectedFolder.id);
setFilteredTestCases(filteredData);
} catch (error: unknown) {
logError('Error filtering test cases', error);
@@ -198,9 +201,6 @@ export default function RunEditor({
setIsDirty(false);
};
const baseClass = '';
const selectedClass = `${baseClass} bg-neutral-200 dark:bg-neutral-700`;
const handleExportTypeChange = (keys: Selection) => {
setExportType(new Set(Array.from(keys as Set<string>)));
};
@@ -386,21 +386,49 @@ export default function RunEditor({
<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}
onPress={() => {
setSelectedKeys(new Set([])); // reset selection
setSelectedFolder(folder);
<Tree
data={treeData}
className="w-full"
indent={16}
rowHeight={42}
overscanCount={5}
paddingTop={20}
paddingBottom={20}
padding={20}
width="100%"
openByDefault={false}
disableDrop={true}
disableDrag={true}
>
{({ node, style }: { node: NodeApi<TreeNodeData>; style: React.CSSProperties }) => (
<TreeItem
style={style}
isSelected={selectedFolder ? node.data.id === selectedFolder.id : false}
onClick={() => {
setSelectedKeys(new Set([]));
setSelectedFolder(node.data);
}}
startContent={<Folder size={20} color="#F7C24E" fill="#F7C24E" />}
className={selectedFolder && folder.id === selectedFolder.id ? selectedClass : baseClass}
>
{folder.name}
</ListboxItem>
))}
</Listbox>
toggleButton={
node.data.children && node.data.children.length > 0 ? (
<Button
size="sm"
className="bg-transparent rounded-full h-6 w-6 min-w-4"
isIconOnly
onPress={() => node.toggle()}
>
{node.isOpen ? (
<ChevronDown size={20} color="#F7C24E" />
) : (
<ChevronRight size={20} color="#F7C24E" />
)}
</Button>
) : null
}
icon={<Folder size={20} color="#F7C24E" fill="#F7C24E" />}
label={node.data.name}
/>
)}
</Tree>
</div>
<div className="w-9/12">
<TestCaseSelector

10
frontend/types/folder.ts
View File

@@ -25,3 +25,13 @@ export type FoldersMessages = {
delete: string;
areYouSure: string;
};
export type TreeNodeData = {
id: string;
name: string;
detail: string;
parentFolderId: number | null;
projectId: number;
folderData: FolderType;
children?: TreeNodeData[];
};

36
frontend/utils/buildFolderTree.ts Normal file
View File

@@ -0,0 +1,36 @@
import { FolderType, TreeNodeData } from '@/types/folder';
export function buildFolderTree(folders: FolderType[]): TreeNodeData[] {
const folderMap = new Map<number, TreeNodeData>();
folders.forEach((folder) => {
folderMap.set(folder.id, {
id: folder.id.toString(),
name: folder.name,
detail: folder.detail,
parentFolderId: folder.parentFolderId,
projectId: folder.projectId,
folderData: folder,
children: [],
});
});
const tree: TreeNodeData[] = [];
folders.forEach((folder) => {
const currentNode = folderMap.get(folder.id);
if (!currentNode) return;
if (folder.parentFolderId === null) {
tree.push(currentNode);
} else {
const parent = folderMap.get(folder.parentFolderId);
if (parent && parent.children) {
parent.children.push(currentNode);
}
}
});
return tree;
}