feat: Add portforward to the UI

coder · BrunoQuaresma · Sep 13, 2022 · Sep 1, 2022 · Sep 2, 2022 · Sep 6, 2022
commit a6f976e48f2f96d6b1f21c04da340f38487137dc
diff --git a/site/src/components/PortForwardButton/PortForwardButton.stories.tsx b/site/src/components/PortForwardButton/PortForwardButton.stories.tsx
@@ -0,0 +1,25 @@
+import { Story } from "@storybook/react"
+import { MockWorkspace, MockWorkspaceAgent } from "../../testHelpers/renderHelpers"
+import { PortForwardButton, PortForwardButtonProps } from "./PortForwardButton"
+
+export default {
+  title: "components/PortForwardButton",
+  component: PortForwardButton,
+}
+
+const Template: Story<PortForwardButtonProps> = (args) => <PortForwardButton {...args} />
+
+export const Closed = Template.bind({})
+Closed.args = {
+  username: MockWorkspace.owner_name,
+  workspaceName: MockWorkspace.name,
+  agentName: MockWorkspaceAgent.name,
+}
+
+export const Opened = Template.bind({})
+Opened.args = {
+  username: MockWorkspace.owner_name,
+  workspaceName: MockWorkspace.name,
+  agentName: MockWorkspaceAgent.name,
+  defaultIsOpen: true,
+}
diff --git a/site/src/components/PortForwardButton/PortForwardButton.tsx b/site/src/components/PortForwardButton/PortForwardButton.tsx
@@ -0,0 +1,128 @@
+import Button from "@material-ui/core/Button"
+import Link from "@material-ui/core/Link"
+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 { Stack } from "components/Stack/Stack"
+import { useRef, useState } from "react"
+import { colors } from "theme/colors"
+import { CodeExample } from "../CodeExample/CodeExample"
+import { HelpTooltipLink, HelpTooltipLinksGroup, HelpTooltipText } from "../Tooltips/HelpTooltip"
+
+export interface PortForwardButtonProps {
+  username: string
+  workspaceName: string
+  agentName: string
+  defaultIsOpen?: boolean
+}
+
+export const PortForwardButton: React.FC<React.PropsWithChildren<PortForwardButtonProps>> = ({
+  workspaceName,
+  agentName,
+  username,
+  defaultIsOpen = false,
+}) => {
+  const anchorRef = useRef<HTMLButtonElement>(null)
+  const [isOpen, setIsOpen] = useState(defaultIsOpen)
+  const id = isOpen ? "schedule-popover" : undefined
+  const styles = useStyles()
+  const [port, setPort] = useState("3000")
+  const { location } = window
+  const urlExample = `${location.protocol}//${port}--${workspaceName}--${agentName}--${username}.${location.host}`
+
+  const onClose = () => {
+    setIsOpen(false)
+  }
+
+  return (
+    <>
+      <Button
+        startIcon={<OpenInNewOutlined />}
+        size="small"
+        ref={anchorRef}
+        onClick={() => {
+          setIsOpen(true)
+        }}
+      >
+        Port forward
+      </Button>
+      <Popover
+        classes={{ paper: styles.popoverPaper }}
+        id={id}
+        open={isOpen}
+        anchorEl={anchorRef.current}
+        onClose={onClose}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "left",
+        }}
+        transformOrigin={{
+          vertical: "top",
+          horizontal: "left",
+        }}
+      >
+        <Stack direction="column" spacing={1}>
+          <HelpTooltipText>
+            You can portforward this resource by typing the{" "}
+            <strong>port, workspace name, agent name</strong> and <strong>your username</strong> in
+            the URL like the example below
+          </HelpTooltipText>
+
+          <CodeExample code={urlExample} />
+
+          <HelpTooltipText>
+            Or you can use the following form to open it in a new tab.
+          </HelpTooltipText>
+
+          <Stack direction="row" spacing={1} alignItems="center">
+            <TextField
+              label="Port"
+              type="number"
+              value={port}
+              className={styles.portField}
+              onChange={(e) => {
+                setPort(e.currentTarget.value)
+              }}
+            />
+            <Link
+              underline="none"
+              href={urlExample}
+              target="_blank"
+              rel="noreferrer"
+              className={styles.openUrlButton}
+            >
+              <Button>Open URL</Button>
+            </Link>
+          </Stack>
+
+          <HelpTooltipLinksGroup>
+            <HelpTooltipLink href="https://coder.com/docs/coder-oss/latest/port-forward">
+              Port forward
+            </HelpTooltipLink>
+          </HelpTooltipLinksGroup>
+        </Stack>
+      </Popover>
+    </>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  popoverPaper: {
+    padding: `${theme.spacing(2.5)}px ${theme.spacing(3.5)}px ${theme.spacing(3.5)}px`,
+    width: theme.spacing(46),
+    color: theme.palette.text.secondary,
+    marginTop: theme.spacing(0.25),
+  },
+
+  openUrlButton: {
+    flexShrink: 0,
+  },
+
+  portField: {
+    // The default border don't contrast well with the popover
+    "& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
+      borderColor: colors.gray[10],
+    },
+  },
+}))
diff --git a/site/src/components/Resources/Resources.tsx b/site/src/components/Resources/Resources.tsx
@@ -7,6 +7,7 @@ import TableHead from "@material-ui/core/TableHead"
 import TableRow from "@material-ui/core/TableRow"
 import useTheme from "@material-ui/styles/useTheme"
 import { ErrorSummary } from "components/ErrorSummary/ErrorSummary"
+import { PortForwardButton } from "components/PortForwardButton/PortForwardButton"
 import { TableCellDataPrimary } from "components/TableCellData/TableCellData"
 import { FC } from "react"
 import { getDisplayAgentStatus, getDisplayVersionStatus } from "util/workspace"
@@ -135,6 +136,11 @@ export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
                           {canUpdateWorkspace && agent.status === "connected" && (
                             <>
                               <SSHButton workspaceName={workspace.name} agentName={agent.name} />
+                              <PortForwardButton
+                                username={workspace.owner_name}
+                                workspaceName={workspace.name}
+                                agentName={agent.name}
+                              />
                               <TerminalLink
                                 workspaceName={workspace.name}
                                 agentName={agent.name}

diff --git a/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx b/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx
@@ -226,8 +226,9 @@ const useStyles = makeStyles((theme) => ({
   },
 
   link: {
-    display: "flex",
+    display: "inline-flex",
     alignItems: "center",
+    width: "fit-content",
   },
 
   linkIcon: {