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) {
)}
- {folder !== "root" && (
+ {!scanDisabled && (
setConfirmFolderScan(true)} disabled={scanDisabled}>
)}
- {folder !== "root" && confirmFolderScan && (
+ {!isRootFolder && confirmFolderScan && (
{
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 (
-
+ onNodeClick(id)}>
{sortedChildren.map((child) => (
))}
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,
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}
>
-
+
);
}
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;
}