fix: preferences routing and dropdown positioning (#930)

* fix: preferences routing

* fix: Fix popover miss correct position

site/src/AppRouter.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { Navigate, Route, Routes } from "react-router-dom"
+import { Route, Routes } from "react-router-dom"
 import { AuthAndNav, RequireAuth } from "./components"
 import { PreferencesLayout } from "./components/Preferences/Layout"
 import { IndexPage } from "./pages"
@@ -73,7 +73,6 @@ export const AppRouter: React.FC = () => (
       </Route>
 
       <Route path="preferences" element={<PreferencesLayout />}>
-        <Route index element={<Navigate to="account" />} />
         <Route path="account" element={<PreferencesAccountPage />} />
         <Route path="security" element={<PreferencesSecurityPage />} />
         <Route path="ssh-keys" element={<PreferencesSSHKeysPage />} />

site/src/components/Navbar/UserDropdown.test.tsx

@@ -50,6 +50,6 @@ describe("UserDropdown", () => {
       throw new Error("Anchor tag not found for the account menu item")
     }
 
-    expect(link.getAttribute("href")).toBe("/preferences")
+    expect(link.getAttribute("href")).toBe("/preferences/account")
   })
 })

site/src/components/Navbar/UserDropdown.tsx

@@ -28,8 +28,8 @@ export interface UserDropdownProps {
 
 export const UserDropdown: React.FC<UserDropdownProps> = ({ user, onSignOut }: UserDropdownProps) => {
   const styles = useStyles()
-
   const [anchorEl, setAnchorEl] = useState<HTMLElement | undefined>()
+
   const handleDropdownClick = (ev: React.MouseEvent<HTMLLIElement>): void => {
     setAnchorEl(ev.currentTarget)
   }
@@ -39,20 +39,18 @@ export const UserDropdown: React.FC<UserDropdownProps> = ({ user, onSignOut }: U
 
   return (
     <>
-      <div>
-        <MenuItem onClick={handleDropdownClick} data-testid="user-dropdown-trigger">
-          <div className={styles.inner}>
-            <Badge overlap="circle">
-              <UserAvatar username={user.username} />
-            </Badge>
-            {anchorEl ? (
-              <KeyboardArrowUp className={`${styles.arrowIcon} ${styles.arrowIconUp}`} />
-            ) : (
-              <KeyboardArrowDown className={styles.arrowIcon} />
-            )}
-          </div>
-        </MenuItem>
-      </div>
+      <MenuItem onClick={handleDropdownClick} data-testid="user-dropdown-trigger">
+        <div className={styles.inner}>
+          <Badge overlap="circle">
+            <UserAvatar username={user.username} />
+          </Badge>
+          {anchorEl ? (
+            <KeyboardArrowUp className={`${styles.arrowIcon} ${styles.arrowIconUp}`} />
+          ) : (
+            <KeyboardArrowDown className={styles.arrowIcon} />
+          )}
+        </div>
+      </MenuItem>
 
       <BorderedMenu
         anchorEl={anchorEl}
@@ -75,8 +73,8 @@ export const UserDropdown: React.FC<UserDropdownProps> = ({ user, onSignOut }: U
 
           <Divider />
 
-          <Link to="/preferences" className={styles.link}>
-            <MenuItem className={styles.menuItem} onClick={handleDropdownClick}>
+          <Link to="/preferences/account" className={styles.link}>
+            <MenuItem className={styles.menuItem} onClick={onPopoverClose}>
               <ListItemIcon className={styles.icon}>
                 <AccountIcon />
               </ListItemIcon>
@@ -85,7 +83,7 @@ export const UserDropdown: React.FC<UserDropdownProps> = ({ user, onSignOut }: U
           </Link>
 
           <a href="https://coder.com/docs" target="_blank" rel="noreferrer" className={styles.link}>
-            <MenuItem className={styles.menuItem} onClick={handleDropdownClick}>
+            <MenuItem className={styles.menuItem} onClick={onPopoverClose}>
               <ListItemIcon className={styles.icon}>
                 <DocsIcon />
               </ListItemIcon>