fix(site): fix ports update (#9221)

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}
                 />
               )}

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

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,
             )