fix: minor EMUI changes (#2232)

## Description: This PR includes: * fix the EMUI support for pasted github links to support repositories with a default branch not named 'main' * Remove the navigation blocker on the enclave logs * Name ports `service:port` when shown in the enclave list ![image](https://github.com/kurtosis-tech/kurtosis/assets/4419574/62c7db37-91d0-4117-84cd-f124c560affb) ## Is this change user facing? YES ## References (if applicable): - https://sageroomworkspace.slack.com/archives/C05DZ4UABDZ/p1708702184444319 thread on issue parsing github url - https://sageroomworkspace.slack.com/archives/C05DZ4UABDZ/p1708618735521189?thread_ts=1708616085.847449&cid=C05DZ4UABDZ request for port name change
kurtosis-tech · Feb 28, 2024 · 9e719d6 · 9e719d6
1 parent 7020183
commit 9e719d6
Show file tree

Hide file tree

Showing 11 changed files with 49 additions and 121 deletions.
diff --git a/enclave-manager/web/cypress/support/commands.ts b/enclave-manager/web/cypress/support/commands.ts
@@ -33,7 +33,6 @@ Cypress.Commands.add("createAndGoToEnclave", (enclaveName: string) => {
 
   // Go to the enclave overview
   cy.contains("Go to Enclave Overview").click();
-  cy.contains("[role='dialog'] button", "Continue").click();
   cy.url().should("match", /enclave\/[^/]+/);
 });
 

diff --git a/enclave-manager/web/packages/app/src/emui/Navbar.tsx b/enclave-manager/web/packages/app/src/emui/Navbar.tsx
@@ -1,7 +1,5 @@
 import {
   Button,
-  FormControl,
-  FormLabel,
   Input,
   InputGroup,
   InputRightElement,
@@ -12,7 +10,6 @@ import {
   ModalFooter,
   ModalHeader,
   ModalOverlay,
-  Switch,
   Text,
 } from "@chakra-ui/react";
 import { CopyButton, NavButton, Navigation, NavigationDivider } from "kurtosis-ui-components";
@@ -24,10 +21,9 @@ import { PiLinkSimpleBold } from "react-icons/pi";
 import { Link, useLocation } from "react-router-dom";
 import { KURTOSIS_CLOUD_CONNECT_URL } from "../client/constants";
 import { useKurtosisClient } from "../client/enclaveManager/KurtosisClientContext";
-import { settingKeys, useSettings } from "./settings";
 
 export const Navbar = () => {
-  const { updateSetting, settings } = useSettings();
+  //const { updateSetting, settings } = useSettings();
   const location = useLocation();
   const kurtosisClient = useKurtosisClient();
   const [showAboutDialog, setShowAboutDialog] = useState(false);
@@ -83,32 +79,32 @@ export const Navbar = () => {
                 />
               </InputRightElement>
             </InputGroup>
-            <Text
-              as={"h2"}
-              fontSize={"lg"}
-              m={"16px 0"}
-              pt={"16px"}
-              borderTopWidth={"1px"}
-              borderTopColor={"gray.60"}
-              fontWeight={"semibold"}
-            >
-              Settings:
-            </Text>
-            <FormControl display="flex" alignItems="center">
-              <FormLabel htmlFor="experimental-build" mb="0">
-                Enable experimental enclave builder interface?
-              </FormLabel>
-              <Switch
-                id="experimental-build"
-                onChange={() =>
-                  updateSetting(
-                    settingKeys.ENABLE_EXPERIMENTAL_BUILD_ENCLAVE,
-                    !settings.ENABLE_EXPERIMENTAL_BUILD_ENCLAVE,
-                  )
-                }
-                isChecked={settings.ENABLE_EXPERIMENTAL_BUILD_ENCLAVE}
-              />
-            </FormControl>
+            {/*<Text*/}
+            {/*  as={"h2"}*/}
+            {/*  fontSize={"lg"}*/}
+            {/*  m={"16px 0"}*/}
+            {/*  pt={"16px"}*/}
+            {/*  borderTopWidth={"1px"}*/}
+            {/*  borderTopColor={"gray.60"}*/}
+            {/*  fontWeight={"semibold"}*/}
+            {/*>*/}
+            {/*  Settings:*/}
+            {/*</Text>*/}
+            {/*<FormControl display="flex" alignItems="center">*/}
+            {/*  <FormLabel htmlFor="experimental-build" mb="0">*/}
+            {/*    Enable experimental enclave builder interface?*/}
+            {/*  </FormLabel>*/}
+            {/*  <Switch*/}
+            {/*    id="experimental-build"*/}
+            {/*    onChange={() =>*/}
+            {/*      updateSetting(*/}
+            {/*        settingKeys.ENABLE_EXPERIMENTAL_BUILD_ENCLAVE,*/}
+            {/*        !settings.ENABLE_EXPERIMENTAL_BUILD_ENCLAVE,*/}
+            {/*      )*/}
+            {/*    }*/}
+            {/*    isChecked={settings.ENABLE_EXPERIMENTAL_BUILD_ENCLAVE}*/}
+            {/*  />*/}
+            {/*</FormControl>*/}
           </ModalBody>
 
           <ModalFooter>

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
@@ -1,12 +1,10 @@
 import { isDefined } from "kurtosis-ui-components";
 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 { EnclaveBuilderDrawer } from "./enclaveBuilder/EnclaveBuilderDrawer";
 
 export const BuildEnclave = () => {
-  const { settings } = useSettings();
   const navigate = useNavigate();
   const location = useLocation();
 
@@ -23,9 +21,5 @@ export const BuildEnclave = () => {
     }
   };
 
-  if (!settings.ENABLE_EXPERIMENTAL_BUILD_ENCLAVE) {
-    return null;
-  }
-
   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
@@ -3,7 +3,6 @@ import { KurtosisPackage } from "kurtosis-cloud-indexer-sdk";
 import { isDefined } from "kurtosis-ui-components";
 import { useState } from "react";
 import { FiEdit2 } from "react-icons/fi";
-import { useSettings } from "../../settings";
 import { EnclaveFullInfo } from "../types";
 import { CreateOrConfigureEnclaveDrawer } from "./configuration/drawer/CreateOrConfigureEnclaveDrawer";
 import { EnclaveBuilderDrawer } from "./enclaveBuilder/EnclaveBuilderDrawer";
@@ -15,8 +14,6 @@ type EditEnclaveButtonProps = ButtonProps & {
 };
 
 export const EditEnclaveButton = ({ enclave, ...buttonProps }: EditEnclaveButtonProps) => {
-  const { settings } = useSettings();
-
   if (!isDefined(enclave.starlarkRun)) {
     return (
       <Button isLoading={true} colorScheme={"blue"} leftIcon={<FiEdit2 />} size={"sm"} {...buttonProps}>
@@ -35,10 +32,7 @@ export const EditEnclaveButton = ({ enclave, ...buttonProps }: EditEnclaveButton
     );
   }
 
-  if (
-    settings.ENABLE_EXPERIMENTAL_BUILD_ENCLAVE &&
-    starlarkScriptContainsEMUIBuildState(enclave.starlarkRun.value.serializedScript)
-  ) {
+  if (starlarkScriptContainsEMUIBuildState(enclave.starlarkRun.value.serializedScript)) {
     return <EditFromScriptButton enclave={enclave} {...buttonProps} />;
   }
 

diff --git a/...anager/web/packages/app/src/emui/enclaves/components/modals/LogNavigationWarningModal.tsx b/...anager/web/packages/app/src/emui/enclaves/components/modals/LogNavigationWarningModal.tsx
diff --git a/enclave-manager/web/packages/app/src/emui/enclaves/components/tables/EnclavesTable.tsx b/enclave-manager/web/packages/app/src/emui/enclaves/components/tables/EnclavesTable.tsx
@@ -54,6 +54,7 @@ const enclaveToRow = (enclave: EnclaveFullInfo, catalog?: Result<GetPackagesResp
             service.privatePorts,
             service.maybePublicPorts,
             service.maybePublicIpAddr,
+            service.name,
           ),
         )
       : null,

diff --git a/enclave-manager/web/packages/app/src/emui/enclaves/components/tables/PortsTable.tsx b/enclave-manager/web/packages/app/src/emui/enclaves/components/tables/PortsTable.tsx
@@ -26,6 +26,7 @@ export const getPortTableRows = (
   privatePorts: Record<string, Port>,
   publicPorts: Record<string, Port>,
   publicIp: string,
+  serviceName?: string,
 ): PortsTableRow[] => {
   return Object.entries(privatePorts).map(([name, port]) => {
     let link;
@@ -45,7 +46,7 @@ export const getPortTableRows = (
         transportProtocol: transportProtocolToString(port.transportProtocol),
         privatePort: port.number,
         publicPort: publicPorts[name].number,
-        name,
+        name: isDefined(serviceName) ? `${serviceName}:${name}` : name,
       },
       link: link,
     };

diff --git a/...ave-manager/web/packages/app/src/emui/enclaves/components/widgets/CreateEnclaveButton.tsx b/...ave-manager/web/packages/app/src/emui/enclaves/components/widgets/CreateEnclaveButton.tsx
@@ -1,26 +1,22 @@
 import { Button, ButtonGroup, Tooltip } from "@chakra-ui/react";
 import { FiPlus, FiTool } from "react-icons/fi";
 import { useNavigate } from "react-router-dom";
-import { useSettings } from "../../../settings";
 import { KURTOSIS_BUILD_ENCLAVE_URL_ARG, KURTOSIS_CREATE_ENCLAVE_URL_ARG } from "../configuration/drawer/constants";
 
 export const CreateEnclaveButton = () => {
-  const { settings } = useSettings();
   const navigate = useNavigate();
   return (
     <ButtonGroup>
-      {settings.ENABLE_EXPERIMENTAL_BUILD_ENCLAVE && (
-        <Tooltip label={"Build a new enclave"} openDelay={1000}>
-          <Button
-            colorScheme={"blue"}
-            leftIcon={<FiTool />}
-            size={"sm"}
-            onClick={() => navigate(`#${KURTOSIS_BUILD_ENCLAVE_URL_ARG}`)}
-          >
-            Build Enclave
-          </Button>
-        </Tooltip>
-      )}
+      <Tooltip label={"Build a new enclave"} openDelay={1000}>
+        <Button
+          colorScheme={"blue"}
+          leftIcon={<FiTool />}
+          size={"sm"}
+          onClick={() => navigate(`#${KURTOSIS_BUILD_ENCLAVE_URL_ARG}`)}
+        >
+          Build Enclave
+        </Button>
+      </Tooltip>
       <Tooltip label={"Create a new enclave"} openDelay={1000}>
         <Button
           colorScheme={"green"}

diff --git a/enclave-manager/web/packages/app/src/emui/enclaves/enclave/logs/EnclaveLogs.tsx b/enclave-manager/web/packages/app/src/emui/enclaves/enclave/logs/EnclaveLogs.tsx
@@ -27,9 +27,8 @@ import {
 } from "kurtosis-ui-components";
 import { useEffect, useMemo, useState } from "react";
 import { FiCheck, FiSettings, FiX } from "react-icons/fi";
-import { Location, useBlocker, useLocation, useNavigate } from "react-router-dom";
+import { Location, useLocation, useNavigate } from "react-router-dom";
 import { EditEnclaveButton } from "../../components/EditEnclaveButton";
-import { LogNavigationWarningModal } from "../../components/modals/LogNavigationWarningModal";
 import { ServicesTable } from "../../components/tables/ServicesTable";
 import { DeleteEnclavesButton } from "../../components/widgets/DeleteEnclavesButton";
 import { useEnclavesContext } from "../../EnclavesContext";
@@ -90,8 +89,6 @@ export const EnclaveLogs = () => {
     );
   }, [rawLogLines, shouldUseDescriptionField]);
 
-  const blocker = useBlocker(({ currentLocation, nextLocation }) => currentLocation.pathname !== nextLocation.pathname);
-
   useEffect(() => {
     let cancelled = false;
     (async () => {
@@ -223,19 +220,6 @@ export const EnclaveLogs = () => {
             />
           </TitledBox>
         )}
-        <LogNavigationWarningModal
-          isOpen={blocker.state === "blocked"}
-          onCancel={() => {
-            if (blocker.state === "blocked") {
-              blocker.reset();
-            }
-          }}
-          onConfirm={() => {
-            if (blocker.state === "blocked") {
-              blocker.proceed();
-            }
-          }}
-        />
       </>
     </AppPageLayout>
   );

diff --git a/enclave-manager/web/packages/app/src/emui/settings.tsx b/enclave-manager/web/packages/app/src/emui/settings.tsx
@@ -2,16 +2,14 @@ import { isDefined, maybeParse } from "kurtosis-ui-components";
 import { createContext, PropsWithChildren, useCallback, useContext, useEffect, useState } from "react";
 
 type Settings = {
-  ENABLE_EXPERIMENTAL_BUILD_ENCLAVE: boolean;
   SAVED_PACKAGES: string[];
 };
 
 export const settingKeys: { [k in keyof Settings]: k } = {
-  ENABLE_EXPERIMENTAL_BUILD_ENCLAVE: "ENABLE_EXPERIMENTAL_BUILD_ENCLAVE",
   SAVED_PACKAGES: "SAVED_PACKAGES",
 } as const;
 
-const defaultSettings: Settings = { ENABLE_EXPERIMENTAL_BUILD_ENCLAVE: false, SAVED_PACKAGES: [] };
+const defaultSettings: Settings = { SAVED_PACKAGES: [] };
 
 const SETTINGS_LOCAL_STORAGE_KEY = "kurtosis-settings";
 

diff --git a/enclave-manager/web/packages/components/src/utils/packageUtils.ts b/enclave-manager/web/packages/components/src/utils/packageUtils.ts
@@ -1,18 +1,23 @@
 export function parsePackageUrl(packageUrl: string) {
   const components = packageUrl
     .replace(/https?:\/\//, "")
-    .replace(/(?<=github\.com\/([^/])+\/([^/])+)\/tree\/main/, "")
+    .replace(/(?<=github\.com\/[^/]+\/[^/]+)\/tree\/([^/]+)/, "")
     .split("/");
   if (components.length < 3) {
     throw Error(`Illegal url, invalid number of components: ${packageUrl}`);
   }
   if (components[1].length < 1 || components[2].length < 1) {
     throw Error(`Illegal url, empty components: ${packageUrl}`);
   }
+
+  const branchMatches = packageUrl.match(/(?<=github\.com\/[^/]+\/[^/]+)\/tree\/([^/]+)/);
+  const defaultBranch = branchMatches ? branchMatches[1] : undefined;
+
   return {
     baseUrl: "github.com",
     owner: components[1],
     name: components[2],
     rootPath: components.filter((v, i) => i > 2 && v.length > 0).join("/") + "/",
+    defaultBranch,
   };
 }