feat: adjust runtime config

src/components/setting/mods/config-viewer.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { useRecoilValue } from "recoil";
 import {
@@ -9,7 +9,6 @@ import {
   DialogContent,
   DialogTitle,
 } from "@mui/material";
-import { InfoRounded } from "@mui/icons-material";
 import { atomThemeMode } from "@/services/states";
 import { getRuntimeYaml } from "@/services/cmds";
 
@@ -18,9 +17,15 @@ import "monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution.js";
 import "monaco-editor/esm/vs/editor/contrib/folding/browser/folding.js";
 import { editor } from "monaco-editor/esm/vs/editor/editor.api";
 
-const ConfigViewer = () => {
+interface Props {
+  open: boolean;
+  onClose: () => void;
+}
+
+const ConfigViewer = (props: Props) => {
+  const { open, onClose } = props;
+
   const { t } = useTranslation();
-  const [open, setOpen] = useState(false);
 
   const editorRef = useRef<any>();
   const instanceRef = useRef<editor.IStandaloneCodeEditor | null>(null);
@@ -53,29 +58,21 @@ const ConfigViewer = () => {
   }, [open]);
 
   return (
-    <>
-      <Dialog open={open} onClose={() => setOpen(false)}>
-        <DialogTitle>
-          {t("Runtime Config")} <Chip label="ReadOnly" size="small" />
-        </DialogTitle>
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle>
+        {t("Runtime Config")} <Chip label={t("ReadOnly")} size="small" />
+      </DialogTitle>
 
-        <DialogContent sx={{ width: 520, pb: 1 }}>
-          <div style={{ width: "100%", height: "420px" }} ref={editorRef} />
-        </DialogContent>
+      <DialogContent sx={{ width: 520, pb: 1 }}>
+        <div style={{ width: "100%", height: "420px" }} ref={editorRef} />
+      </DialogContent>
 
-        <DialogActions>
-          <Button variant="outlined" onClick={() => setOpen(false)}>
-            {t("Back")}
-          </Button>
-        </DialogActions>
-      </Dialog>
-
-      <InfoRounded
-        fontSize="small"
-        style={{ cursor: "pointer", opacity: 0.75 }}
-        onClick={() => setOpen(true)}
-      />
-    </>
+      <DialogActions>
+        <Button variant="outlined" onClick={onClose}>
+          {t("Back")}
+        </Button>
+      </DialogActions>
+    </Dialog>
   );
 };
 export default ConfigViewer;