refactor: replace deprecated Popover in UserGroupsCell

aqandrew · aqandrew · commit 44e14acc4c30 · 2025-09-10T00:12:33.000Z
diff --git a/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx b/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx
@@ -4,13 +4,14 @@ import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import type { Group } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
-import {
-	Popover,
-	PopoverContent,
-	PopoverTrigger,
-} from "components/deprecated/Popover/Popover";
 import { OverflowY } from "components/OverflowY/OverflowY";
 import { TableCell } from "components/Table/Table";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "components/Tooltip/Tooltip";
 import type { FC } from "react";
 
 type GroupsCellProps = {
@@ -28,98 +29,84 @@ export const UserGroupsCell: FC<GroupsCellProps> = ({ userGroups }) => {
 				// the table UI
 				<em css={{ fontStyle: "normal" }}>N/A</em>
 			) : (
-				<Popover mode="hover">
-					<PopoverTrigger>
-						<button
-							css={{
-								cursor: "pointer",
-								backgroundColor: "transparent",
-								border: "none",
-								padding: 0,
-								color: "inherit",
-								lineHeight: "1",
-							}}
-							type="button"
-						>
-							<div className="flex flex-row gap-2 items-center">
-								<GroupIcon
-									css={{
-										width: "1rem",
-										height: "1rem",
-										opacity: userGroups.length > 0 ? 0.8 : 0.5,
-									}}
-								/>
-
-								<span>
-									{userGroups.length} Group{userGroups.length !== 1 && "s"}
-								</span>
-							</div>
-						</button>
-					</PopoverTrigger>
-
-					<PopoverContent
-						disableScrollLock
-						disableRestoreFocus
-						css={{
-							".MuiPaper-root": {
-								minWidth: "auto",
-							},
-						}}
-						anchorOrigin={{
-							vertical: "top",
-							horizontal: "center",
-						}}
-						transformOrigin={{
-							vertical: "bottom",
-							horizontal: "center",
-						}}
-					>
-						<OverflowY maxHeight={400}>
-							<List
-								component="ul"
+				<TooltipProvider>
+					<Tooltip delayDuration={0}>
+						<TooltipTrigger asChild>
+							<button
 								css={{
-									display: "flex",
-									flexFlow: "column nowrap",
-									fontSize: theme.typography.body2.fontSize,
-									padding: "4px 2px",
-									gap: 0,
+									cursor: "pointer",
+									backgroundColor: "transparent",
+									border: "none",
+									padding: 0,
+									color: "inherit",
+									lineHeight: "1",
 								}}
+								type="button"
 							>
-								{userGroups.map((group) => {
-									const groupName = group.display_name || group.name;
-									return (
-										<ListItem
-											key={group.id}
-											css={{
-												columnGap: 10,
-												alignItems: "center",
-											}}
-										>
-											<Avatar
-												size="sm"
-												variant="icon"
-												src={group.avatar_url}
-												fallback={groupName}
-											/>
+								<div className="flex flex-row gap-2 items-center">
+									<GroupIcon
+										css={{
+											width: "1rem",
+											height: "1rem",
+											opacity: userGroups.length > 0 ? 0.8 : 0.5,
+										}}
+									/>
+
+									<span>
+										{userGroups.length} Group{userGroups.length !== 1 && "s"}
+									</span>
+								</div>
+							</button>
+						</TooltipTrigger>
 
-											<span
+						<TooltipContent className="p-0 bg-surface-secondary border-surface-quaternary text-white">
+							<OverflowY maxHeight={400}>
+								<List
+									component="ul"
+									css={{
+										display: "flex",
+										flexFlow: "column nowrap",
+										fontSize: theme.typography.body2.fontSize,
+										padding: "4px 2px",
+										gap: 0,
+									}}
+								>
+									{userGroups.map((group) => {
+										const groupName = group.display_name || group.name;
+										return (
+											<ListItem
+												key={group.id}
 												css={{
-													whiteSpace: "nowrap",
-													textOverflow: "ellipsis",
-													overflow: "hidden",
-													lineHeight: 1,
-													margin: 0,
+													columnGap: 10,
+													alignItems: "center",
 												}}
 											>
-												{groupName || <em>N/A</em>}
-											</span>
-										</ListItem>
-									);
-								})}
-							</List>
-						</OverflowY>
-					</PopoverContent>
-				</Popover>
+												<Avatar
+													size="sm"
+													variant="icon"
+													src={group.avatar_url}
+													fallback={groupName}
+												/>
+
+												<span
+													css={{
+														whiteSpace: "nowrap",
+														textOverflow: "ellipsis",
+														overflow: "hidden",
+														lineHeight: 1,
+														margin: 0,
+													}}
+												>
+													{groupName || <em>N/A</em>}
+												</span>
+											</ListItem>
+										);
+									})}
+								</List>
+							</OverflowY>
+						</TooltipContent>
+					</Tooltip>
+				</TooltipProvider>
 			)}
 		</TableCell>
 	);
