From a2ad8b91091fdf930f7303016b63143b23468baa Mon Sep 17 00:00:00 2001
From: Ben Gazzard <ben@dartoxia.com>
Date: Thu, 9 Nov 2023 17:10:37 +0000
Subject: [PATCH 01/10] Update breadcrumb styling

---
 .../web/src/components/KurtosisBreadcrumbs.tsx        | 10 ++++++++--
 .../web/src/components/KurtosisThemeProvider.tsx      | 11 ++++++++++-
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/enclave-manager/web/src/components/KurtosisBreadcrumbs.tsx b/enclave-manager/web/src/components/KurtosisBreadcrumbs.tsx
index ad5bca2e55..097857db90 100644
--- a/enclave-manager/web/src/components/KurtosisBreadcrumbs.tsx
+++ b/enclave-manager/web/src/components/KurtosisBreadcrumbs.tsx
@@ -1,5 +1,5 @@
 import { ChevronRightIcon } from "@chakra-ui/icons";
-import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, Flex } from "@chakra-ui/react";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, Flex } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 import { Link, Params, UIMatch, useMatches } from "react-router-dom";
 import { isDefined } from "../utils";
@@ -46,7 +46,13 @@ export const KurtosisBreadcrumbs = () => {
         {matchCrumbs.map(({ name, destination }, i, arr) => (
           <BreadcrumbItem key={i} isCurrentPage={i === arr.length - 1}>
             <BreadcrumbLink as={i === arr.length - 1 ? undefined : Link} to={destination}>
-              {name}
+              {i === arr.length - 1 ? (
+                name
+              ) : (
+                <Button variant={"breadcrumb"} size={"sm"}>
+                  {name}
+                </Button>
+              )}
             </BreadcrumbLink>
           </BreadcrumbItem>
         ))}
diff --git a/enclave-manager/web/src/components/KurtosisThemeProvider.tsx b/enclave-manager/web/src/components/KurtosisThemeProvider.tsx
index 822d181d32..20758b3e63 100644
--- a/enclave-manager/web/src/components/KurtosisThemeProvider.tsx
+++ b/enclave-manager/web/src/components/KurtosisThemeProvider.tsx
@@ -114,7 +114,8 @@ const theme = extendTheme({
           const outline = theme.components.Button.variants!.outline(props);
           return {
             ...outline,
-            _hover: { ...outline._hover, bg: "gray.700" },
+            _hover: { ...outline._hover, bg: "gray.700", borderColor: "gray.300", cursor: "unset" },
+            _active: { ...outline._active, bg: "gray.700", borderColor: "gray.300", cursor: "unset" },
             bg: "gray.700",
             color: `${props.colorScheme}.100`,
             borderColor: "gray.300",
@@ -137,6 +138,14 @@ const theme = extendTheme({
             textTransform: "uppercase",
           };
         },
+        breadcrumb: (props: StyleFunctionProps) => {
+          const ghost = theme.components.Button.variants!.ghost(props);
+          return {
+            ...ghost,
+            color: "gray.100",
+            fontWeight: "normal",
+          };
+        },
         nav: {
           _active: {
             bg: "gray.600",

From 8582567f5fd45d27251612952cb41bdda28a4ae2 Mon Sep 17 00:00:00 2001
From: Ben Gazzard <ben@dartoxia.com>
Date: Thu, 9 Nov 2023 17:11:12 +0000
Subject: [PATCH 02/10] Update font so that inter works

---
 .../web/src/components/theme/Fonts.tsx            | 15 +--------------
 1 file changed, 1 insertion(+), 14 deletions(-)

diff --git a/enclave-manager/web/src/components/theme/Fonts.tsx b/enclave-manager/web/src/components/theme/Fonts.tsx
index aa072140af..cfe5b28ada 100644
--- a/enclave-manager/web/src/components/theme/Fonts.tsx
+++ b/enclave-manager/web/src/components/theme/Fonts.tsx
@@ -1,21 +1,8 @@
 import { Global } from "@emotion/react";
 
-/*
- * Source: https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap
- * */
 const Fonts = () => (
   <Global
-    styles={`
-        @font-face {
-          font-family: 'Inter';
-          font-stretch: 75% 125%;
-          font-style: normal;
-          font-weight: 150 900;
-          font-display: swap;
-          src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7SUc.woff2) format('woff2');
-          unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-        }
-      `}
+    styles={`@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');`}
   />
 );
 

From 4adb4384d9c905a71f76f60fc6c5bba55cbcb2b6 Mon Sep 17 00:00:00 2001
From: Ben Gazzard <ben@dartoxia.com>
Date: Thu, 9 Nov 2023 17:11:28 +0000
Subject: [PATCH 03/10] Uppercase tags

---
 enclave-manager/web/src/components/theme/tagsTheme.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/enclave-manager/web/src/components/theme/tagsTheme.ts b/enclave-manager/web/src/components/theme/tagsTheme.ts
index 160067bceb..baca420da4 100644
--- a/enclave-manager/web/src/components/theme/tagsTheme.ts
+++ b/enclave-manager/web/src/components/theme/tagsTheme.ts
@@ -5,6 +5,9 @@ const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(tagAnatomy.keys
 
 // export the component theme
 export const tagTheme = defineMultiStyleConfig({
+  baseStyle: {
+    container: { textTransform: "uppercase" },
+  },
   variants: {
     asText: (props: StyleFunctionProps) => ({
       container: {
@@ -24,7 +27,6 @@ export const tagTheme = defineMultiStyleConfig({
         fontSize: "xs",
         lineHeight: "16px",
         borderRadius: "2px",
-        textTransform: "uppercase",
         fontWeight: "bold",
         minHeight: "unset",
       },

From 966c4539b2a8131ff5aa0bbf445e61c0329d24d5 Mon Sep 17 00:00:00 2001
From: Ben Gazzard <ben@dartoxia.com>
Date: Thu, 9 Nov 2023 17:11:50 +0000
Subject: [PATCH 04/10] Fix tabs hover

---
 enclave-manager/web/src/components/theme/tabsTheme.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/enclave-manager/web/src/components/theme/tabsTheme.ts b/enclave-manager/web/src/components/theme/tabsTheme.ts
index a20e530593..fd627e67d5 100644
--- a/enclave-manager/web/src/components/theme/tabsTheme.ts
+++ b/enclave-manager/web/src/components/theme/tabsTheme.ts
@@ -15,8 +15,11 @@ export const tabsTheme = defineMultiStyleConfig({
         fontStyle: "normal",
         fontWeight: "medium",
         fontSize: "lg",
-        color: "gray.200",
+        color: "gray.100",
         lineHeight: "28px",
+        _hover: {
+          bg: `gray.700`,
+        },
         _selected: {
           fontWeight: "semibold",
           color: `${props.colorScheme}.400`,

From 25a74a2755f7d02a3cdc9405696943bdafde59cf Mon Sep 17 00:00:00 2001
From: Ben Gazzard <ben@dartoxia.com>
Date: Thu, 9 Nov 2023 17:15:13 +0000
Subject: [PATCH 05/10] Fix outline button hover state

---
 enclave-manager/web/src/components/KurtosisThemeProvider.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/enclave-manager/web/src/components/KurtosisThemeProvider.tsx b/enclave-manager/web/src/components/KurtosisThemeProvider.tsx
index 20758b3e63..4f82b28c59 100644
--- a/enclave-manager/web/src/components/KurtosisThemeProvider.tsx
+++ b/enclave-manager/web/src/components/KurtosisThemeProvider.tsx
@@ -97,7 +97,8 @@ const theme = extendTheme({
       },
       variants: {
         outline: (props: StyleFunctionProps) => ({
-          _hover: { borderColor: `${props.colorScheme}.400` },
+          _hover: { borderColor: `${props.colorScheme}.400`, bg: `gray.700` },
+          _active: { bg: `gray.800` },
           color: `${props.colorScheme}.400`,
           borderColor: "gray.300",
         }),

From f247ec7fce22086af2a628a8131c39cb280ab6b8 Mon Sep 17 00:00:00 2001
From: Ben Gazzard <ben@dartoxia.com>
Date: Thu, 9 Nov 2023 17:20:07 +0000
Subject: [PATCH 06/10] Fix table header icons

---
 .../web/src/components/DataTable.tsx          | 25 ++++++++++---------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/enclave-manager/web/src/components/DataTable.tsx b/enclave-manager/web/src/components/DataTable.tsx
index 3df1aea31c..c5ef09abbf 100644
--- a/enclave-manager/web/src/components/DataTable.tsx
+++ b/enclave-manager/web/src/components/DataTable.tsx
@@ -1,5 +1,4 @@
-import { TriangleDownIcon, TriangleUpIcon } from "@chakra-ui/icons";
-import { Button, chakra, Table, Tbody, Td, Th, Thead, Tr } from "@chakra-ui/react";
+import { Button, Icon, Table, Tbody, Td, Th, Thead, Tr } from "@chakra-ui/react";
 import {
   ColumnDef,
   flexRender,
@@ -13,6 +12,7 @@ import {
 import { type RowSelectionState } from "@tanstack/table-core/src/features/RowSelection";
 import { type OnChangeFn } from "@tanstack/table-core/src/types";
 import { useState } from "react";
+import { BiDownArrowAlt, BiUpArrowAlt } from "react-icons/bi";
 import { assertDefined, isDefined } from "../utils";
 
 declare module "@tanstack/table-core" {
@@ -80,20 +80,21 @@ export function DataTable<Data extends object>({
                   textAlign={!!meta?.centerAligned ? "center" : undefined}
                 >
                   {header.column.getCanSort() && (
-                    <Button variant={"sortableHeader"} size={"xs"}>
+                    <Button
+                      variant={"sortableHeader"}
+                      size={"xs"}
+                      rightIcon={
+                        header.column.getIsSorted() === "desc" ? (
+                          <Icon as={BiDownArrowAlt} color={"gray.400"} />
+                        ) : header.column.getIsSorted() === "asc" ? (
+                          <Icon as={BiUpArrowAlt} color={"gray.400"} />
+                        ) : undefined
+                      }
+                    >
                       {flexRender(header.column.columnDef.header, header.getContext())}
                     </Button>
                   )}
                   {!header.column.getCanSort() && flexRender(header.column.columnDef.header, header.getContext())}
-                  {header.column.getIsSorted() && (
-                    <chakra.span pl="4">
-                      {header.column.getIsSorted() === "desc" ? (
-                        <TriangleDownIcon aria-label="sorted descending" color={"gray.400"} />
-                      ) : (
-                        <TriangleUpIcon aria-label="sorted ascending" color={"gray.400"} />
-                      )}
-                    </chakra.span>
-                  )}
                 </Th>
               );
             })}

From ded4414c5fb045f3e3e6a03ec65d63f69d0e0150 Mon Sep 17 00:00:00 2001
From: Ben Gazzard <ben@dartoxia.com>
Date: Thu, 9 Nov 2023 17:33:52 +0000
Subject: [PATCH 07/10] Update progress widget icons and colour

---
 .../web/src/emui/enclaves/enclave/logs/EnclaveLogs.tsx   | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/enclave-manager/web/src/emui/enclaves/enclave/logs/EnclaveLogs.tsx b/enclave-manager/web/src/emui/enclaves/enclave/logs/EnclaveLogs.tsx
index 15f33babcb..ecb5a620c1 100644
--- a/enclave-manager/web/src/emui/enclaves/enclave/logs/EnclaveLogs.tsx
+++ b/enclave-manager/web/src/emui/enclaves/enclave/logs/EnclaveLogs.tsx
@@ -1,6 +1,7 @@
-import { CircularProgress } from "@chakra-ui/react";
+import { CircularProgress, Icon } from "@chakra-ui/react";
 import { StarlarkRunResponseLine } from "enclave-manager-sdk/build/api_container_service_pb";
 import { useEffect, useState } from "react";
+import { FiCheck, FiX } from "react-icons/fi";
 import { Location, useLocation, useNavigate, useRevalidator } from "react-router-dom";
 import { LogLineProps } from "../../../../components/enclaves/logs/LogLine";
 import { LogViewer } from "../../../../components/enclaves/logs/LogViewer";
@@ -139,7 +140,7 @@ const ProgressSummary = ({ progress }: ProgressSummaryProps) => {
           <CircularProgress
             size={"18px"}
             value={(100 * progress.step + 1) / (progress.totalSteps + 1)}
-            color={"green"}
+            color={"kurtosisGreen.400"}
           />
           <span>
             {progress.step} / {progress.totalSteps}
@@ -148,7 +149,7 @@ const ProgressSummary = ({ progress }: ProgressSummaryProps) => {
       )}
       {progress.stage === "done" && (
         <>
-          <CircularProgress size={"18px"} value={100} color={"green"} />
+          <Icon as={FiCheck} size={"18px"} color={"kurtosisGreen.400"} />
           <span>
             {progress.totalSteps} / {progress.totalSteps}
           </span>
@@ -156,7 +157,7 @@ const ProgressSummary = ({ progress }: ProgressSummaryProps) => {
       )}
       {progress.stage === "failed" && (
         <>
-          <CircularProgress size={"18px"} value={100} color={"red"} />
+          <Icon as={FiX} size={"18px"} color={"red.400"} />
           <span>Failed</span>
         </>
       )}

From d09a89857c572585bbb9f546f0a535174ef8602e Mon Sep 17 00:00:00 2001
From: Ben Gazzard <ben@dartoxia.com>
Date: Thu, 9 Nov 2023 18:00:13 +0000
Subject: [PATCH 08/10] Copy button toast correction

---
 .../web/src/components/CopyButton.tsx           |  5 +++--
 enclave-manager/web/src/components/Toasts.tsx   | 17 +++++++++++++++++
 2 files changed, 20 insertions(+), 2 deletions(-)
 create mode 100644 enclave-manager/web/src/components/Toasts.tsx

diff --git a/enclave-manager/web/src/components/CopyButton.tsx b/enclave-manager/web/src/components/CopyButton.tsx
index 3bd3707654..5c357c2867 100644
--- a/enclave-manager/web/src/components/CopyButton.tsx
+++ b/enclave-manager/web/src/components/CopyButton.tsx
@@ -1,6 +1,7 @@
 import { Button, ButtonProps, IconButton, IconButtonProps, useToast } from "@chakra-ui/react";
 import { FiCopy } from "react-icons/fi";
 import { isDefined } from "../utils";
+import { SuccessToast } from "./Toasts";
 
 type CopyButtonProps<IsIconButton extends boolean> = (IsIconButton extends true ? IconButtonProps : ButtonProps) & {
   valueToCopy?: (() => string) | string | null;
@@ -23,8 +24,8 @@ export const CopyButton = <IsIconButton extends boolean>({
       const v = typeof valueToCopy === "string" ? valueToCopy : valueToCopy();
       navigator.clipboard.writeText(v);
       toast({
-        title: `Copied ${contentName} to the clipboard`,
-        status: `success`,
+        position: "bottom",
+        render: () => <SuccessToast message={`Copied ${contentName} to the clipboard`} />,
       });
     }
   };
diff --git a/enclave-manager/web/src/components/Toasts.tsx b/enclave-manager/web/src/components/Toasts.tsx
new file mode 100644
index 0000000000..bbf59f9d0e
--- /dev/null
+++ b/enclave-manager/web/src/components/Toasts.tsx
@@ -0,0 +1,17 @@
+import { CheckCircleIcon } from "@chakra-ui/icons";
+import { Flex, forwardRef, Icon, Text } from "@chakra-ui/react";
+
+type ToastProps = {
+  message: string;
+};
+
+export const SuccessToast = forwardRef<ToastProps, "div">(({ message }: ToastProps, ref) => {
+  return (
+    <Flex ref={ref} bg={"rgba(0, 194, 35, 0.24)"} p={"6px 16px"} borderRadius={"6px"} gap={"12px"}>
+      <Icon height={"24px"} width={"24px"} as={CheckCircleIcon} color={"kurtosisGreen.400"} />
+      <Text fontWeight={"bold"} fontSize={"lg"}>
+        {message}
+      </Text>
+    </Flex>
+  );
+});

From 8178c52f074ea16c31ef7743935943c09ef7c30c Mon Sep 17 00:00:00 2001
From: Ben Gazzard <ben@dartoxia.com>
Date: Thu, 9 Nov 2023 18:14:43 +0000
Subject: [PATCH 09/10] Hack to make the monaco inputs render correctly when
 read only

---
 enclave-manager/web/src/components/CodeEditor.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/enclave-manager/web/src/components/CodeEditor.tsx b/enclave-manager/web/src/components/CodeEditor.tsx
index 669d918b10..408937086b 100644
--- a/enclave-manager/web/src/components/CodeEditor.tsx
+++ b/enclave-manager/web/src/components/CodeEditor.tsx
@@ -27,7 +27,9 @@ export const CodeEditor = ({ text, onTextChange, showLineNumbers }: CodeEditorPr
       colors: {},
     });
     monaco.editor.setTheme("kurtosis-theme");
-    editor.onDidContentSizeChange(handleContentSizeChange);
+    if (!isReadOnly) {
+      editor.onDidContentSizeChange(handleContentSizeChange);
+    }
   };
 
   const handleChange: OnChange = (value, ev) => {

From bbd080c89a3f0dc5a29ff21d3f0ccd7edded9bd2 Mon Sep 17 00:00:00 2001
From: Ben Gazzard <ben@dartoxia.com>
Date: Thu, 9 Nov 2023 18:44:22 +0000
Subject: [PATCH 10/10] Switch to using the monaco editor as the code editor

---
 .../web/src/components/CodeEditor.tsx          | 18 +++++++++++-------
 .../configuration/inputs/JSONArgumentInput.tsx | 17 ++++++++++-------
 2 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/enclave-manager/web/src/components/CodeEditor.tsx b/enclave-manager/web/src/components/CodeEditor.tsx
index 408937086b..50c6319a3c 100644
--- a/enclave-manager/web/src/components/CodeEditor.tsx
+++ b/enclave-manager/web/src/components/CodeEditor.tsx
@@ -1,7 +1,7 @@
 import { Box } from "@chakra-ui/react";
 import { Editor, OnChange, OnMount } from "@monaco-editor/react";
 import { editor } from "monaco-editor";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { isDefined } from "../utils";
 
 type CodeEditorProps = {
@@ -14,8 +14,12 @@ export const CodeEditor = ({ text, onTextChange, showLineNumbers }: CodeEditorPr
   const isReadOnly = !isDefined(onTextChange);
   const [editor, setEditor] = useState<editor.IStandaloneCodeEditor>();
 
-  const handleContentSizeChange = (e: editor.IContentSizeChangedEvent) => {
-    editor?.layout({ width: 500, height: e.contentHeight });
+  const resizeEditorBasedOnContent = () => {
+    if (isDefined(editor)) {
+      const contentHeight = Math.min(750, editor.getContentHeight() || 10);
+      editor.layout({ width: 500, height: contentHeight });
+      editor.layout();
+    }
   };
 
   const handleMount: OnMount = (editor, monaco) => {
@@ -27,19 +31,19 @@ export const CodeEditor = ({ text, onTextChange, showLineNumbers }: CodeEditorPr
       colors: {},
     });
     monaco.editor.setTheme("kurtosis-theme");
-    if (!isReadOnly) {
-      editor.onDidContentSizeChange(handleContentSizeChange);
-    }
   };
 
+  useEffect(() => resizeEditorBasedOnContent(), [editor]);
+
   const handleChange: OnChange = (value, ev) => {
     if (isDefined(value) && onTextChange) {
       onTextChange(value);
+      resizeEditorBasedOnContent();
     }
   };
 
   return (
-    <Box width={"100%"} minHeight={`${editor?.getContentHeight() || 10}px`}>
+    <Box width={"100%"} minHeight={`${editor?.getLayoutInfo().height || 10}px`}>
       <Editor
         onMount={handleMount}
         value={text}
diff --git a/enclave-manager/web/src/components/enclaves/configuration/inputs/JSONArgumentInput.tsx b/enclave-manager/web/src/components/enclaves/configuration/inputs/JSONArgumentInput.tsx
index 05c4a2642e..7c9e519482 100644
--- a/enclave-manager/web/src/components/enclaves/configuration/inputs/JSONArgumentInput.tsx
+++ b/enclave-manager/web/src/components/enclaves/configuration/inputs/JSONArgumentInput.tsx
@@ -1,17 +1,19 @@
-import { Textarea } from "@chakra-ui/react";
+import { Controller } from "react-hook-form";
 import { stringifyError } from "../../../../utils";
+import { CodeEditor } from "../../../CodeEditor";
 import { useEnclaveConfigurationFormContext } from "../EnclaveConfigurationForm";
 import { KurtosisArgumentTypeInputProps } from "./KurtosisArgumentTypeInput";
 
 export const JSONArgumentInput = (props: Omit<KurtosisArgumentTypeInputProps, "type">) => {
-  const { register } = useEnclaveConfigurationFormContext();
+  const { control } = useEnclaveConfigurationFormContext();
 
   return (
-    <Textarea
-      {...register(props.name, {
-        disabled: props.disabled,
+    <Controller
+      render={({ field }) => <CodeEditor text={field.value} onTextChange={field.onChange} />}
+      name={props.name}
+      defaultValue={"{}"}
+      rules={{
         required: props.isRequired,
-        value: "{}",
         validate: (value: string) => {
           try {
             JSON.parse(value);
@@ -19,7 +21,8 @@ export const JSONArgumentInput = (props: Omit<KurtosisArgumentTypeInputProps, "t
             return `This is not valid JSON. ${stringifyError(err)}`;
           }
         },
-      })}
+      }}
+      disabled={props.disabled}
     />
   );
 };