From d82e20152b9865d0449656cb8fb07bb8a311923e Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Wed, 20 Mar 2024 09:34:30 -0300
Subject: [PATCH] feat(site): make listening ports scrollable (#12660)

---
 .../modules/resources/PortForwardButton.tsx   | 135 ++++++++++--------
 .../PortForwardPopoverView.stories.tsx        |  18 +++
 2 files changed, 94 insertions(+), 59 deletions(-)

diff --git a/site/src/modules/resources/PortForwardButton.tsx b/site/src/modules/resources/PortForwardButton.tsx
index 555d89f82d..ab05a8dc26 100644
--- a/site/src/modules/resources/PortForwardButton.tsx
+++ b/site/src/modules/resources/PortForwardButton.tsx
@@ -220,73 +220,90 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
     <>
       <div
         css={{
-          padding: 20,
+          maxHeight: 320,
+          overflowY: "auto",
         }}
       >
-        <Stack
-          direction="row"
-          justifyContent="space-between"
-          alignItems="start"
+        <header
+          css={(theme) => ({
+            padding: 20,
+            paddingBottom: 10,
+            position: "sticky",
+            top: 0,
+            background: theme.palette.background.paper,
+            // For some reason the Share button label has a higher z-index than
+            // the header. Probably some tricky stuff from MUI.
+            zIndex: 1,
+          })}
         >
-          <HelpTooltipTitle>Listening ports</HelpTooltipTitle>
-          <HelpTooltipLink href={docs("/networking/port-forwarding#dashboard")}>
-            Learn more
-          </HelpTooltipLink>
-        </Stack>
-        <HelpTooltipText css={{ color: theme.palette.text.secondary }}>
-          {filteredListeningPorts?.length === 0
-            ? "No open ports were detected."
-            : "The listening ports are exclusively accessible to you."}
-        </HelpTooltipText>
-        <form
-          css={styles.newPortForm}
-          onSubmit={(e) => {
-            e.preventDefault();
-            const formData = new FormData(e.currentTarget);
-            const port = Number(formData.get("portNumber"));
-            const url = portForwardURL(
-              host,
-              port,
-              agent.name,
-              workspaceName,
-              username,
-            );
-            window.open(url, "_blank");
-          }}
-        >
-          <input
-            aria-label="Port number"
-            name="portNumber"
-            type="number"
-            placeholder="Connect to port..."
-            min={9}
-            max={65535}
-            required
-            css={styles.newPortInput}
-          />
-          <Button
-            type="submit"
-            size="small"
-            variant="text"
-            css={{
-              paddingLeft: 12,
-              paddingRight: 12,
-              minWidth: 0,
+          <Stack
+            direction="row"
+            justifyContent="space-between"
+            alignItems="start"
+          >
+            <HelpTooltipTitle>Listening ports</HelpTooltipTitle>
+            <HelpTooltipLink
+              href={docs("/networking/port-forwarding#dashboard")}
+            >
+              Learn more
+            </HelpTooltipLink>
+          </Stack>
+          <HelpTooltipText css={{ color: theme.palette.text.secondary }}>
+            {filteredListeningPorts?.length === 0
+              ? "No open ports were detected."
+              : "The listening ports are exclusively accessible to you."}
+          </HelpTooltipText>
+          <form
+            css={styles.newPortForm}
+            onSubmit={(e) => {
+              e.preventDefault();
+              const formData = new FormData(e.currentTarget);
+              const port = Number(formData.get("portNumber"));
+              const url = portForwardURL(
+                host,
+                port,
+                agent.name,
+                workspaceName,
+                username,
+              );
+              window.open(url, "_blank");
             }}
           >
-            <OpenInNewOutlined
-              css={{
-                flexShrink: 0,
-                width: 14,
-                height: 14,
-                color: theme.palette.text.primary,
-              }}
+            <input
+              aria-label="Port number"
+              name="portNumber"
+              type="number"
+              placeholder="Connect to port..."
+              min={9}
+              max={65535}
+              required
+              css={styles.newPortInput}
             />
-          </Button>
-        </form>
+            <Button
+              type="submit"
+              size="small"
+              variant="text"
+              css={{
+                paddingLeft: 12,
+                paddingRight: 12,
+                minWidth: 0,
+              }}
+            >
+              <OpenInNewOutlined
+                css={{
+                  flexShrink: 0,
+                  width: 14,
+                  height: 14,
+                  color: theme.palette.text.primary,
+                }}
+              />
+            </Button>
+          </form>
+        </header>
         <div
           css={{
-            paddingTop: 10,
+            padding: 20,
+            paddingTop: 0,
           }}
         >
           {filteredListeningPorts?.map((port) => {
diff --git a/site/src/modules/resources/PortForwardPopoverView.stories.tsx b/site/src/modules/resources/PortForwardPopoverView.stories.tsx
index c026ff1d00..9042c05e07 100644
--- a/site/src/modules/resources/PortForwardPopoverView.stories.tsx
+++ b/site/src/modules/resources/PortForwardPopoverView.stories.tsx
@@ -51,6 +51,24 @@ export const WithPorts: Story = {
   },
 };
 
+export const WithManyPorts: Story = {
+  args: {
+    listeningPorts: Array.from({ length: 20 }).map((_, i) => ({
+      process_name: `port-${i}`,
+      network: "",
+      port: 3000 + i,
+    })),
+  },
+  parameters: {
+    queries: [
+      {
+        key: ["sharedPorts", MockWorkspace.id],
+        data: MockSharedPortsResponse,
+      },
+    ],
+  },
+};
+
 export const Empty: Story = {
   args: {
     listeningPorts: [],