Oct 11, 2022 · Oct 6, 2022 · Oct 6, 2022 · Oct 6, 2022 · Oct 6, 2022 · Oct 6, 2022
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
 export const getAgentListeningPorts = async (
  agentID: string,
 ): Promise<TypesGen.ListeningPortsResponse> => {
  const response = await axios.get(`/api/v2/workspaceagents/${agentID}/listening-ports`)
  const response = await axios.get(
    `/api/v2/workspaceagents/${agentID}/listening-ports`,
  )
  return response.data
 }
diff --git a/site/src/components/PortForwardButton/PortForwardButton.tsx b/site/src/components/PortForwardButton/PortForwardButton.tsx
        Use the form to open applications in a new tab.
      </HelpTooltipText>

      <Stack direction="row" spacing={1} alignItems="center" className={styles.form}>
      <Stack
        direction="row"
        spacing={1}
        alignItems="center"
        className={styles.form}
      >
        <TextField
          label="Port"
          type="number"
  )
 }

 const DisabledView: React.FC<PortForwardButtonProps> = ({ workspaceName, agentName }) => {
 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.
        <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.
        You can use the Coder CLI to forward ports from your workspace to your
 local machine, asshown below.
      </HelpTooltipText>

      <CodeExample code={cliExample} className={styles.code} />

 const useStyles = makeStyles((theme) => ({
  popoverPaper: {
    padding: `${theme.spacing(2.5)}px ${theme.spacing(3.5)}px ${theme.spacing(3.5)}px`,
    padding: `${theme.spacing(2.5)}px ${theme.spacing(3.5)}px ${theme.spacing(
      3.5,
    )}px`,
    width: theme.spacing(52),
    color: theme.palette.text.secondary,
    marginTop: theme.spacing(0.25),
diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx
                                    <PortForwardButton
                                      host={applicationsHost}
                                      workspaceName={workspace.name}
                                      agentId={agent.id}
                                      agentName={agent.name}
                                      username={workspace.owner_name}
                                    />
                                  <TerminalLink
                                    workspaceName={workspace.name}
                                    agentName={agent.name}
                                    agentId={agent.id}
                                    username={workspace.owner_name}
                                    userName={workspace.owner_name}
                                  />
                                  {agent.apps.map((app) => (
                                    <AppLink
Original file line number	Diff line number	Diff line change
Expand Up		@@ -635,6 +635,8 @@ export const getWorkspaceQuota = async (
		export const getAgentListeningPorts = async (
		agentID: string,
		): Promise<TypesGen.ListeningPortsResponse> => {
		const response = await axios.get(`/api/v2/workspaceagents/${agentID}/listening-ports`)
		const response = await axios.get(
		`/api/v2/workspaceagents/${agentID}/listening-ports`,
		)
		return response.data
		}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -52,7 +52,12 @@ const EnabledView: React.FC<PortForwardButtonProps> = (props) => {
		Use the form to open applications in a new tab.
		</HelpTooltipText>

		<Stack direction="row" spacing={1} alignItems="center" className={styles.form}>
		<Stack
		direction="row"
		spacing={1}
		alignItems="center"
		className={styles.form}
		>
		<TextField
		label="Port"
		type="number"
Expand DownExpand Up		@@ -104,20 +109,25 @@ const EnabledView: React.FC<PortForwardButtonProps> = (props) => {
		)
		}

		const DisabledView: React.FC<PortForwardButtonProps> = ({ workspaceName, agentName }) => {
		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.
		<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.
		You can use the Coder CLI to forward ports from your workspace to your
		local machine, asshown below.
		</HelpTooltipText>

		<CodeExample code={cliExample} className={styles.code} />
Expand DownExpand Up		@@ -185,7 +195,9 @@ export const PortForwardButton: React.FC<PortForwardButtonProps> = (props) => {

		const useStyles = makeStyles((theme) => ({
		popoverPaper: {
		padding: `${theme.spacing(2.5)}px ${theme.spacing(3.5)}px ${theme.spacing(3.5)}px`,
		padding: `${theme.spacing(2.5)}px ${theme.spacing(3.5)}px ${theme.spacing(
		3.5,
		)}px`,
		width: theme.spacing(52),
		color: theme.palette.text.secondary,
		marginTop: theme.spacing(0.25),
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -179,6 +179,7 @@ export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
		<PortForwardButton
		host={applicationsHost}
		workspaceName={workspace.name}
		agentId={agent.id}
		agentName={agent.name}
		username={workspace.owner_name}
		/>
Expand All		@@ -192,8 +193,7 @@ export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
		<TerminalLink
		workspaceName={workspace.name}
		agentName={agent.name}
		agentId={agent.id}
		username={workspace.owner_name}
		userName={workspace.owner_name}
		/>
		{agent.apps.map((app) => (
		<AppLink
Expand Down