feat(ui-debug): add unsupported files handling (#2260)

ANT-2362 => handle unsupported files display
ANT-2529 => display output matrices as raw text

webapp/public/locales/en/main.json

@@ -251,7 +251,7 @@
   "study.district": "District",
   "study.bindingconstraints": "Binding Constraints",
   "study.debug": "Debug",
-  "study.debug.file.image": "Image file",
+  "study.debug.file.unsupported": "Unsupported file type",
   "study.debug.file.deleteConfirm.title": "Delete File?",
   "study.debug.file.deleteConfirm.message": "Are you sure you want to delete the file?",
   "study.debug.folder.empty": "Folder is empty",

webapp/public/locales/fr/main.json

@@ -251,8 +251,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.debug.file.unsupported": "Type de fichier non supporté",
   "study.debug.file.deleteConfirm.title": "Supprimer le fichier ?",
   "study.debug.file.deleteConfirm.message": "Êtes-vous sûr de vouloir supprimer le fichier ?",
   "study.debug.folder.upload.replaceFileConfirm.title": "Remplacer le fichier ?",

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

@@ -15,7 +15,7 @@
 import Matrix from "../../../../../common/Matrix";
 import type { DataCompProps } from "../utils";
 
-function DebugMatrix({ studyId, filename, filePath, canEdit }: DataCompProps) {
+function DebugMatrix({ filename, filePath, canEdit }: DataCompProps) {
   return <Matrix title={filename} url={filePath} canImport={!canEdit} />;
 }
 

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

@@ -26,11 +26,13 @@ import plaintext from "react-syntax-highlighter/dist/esm/languages/hljs/plaintex
 import ini from "react-syntax-highlighter/dist/esm/languages/hljs/ini";
 import properties from "react-syntax-highlighter/dist/esm/languages/hljs/properties";
 import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
-import type { DataCompProps } from "../utils";
+import { isEmptyContent, parseContent, type DataCompProps } from "../utils";
 import DownloadButton from "../../../../../common/buttons/DownloadButton";
 import { downloadFile } from "../../../../../../utils/fileUtils";
 import { Filename, Flex, Menubar } from "./styles";
 import UploadFileButton from "../../../../../common/buttons/UploadFileButton";
+import EmptyView from "@/components/common/page/SimpleContent";
+import GridOffIcon from "@mui/icons-material/GridOff";
 
 SyntaxHighlighter.registerLanguage("xml", xml);
 SyntaxHighlighter.registerLanguage("plaintext", plaintext);
@@ -63,15 +65,24 @@ function getSyntaxProps(data: string | string[]): SyntaxHighlighterProps {
   };
 }
 
-function Text({ studyId, filePath, filename, canEdit }: DataCompProps) {
+function Text({
+  studyId,
+  filePath,
+  filename,
+  fileType,
+  canEdit,
+}: DataCompProps) {
   const { t } = useTranslation();
   const theme = useTheme();
 
   const res = usePromiseWithSnackbarError(
-    () => getStudyData<string>(studyId, filePath),
+    () =>
+      getStudyData<string>(studyId, filePath).then((text) =>
+        parseContent(text, { filePath, fileType }),
+      ),
     {
       errorMessage: t("studies.error.retrieveData"),
-      deps: [studyId, filePath],
+      deps: [studyId, filePath, fileType],
     },
   );
 
@@ -113,22 +124,34 @@ function Text({ studyId, filePath, filename, canEdit }: DataCompProps) {
             )}
             <DownloadButton onClick={handleDownload} />
           </Menubar>
-          <Box sx={{ overflow: "auto" }}>
-            <SyntaxHighlighter
-              style={atomOneDark}
-              lineNumberStyle={{
-                opacity: 0.5,
-                paddingRight: theme.spacing(3),
+          {isEmptyContent(text) ? ( // TODO remove when files become editable
+            <EmptyView icon={GridOffIcon} title={t("study.results.noData")} />
+          ) : (
+            <Box
+              sx={{
+                overflow: "auto",
+                height: 1,
+                display: "flex",
+                flexDirection: "column",
               }}
-              customStyle={{
-                margin: 0,
-                padding: theme.spacing(2),
-                borderRadius: theme.shape.borderRadius,
-                fontSize: theme.typography.body2.fontSize,
-              }}
-              {...getSyntaxProps(text)}
-            />
-          </Box>
+            >
+              <SyntaxHighlighter
+                style={atomOneDark}
+                lineNumberStyle={{
+                  opacity: 0.5,
+                  paddingRight: theme.spacing(3),
+                }}
+                customStyle={{
+                  margin: 0,
+                  padding: theme.spacing(2),
+                  borderRadius: theme.shape.borderRadius,
+                  fontSize: theme.typography.body2.fontSize,
+                  flex: 1,
+                }}
+                {...getSyntaxProps(text)}
+              />
+            </Box>
+          )}
         </Flex>
       )}
     />

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

@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2024, RTE (https://www.rte-france.com)
+ *
+ * See AUTHORS.txt
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * SPDX-License-Identifier: MPL-2.0
+ *
+ * This file is part of the Antares project.
+ */
+
+import { useTranslation } from "react-i18next";
+import EmptyView from "../../../../../common/page/SimpleContent";
+import BlockIcon from "@mui/icons-material/Block";
+import { Filename, Flex, Menubar } from "./styles";
+import type { DataCompProps } from "../utils";
+import DownloadButton from "@/components/common/buttons/DownloadButton";
+import UploadFileButton from "@/components/common/buttons/UploadFileButton";
+import usePromiseWithSnackbarError from "@/hooks/usePromiseWithSnackbarError";
+import { getStudyData } from "@/services/api/study";
+import { downloadFile } from "@/utils/fileUtils";
+
+function Unsupported({ studyId, filePath, filename, canEdit }: DataCompProps) {
+  const { t } = useTranslation();
+
+  const res = usePromiseWithSnackbarError(
+    () => getStudyData<string>(studyId, filePath),
+    {
+      errorMessage: t("studies.error.retrieveData"),
+      deps: [studyId, filePath],
+    },
+  );
+
+  ////////////////////////////////////////////////////////////////
+  // Event Handlers
+  ////////////////////////////////////////////////////////////////
+
+  const handleDownload = () => {
+    if (res.data) {
+      downloadFile(res.data, filename);
+    }
+  };
+
+  const handleUploadSuccessful = () => {
+    res.reload();
+  };
+
+  ////////////////////////////////////////////////////////////////
+  // JSX
+  ////////////////////////////////////////////////////////////////
+
+  return (
+    <Flex>
+      <Menubar>
+        <Filename>{filename}</Filename>
+        {canEdit && (
+          <UploadFileButton
+            studyId={studyId}
+            path={filePath}
+            onUploadSuccessful={handleUploadSuccessful}
+          />
+        )}
+        <DownloadButton onClick={handleDownload} />
+      </Menubar>
+      <EmptyView icon={BlockIcon} title={t("study.debug.file.unsupported")} />
+    </Flex>
+  );
+}
+
+export default Unsupported;

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

@@ -12,44 +12,46 @@
  * This file is part of the Antares project.
  */
 
+import { ComponentType } from "react";
 import Text from "./Text";
-import Image from "./Image";
-import Json from "./Json";
+import Unsupported from "./Unsupported";
 import Matrix from "./Matrix";
 import Folder from "./Folder";
-import { canEditFile, type FileInfo, type FileType } from "../utils";
+import {
+  canEditFile,
+  getEffectiveFileType,
+  type FileInfo,
+  type FileType,
+} from "../utils";
 import type { DataCompProps } from "../utils";
 import ViewWrapper from "../../../../../common/page/ViewWrapper";
 import type { StudyMetadata } from "../../../../../../common/types";
+import Json from "./Json";
 
 interface Props extends FileInfo {
   study: StudyMetadata;
   setSelectedFile: (file: FileInfo) => void;
   reloadTreeData: () => void;
 }
 
-type DataComponent = React.ComponentType<DataCompProps>;
-
-const componentByFileType: Record<FileType, DataComponent> = {
+const componentByFileType: Record<FileType, ComponentType<DataCompProps>> = {
   matrix: Matrix,
   json: Json,
   text: Text,
-  image: Image,
+  unsupported: Unsupported,
   folder: Folder,
 } as const;
 
-function Data(props: Props) {
-  const { study, setSelectedFile, reloadTreeData, ...fileInfo } = props;
-  const { fileType, filePath } = fileInfo;
-  const canEdit = canEditFile(study, filePath);
+function Data({ study, setSelectedFile, reloadTreeData, ...fileInfo }: Props) {
+  const fileType = getEffectiveFileType(fileInfo.filePath, fileInfo.fileType);
   const DataViewer = componentByFileType[fileType];
 
   return (
     <ViewWrapper>
       <DataViewer
         {...fileInfo}
         studyId={study.id}
-        canEdit={canEdit}
+        canEdit={canEditFile(study, fileInfo.filePath)}
         setSelectedFile={setSelectedFile}
         reloadTreeData={reloadTreeData}
       />