refactor: Do not display port forward button if it is disabled (#5604)

site/src/components/PortForwardButton/PortForwardButton.tsx

@@ -4,7 +4,6 @@ import Popover from "@material-ui/core/Popover"
 import { makeStyles } from "@material-ui/core/styles"
 import TextField from "@material-ui/core/TextField"
 import OpenInNewOutlined from "@material-ui/icons/OpenInNewOutlined"
-import { ChooseOne, Cond } from "components/Conditionals/ChooseOne"
 import { Stack } from "components/Stack/Stack"
 import { useRef, useState, Fragment } from "react"
 import { colors } from "theme/colors"
@@ -42,7 +41,7 @@ const portForwardURL = (
   return `${location.protocol}//${host}`.replace("*", subdomain)
 }
 
-const EnabledView: React.FC<PortForwardButtonProps> = (props) => {
+const TooltipView: React.FC<PortForwardButtonProps> = (props) => {
   const { host, workspaceName, agentName, agentId, username } = props
   const styles = useStyles()
   const [port, setPort] = useState("3000")
@@ -137,40 +136,7 @@ const EnabledView: React.FC<PortForwardButtonProps> = (props) => {
   )
 }
 
-const DisabledView: React.FC<PortForwardButtonProps> = ({
-  workspaceName,
-  agentName,
-}) => {
-  const cliExample = `coder port-forward ${workspaceName}.${agentName} --tcp 3000`
-  const styles = useStyles()
-
-  return (
-    <>
-      <HelpTooltipText>
-        <strong>
-          Your deployment does not have web port forwarding enabled.
-        </strong>{" "}
-        See the docs for more details.
-      </HelpTooltipText>
-
-      <HelpTooltipText>
-        You can use the Coder CLI to forward ports from your workspace to your
-        local machine, as shown below.
-      </HelpTooltipText>
-
-      <CodeExample code={cliExample} className={styles.code} />
-
-      <HelpTooltipLinksGroup>
-        <HelpTooltipLink href="https://coder.com/docs/coder-oss/latest/networking/port-forwarding#dashboard">
-          Learn more about web port forwarding
-        </HelpTooltipLink>
-      </HelpTooltipLinksGroup>
-    </>
-  )
-}
-
 export const PortForwardButton: React.FC<PortForwardButtonProps> = (props) => {
-  const { host } = props
   const anchorRef = useRef<HTMLButtonElement>(null)
   const [isOpen, setIsOpen] = useState(false)
   const id = isOpen ? "schedule-popover" : undefined
@@ -208,14 +174,7 @@ export const PortForwardButton: React.FC<PortForwardButtonProps> = (props) => {
         }}
       >
         <HelpTooltipTitle>Port forward</HelpTooltipTitle>
-        <ChooseOne>
-          <Cond condition={host !== ""}>
-            <EnabledView {...props} />
-          </Cond>
-          <Cond>
-            <DisabledView {...props} />
-          </Cond>
-        </ChooseOne>
+        <TooltipView {...props} />
       </Popover>
     </>
   )

site/src/components/Resources/AgentRow.stories.tsx

@@ -76,3 +76,11 @@ Timeout.args = {
   applicationsHost: "",
   showApps: true,
 }
+
+export const ShowingPortForward = Template.bind({})
+ShowingPortForward.args = {
+  agent: MockWorkspaceAgent,
+  workspace: MockWorkspace,
+  applicationsHost: "https://coder.com",
+  showApps: true,
+}

site/src/components/Resources/AgentRow.tsx

@@ -105,7 +105,7 @@ export const AgentRow: FC<AgentRowProps> = ({
                 agentName={agent.name}
               />
             )}
-            {applicationsHost !== undefined && (
+            {applicationsHost !== undefined && applicationsHost !== "" && (
               <PortForwardButton
                 host={applicationsHost}
                 workspaceName={workspace.name}

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

@@ -39,6 +39,9 @@ export default {
             },
           },
         },
+        wildcard_access_url: {
+          value: "https://coder.com",
+        },
       },
     },
   },

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

@@ -1,28 +1,53 @@
 import { DeploymentConfig } from "api/typesGenerated"
+import {
+  Badges,
+  EnabledBadge,
+  DisabledBadge,
+} from "components/DeploySettingsLayout/Badges"
 import { Header } from "components/DeploySettingsLayout/Header"
 import OptionsTable from "components/DeploySettingsLayout/OptionsTable"
+import { Stack } from "components/Stack/Stack"
 
 export type NetworkSettingsPageViewProps = {
-  deploymentConfig: Pick<DeploymentConfig, "derp">
+  deploymentConfig: Pick<DeploymentConfig, "derp" | "wildcard_access_url">
 }
 
 export const NetworkSettingsPageView = ({
   deploymentConfig,
 }: NetworkSettingsPageViewProps): JSX.Element => (
-  <>
+  <Stack direction="column" spacing={6}>
+    <div>
       <Header
         title="Network"
         description="Configure your deployment connectivity."
         docsHref="https://coder.com/docs/coder-oss/latest/networking"
       />
-
       <OptionsTable
         options={{
           derp_server_enable: deploymentConfig.derp.server.enable,
           derp_server_region_name: deploymentConfig.derp.server.region_name,
-        derp_server_stun_addresses: deploymentConfig.derp.server.stun_addresses,
+          derp_server_stun_addresses:
+            deploymentConfig.derp.server.stun_addresses,
           derp_config_url: deploymentConfig.derp.config.url,
         }}
       />
-  </>
+    </div>
+
+    <div>
+      <Header
+        title="Port Forwarding"
+        secondary
+        description="Port forwarding lets developers securely access processes on their Coder workspace from a local machine."
+        docsHref="https://coder.com/docs/coder-oss/latest/networking/port-forwarding"
+      />
+
+      <Badges>
+        {deploymentConfig.wildcard_access_url.value !== "" ? (
+          <EnabledBadge />
+        ) : (
+          <DisabledBadge />
+        )}
+      </Badges>
+    </div>
+  </Stack>
 )