Add more quick actions throughout console

Author: charliepark

app/pages/project/instances/NetworkingTab.tsx

@@ -45,6 +45,7 @@ import {
   useInstanceSelector,
   useProjectSelector,
 } from '~/hooks/use-params'
+import { useQuickActions } from '~/hooks/use-quick-actions'
 import { confirmAction } from '~/stores/confirm-action'
 import { confirmDelete } from '~/stores/confirm-delete'
 import { addToast } from '~/stores/toast'
@@ -636,6 +637,53 @@ export default function NetworkingTab() {
   const subnetDisabledReason =
     availableSubnets.length === 0 ? 'No available external subnets' : null
 
+  useQuickActions(
+    () => [
+      ...(!ephemeralDisabledReason
+        ? [
+            {
+              value: 'Attach ephemeral IP',
+              navGroup: 'Actions',
+              action: () => setAttachEphemeralModalOpen(true),
+            },
+          ]
+        : []),
+      ...(!floatingDisabledReason
+        ? [
+            {
+              value: 'Attach floating IP',
+              navGroup: 'Actions',
+              action: () => setAttachFloatingModalOpen(true),
+            },
+          ]
+        : []),
+      ...(instanceCan.updateNic({ runState: instance.runState })
+        ? [
+            {
+              value: 'Add network interface',
+              navGroup: 'Actions',
+              action: () => setCreateModalOpen(true),
+            },
+          ]
+        : []),
+      ...(!subnetDisabledReason
+        ? [
+            {
+              value: 'Attach external subnet',
+              navGroup: 'Actions',
+              action: () => setAttachSubnetModalOpen(true),
+            },
+          ]
+        : []),
+    ],
+    [
+      ephemeralDisabledReason,
+      floatingDisabledReason,
+      instance.runState,
+      subnetDisabledReason,
+    ]
+  )
+
   return (
     <div className="space-y-5">
       <CardBlock>

app/pages/project/instances/StorageTab.tsx

@@ -28,6 +28,7 @@ import { DiskStateBadge, DiskTypeBadge, ReadOnlyBadge } from '~/components/State
 import { AttachDiskModalForm } from '~/forms/disk-attach'
 import { CreateDiskSideModalForm } from '~/forms/disk-create'
 import { getInstanceSelector, useInstanceSelector } from '~/hooks/use-params'
+import { useQuickActions } from '~/hooks/use-quick-actions'
 import { DiskDetailSideModal } from '~/pages/project/disks/DiskDetailSideModal'
 import { confirmAction } from '~/stores/confirm-action'
 import { addToast } from '~/stores/toast'
@@ -339,6 +340,26 @@ export default function StorageTab() {
     getCoreRowModel: getCoreRowModel(),
   })
 
+  const canAttachDisk = instanceCan.attachDisk(instance)
+  useQuickActions(
+    () =>
+      canAttachDisk
+        ? [
+            {
+              value: 'Attach existing disk',
+              navGroup: 'Actions',
+              action: () => setShowDiskAttach(true),
+            },
+            {
+              value: 'Create disk',
+              navGroup: 'Actions',
+              action: () => setShowDiskCreate(true),
+            },
+          ]
+        : [],
+    [canAttachDisk]
+  )
+
   return (
     <div className="space-y-5">
       <CardBlock>

app/pages/project/vpcs/RouterPage.tsx

@@ -31,6 +31,7 @@ import { MoreActionsMenu } from '~/components/MoreActionsMenu'
 import { routeFormMessage } from '~/forms/vpc-router-route-common'
 import { makeCrumb } from '~/hooks/use-crumbs'
 import { getVpcRouterSelector, useVpcRouterSelector } from '~/hooks/use-params'
+import { useQuickActions } from '~/hooks/use-quick-actions'
 import { confirmAction } from '~/stores/confirm-action'
 import { addToast } from '~/stores/toast'
 import { TypeValueCell } from '~/table/cells/TypeValueCell'
@@ -176,6 +177,20 @@ export default function RouterPage() {
   // https://github.com/oxidecomputer/omicron/blob/914f5fd7d51f9b060dcc0382a30b607e25df49b2/nexus/src/app/vpc_router.rs#L201-L205
   const canCreateNewRoute = routerData.kind === 'custom'
 
+  useQuickActions(
+    () =>
+      canCreateNewRoute
+        ? [
+            {
+              value: 'New route',
+              navGroup: 'Actions',
+              action: pb.vpcRouterRoutesNew({ project, vpc, router }),
+            },
+          ]
+        : [],
+    [canCreateNewRoute, project, vpc, router]
+  )
+
   return (
     <>
       <PageHeader>

app/pages/settings/SSHKeysPage.tsx

@@ -16,6 +16,7 @@ import { Key16Icon, Key24Icon } from '@oxide/design-system/icons/react'
 import { DocsPopover } from '~/components/DocsPopover'
 import { HL } from '~/components/HL'
 import { makeCrumb } from '~/hooks/use-crumbs'
+import { useQuickActions } from '~/hooks/use-quick-actions'
 import { confirmDelete } from '~/stores/confirm-delete'
 import { addToast } from '~/stores/toast'
 import { makeLinkCell } from '~/table/cells/LinkCell'
@@ -88,6 +89,11 @@ export default function SSHKeysPage() {
       onClick={() => navigate(pb.sshKeysNew())}
     />
   )
+  useQuickActions(
+    () => [{ value: 'Add SSH key', navGroup: 'Actions', action: pb.sshKeysNew() }],
+    []
+  )
+
   const { table } = useQueryTable({ query: sshKeyList, columns, emptyState })
 
   return (

app/pages/system/FleetAccessPage.tsx

@@ -33,6 +33,7 @@ import {
   FleetAccessEditUserSideModal,
 } from '~/forms/fleet-access'
 import { useCurrentUser } from '~/hooks/use-current-user'
+import { useQuickActions } from '~/hooks/use-quick-actions'
 import { confirmDelete } from '~/stores/confirm-delete'
 import { addToast } from '~/stores/toast'
 import { getActionsCol } from '~/table/columns/action-col'
@@ -238,6 +239,17 @@ export default function FleetAccessPage() {
     [fleetPolicy, updatePolicy, me, navigate]
   )
 
+  useQuickActions(
+    () => [
+      {
+        value: 'Add user or group',
+        navGroup: 'Actions',
+        action: () => setAddModalOpen(true),
+      },
+    ],
+    []
+  )
+
   const tableInstance = useReactTable({
     columns,
     data: rows,

app/pages/system/networking/IpPoolPage.tsx

@@ -34,6 +34,7 @@ import { MoreActionsMenu } from '~/components/MoreActionsMenu'
 import { QueryParamTabs } from '~/components/QueryParamTabs'
 import { makeCrumb } from '~/hooks/use-crumbs'
 import { getIpPoolSelector, useIpPoolSelector } from '~/hooks/use-params'
+import { useQuickActions } from '~/hooks/use-quick-actions'
 import { confirmAction } from '~/stores/confirm-action'
 import { confirmDelete } from '~/stores/confirm-delete'
 import { addToast } from '~/stores/toast'
@@ -272,6 +273,13 @@ function IpRangesTable() {
     ],
     [pool, removeRange]
   )
+  useQuickActions(
+    () => [
+      { value: 'Add range', navGroup: 'Actions', action: pb.ipPoolRangeAdd({ pool }) },
+    ],
+    [pool]
+  )
+
   const columns = useColsWithActions(ipRangesStaticCols, makeRangeActions)
   const { table } = useQueryTable({ query: ipPoolRangeList({ pool }), columns, emptyState })
 
@@ -414,6 +422,13 @@ function LinkedSilosTable() {
 
   const [showLinkModal, setShowLinkModal] = useState(false)
 
+  useQuickActions(
+    () => [
+      { value: 'Link silo', navGroup: 'Actions', action: () => setShowLinkModal(true) },
+    ],
+    []
+  )
+
   const emptyState = (
     <EmptyMessage
       icon={<IpGlobal24Icon />}

app/pages/system/networking/SubnetPoolPage.tsx

@@ -34,6 +34,7 @@ import { MoreActionsMenu } from '~/components/MoreActionsMenu'
 import { QueryParamTabs } from '~/components/QueryParamTabs'
 import { makeCrumb } from '~/hooks/use-crumbs'
 import { getSubnetPoolSelector, useSubnetPoolSelector } from '~/hooks/use-params'
+import { useQuickActions } from '~/hooks/use-quick-actions'
 import { confirmAction } from '~/stores/confirm-action'
 import { confirmDelete } from '~/stores/confirm-delete'
 import { addToast } from '~/stores/toast'
@@ -231,6 +232,17 @@ function MembersTable() {
     ],
     [subnetPool, removeMember]
   )
+  useQuickActions(
+    () => [
+      {
+        value: 'Add member',
+        navGroup: 'Actions',
+        action: pb.subnetPoolMemberAdd({ subnetPool }),
+      },
+    ],
+    [subnetPool]
+  )
+
   const columns = useColsWithActions(membersStaticCols, makeMemberActions)
   const { table } = useQueryTable({
     query: subnetPoolMemberList({ subnetPool }),
@@ -396,6 +408,13 @@ function LinkedSilosTable() {
 
   const [showLinkModal, setShowLinkModal] = useState(false)
 
+  useQuickActions(
+    () => [
+      { value: 'Link silo', navGroup: 'Actions', action: () => setShowLinkModal(true) },
+    ],
+    []
+  )
+
   const emptyState = (
     <EmptyMessage
       icon={<Subnet24Icon />}

app/pages/system/silos/SiloIdpsTab.tsx

@@ -15,6 +15,7 @@ import { Badge } from '@oxide/design-system/ui'
 import { api, getListQFn, queryClient, type IdentityProvider } from '~/api'
 import { makeCrumb } from '~/hooks/use-crumbs'
 import { getSiloSelector, useSiloSelector } from '~/hooks/use-params'
+import { useQuickActions } from '~/hooks/use-quick-actions'
 import { LinkCell } from '~/table/cells/LinkCell'
 import { Columns } from '~/table/columns/common'
 import { useQueryTable } from '~/table/QueryTable'
@@ -59,6 +60,13 @@ export default function SiloIdpsTab() {
     [silo]
   )
 
+  useQuickActions(
+    () => [
+      { value: 'New provider', navGroup: 'Actions', action: pb.siloIdpsNew({ silo }) },
+    ],
+    [silo]
+  )
+
   const { table } = useQueryTable({
     query: siloIdpList(silo),
     columns,

app/pages/system/silos/SiloScimTab.tsx

@@ -26,6 +26,7 @@ import {
 } from '~/api'
 import { makeCrumb } from '~/hooks/use-crumbs'
 import { getSiloSelector, useSiloSelector } from '~/hooks/use-params'
+import { useQuickActions } from '~/hooks/use-quick-actions'
 import { confirmDelete } from '~/stores/confirm-delete'
 import { addToast } from '~/stores/toast'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
@@ -103,6 +104,20 @@ export default function SiloScimTab() {
 
   const [modalState, setModalState] = useState<ModalState>(false)
 
+  useQuickActions(
+    () =>
+      tokensResult.type === 'success'
+        ? [
+            {
+              value: 'Create token',
+              navGroup: 'Actions',
+              action: () => setModalState({ kind: 'create' }),
+            },
+          ]
+        : [],
+    [tokensResult.type]
+  )
+
   return (
     <>
       <CardBlock>