modal error handling (#837)

ui100/src/ReleaseAccessModal.tsx

@@ -26,6 +26,7 @@ const ReleaseAccessModal = ({ close, isOpen, user, access, detail }: ReleaseAcce
 
     useEffect(() => {
         setChecked(false);
+        setErrorMessage(null);
     }, [isOpen]);
 
     useEffect(() => {
@@ -51,8 +52,11 @@ const ReleaseAccessModal = ({ close, isOpen, user, access, detail }: ReleaseAcce
                     e.response.json().then(ex => {
                         console.log("releaseAccess", ex.message);
                     });
-                    setErrorMessage(<Typography color="red">An error occurred releasing your share <code>{detail.token}</code>!</Typography>);
+                    setErrorMessage(<Typography color="red">An error occurred releasing your access <code>{detail.token}</code>!</Typography>);
-                    setTimeout(() => { setErrorMessage(null); }, 2000);
+                    setTimeout(() => {
+                        setErrorMessage(null);
+                        setChecked(false);
+                    }, 2000);
                 });
         }
     }

ui100/src/ReleaseEnvironmentModal.tsx

@@ -15,6 +15,7 @@ interface ReleaseEnvironmentProps {
 }
 
 const ReleaseEnvironmentModal = ({ close, isOpen, user, environment, detail }: ReleaseEnvironmentProps) => {
+    const [errorMessage, setErrorMessage] = useState<React.JSX.Element>(null);
     const [description, setDescription] = useState<String>("");
     const [checked, setChecked] = useState<boolean>(false);
     const checkedRef = useRef<boolean>();
@@ -26,6 +27,7 @@ const ReleaseEnvironmentModal = ({ close, isOpen, user, environment, detail }: R
 
     useEffect(() => {
         setChecked(false);
+        setErrorMessage(null);
     }, [isOpen]);
 
     useEffect(() => {
@@ -36,14 +38,23 @@ const ReleaseEnvironmentModal = ({ close, isOpen, user, environment, detail }: R
 
     const releaseEnvironment = () => {
         if(environment.data && environment.data.envZId) {
-            getEnvironmentApi(user).disable({body: {identity: environment.data.envZId as string}})
+            getEnvironmentApi(user).disable({
-                .then(d => {
+                body: {
+                    identity: environment.data.envZId as string
+                }
+            })
+                .then(() => {
                     close();
                 })
                 .catch(e => {
                     e.response.json().then(ex => {
                         console.log("releaseEnvironment", ex.message);
                     });
+                    setErrorMessage(<Typography color="red">An error occurred releasing your environment <code>{environment.id}</code>!</Typography>);
+                    setTimeout(() => {
+                        setErrorMessage(null);
+                        setChecked(false);
+                    }, 2000);
                 });
         }
     }
@@ -63,6 +74,7 @@ const ReleaseEnvironmentModal = ({ close, isOpen, user, environment, detail }: R
                 <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>
+                { errorMessage ? <Grid2 container sx={{ mb: 2, p: 1}}><Typography>{errorMessage}</Typography></Grid2> : null}
                 <Grid2 container sx={{ flexGrow: 1 }} alignItems="center">
                     <Button color="error" variant="contained" disabled={!checked} onClick={releaseEnvironment}>Release</Button>
                 </Grid2>

ui100/src/ReleaseShareModal.tsx

@@ -15,6 +15,7 @@ interface ReleaseShareProps {
 }
 
 const ReleaseShareModal = ({ close, isOpen, user, share, detail }: ReleaseShareProps) => {
+    const [errorMessage, setErrorMessage] = useState<React.JSX.Element>(null);
     const [token, setToken] = useState<String>("");
     const [checked, setChecked] = useState<boolean>(false);
     const checkedRef = useRef<boolean>();
@@ -26,6 +27,7 @@ const ReleaseShareModal = ({ close, isOpen, user, share, detail }: ReleaseShareP
 
     useEffect(() => {
         setChecked(false);
+        setErrorMessage(null);
     }, [isOpen]);
 
     useEffect(() => {
@@ -36,7 +38,13 @@ const ReleaseShareModal = ({ close, isOpen, user, share, detail }: ReleaseShareP
 
     const releaseShare = () => {
         if(detail) {
-            getShareApi(user).unshare({body: {envZId: share.data.envZId as string, shrToken: detail.token, reserved: detail.reserved}})
+            getShareApi(user).unshare({
+                body: {
+                    envZId: share.data.envZId as string,
+                    shrToken: detail.token,
+                    reserved: detail.reserved
+                }
+            })
                 .then(d => {
                     close();
                 })
@@ -44,6 +52,11 @@ const ReleaseShareModal = ({ close, isOpen, user, share, detail }: ReleaseShareP
                     e.response.json().then(ex => {
                         console.log("releaseShare", ex.message);
                     });
+                    setErrorMessage(<Typography color="red">An error occurred releasing your share <code>{detail.token}</code>!</Typography>);
+                    setTimeout(() => {
+                        setErrorMessage(null);
+                        setChecked(false);
+                    }, 2000);
                 });
         }
     }
@@ -60,6 +73,7 @@ const ReleaseShareModal = ({ close, isOpen, user, share, detail }: ReleaseShareP
                 <Grid2 container sx={{ flexGrow: 1, p: 1 }} alignItems="center">
                     <FormControlLabel control={<Checkbox checked={checked} onChange={toggleChecked} />} label={<p>I confirm the release of <code>{token}</code></p>} sx={{ mt: 2 }} />
                 </Grid2>
+                { errorMessage ? <Grid2 container sx={{ mb: 2, p: 1}}><Typography>{errorMessage}</Typography></Grid2> : null}
                 <Grid2 container sx={{ flexGrow: 1 }} alignItems="center">
                     <Button color="error" variant="contained" disabled={!checked} onClick={releaseShare}>Release</Button>
                 </Grid2>