From f4d7db308d2c3cad34f1977d61932b48ae438051 Mon Sep 17 00:00:00 2001
From: Anis SMAIL <anis.smail_externe@rte-france.com>
Date: Thu, 30 Jan 2025 18:17:26 +0100
Subject: [PATCH] fix filter not selected when we click on folder name

---
 .../App/Studies/StudiesList/index.tsx           | 10 ++++++----
 .../App/Studies/StudyTree/StudyTreeNode.tsx     |  4 +++-
 .../components/App/Studies/StudyTree/index.tsx  | 17 +++++++++++++++--
 .../components/App/Studies/StudyTree/types.ts   |  1 +
 4 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/webapp/src/components/App/Studies/StudiesList/index.tsx b/webapp/src/components/App/Studies/StudiesList/index.tsx
index 20398f1990..823dde9524 100644
--- a/webapp/src/components/App/Studies/StudiesList/index.tsx
+++ b/webapp/src/components/App/Studies/StudiesList/index.tsx
@@ -63,7 +63,7 @@ import { scanFolder } from "../../../../services/api/study";
 import useEnqueueErrorSnackbar from "../../../../hooks/useEnqueueErrorSnackbar";
 import ConfirmationDialog from "../../../common/dialogs/ConfirmationDialog";
 import CheckBoxFE from "@/components/common/fieldEditors/CheckBoxFE";
-import { DEFAULT_WORKSPACE_PREFIX } from "@/components/common/utils/constants";
+import { DEFAULT_WORKSPACE_PREFIX, ROOT_FOLDER_NAME } from "@/components/common/utils/constants";
 
 const CARD_TARGET_WIDTH = 500;
 const CARD_HEIGHT = 250;
@@ -88,7 +88,9 @@ function StudiesList(props: StudiesListProps) {
   const [selectionMode, setSelectionMode] = useState(false);
   const [confirmFolderScan, setConfirmFolderScan] = useState(false);
   const [isRecursiveScan, setIsRecursiveScan] = useState(false);
-  const scanDisabled: boolean = !!folder && folder.startsWith(DEFAULT_WORKSPACE_PREFIX);
+  const isInDefaultWorkspace = !!folder && folder.startsWith(DEFAULT_WORKSPACE_PREFIX);
+  const isRootFolder = folder === ROOT_FOLDER_NAME;
+  const scanDisabled: boolean = isInDefaultWorkspace || isRootFolder;
 
   useEffect(() => {
     setFolderList(folder.split("/"));
@@ -267,14 +269,14 @@ function StudiesList(props: StudiesListProps) {
             </Tooltip>
           )}
 
-          {folder !== "root" && (
+          {!scanDisabled && (
             <Tooltip title={t("studies.scanFolder") as string}>
               <IconButton onClick={() => setConfirmFolderScan(true)} disabled={scanDisabled}>
                 <RadarIcon />
               </IconButton>
             </Tooltip>
           )}
-          {folder !== "root" && confirmFolderScan && (
+          {!isRootFolder && confirmFolderScan && (
             <ConfirmationDialog
               titleIcon={RadarIcon}
               onCancel={() => {
diff --git a/webapp/src/components/App/Studies/StudyTree/StudyTreeNode.tsx b/webapp/src/components/App/Studies/StudyTree/StudyTreeNode.tsx
index 335fcd6859..4bad0cba6e 100644
--- a/webapp/src/components/App/Studies/StudyTree/StudyTreeNode.tsx
+++ b/webapp/src/components/App/Studies/StudyTree/StudyTreeNode.tsx
@@ -22,6 +22,7 @@ export default memo(function StudyTreeNode({
   studyTreeNode,
   parentId,
   itemsLoading,
+  onNodeClick,
 }: StudyTreeNodeProps) {
   const id = parentId ? `${parentId}/${studyTreeNode.name}` : studyTreeNode.name;
   const isLoadingFolder = itemsLoading.includes(id);
@@ -40,13 +41,14 @@ export default memo(function StudyTreeNode({
   }
 
   return (
-    <TreeItemEnhanced itemId={id} label={studyTreeNode.name}>
+    <TreeItemEnhanced itemId={id} label={studyTreeNode.name} onClick={() => onNodeClick(id)}>
       {sortedChildren.map((child) => (
         <StudyTreeNode
           key={`${id}/${child.name}`}
           studyTreeNode={child}
           parentId={id}
           itemsLoading={itemsLoading}
+          onNodeClick={onNodeClick}
         />
       ))}
     </TreeItemEnhanced>
diff --git a/webapp/src/components/App/Studies/StudyTree/index.tsx b/webapp/src/components/App/Studies/StudyTree/index.tsx
index df1f1e401d..044a76708e 100644
--- a/webapp/src/components/App/Studies/StudyTree/index.tsx
+++ b/webapp/src/components/App/Studies/StudyTree/index.tsx
@@ -116,16 +116,24 @@ function StudyTree() {
   // Event Handlers
   ////////////////////////////////////////////////////////////////
 
+  // we need to handle both the expand event and the onClick event
+  // because the onClick isn't triggered when user click on arrow
+  // Also the expanse event isn't triggered when the item doesn't have any subfolder
+  // but we stil want to apply the filter on the clicked folder
   const handleItemExpansionToggle = async (
     event: React.SyntheticEvent<Element, Event>,
     itemId: string,
     isExpanded: boolean,
   ) => {
     if (isExpanded) {
-      dispatch(updateStudyFilters({ folder: itemId }));
       updateTree(itemId, studiesTree);
     }
   };
+
+  const handleTreeItemClick = (itemId: string) => {
+    dispatch(updateStudyFilters({ folder: itemId }));
+  };
+
   ////////////////////////////////////////////////////////////////
   // JSX
   ////////////////////////////////////////////////////////////////
@@ -144,7 +152,12 @@ function StudyTree() {
       }}
       onItemExpansionToggle={handleItemExpansionToggle}
     >
-      <StudyTreeNodeComponent studyTreeNode={studiesTree} parentId="" itemsLoading={itemsLoading} />
+      <StudyTreeNodeComponent
+        studyTreeNode={studiesTree}
+        parentId=""
+        itemsLoading={itemsLoading}
+        onNodeClick={handleTreeItemClick}
+      />
     </SimpleTreeView>
   );
 }
diff --git a/webapp/src/components/App/Studies/StudyTree/types.ts b/webapp/src/components/App/Studies/StudyTree/types.ts
index d91833701b..438cdbff20 100644
--- a/webapp/src/components/App/Studies/StudyTree/types.ts
+++ b/webapp/src/components/App/Studies/StudyTree/types.ts
@@ -31,4 +31,5 @@ export interface StudyTreeNodeProps {
   studyTreeNode: StudyTreeNode;
   parentId: string;
   itemsLoading: string[];
+  onNodeClick: (id: string) => void;
 }