From b317f9a83af0b18e4a777c1365458fce18f903d3 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Fri, 8 Apr 2022 15:58:51 -0300
Subject: [PATCH] fix: preferences routing and dropdown positioning (#930)

* fix: preferences routing

* fix: Fix popover miss correct position
---
 site/src/AppRouter.tsx                        |  3 +-
 .../components/Navbar/UserDropdown.test.tsx   |  2 +-
 site/src/components/Navbar/UserDropdown.tsx   | 34 +++++++++----------
 3 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
index bbcd2a7fd1..51a6895715 100644
--- a/site/src/AppRouter.tsx
+++ b/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 />} />
diff --git a/site/src/components/Navbar/UserDropdown.test.tsx b/site/src/components/Navbar/UserDropdown.test.tsx
index 0a058b45b9..44730fd31f 100644
--- a/site/src/components/Navbar/UserDropdown.test.tsx
+++ b/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")
   })
 })
diff --git a/site/src/components/Navbar/UserDropdown.tsx b/site/src/components/Navbar/UserDropdown.tsx
index 5b9d22b2ac..4b8bce5b2d 100644
--- a/site/src/components/Navbar/UserDropdown.tsx
+++ b/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>