Merge branch 'main' into gyani/lint-dot-star

kurtosis-tech · Feb 22, 2024 · 2cd69d7 · 2cd69d7
2 parents 41e8bd9 + 003005c
commit 2cd69d7
Show file tree

Hide file tree

Showing 39 changed files with 338 additions and 326 deletions.
diff --git a/enclave-manager/web/packages/app/src/client/enclaveManager/KurtosisClientContext.tsx b/enclave-manager/web/packages/app/src/client/enclaveManager/KurtosisClientContext.tsx
@@ -1,7 +1,7 @@
 import { Flex, Heading, Spinner } from "@chakra-ui/react";
-import Cookies from "js-cookie";
 import { assertDefined, isDefined, KurtosisAlert, stringifyError } from "kurtosis-ui-components";
 import { createContext, PropsWithChildren, useContext, useEffect, useMemo, useState } from "react";
+import { jwtToken } from "../../cookies";
 import { KURTOSIS_CLOUD_EM_PAGE, KURTOSIS_CLOUD_EM_URL } from "../constants";
 import { AuthenticatedKurtosisClient } from "./AuthenticatedKurtosisClient";
 import { KurtosisClient } from "./KurtosisClient";
@@ -69,8 +69,6 @@ export const KurtosisClientProvider = ({ children }: PropsWithChildren) => {
             throw Error(`Port ${port} is not a number.`);
           }
 
-          const jwtToken = Cookies.get("_kurtosis_jwt_token");
-
           if (isDefined(jwtToken)) {
             newClient = new AuthenticatedKurtosisClient(
               `${gatewayHost}`,

diff --git a/enclave-manager/web/packages/app/src/cookies.ts b/enclave-manager/web/packages/app/src/cookies.ts
@@ -0,0 +1,5 @@
+import Cookies from "js-cookie";
+
+export const instanceUUID = Cookies.get("_kurtosis_instance_id") || "";
+export const apiKey = Cookies.get("_kurtosis_api_key") || "";
+export const jwtToken = Cookies.get("_kurtosis_jwt_token");
diff --git a/enclave-manager/web/packages/app/src/emui/enclaves/components/BuildEnclave.tsx b/enclave-manager/web/packages/app/src/emui/enclaves/components/BuildEnclave.tsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { useSettings } from "../../settings";
 import { KURTOSIS_BUILD_ENCLAVE_URL_ARG } from "./configuration/drawer/constants";
-import { EnclaveBuilderModal } from "./modals/EnclaveBuilderModal";
+import { EnclaveBuilderDrawer } from "./enclaveBuilder/EnclaveBuilderDrawer";
 
 export const BuildEnclave = () => {
   const { settings } = useSettings();
@@ -27,5 +27,5 @@ export const BuildEnclave = () => {
     return null;
   }
 
-  return <EnclaveBuilderModal isOpen={buildEnclaveOpen} onClose={handleCloseBuildEnclave} />;
+  return <EnclaveBuilderDrawer isOpen={buildEnclaveOpen} onClose={handleCloseBuildEnclave} />;
 };
diff --git a/enclave-manager/web/packages/app/src/emui/enclaves/components/EditEnclaveButton.tsx b/enclave-manager/web/packages/app/src/emui/enclaves/components/EditEnclaveButton.tsx
@@ -6,8 +6,8 @@ import { FiEdit2 } from "react-icons/fi";
 import { useSettings } from "../../settings";
 import { EnclaveFullInfo } from "../types";
 import { CreateOrConfigureEnclaveDrawer } from "./configuration/drawer/CreateOrConfigureEnclaveDrawer";
-import { starlarkScriptContainsEMUIBuildState } from "./modals/enclaveBuilder/utils";
-import { EnclaveBuilderModal } from "./modals/EnclaveBuilderModal";
+import { EnclaveBuilderDrawer } from "./enclaveBuilder/EnclaveBuilderDrawer";
+import { starlarkScriptContainsEMUIBuildState } from "./enclaveBuilder/utils";
 import { PackageLoadingModal } from "./modals/PackageLoadingModal";
 
 type EditEnclaveButtonProps = ButtonProps & {
@@ -114,7 +114,7 @@ const EditFromScriptButton = ({ enclave, ...buttonProps }: EditFromScriptButtonP
           Edit
         </Button>
       </Tooltip>
-      <EnclaveBuilderModal
+      <EnclaveBuilderDrawer
         isOpen={showBuilderModal}
         onClose={() => setShowBuilderModal(false)}
         existingEnclave={enclave}

diff --git a/...components/modals/EnclaveBuilderModal.tsx → ...s/enclaveBuilder/EnclaveBuilderDrawer.tsx b/...components/modals/EnclaveBuilderModal.tsx → ...s/enclaveBuilder/EnclaveBuilderDrawer.tsx
@@ -1,15 +1,15 @@
 import {
   Button,
   ButtonGroup,
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
   Flex,
   ListItem,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
   Text,
   Tooltip,
   UnorderedList,
@@ -21,19 +21,19 @@ import { Edge, Node, ReactFlowProvider } from "reactflow";
 import "reactflow/dist/style.css";
 import { useEnclavesContext } from "../../EnclavesContext";
 import { EnclaveFullInfo } from "../../types";
-import { ViewStarlarkModal } from "./enclaveBuilder/modals/ViewStarlarkModal";
-import { KurtosisNodeData } from "./enclaveBuilder/types";
-import { getInitialGraphStateFromEnclave, getNodeName } from "./enclaveBuilder/utils";
-import { useVariableContext, VariableContextProvider } from "./enclaveBuilder/VariableContextProvider";
-import { Visualiser, VisualiserImperativeAttributes } from "./enclaveBuilder/Visualiser";
+import { ViewStarlarkModal } from "./modals/ViewStarlarkModal";
+import { KurtosisNodeData } from "./types";
+import { getInitialGraphStateFromEnclave, getNodeName } from "./utils";
+import { useVariableContext, VariableContextProvider } from "./VariableContextProvider";
+import { Visualiser, VisualiserImperativeAttributes } from "./Visualiser";
 
-type EnclaveBuilderModalProps = {
+type EnclaveBuilderDrawerProps = {
   isOpen: boolean;
   onClose: () => void;
   existingEnclave?: RemoveFunctions<EnclaveFullInfo>;
 };
 
-export const EnclaveBuilderModal = (props: EnclaveBuilderModalProps) => {
+export const EnclaveBuilderDrawer = (props: EnclaveBuilderDrawerProps) => {
   const variableContextKey = useRef(0);
   const [error, setError] = useState<string>();
 
@@ -82,22 +82,22 @@ export const EnclaveBuilderModal = (props: EnclaveBuilderModalProps) => {
 
   return (
     <VariableContextProvider key={variableContextKey.current} initialData={initialData}>
-      <EnclaveBuilderModalImpl {...props} initialNodes={initialNodes} initialEdges={initialEdges} />
+      <EnclaveBuilderDrawerImpl {...props} initialNodes={initialNodes} initialEdges={initialEdges} />
     </VariableContextProvider>
   );
 };
 
-type EnclaveBuilderModalImplProps = EnclaveBuilderModalProps & {
+type EnclaveBuilderDrawerImplProps = EnclaveBuilderDrawerProps & {
   initialNodes: Node[];
   initialEdges: Edge[];
 };
-const EnclaveBuilderModalImpl = ({
+const EnclaveBuilderDrawerImpl = ({
   isOpen,
   onClose,
   existingEnclave,
   initialNodes,
   initialEdges,
-}: EnclaveBuilderModalImplProps) => {
+}: EnclaveBuilderDrawerImplProps) => {
   const navigator = useNavigate();
   const visualiserRef = useRef<VisualiserImperativeAttributes | null>(null);
   const { createEnclave, runStarlarkScript } = useEnclavesContext();
@@ -158,14 +158,14 @@ const EnclaveBuilderModalImpl = ({
   };
 
   return (
-    <Modal isOpen={isOpen} onClose={!isLoading ? onClose : () => null} closeOnEsc={false}>
-      <ModalOverlay />
-      <ModalContent h={"89vh"} minW={"1300px"}>
-        <ModalHeader>
+    <Drawer size={"full"} isOpen={isOpen} onClose={!isLoading ? onClose : () => null} closeOnEsc={false}>
+      <DrawerOverlay />
+      <DrawerContent>
+        <DrawerHeader>
           {isDefined(existingEnclave) ? `Editing ${existingEnclave.name}` : "Build a new Enclave"}
-        </ModalHeader>
-        <ModalCloseButton />
-        <ModalBody paddingInline={"0"}>
+        </DrawerHeader>
+        <DrawerCloseButton />
+        <DrawerBody paddingInline={"0"} p={"0"}>
           {isDefined(error) && <KurtosisAlert message={error} />}
           <ReactFlowProvider>
             <Visualiser
@@ -175,8 +175,8 @@ const EnclaveBuilderModalImpl = ({
               existingEnclave={existingEnclave}
             />
           </ReactFlowProvider>
-        </ModalBody>
-        <ModalFooter>
+        </DrawerBody>
+        <DrawerFooter>
           <ButtonGroup>
             <Button onClick={onClose} isDisabled={isLoading}>
               Close
@@ -207,13 +207,13 @@ const EnclaveBuilderModalImpl = ({
               </Button>
             </Tooltip>
           </ButtonGroup>
-        </ModalFooter>
-      </ModalContent>
+        </DrawerFooter>
+      </DrawerContent>
       <ViewStarlarkModal
         isOpen={isDefined(currentStarlarkPreview)}
         onClose={() => setCurrentStarlarkPreview(undefined)}
         starlark={currentStarlarkPreview}
       />
-    </Modal>
+    </Drawer>
   );
 };
diff --git a/...s/enclaveBuilder/KurtosisArtifactNode.tsx → ...s/enclaveBuilder/KurtosisArtifactNode.tsx b/...s/enclaveBuilder/KurtosisArtifactNode.tsx → ...s/enclaveBuilder/KurtosisArtifactNode.tsx
@@ -1,7 +1,7 @@
 import { memo } from "react";
 import { NodeProps } from "reactflow";
-import { KurtosisFormControl } from "../../form/KurtosisFormControl";
-import { StringArgumentInput } from "../../form/StringArgumentInput";
+import { KurtosisFormControl } from "../form/KurtosisFormControl";
+import { StringArgumentInput } from "../form/StringArgumentInput";
 import { FileTreeArgumentInput } from "./input/FileTreeArgumentInput";
 import { validateName } from "./input/validators";
 import { KurtosisNode } from "./KurtosisNode";

diff --git a/...ts/modals/enclaveBuilder/KurtosisNode.tsx → ...omponents/enclaveBuilder/KurtosisNode.tsx b/...ts/modals/enclaveBuilder/KurtosisNode.tsx → ...omponents/enclaveBuilder/KurtosisNode.tsx
@@ -1,7 +1,7 @@
 import { Flex, Icon, IconButton, Text, useToken } from "@chakra-ui/react";
 import { isDefined } from "kurtosis-ui-components";
 import { debounce } from "lodash";
-import { FC, memo, PropsWithChildren, useEffect, useMemo } from "react";
+import { FC, memo, PropsWithChildren, useCallback, useEffect, useMemo } from "react";
 import { DefaultValues, FormProvider, useForm } from "react-hook-form";
 import { FiCpu, FiFile, FiTerminal, FiTrash } from "react-icons/fi";
 import { RxCornerBottomRight } from "react-icons/rx";
@@ -39,14 +39,7 @@ type KurtosisNodeProps = PropsWithChildren<{
 }>;
 
 export const KurtosisNode = memo(
-  <DataType extends KurtosisNodeData>({
-    id,
-
-    selected,
-    minWidth,
-    maxWidth,
-    children,
-  }: KurtosisNodeProps) => {
+  <DataType extends KurtosisNodeData>({ id, selected, minWidth, maxWidth, children }: KurtosisNodeProps) => {
     const { data } = useVariableContext();
     const nodeData = data[id] as DataType;
 
@@ -168,21 +161,33 @@ type ZoomAwareNodeContentProps = PropsWithChildren<{
 
 const ZoomAwareNodeContent = ({ name, type, onDelete, children }: ZoomAwareNodeContentProps) => {
   const viewport = useViewport();
-  const { zoomOut, zoomIn } = useReactFlow();
+  return (
+    <ZoomAwareNodeContentImpl name={name} type={type} onDelete={onDelete} zoom={viewport.zoom}>
+      {children}
+    </ZoomAwareNodeContentImpl>
+  );
+};
 
-  const handleScroll = (e: React.WheelEvent<HTMLDivElement>) => {
-    if (e.currentTarget.scrollTop === 0 && e.deltaY < 0) {
-      zoomIn();
-    }
-    if (
-      Math.abs(e.currentTarget.scrollHeight - e.currentTarget.clientHeight - e.currentTarget.scrollTop) <= 1 &&
-      e.deltaY > 0
-    ) {
-      zoomOut();
-    }
-  };
+type ZoomAwareNodeContentImplProps = ZoomAwareNodeContentProps & { zoom: number };
 
-  if (viewport.zoom < 0.4) {
+const ZoomAwareNodeContentImpl = memo(({ name, type, onDelete, zoom, children }: ZoomAwareNodeContentImplProps) => {
+  const { zoomOut, zoomIn } = useReactFlow();
+  const handleScroll = useCallback(
+    (e: React.WheelEvent<HTMLDivElement>) => {
+      if (e.currentTarget.scrollTop === 0 && e.deltaY < 0) {
+        zoomIn();
+      }
+      if (
+        Math.abs(e.currentTarget.scrollHeight - e.currentTarget.clientHeight - e.currentTarget.scrollTop) <= 1 &&
+        e.deltaY > 0
+      ) {
+        zoomOut();
+      }
+    },
+    [zoomOut, zoomIn],
+  );
+
+  if (zoom < 0.4) {
     return (
       <Flex gap={"20px"} alignItems={"center"} justifyContent={"center"} h={"100%"}>
         <Icon as={nodeIcons[type]} h={"40px"} w={"40px"} />
@@ -228,4 +233,4 @@ const ZoomAwareNodeContent = ({ name, type, onDelete, children }: ZoomAwareNodeC
       </Flex>
     </>
   );
-};
+});
diff --git a/...als/enclaveBuilder/KurtosisPythonNode.tsx → ...nts/enclaveBuilder/KurtosisPythonNode.tsx b/...als/enclaveBuilder/KurtosisPythonNode.tsx → ...nts/enclaveBuilder/KurtosisPythonNode.tsx
@@ -2,12 +2,12 @@ import { Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react"
 import { isDefined } from "kurtosis-ui-components";
 import { memo } from "react";
 import { NodeProps } from "reactflow";
-import { BooleanArgumentInput } from "../../form/BooleanArgumentInput";
-import { CodeEditorInput } from "../../form/CodeEditorInput";
-import { KurtosisFormControl } from "../../form/KurtosisFormControl";
-import { ListArgumentInput } from "../../form/ListArgumentInput";
-import { StringArgumentInput } from "../../form/StringArgumentInput";
-import { KurtosisFormInputProps } from "../../form/types";
+import { BooleanArgumentInput } from "../form/BooleanArgumentInput";
+import { CodeEditorInput } from "../form/CodeEditorInput";
+import { KurtosisFormControl } from "../form/KurtosisFormControl";
+import { ListArgumentInput } from "../form/ListArgumentInput";
+import { StringArgumentInput } from "../form/StringArgumentInput";
+import { KurtosisFormInputProps } from "../form/types";
 import { MentionStringArgumentInput } from "./input/MentionStringArgumentInput";
 import { MountArtifactFileInput } from "./input/MountArtifactFileInput";
 import { validateDockerLocator, validateDurationString, validateName } from "./input/validators";

diff --git a/...ls/enclaveBuilder/KurtosisServiceNode.tsx → ...ts/enclaveBuilder/KurtosisServiceNode.tsx b/...ls/enclaveBuilder/KurtosisServiceNode.tsx → ...ts/enclaveBuilder/KurtosisServiceNode.tsx
@@ -1,13 +1,14 @@
 import { Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
+import { isDefined } from "kurtosis-ui-components";
 import { memo } from "react";
 import { NodeProps } from "reactflow";
-import { BooleanArgumentInput } from "../../form/BooleanArgumentInput";
-import { DictArgumentInput } from "../../form/DictArgumentInput";
-import { IntegerArgumentInput } from "../../form/IntegerArgumentInput";
-import { KurtosisFormControl } from "../../form/KurtosisFormControl";
-import { ListArgumentInput } from "../../form/ListArgumentInput";
-import { StringArgumentInput } from "../../form/StringArgumentInput";
-import { KurtosisFormInputProps } from "../../form/types";
+import { BooleanArgumentInput } from "../form/BooleanArgumentInput";
+import { DictArgumentInput } from "../form/DictArgumentInput";
+import { IntegerArgumentInput } from "../form/IntegerArgumentInput";
+import { KurtosisFormControl } from "../form/KurtosisFormControl";
+import { ListArgumentInput } from "../form/ListArgumentInput";
+import { StringArgumentInput } from "../form/StringArgumentInput";
+import { KurtosisFormInputProps } from "../form/types";
 import { MentionStringArgumentInput } from "./input/MentionStringArgumentInput";
 import { MountArtifactFileInput } from "./input/MountArtifactFileInput";
 import { PortConfigurationField } from "./input/PortConfigurationInput";
@@ -21,6 +22,10 @@ export const KurtosisServiceNode = memo(
     const { data } = useVariableContext();
     const nodeData = data[id] as KurtosisServiceNodeData;
 
+    if (!isDefined(nodeData)) {
+      return null;
+    }
+
     return (
       <KurtosisNode id={id} selected={selected} minWidth={650} maxWidth={800}>
         <Flex gap={"16px"}>

diff --git a/...dals/enclaveBuilder/KurtosisShellNode.tsx → ...ents/enclaveBuilder/KurtosisShellNode.tsx b/...dals/enclaveBuilder/KurtosisShellNode.tsx → ...ents/enclaveBuilder/KurtosisShellNode.tsx
@@ -2,12 +2,12 @@ import { Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react"
 import { isDefined } from "kurtosis-ui-components";
 import { memo } from "react";
 import { NodeProps } from "reactflow";
-import { BooleanArgumentInput } from "../../form/BooleanArgumentInput";
-import { CodeEditorInput } from "../../form/CodeEditorInput";
-import { DictArgumentInput } from "../../form/DictArgumentInput";
-import { KurtosisFormControl } from "../../form/KurtosisFormControl";
-import { ListArgumentInput } from "../../form/ListArgumentInput";
-import { StringArgumentInput } from "../../form/StringArgumentInput";
+import { BooleanArgumentInput } from "../form/BooleanArgumentInput";
+import { CodeEditorInput } from "../form/CodeEditorInput";
+import { DictArgumentInput } from "../form/DictArgumentInput";
+import { KurtosisFormControl } from "../form/KurtosisFormControl";
+import { ListArgumentInput } from "../form/ListArgumentInput";
+import { StringArgumentInput } from "../form/StringArgumentInput";
 import { MentionStringArgumentInput } from "./input/MentionStringArgumentInput";
 import { MountArtifactFileInput } from "./input/MountArtifactFileInput";
 import { validateDockerLocator, validateDurationString, validateName } from "./input/validators";

diff --git a/...nclaveBuilder/VariableContextProvider.tsx → ...nclaveBuilder/VariableContextProvider.tsx b/...nclaveBuilder/VariableContextProvider.tsx → ...nclaveBuilder/VariableContextProvider.tsx
diff --git a/...ents/modals/enclaveBuilder/Visualiser.css → .../components/enclaveBuilder/Visualiser.css b/...ents/modals/enclaveBuilder/Visualiser.css → .../components/enclaveBuilder/Visualiser.css