Shared cells

[david-crespo]

We don't save a ton of lines here, but we do get more consistency and correctness. One major difference is we are now using TruncateCell on every description column, whereas before we were using it in only one or two spots.

Closes #1608

Looking over all the accessor calls, I don't see any more candidates for extraction.

rg 'accessor\(' results

app/pages/system/silos/SiloIdpsTab.tsx
      colHelper.accessor('name', {
      colHelper.accessor('description', Columns.description),
      colHelper.accessor('providerType', {
      colHelper.accessor('timeCreated', Columns.timeCreated),

app/pages/system/silos/SilosPage.tsx
  colHelper.accessor('name', {
  colHelper.accessor('description', Columns.description),
  colHelper.accessor('discoverable', {
  colHelper.accessor((silo) => silo.identityMode, {
  colHelper.accessor('timeCreated', Columns.timeCreated),

app/pages/system/silos/SiloIpPoolsTab.tsx
  colHelper.accessor('name', { cell: makeLinkCell((pool) => pb.ipPool({ pool })) }),
  colHelper.accessor('description', Columns.description),
  colHelper.accessor('isDefault', {

app/pages/system/inventory/DisksTab.tsx
  colHelper.accessor('id', {}),
  colHelper.accessor((d) => (d.formFactor === 'u2' ? 'U.2' : 'M.2'), {
  colHelper.accessor('model', { header: 'model number' }),
  colHelper.accessor('serial', { header: 'serial number' }),

app/pages/project/instances/instance/tabs/NetworkingTab.tsx
  colHelper.accessor((i) => ({ name: i.name, primary: i.primary }), {
  colHelper.accessor('description', Columns.description),
  colHelper.accessor('ip', {}),
  colHelper.accessor('vpcId', {
  colHelper.accessor('subnetId', {

app/pages/project/snapshots/SnapshotsPage.tsx
  colHelper.accessor('name', {}),
  colHelper.accessor('description', Columns.description),
  colHelper.accessor('diskId', {
  colHelper.accessor('state', {
  colHelper.accessor('size', Columns.size),
  colHelper.accessor('timeCreated', Columns.timeCreated),

app/pages/system/inventory/SledsTab.tsx
  colHelper.accessor('id', {
  // TODO: colHelper.accessor('baseboard.serviceAddress', { header: 'service address' }),
  colHelper.accessor('baseboard.part', { header: 'part number' }),
  colHelper.accessor('baseboard.serial', { header: 'serial number' }),
  colHelper.accessor('baseboard.revision', { header: 'revision' }),

app/pages/project/access/ProjectAccessPage.tsx
      colHelper.accessor('name', { header: 'Name' }),
      colHelper.accessor('identityType', {
      colHelper.accessor('roleBadges', {

app/pages/project/instances/instance/tabs/StorageTab.tsx
  colHelper.accessor('name', {}),
  colHelper.accessor('size', Columns.size),
  colHelper.accessor((row) => row.state.state, {
  colHelper.accessor('timeCreated', Columns.timeCreated),

app/pages/system/inventory/sled/SledInstancesTab.tsx
  colHelper.accessor((i) => pick(i, 'name', 'siloName', 'projectName'), {
  colHelper.accessor('state', {
  colHelper.accessor((i) => pick(i, 'memory', 'ncpus'), {
  colHelper.accessor('timeCreated', Columns.timeCreated),
  colHelper.accessor('timeModified', Columns.timeModified),

app/pages/project/floating-ips/FloatingIpsPage.tsx
  colHelper.accessor('name', {}),
  colHelper.accessor('description', Columns.description),
  colHelper.accessor('ip', {}),
  colHelper.accessor('instanceId', {

app/pages/project/instances/InstancesPage.tsx
      colHelper.accessor('name', {
      colHelper.accessor((i) => ({ ncpus: i.ncpus, memory: i.memory }), {
      colHelper.accessor(
      colHelper.accessor('hostname', {}),
      colHelper.accessor('timeCreated', Columns.timeCreated),

app/pages/system/networking/IpPoolsTab.tsx
  colHelper.accessor('name', { cell: makeLinkCell((pool) => pb.ipPool({ pool })) }),
  colHelper.accessor('description', Columns.description),
  colHelper.accessor('name', {
  colHelper.accessor('timeCreated', Columns.timeCreated),

app/pages/system/networking/IpPoolPage.tsx
  ipRangesColHelper.accessor('range.first', { header: 'First' }),
  ipRangesColHelper.accessor('range.last', { header: 'Last' }),
  ipRangesColHelper.accessor('timeCreated', Columns.timeCreated),
  silosColHelper.accessor('siloId', {
  silosColHelper.accessor('isDefault', {

app/pages/SiloAccessPage.tsx
      colHelper.accessor('name', { header: 'Name' }),
      colHelper.accessor('identityType', {
      colHelper.accessor('siloRole', {

app/pages/project/disks/DisksPage.tsx
  colHelper.accessor('name', {}),
  colHelper.accessor(
  colHelper.accessor('size', Columns.size),
  colHelper.accessor('state.state', {
  colHelper.accessor('timeCreated', Columns.timeCreated),

app/pages/system/SiloImagesPage.tsx
  colHelper.accessor('name', {
  colHelper.accessor('description', Columns.description),
  colHelper.accessor('size', Columns.size),
  colHelper.accessor('timeCreated', Columns.timeCreated),

app/pages/ProjectsPage.tsx
  colHelper.accessor('name', {
  colHelper.accessor('description', Columns.description),
  colHelper.accessor('timeCreated', Columns.timeCreated),

app/pages/settings/SSHKeysPage.tsx
  colHelper.accessor('name', {}),
  colHelper.accessor('description', Columns.description),
  colHelper.accessor('timeModified', Columns.timeModified),

app/pages/settings/ProfilePage.tsx
  colHelper.accessor('displayName', { header: 'Name' }),

app/pages/project/vpcs/VpcPage/tabs/VpcFirewallRulesTab.tsx
  colHelper.accessor('priority', {
  colHelper.accessor('action', {
  colHelper.accessor('direction', {
  colHelper.accessor('targets', {
  colHelper.accessor('filters', {
  colHelper.accessor('status', {
  colHelper.accessor('timeCreated', Columns.timeCreated),
      colHelper.accessor('name', {

app/pages/project/vpcs/VpcsPage.tsx
      colHelper.accessor('name', {
      colHelper.accessor('dnsName', { header: 'DNS name' }),
      colHelper.accessor('description', Columns.description),
      colHelper.accessor('timeCreated', Columns.timeCreated),

app/pages/project/vpcs/VpcPage/tabs/VpcSubnetsTab.tsx
  colHelper.accessor('name', {}),
  colHelper.accessor((vpc) => [vpc.ipv4Block, vpc.ipv6Block] as const, {
  colHelper.accessor('timeCreated', Columns.timeCreated),

app/pages/project/images/ImagesPage.tsx
      colHelper.accessor('name', {
      colHelper.accessor('description', Columns.description),
      colHelper.accessor('size', Columns.size),
      colHelper.accessor('timeCreated', Columns.timeCreated),

---

I tried the first commit here and got excited because it typechecks, but then I noticed that it is way too lenient. Neither of the two line changes below causes a type error, which is garbage.

diff --git a/app/table/columns/common.tsx b/app/table/columns/common.tsx
index dd82de7e..6d7337ba 100644
--- a/app/table/columns/common.tsx
+++ b/app/table/columns/common.tsx
@@ -23,8 +23,8 @@ export const Columns = {
     cell: (info: Info<string>) => <Truncate text={info.getValue()} maxLength={48} />,
   },
   size: {
-    accessorKey: 'size',
-    cell: (info: Info<number>) => <SizeCell value={info.getValue()} />,
+    accessorKey: 'siz',
+    cell: (info: Info<string>) => info.getValue(),
   },
   timeCreated: {
     accessorKey: 'timeCreated',

So instead I am updating this PR to share only the cell part, and we still still have to use colHelper.accessor at each column definition.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
console	✅ Ready (Inspect)	Visit Preview	Apr 3, 2024 3:50pm

[david-crespo]

Now this change causes the expected type error due to incompatibility with the actual types of size columns.

diff --git a/app/table/columns/common.tsx b/app/table/columns/common.tsx
index cf885cdf..08160209 100644
--- a/app/table/columns/common.tsx
+++ b/app/table/columns/common.tsx
@@ -23,7 +23,7 @@ export const Columns = {
     cell: (info: Info<string>) => <Truncate text={info.getValue()} maxLength={48} />,
   },
   size: {
-    cell: (info: Info<number>) => <SizeCell value={info.getValue()} />,
+    cell: (info: Info<string>) => info.getValue(),
   },
   timeCreated: {

[charliepark]

Aw yeah