fix: reduce spacing when agent metadata doesn't exist (#6937)

site/src/components/Resources/AgentMetadata.stories.tsx

@@ -103,5 +103,16 @@ Example.args = {
         key: "nloads",
       },
     },
+    {
+      result: {
+        ...resultDefaults,
+        value: "r".repeat(1000),
+      },
+      description: {
+        ...descriptionDefaults,
+        display_name: "Really, really big",
+        key: "big",
+      },
+    },
   ],
 }

site/src/components/Resources/AgentMetadata.tsx

@@ -228,7 +228,8 @@ export const AgentMetadataView: FC<AgentMetadataViewProps> = ({ metadata }) => {
 
 export const AgentMetadata: FC<{
   agent: WorkspaceAgent
-}> = ({ agent }) => {
+  storybookMetadata?: WorkspaceAgentMetadata[]
+}> = ({ agent, storybookMetadata }) => {
   const [metadata, setMetadata] = useState<
     WorkspaceAgentMetadata[] | undefined
   >(undefined)
@@ -236,6 +237,10 @@ export const AgentMetadata: FC<{
   const watchAgentMetadata = useContext(WatchAgentMetadataContext)
 
   useEffect(() => {
+    if (storybookMetadata !== undefined) {
+      setMetadata(storybookMetadata)
+      return
+    }
     const source = watchAgentMetadata(agent.id)
 
     source.onerror = (e) => {
@@ -248,10 +253,19 @@ export const AgentMetadata: FC<{
     return () => {
       source.close()
     }
-  }, [agent.id, watchAgentMetadata])
+  }, [agent.id, watchAgentMetadata, storybookMetadata])
 
   if (metadata === undefined) {
-    return <CircularProgress size={16} />
+    return (
+      <div
+        style={{
+          marginTop: 16,
+          marginBottom: 16,
+        }}
+      >
+        <CircularProgress size={16} />
+      </div>
+    )
   }
 
   return <AgentMetadataView metadata={metadata} />
@@ -264,11 +278,12 @@ const useStyles = makeStyles((theme) => ({
     border: `2px dashed ${theme.palette.divider}`,
     borderRadius: theme.shape.borderRadius,
     width: "100%",
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
   },
   metadataHeader: {
     padding: "8px",
-    display: "grid",
-    gridTemplateColumns: "repeat(4, minmax(0, 1fr))",
+    display: "flex",
     gap: theme.spacing(5),
     rowGap: theme.spacing(3),
   },
@@ -290,6 +305,7 @@ const useStyles = makeStyles((theme) => ({
     textOverflow: "ellipsis",
     overflow: "hidden",
     whiteSpace: "nowrap",
+    maxWidth: "16em",
   },
 
   metadataValueSuccess: {

site/src/components/Resources/AgentRow.stories.tsx

@@ -24,37 +24,48 @@ export default {
 
 const Template: Story<AgentRowProps> = (args) => <AgentRow {...args} />
 
+const defaultAgentMetadata = [
+  {
+    result: {
+      collected_at: "2021-05-05T00:00:00Z",
+      error: "",
+      value: "defvalue",
+      age: 5,
+    },
+    description: {
+      display_name: "DisPlay",
+      key: "defkey",
+      interval: 10,
+      timeout: 10,
+      script: "some command",
+    },
+  },
+]
+
 export const Example = Template.bind({})
 Example.args = {
   agent: MockWorkspaceAgent,
   workspace: MockWorkspace,
   applicationsHost: "",
   showApps: true,
+  storybookAgentMetadata: defaultAgentMetadata,
 }
 
 export const HideSSHButton = Template.bind({})
 HideSSHButton.args = {
-  agent: MockWorkspaceAgent,
-  workspace: MockWorkspace,
-  applicationsHost: "",
-  showApps: true,
+  ...Example.args,
   hideSSHButton: true,
 }
 
 export const HideVSCodeDesktopButton = Template.bind({})
 HideVSCodeDesktopButton.args = {
-  agent: MockWorkspaceAgent,
-  workspace: MockWorkspace,
-  applicationsHost: "",
-  showApps: true,
+  ...Example.args,
   hideVSCodeDesktopButton: true,
 }
 
 export const NotShowingApps = Template.bind({})
 NotShowingApps.args = {
-  agent: MockWorkspaceAgent,
-  workspace: MockWorkspace,
-  applicationsHost: "",
+  ...Example.args,
   showApps: false,
 }
 
@@ -81,26 +92,21 @@ BunchOfApps.args = {
 
 export const Connecting = Template.bind({})
 Connecting.args = {
+  ...Example.args,
   agent: MockWorkspaceAgentConnecting,
-  workspace: MockWorkspace,
-  applicationsHost: "",
-  showApps: true,
+  storybookAgentMetadata: [],
 }
 
 export const Timeout = Template.bind({})
 Timeout.args = {
+  ...Example.args,
   agent: MockWorkspaceAgentTimeout,
-  workspace: MockWorkspace,
-  applicationsHost: "",
-  showApps: true,
 }
 
 export const Starting = Template.bind({})
 Starting.args = {
+  ...Example.args,
   agent: MockWorkspaceAgentStarting,
-  workspace: MockWorkspace,
-  applicationsHost: "",
-  showApps: true,
 
   storybookStartupLogs: [
     "Cloning Git repository...",
@@ -117,13 +123,11 @@ Starting.args = {
 
 export const Started = Template.bind({})
 Started.args = {
+  ...Example.args,
   agent: {
     ...MockWorkspaceAgentReady,
     startup_logs_length: 1,
   },
-  workspace: MockWorkspace,
-  applicationsHost: "",
-  showApps: true,
 
   storybookStartupLogs: [
     "Cloning Git repository...",
@@ -138,67 +142,58 @@ Started.args = {
   })),
 }
 
+export const StartedNoMetadata = Template.bind({})
+StartedNoMetadata.args = {
+  ...Started.args,
+  storybookAgentMetadata: [],
+}
+
 export const StartTimeout = Template.bind({})
 StartTimeout.args = {
+  ...Example.args,
   agent: MockWorkspaceAgentStartTimeout,
-  workspace: MockWorkspace,
-  applicationsHost: "",
-  showApps: true,
 }
 
 export const StartError = Template.bind({})
 StartError.args = {
+  ...Example.args,
   agent: MockWorkspaceAgentStartError,
-  workspace: MockWorkspace,
-  applicationsHost: "",
-  showApps: true,
 }
 
 export const ShuttingDown = Template.bind({})
 ShuttingDown.args = {
+  ...Example.args,
   agent: MockWorkspaceAgentShuttingDown,
-  workspace: MockWorkspace,
-  applicationsHost: "",
-  showApps: true,
 }
 
 export const ShutdownTimeout = Template.bind({})
 ShutdownTimeout.args = {
+  ...Example.args,
   agent: MockWorkspaceAgentShutdownTimeout,
-  workspace: MockWorkspace,
-  applicationsHost: "",
-  showApps: true,
 }
 
 export const ShutdownError = Template.bind({})
 ShutdownError.args = {
+  ...Example.args,
   agent: MockWorkspaceAgentShutdownError,
-  workspace: MockWorkspace,
-  applicationsHost: "",
-  showApps: true,
 }
 
 export const Off = Template.bind({})
 Off.args = {
+  ...Example.args,
   agent: MockWorkspaceAgentOff,
-  workspace: MockWorkspace,
-  applicationsHost: "",
-  showApps: true,
 }
 
 export const ShowingPortForward = Template.bind({})
 ShowingPortForward.args = {
-  agent: MockWorkspaceAgent,
-  workspace: MockWorkspace,
+  ...Example.args,
   applicationsHost: "https://coder.com",
-  showApps: true,
 }
 
 export const Outdated = Template.bind({})
 Outdated.args = {
+  ...Example.args,
   agent: MockWorkspaceAgentOutdated,
   workspace: MockWorkspace,
-  applicationsHost: "",
-  showApps: true,
   serverVersion: "v99.999.9999+c1cdf14",
 }

site/src/components/Resources/AgentRow.tsx

@@ -29,7 +29,11 @@ import {
   LineWithID,
   workspaceAgentLogsMachine,
 } from "xServices/workspaceAgentLogs/workspaceAgentLogsXService"
-import { Workspace, WorkspaceAgent } from "../../api/typesGenerated"
+import {
+  Workspace,
+  WorkspaceAgent,
+  WorkspaceAgentMetadata,
+} from "../../api/typesGenerated"
 import { AppLink } from "../AppLink/AppLink"
 import { SSHButton } from "../SSHButton/SSHButton"
 import { Stack } from "../Stack/Stack"
@@ -51,6 +55,7 @@ export interface AgentRowProps {
   onUpdateAgent: () => void
 
   storybookStartupLogs?: LineWithID[]
+  storybookAgentMetadata?: WorkspaceAgentMetadata[]
 }
 
 export const AgentRow: FC<AgentRowProps> = ({
@@ -63,6 +68,7 @@ export const AgentRow: FC<AgentRowProps> = ({
   serverVersion,
   onUpdateAgent,
   storybookStartupLogs,
+  storybookAgentMetadata,
   sshPrefix,
 }) => {
   const styles = useStyles()
@@ -180,11 +186,7 @@ export const AgentRow: FC<AgentRowProps> = ({
         <div className={styles.agentStatusWrapper}>
           <AgentStatus agent={agent} />
         </div>
-        <Stack
-          direction="column"
-          alignItems="flex-start"
-          key={agent.id}
-          spacing={2}
+        <div
           style={{
             flex: 1,
           }}
@@ -291,7 +293,10 @@ export const AgentRow: FC<AgentRowProps> = ({
               )}
             </Stack>
           </Stack>
-          <AgentMetadata agent={agent} />
+          <AgentMetadata
+            storybookMetadata={storybookAgentMetadata}
+            agent={agent}
+          />
           {hasStartupFeatures && (
             <Stack
               direction="row"
@@ -364,7 +369,7 @@ export const AgentRow: FC<AgentRowProps> = ({
               </Popover>
             </Stack>
           )}
-        </Stack>
+        </div>
       </Stack>
       {showStartupLogs && (
         <AutoSizer disableHeight>