From bf8964449e5d262cbb0636afe71216f734616322 Mon Sep 17 00:00:00 2001
From: Ben Gazzard <ben@dartoxia.com>
Date: Thu, 16 Nov 2023 11:11:50 +0000
Subject: [PATCH] Fix display of create enclave error

---
 enclave-manager/web/package.json                       |  1 +
 enclave-manager/web/src/components/KurtosisAlert.tsx   |  6 ++++--
 .../enclaves/modals/ConfigureEnclaveModal.tsx          | 10 +++++++---
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/enclave-manager/web/package.json b/enclave-manager/web/package.json
index 5fc899c0be..67cfeeb753 100644
--- a/enclave-manager/web/package.json
+++ b/enclave-manager/web/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "homepage": ".",
+  "proxy": "http://localhost:8081",
   "dependencies": {
     "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/react": "^2.8.1",
diff --git a/enclave-manager/web/src/components/KurtosisAlert.tsx b/enclave-manager/web/src/components/KurtosisAlert.tsx
index 1ae57e141a..629e794252 100644
--- 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
index 180f90652a..0937ad42a7 100644
--- a/enclave-manager/web/src/components/enclaves/modals/ConfigureEnclaveModal.tsx
+++ b/enclave-manager/web/src/components/enclaves/modals/ConfigureEnclaveModal.tsx
@@ -10,7 +10,8 @@ import {
   ModalHeader,
   ModalOverlay,
   Text,
-  Tooltip, useToast,
+  Tooltip,
+  useToast,
 } from "@chakra-ui/react";
 import { EnclaveMode } from "enclave-manager-sdk/build/engine_service_pb";
 import { useMemo, useRef, useState } from "react";
@@ -152,6 +153,7 @@ export const ConfigureEnclaveModal = ({
   const handleClose = () => {
     if (!isLoading) {
       navigator("#", { replace: true });
+      setError(undefined);
       onClose();
     }
   };
@@ -167,7 +169,9 @@ export const ConfigureEnclaveModal = ({
       }
     } catch (err) {
       toast({
-        title: `An error occurred while preparing data for running package. The package arguments were not proper JSON: ${stringifyError(err)}`,
+        title: `An error occurred while preparing data for running package. The package arguments were not proper JSON: ${stringifyError(
+          err,
+        )}`,
         colorScheme: "red",
       });
       return;
@@ -251,7 +255,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"}