feat(ui): make the scan non recursive by defaul, add an option for re…

…cursive scan, show only studies in the current folder by default, use a tree icon when we show studies for all descendants

webapp/public/locales/en/main.json

@@ -637,6 +637,7 @@
   "studies.folder": "Folder",
   "studies.filters.strictfolder": "Show only direct folder children",
   "studies.scanFolder": "Scan folder",
+  "studies.requestDeepScan": "Scan the folder recursively (may be long) ?",
   "studies.moveStudy": "Move",
   "studies.movefolderplaceholder": "Path separated by '/'",
   "studies.importcopy": "Copy to database",

webapp/public/locales/fr/main.json

@@ -637,6 +637,7 @@
   "studies.folder": "Dossier",
   "studies.filters.strictfolder": "Afficher uniquement les descendants directs",
   "studies.scanFolder": "Scanner le dossier",
+  "studies.requestDeepScan": "Scanner le dossier récursivement (ça peut être long) ?",
   "studies.moveStudy": "Déplacer",
   "studies.movefolderplaceholder": "Chemin séparé par des '/'",
   "studies.importcopy": "Copier en base",

webapp/src/components/App/Studies/StudiesList/index.tsx

@@ -26,14 +26,17 @@ import {
   FormControl,
   InputLabel,
   IconButton,
+  Checkbox,
+  FormControlLabel,
 } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import NavigateNextIcon from "@mui/icons-material/NavigateNext";
 import AutoSizer from "react-virtualized-auto-sizer";
 import HomeIcon from "@mui/icons-material/Home";
 import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
 import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
-import FolderOffIcon from "@mui/icons-material/FolderOff";
+import FolderIcon from "@mui/icons-material/Folder";
+import AccountTreeIcon from "@mui/icons-material/AccountTree";
 import RadarIcon from "@mui/icons-material/Radar";
 import { FixedSizeGrid, GridOnScrollProps } from "react-window";
 import { v4 as uuidv4 } from "uuid";
@@ -91,6 +94,7 @@ function StudiesList(props: StudiesListProps) {
   const [selectedStudies, setSelectedStudies] = useState<string[]>([]);
   const [selectionMode, setSelectionMode] = useState(false);
   const [confirmFolderScan, setConfirmFolderScan] = useState<boolean>(false);
+  const [requestDeepscan, setRequestDeepScan] = useState<boolean>(false);
 
   useEffect(() => {
     setFolderList(folder.split("/"));
@@ -159,13 +163,18 @@ function StudiesList(props: StudiesListProps) {
     try {
       // Remove "/root" from the path
       const folder = folderList.slice(1).join("/");
-      await scanFolder(folder);
+      await scanFolder(folder, requestDeepscan);
       setConfirmFolderScan(false);
+      setRequestDeepScan(false);
     } catch (e) {
       enqueueErrorSnackbar(t("studies.error.scanFolder"), e as AxiosError);
     }
   };
 
+  const handleDeepScanCheckboxChange = () => {
+    setRequestDeepScan(!requestDeepscan);
+  };
+
   ////////////////////////////////////////////////////////////////
   // Utils
   ////////////////////////////////////////////////////////////////
@@ -253,11 +262,15 @@ function StudiesList(props: StudiesListProps) {
             ({`${studyIds.length} ${t("global.studies").toLowerCase()}`})
           </Typography>
           <Tooltip title={t("studies.filters.strictfolder") as string}>
-            <IconButton onClick={toggleStrictFolder}>
-              <FolderOffIcon
-                color={strictFolderFilter ? "secondary" : "disabled"}
-              />
-            </IconButton>
+            {strictFolderFilter ? (
+              <IconButton onClick={toggleStrictFolder}>
+                <FolderIcon color="secondary" />
+              </IconButton>
+            ) : (
+              <IconButton onClick={toggleStrictFolder}>
+                <AccountTreeIcon color="secondary" />
+              </IconButton>
+            )}
           </Tooltip>
           {folder !== "root" && (
             <Tooltip title={t("studies.scanFolder") as string}>
@@ -269,12 +282,20 @@ function StudiesList(props: StudiesListProps) {
           {folder !== "root" && confirmFolderScan && (
             <ConfirmationDialog
               titleIcon={RadarIcon}
-              onCancel={() => setConfirmFolderScan(false)}
+              onCancel={() => {
+                setConfirmFolderScan(false);
+                setRequestDeepScan(false);
+              }}
               onConfirm={handleFolderScan}
               alert="warning"
               open
             >
               {`${t("studies.scanFolder")} ${folder}?`}
+              <FormControlLabel
+                control={<Checkbox checked={requestDeepscan} />}
+                label={t("studies.requestDeepScan")}
+                onChange={handleDeepScanCheckboxChange}
+              />{" "}
             </ConfirmationDialog>
           )}
         </Box>

webapp/src/redux/ducks/studies.ts

@@ -94,7 +94,7 @@ const initialState = studiesAdapter.getInitialState({
   filters: {
     inputValue: "",
     folder: "root",
-    strictFolder: false,
+    strictFolder: true,
     managed: false,
     archived: false,
     variant: false,

webapp/src/services/api/study.ts

@@ -464,8 +464,13 @@ export const updateStudyMetadata = async (
   return res.data;
 };
 
-export const scanFolder = async (folderPath: string): Promise<void> => {
-  await client.post(`/v1/watcher/_scan?path=${encodeURIComponent(folderPath)}`);
+export const scanFolder = async (
+  folderPath: string,
+  recursive: Boolean = false,
+): Promise<void> => {
+  await client.post(
+    `/v1/watcher/_scan?path=${encodeURIComponent(folderPath)}&recursive=${recursive}`,
+  );
 };
 
 export const getStudyLayers = async (uuid: string): Promise<StudyLayer[]> => {