feat: emui design improvements (#1892)

## Description: This PR implements several pieced of feedback from design: * Fix value card background colour (was 1 shade off) * Stronger starlark run progress colours * Fix catalog search input appearance and find keybinding * Pick up catalog images * Match breadcrumbs to designs ### Demo including these features https://github.com/kurtosis-tech/kurtosis/assets/4419574/fcaf902b-c4a4-4d34-af43-0a8d87bf4a8c ## Is this change user facing? YES ## References (if applicable): * Figma
kurtosis-tech · Dec 5, 2023 · 9268a24 · 9268a24
1 parent cd4263b
commit 9268a24
Show file tree

Hide file tree

Showing 16 changed files with 88 additions and 38 deletions.
diff --git a/enclave-manager/web/src/client/packageIndexer/api/kurtosis_package_indexer_pb.ts b/enclave-manager/web/src/client/packageIndexer/api/kurtosis_package_indexer_pb.ts
@@ -1,4 +1,4 @@
-// @generated by protoc-gen-es v1.4.0 with parameter "target=ts"
+// @generated by protoc-gen-es v1.4.1 with parameter "target=ts"
 // @generated from file kurtosis_package_indexer.proto (package kurtosis_package_indexer, syntax proto3)
 /* eslint-disable */
 // @ts-nocheck
@@ -222,6 +222,11 @@ export class KurtosisPackage extends Message<KurtosisPackage> {
    */
   version = "";
 
+  /**
+   * @generated from field: string icon_url = 12;
+   */
+  iconUrl = "";
+
   constructor(data?: PartialMessage<KurtosisPackage>) {
     super();
     proto3.util.initPartial(data, this);
@@ -241,6 +246,7 @@ export class KurtosisPackage extends Message<KurtosisPackage> {
     { no: 9, name: "parsing_result", kind: "scalar", T: 9 /* ScalarType.STRING */ },
     { no: 10, name: "parsing_time", kind: "message", T: Timestamp },
     { no: 11, name: "version", kind: "scalar", T: 9 /* ScalarType.STRING */ },
+    { no: 12, name: "icon_url", kind: "scalar", T: 9 /* ScalarType.STRING */ },
   ]);
 
   static fromBinary(bytes: Uint8Array, options?: Partial<BinaryReadOptions>): KurtosisPackage {
@@ -394,6 +400,16 @@ export class PackageRepository extends Message<PackageRepository> {
    */
   rootPath = "";
 
+  /**
+   * @generated from field: google.protobuf.Timestamp last_commit_time = 5;
+   */
+  lastCommitTime?: Timestamp;
+
+  /**
+   * @generated from field: string default_branch = 6;
+   */
+  defaultBranch = "";
+
   constructor(data?: PartialMessage<PackageRepository>) {
     super();
     proto3.util.initPartial(data, this);
@@ -406,6 +422,8 @@ export class PackageRepository extends Message<PackageRepository> {
     { no: 2, name: "owner", kind: "scalar", T: 9 /* ScalarType.STRING */ },
     { no: 3, name: "name", kind: "scalar", T: 9 /* ScalarType.STRING */ },
     { no: 4, name: "root_path", kind: "scalar", T: 9 /* ScalarType.STRING */ },
+    { no: 5, name: "last_commit_time", kind: "message", T: Timestamp },
+    { no: 6, name: "default_branch", kind: "scalar", T: 9 /* ScalarType.STRING */ },
   ]);
 
   static fromBinary(bytes: Uint8Array, options?: Partial<BinaryReadOptions>): PackageRepository {

diff --git a/enclave-manager/web/src/components/KeyboardCommands.tsx b/enclave-manager/web/src/components/KeyboardCommands.tsx
@@ -1,7 +1,7 @@
 import { Text, TextProps } from "@chakra-ui/react";
 
 export const FindCommand = (props: TextProps) => {
-  let text = "^F";
+  let text = "Ctrl + F";
 
   if (navigator.userAgent.indexOf("Mac") > -1) {
     text = "⌘F";
@@ -15,7 +15,7 @@ export const FindCommand = (props: TextProps) => {
 };
 
 export const OmniboxCommand = (props: TextProps) => {
-  let text = "^K";
+  let text = "Ctrl + K";
 
   if (navigator.userAgent.indexOf("Mac") > -1) {
     text = "⌘K";

diff --git a/enclave-manager/web/src/components/KurtosisBreadcrumbs.tsx b/enclave-manager/web/src/components/KurtosisBreadcrumbs.tsx
@@ -215,15 +215,11 @@ type KurtosisBreadcrumbItemProps = KurtosisBreadcrumb & {
 };
 
 const KurtosisBreadcrumbItem = ({ name, destination, alternatives, isLastItem }: KurtosisBreadcrumbItemProps) => {
-  if (isLastItem) {
-    return (
-      <Text fontSize={"xs"} fontWeight={"semibold"} p={"2px 8px"} borderRadius={"6px"} bg={"gray.650"}>
-        {name}
-      </Text>
-    );
-  }
-
-  const baseLink = (
+  const baseLink = isLastItem ? (
+    <Text fontSize={"xs"} fontWeight={"semibold"} p={"2px 8px"} borderRadius={"6px"} bg={"gray.650"}>
+      {name}
+    </Text>
+  ) : (
     <BreadcrumbLink as={Link} to={destination}>
       <Button variant={"breadcrumb"} size={"xs"}>
         {name}

diff --git a/enclave-manager/web/src/components/KurtosisThemeProvider.tsx b/enclave-manager/web/src/components/KurtosisThemeProvider.tsx
@@ -203,7 +203,7 @@ const theme = extendTheme({
       variants: {
         valueCard: {
           container: {
-            bg: "gray.800",
+            bg: "gray.850",
             borderRadius: "8px",
             padding: "16px",
             gap: "16px",

diff --git a/enclave-manager/web/src/components/catalog/KurtosisPackageCard.tsx b/enclave-manager/web/src/components/catalog/KurtosisPackageCard.tsx
@@ -32,9 +32,9 @@ export const KurtosisPackageCard = ({ kurtosisPackage }: KurtosisPackageCardProp
           <Image
             h={"80px"}
             w={"80px"}
-            bg={"black"}
-            // TODO: Use package image when supported
-            src={`${client.getBaseApplicationUrl()}/logo.png`}
+            bg={kurtosisPackage.iconUrl !== "" ? "white" : "black"}
+            src={kurtosisPackage.iconUrl || `${client.getBaseApplicationUrl()}/logo.png`}
+            fallbackSrc={`${client.getBaseApplicationUrl()}/logo.png`}
             borderRadius={"6px"}
           />
           <Flex flexDirection={"column"} flex={"1"} justifyContent={"space-between"}>

diff --git a/enclave-manager/web/src/components/theme/tagsTheme.ts b/enclave-manager/web/src/components/theme/tagsTheme.ts
@@ -31,6 +31,12 @@ export const tagTheme = defineMultiStyleConfig({
         minHeight: "unset",
       },
     }),
+    progress: (props: StyleFunctionProps) => ({
+      container: {
+        bg: `${props.colorScheme}.900`,
+        color: `${props.colorScheme}.100`,
+      },
+    }),
     solid: (props: StyleFunctionProps) => ({
       container: {
         color: `${props.colorScheme}.400`,

diff --git a/enclave-manager/web/src/emui/catalog/Catalog.tsx b/enclave-manager/web/src/emui/catalog/Catalog.tsx
@@ -20,7 +20,7 @@ import { MdBookmarkAdded } from "react-icons/md";
 import { GetPackagesResponse, KurtosisPackage } from "../../client/packageIndexer/api/kurtosis_package_indexer_pb";
 import { AppPageLayout } from "../../components/AppLayout";
 import { KurtosisPackageCardGrid } from "../../components/catalog/KurtosisPackageCardGrid";
-import { OmniboxCommand } from "../../components/KeyboardCommands";
+import { FindCommand } from "../../components/KeyboardCommands";
 import { KurtosisAlert } from "../../components/KurtosisAlert";
 import { PageTitle } from "../../components/PageTitle";
 import { useKeyboardAction } from "../../components/useKeyboardAction";
@@ -58,7 +58,7 @@ const CatalogImpl = ({ catalog, savedPackages }: CatalogImplProps) => {
   useKeyboardAction(
     useMemo(
       () => ({
-        omniFind: () => {
+        find: () => {
           if (isDefined(searchRef.current) && searchRef.current !== document.activeElement) {
             searchRef.current.focus();
           }
@@ -80,17 +80,18 @@ const CatalogImpl = ({ catalog, savedPackages }: CatalogImplProps) => {
       </Flex>
       <Flex flexDirection={"column"} gap={"32px"}>
         <Flex flex={"1"} justifyContent={"center"}>
-          <InputGroup variant={"solid"} width={"1192px"}>
+          <InputGroup variant={"solid"} width={"1192px"} color={"gray.150"}>
             <InputLeftElement>
               <Icon as={FiSearch} />
             </InputLeftElement>
             <Input
               ref={searchRef}
               value={searchTerm}
+              bgColor={"gray.850"}
               onChange={(e) => setSearchTerm(e.target.value)}
               placeholder={"Search"}
             />
-            <InputRightElement>
+            <InputRightElement w={"unset"}>
               {isSearching ? (
                 <IconButton
                   aria-label={"Clear search"}
@@ -100,7 +101,7 @@ const CatalogImpl = ({ catalog, savedPackages }: CatalogImplProps) => {
                   onClick={() => setSearchTerm("")}
                 />
               ) : (
-                <OmniboxCommand />
+                <FindCommand whiteSpace={"nowrap"} pr={"10px"} />
               )}
             </InputRightElement>
           </InputGroup>

diff --git a/enclave-manager/web/src/emui/catalog/package/Package.tsx b/enclave-manager/web/src/emui/catalog/package/Package.tsx
@@ -1,4 +1,5 @@
 import { Box, Flex, Icon, Image, Input, InputGroup, InputRightElement, Text } from "@chakra-ui/react";
+import { DateTime } from "luxon";
 import { IoStar } from "react-icons/io5";
 import { useParams } from "react-router-dom";
 import { useKurtosisClient } from "../../../client/enclaveManager/KurtosisClientContext";
@@ -8,10 +9,12 @@ import { readablePackageName } from "../../../components/catalog/utils";
 import { RunKurtosisPackageButton } from "../../../components/catalog/widgets/RunKurtosisPackageButton";
 import { SaveKurtosisPackageButton } from "../../../components/catalog/widgets/SaveKurtosisPackageButton";
 import { CopyButton } from "../../../components/CopyButton";
+import { FormatDateTime } from "../../../components/FormatDateTime";
 import { KurtosisAlert } from "../../../components/KurtosisAlert";
 import { KurtosisMarkdown } from "../../../components/KurtosisMarkdown";
 import { PackageSourceButton } from "../../../components/PackageSourceButton";
 import { TitledCard } from "../../../components/TitledCard";
+import { isDefined } from "../../../utils";
 import { useKurtosisPackage } from "../CatalogContext";
 
 export const Package = () => {
@@ -94,6 +97,25 @@ const PackageImpl = ({ kurtosisPackage }: PackageImplProps) => {
                 </Text>
               </Flex>
             </Flex>
+            <Flex gap={"16px"} flexDirection={"column"} p={"16px"}>
+              <Text as={"span"} color="gray.400" fontWeight={"bold"} textTransform={"uppercase"}>
+                Last updated
+              </Text>
+              <span>
+                <FormatDateTime
+                  fontWeight={"medium"}
+                  fontSize={"xl"}
+                  format={"relative"}
+                  flex={"0 1 auto"}
+                  dateTime={
+                    isDefined(kurtosisPackage.repositoryMetadata) &&
+                    isDefined(kurtosisPackage.repositoryMetadata.lastCommitTime)
+                      ? DateTime.fromJSDate(kurtosisPackage.repositoryMetadata.lastCommitTime.toDate())
+                      : null
+                  }
+                />
+              </span>
+            </Flex>
           </Flex>
         </Flex>
       </Flex>
@@ -109,9 +131,9 @@ const PackageHeader = ({ kurtosisPackage }: PackageImplProps) => {
       <Image
         h={"120px"}
         w={"120px"}
-        bg={"black"}
-        // TODO: Use package image when supported
-        src={`${client.getBaseApplicationUrl()}/logo.png`}
+        bg={kurtosisPackage.iconUrl !== "" ? "white" : "black"}
+        src={kurtosisPackage.iconUrl || `${client.getBaseApplicationUrl()}/logo.png`}
+        fallbackSrc={`${client.getBaseApplicationUrl()}/logo.png`}
         borderRadius={"9px"}
       />
       <Flex flexDirection={"column"} justifyContent={"space-between"} flex={"1"}>

diff --git a/enclave-manager/web/src/emui/enclaves/EnclaveRoutes.tsx b/enclave-manager/web/src/emui/enclaves/EnclaveRoutes.tsx
@@ -3,6 +3,7 @@ import { FilesArtifactNameAndUuid, ServiceInfo } from "enclave-manager-sdk/build
 import { FiPlus } from "react-icons/fi";
 import { Outlet, Params } from "react-router-dom";
 import { GoToEnclaveOverviewButton } from "../../components/enclaves/GotToEncalaveOverviewButton";
+import { isDefined } from "../../utils";
 import { RemoveFunctions } from "../../utils/types";
 import { KurtosisEnclavesRouteObject } from "../types";
 import { Artifact } from "./enclave/artifact/Artifact";
@@ -96,13 +97,13 @@ export const enclaveRoutes = (): KurtosisEnclavesRouteObject[] => [
                   crumb: (data: RemoveFunctions<EnclavesState>, params: Params<string>) => {
                     const activeTab = params.activeTab;
 
-                    let routeName = activeTab?.toLowerCase() === "logs" ? "Logs" : "Overview";
+                    if (!isDefined(activeTab) || activeTab.toLowerCase() === "overview") {
+                      return [];
+                    }
 
                     return {
-                      name: routeName,
-                      destination: `/enclave/${params.enclaveUUID}/service/${params.serviceUUID}/${
-                        params.activeTab || "overview"
-                      }`,
+                      name: "Logs",
+                      destination: `/enclave/${params.enclaveUUID}/service/${params.serviceUUID}/logs`,
                     };
                   },
                 },
@@ -170,6 +171,10 @@ export const enclaveRoutes = (): KurtosisEnclavesRouteObject[] => [
               crumb: (data: RemoveFunctions<EnclavesState>, params: Params<string>) => {
                 const activeTab = params.activeTab;
 
+                if (!isDefined(activeTab) || activeTab.toLowerCase() === "overview") {
+                  return [];
+                }
+
                 let routeName =
                   activeTab?.toLowerCase() === "logs"
                     ? "Logs"

diff --git a/enclave-manager/web/src/emui/enclaves/enclave/logs/EnclaveLogs.tsx b/enclave-manager/web/src/emui/enclaves/enclave/logs/EnclaveLogs.tsx
@@ -150,8 +150,10 @@ type ProgressSummaryProps = {
 const ProgressSummary = ({ progress }: ProgressSummaryProps) => {
   return (
     <Tag
-      p={"0 10px"}
+      variant={"progress"}
+      p={"0 16px"}
       h={"40px"}
+      fontSize={"md"}
       colorScheme={progress.stage === "done" ? "green" : progress.stage === "failed" ? "red" : "blue"}
     >
       <Flex gap={"8px"} alignItems={"center"}>

diff --git a/engine/server/webapp/asset-manifest.json b/engine/server/webapp/asset-manifest.json
@@ -1,10 +1,10 @@
 {
   "files": {
-    "main.js": "./static/js/main.9d538254.js",
+    "main.js": "./static/js/main.894d68e3.js",
     "index.html": "./index.html",
-    "main.9d538254.js.map": "./static/js/main.9d538254.js.map"
+    "main.894d68e3.js.map": "./static/js/main.894d68e3.js.map"
   },
   "entrypoints": [
-    "static/js/main.9d538254.js"
+    "static/js/main.894d68e3.js"
   ]
 }
diff --git a/engine/server/webapp/index.html b/engine/server/webapp/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Kurtosis Enclave Manager"/><title>Kurtosis Enclave Manager</title><script defer="defer" src="./static/js/main.9d538254.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Kurtosis Enclave Manager"/><title>Kurtosis Enclave Manager</title><script defer="defer" src="./static/js/main.894d68e3.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/engine/server/webapp/static/js/main.894d68e3.js b/engine/server/webapp/static/js/main.894d68e3.js
diff --git a/...pp/static/js/main.9d538254.js.LICENSE.txt → ...pp/static/js/main.894d68e3.js.LICENSE.txt b/...pp/static/js/main.9d538254.js.LICENSE.txt → ...pp/static/js/main.894d68e3.js.LICENSE.txt
diff --git a/...ver/webapp/static/js/main.9d538254.js.map → ...ver/webapp/static/js/main.894d68e3.js.map b/...ver/webapp/static/js/main.9d538254.js.map → ...ver/webapp/static/js/main.894d68e3.js.map
diff --git a/engine/server/webapp/static/js/main.9d538254.js b/engine/server/webapp/static/js/main.9d538254.js
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Kurtosis Enclave Manager"/><title>Kurtosis Enclave Manager</title><script defer="defer" src="./static/js/main.9d538254.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Kurtosis Enclave Manager"/><title>Kurtosis Enclave Manager</title><script defer="defer" src="./static/js/main.894d68e3.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>