feat: add extra verification when deleting prod enclave. (#1404)

Added extra verification where for production enclaves we will ask for enclave before user can delete it completely.

Author: Peeeekay

engine/frontend/package-lock.json

@@ -13,6 +13,7 @@ export const getEnclavesFromKurtosis = async (token, apiHost) => {
                 status: enclave.apiContainerStatus,
                 host: enclave.apiContainerInfo.bridgeIpAddress,
                 port: enclave.apiContainerInfo.grpcPortInsideEnclave,
+                mode: enclave.mode,
             }
         });
     }

engine/frontend/src/api/enclave.js

@@ -14,44 +14,93 @@ import {
     Grid,
     GridItem,
     Text,
-    useDisclosure
-} from '@chakra-ui/react'
+    useDisclosure,
+    FormControl,
+    FormHelperText,
+    Input
+  } from '@chakra-ui/react'
 
-const DeleteAlertDialog = ({isOpen, cancelRef, onClose, enclaveName, setEnclaveName, handleDeleteClick}) => {
+const DeleteAlertDialog = ({isOpen, cancelRef, onClose, enclaveToDelete, setEnclave, handleDeleteClick}) => {
     const [deleting, setDeleting] = useState(false);
-
+    const [value, setValue] = useState("")
+    const [error, setError] = useState(false)
+    
+    const enclaveName = enclaveToDelete.name;
     const handleClose = (action) => {
-        const maybeDeleteRequest = async (action) => {
+
+        const clickCancel = () => {
+            setError(false)
+            setEnclave({})
+            onClose()
+        }
+
+        const clickDelete = async () => {
+            setDeleting(true)
+            await handleDeleteClick(enclaveName)
+            setDeleting(false)
+            setError(false)
+            clickCancel()
+        }
+
+        const maybeDeleteRequest = async () => {
             if (action === "delete") {
-                setDeleting(true)
-                await handleDeleteClick(enclaveName)
-                setDeleting(false)
+                if (value === enclaveName) {
+                    await clickDelete()
+                } else {
+                    setError(true)
+                    setValue("")
+                }
+            } else {
+                clickCancel()
             }
-            setEnclaveName("")
-            onClose()
         }
-        maybeDeleteRequest(action)
+
+        maybeDeleteRequest()
+    }
+
+    const handleInputChange = (val) => {
+        if (error) {
+            setError(false)
+        }
+        setValue(val)
     }
 
     return (
         <AlertDialog
             isOpen={isOpen}
             leastDestructiveRef={cancelRef}
-            onClose={onClose}
+            onClose={ () => {
+                setError(false)
+                setValue("");
+                onClose();
+            }}
             isCentered
       >
         <AlertDialogOverlay>
-          <AlertDialogContent>
-            <AlertDialogHeader fontSize='lg'>
+          <AlertDialogContent backgroundColor={"white"}>
+            <AlertDialogHeader fontSize='lg' color={"black"}>
               Delete Enclave: <Text fontSize='lg' fontWeight='bold' as='i'> {enclaveName} </Text>
             </AlertDialogHeader>
 
             <AlertDialogBody>
-              Are you sure? You can't undo this action afterwards.
+                {
+                    enclaveToDelete.mode ? 
+                        <FormControl>
+                            <Input onChange={(e) => handleInputChange(e.target.value)} isInvalid={error} borderColor={"black"} color={"black"}/>
+                            <FormHelperText color={error ? "red.600" : "black"} fontSize={"sm"}> 
+                                {error ? 
+                                    "Please verify that the input matches the enclave name" : 
+                                    "Enter the enclave name to delete the enclave"
+                                } 
+                            </FormHelperText>
+                        </FormControl> : 
+                        <Text> Are you sure? You can't undo this action afterwards. </Text>
+                }
+                
             </AlertDialogBody>
 
             <AlertDialogFooter>
-              <Button ref={cancelRef} onClick={() => handleClose("cancel")}>
+              <Button ref={cancelRef} onClick={() => handleClose("cancel")} color={"black"}>
                 Cancel
               </Button>
               <Button bg="red.600" _hover={{ bg: "red.700"}}  color="white" onClick={() => handleClose("delete")} ml={3} isLoading={deleting}>
@@ -64,7 +113,7 @@ const DeleteAlertDialog = ({isOpen, cancelRef, onClose, enclaveName, setEnclaveN
     )
 }
 
-const Enclave = ({name, status, created, handleClick, handleDeleteClick, onOpen, setEnclaveName}) => {
+const Enclave = ({name, status, handleClick, onOpen, mode, setEnclave}) => {
     const backgroundColor = status === 1 ? "bg-[#24BA27]" : "bg-red-500"
     return (
         <Grid
@@ -76,7 +125,7 @@ const Enclave = ({name, status, created, handleClick, handleDeleteClick, onOpen,
             <GridItem colSpan={4} align={"right"} style={{"zIndex":100}}>
                 <Button bg="red.600" _hover={{ bg: "red.700"}} color="white" mr="2" onClick={(e)=> {
                     e.stopPropagation()
-                    setEnclaveName(name)
+                    setEnclave({mode:mode, name:name})
                     onOpen()
                 }}> Delete </Button>
             </GridItem>
@@ -91,7 +140,7 @@ const Enclave = ({name, status, created, handleClick, handleDeleteClick, onOpen,
     )
 }
 
-const EnclaveMainComponent = ({onOpen, enclaves, handleClick, handleDeleteClick, setEnclaveName}) => (
+const EnclaveMainComponent = ({onOpen, enclaves, handleClick, handleDeleteClick, setEnclave}) => (
     <div className='grid grid-cols-2 gap-4 flex-1'>
         {
             enclaves.map(enclave => {
@@ -104,15 +153,16 @@ const EnclaveMainComponent = ({onOpen, enclaves, handleClick, handleDeleteClick,
                         created={enclave.created}
                         handleClick={handleClick}
                         handleDeleteClick={handleDeleteClick}
-                        setEnclaveName={setEnclaveName}
+                        setEnclave={setEnclave}
+                        mode={enclave.mode ? enclave.mode : false}
                     />
                 )
             })
         }
     </div>
 )
 
-const EnclaveComponent = ({onOpen, enclaves, handleClick, handleCreateEnvClick, handleDeleteClick, setEnclaveName}) => {
+const EnclaveComponent = ({onOpen, enclaves, handleClick, handleCreateEnvClick, handleDeleteClick, setEnclave}) => {
     return (
         <div className="flex-1 bg-[#171923] overflow-auto">
             {
@@ -132,7 +182,7 @@ const EnclaveComponent = ({onOpen, enclaves, handleClick, handleCreateEnvClick,
                         </div>
                     </div>
                     :
-                    <EnclaveMainComponent setEnclaveName={setEnclaveName} onOpen={onOpen} enclaves={enclaves} handleClick={handleClick} handleDeleteClick={handleDeleteClick}/>
+                    <EnclaveMainComponent setEnclave={setEnclave} onOpen={onOpen} enclaves={enclaves} handleClick={handleClick} handleDeleteClick={handleDeleteClick}/>
             }
         </div>
     )
@@ -141,7 +191,7 @@ const EnclaveComponent = ({onOpen, enclaves, handleClick, handleCreateEnvClick,
 const Enclaves = ({enclaves, isLoading, handleDeleteClick}) => {
     const navigate = useNavigate()
     const cancelRef = useRef()
-    const [enclaveName, setEnclaveName] = useState("")
+    const [enclaveToDelete, setEnclave] = useState({})
     const { isOpen, onOpen, onClose } = useDisclosure()
 
     const handleCreateEnvClick = () => {
@@ -155,15 +205,15 @@ const Enclaves = ({enclaves, isLoading, handleDeleteClick}) => {
     return (
         <div className="flex h-full flex-grow">
             {
-                (isLoading) ? <LoadingOverlay/> : <EnclaveComponent setEnclaveName={setEnclaveName} onOpen={onOpen} enclaves={enclaves} handleClick={handleClick} handleCreateEnvClick={handleCreateEnvClick} handleDeleteClick={handleDeleteClick}/>
+                (isLoading) ? <LoadingOverlay/> : <EnclaveComponent setEnclave={setEnclave} onOpen={onOpen} enclaves={enclaves} handleClick={handleClick} handleCreateEnvClick={handleCreateEnvClick} handleDeleteClick={handleDeleteClick}/>
             }
             <DeleteAlertDialog 
                 isOpen={isOpen} 
                 onOpen={onOpen} 
                 onClose={onClose}
                 cancelRef={cancelRef}
-                enclaveName={enclaveName}
-                setEnclaveName={setEnclaveName}
+                enclaveToDelete={enclaveToDelete}
+                setEnclave={setEnclave}
                 handleDeleteClick={handleDeleteClick}
             />
         </div>

engine/frontend/src/component/Enclaves.js

@@ -1,13 +1,13 @@
 {
   "files": {
     "main.css": "./static/css/main.d26dfda9.css",
-    "main.js": "./static/js/main.efccb412.js",
+    "main.js": "./static/js/main.5a8291dc.js",
     "index.html": "./index.html",
     "main.d26dfda9.css.map": "./static/css/main.d26dfda9.css.map",
-    "main.efccb412.js.map": "./static/js/main.efccb412.js.map"
+    "main.5a8291dc.js.map": "./static/js/main.5a8291dc.js.map"
   },
   "entrypoints": [
     "static/css/main.d26dfda9.css",
-    "static/js/main.efccb412.js"
+    "static/js/main.5a8291dc.js"
   ]
 }

engine/server/webapp/asset-manifest.json

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><title>Kurtosis Enclave Manager</title><script defer="defer" src="./static/js/main.efccb412.js"></script><link href="./static/css/main.d26dfda9.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><title>Kurtosis Enclave Manager</title><script defer="defer" src="./static/js/main.5a8291dc.js"></script><link href="./static/css/main.d26dfda9.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>