diff --git a/site/src/components/DropdownMenu/DropdownMenu.tsx b/site/src/components/DropdownMenu/DropdownMenu.tsx index 4aa4dbd7e0..96b1c38c05 100644 --- a/site/src/components/DropdownMenu/DropdownMenu.tsx +++ b/site/src/components/DropdownMenu/DropdownMenu.tsx @@ -7,7 +7,7 @@ */ import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"; -import { Check, ChevronRight, Circle } from "lucide-react"; +import { Check, ChevronRight } from "lucide-react"; import { type ComponentPropsWithoutRef, type ElementRef, @@ -26,7 +26,7 @@ const _DropdownMenuPortal = DropdownMenuPrimitive.Portal; const _DropdownMenuSub = DropdownMenuPrimitive.Sub; -const _DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup; +export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup; const DropdownMenuSubTrigger = forwardRef< ElementRef, @@ -154,7 +154,7 @@ const DropdownMenuCheckboxItem = forwardRef< DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName; -const DropdownMenuRadioItem = forwardRef< +export const DropdownMenuRadioItem = forwardRef< ElementRef, ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( @@ -162,19 +162,20 @@ const DropdownMenuRadioItem = forwardRef< ref={ref} className={cn( [ - "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors", + "relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none transition-colors", "focus:bg-surface-secondary focus:text-content-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50", + "data-[state=checked]:bg-surface-secondary data-[state=checked]:text-content-primary", ], className, )} {...props} > - + {children} + - + - {children} )); DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName; diff --git a/site/src/modules/dashboard/Navbar/ProxyMenu.tsx b/site/src/modules/dashboard/Navbar/ProxyMenu.tsx index cb20f2bae1..83e311ab02 100644 --- a/site/src/modules/dashboard/Navbar/ProxyMenu.tsx +++ b/site/src/modules/dashboard/Navbar/ProxyMenu.tsx @@ -1,19 +1,24 @@ -import { useTheme } from "@emotion/react"; -import Divider from "@mui/material/Divider"; -import Menu from "@mui/material/Menu"; -import MenuItem from "@mui/material/MenuItem"; import Skeleton from "@mui/material/Skeleton"; import { visuallyHidden } from "@mui/utils"; import type * as TypesGen from "api/typesGenerated"; import { Abbr } from "components/Abbr/Abbr"; import { Button } from "components/Button/Button"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuRadioGroup, + DropdownMenuRadioItem, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "components/DropdownMenu/DropdownMenu"; import { displayError } from "components/GlobalSnackbar/utils"; import { Latency } from "components/Latency/Latency"; import type { ProxyContextValue } from "contexts/ProxyContext"; import { useAuthenticated } from "hooks"; import { ChevronDownIcon } from "lucide-react"; -import { type FC, useRef, useState } from "react"; -import { useNavigate } from "react-router"; +import { type FC, useState } from "react"; +import { Link } from "react-router"; import { sortProxiesByLatency } from "./proxyUtils"; interface ProxyMenuProps { @@ -21,14 +26,11 @@ interface ProxyMenuProps { } export const ProxyMenu: FC = ({ proxyContextValue }) => { - const theme = useTheme(); - const buttonRef = useRef(null); - const [isOpen, setIsOpen] = useState(false); + const [open, setOpen] = useState(false); const [refetchDate, setRefetchDate] = useState(); const selectedProxy = proxyContextValue.proxy.proxy; const refreshLatencies = proxyContextValue.refetchProxyLatencies; - const closeMenu = () => setIsOpen(false); - const navigate = useNavigate(); + const closeMenu = () => setOpen(false); const latencies = proxyContextValue.proxyLatencies; const isLoadingLatencies = Object.keys(latencies).length === 0; const isLoading = proxyContextValue.isLoading || isLoadingLatencies; @@ -69,163 +71,121 @@ export const ProxyMenu: FC = ({ proxyContextValue }) => { } return ( - <> - - - - {proxyContextValue.proxies && - proxyContextValue.proxies.length > 1 && [ -
-

- Select a region nearest to you -

- -

- Workspace proxies improve terminal and web app connections to - workspaces. This does not apply to{" "} - - CLI - {" "} - connections. A region must be manually selected, otherwise the - default primary region will be used. -

-
, - - , - ]} - - {proxyContextValue.proxies && - sortProxiesByLatency(proxyContextValue.proxies, latencies).map( - (proxy) => ( - { - if (!proxy.healthy) { - displayError("Please select a healthy workspace proxy."); - closeMenu(); - return; - } - - proxyContextValue.setProxy(proxy); - closeMenu(); - }} - > -
-
- -
- - {proxy.display_name} - - -
- - ), + + + ) : ( + "Select Proxy" )} - - - {Boolean(permissions.editWorkspaceProxies) && ( - { - navigate("/deployment/workspace-proxies"); - }} + + + + + {proxyContextValue.proxies && proxyContextValue.proxies.length > 1 && ( + - Proxy settings - +
+ Select a region nearest to you +
+
+ Workspace proxies improve terminal and web app connections to + workspaces. This does not apply to{" "} + + CLI + {" "} + connections. A region must be manually selected, otherwise the + default primary region will be used. +
+ )} - 1 && ( + + )} + + {proxyContextValue.proxies && ( + + {sortProxiesByLatency(proxyContextValue.proxies, latencies).map( + (proxy) => ( + { + e.preventDefault(); + if (!proxy.healthy) { + displayError("Please select a healthy workspace proxy."); + closeMenu(); + return; + } + + proxyContextValue.setProxy(proxy); + closeMenu(); + }} + > +
+
+ +
+ + {proxy.display_name} + + +
+ + ), + )} + + )} + + + + {Boolean(permissions.editWorkspaceProxies) && ( + + + Proxy settings + + + )} + + { - // Stop the menu from closing - e.stopPropagation(); - // Refresh the latencies. + e.preventDefault(); const refetchDate = refreshLatencies(); setRefetchDate(refetchDate); }} > - Refresh Latencies - - - + Refresh latencies + + + ); };