Thanks to visit codestin.com
Credit goes to github.com

Skip to content

feat(site/src/modules/dashboard/Navbar): replace proxy emoji with latency radio icon in trigger #28128

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
tracyjohnsonux merged 12 commits into from
Aug 17, 2026
Merged

feat(site/src/modules/dashboard/Navbar): replace proxy emoji with latency radio icon in trigger #28128

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
40dc961
feat(site/src/modules/dashboard/Navbar): replace proxy emoji with lat…
tracyjohnsonux Aug 13, 2026
3fd39bd
chore(site/src/modules/dashboard/Navbar): right-align ProxyMenu story…
tracyjohnsonux Aug 13, 2026
529e478
feat(site/src/modules/dashboard/Navbar): use latency radio icon in mo…
tracyjohnsonux Aug 13, 2026
732942e
Merge branch 'main' into latency-dropdown-radio-icon
tracyjohnsonux Aug 13, 2026
c1a5ea3
fix(site/src/modules/dashboard/Navbar): address review feedback on la…
tracyjohnsonux Aug 13, 2026
4c229e9
fix(site/src/modules/dashboard/Navbar): announce unavailable latency …
tracyjohnsonux Aug 13, 2026
0ceeed3
fix(site/src/modules/dashboard/Navbar): gate mobile latency color ove…
tracyjohnsonux Aug 13, 2026
b49a283
Merge branch 'main' into latency-dropdown-radio-icon
tracyjohnsonux Aug 13, 2026
0307020
Merge branch 'main' into latency-dropdown-radio-icon
tracyjohnsonux Aug 15, 2026
5a7db38
Merge branch 'main' into latency-dropdown-radio-icon
tracyjohnsonux Aug 17, 2026
0d4a6d2
Merge branch 'main' into latency-dropdown-radio-icon
tracyjohnsonux Aug 17, 2026
4ed77e7
Merge branch 'main' into latency-dropdown-radio-icon
tracyjohnsonux Aug 17, 2026
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
79 changes: 64 additions & 15 deletions site/src/modules/dashboard/Navbar/MobileMenu.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,22 @@ import {
} from "#/testHelpers/entities";
import { MobileMenu } from "./MobileMenu";

const defaultProxyContextValue = {
latenciesLoaded: true,
proxy: {
preferredPathAppURL: "",
preferredWildcardHostname: "",
proxy: MockPrimaryWorkspaceProxy,
},
isLoading: false,
isFetched: true,
setProxy: fn(),
clearProxy: fn(),
refetchProxyLatencies: fn(),
proxyLatencies: MockProxyLatencies,
proxies: MockWorkspaceProxies,
};

const meta: Meta<typeof MobileMenu> = {
title: "modules/dashboard/MobileMenu",
parameters: {
Expand All @@ -21,21 +37,7 @@ const meta: Meta<typeof MobileMenu> = {
},
component: MobileMenu,
args: {
proxyContextValue: {
latenciesLoaded: true,
proxy: {
preferredPathAppURL: "",
preferredWildcardHostname: "",
proxy: MockPrimaryWorkspaceProxy,
},
isLoading: false,
isFetched: true,
setProxy: fn(),
clearProxy: fn(),
refetchProxyLatencies: fn(),
proxyLatencies: MockProxyLatencies,
proxies: MockWorkspaceProxies,
},
proxyContextValue: defaultProxyContextValue,
user: MockUserOwner,
supportLinks: MockSupportLinks,
onSignOut: fn(),
Expand Down Expand Up @@ -105,6 +107,53 @@ export const ProxySettings: Story = {
},
};

export const ProxyWarningLatency: Story = {
args: {
proxyContextValue: {
...defaultProxyContextValue,
proxyLatencies: {
...MockProxyLatencies,
[MockPrimaryWorkspaceProxy.id]: {
accurate: true,
latencyMS: 224,
at: new Date(),
nextHopProtocol: "h2",
},
},
},
},
};

export const ProxyCriticalLatency: Story = {
args: {
proxyContextValue: {
...defaultProxyContextValue,
proxyLatencies: {
...MockProxyLatencies,
[MockPrimaryWorkspaceProxy.id]: {
accurate: true,
latencyMS: 471,
at: new Date(),
nextHopProtocol: "h2",
},
},
},
},
};

export const ProxyNoLatency: Story = {
args: {
proxyContextValue: {
...defaultProxyContextValue,
proxyLatencies: Object.fromEntries(
Object.entries(MockProxyLatencies).filter(
([id]) => id !== MockPrimaryWorkspaceProxy.id,
),
),
},
},
};

export const UserSettings: Story = {
play: async ({ canvasElement }) => {
const user = userEvent.setup();
Expand Down
19 changes: 14 additions & 5 deletions site/src/modules/dashboard/Navbar/MobileMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {
ChevronRightIcon,
CircleHelpIcon,
MenuIcon,
RadioIcon,
XIcon,
} from "lucide-react";
import { type FC, useState } from "react";
Expand All @@ -26,6 +27,7 @@ import { ExternalImage } from "#/components/ExternalImage/ExternalImage";
import { Latency } from "#/components/Latency/Latency";
import type { ProxyContextValue } from "#/contexts/ProxyContext";
import { cn } from "#/utils/cn";
import { getLatencyColor } from "#/utils/latency";
import {
AdminSettingsItems,
type AdminSettingsPermissions,
Expand Down Expand Up @@ -132,12 +134,19 @@ const ProxySettingsSub: FC<ProxySettingsSubProps> = ({ proxyContextValue }) => {
>
Workspace proxy settings:
<span className="leading-none flex items-center gap-1">
<ExternalImage
className="size-4"
src={selectedProxy.icon_url}
alt={selectedProxy.name}
<span className="sr-only">
Latency for {selectedProxy.display_name || selectedProxy.name}
</span>
<RadioIcon
Comment thread
tracyjohnsonux marked this conversation as resolved.
Comment thread
tracyjohnsonux marked this conversation as resolved.
aria-hidden="true"
className={cn("size-4", getLatencyColor(latency?.latencyMS))}
/>
<Latency
className={
latency?.latencyMS ? "text-content-primary" : undefined
}
latency={latency?.latencyMS}
/>
{latency && <Latency latency={latency.latencyMS} />}
</span>
<ChevronRightIcon
className={cn("ml-auto", open ? "rotate-90" : "")}
Expand Down
51 changes: 50 additions & 1 deletion site/src/modules/dashboard/Navbar/ProxyMenu.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,9 @@ const meta: Meta<typeof ProxyMenu> = {
decorators: [
(Story) => (
<AuthProvider>
<Story />
<div className="flex justify-end">
<Story />
</div>
</AuthProvider>
),
withDesktopViewport,
Expand All @@ -103,6 +105,53 @@ type Story = StoryObj<typeof ProxyMenu>;

export const Closed: Story = {};

export const ClosedWarningLatency: Story = {
Comment thread
tracyjohnsonux marked this conversation as resolved.
args: {
proxyContextValue: {
...defaultProxyContextValue,
proxyLatencies: {
...MockProxyLatencies,
[MockWorkspaceProxies[0].id]: {
accurate: true,
latencyMS: 224,
Comment thread
tracyjohnsonux marked this conversation as resolved.
at: new Date(),
nextHopProtocol: "h2",
},
},
},
},
};

export const ClosedCriticalLatency: Story = {
args: {
proxyContextValue: {
...defaultProxyContextValue,
proxyLatencies: {
...MockProxyLatencies,
[MockWorkspaceProxies[0].id]: {
accurate: true,
latencyMS: 471,
at: new Date(),
nextHopProtocol: "h2",
},
},
},
},
};

export const ClosedNoLatency: Story = {
args: {
proxyContextValue: {
...defaultProxyContextValue,
proxyLatencies: Object.fromEntries(
Object.entries(MockProxyLatencies).filter(
([id]) => id !== MockWorkspaceProxies[0].id,
),
),
},
},
};

export const Opened: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
Expand Down
19 changes: 14 additions & 5 deletions site/src/modules/dashboard/Navbar/ProxyMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { RadioIcon } from "lucide-react";
import { type FC, useState } from "react";
import { Link } from "react-router";
import { toast } from "sonner";
Expand All @@ -19,6 +20,7 @@ import { Latency } from "#/components/Latency/Latency";
import { Skeleton } from "#/components/Skeleton/Skeleton";
import type { ProxyContextValue } from "#/contexts/ProxyContext";
import { useAuthenticated } from "#/hooks/useAuthenticated";
import { getLatencyColor } from "#/utils/latency";
import { sortProxiesByLatency } from "./proxyUtils";

interface ProxyMenuProps {
Expand Down Expand Up @@ -80,14 +82,21 @@ export const ProxyMenu: FC<ProxyMenuProps> = ({ proxyContextValue }) => {

{selectedProxy ? (
Comment thread
tracyjohnsonux marked this conversation as resolved.
<>
<ExternalImage
// Empty alt text used because we don't want to double up on
// screen reader announcements from visually-hidden span
alt=""
src={selectedProxy.icon_url}
<RadioIcon
Comment thread
tracyjohnsonux marked this conversation as resolved.
aria-hidden="true"
className={getLatencyColor(
proxyLatencyLoading(selectedProxy)
? undefined
: latencies?.[selectedProxy.id]?.latencyMS,
)}
/>

<Latency
Comment thread
tracyjohnsonux marked this conversation as resolved.
className={
latencies?.[selectedProxy.id]?.latencyMS
? "text-content-primary"
: undefined
}
latency={latencies?.[selectedProxy.id]?.latencyMS}
isLoading={proxyLatencyLoading(selectedProxy)}
/>
Expand Down
Loading