feat: new emui design tweaks (#1670)

## Description: This PR contains minor adjustments to match feedback from Tise on designs. ## Is this change user facing? NO ## References (if applicable): * See figma mocks from slack.
kurtosis-tech · Nov 1, 2023 · f172cd7 · f172cd7
1 parent 230b4d0
commit f172cd7
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 21 deletions.
diff --git a/enclave-manager/web/src/components/DataTable.tsx b/enclave-manager/web/src/components/DataTable.tsx
@@ -5,6 +5,7 @@ import {
   flexRender,
   getCoreRowModel,
   getSortedRowModel,
+  RowData,
   SortingState,
   TableState,
   useReactTable,
@@ -14,6 +15,13 @@ import { type OnChangeFn } from "@tanstack/table-core/src/types";
 import { useState } from "react";
 import { assertDefined, isDefined } from "../utils";
 
+declare module "@tanstack/table-core" {
+  interface ColumnMeta<TData extends RowData, TValue> {
+    isNumeric?: boolean;
+    centerAligned?: boolean;
+  }
+}
+
 export type DataTableProps<Data extends object> = {
   data: Data[];
   columns: ColumnDef<Data, any>[];
@@ -62,20 +70,24 @@ export function DataTable<Data extends object>({
         {table.getHeaderGroups().map((headerGroup) => (
           <Tr key={headerGroup.id}>
             {headerGroup.headers.map((header) => {
-              // see https://tanstack.com/table/v8/docs/api/core/column-def#meta to type this correctly
-              const meta: any = header.column.columnDef.meta;
+              const meta = header.column.columnDef.meta;
               return (
-                <Th key={header.id} onClick={header.column.getToggleSortingHandler()} isNumeric={meta?.isNumeric}>
+                <Th
+                  key={header.id}
+                  onClick={header.column.getToggleSortingHandler()}
+                  isNumeric={meta?.isNumeric}
+                  textAlign={!!meta?.centerAligned ? "center" : undefined}
+                >
                   {flexRender(header.column.columnDef.header, header.getContext())}
-                  <chakra.span pl="4">
-                    {header.column.getIsSorted() ? (
-                      header.column.getIsSorted() === "desc" ? (
+                  {header.column.getIsSorted() && (
+                    <chakra.span pl="4">
+                      {header.column.getIsSorted() === "desc" ? (
                         <TriangleDownIcon aria-label="sorted descending" />
                       ) : (
                         <TriangleUpIcon aria-label="sorted ascending" />
-                      )
-                    ) : null}
-                  </chakra.span>
+                      )}
+                    </chakra.span>
+                  )}
                 </Th>
               );
             })}
@@ -86,10 +98,9 @@ export function DataTable<Data extends object>({
         {table.getRowModel().rows.map((row) => (
           <Tr key={row.id} bg={row.getIsSelected() ? "kurtosisSelected.100" : ""}>
             {row.getVisibleCells().map((cell) => {
-              // see https://tanstack.com/table/v8/docs/api/core/column-def#meta to type this correctly
-              const meta: any = cell.column.columnDef.meta;
+              const meta = cell.column.columnDef.meta;
               return (
-                <Td key={cell.id} isNumeric={meta?.isNumeric}>
+                <Td key={cell.id} isNumeric={meta?.isNumeric} textAlign={!!meta?.centerAligned ? "center" : undefined}>
                   {flexRender(cell.column.columnDef.cell, cell.getContext())}
                 </Td>
               );

diff --git a/enclave-manager/web/src/components/KurtosisThemeProvider.tsx b/enclave-manager/web/src/components/KurtosisThemeProvider.tsx
@@ -92,6 +92,7 @@ const theme = extendTheme({
       variants: {
         outline: (props: StyleFunctionProps) => ({
           _hover: { bg: "initial", borderColor: `${props.colorScheme}.400` },
+          _active: { bg: "initial" },
           color: `${props.colorScheme}.400`,
           borderColor: "gray.300",
         }),

diff --git a/enclave-manager/web/src/components/enclaves/CreateEnclaveButton.tsx b/enclave-manager/web/src/components/enclaves/CreateEnclaveButton.tsx
@@ -34,7 +34,7 @@ export const CreateEnclaveButton = () => {
     <>
       <Menu matchWidth>
         <MenuButton as={Button} colorScheme={"kurtosisGreen"} leftIcon={<FiPlus />} size={"md"}>
-          Create Enclave
+          New Enclave
         </MenuButton>
         <MenuList>
           <MenuItem onClick={handleManualCreateEnclaveClick} icon={<FiSettings />}>

diff --git a/enclave-manager/web/src/components/enclaves/modals/ConfigureEnclaveModal.tsx b/enclave-manager/web/src/components/enclaves/modals/ConfigureEnclaveModal.tsx
@@ -194,19 +194,21 @@ export const ConfigureEnclaveModal = ({
             {isDefined(error) && <KurtosisAlert message={error} />}
             <Flex flexDirection={"column"} gap={"24px"} p={"12px 24px"} bg={"gray.900"}>
               <Flex justifyContent={"space-between"} alignItems={"center"}>
-                <FormControl display={"flex"} alignItems={"center"} gap={"16px"}>
-                  <BooleanArgumentInput inputType={"switch"} name={"restartServices"} />
-                  <Text fontSize={"xs"}>
-                    Restart services (When enabled, Kurtosis will automatically restart any services that crash inside
-                    the enclave)
-                  </Text>
-                </FormControl>
+                <Tooltip
+                  shouldWrapChildren
+                  label={"When enabled, Kurtosis will automatically restart any services that crash inside the enclave"}
+                >
+                  <FormControl display={"flex"} alignItems={"center"} gap={"16px"}>
+                    <BooleanArgumentInput inputType={"switch"} name={"restartServices"} />
+                    <Text fontSize={"xs"}>Restart services</Text>
+                  </FormControl>
+                </Tooltip>
                 <Tooltip shouldWrapChildren label={"Create a link that can be used to share this configuration."}>
                   <CopyButton valueToCopy={getLinkToCurrentConfig} text={"Copy link"} />
                 </Tooltip>
               </Flex>
               <KurtosisArgumentFormControl name={"enclaveName"} label={"Enclave name"} type={"string"}>
-                <StringArgumentInput name={"enclaveName"} />
+                <StringArgumentInput name={"enclaveName"} disabled={isDefined(existingEnclave)} />
               </KurtosisArgumentFormControl>
               {kurtosisPackage.args.map((arg, i) => (
                 <KurtosisPackageArgumentInput key={i} argument={arg} />

diff --git a/enclave-manager/web/src/components/enclaves/tables/EnclavesTable.tsx b/enclave-manager/web/src/components/enclaves/tables/EnclavesTable.tsx
@@ -103,9 +103,12 @@ export const EnclavesTable = ({ enclavesData, selection, onSelectionChange }: En
       }),
       columnHelper.accessor("services", {
         cell: (servicesCell) => <EnclaveServicesSummary services={servicesCell.getValue()} />,
+        meta: { centerAligned: true },
       }),
       columnHelper.accessor("artifacts", {
+        header: "File artifacts",
         cell: (artifactsCell) => <EnclaveArtifactsSummary artifacts={artifactsCell.getValue()} />,
+        meta: { centerAligned: true },
       }),
     ],
     [],