Rename "status" columns to more correct "state" (#2395)

rename status to state everywhere it's appropriate

Author: david-crespo

app/components/StatusBadge.tsx app/components/StateBadge.tsx

@@ -22,12 +22,9 @@ const INSTANCE_COLORS: Record<InstanceState, Pick<BadgeProps, 'color' | 'variant
   destroyed: { color: 'neutral', variant: 'solid' },
 }
 
-export const InstanceStatusBadge = (props: {
-  status: InstanceState
-  className?: string
-}) => (
-  <Badge {...INSTANCE_COLORS[props.status]} className={props.className}>
-    {props.status}
+export const InstanceStateBadge = (props: { state: InstanceState; className?: string }) => (
+  <Badge {...INSTANCE_COLORS[props.state]} className={props.className}>
+    {props.state}
   </Badge>
 )
 
@@ -48,9 +45,9 @@ const DISK_COLORS: Record<DiskStateStr, Pick<BadgeProps, 'color' | 'variant'>> =
   finalizing: { color: 'blue', variant: 'solid' },
 }
 
-export const DiskStatusBadge = (props: { status: DiskStateStr; className?: string }) => (
-  <Badge {...DISK_COLORS[props.status]} className={props.className}>
-    {props.status}
+export const DiskStateBadge = (props: { state: DiskStateStr; className?: string }) => (
+  <Badge {...DISK_COLORS[props.state]} className={props.className}>
+    {props.state}
   </Badge>
 )
 
@@ -61,11 +58,8 @@ const SNAPSHOT_COLORS: Record<SnapshotState, BadgeColor> = {
   ready: 'default',
 }
 
-export const SnapshotStatusBadge = (props: {
-  status: SnapshotState
-  className?: string
-}) => (
-  <Badge color={SNAPSHOT_COLORS[props.status]} className={props.className}>
-    {props.status}
+export const SnapshotStateBadge = (props: { state: SnapshotState; className?: string }) => (
+  <Badge color={SNAPSHOT_COLORS[props.state]} className={props.className}>
+    {props.state}
   </Badge>
 )

app/pages/project/disks/DisksPage.tsx

@@ -20,7 +20,7 @@ import {
 import { Storage16Icon, Storage24Icon } from '@oxide/design-system/icons/react'
 
 import { DocsPopover } from '~/components/DocsPopover'
-import { DiskStatusBadge } from '~/components/StatusBadge'
+import { DiskStateBadge } from '~/components/StateBadge'
 import { getProjectSelector, useProjectSelector } from '~/hooks'
 import { confirmDelete } from '~/stores/confirm-delete'
 import { addToast } from '~/stores/toast'
@@ -87,8 +87,8 @@ const staticCols = [
   ),
   colHelper.accessor('size', Columns.size),
   colHelper.accessor('state.state', {
-    header: 'Status',
-    cell: (info) => <DiskStatusBadge status={info.getValue()} />,
+    header: 'state',
+    cell: (info) => <DiskStateBadge state={info.getValue()} />,
   }),
   colHelper.accessor('timeCreated', Columns.timeCreated),
 ]

app/pages/project/instances/InstancesPage.tsx

@@ -17,7 +17,7 @@ import { instanceTransitioning } from '~/api/util'
 import { InstanceDocsPopover } from '~/components/InstanceDocsPopover'
 import { RefreshButton } from '~/components/RefreshButton'
 import { getProjectSelector, useProjectSelector, useQuickActions } from '~/hooks'
-import { InstanceStatusCell } from '~/table/cells/InstanceStatusCell'
+import { InstanceStateCell } from '~/table/cells/InstanceStateCell'
 import { makeLinkCell } from '~/table/cells/LinkCell'
 import { getActionsCol } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
@@ -176,8 +176,8 @@ export function InstancesPage() {
       colHelper.accessor(
         (i) => ({ runState: i.runState, timeRunStateUpdated: i.timeRunStateUpdated }),
         {
-          header: 'status',
-          cell: (info) => <InstanceStatusCell value={info.getValue()} />,
+          header: 'state',
+          cell: (info) => <InstanceStateCell value={info.getValue()} />,
         }
       ),
       colHelper.accessor('timeCreated', Columns.timeCreated),

app/pages/project/instances/instance/InstancePage.tsx

@@ -23,7 +23,7 @@ import { InstanceDocsPopover } from '~/components/InstanceDocsPopover'
 import { MoreActionsMenu } from '~/components/MoreActionsMenu'
 import { RefreshButton } from '~/components/RefreshButton'
 import { RouteTabs, Tab } from '~/components/RouteTabs'
-import { InstanceStatusBadge } from '~/components/StatusBadge'
+import { InstanceStateBadge } from '~/components/StateBadge'
 import { getInstanceSelector, useInstanceSelector } from '~/hooks'
 import { EmptyCell } from '~/table/cells/EmptyCell'
 import { DateTime } from '~/ui/lib/DateTime'
@@ -167,11 +167,11 @@ export function InstancePage() {
             <span className="text-secondary">{memory.value}</span>
             <span className="ml-1 text-quaternary"> {memory.unit}</span>
           </PropertiesTable.Row>
-          <PropertiesTable.Row label="status">
+          <PropertiesTable.Row label="state">
             <div className="flex">
-              <InstanceStatusBadge status={instance.runState} />
+              <InstanceStateBadge state={instance.runState} />
               {polling && (
-                <Tooltip content="Auto-refreshing while status changes" delay={150}>
+                <Tooltip content="Auto-refreshing while state changes" delay={150}>
                   <button type="button">
                     <Spinner className="ml-2" />
                   </button>

app/pages/project/instances/instance/SerialConsolePage.tsx

@@ -19,7 +19,7 @@ import {
 import { PrevArrow12Icon } from '@oxide/design-system/icons/react'
 
 import { EquivalentCliCommand } from '~/components/EquivalentCliCommand'
-import { InstanceStatusBadge } from '~/components/StatusBadge'
+import { InstanceStateBadge } from '~/components/StateBadge'
 import { getInstanceSelector, useInstanceSelector } from '~/hooks/use-params'
 import { Badge, type BadgeColor } from '~/ui/lib/Badge'
 import { Spinner } from '~/ui/lib/Spinner'
@@ -219,7 +219,7 @@ const CannotConnect = ({ instance }: { instance: Instance }) => (
   <SerialSkeleton animate={isStarting(instance)}>
     <p className="flex items-center justify-center text-sans-xl">
       <span>The instance is </span>
-      <InstanceStatusBadge className="ml-1.5" status={instance.runState} />
+      <InstanceStateBadge className="ml-1.5" state={instance.runState} />
     </p>
     <p className="mt-2 text-balance text-center text-secondary">
       {isStarting(instance)

app/pages/project/instances/instance/tabs/StorageTab.tsx

@@ -21,7 +21,7 @@ import {
 } from '@oxide/api'
 import { Storage24Icon } from '@oxide/design-system/icons/react'
 
-import { DiskStatusBadge } from '~/components/StatusBadge'
+import { DiskStateBadge } from '~/components/StateBadge'
 import { AttachDiskSideModalForm } from '~/forms/disk-attach'
 import { CreateDiskSideModalForm } from '~/forms/disk-create'
 import { getInstanceSelector, useInstanceSelector } from '~/hooks'
@@ -56,8 +56,8 @@ const staticCols = [
   colHelper.accessor('name', { header: 'Disk' }),
   colHelper.accessor('size', Columns.size),
   colHelper.accessor((row) => row.state.state, {
-    header: 'status',
-    cell: (info) => <DiskStatusBadge status={info.getValue()} />,
+    header: 'state',
+    cell: (info) => <DiskStateBadge state={info.getValue()} />,
   }),
   colHelper.accessor('timeCreated', Columns.timeCreated),
 ]

app/pages/project/snapshots/SnapshotsPage.tsx

@@ -19,7 +19,7 @@ import {
 import { Snapshots16Icon, Snapshots24Icon } from '@oxide/design-system/icons/react'
 
 import { DocsPopover } from '~/components/DocsPopover'
-import { SnapshotStatusBadge } from '~/components/StatusBadge'
+import { SnapshotStateBadge } from '~/components/StateBadge'
 import { getProjectSelector, useProjectSelector } from '~/hooks'
 import { confirmDelete } from '~/stores/confirm-delete'
 import { SkeletonCell } from '~/table/cells/EmptyCell'
@@ -91,7 +91,7 @@ const staticCols = [
     cell: (info) => <DiskNameFromId value={info.getValue()} />,
   }),
   colHelper.accessor('state', {
-    cell: (info) => <SnapshotStatusBadge status={info.getValue()} />,
+    cell: (info) => <SnapshotStateBadge state={info.getValue()} />,
   }),
   colHelper.accessor('size', Columns.size),
   colHelper.accessor('timeCreated', Columns.timeCreated),

app/pages/system/inventory/sled/SledInstancesTab.tsx

@@ -12,7 +12,7 @@ import * as R from 'remeda'
 import { apiQueryClient, type SledInstance } from '@oxide/api'
 import { Instances24Icon } from '@oxide/design-system/icons/react'
 
-import { InstanceStatusBadge } from '~/components/StatusBadge'
+import { InstanceStateBadge } from '~/components/StateBadge'
 import { requireSledParams, useSledParams } from '~/hooks'
 import { InstanceResourceCell } from '~/table/cells/InstanceResourceCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
@@ -59,8 +59,8 @@ const staticCols = [
   // we don't show run state last update time like on project instances because
   // it's not in this response
   colHelper.accessor('state', {
-    header: 'status',
-    cell: (info) => <InstanceStatusBadge status={info.getValue()} />,
+    header: 'State',
+    cell: (info) => <InstanceStateBadge state={info.getValue()} />,
   }),
   colHelper.accessor((i) => R.pick(i, ['memory', 'ncpus']), {
     header: 'specs',

app/table/cells/InstanceStatusCell.tsx app/table/cells/InstanceStateCell.tsx

@@ -7,15 +7,15 @@
  */
 import type { Instance } from '@oxide/api'
 
-import { InstanceStatusBadge } from '~/components/StatusBadge'
+import { InstanceStateBadge } from '~/components/StateBadge'
 import { TimeAgo } from '~/components/TimeAgo'
 
 type Props = { value: Pick<Instance, 'runState' | 'timeRunStateUpdated'> }
 
-export const InstanceStatusCell = ({ value }: Props) => {
+export const InstanceStateCell = ({ value }: Props) => {
   return (
     <div className="flex items-center gap-1.5">
-      <InstanceStatusBadge status={value.runState} />
+      <InstanceStateBadge state={value.runState} />
       <TimeAgo tooltipText="Run state updated" datetime={value.timeRunStateUpdated} />
     </div>
   )

test/e2e/disks.e2e.ts

@@ -18,13 +18,13 @@ test('List disks and snapshot', async ({ page }) => {
     'Attached to': 'db1',
     name: 'disk-1',
     size: '2 GiB',
-    Status: 'attached',
+    state: 'attached',
   })
   await expectRowVisible(table, {
     'Attached to': '',
     name: 'disk-3',
     size: '6 GiB',
-    Status: 'detached',
+    state: 'detached',
   })
 
   await clickRowAction(page, 'disk-1 db1', 'Snapshot')

test/e2e/instance.e2e.ts

@@ -29,7 +29,7 @@ test('can stop and delete a running instance', async ({ page }) => {
   const table = page.getByRole('table')
   await expectRowVisible(table, {
     name: 'db1',
-    status: expect.stringContaining('running'),
+    state: expect.stringContaining('running'),
   })
   const row = page.getByRole('row', { name: 'db1', exact: false })
 
@@ -42,11 +42,11 @@ test('can stop and delete a running instance', async ({ page }) => {
   // polling makes it go stopping and then stopped
   await expectRowVisible(table, {
     name: 'db1',
-    status: expect.stringContaining('stopping'),
+    state: expect.stringContaining('stopping'),
   })
   await expectRowVisible(table, {
     name: 'db1',
-    status: expect.stringContaining('stopped'),
+    state: expect.stringContaining('stopped'),
   })
 
   // now delete
@@ -62,29 +62,29 @@ test('can stop a starting instance, then start it again', async ({ page }) => {
   const table = page.getByRole('table')
   await expectRowVisible(table, {
     name: 'not-there-yet',
-    status: expect.stringContaining('starting'),
+    state: expect.stringContaining('starting'),
   })
 
   await clickRowAction(page, 'not-there-yet', 'Stop')
   await page.getByRole('button', { name: 'Confirm' }).click()
 
   await expectRowVisible(table, {
     name: 'not-there-yet',
-    status: expect.stringContaining('stopping'),
+    state: expect.stringContaining('stopping'),
   })
   await expectRowVisible(table, {
     name: 'not-there-yet',
-    status: expect.stringContaining('stopped'),
+    state: expect.stringContaining('stopped'),
   })
 
   await clickRowAction(page, 'not-there-yet', 'Start')
   await expectRowVisible(table, {
     name: 'not-there-yet',
-    status: expect.stringContaining('starting'),
+    state: expect.stringContaining('starting'),
   })
   await expectRowVisible(table, {
     name: 'not-there-yet',
-    status: expect.stringContaining('running'),
+    state: expect.stringContaining('running'),
   })
 })
 
@@ -108,18 +108,18 @@ test('instance table', async ({ page }) => {
     name: 'db1',
     CPU: '2 vCPU',
     Memory: '4 GiB',
-    status: expect.stringMatching(/^running\d+s$/),
+    state: expect.stringMatching(/^running\d+s$/),
   })
   await expectRowVisible(table, {
     name: 'you-fail',
     CPU: '4 vCPU',
     Memory: '6 GiB',
-    status: expect.stringMatching(/^failed\d+s$/),
+    state: expect.stringMatching(/^failed\d+s$/),
   })
   await expectRowVisible(table, {
     name: 'not-there-yet',
     CPU: '2 vCPU',
     Memory: '8 GiB',
-    status: expect.stringMatching(/^starting\d+s$/),
+    state: expect.stringMatching(/^starting\d+s$/),
   })
 })

test/e2e/utils.ts

@@ -112,7 +112,7 @@ export async function stopInstance(page: Page) {
   await page.getByRole('button', { name: 'Confirm' }).click()
   await closeToast(page)
   // don't need to manually refresh because of polling
-  await expect(page.getByText('statusstopped')).toBeVisible()
+  await expect(page.getByText('statestopped')).toBeVisible()
 }
 
 /**