Skip to content

Commit 6a37c49

Browse files
aqandrewaqandrew
committed
refactor: replace deprecated Popover in DeploymentDropdown
1 parent bda70b2 commit 6a37c49

File tree

1 file changed

+43
-58
lines changed

1 file changed

+43
-58
lines changed

‎site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx

Lines changed: 43 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
1+
import { css, type Interpolation, type Theme } from "@emotion/react";
22
import MenuItem from "@mui/material/MenuItem";
3+
import { PopoverClose } from "@radix-ui/react-popover";
34
import { Button } from "components/Button/Button";
45
import {
56
Popover,
67
PopoverContent,
78
PopoverTrigger,
8-
usePopover,
9-
} from "components/deprecated/Popover/Popover";
9+
} from "components/Popover/Popover";
1010
import { ChevronDownIcon } from "lucide-react";
1111
import { linkToAuditing } from "modules/navigation";
1212
import type { FC } from "react";
@@ -27,8 +27,6 @@ export const DeploymentDropdown: FC<DeploymentDropdownProps> = ({
2727
canViewConnectionLog,
2828
canViewHealth,
2929
}) => {
30-
const theme = useTheme();
31-
3230
if (
3331
!canViewAuditLog &&
3432
!canViewConnectionLog &&
@@ -41,22 +39,16 @@ export const DeploymentDropdown: FC<DeploymentDropdownProps> = ({
4139

4240
return (
4341
<Popover>
44-
<PopoverTrigger>
42+
<PopoverTrigger asChild>
4543
<Button variant="outline" size="lg">
4644
Admin settings
4745
<ChevronDownIcon className="text-content-primary !size-icon-xs" />
4846
</Button>
4947
</PopoverTrigger>
5048

5149
<PopoverContent
52-
horizontal="right"
53-
css={{
54-
".MuiPaper-root": {
55-
minWidth: "auto",
56-
width: 180,
57-
boxShadow: theme.shadows[6],
58-
},
59-
}}
50+
align="end"
51+
className="bg-surface-secondary border-surface-quaternary w-[180px] min-w-auto"
6052
>
6153
<DeploymentDropdownContent
6254
canViewDeployment={canViewDeployment}
@@ -77,61 +69,54 @@ const DeploymentDropdownContent: FC<DeploymentDropdownProps> = ({
7769
canViewHealth,
7870
canViewConnectionLog,
7971
}) => {
80-
const popover = usePopover();
81-
82-
const onPopoverClose = () => popover.setOpen(false);
83-
8472
return (
8573
<nav>
8674
{canViewDeployment && (
87-
<MenuItem
88-
component={NavLink}
89-
to="/deployment"
90-
css={styles.menuItem}
91-
onClick={onPopoverClose}
92-
>
93-
Deployment
94-
</MenuItem>
75+
<PopoverClose asChild>
76+
<MenuItem component={NavLink} to="/deployment" css={styles.menuItem}>
77+
Deployment
78+
</MenuItem>
79+
</PopoverClose>
9580
)}
9681
{canViewOrganizations && (
97-
<MenuItem
98-
component={NavLink}
99-
to="/organizations"
100-
css={styles.menuItem}
101-
onClick={onPopoverClose}
102-
>
103-
Organizations
104-
</MenuItem>
82+
<PopoverClose asChild>
83+
<MenuItem
84+
component={NavLink}
85+
to="/organizations"
86+
css={styles.menuItem}
87+
>
88+
Organizations
89+
</MenuItem>
90+
</PopoverClose>
10591
)}
10692
{canViewAuditLog && (
107-
<MenuItem
108-
component={NavLink}
109-
to={linkToAuditing}
110-
css={styles.menuItem}
111-
onClick={onPopoverClose}
112-
>
113-
Audit Logs
114-
</MenuItem>
93+
<PopoverClose asChild>
94+
<MenuItem
95+
component={NavLink}
96+
to={linkToAuditing}
97+
css={styles.menuItem}
98+
>
99+
Audit Logs
100+
</MenuItem>
101+
</PopoverClose>
115102
)}
116103
{canViewConnectionLog && (
117-
<MenuItem
118-
component={NavLink}
119-
to="/connectionlog"
120-
css={styles.menuItem}
121-
onClick={onPopoverClose}
122-
>
123-
Connection Logs
124-
</MenuItem>
104+
<PopoverClose asChild>
105+
<MenuItem
106+
component={NavLink}
107+
to="/connectionlog"
108+
css={styles.menuItem}
109+
>
110+
Connection Logs
111+
</MenuItem>
112+
</PopoverClose>
125113
)}
126114
{canViewHealth && (
127-
<MenuItem
128-
component={NavLink}
129-
to="/health"
130-
css={styles.menuItem}
131-
onClick={onPopoverClose}
132-
>
133-
Healthcheck
134-
</MenuItem>
115+
<PopoverClose asChild>
116+
<MenuItem component={NavLink} to="/health" css={styles.menuItem}>
117+
Healthcheck
118+
</MenuItem>
119+
</PopoverClose>
135120
)}
136121
</nav>
137122
);

0 commit comments

Comments
 (0)