feat: enclave builder tweaks (#2142)

## Description:
This PR implements a small amount of immediate feedback received for the
experimental enclave builder ui. Specifically:
* Change text on 'add artifact' button
* Adjust the layout of service nodes to save some space, using tabs
instead
* Support for previewing starlark.

This change also adds a small check in the `eclaveList.cy.ts` ete test,
to try to debug flakey ci runs that @h4ck3rk3y has been impacted by.

### Screenshots


![image](https://github.com/kurtosis-tech/kurtosis/assets/4419574/12b4efa3-f21d-4489-bd39-ad674df6035d)

![image](https://github.com/kurtosis-tech/kurtosis/assets/4419574/947cd8ad-db0a-4ff0-a47b-a0a466ae5ca9)


## Is this change user facing?
YES (experimental flag)

## References (if applicable):
* direct request on slack

enclave-manager/web/cypress/e2e/enclaveList.cy.ts

@@ -21,6 +21,8 @@ describe("Enclave List", () => {
 
     // Update the postgres instance
     cy.contains("button", "Edit").click();
+    cy.contains("Loading").parents(".chakra-modal__content").contains("Error").should("not.exist");
+    cy.contains("Loading").should("not.exist");
     cy.focusInputWithLabel("Max CPU").type("1024");
     cy.contains("button", "Update").click();
     cy.contains("Script completed", { timeout: 30 * 1000 });

enclave-manager/web/packages/app/src/emui/enclaves/components/form/DictArgumentInput.tsx

@@ -50,7 +50,7 @@ export const DictArgumentInput = <DataModel extends object>({
         <PasteButton onValuePasted={handleValuePaste} />
       </ButtonGroup>
       {fields.map((field, i) => (
-        <Flex key={i} gap={"10px"}>
+        <Flex key={field.id} gap={"10px"}>
           <KurtosisSubtypeFormControl
             name={`${otherProps.name as `args.${string}`}.${i}.key`}
             disabled={otherProps.disabled}

enclave-manager/web/packages/app/src/emui/enclaves/components/modals/EnclaveBuilderModal.tsx

@@ -35,6 +35,7 @@ import { useEnclavesContext } from "../../EnclavesContext";
 import { EnclaveFullInfo } from "../../types";
 import { KurtosisArtifactNode } from "./enclaveBuilder/KurtosisArtifactNode";
 import { KurtosisServiceNode } from "./enclaveBuilder/KurtosisServiceNode";
+import { ViewStarlarkModal } from "./enclaveBuilder/modals/ViewStarlarkModal";
 import {
   generateStarlarkFromGraph,
   getInitialGraphStateFromEnclave,
@@ -58,6 +59,7 @@ export const EnclaveBuilderModal = ({ isOpen, onClose, existingEnclave }: Enclav
   const { createEnclave, runStarlarkScript } = useEnclavesContext();
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string>();
+  const [currentStarlarkPreview, setCurrentStarlarkPreview] = useState<string>();
 
   const {
     nodes: initialNodes,
@@ -121,10 +123,14 @@ export const EnclaveBuilderModal = ({ isOpen, onClose, existingEnclave }: Enclav
     }
   };
 
+  const handlePreview = () => {
+    setCurrentStarlarkPreview(visualiserRef.current?.getStarlark() || "Unable to render");
+  };
+
   return (
     <Modal isOpen={isOpen} onClose={!isLoading ? onClose : () => null} closeOnEsc={false}>
       <ModalOverlay />
-      <ModalContent h={"90vh"} minW={"1300px"}>
+      <ModalContent h={"89vh"} minW={"1300px"}>
         <ModalHeader>
           {isDefined(existingEnclave) ? `Editing ${existingEnclave.name}` : "Build a new Enclave"}
         </ModalHeader>
@@ -147,12 +153,18 @@ export const EnclaveBuilderModal = ({ isOpen, onClose, existingEnclave }: Enclav
             <Button onClick={onClose} isDisabled={isLoading}>
               Close
             </Button>
+            <Button onClick={handlePreview}>Preview</Button>
             <Button onClick={handleRun} colorScheme={"green"} isLoading={isLoading} loadingText={"Run"}>
               Run
             </Button>
           </ButtonGroup>
         </ModalFooter>
       </ModalContent>
+      <ViewStarlarkModal
+        isOpen={isDefined(currentStarlarkPreview)}
+        onClose={() => setCurrentStarlarkPreview(undefined)}
+        starlark={currentStarlarkPreview}
+      />
     </Modal>
   );
 };
@@ -225,7 +237,8 @@ const Visualiser = forwardRef<VisualiserImperativeAttributes, VisualiserProps>(
       addNodes({
         id,
         position: getNewNodePosition(),
-        width: 600,
+        width: 650,
+        style: { width: "650px" },
         type: "serviceNode",
         data: {},
       });
@@ -238,6 +251,7 @@ const Visualiser = forwardRef<VisualiserImperativeAttributes, VisualiserProps>(
         id,
         position: getNewNodePosition(),
         width: 600,
+        style: { width: "400px" },
         type: "artifactNode",
         data: {},
       });
@@ -257,6 +271,27 @@ const Visualiser = forwardRef<VisualiserImperativeAttributes, VisualiserProps>(
       });
     }, [setEdges, data]);
 
+    // Remove the resizeObserver error
+    useEffect(() => {
+      const errorHandler = (e: any) => {
+        if (
+          e.message.includes(
+            "ResizeObserver loop completed with undelivered notifications" || "ResizeObserver loop limit exceeded",
+          )
+        ) {
+          const resizeObserverErr = document.getElementById("webpack-dev-server-client-overlay");
+          if (resizeObserverErr) {
+            resizeObserverErr.style.display = "none";
+          }
+        }
+      };
+      window.addEventListener("error", errorHandler);
+
+      return () => {
+        window.removeEventListener("error", errorHandler);
+      };
+    }, []);
+
     useImperativeHandle(
       ref,
       () => ({
@@ -275,7 +310,7 @@ const Visualiser = forwardRef<VisualiserImperativeAttributes, VisualiserProps>(
             Add Service Node
           </Button>
           <Button leftIcon={<FiPlusCircle />} onClick={handleAddArtifactNode}>
-            Add Artifact Node
+            Add Files Node
           </Button>
         </ButtonGroup>
         <Box bg={"gray.900"} flex={"1"}>

enclave-manager/web/packages/app/src/emui/enclaves/components/modals/enclaveBuilder/KurtosisArtifactNode.tsx

@@ -39,7 +39,7 @@ export const KurtosisArtifactNode = memo(
           flexDirection={"column"}
           height={"100%"}
           borderRadius={"8px"}
-          p={selected ? "8px" : "10px"}
+          p={"10px"}
           bg={"gray.600"}
           borderWidth={"3px"}
           outline={"3px solid transparent"}
@@ -92,8 +92,8 @@ export const KurtosisArtifactNode = memo(
             className={"nodrag nowheel"}
             gap={"8px"}
           >
-            <KurtosisFormControl<KurtosisArtifactNodeData> name={"artifactName"} label={"Artifact Name"}>
-              <StringArgumentInput name={"artifactName"} />
+            <KurtosisFormControl<KurtosisArtifactNodeData> name={"artifactName"} label={"Artifact Name"} isRequired>
+              <StringArgumentInput name={"artifactName"} isRequired />
             </KurtosisFormControl>
             <KurtosisFormControl name={"files"} label={"Files"}>
               <FileTreeArgumentInput name={"files"} />