coder · BrunoQuaresma · Oct 19, 2023 · Oct 17, 2023 · Oct 17, 2023 · Oct 17, 2023
diff --git a/site/.eslintrc.yaml b/site/.eslintrc.yaml
@@ -132,6 +132,10 @@ rules:
           message:
             "You should use the Alert component provided on
             components/Alert/Alert"
+        - name: "@mui/material/Popover"
+          message:
+            "You should use the Popover component provided on
+            components/Popover/Popover"
   no-unused-vars: "off"
   "object-curly-spacing": "off"
   react-hooks/exhaustive-deps: warn

diff --git a/site/build/tsconfig.tsbuildinfo b/site/build/tsconfig.tsbuildinfo
diff --git a/site/src/components/Dashboard/Navbar/UserDropdown/BorderedMenu.tsx b/site/src/components/Dashboard/Navbar/UserDropdown/BorderedMenu.tsx
diff --git a/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.stories.tsx b/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.stories.tsx
@@ -1,4 +1,4 @@
-import { MockUser } from "testHelpers/entities";
+import { MockBuildInfo, MockUser } from "testHelpers/entities";
 import { UserDropdown } from "./UserDropdown";
 import type { Meta, StoryObj } from "@storybook/react";
 
@@ -7,6 +7,13 @@ const meta: Meta<typeof UserDropdown> = {
   component: UserDropdown,
   args: {
     user: MockUser,
+    isDefaultOpen: true,
+    buildInfo: MockBuildInfo,
+    supportLinks: [
+      { icon: "docs", name: "Documentation", target: "" },
+      { icon: "bug", name: "Report a bug", target: "" },
+      { icon: "chat", name: "Join the Coder Discord", target: "" },
+    ],
   },
 };
 

diff --git a/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx b/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx
@@ -1,98 +1,95 @@
 import Badge from "@mui/material/Badge";
-import MenuItem from "@mui/material/MenuItem";
-import { useState, FC, PropsWithChildren, MouseEvent } from "react";
+import { FC, PropsWithChildren } from "react";
 import { colors } from "theme/colors";
 import * as TypesGen from "api/typesGenerated";
 import { navHeight } from "theme/constants";
-import { BorderedMenu } from "./BorderedMenu";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import { UserAvatar } from "components/UserAvatar/UserAvatar";
 import { UserDropdownContent } from "./UserDropdownContent";
 import { BUTTON_SM_HEIGHT } from "theme/theme";
 import { css } from "@emotion/react";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "components/Popover/Popover";
 
 export interface UserDropdownProps {
   user: TypesGen.User;
   buildInfo?: TypesGen.BuildInfoResponse;
   supportLinks?: TypesGen.LinkConfig[];
   onSignOut: () => void;
+  isDefaultOpen?: boolean;
 }
 
 export const UserDropdown: FC<PropsWithChildren<UserDropdownProps>> = ({
   buildInfo,
   user,
   supportLinks,
   onSignOut,
+  isDefaultOpen,
 }: UserDropdownProps) => {
-  const [anchorEl, setAnchorEl] = useState<HTMLElement | undefined>();
-
-  const handleDropdownClick = (ev: MouseEvent<HTMLLIElement>): void => {
-    setAnchorEl(ev.currentTarget);
-  };
-  const onPopoverClose = () => {
-    setAnchorEl(undefined);
-  };
-
   return (
-    <>
-      <MenuItem
-        css={(theme) => css`
-          height: ${navHeight}px;
-          padding: ${theme.spacing(1.5, 0)};
+    <Popover isDefaultOpen={isDefaultOpen}>
+      {(popover) => (
+        <>
+          <PopoverTrigger>
+            <button
+              css={(theme) => css`
+                background: none;
+                border: 0;
+                cursor: pointer;
+                height: ${navHeight}px;
+                padding: ${theme.spacing(1.5, 0)};
 
-          &:hover {
-            background-color: transparent;
-          }
-        `}
-        onClick={handleDropdownClick}
-        data-testid="user-dropdown-trigger"
-      >
-        <div
-          css={{
-            display: "flex",
-            alignItems: "center",
-            minWidth: 0,
-            maxWidth: 300,
-          }}
-        >
-          <Badge overlap="circular">
-            <UserAvatar
-              sx={{
-                width: BUTTON_SM_HEIGHT,
-                height: BUTTON_SM_HEIGHT,
-                fontSize: 16,
-              }}
-              username={user.username}
-              avatarURL={user.avatar_url}
-            />
-          </Badge>
-          <DropdownArrow color={colors.gray[6]} close={Boolean(anchorEl)} />
-        </div>
-      </MenuItem>
+                &:hover {
+                  background-color: transparent;
+                }
+              `}
+              data-testid="user-dropdown-trigger"
+            >
+              <div
+                css={{
+                  display: "flex",
+                  alignItems: "center",
+                  minWidth: 0,
+                  maxWidth: 300,
+                }}
+              >
+                <Badge overlap="circular">
+                  <UserAvatar
+                    sx={{
+                      width: BUTTON_SM_HEIGHT,
+                      height: BUTTON_SM_HEIGHT,
+                      fontSize: 16,
+                    }}
+                    username={user.username}
+                    avatarURL={user.avatar_url}
+                  />
+                </Badge>
+                <DropdownArrow color={colors.gray[6]} close={popover.isOpen} />
+              </div>
+            </button>
+          </PopoverTrigger>
 
-      <BorderedMenu
-        anchorEl={anchorEl}
-        open={Boolean(anchorEl)}
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "right",
-        }}
-        transformOrigin={{
-          vertical: "top",
-          horizontal: "right",
-        }}
-        marginThreshold={0}
-        variant="user-dropdown"
-        onClose={onPopoverClose}
-      >
-        <UserDropdownContent
-          user={user}
-          buildInfo={buildInfo}
-          supportLinks={supportLinks}
-          onPopoverClose={onPopoverClose}
-          onSignOut={onSignOut}
-        />
-      </BorderedMenu>
-    </>
+          <PopoverContent
+            horizontal="right"
+            css={(theme) => ({
+              ".MuiPaper-root": {
+                width: 260,
+                boxShadow: theme.shadows[6],
+              },
+            })}
+          >
+            <UserDropdownContent
+              user={user}
+              buildInfo={buildInfo}
+              supportLinks={supportLinks}
+              onSignOut={onSignOut}
+            />
+          </PopoverContent>
+        </>
+      )}
+    </Popover>
   );
 };
diff --git a/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdownContent.stories.tsx b/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdownContent.stories.tsx
diff --git a/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdownContent.test.tsx b/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdownContent.test.tsx
@@ -2,15 +2,14 @@ import { screen } from "@testing-library/react";
 import { MockUser } from "testHelpers/entities";
 import { render, waitForLoaderToBeRemoved } from "testHelpers/renderHelpers";
 import { Language, UserDropdownContent } from "./UserDropdownContent";
+import { Popover } from "components/Popover/Popover";
 
 describe("UserDropdownContent", () => {
   it("has the correct link for the account item", async () => {
     render(
-      <UserDropdownContent
-        user={MockUser}
-        onSignOut={jest.fn()}
-        onPopoverClose={jest.fn()}
-      />,
+      <Popover>
+        <UserDropdownContent user={MockUser} onSignOut={jest.fn()} />
+      </Popover>,
     );
     await waitForLoaderToBeRemoved();
 
@@ -25,11 +24,9 @@ describe("UserDropdownContent", () => {
   it("calls the onSignOut function", async () => {
     const onSignOut = jest.fn();
     render(
-      <UserDropdownContent
-        user={MockUser}
-        onSignOut={onSignOut}
-        onPopoverClose={jest.fn()}
-      />,
+      <Popover>
+        <UserDropdownContent user={MockUser} onSignOut={onSignOut} />
+      </Popover>,
     );
     await waitForLoaderToBeRemoved();
     screen.getByText(Language.signOutLabel).click();

diff --git a/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdownContent.tsx b/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdownContent.tsx
@@ -16,6 +16,7 @@ import {
   type Interpolation,
   type Theme,
 } from "@emotion/react";
+import { usePopover } from "components/Popover/Popover";
 
 export const Language = {
   accountLabel: "Account",
@@ -82,17 +83,21 @@ export interface UserDropdownContentProps {
   user: TypesGen.User;
   buildInfo?: TypesGen.BuildInfoResponse;
   supportLinks?: TypesGen.LinkConfig[];
-  onPopoverClose: () => void;
   onSignOut: () => void;
 }
 
 export const UserDropdownContent: FC<UserDropdownContentProps> = ({
   buildInfo,
   user,
   supportLinks,
-  onPopoverClose,
   onSignOut,
 }) => {
+  const popover = usePopover();
+
+  const onPopoverClose = () => {
+    popover.setIsOpen(false);
+  };
+
   return (
     <div>
       <Stack css={styles.info} spacing={0}>

diff --git a/site/src/components/HelpTooltip/HelpTooltip.tsx b/site/src/components/HelpTooltip/HelpTooltip.tsx
@@ -1,4 +1,6 @@
 import Link from "@mui/material/Link";
+// This is used as base for the main HelpTooltip component
+// eslint-disable-next-line no-restricted-imports -- Read above
 import Popover, { PopoverProps } from "@mui/material/Popover";
 import HelpIcon from "@mui/icons-material/HelpOutline";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";