From a1aac539c40005e7747a095e81c0d996f5062231 Mon Sep 17 00:00:00 2001
From: Samir Kamal <1954121+skamril@users.noreply.github.com>
Date: Tue, 6 Aug 2024 14:34:10 +0200
Subject: [PATCH] feat(ui-debug): enhance Matrix component

---
 .../Singlestudy/explore/Debug/Data/Matrix.tsx | 29 ++++++++++---------
 .../Singlestudy/explore/Debug/Data/style.ts   | 15 +---------
 2 files changed, 16 insertions(+), 28 deletions(-)

diff --git a/webapp/src/components/App/Singlestudy/explore/Debug/Data/Matrix.tsx b/webapp/src/components/App/Singlestudy/explore/Debug/Data/Matrix.tsx
index c09b8c645f..266e377853 100644
--- a/webapp/src/components/App/Singlestudy/explore/Debug/Data/Matrix.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Debug/Data/Matrix.tsx
@@ -1,25 +1,26 @@
-import { useOutletContext } from "react-router";
-import { MatrixStats, StudyMetadata } from "../../../../../../common/types";
-import { Root, Content } from "./style";
+import { MatrixStats } from "../../../../../../common/types";
 import MatrixInput from "../../../../../common/MatrixInput";
+import ViewWrapper from "../../../../../common/page/ViewWrapper";
 
 interface Props {
+  studyId: string;
   path: string;
 }
 
-function Matrix({ path }: Props) {
-  const { study } = useOutletContext<{ study: StudyMetadata }>();
-
-  ////////////////////////////////////////////////////////////////
-  // JSX
-  ////////////////////////////////////////////////////////////////
+function Matrix({ studyId, path }: Props) {
+  const filename = path.split("/").pop();
+  const isUserFolder = path.startsWith("/user/");
 
   return (
-    <Root>
-      <Content>
-        <MatrixInput study={study} url={path} computStats={MatrixStats.NOCOL} />
-      </Content>
-    </Root>
+    <ViewWrapper>
+      <MatrixInput
+        title={filename}
+        study={studyId}
+        url={path}
+        computStats={MatrixStats.NOCOL}
+        disableImport={!isUserFolder}
+      />
+    </ViewWrapper>
   );
 }
 
diff --git a/webapp/src/components/App/Singlestudy/explore/Debug/Data/style.ts b/webapp/src/components/App/Singlestudy/explore/Debug/Data/style.ts
index b0143fdec8..c6496b539f 100644
--- a/webapp/src/components/App/Singlestudy/explore/Debug/Data/style.ts
+++ b/webapp/src/components/App/Singlestudy/explore/Debug/Data/style.ts
@@ -1,4 +1,4 @@
-import { styled, Box, Paper } from "@mui/material";
+import { styled, Box } from "@mui/material";
 
 export const Root = styled(Box)(({ theme }) => ({
   flex: 1,
@@ -19,16 +19,3 @@ export const Header = styled(Box)(({ theme }) => ({
   alignItems: "center",
   marginBottom: theme.spacing(1),
 }));
-
-export const Content = styled(Paper)(({ theme }) => ({
-  padding: theme.spacing(2),
-  boxSizing: "border-box",
-  flex: 1,
-  width: "100%",
-  display: "flex",
-  flexFlow: "column nowrap",
-  justifyContent: "flex-start",
-  alignItems: "flex-start",
-  overflow: "auto",
-  position: "relative",
-}));