Skip to content

Commit 70d71bc

Browse files
BrunoQuaresmaBrunoQuaresma
authored
refactor: Do not display port forward button if it is disabled (#5604)
1 parent 34225b0 commit 70d71bc

File tree

5 files changed

+55
-60
lines changed

5 files changed

+55
-60
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.stories.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,3 +76,11 @@ Timeout.args = {
7676
applicationsHost: "",
7777
showApps: true,
7878
}
79+
80+
export const ShowingPortForward = Template.bind({})
81+
ShowingPortForward.args = {
82+
agent: MockWorkspaceAgent,
83+
workspace: MockWorkspace,
84+
applicationsHost: "https://coder.com",
85+
showApps: true,
86+
}

‎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/NetworkSettingsPageView.stories.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,9 @@ export default {
3939
},
4040
},
4141
},
42+
wildcard_access_url: {
43+
value: "https://coder.com",
44+
},
4245
},
4346
},
4447
},

‎site/src/pages/DeploySettingsPage/NetworkSettingsPage/NetworkSettingsPageView.tsx

Lines changed: 41 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,53 @@
11
import { DeploymentConfig } from "api/typesGenerated"
2+
import {
3+
Badges,
4+
EnabledBadge,
5+
DisabledBadge,
6+
} from "components/DeploySettingsLayout/Badges"
27
import { Header } from "components/DeploySettingsLayout/Header"
38
import OptionsTable from "components/DeploySettingsLayout/OptionsTable"
9+
import { Stack } from "components/Stack/Stack"
410

511
export type NetworkSettingsPageViewProps = {
6-
deploymentConfig: Pick<DeploymentConfig, "derp">
12+
deploymentConfig: Pick<DeploymentConfig, "derp" | "wildcard_access_url">
713
}
814

915
export const NetworkSettingsPageView = ({
1016
deploymentConfig,
1117
}: NetworkSettingsPageViewProps): JSX.Element => (
12-
<>
13-
<Header
14-
title="Network"
15-
description="Configure your deployment connectivity."
16-
docsHref="https://coder.com/docs/coder-oss/latest/networking"
17-
/>
18+
<Stack direction="column" spacing={6}>
19+
<div>
20+
<Header
21+
title="Network"
22+
description="Configure your deployment connectivity."
23+
docsHref="https://coder.com/docs/coder-oss/latest/networking"
24+
/>
25+
<OptionsTable
26+
options={{
27+
derp_server_enable: deploymentConfig.derp.server.enable,
28+
derp_server_region_name: deploymentConfig.derp.server.region_name,
29+
derp_server_stun_addresses:
30+
deploymentConfig.derp.server.stun_addresses,
31+
derp_config_url: deploymentConfig.derp.config.url,
32+
}}
33+
/>
34+
</div>
1835

19-
<OptionsTable
20-
options={{
21-
derp_server_enable: deploymentConfig.derp.server.enable,
22-
derp_server_region_name: deploymentConfig.derp.server.region_name,
23-
derp_server_stun_addresses: deploymentConfig.derp.server.stun_addresses,
24-
derp_config_url: deploymentConfig.derp.config.url,
25-
}}
26-
/>
27-
</>
36+
<div>
37+
<Header
38+
title="Port Forwarding"
39+
secondary
40+
description="Port forwarding lets developers securely access processes on their Coder workspace from a local machine."
41+
docsHref="https://coder.com/docs/coder-oss/latest/networking/port-forwarding"
42+
/>
43+
44+
<Badges>
45+
{deploymentConfig.wildcard_access_url.value !== "" ? (
46+
<EnabledBadge />
47+
) : (
48+
<DisabledBadge />
49+
)}
50+
</Badges>
51+
</div>
52+
</Stack>
2853
)

0 commit comments

Comments
 (0)