feat(ui-debug): update the view

webapp/package.json

@@ -6,22 +6,22 @@
   "scripts": {
     "build": "tsc && vite build",
     "clean": "rm -rf dist node_modules/.vite",
+    "coverage": "vitest run --coverage",
     "dev": "vite",
     "lint": "tsc --noEmit && eslint . --ext ts,tsx --report-unused-disable-directives",
     "preview": "vite preview",
     "test": "vitest",
-    "test:ui": "vitest --ui",
-    "coverage": "vitest run --coverage"
+    "test:ui": "vitest --ui"
   },
   "dependencies": {
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@glideapps/glide-data-grid": "6.0.3",
     "@handsontable/react": "14.1.0",
-    "@mui/icons-material": "5.14.11",
-    "@mui/lab": "5.0.0-alpha.146",
-    "@mui/material": "5.14.11",
-    "@mui/x-date-pickers": "6.18.3",
+    "@mui/icons-material": "5.16.1",
+    "@mui/lab": "5.0.0-alpha.172",
+    "@mui/material": "5.16.1",
+    "@mui/x-tree-view": "7.10.0",
     "@reduxjs/toolkit": "1.9.6",
     "axios": "1.5.1",
     "clsx": "2.0.0",
@@ -60,6 +60,7 @@
     "react-router": "6.3.0",
     "react-router-dom": "6.3.0",
     "react-split": "2.0.14",
+    "react-syntax-highlighter": "15.5.0",
     "react-use": "17.4.0",
     "react-virtualized-auto-sizer": "1.0.20",
     "react-window": "1.8.9",
@@ -92,6 +93,7 @@
     "@types/react-d3-graph": "2.6.5",
     "@types/react-dom": "18.2.8",
     "@types/react-plotly.js": "2.6.1",
+    "@types/react-syntax-highlighter": "15.5.13",
     "@types/react-virtualized-auto-sizer": "1.0.1",
     "@types/react-window": "1.8.6",
     "@types/redux-logger": "3.0.10",

webapp/public/locales/en/main.json

@@ -10,6 +10,7 @@
   "global.archive": "Archive",
   "global.unarchive": "Unarchive",
   "global.export": "Export",
+  "global.export.error": "Export failed",
   "global.filter": "Filter",
   "global.apply": "Apply",
   "global.change": "Change",
@@ -34,6 +35,8 @@
   "global.import": "Import",
   "global.import.fromFile": "From a file",
   "global.import.fromDatabase": "From database",
+  "global.import.success": "Import successful",
+  "global.import.error": "Import failed",
   "global.launch": "Launch",
   "global.jobs": "Jobs",
   "global.unknown": "Unknown",
@@ -49,7 +52,6 @@
   "global.emptyString": "Empty string",
   "global.edit": "Edit",
   "global.download": "Download",
-  "global.download.error": "Download failed",
   "global.generate": "Generate",
   "global.user": "User",
   "global.users": "Users",
@@ -239,6 +241,8 @@
   "study.district": "District",
   "study.bindingconstraints": "Binding Constraints",
   "study.debug": "Debug",
+  "study.debug.file.image": "Image file",
+  "study.debug.folder.empty": "Folder is empty",
   "study.failtofetchlogs": "Failed to fetch logs",
   "study.failtokilltask": "Failed to kill task",
   "study.publicMode": "Public mode",

webapp/public/locales/fr/main.json

@@ -10,6 +10,7 @@
   "global.archive": "Archiver",
   "global.unarchive": "Désarchiver",
   "global.export": "Exporter",
+  "global.export.error": "L'export a échoué",
   "global.filter": "Filtrer",
   "global.apply": "Appliquer",
   "global.change": "Changer",
@@ -34,6 +35,8 @@
   "global.import": "Importer",
   "global.import.fromFile": "Depuis un fichier",
   "global.import.fromDatabase": "Depuis la base de donnée",
+  "global.import.success": "Importation réussie",
+  "global.import.error": "Échec de l'importation",
   "global.launch": "Lancer",
   "global.jobs": "Tâches",
   "global.unknown": "Inconnu",
@@ -49,7 +52,6 @@
   "global.emptyString": "Chaine de caractères vide",
   "global.edit": "Editer",
   "global.download": "Télécharger",
-  "global.download.error": "Le téléchargement a échoué",
   "global.generate": "Générer",
   "global.user": "Utilisateur",
   "global.users": "Utilisateurs",
@@ -239,6 +241,8 @@
   "study.district": "District",
   "study.bindingconstraints": "Contraintes Couplantes",
   "study.debug": "Debug",
+  "study.debug.file.image": "Fichier image",
+  "study.debug.folder.empty": "Le dossier est vide",
   "study.failtofetchlogs": "Échec du chargement des logs",
   "study.failtokilltask": "Échec de l'annulation de l'étude",
   "study.publicMode": "Mode public",

webapp/src/components/App/Singlestudy/explore/Debug/Data/Folder.tsx

@@ -0,0 +1,130 @@
+import {
+  Divider,
+  List,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  ListSubheader,
+} from "@mui/material";
+import FolderIcon from "@mui/icons-material/Folder";
+import {
+  getFileIcon,
+  getFileType,
+  type TreeFolder,
+  type DataCompProps,
+} from "../utils";
+import { Fragment } from "react";
+import EmptyView from "../../../../../common/page/SimpleContent";
+import { useTranslation } from "react-i18next";
+import { Filename, Menubar } from "./styles";
+import UploadFileButton from "../../../../../common/buttons/UploadFileButton";
+import ConfirmationDialog from "../../../../../common/dialogs/ConfirmationDialog";
+import useConfirm from "../../../../../../hooks/useConfirm";
+
+function Folder(props: DataCompProps) {
+  const {
+    filename,
+    filePath,
+    treeData,
+    enableImport,
+    setSelectedFile,
+    reloadTreeData,
+    studyId,
+  } = props;
+
+  const { t } = useTranslation();
+  const replaceFile = useConfirm();
+  const treeFolder = treeData as TreeFolder;
+  const list = Object.entries(treeFolder);
+
+  ////////////////////////////////////////////////////////////////
+  // Event Handlers
+  ////////////////////////////////////////////////////////////////
+
+  const handleValidateUpload = (file: File) => {
+    if (treeFolder[file.name]) {
+      return replaceFile.showConfirm();
+    }
+  };
+
+  ////////////////////////////////////////////////////////////////
+  // JSX
+  ////////////////////////////////////////////////////////////////
+
+  return (
+    <>
+      <List
+        subheader={
+          <ListSubheader>
+            <Menubar>
+              <Filename>{filename}</Filename>
+              {enableImport && (
+                <UploadFileButton
+                  studyId={studyId}
+                  path={(file) => `${filePath}/${file.name}`}
+                  onUploadSuccessful={reloadTreeData}
+                  validate={handleValidateUpload}
+                />
+              )}
+            </Menubar>
+          </ListSubheader>
+        }
+        sx={{
+          height: 1,
+          overflow: "auto",
+          // Prevent scroll to display
+          ...(list.length === 0 && {
+            display: "flex",
+            flexDirection: "column",
+          }),
+        }}
+        dense
+      >
+        {list.length > 0 ? (
+          list.map(([filename, data], index, arr) => {
+            const fileType = getFileType(data);
+            const Icon = getFileIcon(fileType);
+            const isLast = index === arr.length - 1;
+
+            return (
+              <Fragment key={filename}>
+                <ListItemButton
+                  onClick={() =>
+                    setSelectedFile({
+                      fileType,
+                      filename,
+                      filePath: `${filePath}/${filename}`,
+                      treeData: data,
+                    })
+                  }
+                >
+                  <ListItemIcon>
+                    <Icon />
+                  </ListItemIcon>
+                  <ListItemText primary={filename} />
+                </ListItemButton>
+                {!isLast && <Divider variant="fullWidth" />}
+              </Fragment>
+            );
+          })
+        ) : (
+          <EmptyView title={t("study.debug.folder.empty")} icon={FolderIcon} />
+        )}
+      </List>
+      <ConfirmationDialog
+        title="Replace File?"
+        confirmButtonText="Replace"
+        cancelButtonText="Cancel"
+        maxWidth="xs"
+        open={replaceFile.isPending}
+        onConfirm={replaceFile.yes}
+        onCancel={replaceFile.no}
+      >
+        Another file with the same name already exists. Replacing it will
+        overwrite its content.
+      </ConfirmationDialog>
+    </>
+  );
+}
+
+export default Folder;

webapp/src/components/App/Singlestudy/explore/Debug/Data/Image.tsx

@@ -0,0 +1,20 @@
+import { useTranslation } from "react-i18next";
+import EmptyView from "../../../../../common/page/SimpleContent";
+import ImageIcon from "@mui/icons-material/Image";
+import { Filename, Flex, Menubar } from "./styles";
+import type { DataCompProps } from "../utils";
+
+function Image({ filename }: DataCompProps) {
+  const { t } = useTranslation();
+
+  return (
+    <Flex>
+      <Menubar>
+        <Filename>{filename}</Filename>
+      </Menubar>
+      <EmptyView icon={ImageIcon} title={t("study.debug.file.image")} />
+    </Flex>
+  );
+}
+
+export default Image;