fix: emui colormodefixer (#1716)

## Description:
The old emui set local storage `chakra-ui-color-mode` to `light`, but
the new emui is designed to work only in `dark` mode. This means that
users transitioning from the old emui to the new one see incorrectly
styled ui. This PR adds a component `ColorModeFixer` to the theme
provider which corrects the color mode to always be dark mode.

This PR additionally runs prettier:fix over the codebase to correct a
unnecessary formatting diff that was merged. I'll follow up this PR with
a simple check to make sure the code is formatted correctly pre merge.

### Screenshot of bad behaviour

![image](https://github.com/kurtosis-tech/kurtosis/assets/4419574/4ae6f900-9f55-4ad5-b7a8-559c2716043b)

## Is this change user facing?
YES

## References (if applicable):
* Raised on slack by @adschwartz and @leeederek

enclave-manager/web/.prettierrc

@@ -1,4 +1,4 @@
 {
   "printWidth": 120,
-  "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-curly"]
+  "plugins": ["prettier-plugin-organize-imports"]
 }

enclave-manager/web/package.json

@@ -33,7 +33,6 @@
     "@types/react-dom": "^18.0.0",
     "monaco-editor": "^0.44.0",
     "prettier": "3.0.3",
-    "prettier-plugin-curly": "^0.1.3",
     "prettier-plugin-organize-imports": "^3.2.3",
     "typescript": "^4.4.2"
   },

enclave-manager/web/src/client/enclaveManager/KurtosisClient.ts

@@ -16,9 +16,9 @@ import {
   GetStarlarkRunRequest,
   RunStarlarkPackageRequest,
 } from "enclave-manager-sdk/build/kurtosis_enclave_manager_api_pb";
+import { EnclaveFullInfo } from "../../emui/enclaves/types";
 import { assertDefined, asyncResult, isDefined } from "../../utils";
 import { RemoveFunctions } from "../../utils/types";
-import { EnclaveFullInfo } from "../../emui/enclaves/types";
 
 export abstract class KurtosisClient {
   protected readonly client: PromiseClient<typeof KurtosisEnclaveManagerServer>;
@@ -43,8 +43,8 @@ export abstract class KurtosisClient {
     this.client = client;
     this.cloudUrl = parentUrl;
     this.baseApplicationUrl = childUrl;
-    console.log("cloudUrl", this.cloudUrl)
-    console.log("baseApplicationUrl", this.baseApplicationUrl)
+    console.log("cloudUrl", this.cloudUrl);
+    console.log("baseApplicationUrl", this.baseApplicationUrl);
   }
 
   abstract getHeaderOptions(): { headers?: Headers };

enclave-manager/web/src/components/CodeEditor.tsx

@@ -1,8 +1,8 @@
-import { Editor, OnChange, OnMount, useMonaco } from "@monaco-editor/react";
-import { isDefined } from "../utils";
-import { useMemo, useRef, useState } from "react";
-import { editor } from "monaco-editor";
 import { Box } from "@chakra-ui/react";
+import { Editor, OnChange, OnMount } from "@monaco-editor/react";
+import { editor } from "monaco-editor";
+import { useState } from "react";
+import { isDefined } from "../utils";
 
 type CodeEditorProps = {
   text: string;

enclave-manager/web/src/components/DataTable.tsx

@@ -16,6 +16,7 @@ import { useState } from "react";
 import { assertDefined, isDefined } from "../utils";
 
 declare module "@tanstack/table-core" {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface ColumnMeta<TData extends RowData, TValue> {
     isNumeric?: boolean;
     centerAligned?: boolean;

enclave-manager/web/src/components/FileDisplay.tsx

@@ -1,7 +1,7 @@
 import { ButtonGroup, Card, Flex, Text } from "@chakra-ui/react";
+import { CodeEditor } from "./CodeEditor";
 import { CopyButton } from "./CopyButton";
 import { DownloadButton } from "./DownloadButton";
-import { CodeEditor } from "./CodeEditor";
 
 type FileDisplayProps = {
   title: string;

enclave-manager/web/src/components/KurtosisThemeProvider.tsx

@@ -1,7 +1,15 @@
-import { ChakraProvider, defineStyle, extendTheme, StyleFunctionProps, ThemeConfig, Tooltip } from "@chakra-ui/react";
+import {
+  ChakraProvider,
+  defineStyle,
+  extendTheme,
+  StyleFunctionProps,
+  ThemeConfig,
+  Tooltip,
+  useColorMode,
+} from "@chakra-ui/react";
 import type { ChakraProviderProps } from "@chakra-ui/react/dist/chakra-provider";
 import { mode } from "@chakra-ui/theme-tools";
-import { PropsWithChildren } from "react";
+import { PropsWithChildren, useEffect } from "react";
 import Fonts from "./theme/Fonts";
 import { formsTheme } from "./theme/formsTheme";
 import { tabsTheme } from "./theme/tabsTheme";
@@ -62,7 +70,7 @@ const theme = extendTheme({
     md: "16px",
     lg: "18px",
     xl: "20px",
-    ["2xl"]: "22px",
+    "2xl": "22px",
   },
   styles: {
     global: (props: StyleFunctionProps) => ({
@@ -276,8 +284,24 @@ export const KurtosisThemeProvider = ({
 }: PropsWithChildren<Omit<ChakraProviderProps, "theme">>) => {
   return (
     <ChakraProvider theme={theme} toastOptions={{ defaultOptions: { position: "top" } }} {...chakraProps}>
+      <ColorModeFixer />
       <Fonts />
       {children}
     </ChakraProvider>
   );
 };
+
+// This component handles legacy local storage settings on browsers that used the old
+// emui, where the color mode may be set to 'light'.
+const ColorModeFixer = () => {
+  const { colorMode, toggleColorMode } = useColorMode();
+
+  useEffect(() => {
+    // Currently only Dark Mode is supported.
+    if (colorMode === "light") {
+      toggleColorMode();
+    }
+  }, [colorMode, toggleColorMode]);
+
+  return null;
+};

enclave-manager/web/src/components/Navigation.tsx

@@ -16,7 +16,7 @@ export const Navigation = ({ baseApplicationUrl, children }: PropsWithChildren &
       p={"20px 16px"}
     >
       <Flex width={"40px"} height={"40px"} alignItems={"center"}>
-        <Image src={baseApplicationUrl+"/logo.png"} />
+        <Image src={baseApplicationUrl + "/logo.png"} />
       </Flex>
       <Flex flexDirection={"column"} gap={"16px"}>
         {children}

enclave-manager/web/src/components/enclaves/configuration/KurtosisPackageArgumentInput.tsx

@@ -1,4 +1,4 @@
-import { ArgumentValueType, PackageArg } from "../../../client/packageIndexer/api/kurtosis_package_indexer_pb";
+import { PackageArg } from "../../../client/packageIndexer/api/kurtosis_package_indexer_pb";
 import { KurtosisArgumentTypeInput } from "./inputs/KurtosisArgumentTypeInput";
 import { KurtosisArgumentFormControl } from "./KurtosisArgumentFormControl";
 import { argToTypeString } from "./utils";
@@ -31,7 +31,7 @@ export const KurtosisPackageArgumentInput = ({ argument, disabled }: KurtosisPac
       helperText={argument.description}
     >
       <KurtosisArgumentTypeInput
-        type={argument.typeV2?.topLevelType || ArgumentValueType.JSON}
+        type={argument.typeV2?.topLevelType}
         subType1={argument.typeV2?.innerType1}
         subType2={argument.typeV2?.innerType2}
         name={fieldName}

enclave-manager/web/src/components/enclaves/configuration/inputs/KurtosisArgumentTypeInput.tsx

@@ -10,7 +10,7 @@ import { ListArgumentInput } from "./ListArgumentInput";
 import { StringArgumentInput } from "./StringArgumentInput";
 
 export type KurtosisArgumentTypeInputProps = {
-  type: ArgumentValueType;
+  type?: ArgumentValueType;
   subType1?: ArgumentValueType;
   subType2?: ArgumentValueType;
   name: FieldPath<ConfigureEnclaveForm>;

enclave-manager/web/src/components/enclaves/configuration/utils.ts

@@ -15,7 +15,7 @@ export function argTypeToString(argType?: ArgumentValueType) {
     case ArgumentValueType.STRING:
       return "string";
     default:
-      return "unknown";
+      return "json";
   }
 }
 
@@ -31,6 +31,6 @@ export function argToTypeString(arg: PackageArg) {
     case ArgumentValueType.LIST:
       return `${argTypeToString(arg.typeV2.innerType1)}[]`;
     default:
-      return "unknown";
+      return "json";
   }
 }

enclave-manager/web/src/components/enclaves/logs/LogLine.tsx

@@ -10,7 +10,7 @@ export type LogLineProps = {
   status?: LogStatus;
 };
 
-const logFontFamily = "Menlo, Monaco, Inconsolata, Consolas, Courier, monospace"
+const logFontFamily = "Menlo, Monaco, Inconsolata, Consolas, Courier, monospace";
 
 export const LogLine = ({ timestamp, message, status }: LogLineProps) => {
   const statusToColor = (status?: LogStatus) => {

enclave-manager/web/src/components/enclaves/modals/ConfigureEnclaveModal.tsx

@@ -120,7 +120,7 @@ export const ConfigureEnclaveModal = ({
       return undefined;
     }
     return JSON.parse(atob(preloadArgs)) as ConfigureEnclaveForm;
-  }, [window.location.search, existingEnclave]);
+  }, [existingEnclave, kurtosisPackage.args]);
 
   const getLinkToCurrentConfig = () => {
     const params = new URLSearchParams({

enclave-manager/web/src/components/enclaves/modals/PackageLoadingModal.tsx

@@ -52,7 +52,7 @@ export const PackageLoadingModal = ({ packageId, onPackageLoaded }: PackageLoadi
         onPackageLoaded(readPackageResponse.value.package);
       }
     })();
-  }, [packageId, onPackageLoaded]);
+  }, [packageId, onPackageLoaded, kurtosisIndexer]);
 
   return (
     <Modal

enclave-manager/web/src/components/enclaves/tables/FilesTable.tsx

@@ -46,7 +46,7 @@ export const FilesTable = ({ filesAndArtifacts, enclaveShortUUID }: FilesTablePr
         ),
       }),
     ],
-    [],
+    [enclaveShortUUID],
   );
 
   return <DataTable columns={columns} data={services} defaultSorting={[{ id: "name", desc: true }]} />;

enclave-manager/web/src/components/enclaves/tables/PortsTable.tsx

@@ -1,11 +1,11 @@
-import { Link, Flex, Text } from "@chakra-ui/react";
+import { ExternalLinkIcon } from "@chakra-ui/icons";
+import { Flex, Link, Text } from "@chakra-ui/react";
 import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
 import { Port } from "enclave-manager-sdk/build/api_container_service_pb";
 import { useMemo } from "react";
+import { CopyButton } from "../../CopyButton";
 import { DataTable } from "../../DataTable";
 import { transportProtocolToString } from "../utils";
-import { CopyButton } from "../../CopyButton";
-import { ExternalLinkIcon } from "@chakra-ui/icons";
 
 const columnHelper = createColumnHelper<Port>();
 
@@ -60,7 +60,7 @@ export const PortsTable = ({ ports, ip, isPublic }: PortsTableProps) => {
         ),
       }),
     ],
-    [],
+    [ip, isPublic],
   );
 
   return <DataTable columns={columns} data={ports} defaultSorting={[{ id: "number", desc: true }]} />;

enclave-manager/web/src/components/enclaves/tables/ServicesTable.tsx

@@ -92,7 +92,7 @@ export const ServicesTable = ({ enclaveShortUUID, servicesResponse }: ServicesTa
         enableSorting: false,
       }),
     ],
-    [],
+    [enclaveShortUUID],
   );
 
   return <DataTable columns={columns} data={services} defaultSorting={[{ id: "name", desc: true }]} />;

enclave-manager/web/src/components/enclaves/widgets/DeleteEnclavesButton.tsx

@@ -15,19 +15,24 @@ export const DeleteEnclavesButton = ({ enclaves }: DeleteEnclavesButtonProps) =>
   const [showModal, setShowModal] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
 
+  const enclaveUUIDsKey = enclaves.map(({ enclaveUuid }) => enclaveUuid).join(",");
+
   useEffect(
     () => {
       setIsLoading(false);
       setShowModal(false);
     },
     // These deps are defined this way to detect whether or not the enclaves in props are actually different
-    [enclaves.map(({ enclaveUuid }) => enclaveUuid).join(",")],
+    [enclaveUUIDsKey],
   );
 
   const handleDelete = async () => {
     setIsLoading(true);
     fetcher.submit(
-      { intent: "delete", enclaveUUIDs: enclaves.map(({ enclaveUuid }) => enclaveUuid) },
+      {
+        intent: "delete",
+        enclaveUUIDs: enclaves.map(({ enclaveUuid }) => enclaveUuid),
+      },
       { method: "post", action: "/enclaves", encType: "application/json" },
     );
   };

enclave-manager/web/src/components/enclaves/widgets/ImageButton.tsx

@@ -4,7 +4,7 @@ import { IoLogoDocker } from "react-icons/io5";
 import { isDefined } from "../../../utils";
 
 function getUrlForImage(image: string): string | null {
-  const [imageName, label] = image.split(":");
+  const [imageName] = image.split(":");
   const imageParts = imageName.split("/");
   if (imageParts.length === 1) {
     return `https://hub.docker.com/_/${imageParts[0]}`;

enclave-manager/web/src/components/theme/Fonts.tsx

@@ -1,8 +1,8 @@
 import { Global } from "@emotion/react";
 
 /*
-* Source: https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap
-* */
+ * Source: https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap
+ * */
 const Fonts = () => (
   <Global
     styles={`
@@ -20,5 +20,3 @@ const Fonts = () => (
 );
 
 export default Fonts;
-
-

enclave-manager/web/src/emui/App.tsx

@@ -34,7 +34,7 @@ const KurtosisRouter = () => {
         [
           {
             element: (
-              <AppLayout Nav={<Navbar baseApplicationUrl={kurtosisClient.getBaseApplicationUrl()}/>}>
+              <AppLayout Nav={<Navbar baseApplicationUrl={kurtosisClient.getBaseApplicationUrl()} />}>
                 <Outlet />
                 <CreateEnclave />
               </AppLayout>
@@ -49,7 +49,7 @@ const KurtosisRouter = () => {
           basename: kurtosisClient.getBaseApplicationUrl().pathname,
         },
       ),
-    [kurtosisClient],
+    [kurtosisClient, kurtosisIndexerClient],
   );
 
   return <RouterProvider router={router} />;

enclave-manager/web/src/emui/Navbar.tsx

@@ -1,12 +1,12 @@
-import { FiHome, FiPackage } from "react-icons/fi";
+import { FiHome } from "react-icons/fi";
 import { Link, useLocation } from "react-router-dom";
 import { NavButton, Navigation } from "../components/Navigation";
 
-export type NavbarProps ={
-  baseApplicationUrl: URL
-}
+export type NavbarProps = {
+  baseApplicationUrl: URL;
+};
 
-export const Navbar = ({ baseApplicationUrl}: NavbarProps) => {
+export const Navbar = ({ baseApplicationUrl }: NavbarProps) => {
   const location = useLocation();
 
   return (

enclave-manager/web/src/emui/enclaves/EnclaveRoutes.tsx

@@ -5,9 +5,9 @@ import { Enclave, enclaveLoader, enclaveTabLoader } from "./enclave";
 import { runStarlarkAction } from "./enclave/action";
 import { EnclaveLoaderDeferred } from "./enclave/loader";
 import { Service } from "./enclave/service/Service";
+import { serviceTabLoader } from "./enclave/service/tabLoader";
 import { EnclaveList } from "./EnclaveList";
 import { enclavesLoader } from "./loader";
-import { serviceTabLoader } from "./enclave/service/tabLoader";
 
 export const enclaveRoutes = (kurtosisClient: KurtosisClient): RouteObject[] => [
   {

enclave-manager/web/src/emui/enclaves/enclave/logs/EnclaveLogs.tsx

@@ -101,6 +101,7 @@ export const EnclaveLogs = ({ enclave }: EnclaveLogsProps) => {
     return () => {
       cancelled = true;
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [location, enclave.shortenedUuid, navigator, revalidator.revalidate]);
 
   const progressPercent =

enclave-manager/web/src/emui/enclaves/enclave/service/logs/ServiceLogs.tsx

@@ -1,12 +1,12 @@
+import { Timestamp } from "@bufbuild/protobuf";
 import { ServiceInfo } from "enclave-manager-sdk/build/api_container_service_pb";
-import { EnclaveFullInfo } from "../../../types";
+import { DateTime } from "luxon";
 import { useEffect, useState } from "react";
-import { LogLineProps } from "../../../../../components/enclaves/logs/LogLine";
-import { isDefined, stringifyError } from "../../../../../utils";
 import { useKurtosisClient } from "../../../../../client/enclaveManager/KurtosisClientContext";
-import { Timestamp } from "@bufbuild/protobuf";
+import { LogLineProps } from "../../../../../components/enclaves/logs/LogLine";
 import { LogViewer } from "../../../../../components/enclaves/logs/LogViewer";
-import { DateTime } from "luxon";
+import { isDefined, stringifyError } from "../../../../../utils";
+import { EnclaveFullInfo } from "../../../types";
 
 const serviceLogLineToLogLineProps = (lines: string[], timestamp?: Timestamp): LogLineProps[] => {
   return lines.map((line) => ({
@@ -52,7 +52,7 @@ export const ServiceLogs = ({ enclave, service }: ServiceLogsProps) => {
       cancelled = true;
       abortController.abort();
     };
-  }, [enclave, service]);
+  }, [enclave, service, kurtosisClient]);
 
   return <LogViewer logLines={logLines} />;
 };

enclave-manager/web/src/emui/enclaves/enclave/service/overview/ServiceOverview.tsx

@@ -1,18 +1,15 @@
-import { ButtonGroup, Card, Flex, Grid, GridItem, Icon, Text } from "@chakra-ui/react";
+import { Flex, Grid, GridItem, Icon, Text } from "@chakra-ui/react";
 import { Container, ServiceInfo } from "enclave-manager-sdk/build/api_container_service_pb";
+import { useMemo } from "react";
 import { IoLogoDocker } from "react-icons/io5";
+import { PortsTable } from "../../../../../components/enclaves/tables/PortsTable";
 import { ServiceStatusTag } from "../../../../../components/enclaves/widgets/ServiceStatus";
+import { FileDisplay } from "../../../../../components/FileDisplay";
+import { KurtosisAlert } from "../../../../../components/KurtosisAlert";
 import { FLEX_STANDARD_GAP } from "../../../../../components/theme/constants";
+import { TitledCard } from "../../../../../components/TitledCard";
 import { ValueCard } from "../../../../../components/ValueCard";
 import { isDefined } from "../../../../../utils";
-import { KurtosisAlert } from "../../../../../components/KurtosisAlert";
-import { CopyButton } from "../../../../../components/CopyButton";
-import { DownloadButton } from "../../../../../components/DownloadButton";
-import { useMemo } from "react";
-import { CodeEditor } from "../../../../../components/CodeEditor";
-import { FileDisplay } from "../../../../../components/FileDisplay";
-import { PortsTable } from "../../../../../components/enclaves/tables/PortsTable";
-import { TitledCard } from "../../../../../components/TitledCard";
 
 type ServiceOverviewProps = {
   service: ServiceInfo;