From 4b9f22551f9d7aa23f266b6dafd6a2497f656a42 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 21 Aug 2023 13:40:02 +0000
Subject: [PATCH 1/2] fix(site): fix ports update

---
 site/src/components/Resources/AgentRow.tsx    |  3 +--
 .../Resources/PortForwardButton.tsx           | 27 ++++++++++---------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/site/src/components/Resources/AgentRow.tsx b/site/src/components/Resources/AgentRow.tsx
index 320f6cc11007d..ab41cf721331d 100644
--- a/site/src/components/Resources/AgentRow.tsx
+++ b/site/src/components/Resources/AgentRow.tsx
@@ -253,8 +253,7 @@ export const AgentRow: FC<AgentRowProps> = ({
                 <PortForwardButton
                   host={proxy.preferredWildcardHostname}
                   workspaceName={workspace.name}
-                  agentId={agent.id}
-                  agentName={agent.name}
+                  agent={agent}
                   username={workspace.owner_name}
                 />
               )}
diff --git a/site/src/components/Resources/PortForwardButton.tsx b/site/src/components/Resources/PortForwardButton.tsx
index 3bc025edfdf28..4f9faf540a106 100644
--- a/site/src/components/Resources/PortForwardButton.tsx
+++ b/site/src/components/Resources/PortForwardButton.tsx
@@ -14,7 +14,7 @@ import { docs } from "utils/docs"
 import Box from "@mui/material/Box"
 import { useQuery } from "@tanstack/react-query"
 import { getAgentListeningPorts } from "api/api"
-import { WorkspaceAgentListeningPort } from "api/typesGenerated"
+import { WorkspaceAgent, WorkspaceAgentListeningPort } from "api/typesGenerated"
 import CircularProgress from "@mui/material/CircularProgress"
 import { portForwardURL } from "utils/portForward"
 import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined"
@@ -23,8 +23,7 @@ export interface PortForwardButtonProps {
   host: string
   username: string
   workspaceName: string
-  agentName: string
-  agentId: string
+  agent: WorkspaceAgent
 }
 
 export const PortForwardButton: React.FC<PortForwardButtonProps> = (props) => {
@@ -32,9 +31,11 @@ export const PortForwardButton: React.FC<PortForwardButtonProps> = (props) => {
   const [isOpen, setIsOpen] = useState(false)
   const id = isOpen ? "schedule-popover" : undefined
   const styles = useStyles()
-  const { data: listeningPorts } = useQuery({
-    queryKey: ["portForward", props.agentId],
-    queryFn: () => getAgentListeningPorts(props.agentId),
+  const portsQuery = useQuery({
+    queryKey: ["portForward", props.agent.id],
+    queryFn: () => getAgentListeningPorts(props.agent.id),
+    enabled: props.agent.status === "connected",
+    refetchInterval: 5_000,
   })
 
   const onClose = () => {
@@ -44,14 +45,14 @@ export const PortForwardButton: React.FC<PortForwardButtonProps> = (props) => {
   return (
     <>
       <SecondaryAgentButton
-        disabled={!listeningPorts}
+        disabled={!portsQuery.data}
         ref={anchorRef}
         onClick={() => {
           setIsOpen(true)
         }}
       >
         Ports
-        {listeningPorts ? (
+        {portsQuery.data ? (
           <Box
             sx={{
               fontSize: 12,
@@ -67,7 +68,7 @@ export const PortForwardButton: React.FC<PortForwardButtonProps> = (props) => {
               ml: 1,
             }}
           >
-            {listeningPorts.ports.length}
+            {portsQuery.data.ports.length}
           </Box>
         ) : (
           <CircularProgress size={10} sx={{ ml: 1 }} />
@@ -88,7 +89,7 @@ export const PortForwardButton: React.FC<PortForwardButtonProps> = (props) => {
           horizontal: "right",
         }}
       >
-        <PortForwardPopoverView {...props} ports={listeningPorts?.ports} />
+        <PortForwardPopoverView {...props} ports={portsQuery.data?.ports} />
       </Popover>
     </>
   )
@@ -97,7 +98,7 @@ export const PortForwardButton: React.FC<PortForwardButtonProps> = (props) => {
 export const PortForwardPopoverView: React.FC<
   PortForwardButtonProps & { ports?: WorkspaceAgentListeningPort[] }
 > = (props) => {
-  const { host, workspaceName, agentName, username, ports } = props
+  const { host, workspaceName, agent, username, ports } = props
 
   return (
     <>
@@ -120,7 +121,7 @@ export const PortForwardPopoverView: React.FC<
             const url = portForwardURL(
               host,
               p.port,
-              agentName,
+              agent.name,
               workspaceName,
               username,
             )
@@ -192,7 +193,7 @@ export const PortForwardPopoverView: React.FC<
             const url = portForwardURL(
               host,
               port,
-              agentName,
+              agent.name,
               workspaceName,
               username,
             )

From 665351deb68ba2aa70e195acd6fce70325cd756b Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 21 Aug 2023 16:55:38 +0000
Subject: [PATCH 2/2] Fix agents

---
 .../components/Resources/PortForwardButton.stories.tsx    | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/site/src/components/Resources/PortForwardButton.stories.tsx b/site/src/components/Resources/PortForwardButton.stories.tsx
index 46014bcca71cb..c9eba7dd4f1b3 100644
--- a/site/src/components/Resources/PortForwardButton.stories.tsx
+++ b/site/src/components/Resources/PortForwardButton.stories.tsx
@@ -1,7 +1,10 @@
 import Box from "@mui/material/Box"
 import { PortForwardPopoverView } from "./PortForwardButton"
 import type { Meta, StoryObj } from "@storybook/react"
-import { MockListeningPortsResponse } from "testHelpers/entities"
+import {
+  MockListeningPortsResponse,
+  MockWorkspaceAgent,
+} from "testHelpers/entities"
 
 const meta: Meta<typeof PortForwardPopoverView> = {
   title: "components/PortForwardPopoverView",
@@ -20,6 +23,9 @@ const meta: Meta<typeof PortForwardPopoverView> = {
       </Box>
     ),
   ],
+  args: {
+    agent: MockWorkspaceAgent,
+  },
 }
 
 export default meta