From 3c6e6ff4a2b715109cca3fe0fe5569560e486789 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 24 Apr 2023 19:04:43 +0000
Subject: [PATCH 1/4] Combine buttons

---
 site/src/components/AppLink/AppLink.tsx       | 25 +-----
 .../PortForwardButton/PortForwardButton.tsx   | 16 +---
 site/src/components/Resources/AgentButton.tsx | 68 ++++++++++++++++
 site/src/components/Resources/AgentRow.tsx    | 79 ++++++-------------
 site/src/components/SSHButton/SSHButton.tsx   | 17 +---
 .../components/TerminalLink/TerminalLink.tsx  | 31 ++------
 .../VSCodeDesktopButton.tsx                   | 34 +-------
 7 files changed, 113 insertions(+), 157 deletions(-)
 create mode 100644 site/src/components/Resources/AgentButton.tsx

diff --git a/site/src/components/AppLink/AppLink.tsx b/site/src/components/AppLink/AppLink.tsx
index 6e1df2055ecdd..afeb36f26ec96 100644
--- a/site/src/components/AppLink/AppLink.tsx
+++ b/site/src/components/AppLink/AppLink.tsx
@@ -1,9 +1,9 @@
-import Button from "@material-ui/core/Button"
 import CircularProgress from "@material-ui/core/CircularProgress"
 import Link from "@material-ui/core/Link"
 import { makeStyles } from "@material-ui/core/styles"
 import Tooltip from "@material-ui/core/Tooltip"
 import ErrorOutlineIcon from "@material-ui/icons/ErrorOutline"
+import { PrimaryAgentButton } from "components/Resources/AgentButton"
 import { FC } from "react"
 import { combineClasses } from "utils/combineClasses"
 import * as TypesGen from "../../api/typesGenerated"
@@ -83,16 +83,15 @@ export const AppLink: FC<AppLinkProps> = ({
   const isPrivateApp = app.sharing_level === "owner"
 
   const button = (
-    <Button
+    <PrimaryAgentButton
       startIcon={icon}
       endIcon={isPrivateApp ? undefined : <ShareIcon app={app} />}
-      className={styles.button}
       disabled={!canClick}
     >
       <span className={combineClasses({ [styles.appName]: !isPrivateApp })}>
         {appDisplayName}
       </span>
-    </Button>
+    </PrimaryAgentButton>
   )
 
   return (
@@ -132,24 +131,6 @@ const useStyles = makeStyles((theme) => ({
     textDecoration: "none !important",
   },
 
-  button: {
-    whiteSpace: "nowrap",
-    backgroundColor: theme.palette.background.default,
-    padding: theme.spacing(0, 3),
-    height: 44,
-    borderRadius: 6,
-
-    "&:hover": {
-      backgroundColor: `${theme.palette.background.paper} !important`,
-    },
-
-    "& .MuiButton-startIcon": {
-      width: 16,
-      height: 16,
-      marginRight: theme.spacing(1.5),
-    },
-  },
-
   unhealthyIcon: {
     color: theme.palette.warning.light,
   },
diff --git a/site/src/components/PortForwardButton/PortForwardButton.tsx b/site/src/components/PortForwardButton/PortForwardButton.tsx
index b6bf66b93682f..d54da30e1fc84 100644
--- a/site/src/components/PortForwardButton/PortForwardButton.tsx
+++ b/site/src/components/PortForwardButton/PortForwardButton.tsx
@@ -16,6 +16,7 @@ import {
 import { Maybe } from "components/Conditionals/Maybe"
 import { useMachine } from "@xstate/react"
 import { portForwardMachine } from "xServices/portForward/portForwardXService"
+import { SecondaryAgentButton } from "components/Resources/AgentButton"
 
 export interface PortForwardButtonProps {
   host: string
@@ -147,17 +148,14 @@ export const PortForwardButton: React.FC<PortForwardButtonProps> = (props) => {
 
   return (
     <>
-      <Button
-        variant="outlined"
-        className={styles.button}
-        size="small"
+      <SecondaryAgentButton
         ref={anchorRef}
         onClick={() => {
           setIsOpen(true)
         }}
       >
         Port forward
-      </Button>
+      </SecondaryAgentButton>
       <Popover
         classes={{ paper: styles.popoverPaper }}
         id={id}
@@ -208,12 +206,4 @@ const useStyles = makeStyles((theme) => ({
   form: {
     margin: theme.spacing(1.5, 0, 0),
   },
-
-  button: {
-    fontSize: 12,
-    fontWeight: 500,
-    height: theme.spacing(4),
-    minHeight: theme.spacing(4),
-    borderRadius: 4,
-  },
 }))
diff --git a/site/src/components/Resources/AgentButton.tsx b/site/src/components/Resources/AgentButton.tsx
new file mode 100644
index 0000000000000..9b3d7975b35ec
--- /dev/null
+++ b/site/src/components/Resources/AgentButton.tsx
@@ -0,0 +1,68 @@
+import { makeStyles } from "@material-ui/core/styles"
+import Button, { ButtonProps } from "@material-ui/core/Button"
+import { FC } from "react"
+import { combineClasses } from "utils/combineClasses"
+
+export const PrimaryAgentButton: FC<ButtonProps> = ({
+  className,
+  ...props
+}) => {
+  const styles = useStyles()
+
+  return (
+    <Button
+      className={combineClasses([styles.primaryButton, className])}
+      {...props}
+    />
+  )
+}
+
+export const SecondaryAgentButton: FC<ButtonProps> = ({
+  className,
+  ...props
+}) => {
+  const styles = useStyles()
+
+  return (
+    <Button
+      variant="outlined"
+      className={combineClasses([styles.secondaryButton, className])}
+      {...props}
+    />
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  primaryButton: {
+    whiteSpace: "nowrap",
+    backgroundColor: theme.palette.background.default,
+    height: 36,
+    minHeight: 36,
+    borderRadius: 4,
+    fontWeight: 500,
+    fontSize: 14,
+
+    "&:hover": {
+      backgroundColor: `${theme.palette.background.paper} !important`,
+    },
+
+    "& .MuiButton-startIcon": {
+      width: 12,
+      height: 12,
+      marginRight: theme.spacing(1.5),
+
+      "& svg": {
+        width: "100%",
+        height: "100%",
+      },
+    },
+  },
+
+  secondaryButton: {
+    fontSize: 14,
+    fontWeight: 500,
+    height: 36,
+    minHeight: 36,
+    borderRadius: 4,
+  },
+}))
diff --git a/site/src/components/Resources/AgentRow.tsx b/site/src/components/Resources/AgentRow.tsx
index fc388b9ddc03a..a418756827802 100644
--- a/site/src/components/Resources/AgentRow.tsx
+++ b/site/src/components/Resources/AgentRow.tsx
@@ -218,7 +218,29 @@ export const AgentRow: FC<AgentRowProps> = ({
         </div>
 
         {agent.status === "connected" && (
-          <div className={styles.agentDefaultActions}>
+          <div className={styles.agentButtons}>
+            {shouldDisplayApps && (
+              <>
+                {!hideVSCodeDesktopButton && (
+                  <VSCodeDesktopButton
+                    userName={workspace.owner_name}
+                    workspaceName={workspace.name}
+                    agentName={agent.name}
+                    folderPath={agent.expanded_directory}
+                  />
+                )}
+                {agent.apps.map((app) => (
+                  <AppLink
+                    key={app.slug}
+                    appsHost={applicationsHost}
+                    app={app}
+                    agent={agent}
+                    workspace={workspace}
+                  />
+                ))}
+              </>
+            )}
+
             <TerminalLink
               workspaceName={workspace.name}
               agentName={agent.name}
@@ -244,7 +266,7 @@ export const AgentRow: FC<AgentRowProps> = ({
         )}
 
         {agent.status === "connecting" && (
-          <div className={styles.agentDefaultActions}>
+          <div className={styles.agentButtons}>
             <Skeleton
               width={80}
               height={32}
@@ -263,49 +285,6 @@ export const AgentRow: FC<AgentRowProps> = ({
 
       <AgentMetadata storybookMetadata={storybookAgentMetadata} agent={agent} />
 
-      {shouldDisplayApps && (
-        <div className={styles.apps}>
-          {agent.status === "connected" && (
-            <>
-              {!hideVSCodeDesktopButton && (
-                <VSCodeDesktopButton
-                  userName={workspace.owner_name}
-                  workspaceName={workspace.name}
-                  agentName={agent.name}
-                  folderPath={agent.expanded_directory}
-                />
-              )}
-              {agent.apps.map((app) => (
-                <AppLink
-                  key={app.slug}
-                  appsHost={applicationsHost}
-                  app={app}
-                  agent={agent}
-                  workspace={workspace}
-                />
-              ))}
-            </>
-          )}
-
-          {agent.status === "connecting" && (
-            <>
-              <Skeleton
-                width={80}
-                height={36}
-                variant="rect"
-                className={styles.buttonSkeleton}
-              />
-              <Skeleton
-                width={110}
-                height={36}
-                variant="rect"
-                className={styles.buttonSkeleton}
-              />
-            </>
-          )}
-        </div>
-      )}
-
       {hasStartupFeatures && (
         <div className={styles.logsPanel}>
           {showStartupLogs && (
@@ -473,7 +452,7 @@ const useStyles = makeStyles((theme) => ({
     padding: theme.spacing(2, 4),
   },
 
-  agentDefaultActions: {
+  agentButtons: {
     display: "flex",
     gap: theme.spacing(1),
     marginLeft: "auto",
@@ -532,14 +511,6 @@ const useStyles = makeStyles((theme) => ({
     },
   },
 
-  apps: {
-    display: "flex",
-    flexWrap: "wrap",
-    gap: theme.spacing(1.5),
-    padding: theme.spacing(4),
-    borderTop: `1px solid ${theme.palette.divider}`,
-  },
-
   logsPanel: {
     borderTop: `1px solid ${theme.palette.divider}`,
   },
diff --git a/site/src/components/SSHButton/SSHButton.tsx b/site/src/components/SSHButton/SSHButton.tsx
index 6fca82278d808..dfeff8341f37b 100644
--- a/site/src/components/SSHButton/SSHButton.tsx
+++ b/site/src/components/SSHButton/SSHButton.tsx
@@ -1,6 +1,6 @@
-import Button from "@material-ui/core/Button"
 import Popover from "@material-ui/core/Popover"
 import { makeStyles } from "@material-ui/core/styles"
+import { SecondaryAgentButton } from "components/Resources/AgentButton"
 import { useRef, useState } from "react"
 import { CodeExample } from "../CodeExample/CodeExample"
 import { Stack } from "../Stack/Stack"
@@ -34,17 +34,14 @@ export const SSHButton: React.FC<React.PropsWithChildren<SSHButtonProps>> = ({
 
   return (
     <>
-      <Button
-        className={styles.button}
-        variant="outlined"
-        size="small"
+      <SecondaryAgentButton
         ref={anchorRef}
         onClick={() => {
           setIsOpen(true)
         }}
       >
         Connect SSH
-      </Button>
+      </SecondaryAgentButton>
       <Popover
         classes={{ paper: styles.popoverPaper }}
         id={id}
@@ -126,12 +123,4 @@ const useStyles = makeStyles((theme) => ({
   textHelper: {
     fontWeight: 400,
   },
-
-  button: {
-    fontSize: 12,
-    fontWeight: 500,
-    height: theme.spacing(4),
-    minHeight: theme.spacing(4),
-    borderRadius: 4,
-  },
 }))
diff --git a/site/src/components/TerminalLink/TerminalLink.tsx b/site/src/components/TerminalLink/TerminalLink.tsx
index c4cb39ff1ba38..05d51d31e924b 100644
--- a/site/src/components/TerminalLink/TerminalLink.tsx
+++ b/site/src/components/TerminalLink/TerminalLink.tsx
@@ -1,8 +1,7 @@
-import Button from "@material-ui/core/Button"
-import { makeStyles } from "@material-ui/core/styles"
+import Link from "@material-ui/core/Link"
+import { SecondaryAgentButton } from "components/Resources/AgentButton"
 import { FC } from "react"
 import * as TypesGen from "../../api/typesGenerated"
-import { combineClasses } from "../../utils/combineClasses"
 import { generateRandomString } from "../../utils/random"
 
 export const Language = {
@@ -14,7 +13,6 @@ export interface TerminalLinkProps {
   agentName?: TypesGen.WorkspaceAgent["name"]
   userName?: TypesGen.User["username"]
   workspaceName: TypesGen.Workspace["name"]
-  className?: string
 }
 
 /**
@@ -28,20 +26,15 @@ export const TerminalLink: FC<React.PropsWithChildren<TerminalLinkProps>> = ({
   agentName,
   userName = "me",
   workspaceName,
-  className = "",
 }) => {
-  const styles = useStyles()
   const href = `/@${userName}/${workspaceName}${
     agentName ? `.${agentName}` : ""
   }/terminal`
 
   return (
-    <Button
+    <Link
+      underline="none"
       href={href}
-      component="a"
-      size="small"
-      variant="outlined"
-      className={combineClasses([styles.button, className])}
       target="_blank"
       onClick={(event) => {
         event.preventDefault()
@@ -52,17 +45,9 @@ export const TerminalLink: FC<React.PropsWithChildren<TerminalLinkProps>> = ({
         )
       }}
     >
-      {Language.linkText}
-    </Button>
+      <SecondaryAgentButton size="small" variant="outlined">
+        {Language.linkText}
+      </SecondaryAgentButton>
+    </Link>
   )
 }
-
-const useStyles = makeStyles((theme) => ({
-  button: {
-    fontSize: 12,
-    fontWeight: 500,
-    height: theme.spacing(4),
-    minHeight: theme.spacing(4),
-    borderRadius: 4,
-  },
-}))
diff --git a/site/src/components/VSCodeDesktopButton/VSCodeDesktopButton.tsx b/site/src/components/VSCodeDesktopButton/VSCodeDesktopButton.tsx
index 42fd9e430007e..ea346d08511a2 100644
--- a/site/src/components/VSCodeDesktopButton/VSCodeDesktopButton.tsx
+++ b/site/src/components/VSCodeDesktopButton/VSCodeDesktopButton.tsx
@@ -1,8 +1,7 @@
-import { makeStyles } from "@material-ui/core/styles"
-import Button from "@material-ui/core/Button"
 import { getApiKey } from "api/api"
 import { VSCodeIcon } from "components/Icons/VSCodeIcon"
 import { FC, PropsWithChildren, useState } from "react"
+import { PrimaryAgentButton } from "components/Resources/AgentButton"
 
 export interface VSCodeDesktopButtonProps {
   userName: string
@@ -15,13 +14,11 @@ export const VSCodeDesktopButton: FC<
   PropsWithChildren<VSCodeDesktopButtonProps>
 > = ({ userName, workspaceName, agentName, folderPath }) => {
   const [loading, setLoading] = useState(false)
-  const styles = useStyles()
 
   return (
-    <Button
+    <PrimaryAgentButton
       startIcon={<VSCodeIcon />}
       disabled={loading}
-      className={styles.button}
       onClick={() => {
         setLoading(true)
         getApiKey()
@@ -50,31 +47,6 @@ export const VSCodeDesktopButton: FC<
       }}
     >
       VS Code Desktop
-    </Button>
+    </PrimaryAgentButton>
   )
 }
-
-const useStyles = makeStyles((theme) => ({
-  button: {
-    whiteSpace: "nowrap",
-    backgroundColor: theme.palette.background.default,
-    padding: theme.spacing(0, 3),
-    height: 44,
-    borderRadius: 6,
-
-    "&:hover": {
-      backgroundColor: `${theme.palette.background.paper} !important`,
-    },
-
-    "& .MuiButton-startIcon": {
-      marginRight: theme.spacing(1.5),
-      width: 16,
-      height: 16,
-
-      "& svg": {
-        width: "100%",
-        height: "100%",
-      },
-    },
-  },
-}))

From 7980f45f16d9edc75911a2bce7a8128c85bc7933 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 24 Apr 2023 19:17:30 +0000
Subject: [PATCH 2/4] Fix mobile

---
 .../components/Resources/AgentMetadata.tsx    |  8 +++++
 site/src/components/Resources/AgentRow.tsx    | 30 ++++++++++++++-----
 2 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/site/src/components/Resources/AgentMetadata.tsx b/site/src/components/Resources/AgentMetadata.tsx
index 60c9867396d30..6a87ef3908dbb 100644
--- a/site/src/components/Resources/AgentMetadata.tsx
+++ b/site/src/components/Resources/AgentMetadata.tsx
@@ -181,7 +181,10 @@ const useStyles = makeStyles((theme) => ({
     padding: theme.spacing(2.5, 4),
     borderTop: `1px solid ${theme.palette.divider}`,
     background: theme.palette.background.paper,
+    overflowX: "auto",
+    scrollPadding: theme.spacing(0, 4),
   },
+
   metadata: {
     fontSize: 12,
     lineHeight: "normal",
@@ -189,6 +192,11 @@ const useStyles = makeStyles((theme) => ({
     flexDirection: "column",
     gap: theme.spacing(0.5),
     overflow: "visible",
+
+    // Because of scrolling
+    "&:last-child": {
+      paddingRight: theme.spacing(4),
+    },
   },
 
   metadataLabel: {
diff --git a/site/src/components/Resources/AgentRow.tsx b/site/src/components/Resources/AgentRow.tsx
index a418756827802..25643ad1f3bf6 100644
--- a/site/src/components/Resources/AgentRow.tsx
+++ b/site/src/components/Resources/AgentRow.tsx
@@ -178,12 +178,7 @@ export const AgentRow: FC<AgentRowProps> = ({
         styles[`agentRow-lifecycle-${agent.lifecycle_state}`],
       ])}
     >
-      <Stack
-        direction="row"
-        alignItems="center"
-        spacing={6}
-        className={styles.agentInfo}
-      >
+      <div className={styles.agentInfo}>
         <div className={styles.agentNameAndStatus}>
           <Stack alignItems="center" direction="row" spacing={3}>
             <AgentStatus agent={agent} />
@@ -281,7 +276,7 @@ export const AgentRow: FC<AgentRowProps> = ({
             />
           </div>
         )}
-      </Stack>
+      </div>
 
       <AgentMetadata storybookMetadata={storybookAgentMetadata} agent={agent} />
 
@@ -450,12 +445,25 @@ const useStyles = makeStyles((theme) => ({
 
   agentInfo: {
     padding: theme.spacing(2, 4),
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(6),
+    flexWrap: "wrap",
+
+    [theme.breakpoints.down("md")]: {
+      gap: theme.spacing(2),
+    },
   },
 
   agentButtons: {
     display: "flex",
     gap: theme.spacing(1),
     marginLeft: "auto",
+    flexWrap: "wrap",
+
+    [theme.breakpoints.down("md")]: {
+      marginLeft: 0,
+    },
   },
 
   agentDescription: {
@@ -483,6 +491,10 @@ const useStyles = makeStyles((theme) => ({
     display: "flex",
     alignItems: "center",
     gap: theme.spacing(4),
+
+    [theme.breakpoints.down("md")]: {
+      width: "100%",
+    },
   },
 
   agentName: {
@@ -492,6 +504,10 @@ const useStyles = makeStyles((theme) => ({
     maxWidth: 260,
     fontWeight: 600,
     fontSize: theme.spacing(2),
+
+    [theme.breakpoints.down("md")]: {
+      overflow: "unset",
+    },
   },
 
   agentDataGroup: {

From 5e21eb9b6e37ec664eba552a308dfadc120f9bc1 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 24 Apr 2023 19:19:41 +0000
Subject: [PATCH 3/4] Add collapse

---
 site/src/components/Resources/AgentRow.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/site/src/components/Resources/AgentRow.tsx b/site/src/components/Resources/AgentRow.tsx
index 25643ad1f3bf6..0aeef308691bc 100644
--- a/site/src/components/Resources/AgentRow.tsx
+++ b/site/src/components/Resources/AgentRow.tsx
@@ -42,6 +42,7 @@ import { AgentLatency } from "./AgentLatency"
 import { AgentMetadata } from "./AgentMetadata"
 import { AgentVersion } from "./AgentVersion"
 import { AgentStatus } from "./AgentStatus"
+import Collapse from "@material-ui/core/Collapse"
 
 export interface AgentRowProps {
   agent: WorkspaceAgent
@@ -282,7 +283,7 @@ export const AgentRow: FC<AgentRowProps> = ({
 
       {hasStartupFeatures && (
         <div className={styles.logsPanel}>
-          {showStartupLogs && (
+          <Collapse in={showStartupLogs}>
             <AutoSizer disableHeight>
               {({ width }) => (
                 <List
@@ -305,7 +306,8 @@ export const AgentRow: FC<AgentRowProps> = ({
                 </List>
               )}
             </AutoSizer>
-          )}
+          </Collapse>
+
           <div className={styles.logsPanelButtons}>
             {showStartupLogs ? (
               <button

From 31b87e658aaea95e53a500cbb3f6a61d760f9dbb Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 24 Apr 2023 19:42:55 +0000
Subject: [PATCH 4/4] Fix a few styles

---
 site/src/components/Resources/AgentRow.tsx | 29 ++++++++++++++++------
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/site/src/components/Resources/AgentRow.tsx b/site/src/components/Resources/AgentRow.tsx
index 0aeef308691bc..c26b13a0690b5 100644
--- a/site/src/components/Resources/AgentRow.tsx
+++ b/site/src/components/Resources/AgentRow.tsx
@@ -181,7 +181,7 @@ export const AgentRow: FC<AgentRowProps> = ({
     >
       <div className={styles.agentInfo}>
         <div className={styles.agentNameAndStatus}>
-          <Stack alignItems="center" direction="row" spacing={3}>
+          <div className={styles.agentNameAndInfo}>
             <AgentStatus agent={agent} />
             <div className={styles.agentName}>{agent.name}</div>
             <Stack
@@ -210,7 +210,7 @@ export const AgentRow: FC<AgentRowProps> = ({
                 </>
               )}
             </Stack>
-          </Stack>
+          </div>
         </div>
 
         {agent.status === "connected" && (
@@ -452,19 +452,32 @@ const useStyles = makeStyles((theme) => ({
     gap: theme.spacing(6),
     flexWrap: "wrap",
 
-    [theme.breakpoints.down("md")]: {
+    [theme.breakpoints.down("sm")]: {
       gap: theme.spacing(2),
     },
   },
 
+  agentNameAndInfo: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(3),
+    flexWrap: "wrap",
+
+    [theme.breakpoints.down("sm")]: {
+      gap: theme.spacing(1.5),
+    },
+  },
+
   agentButtons: {
     display: "flex",
     gap: theme.spacing(1),
-    marginLeft: "auto",
+    justifyContent: "flex-end",
     flexWrap: "wrap",
+    flex: 1,
 
-    [theme.breakpoints.down("md")]: {
+    [theme.breakpoints.down("sm")]: {
       marginLeft: 0,
+      justifyContent: "flex-start",
     },
   },
 
@@ -494,7 +507,7 @@ const useStyles = makeStyles((theme) => ({
     alignItems: "center",
     gap: theme.spacing(4),
 
-    [theme.breakpoints.down("md")]: {
+    [theme.breakpoints.down("sm")]: {
       width: "100%",
     },
   },
@@ -506,8 +519,10 @@ const useStyles = makeStyles((theme) => ({
     maxWidth: 260,
     fontWeight: 600,
     fontSize: theme.spacing(2),
+    flexShrink: 0,
+    width: "fit-content",
 
-    [theme.breakpoints.down("md")]: {
+    [theme.breakpoints.down("sm")]: {
       overflow: "unset",
     },
   },