Skip to content

Commit 165ec63

Browse files
committed
refactor: Do not display port forward button if it is disabled
1 parent aa68e0f commit 165ec63

File tree

3 files changed

+43
-58
lines changed

3 files changed

+43
-58
lines changed

site/src/components/PortForwardButton/PortForwardButton.tsx

Lines changed: 2 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import Popover from "@material-ui/core/Popover"
44
import { makeStyles } from "@material-ui/core/styles"
55
import TextField from "@material-ui/core/TextField"
66
import OpenInNewOutlined from "@material-ui/icons/OpenInNewOutlined"
7-
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"
87
import { Stack } from "components/Stack/Stack"
98
import { useRef, useState, Fragment } from "react"
109
import { colors } from "theme/colors"
@@ -42,7 +41,7 @@ const portForwardURL = (
4241
return `${location.protocol}//${host}`.replace("*", subdomain)
4342
}
4443

45-
const EnabledView: React.FC<PortForwardButtonProps> = (props) => {
44+
const TooltipView: React.FC<PortForwardButtonProps> = (props) => {
4645
const { host, workspaceName, agentName, agentId, username } = props
4746
const styles = useStyles()
4847
const [port, setPort] = useState("3000")
@@ -137,40 +136,7 @@ const EnabledView: React.FC<PortForwardButtonProps> = (props) => {
137136
)
138137
}
139138

140-
const DisabledView: React.FC<PortForwardButtonProps> = ({
141-
workspaceName,
142-
agentName,
143-
}) => {
144-
const cliExample = `coder port-forward ${workspaceName}.${agentName} --tcp 3000`
145-
const styles = useStyles()
146-
147-
return (
148-
<>
149-
<HelpTooltipText>
150-
<strong>
151-
Your deployment does not have web port forwarding enabled.
152-
</strong>{" "}
153-
See the docs for more details.
154-
</HelpTooltipText>
155-
156-
<HelpTooltipText>
157-
You can use the Coder CLI to forward ports from your workspace to your
158-
local machine, as shown below.
159-
</HelpTooltipText>
160-
161-
<CodeExample code={cliExample} className={styles.code} />
162-
163-
<HelpTooltipLinksGroup>
164-
<HelpTooltipLink href="https://coder.com/docs/coder-oss/latest/networking/port-forwarding#dashboard">
165-
Learn more about web port forwarding
166-
</HelpTooltipLink>
167-
</HelpTooltipLinksGroup>
168-
</>
169-
)
170-
}
171-
172139
export const PortForwardButton: React.FC<PortForwardButtonProps> = (props) => {
173-
const { host } = props
174140
const anchorRef = useRef<HTMLButtonElement>(null)
175141
const [isOpen, setIsOpen] = useState(false)
176142
const id = isOpen ? "schedule-popover" : undefined
@@ -208,14 +174,7 @@ export const PortForwardButton: React.FC<PortForwardButtonProps> = (props) => {
208174
}}
209175
>
210176
<HelpTooltipTitle>Port forward</HelpTooltipTitle>
211-
<ChooseOne>
212-
<Cond condition={host !== ""}>
213-
<EnabledView {...props} />
214-
</Cond>
215-
<Cond>
216-
<DisabledView {...props} />
217-
</Cond>
218-
</ChooseOne>
177+
<TooltipView {...props} />
219178
</Popover>
220179
</>
221180
)

site/src/components/Resources/AgentRow.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ export const AgentRow: FC<AgentRowProps> = ({
105105
agentName={agent.name}
106106
/>
107107
)}
108-
{applicationsHost !== undefined && (
108+
{applicationsHost !== undefined && applicationsHost !== "" && (
109109
<PortForwardButton
110110
host={applicationsHost}
111111
workspaceName={workspace.name}

site/src/pages/DeploySettingsPage/NetworkSettingsPage.tsx

Lines changed: 40 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
1+
import {
2+
Badges,
3+
EnabledBadge,
4+
DisabledBadge,
5+
} from "components/DeploySettingsLayout/Badges"
16
import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout"
27
import { Header } from "components/DeploySettingsLayout/Header"
38
import OptionsTable from "components/DeploySettingsLayout/OptionsTable"
9+
import { Stack } from "components/Stack/Stack"
410
import React from "react"
511
import { Helmet } from "react-helmet-async"
612
import { pageTitle } from "util/page"
@@ -14,21 +20,41 @@ const NetworkSettingsPage: React.FC = () => {
1420
<title>{pageTitle("Network Settings")}</title>
1521
</Helmet>
1622

17-
<Header
18-
title="Network"
19-
description="Configure your deployment connectivity."
20-
docsHref="https://coder.com/docs/coder-oss/latest/networking"
21-
/>
23+
<Stack direction="column" spacing={6}>
24+
<div>
25+
<Header
26+
title="Network"
27+
description="Configure your deployment connectivity."
28+
docsHref="https://coder.com/docs/coder-oss/latest/networking"
29+
/>
30+
<OptionsTable
31+
options={{
32+
derp_server_enable: deploymentConfig.derp.server.enable,
33+
derp_server_region_name: deploymentConfig.derp.server.region_name,
34+
derp_server_stun_addresses:
35+
deploymentConfig.derp.server.stun_addresses,
36+
derp_config_url: deploymentConfig.derp.config.url,
37+
}}
38+
/>
39+
</div>
2240

23-
<OptionsTable
24-
options={{
25-
derp_server_enable: deploymentConfig.derp.server.enable,
26-
derp_server_region_name: deploymentConfig.derp.server.region_name,
27-
derp_server_stun_addresses:
28-
deploymentConfig.derp.server.stun_addresses,
29-
derp_config_url: deploymentConfig.derp.config.url,
30-
}}
31-
/>
41+
<div>
42+
<Header
43+
title="Port Forwarding"
44+
secondary
45+
description="Port forwarding lets developers securely access processes on their Coder workspace from a local machine."
46+
docsHref="https://coder.com/docs/coder-oss/latest/networking/port-forwarding"
47+
/>
48+
49+
<Badges>
50+
{deploymentConfig.wildcard_access_url.value !== "" ? (
51+
<EnabledBadge />
52+
) : (
53+
<DisabledBadge />
54+
)}
55+
</Badges>
56+
</div>
57+
</Stack>
3258
</>
3359
)
3460
}

0 commit comments

Comments
 (0)