Other dropdown links

app/components/MoreActionsMenu.tsx

@@ -29,13 +29,19 @@ export const MoreActionsMenu = ({ actions, label }: MoreActionsMenuProps) => {
       <DropdownMenu.Content align="end" className="mt-2">
         {actions.map((a) => (
           <Wrap key={a.label} when={!!a.disabled} with={<Tooltip content={a.disabled} />}>
-            <DropdownMenu.Item
-              className={a.className}
-              disabled={!!a.disabled}
-              onSelect={a.onActivate}
-            >
-              {a.label}
-            </DropdownMenu.Item>
+            {typeof a.onActivate === 'string' ? (
+              <DropdownMenu.LinkItem className={a.className} to={a.onActivate}>
+                {a.label}
+              </DropdownMenu.LinkItem>
+            ) : (
+              <DropdownMenu.Item
+                className={a.className}
+                disabled={!!a.disabled}
+                onSelect={a.onActivate}
+              >
+                {a.label}
+              </DropdownMenu.Item>
+            )}
           </Wrap>
         ))}
       </DropdownMenu.Content>

app/components/TopBarPicker.tsx

@@ -115,14 +115,17 @@ const TopBarPicker = (props: TopBarPickerProps) => {
               props.items.map(({ label, to }) => {
                 const isSelected = props.current === label
                 return (
-                  <DropdownMenu.Item asChild key={label}>
-                    <Link to={to} className={cn({ 'is-selected': isSelected })}>
-                      <span className="flex w-full items-center gap-2">
-                        {label}
-                        {isSelected && <Success12Icon className="-mr-3 block" />}
-                      </span>
-                    </Link>
-                  </DropdownMenu.Item>
+                  <DropdownMenu.LinkItem
+                    asChild
+                    key={label}
+                    to={to}
+                    className={cn({ 'is-selected': isSelected })}
+                  >
+                    <span className="flex w-full items-center gap-2">
+                      {label}
+                      {isSelected && <Success12Icon className="-mr-3 block" />}
+                    </span>
+                  </DropdownMenu.LinkItem>
                 )
               })
             ) : (

app/pages/project/instances/actions.tsx

@@ -6,7 +6,6 @@
  * Copyright Oxide Computer Company
  */
 import { useCallback } from 'react'
-import { useNavigate } from 'react-router-dom'
 
 import { instanceCan, useApiMutation, type Instance } from '@oxide/api'
 
@@ -32,8 +31,6 @@ export const useMakeInstanceActions = (
   projectSelector: { project: string },
   options: Options = {}
 ): MakeActions<Instance> => {
-  const navigate = useNavigate()
-
   // if you also pass onSuccess to mutate(), this one is not overridden — this
   // one runs first, then the one passed to mutate()
   const opts = { onSuccess: options.onSuccess }
@@ -109,9 +106,7 @@ export const useMakeInstanceActions = (
         },
         {
           label: 'View serial console',
-          onActivate() {
-            navigate(pb.serialConsole(instanceSelector))
-          },
+          onActivate: pb.serialConsole(instanceSelector),
         },
         {
           label: 'Delete',
@@ -132,6 +127,6 @@ export const useMakeInstanceActions = (
         },
       ]
     },
-    [projectSelector, deleteInstance, navigate, rebootInstance, startInstance, stopInstance]
+    [projectSelector, deleteInstance, rebootInstance, startInstance, stopInstance]
   )
 }

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

@@ -7,7 +7,7 @@
  */
 import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table'
 import { useMemo } from 'react'
-import { Outlet, useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
+import { Outlet, type LoaderFunctionArgs } from 'react-router-dom'
 import * as R from 'remeda'
 
 import {
@@ -112,8 +112,6 @@ export function VpcFirewallRulesTab() {
   })
   const rules = useMemo(() => R.sortBy(data.rules, (r) => r.priority), [data])
 
-  const navigate = useNavigate()
-
   const updateRules = useApiMutation('vpcFirewallRulesUpdate', {
     onSuccess() {
       queryClient.invalidateQueries('vpcFirewallRulesView')
@@ -135,15 +133,11 @@ export function VpcFirewallRulesTab() {
       getActionsCol((rule: VpcFirewallRule) => [
         {
           label: 'Edit',
-          onActivate() {
-            navigate(pb.vpcFirewallRuleEdit({ ...vpcSelector, rule: rule.name }))
-          },
+          onActivate: pb.vpcFirewallRuleEdit({ ...vpcSelector, rule: rule.name }),
         },
         {
           label: 'Clone',
-          onActivate() {
-            navigate(pb.vpcFirewallRuleClone({ ...vpcSelector, rule: rule.name }))
-          },
+          onActivate: pb.vpcFirewallRuleClone({ ...vpcSelector, rule: rule.name }),
         },
         {
           label: 'Delete',
@@ -160,7 +154,7 @@ export function VpcFirewallRulesTab() {
         },
       ]),
     ]
-  }, [navigate, rules, updateRules, vpcSelector])
+  }, [rules, updateRules, vpcSelector])
 
   const table = useReactTable({ columns, data: rules, getCoreRowModel: getCoreRowModel() })
 

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

@@ -7,7 +7,7 @@
  */
 import { createColumnHelper } from '@tanstack/react-table'
 import { useCallback, useMemo } from 'react'
-import { Outlet, useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
+import { Outlet, type LoaderFunctionArgs } from 'react-router-dom'
 
 import {
   apiQueryClient,
@@ -49,14 +49,11 @@ export function VpcSubnetsTab() {
     },
   })
 
-  const navigate = useNavigate()
-
   const makeActions = useCallback(
     (subnet: VpcSubnet): MenuAction[] => [
       {
         label: 'Edit',
-        onActivate: () =>
-          navigate(pb.vpcSubnetsEdit({ ...vpcSelector, subnet: subnet.name })),
+        onActivate: pb.vpcSubnetsEdit({ ...vpcSelector, subnet: subnet.name }),
       },
       // TODO: only show if you have permission to do this
       {
@@ -67,7 +64,7 @@ export function VpcSubnetsTab() {
         }),
       },
     ],
-    [navigate, deleteSubnet, vpcSelector]
+    [deleteSubnet, vpcSelector]
   )
 
   const columns = useMemo(

app/table/columns/action-col.tsx

@@ -20,7 +20,8 @@ export type MakeActions<Item> = (item: Item) => Array<MenuAction>
 
 export type MenuAction = {
   label: string
-  onActivate: () => void
+  /** If it's a string, it's a URL and we should make it a LinkItem */
+  onActivate: string | (() => void)
   disabled?: false | React.ReactNode
   className?: string
 }
@@ -81,16 +82,28 @@ export const getActionsCol = <TData extends Record<string, unknown>>(
                     with={<Tooltip content={action.disabled} />}
                     key={kebabCase(`action-${action.label}`)}
                   >
-                    <DropdownMenu.Item
-                      className={cn(action.className, {
-                        destructive:
-                          action.label.toLowerCase() === 'delete' && !action.disabled,
-                      })}
-                      onSelect={action.onActivate}
-                      disabled={!!action.disabled}
-                    >
-                      {action.label}
-                    </DropdownMenu.Item>
+                    {typeof action.onActivate === 'string' ? (
+                      <DropdownMenu.LinkItem
+                        className={cn(action.className, {
+                          destructive:
+                            action.label.toLowerCase() === 'delete' && !action.disabled,
+                        })}
+                        to={action.onActivate}
+                      >
+                        {action.label}
+                      </DropdownMenu.LinkItem>
+                    ) : (
+                      <DropdownMenu.Item
+                        className={cn(action.className, {
+                          destructive:
+                            action.label.toLowerCase() === 'delete' && !action.disabled,
+                        })}
+                        onSelect={action.onActivate}
+                        disabled={!!action.disabled}
+                      >
+                        {action.label}
+                      </DropdownMenu.Item>
+                    )}
                   </Wrap>
                 )
               })}