Skip to content

refactor(site): adjust the proxy menu design #8409

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 10, 2023
Merged

refactor(site): adjust the proxy menu design #8409

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a655e31
refactor(site): adjust the proxy menu design
BrunoQuaresma Jul 10, 2023
72a4caf
Remove unused imports
BrunoQuaresma Jul 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 31 additions & 30 deletions site/src/components/Navbar/NavbarView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,7 @@ import Skeleton from "@mui/material/Skeleton"
import { BUTTON_SM_HEIGHT } from "theme/theme"
import { ProxyStatusLatency } from "components/ProxyStatusLatency/ProxyStatusLatency"
import { usePermissions } from "hooks/usePermissions"
import {
HelpTooltip,
HelpTooltipText,
HelpTooltipTitle,
} from "components/Tooltips/HelpTooltip"
import Typography from "@mui/material/Typography"

export const USERS_LINK = `/users?filter=${encodeURIComponent("status:active")}`

Expand Down Expand Up @@ -191,7 +187,6 @@ export const NavbarView: FC<NavbarViewProps> = ({
const ProxyMenu: FC<{ proxyContextValue: ProxyContextValue }> = ({
proxyContextValue,
}) => {
const styles = useStyles()
const buttonRef = useRef<HTMLButtonElement>(null)
const [isOpen, setIsOpen] = useState(false)
const [refetchDate, setRefetchDate] = useState<Date>()
Expand Down Expand Up @@ -275,33 +270,39 @@ const ProxyMenu: FC<{ proxyContextValue: ProxyContextValue }> = ({
onClose={closeMenu}
sx={{ "& .MuiMenu-paper": { py: 1 } }}
>
<MenuItem
sx={[
{ fontSize: 14 },
{ "&:hover": { backgroundColor: "transparent" } },
{ wordWrap: "break-word" },
{ inlineSize: "200px" },
{ whiteSpace: "normal" },
{ textAlign: "center" },
]}
onClick={(e) => {
// Stop the menu from closing
e.stopPropagation()
<Box
sx={{
w: "100%",
fontSize: 14,
padding: 2,
maxWidth: "320px",
lineHeight: "140%",
}}
>
<div>
<Typography
component="h4"
sx={{
fontSize: "inherit",
fontWeight: 600,
lineHeight: "inherit",
margin: 0,
}}
>
Reduce workspace latency by selecting the region nearest you.
{/* This was always on a newline below the text. This puts it on the same line.
It still doesn't look great, but it is marginally better. */}
<HelpTooltip buttonClassName={styles.displayInitial}>
<HelpTooltipTitle>Workspace Proxy Selection</HelpTooltipTitle>
<HelpTooltipText>
Only applies to web connections. Local ssh connections will
automatically select the nearest region based on latency.
</HelpTooltipText>
</HelpTooltip>
</div>
</MenuItem>
</Typography>
<Typography
component="p"
sx={{
fontSize: "inherit",
color: (theme) => theme.palette.text.secondary,
lineHeight: "inherit",
marginTop: 0.5,
}}
>
* Only applies to web connections. Local ssh connections will
automatically select the nearest region based on latency.
</Typography>
</Box>
<Divider sx={{ borderColor: (theme) => theme.palette.divider }} />
{proxyContextValue.proxies?.map((proxy) => (
<MenuItem
Expand Down
3 changes: 2 additions & 1 deletion site/src/components/ProxyStatusLatency/ProxyStatusLatency.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,11 @@ export const ProxyStatusLatency: FC<{
return (
<Tooltip title="Loading latency...">
<CircularProgress
size="14px"
size={14}
sx={{
// Always use the no latency color for loading.
color: getLatencyColor(theme, undefined),
marginLeft: "auto",
}}
/>
</Tooltip>
Expand Down