diff --git a/enclave-manager/web/src/components/DataTable.tsx b/enclave-manager/web/src/components/DataTable.tsx index 1ecb67c3fa..90144c9d0c 100644 --- 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 { + isNumeric?: boolean; + centerAligned?: boolean; + } +} + export type DataTableProps = { data: Data[]; columns: ColumnDef[]; @@ -62,20 +70,24 @@ export function DataTable({ {table.getHeaderGroups().map((headerGroup) => ( {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 ( - + {flexRender(header.column.columnDef.header, header.getContext())} - - {header.column.getIsSorted() ? ( - header.column.getIsSorted() === "desc" ? ( + {header.column.getIsSorted() && ( + + {header.column.getIsSorted() === "desc" ? ( ) : ( - ) - ) : null} - + )} + + )} ); })} @@ -86,10 +98,9 @@ export function DataTable({ {table.getRowModel().rows.map((row) => ( {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 ( - + {flexRender(cell.column.columnDef.cell, cell.getContext())} ); diff --git a/enclave-manager/web/src/components/KurtosisThemeProvider.tsx b/enclave-manager/web/src/components/KurtosisThemeProvider.tsx index e60d604a20..14ee171ab0 100644 --- 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 index aeaa54b595..34dc96ccad 100644 --- 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 = () => { <> } size={"md"}> - Create Enclave + New Enclave }> diff --git a/enclave-manager/web/src/components/enclaves/modals/ConfigureEnclaveModal.tsx b/enclave-manager/web/src/components/enclaves/modals/ConfigureEnclaveModal.tsx index 7cf1df8201..650611f334 100644 --- 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) && } - - - - Restart services (When enabled, Kurtosis will automatically restart any services that crash inside - the enclave) - - + + + + Restart services + + - + {kurtosisPackage.args.map((arg, i) => ( diff --git a/enclave-manager/web/src/components/enclaves/tables/EnclavesTable.tsx b/enclave-manager/web/src/components/enclaves/tables/EnclavesTable.tsx index 89586be024..4c0f3f4ebb 100644 --- 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) => , + meta: { centerAligned: true }, }), columnHelper.accessor("artifacts", { + header: "File artifacts", cell: (artifactsCell) => , + meta: { centerAligned: true }, }), ], [],