feat: nested folders (#266)

2025-08-06 10:26:38 -03:00
parent d4c5f59755
commit 424b1bdbc7
10 changed files with 457 additions and 79 deletions
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/FolderTree.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/FolderTree.tsx
@@ -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}
+    />
+  );
+}
--- a/frontend/src/app/[locale]/projects/[projectId]/folders/FoldersPane.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/folders/FoldersPane.tsx
@@ -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
--- a/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunEditor.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/runs/[runId]/RunEditor.tsx
@@ -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