Set table cells to have shorter default height (#2158)

* Set table cells to have shorter default

* Remove unused 'auto' cell height

* defaults all the way down

* firewall rules table is tall for now

---------

Co-authored-by: David Crespo <[email protected]>

Author: charliepark

app/pages/project/instances/InstancesPage.tsx

@@ -128,7 +128,7 @@ export function InstancesPage() {
           New Instance
         </Link>
       </TableActions>
-      <Table columns={columns} emptyState={<EmptyState />} />
+      <Table columns={columns} emptyState={<EmptyState />} rowHeight="large" />
     </>
   )
 }

app/pages/project/vpcs/VpcPage/tabs/VpcFirewallRulesTab.tsx

@@ -151,7 +151,7 @@ export const VpcFirewallRulesTab = () => {
           />
         )}
       </div>
-      {rules.length > 0 ? <Table table={table} /> : emptyState}
+      {rules.length > 0 ? <Table table={table} rowHeight="large" /> : emptyState}
     </>
   )
 }

app/pages/system/UtilizationPage.tsx

@@ -172,41 +172,43 @@ function UsageTab() {
       <Table.Body>
         {siloUtilizations.items.map((silo) => (
           <Table.Row key={silo.siloName}>
-            <Table.Cell width="16%">{silo.siloName}</Table.Cell>
-            <Table.Cell width="14%">
+            <Table.Cell width="16%" height="large">
+              {silo.siloName}
+            </Table.Cell>
+            <Table.Cell width="14%" height="large">
               <UsageCell
                 provisioned={silo.provisioned.cpus}
                 allocated={silo.allocated.cpus}
               />
             </Table.Cell>
-            <Table.Cell width="14%">
+            <Table.Cell width="14%" height="large">
               <UsageCell
                 provisioned={bytesToGiB(silo.provisioned.memory)}
                 allocated={bytesToGiB(silo.allocated.memory)}
                 unit="GiB"
               />
             </Table.Cell>
-            <Table.Cell width="14%">
+            <Table.Cell width="14%" height="large">
               <UsageCell
                 provisioned={bytesToTiB(silo.provisioned.storage)}
                 allocated={bytesToTiB(silo.allocated.storage)}
                 unit="TiB"
               />
             </Table.Cell>
-            <Table.Cell width="14%" className="relative">
+            <Table.Cell width="14%" className="relative" height="large">
               <AvailableCell
                 provisioned={silo.provisioned.cpus}
                 allocated={silo.allocated.cpus}
               />
             </Table.Cell>
-            <Table.Cell width="14%" className="relative">
+            <Table.Cell width="14%" className="relative" height="large">
               <AvailableCell
                 provisioned={bytesToGiB(silo.provisioned.memory)}
                 allocated={bytesToGiB(silo.allocated.memory)}
                 unit="GiB"
               />
             </Table.Cell>
-            <Table.Cell width="14%" className="relative">
+            <Table.Cell width="14%" className="relative" height="large">
               <AvailableCell
                 provisioned={bytesToTiB(silo.provisioned.storage)}
                 allocated={bytesToTiB(silo.allocated.storage)}

app/table/QueryTable.tsx

@@ -56,6 +56,7 @@ type QueryTableProps<Item> = {
   /** Function that produces a list of actions from a row item */
   pagination?: 'inline' | 'page'
   pageSize?: number
+  rowHeight?: 'small' | 'large'
   emptyState: React.ReactElement
   columns: ColumnDef<Item, any>[]
 }
@@ -72,6 +73,7 @@ const makeQueryTable = <Item extends Record<string, unknown>>(
     debug,
     pagination = 'page',
     pageSize = PAGE_SIZE,
+    rowHeight = 'small',
     emptyState,
     columns,
   }: QueryTableProps<Item>) {
@@ -111,7 +113,7 @@ const makeQueryTable = <Item extends Record<string, unknown>>(
 
     return (
       <>
-        <Table table={table} />
+        <Table table={table} rowHeight={rowHeight} />
         <Pagination
           inline={pagination === 'inline'}
           pageSize={pageSize}

app/table/Table.tsx

@@ -12,6 +12,7 @@ import { Table as UITable } from '~/ui/lib/Table'
 
 export type TableProps<TData> = JSX.IntrinsicElements['table'] & {
   rowClassName?: string
+  rowHeight?: 'small' | 'large'
   table: TableInstance<TData>
   singleSelect?: boolean
   multiSelect?: boolean
@@ -20,6 +21,7 @@ export type TableProps<TData> = JSX.IntrinsicElements['table'] & {
 /** Render a React Table table instance */
 export const Table = <TData,>({
   rowClassName,
+  rowHeight = 'small',
   table,
   singleSelect,
   multiSelect,
@@ -70,6 +72,7 @@ export const Table = <TData,>({
                 key={cell.column.id}
                 {...(i === 0 ? firstCellProps : {})}
                 className={cell.column.columnDef.meta?.tdClassName}
+                height={rowHeight}
               >
                 {flexRender(cell.column.columnDef.cell, cell.getContext())}
               </UITable.Cell>

app/ui/lib/Table.tsx

@@ -93,24 +93,22 @@ Table.Body = ({ className, children, ...props }: TableBodyProps) => {
   )
 }
 
-export type TableCellProps = JSX.IntrinsicElements['td'] & {
-  height?: 'large' | 'small' | 'auto'
-}
-Table.Cell = ({ height = 'large', className, children, ...props }: TableCellProps) => {
-  const heightClass = height === 'large' ? 'h-16' : height === 'small' ? 'h-8' : ''
+export type TableCellProps = JSX.IntrinsicElements['td'] & { height?: 'small' | 'large' }
+Table.Cell = ({ height = 'small', className, children, ...props }: TableCellProps) => {
+  const heightClasses = { 'h-12': height === 'small', 'h-16': height === 'large' }
   return (
     <td
       className={cn(
         className,
         'pl-0 text-default border-default children:first:border-l-0 children:last:-mr-[1px]',
-        heightClass
+        heightClasses
       )}
       {...props}
     >
       <div
         className={cn(
           'relative -my-[1px] -mr-[2px] flex items-center border-b border-l py-3 pl-3 pr-3 border-secondary',
-          heightClass
+          heightClasses
         )}
       >
         {children}