fix: display create enclave error in scrollable box (#1802)

## Description: This PR makes kurtosis alerts have a max height and scrollable contents. ### Demo https://github.com/kurtosis-tech/kurtosis/assets/4419574/4bc00755-fd6f-44e2-a8f5-03c149ba1fa9 ## Is this change user facing? YES ## References (if applicable): * This PR fixes #1787 * In my demo video I have to copy the actual error from the backend into my frontend manually - this only affects local emui, and the cause is reported here #1801.
kurtosis-tech · Nov 16, 2023 · 21adc5d · 21adc5d
1 parent da9fde6
commit 21adc5d
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/enclave-manager/web/src/components/KurtosisAlert.tsx b/enclave-manager/web/src/components/KurtosisAlert.tsx
@@ -21,7 +21,7 @@ type KurtosisAlertProps = AlertProps & {
 
 export const KurtosisAlert = ({ message, details, ...alertProps }: KurtosisAlertProps) => {
   return (
-    <Alert status="error" {...alertProps}>
+    <Alert status="error" overflowY={"auto"} maxHeight={"300px"} alignItems={"flex-start"} {...alertProps}>
       <AlertIcon />
       <Flex flexDirection={"column"} width={"100%"} gap={"8px"}>
         <Flex direction={"row"}>
@@ -40,7 +40,9 @@ export const KurtosisAlert = ({ message, details, ...alertProps }: KurtosisAlert
                 </AccordionButton>
               </h2>
               <AccordionPanel pb={4}>
-                <Box as={"pre"}>{details}</Box>
+                <Box as={"pre"} whiteSpace={"pre-wrap"} wordBreak={"break-word"}>
+                  {details}
+                </Box>
               </AccordionPanel>
             </AccordionItem>
           </Accordion>

diff --git a/enclave-manager/web/src/components/enclaves/modals/ConfigureEnclaveModal.tsx b/enclave-manager/web/src/components/enclaves/modals/ConfigureEnclaveModal.tsx
@@ -151,6 +151,7 @@ export const ConfigureEnclaveModal = ({
   const handleClose = () => {
     if (!isLoading) {
       navigator("#", { replace: true });
+      setError(undefined);
       onClose();
     }
   };
@@ -252,7 +253,7 @@ export const ConfigureEnclaveModal = ({
               <EnclaveSourceButton source={kurtosisPackage.name} size={"sm"} variant={"outline"} color={"gray.100"} />
             </Flex>
             {isDefined(error) && (
-              <KurtosisAlert flex={"0"} message={"Could not execute configuration"} details={error} />
+              <KurtosisAlert flex={"1 0 auto"} message={"Could not execute configuration"} details={error} />
             )}
             <Flex
               flex={"0 1 auto"}