Get rid of pointless Cell type (#2119)

get rid of pointless Cell type

Author: david-crespo

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

@@ -23,7 +23,7 @@ import { DateCell } from '~/table/cells/DateCell'
 import { EnabledCell } from '~/table/cells/EnabledCell'
 import { FirewallFilterCell } from '~/table/cells/FirewallFilterCell'
 import { ButtonCell } from '~/table/cells/LinkCell'
-import { TypeValueListCell } from '~/table/cells/TypeValueListCell'
+import { TypeValueCell } from '~/table/cells/TypeValueCell'
 import { getActionsCol } from '~/table/columns/action-col'
 import { Table } from '~/table/Table'
 import { Button } from '~/ui/lib/Button'
@@ -50,11 +50,17 @@ const staticColumns = [
   }),
   colHelper.accessor('targets', {
     header: 'Targets',
-    cell: (info) => <TypeValueListCell value={info.getValue()} />,
+    cell: (info) => (
+      <div>
+        {info.getValue().map(({ type, value }) => (
+          <TypeValueCell key={type + '|' + value} type={type} value={value} />
+        ))}
+      </div>
+    ),
   }),
   colHelper.accessor('filters', {
     header: 'Filters',
-    cell: (info) => <FirewallFilterCell value={info.getValue()} />,
+    cell: (info) => <FirewallFilterCell {...info.getValue()} />,
   }),
   colHelper.accessor('status', {
     header: 'Status',

app/table/cells/Cell.tsx

@@ -7,9 +7,8 @@
  */
 import { format } from 'date-fns'
 
-import type { Cell } from './Cell'
 import { TwoLineCell } from './TwoLineCell'
 
-export const DateCell = ({ value }: Cell<Date>) => (
+export const DateCell = ({ value }: { value: Date }) => (
   <TwoLineCell value={[format(value, 'MMM d, yyyy'), format(value, 'p')]} />
 )

app/table/cells/DateCell.tsx

@@ -10,9 +10,7 @@ import { Success12Icon } from '@oxide/design-system/icons/react'
 
 import { Badge } from '~/ui/lib/Badge'
 
-import type { Cell } from './Cell'
-
-export const EnabledCell = ({ value }: Cell<VpcFirewallRuleStatus>) =>
+export const EnabledCell = ({ value }: { value: VpcFirewallRuleStatus }) =>
   value === 'enabled' ? (
     <>
       <Success12Icon className="mr-1 text-accent" />

app/table/cells/EnabledCell.tsx

@@ -9,15 +9,12 @@ import type { VpcFirewallRuleFilter } from '@oxide/api'
 
 import { Badge } from '~/ui/lib/Badge'
 
-import { type Cell } from './Cell'
 import { TypeValueCell } from './TypeValueCell'
 
-export const FirewallFilterCell = ({
-  value: { hosts, ports, protocols },
-}: Cell<VpcFirewallRuleFilter>) => (
+export const FirewallFilterCell = ({ hosts, ports, protocols }: VpcFirewallRuleFilter) => (
   <div className="flex flex-col gap-1">
     <div className="flex flex-wrap gap-1">
-      {hosts?.map((tv, i) => <TypeValueCell key={`${tv}-${i}`} value={tv} />)}
+      {hosts?.map((tv, i) => <TypeValueCell key={`${tv}-${i}`} {...tv} />)}
     </div>
     <div className="flex gap-1">
       {protocols?.map((p, i) => <Badge key={`${p}-${i}`}>{p}</Badge>)}

app/table/cells/FirewallFilterCell.tsx

@@ -9,11 +9,9 @@ import { filesize } from 'filesize'
 
 import type { Instance } from '@oxide/api'
 
-import type { Cell } from './Cell'
+type Props = { value: Pick<Instance, 'ncpus' | 'memory'> }
 
-export const InstanceResourceCell = ({
-  value,
-}: Cell<Pick<Instance, 'ncpus' | 'memory'>>) => {
+export const InstanceResourceCell = ({ value }: Props) => {
   const memory = filesize(value.memory, { output: 'object', base: 2 })
   return (
     <div className="space-y-0.5">

app/table/cells/InstanceResourceCell.tsx

@@ -10,11 +10,9 @@ import type { Instance } from '@oxide/api'
 import { InstanceStatusBadge } from '~/components/StatusBadge'
 import { TimeAgo } from '~/components/TimeAgo'
 
-import type { Cell } from './Cell'
+type Props = { value: Pick<Instance, 'runState' | 'timeRunStateUpdated'> }
 
-export const InstanceStatusCell = ({
-  value,
-}: Cell<Pick<Instance, 'runState' | 'timeRunStateUpdated'>>) => {
+export const InstanceStatusCell = ({ value }: Props) => {
   return (
     <div className="flex flex-col">
       <InstanceStatusBadge key="run-state" status={value.runState} />

app/table/cells/InstanceStatusCell.tsx

@@ -7,10 +7,8 @@
  */
 import { filesize } from 'filesize'
 
-import type { Cell } from './Cell'
-
 /** Human-readable format for size in bytes */
-export const SizeCell = ({ value: bytes }: Cell<number>) => {
+export const SizeCell = ({ value: bytes }: { value: number }) => {
   const size = filesize(bytes, { base: 2, output: 'object' })
   return (
     <span className="text-secondary">

app/table/cells/SizeCell.tsx

@@ -7,14 +7,9 @@
  */
 import { Truncate } from '~/ui/lib/Truncate'
 
-import type { Cell } from './Cell'
+type Props = { value: string; maxLength?: number }
 
-export const TruncateCell = ({
-  value,
-  maxLength = 32,
-}: Cell<string> & {
-  maxLength?: number
-}) => (
+export const TruncateCell = ({ value, maxLength = 32 }: Props) => (
   <span className="text-secondary">
     <Truncate text={value} maxLength={maxLength} />
   </span>

app/table/cells/TruncateCell.tsx

@@ -7,9 +7,8 @@
  */
 import cn from 'classnames'
 
-import type { Cell } from './Cell'
-
-interface TwoLineCellProps extends Cell<[string | JSX.Element, string | JSX.Element]> {
+interface TwoLineCellProps {
+  value: [React.ReactNode, React.ReactNode]
   detailsClass?: string
 }
 

app/table/cells/TwoLineCell.tsx

@@ -8,14 +8,12 @@
 
 import { Badge } from '~/ui/lib/Badge'
 
-import type { Cell } from './Cell'
-
 export type TypeValue = {
   type: string
   value: string
 }
 
-export const TypeValueCell = ({ value: { type, value } }: Cell<TypeValue>) => (
+export const TypeValueCell = ({ type, value }: TypeValue) => (
   <div className="space-x-1">
     <Badge>{type}</Badge>
     <Badge variant="solid" className="!normal-case">