Refactor ssh and open port actions

coder · BrunoQuaresma · Jan 19, 2024 · Jan 16, 2024 · Jan 16, 2024 · Jan 16, 2024
commit 7db1022a13b8e8caa448bed2a2c9f261a7920d5c
@@ -183,6 +183,28 @@ export const AgentRow: FC<AgentRowProps> = ({
             </>
           )}
         </div>
+
+        {showBuiltinApps && (
+          <div css={{ display: "flex" }}>
+            {!hideSSHButton && agent.display_apps.includes("ssh_helper") && (
+              <SSHButton
+                workspaceName={workspace.name}
+                agentName={agent.name}
+                sshPrefix={sshPrefix}
+              />
+            )}
+            {proxy.preferredWildcardHostname &&
+              proxy.preferredWildcardHostname !== "" &&
+              agent.display_apps.includes("port_forwarding_helper") && (
+                <PortForwardButton
+                  host={proxy.preferredWildcardHostname}
+                  workspaceName={workspace.name}
+                  agent={agent}
+                  username={workspace.owner_name}
+                />
+              )}
+          </div>
+        )}
       </header>
 
       {agent.status === "connected" && (
@@ -220,23 +242,6 @@ export const AgentRow: FC<AgentRowProps> = ({
                   userName={workspace.owner_name}
                 />
               )}
-              {!hideSSHButton && agent.display_apps.includes("ssh_helper") && (
-                <SSHButton
-                  workspaceName={workspace.name}
-                  agentName={agent.name}
-                  sshPrefix={sshPrefix}
-                />
-              )}
-              {proxy.preferredWildcardHostname &&
-                proxy.preferredWildcardHostname !== "" &&
-                agent.display_apps.includes("port_forwarding_helper") && (
-                  <PortForwardButton
-                    host={proxy.preferredWildcardHostname}
-                    workspaceName={workspace.name}
-                    agent={agent}
-                    username={workspace.owner_name}
-                  />
-                )}
             </>
           )}
         </section>
@@ -262,7 +267,9 @@ export const AgentRow: FC<AgentRowProps> = ({
       <AgentMetadata storybookMetadata={storybookAgentMetadata} agent={agent} />
 
       {hasStartupFeatures && (
-        <section>
+        <section
+          css={(theme) => ({ borderTop: `1px solid ${theme.palette.divider}` })}
+        >
           <Collapse in={showLogs}>
             <AutoSizer disableHeight>
               {({ width }) => (
@@ -600,7 +607,6 @@ const styles = {
   startupLogs: (theme) => ({
     maxHeight: 256,
     borderBottom: `1px solid ${theme.palette.divider}`,
-    borderTop: `1px solid ${theme.palette.divider}`,
     backgroundColor: theme.palette.background.paper,
     paddingTop: 16,
 
@@ -658,7 +664,7 @@ const styles = {
     background: "transparent",
     border: 0,
     fontFamily: "inherit",
-    padding: "16px 24px",
+    padding: "12px 24px",
     color: theme.palette.text.secondary,
     cursor: "pointer",
     display: "flex",

@@ -14,8 +14,8 @@ import { BaseIcon } from "./BaseIcon";
 import { ShareIcon } from "./ShareIcon";
 
 export const DisplayAppNameMap: Record<TypesGen.DisplayApp, string> = {
-  port_forwarding_helper: "Ports",
-  ssh_helper: "SSH",
+  port_forwarding_helper: "Open ports",
+  ssh_helper: "Connect SSH",
   vscode: "VS Code Desktop",
   vscode_insiders: "VS Code Insiders",
   web_terminal: "Terminal",

@@ -20,13 +20,13 @@ import {
   HelpTooltipText,
   HelpTooltipTitle,
 } from "components/HelpTooltip/HelpTooltip";
-import { AgentButton } from "components/Resources/AgentButton";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "components/Popover/Popover";
 import { DisplayAppNameMap } from "./AppLink/AppLink";
+import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
 
 export interface PortForwardButtonProps {
   host: string;
@@ -59,14 +59,24 @@ export const PortForwardButton: FC<PortForwardButtonProps> = (props) => {
   return (
     <Popover>
       <PopoverTrigger>
-        <AgentButton disabled={!data}>
+        <Button
+          disabled={!data}
+          size="small"
+          variant="text"
+          endIcon={<KeyboardArrowDown />}
+          css={{ fontSize: 13, padding: "8px 12px" }}
+          startIcon={
+            data ? (
+              <div>
+                <span css={styles.portCount}>{data.ports.length}</span>
+              </div>
+            ) : (
+              <CircularProgress size={10} />
+            )
+          }
+        >
           {DisplayAppNameMap["port_forwarding_helper"]}
-          {data ? (
-            <div css={styles.portCount}>{data.ports.length}</div>
-          ) : (
-            <CircularProgress size={10} css={{ marginLeft: 8 }} />
-          )}
-        </AgentButton>
+        </Button>
       </PopoverTrigger>
       <PopoverContent horizontal="right" classes={{ paper }}>
         <PortForwardPopoverView {...props} ports={data?.ports} />
@@ -214,8 +224,7 @@ const styles = {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: theme.experimental.l2.background,
-    marginLeft: 8,
+    backgroundColor: theme.palette.action.selected,
   }),
 
   portLink: (theme) => ({

@@ -14,8 +14,9 @@ import {
   PopoverTrigger,
 } from "components/Popover/Popover";
 import { Stack } from "components/Stack/Stack";
-import { AgentButton } from "../AgentButton";
 import { DisplayAppNameMap } from "../AppLink/AppLink";
+import Button from "@mui/material/Button";
+import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
 
 export interface SSHButtonProps {
   workspaceName: string;
@@ -35,7 +36,14 @@ export const SSHButton: FC<PropsWithChildren<SSHButtonProps>> = ({
   return (
     <Popover isDefaultOpen={isDefaultOpen}>
       <PopoverTrigger>
-        <AgentButton>{DisplayAppNameMap["ssh_helper"]}</AgentButton>
+        <Button
+          size="small"
+          variant="text"
+          endIcon={<KeyboardArrowDown />}
+          css={{ fontSize: 13, padding: "8px 12px" }}
+        >
+          {DisplayAppNameMap["ssh_helper"]}
+        </Button>
       </PopoverTrigger>
 
       <PopoverContent horizontal="right" classes={{ paper }}>