feat: enclave builder tweaks

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"} />