refactor: update UserRoleCell to use Popover

coder · Parkreiner · Oct 19, 2023 · Oct 15, 2023 · Oct 15, 2023 · Oct 15, 2023
commit d2cc9ccec44c5e3a5230efac82f09a897edbf721
diff --git a/site/src/components/Popover/Popover.tsx b/site/src/components/Popover/Popover.tsx
@@ -62,10 +62,7 @@ export const usePopover = () => {
   return context;
 };
 
-export const PopoverTrigger = (props: {
-  children: TriggerElement;
-  hover?: boolean;
-}) => {
+export const PopoverTrigger = (props: { children: TriggerElement }) => {
   const popover = usePopover();
 
   const clickProps = {
@@ -118,10 +115,10 @@ export const PopoverContent = (
     <MuiPopover
       disablePortal
       css={(theme) => ({
-        // When it is on hover mode, and the moude is moving from the trigger to
+        // When it is on hover mode, and the mode is moving from the trigger to
         // the popover, if there is any space, the popover will be closed. I
         // found this is a limitation on how MUI structured the component. It is
-        // not a big issue for now but we can reavaluate it in the future.
+        // not a big issue for now but we can re-evaluate it in the future.
         marginTop: hoverMode ? undefined : theme.spacing(1),
         pointerEvents: hoverMode ? "none" : undefined,
         "& .MuiPaper-root": {

diff --git a/site/src/pages/UsersPage/UsersTable/UserRoleCell.tsx b/site/src/pages/UsersPage/UsersTable/UserRoleCell.tsx
@@ -13,15 +13,19 @@
  * went with a simpler design. If we decide we really do need to display the
  * users like that, though, know that it will be painful
  */
-import { useState } from "react";
 import { useTheme } from "@emotion/react";
 import { type User, type Role } from "api/typesGenerated";
 
 import { EditRolesButton } from "./EditRolesButton";
 import { Pill } from "components/Pill/Pill";
 import TableCell from "@mui/material/TableCell";
 import Stack from "@mui/material/Stack";
-import Popover from "@mui/material/Popover";
+
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from "components/Popover/Popover";
 
 type UserRoleCellProps = {
   canEditUsers: boolean;
@@ -92,41 +96,31 @@ type OverflowRolePillProps = {
 function OverflowRolePill({ roles }: OverflowRolePillProps) {
   const theme = useTheme();
 
-  // 2023-10-18 - Temp code - Delete once new Popover component is ready
-  const [anchorEl, setAnchorEl] = useState<HTMLDivElement | null>(null);
-
   return (
     <>
-      <div
-        onPointerEnter={(event) => setAnchorEl(event.currentTarget)}
-        onPointerLeave={() => setAnchorEl(null)}
-      >
-        <Pill
-          text={`+${roles.length} more`}
-          css={{
-            backgroundColor: theme.palette.background.paperLight,
-            borderColor: theme.palette.divider,
-          }}
-        />
-      </div>
-
-      <Popover
-        aria-haspopup
-        anchorEl={anchorEl}
-        open={anchorEl !== null}
-        anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
-        disableScrollLock
-        disablePortal
-        css={{ pointerEvents: "none" }}
-      >
-        <div
+      <Popover mode="hover">
+        <PopoverTrigger>
+          <Pill
+            text={`+${roles.length} more`}
+            css={{
+              backgroundColor: theme.palette.background.paperLight,
+              borderColor: theme.palette.divider,
+            }}
+          />
+        </PopoverTrigger>
+
+        <PopoverContent
+          disableRestoreFocus
+          disableScrollLock
           css={{
-            display: "flex",
-            flexFlow: "row wrap",
-            columnGap: theme.spacing(1),
-            rowGap: theme.spacing(1.5),
-            padding: theme.spacing(1.5, 2),
-            alignContent: "space-around",
+            ".MuiPaper-root": {
+              display: "flex",
+              flexFlow: "row wrap",
+              columnGap: theme.spacing(1),
+              rowGap: theme.spacing(1.5),
+              padding: theme.spacing(1.5, 2),
+              alignContent: "space-around",
+            },
           }}
         >
           {roles.map((role) => (
@@ -139,7 +133,7 @@ function OverflowRolePill({ roles }: OverflowRolePillProps) {
               }}
             />
           ))}
-        </div>
+        </PopoverContent>
       </Popover>
     </>
   );