extern/zrok
1
1
Fork 0
mirror of https://github.com/openziti/zrok.git synced 2025-03-13 15:08:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

split out ReleaseEnvironmentModal (#724)

Browse Source
This commit is contained in:
Michael Quigley 2025-01-24 10:52:23 -05:00
parent a2f8cac474
commit edc3d08b18
No known key found for this signature in database
GPG Key ID: 9B60314A9DD20A62
2 changed files with 63 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
ui100/src/EnvironmentPanel.tsx
View File

@ -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";
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>
);
}
import ReleaseEnvironmentModal from "./ReleaseEnvironmentModal.tsx";
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);
environment.disable({body: {identity: detail.zId}})
let environmentApi = new EnvironmentApi(cfg);
environmentApi.disable({body: {identity: environment.data.envZId as string}})
.then(d => {
setReleaseEnvironmentOpen(false);
})

56
ui100/src/ReleaseEnvironmentModal.tsx Normal file
View File

@ -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;