refactor(ui-debug): update data components props

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

@@ -11,31 +11,27 @@ import usePromiseWithSnackbarError from "../../../../../../hooks/usePromiseWithS
 import UsePromiseCond from "../../../../../common/utils/UsePromiseCond";
 import useEnqueueErrorSnackbar from "../../../../../../hooks/useEnqueueErrorSnackbar";
 import ViewWrapper from "../../../../../common/page/ViewWrapper";
+import type { DataCompProps } from "../utils";
 
-interface Props {
-  path: string;
-  studyId: string;
-}
-
-function Json({ path, studyId }: Props) {
+function Json({ filePath, studyId }: DataCompProps) {
   const [t] = useTranslation();
   const { enqueueSnackbar } = useSnackbar();
   const enqueueErrorSnackbar = useEnqueueErrorSnackbar();
   const [jsonData, setJsonData] = useState<string | null>(null);
   const [isSaveAllowed, setIsSaveAllowed] = useState(false);
 
   const res = usePromiseWithSnackbarError(
-    () => getStudyData(studyId, path, -1),
+    () => getStudyData(studyId, filePath, -1),
     {
       errorMessage: t("studies.error.retrieveData"),
-      deps: [studyId, path],
+      deps: [studyId, filePath],
     },
   );
 
   // Reset save button when path changes
   useUpdateEffect(() => {
     setIsSaveAllowed(false);
-  }, [studyId, path]);
+  }, [studyId, filePath]);
 
   ////////////////////////////////////////////////////////////////
   // Event Handlers
@@ -44,7 +40,7 @@ function Json({ path, studyId }: Props) {
   const handleSaveJson = async () => {
     if (isSaveAllowed && jsonData) {
       try {
-        await editStudy(jsonData, studyId, path);
+        await editStudy(jsonData, studyId, filePath);
         enqueueSnackbar(t("studies.success.saveData"), {
           variant: "success",
         });

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

@@ -1,24 +1,19 @@
 import { MatrixStats } from "../../../../../../common/types";
 import MatrixInput from "../../../../../common/MatrixInput";
 import ViewWrapper from "../../../../../common/page/ViewWrapper";
+import type { DataCompProps } from "../utils";
 
-interface Props {
-  studyId: string;
-  path: string;
-}
-
-function Matrix({ studyId, path }: Props) {
-  const filename = path.split("/").pop();
-  const isUserFolder = path.startsWith("/user/");
+function Matrix({ studyId, filePath, enableImport }: DataCompProps) {
+  const filename = filePath.split("/").pop();
 
   return (
     <ViewWrapper>
       <MatrixInput
         title={filename}
         study={studyId}
-        url={path}
+        url={filePath}
         computStats={MatrixStats.NOCOL}
-        disableImport={!isUserFolder}
+        disableImport={!enableImport}
       />
     </ViewWrapper>
   );

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

@@ -13,6 +13,7 @@ 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";
 
 SyntaxHighlighter.registerLanguage("xml", xml);
 SyntaxHighlighter.registerLanguage("plaintext", plaintext);
@@ -24,11 +25,6 @@ const logsRegex = /^(\[[^\]]*\]){3}/;
 // Ex: "EXP : 0"
 const propertiesRegex = /^[^:]+ : [^:]+/;
 
-interface Props {
-  studyId: string;
-  path: string;
-}
-
 function getSyntaxProps(data: string | string[]): SyntaxHighlighterProps {
   const isArray = Array.isArray(data);
   const text = isArray ? data.join("\n") : data;
@@ -50,15 +46,15 @@ function getSyntaxProps(data: string | string[]): SyntaxHighlighterProps {
   };
 }
 
-function Text({ studyId, path }: Props) {
+function Text({ studyId, filePath }: DataCompProps) {
   const { t } = useTranslation();
   const theme = useTheme();
 
   const res = usePromiseWithSnackbarError(
-    () => getStudyData<string>(studyId, path),
+    () => getStudyData<string>(studyId, filePath),
     {
       errorMessage: t("studies.error.retrieveData"),
-      deps: [studyId, path],
+      deps: [studyId, filePath],
     },
   );
 

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

@@ -3,29 +3,33 @@ import Image from "./Image";
 import Json from "./Json";
 import Matrix from "./Matrix";
 import type { FileInfo, FileType } from "../utils";
+import type { DataCompProps } from "../utils";
 
 interface Props extends FileInfo {
   studyId: string;
 }
 
-interface DataComponentProps {
-  studyId: string;
-  path: string;
-}
-type DataComponent = React.ComponentType<DataComponentProps>;
+type DataComponent = React.ComponentType<DataCompProps>;
 
 const componentByFileType: Record<FileType, DataComponent> = {
   matrix: Matrix,
   json: Json,
   text: Text,
   image: Image,
-  folder: ({ path }) => path,
+  folder: ({ filePath }) => filePath,
 } as const;
 
 function Data({ studyId, fileType, filePath }: Props) {
+  const isUserFolder = filePath.startsWith("/user/");
   const DataViewer = componentByFileType[fileType];
 
-  return <DataViewer studyId={studyId} path={filePath} />;
+  return (
+    <DataViewer
+      studyId={studyId}
+      filePath={filePath}
+      enableImport={isUserFolder}
+    />
+  );
 }
 
 export default Data;

webapp/src/components/App/Singlestudy/explore/Debug/utils.ts

@@ -25,6 +25,12 @@ export interface TreeFolder {
 
 export type TreeData = TreeFolder | TreeFile;
 
+export interface DataCompProps {
+  studyId: string;
+  filePath: string;
+  enableImport: boolean;
+}
+
 ////////////////////////////////////////////////////////////////
 // File Info
 ////////////////////////////////////////////////////////////////