Use real links in dropdown menus (#2343)

add DropdownMenu.LinkItem so we can use real links when possible

Author: david-crespo

app/components/TopBar.tsx

@@ -6,7 +6,6 @@
  * Copyright Oxide Computer Company
  */
 import React from 'react'
-import { useNavigate } from 'react-router-dom'
 
 import { navToLogin, useApiMutation } from '@oxide/api'
 import { DirectionDownIcon, Profile16Icon } from '@oxide/design-system/icons/react'
@@ -17,7 +16,6 @@ import { DropdownMenu } from '~/ui/lib/DropdownMenu'
 import { pb } from '~/util/path-builder'
 
 export function TopBar({ children }: { children: React.ReactNode }) {
-  const navigate = useNavigate()
   const logout = useApiMutation('logout', {
     onSuccess: () => navToLogin({ includeCurrent: false }),
   })
@@ -63,9 +61,7 @@ export function TopBar({ children }: { children: React.ReactNode }) {
                 </Button>
               </DropdownMenu.Trigger>
               <DropdownMenu.Content align="end" sideOffset={8}>
-                <DropdownMenu.Item onSelect={() => navigate(pb.profile())}>
-                  Settings
-                </DropdownMenu.Item>
+                <DropdownMenu.LinkItem to={pb.profile()}>Settings</DropdownMenu.LinkItem>
                 {loggedIn ? (
                   <DropdownMenu.Item onSelect={() => logout.mutate({})}>
                     Sign out

app/ui/lib/DropdownMenu.tsx

@@ -16,9 +16,14 @@ import {
 } from '@radix-ui/react-dropdown-menu'
 import cn from 'classnames'
 import { forwardRef, type ForwardedRef } from 'react'
+import { Link } from 'react-router-dom'
 
 type DivRef = ForwardedRef<HTMLDivElement>
 
+// remove possibility of disabling links for now. if we put it back, make sure
+// to forwardRef on LinkItem so the disabled tooltip can work
+type LinkitemProps = Omit<DropdownMenuItemProps, 'disabled'> & { to: string }
+
 export const DropdownMenu = {
   Root,
   Trigger,
@@ -38,4 +43,9 @@ export const DropdownMenu = {
   Item: forwardRef(({ className, ...props }: DropdownMenuItemProps, ref: DivRef) => (
     <Item {...props} className={cn('DropdownMenuItem ox-menu-item', className)} ref={ref} />
   )),
+  LinkItem: ({ className, children, to, ...props }: LinkitemProps) => (
+    <Item {...props} className={cn('DropdownMenuItem ox-menu-item', className)} asChild>
+      <Link to={to}>{children}</Link>
+    </Item>
+  ),
 }

app/ui/styles/components/menu-button.css

@@ -10,7 +10,7 @@
   @apply z-30 min-w-36 rounded border p-0 bg-raise border-secondary;
 
   & .DropdownMenuItem {
-    @apply block cursor-pointer select-none border-b py-2 pl-3 pr-6 text-left text-sans-md text-secondary border-secondary last-of-type:border-b-0;
+    @apply block cursor-pointer select-none border-b py-2 pl-3 pr-6 text-left text-sans-md text-secondary border-secondary last:border-b-0;
 
     &.destructive {
       @apply text-destructive;