split out ReleaseEnvironmentModal (#724)

ui100/src/EnvironmentPanel.tsx

@@ -1,63 +1,13 @@
 import {Node} from "@xyflow/react";
-import {Box, Button, Checkbox, FormControlLabel, Grid2, Modal, Tooltip, Typography} from "@mui/material";
+import {Button, Grid2, Tooltip, Typography} from "@mui/material";
 import EnvironmentIcon from "@mui/icons-material/Computer";
-import {useEffect, useRef, useState} from "react";
+import {useEffect, useState} from "react";
 import {Configuration, Environment, EnvironmentApi, MetadataApi} from "./api";
 import PropertyTable from "./PropertyTable.tsx";
 import SecretToggle from "./SecretToggle.tsx";
 import useStore from "./model/store.ts";
 import DeleteIcon from "@mui/icons-material/Delete";
-import {modalStyle} from "./styling/theme.ts";
+import ReleaseEnvironmentModal from "./ReleaseEnvironmentModal.tsx";
-
-interface ReleaseEnvironmentProps {
-    close: () => void;
-    isOpen: boolean;
-    detail: Environment;
-    action: () => void;
-}
-
-const ReleaseEnvironmentModal = ({ close, isOpen, detail, action }: ReleaseEnvironmentProps) => {
-    const [description, setDescription] = useState<String>("");
-    const [checked, setChecked] = useState<boolean>(false);
-    const checkedRef = useRef<boolean>();
-    checkedRef.current = checked;
-
-    const toggleChecked = (event: React.ChangeEvent<HTMLInputElement>) => {
-        setChecked(!checkedRef.current);
-    }
-
-    useEffect(() => {
-        setChecked(false);
-    }, [isOpen]);
-
-    useEffect(() => {
-        if(detail && detail.description) {
-            setDescription(detail.description);
-        }
-    }, [detail]);
-
-    return (
-        <Modal open={isOpen} onClose={close}>
-            <Box sx={{ ...modalStyle }}>
-                <Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
-                    <Typography variant="h5"><strong>Release Environment</strong></Typography>
-                </Grid2>
-                <Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
-                    <Typography variant="body1">Would you like to release the environment <code>{description}</code> ?</Typography>
-                </Grid2>
-                <Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
-                    <Typography variant="body1">Releasing this environment will also release any shares and accesses that are associated with it.</Typography>
-                </Grid2>
-                <Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
-                    <FormControlLabel control={<Checkbox checked={checked} onChange={toggleChecked} />} label={<p>I confirm the release of <code>{description}</code></p>} sx={{ mt: 2 }} />
-                </Grid2>
-                <Grid2 container sx={{ flexGrow: 1 }} alignItems="center">
-                    <Button color="error" variant="contained" disabled={!checked} onClick={action}>Release</Button>
-                </Grid2>
-            </Box>
-        </Modal>
-    );
-}
 
 interface EnvironmentPanelProps {
     environment: Node;
@@ -108,14 +58,15 @@ const EnvironmentPanel = ({environment}: EnvironmentPanelProps) => {
     }, [environment]);
 
     const releaseEnvironment = () => {
-        if(detail && detail.zId) {
+        if(environment.data && environment.data.envZId) {
+            console.log("releasing");
             let cfg = new Configuration({
                 headers: {
                     "X-TOKEN": user.token
                 }
             });
-            let environment = new EnvironmentApi(cfg);
+            let environmentApi = new EnvironmentApi(cfg);
-            environment.disable({body: {identity: detail.zId}})
+            environmentApi.disable({body: {identity: environment.data.envZId as string}})
                 .then(d => {
                     setReleaseEnvironmentOpen(false);
                 })

ui100/src/ReleaseEnvironmentModal.tsx

@@ -0,0 +1,56 @@
+import {Environment} from "./api";
+import {useEffect, useRef, useState} from "react";
+import {Box, Button, Checkbox, FormControlLabel, Grid2, Modal, Typography} from "@mui/material";
+import {modalStyle} from "./styling/theme.ts";
+
+interface ReleaseEnvironmentProps {
+    close: () => void;
+    isOpen: boolean;
+    detail: Environment;
+    action: () => void;
+}
+
+const ReleaseEnvironmentModal = ({ close, isOpen, detail, action }: ReleaseEnvironmentProps) => {
+    const [description, setDescription] = useState<String>("");
+    const [checked, setChecked] = useState<boolean>(false);
+    const checkedRef = useRef<boolean>();
+    checkedRef.current = checked;
+
+    const toggleChecked = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setChecked(!checkedRef.current);
+    }
+
+    useEffect(() => {
+        setChecked(false);
+    }, [isOpen]);
+
+    useEffect(() => {
+        if(detail && detail.description) {
+            setDescription(detail.description);
+        }
+    }, [detail]);
+
+    return (
+        <Modal open={isOpen} onClose={close}>
+            <Box sx={{ ...modalStyle }}>
+                <Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
+                    <Typography variant="h5"><strong>Release Environment</strong></Typography>
+                </Grid2>
+                <Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
+                    <Typography variant="body1">Would you like to release the environment <code>{description}</code> ?</Typography>
+                </Grid2>
+                <Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
+                    <Typography variant="body1">Releasing this environment will also release any shares and accesses that are associated with it.</Typography>
+                </Grid2>
+                <Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
+                    <FormControlLabel control={<Checkbox checked={checked} onChange={toggleChecked} />} label={<p>I confirm the release of <code>{description}</code></p>} sx={{ mt: 2 }} />
+                </Grid2>
+                <Grid2 container sx={{ flexGrow: 1 }} alignItems="center">
+                    <Button color="error" variant="contained" disabled={!checked} onClick={action}>Release</Button>
+                </Grid2>
+            </Box>
+        </Modal>
+    );
+}
+
+export default ReleaseEnvironmentModal;