From f546844a2c897765da262fd3fc0d1c80529aad61 Mon Sep 17 00:00:00 2001 From: Anis SMAIL Date: Tue, 3 Dec 2024 10:39:31 +0100 Subject: [PATCH] refactor(ui): better naming and messages --- webapp/public/locales/en/main.json | 2 +- webapp/public/locales/fr/main.json | 4 +- .../App/Studies/StudiesList/index.tsx | 16 +++---- .../App/Studies/StudyTree/index.tsx | 46 +++++++++++-------- 4 files changed, 37 insertions(+), 31 deletions(-) diff --git a/webapp/public/locales/en/main.json b/webapp/public/locales/en/main.json index 5bb8597a59..abaa81cd56 100644 --- a/webapp/public/locales/en/main.json +++ b/webapp/public/locales/en/main.json @@ -638,7 +638,7 @@ "studies.filters.strictfolder": "Show only direct folder children", "studies.filters.showAllDescendants": "Show all children", "studies.scanFolder": "Scan folder", - "studies.requestDeepScan": "Scan the folder recursively (may be long) ?", + "studies.requestDeepScan": "Recursive scan", "studies.moveStudy": "Move", "studies.movefolderplaceholder": "Path separated by '/'", "studies.importcopy": "Copy to database", diff --git a/webapp/public/locales/fr/main.json b/webapp/public/locales/fr/main.json index fc109acb94..b6ef62f0b5 100644 --- a/webapp/public/locales/fr/main.json +++ b/webapp/public/locales/fr/main.json @@ -636,9 +636,9 @@ "studies.copySuffix": "Copie", "studies.folder": "Dossier", "studies.filters.strictfolder": "Afficher uniquement les descendants directs", - "studies.filters.showAllDescendants": "Afficher tous les descendants", + "studies.filters.showAllDescendants": "Voir les sous-dossiers", "studies.scanFolder": "Scanner le dossier", - "studies.requestDeepScan": "Scanner le dossier récursivement (ça peut être long) ?", + "studies.requestDeepScan": "Scan récursif", "studies.moveStudy": "Déplacer", "studies.movefolderplaceholder": "Chemin séparé par des '/'", "studies.importcopy": "Copier en base", diff --git a/webapp/src/components/App/Studies/StudiesList/index.tsx b/webapp/src/components/App/Studies/StudiesList/index.tsx index b111be325f..2b4c2d7cb0 100644 --- a/webapp/src/components/App/Studies/StudiesList/index.tsx +++ b/webapp/src/components/App/Studies/StudiesList/index.tsx @@ -94,7 +94,7 @@ function StudiesList(props: StudiesListProps) { const [selectedStudies, setSelectedStudies] = useState([]); const [selectionMode, setSelectionMode] = useState(false); const [confirmFolderScan, setConfirmFolderScan] = useState(false); - const [requestDeepScan, setRequestDeepScan] = useState(false); + const [isRecursiveScan, setIsRecursiveScan] = useState(false); useEffect(() => { setFolderList(folder.split("/")); @@ -163,16 +163,16 @@ function StudiesList(props: StudiesListProps) { try { // Remove "/root" from the path const folder = folderList.slice(1).join("/"); - await scanFolder(folder, requestDeepScan); + await scanFolder(folder, isRecursiveScan); setConfirmFolderScan(false); - setRequestDeepScan(false); + setIsRecursiveScan(false); } catch (e) { enqueueErrorSnackbar(t("studies.error.scanFolder"), e as AxiosError); } }; - const handleDeepScanCheckboxChange = () => { - setRequestDeepScan(!requestDeepScan); + const handleRecursiveScan = () => { + setIsRecursiveScan(!isRecursiveScan); }; //////////////////////////////////////////////////////////////// @@ -288,7 +288,7 @@ function StudiesList(props: StudiesListProps) { titleIcon={RadarIcon} onCancel={() => { setConfirmFolderScan(false); - setRequestDeepScan(false); + setIsRecursiveScan(false); }} onConfirm={handleFolderScan} alert="warning" @@ -296,9 +296,9 @@ function StudiesList(props: StudiesListProps) { > {`${t("studies.scanFolder")} ${folder}?`} } + control={} label={t("studies.requestDeepScan")} - onChange={handleDeepScanCheckboxChange} + onChange={handleRecursiveScan} />{" "} )} diff --git a/webapp/src/components/App/Studies/StudyTree/index.tsx b/webapp/src/components/App/Studies/StudyTree/index.tsx index 841ed1ce5d..f7bd95aec5 100644 --- a/webapp/src/components/App/Studies/StudyTree/index.tsx +++ b/webapp/src/components/App/Studies/StudyTree/index.tsx @@ -26,6 +26,7 @@ import useEnqueueErrorSnackbar from "@/hooks/useEnqueueErrorSnackbar"; import useUpdateEffectOnce from "@/hooks/useUpdateEffectOnce"; import { fetchAndInsertSubfolders, fetchAndInsertWorkspaces } from "./utils"; import { useTranslation } from "react-i18next"; +import { AxiosError } from "axios"; function StudyTree() { const initialStudiesTree = useAppSelector(getStudiesTree); @@ -63,7 +64,7 @@ function StudyTree() { setStudiesTree(initialStudiesTree); enqueueErrorSnackbar( t("studies.tree.error.failToFetchWorkspace"), - t("studies.tree.error.detailsInConsole"), + error as AxiosError, ); } }; @@ -75,36 +76,41 @@ function StudyTree() { // Event Handlers //////////////////////////////////////////////////////////////// - const handleTreeItemClick = ( + const handleTreeItemClick = async ( itemId: string, studyTreeNode: StudyTreeNode, ) => { dispatch(updateStudyFilters({ folder: itemId })); if (itemId === "root") { - fetchAndInsertWorkspaces(studiesTree) - .then(setStudiesTree) - .catch((error) => { - enqueueErrorSnackbar("Failed to load list workspaces", error); - }); + try { + const nextTree = await fetchAndInsertWorkspaces(studiesTree); + setStudiesTree(nextTree); + } catch (error) { + enqueueErrorSnackbar( + "studies.tree.error.failToFetchWorkspace", + error as AxiosError, + ); + } } const chidrenPaths = studyTreeNode.children.map( (child) => `root${child.path}`, ); // children paths and current element path - fetchAndInsertSubfolders(chidrenPaths, studiesTree).then((r) => { - setStudiesTree(r[0]); - for (const path of r[1]) { - enqueueErrorSnackbar( - t("studies.tree.error.failToFetchFolder", { - path, - interpolation: { escapeValue: false }, - }), - t("studies.tree.error.detailsInConsole"), - ); - } - }); + const [nextTree, failedPath] = await fetchAndInsertSubfolders( + chidrenPaths, + studiesTree, + ); + setStudiesTree(nextTree); + for (const path of failedPath) { + enqueueErrorSnackbar( + t("studies.tree.error.failToFetchFolder", { + path, + interpolation: { escapeValue: false }, + }), + t("studies.tree.error.detailsInConsole"), + ); + } }; - //////////////////////////////////////////////////////////////// // JSX ////////////////////////////////////////////////////////////////