From 65e1214041f6682df56d7ca228553d232d0d1b20 Mon Sep 17 00:00:00 2001
From: Samir Kamal <1954121+skamril@users.noreply.github.com>
Date: Thu, 5 Sep 2024 09:51:04 +0200
Subject: [PATCH] feat(ui-debug): enhance Json component

---
 .../Singlestudy/explore/Debug/Data/Json.tsx   | 27 ++++++++-----------
 .../Singlestudy/explore/Debug/Data/style.ts   | 21 ---------------
 2 files changed, 11 insertions(+), 37 deletions(-)
 delete mode 100644 webapp/src/components/App/Singlestudy/explore/Debug/Data/style.ts

diff --git a/webapp/src/components/App/Singlestudy/explore/Debug/Data/Json.tsx b/webapp/src/components/App/Singlestudy/explore/Debug/Data/Json.tsx
index 3923ce319a..9ec4c6aff6 100644
--- a/webapp/src/components/App/Singlestudy/explore/Debug/Data/Json.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Debug/Data/Json.tsx
@@ -3,14 +3,14 @@ import { useTranslation } from "react-i18next";
 import { AxiosError } from "axios";
 import { useSnackbar } from "notistack";
 import SaveIcon from "@mui/icons-material/Save";
-import { Box, Button, Typography } from "@mui/material";
+import { Box, Button } from "@mui/material";
 import { useUpdateEffect } from "react-use";
 import { editStudy, getStudyData } from "../../../../../../services/api/study";
-import { Header, Root } from "./style";
 import JSONEditor from "../../../../../common/JSONEditor";
 import usePromiseWithSnackbarError from "../../../../../../hooks/usePromiseWithSnackbarError";
 import UsePromiseCond from "../../../../../common/utils/UsePromiseCond";
 import useEnqueueErrorSnackbar from "../../../../../../hooks/useEnqueueErrorSnackbar";
+import ViewWrapper from "../../../../../common/page/ViewWrapper";
 
 interface Props {
   path: string;
@@ -65,27 +65,22 @@ function Json({ path, studyId }: Props) {
   ////////////////////////////////////////////////////////////////
 
   return (
-    <Root>
-      <Header>
+    <ViewWrapper>
+      <Box>
         <Button
-          variant="outlined"
-          color="primary"
-          startIcon={<SaveIcon sx={{ width: 15, height: 15 }} />}
+          variant="contained"
+          size="small"
+          startIcon={<SaveIcon />}
           onClick={handleSaveJson}
           disabled={!isSaveAllowed}
         >
-          <Typography sx={{ fontSize: "12px" }}>{t("global.save")}</Typography>
+          {t("global.save")}
         </Button>
-      </Header>
+      </Box>
       <UsePromiseCond
         response={res}
         ifResolved={(json) => (
-          <Box
-            sx={{
-              width: 1,
-              height: 1,
-            }}
-          >
+          <Box sx={{ overflow: "auto" }}>
             <JSONEditor
               json={json}
               onChangeText={handleJsonChange}
@@ -96,7 +91,7 @@ function Json({ path, studyId }: Props) {
           </Box>
         )}
       />
-    </Root>
+    </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
deleted file mode 100644
index c6496b539f..0000000000
--- a/webapp/src/components/App/Singlestudy/explore/Debug/Data/style.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { styled, Box } from "@mui/material";
-
-export const Root = styled(Box)(({ theme }) => ({
-  flex: 1,
-  height: "100%",
-  width: "100%",
-  display: "flex",
-  flexFlow: "column nowrap",
-  justifyContent: "flex-start",
-  alignItems: "center",
-  padding: theme.spacing(1, 1),
-}));
-
-export const Header = styled(Box)(({ theme }) => ({
-  width: "100%",
-  display: "flex",
-  flexFlow: "row nowrap",
-  justifyContent: "space-between",
-  alignItems: "center",
-  marginBottom: theme.spacing(1),
-}));