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

Skip to content

Commit 5f88902

Browse files
committed
Do not render select helper when having single proxy
1 parent 14c1a0b commit 5f88902

File tree

2 files changed

+122
-42
lines changed

2 files changed

+122
-42
lines changed
Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import { fn, userEvent, within } from "@storybook/test";
3+
import { getAuthorizationKey } from "api/queries/authCheck";
4+
import { AuthProvider } from "contexts/auth/AuthProvider";
5+
import { permissionsToCheck } from "contexts/auth/permissions";
6+
import { getPreferredProxy } from "contexts/ProxyContext";
7+
import {
8+
MockAuthMethodsAll,
9+
MockPermissions,
10+
MockProxyLatencies,
11+
MockUser,
12+
MockWorkspaceProxies,
13+
} from "testHelpers/entities";
14+
import { ProxyMenu } from "./ProxyMenu";
15+
16+
const defaultProxyContextValue = {
17+
proxyLatencies: MockProxyLatencies,
18+
proxy: getPreferredProxy(MockWorkspaceProxies, undefined),
19+
proxies: MockWorkspaceProxies,
20+
isLoading: false,
21+
isFetched: true,
22+
setProxy: fn(),
23+
clearProxy: fn(),
24+
refetchProxyLatencies: () => new Date(),
25+
};
26+
27+
const meta: Meta<typeof ProxyMenu> = {
28+
title: "modules/dashboard/ProxyMenu",
29+
component: ProxyMenu,
30+
args: {
31+
proxyContextValue: defaultProxyContextValue,
32+
},
33+
decorators: [
34+
(Story) => (
35+
<AuthProvider>
36+
<Story />
37+
</AuthProvider>
38+
),
39+
],
40+
parameters: {
41+
queries: [
42+
{ key: ["me"], data: MockUser },
43+
{ key: ["authMethods"], data: MockAuthMethodsAll },
44+
{ key: ["hasFirstUser"], data: true },
45+
{
46+
key: getAuthorizationKey({ checks: permissionsToCheck }),
47+
data: MockPermissions,
48+
},
49+
],
50+
},
51+
};
52+
53+
export default meta;
54+
type Story = StoryObj<typeof ProxyMenu>;
55+
56+
export const Closed: Story = {};
57+
58+
export const Opened: Story = {
59+
play: async ({ canvasElement }) => {
60+
const canvas = within(canvasElement);
61+
await userEvent.click(canvas.getByRole("button"));
62+
},
63+
};
64+
65+
export const SingleProxy: Story = {
66+
args: {
67+
proxyContextValue: {
68+
...defaultProxyContextValue,
69+
proxies: [MockWorkspaceProxies[0]],
70+
},
71+
},
72+
play: async ({ canvasElement }) => {
73+
const canvas = within(canvasElement);
74+
await userEvent.click(canvas.getByRole("button"));
75+
},
76+
};

site/src/modules/dashboard/Navbar/ProxyMenu.tsx

Lines changed: 46 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export const ProxyMenu: FC<ProxyMenuProps> = ({ proxyContextValue }) => {
6363
<Skeleton
6464
width="110px"
6565
height={BUTTON_SM_HEIGHT}
66-
css={{ borderRadius: "9999px", transform: "none" }}
66+
css={{ borderRadius: 6, transform: "none" }}
6767
/>
6868
);
6969
}
@@ -121,48 +121,52 @@ export const ProxyMenu: FC<ProxyMenuProps> = ({ proxyContextValue }) => {
121121
// the descriptive text and will only have access to the latency options
122122
autoFocus={false}
123123
>
124-
<div
125-
css={{
126-
width: "100%",
127-
maxWidth: "320px",
128-
fontSize: 14,
129-
padding: 16,
130-
lineHeight: "140%",
131-
}}
132-
>
133-
<h4
134-
autoFocus
135-
tabIndex={-1}
136-
css={{
137-
fontSize: "inherit",
138-
fontWeight: 600,
139-
lineHeight: "inherit",
140-
margin: 0,
141-
marginBottom: 4,
142-
}}
143-
>
144-
Select a region nearest to you
145-
</h4>
146-
147-
<p
148-
css={{
149-
fontSize: 13,
150-
color: theme.palette.text.secondary,
151-
lineHeight: "inherit",
152-
marginTop: 0.5,
153-
}}
154-
>
155-
Workspace proxies improve terminal and web app connections to
156-
workspaces. This does not apply to{" "}
157-
<Abbr title="Command-Line Interface" pronunciation="initialism">
158-
CLI
159-
</Abbr>{" "}
160-
connections. A region must be manually selected, otherwise the
161-
default primary region will be used.
162-
</p>
163-
</div>
124+
{proxyContextValue.proxies && proxyContextValue.proxies.length > 1 && (
125+
<>
126+
<div
127+
css={{
128+
width: "100%",
129+
maxWidth: "320px",
130+
fontSize: 14,
131+
padding: 16,
132+
lineHeight: "140%",
133+
}}
134+
>
135+
<h4
136+
autoFocus
137+
tabIndex={-1}
138+
css={{
139+
fontSize: "inherit",
140+
fontWeight: 600,
141+
lineHeight: "inherit",
142+
margin: 0,
143+
marginBottom: 4,
144+
}}
145+
>
146+
Select a region nearest to you
147+
</h4>
164148

165-
<Divider />
149+
<p
150+
css={{
151+
fontSize: 13,
152+
color: theme.palette.text.secondary,
153+
lineHeight: "inherit",
154+
marginTop: 0.5,
155+
}}
156+
>
157+
Workspace proxies improve terminal and web app connections to
158+
workspaces. This does not apply to{" "}
159+
<Abbr title="Command-Line Interface" pronunciation="initialism">
160+
CLI
161+
</Abbr>{" "}
162+
connections. A region must be manually selected, otherwise the
163+
default primary region will be used.
164+
</p>
165+
</div>
166+
167+
<Divider />
168+
</>
169+
)}
166170

167171
{proxyContextValue.proxies &&
168172
[...proxyContextValue.proxies]

0 commit comments

Comments
 (0)