Refactor agent button

coder · BrunoQuaresma · Nov 27, 2023 · Nov 24, 2023 · Nov 24, 2023 · Nov 24, 2023
commit c89cbadfc1c8dece3a280f7fe301a9256963d38f
diff --git a/site/src/components/Resources/AgentButton.tsx b/site/src/components/Resources/AgentButton.tsx
@@ -1,34 +1,28 @@
 import Button, { ButtonProps } from "@mui/material/Button";
-import { FC, forwardRef } from "react";
-
-export const PrimaryAgentButton: FC<ButtonProps> = ({
-  className,
-  ...props
-}) => {
-  return (
-    <Button
-      color="neutral"
-      {...props}
-      sx={{
-        backgroundColor: (theme) => theme.palette.background.default,
-        "&:hover": {
-          backgroundColor: (theme) => theme.palette.background.paper,
-        },
-        // Making them smaller since those icons don't have a padding around them
-        "& .MuiButton-startIcon": {
-          width: 12,
-          height: 12,
-          "& svg": { width: "100%", height: "100%" },
-        },
-        ...props.sx,
-      }}
-    />
-  );
-};
+import { forwardRef } from "react";
 
 // eslint-disable-next-line react/display-name -- Name is inferred from variable name
-export const SecondaryAgentButton = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, ...props }, ref) => {
-    return <Button ref={ref} className={className} {...props} />;
+export const AgentButton = forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => {
+    return (
+      <Button
+        color="neutral"
+        {...props}
+        ref={ref}
+        sx={{
+          backgroundColor: (theme) => theme.palette.background.default,
+          "&:hover": {
+            backgroundColor: (theme) => theme.palette.background.paper,
+          },
+          // Making them smaller since those icons don't have a padding around them
+          "& .MuiButton-startIcon": {
+            width: 12,
+            height: 12,
+            "& svg": { width: "100%", height: "100%" },
+          },
+          ...props.sx,
+        }}
+      />
+    );
   },
 );
diff --git a/site/src/components/Resources/AppLink/AppLink.tsx b/site/src/components/Resources/AppLink/AppLink.tsx
@@ -7,7 +7,7 @@ import { useTheme } from "@emotion/react";
 import { getApiKey } from "api/api";
 import type * as TypesGen from "api/typesGenerated";
 import { useProxy } from "contexts/ProxyContext";
-import { PrimaryAgentButton } from "components/Resources/AgentButton";
+import { AgentButton } from "components/Resources/AgentButton";
 import { createAppLinkHref } from "utils/apps";
 import { generateRandomString } from "utils/random";
 import { BaseIcon } from "./BaseIcon";
@@ -86,7 +86,7 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
   const isPrivateApp = app.sharing_level === "owner";
 
   const button = (
-    <PrimaryAgentButton
+    <AgentButton
       startIcon={icon}
       endIcon={isPrivateApp ? undefined : <ShareIcon app={app} />}
       disabled={!canClick}
@@ -100,7 +100,7 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
       >
         {appDisplayName}
       </span>
-    </PrimaryAgentButton>
+    </AgentButton>
   );
 
   return (

diff --git a/site/src/components/Resources/PortForwardButton.tsx b/site/src/components/Resources/PortForwardButton.tsx
@@ -20,7 +20,7 @@ import {
   HelpTooltipText,
   HelpTooltipTitle,
 } from "components/HelpTooltip/HelpTooltip";
-import { SecondaryAgentButton } from "components/Resources/AgentButton";
+import { AgentButton } from "components/Resources/AgentButton";
 import {
   Popover,
   PopoverContent,
@@ -49,14 +49,14 @@ export const PortForwardButton: FC<PortForwardButtonProps> = (props) => {
   return (
     <Popover>
       <PopoverTrigger>
-        <SecondaryAgentButton disabled={!portsQuery.data}>
+        <AgentButton disabled={!portsQuery.data}>
           Ports
           {portsQuery.data ? (
             <div css={styles.portCount}>{portsQuery.data.ports.length}</div>
           ) : (
             <CircularProgress size={10} css={{ marginLeft: 8 }} />
           )}
-        </SecondaryAgentButton>
+        </AgentButton>
       </PopoverTrigger>
       <PopoverContent horizontal="right" classes={{ paper }}>
         <PortForwardPopoverView {...props} ports={portsQuery.data?.ports} />

diff --git a/site/src/components/Resources/SSHButton/SSHButton.tsx b/site/src/components/Resources/SSHButton/SSHButton.tsx
@@ -14,7 +14,7 @@ import {
   PopoverTrigger,
 } from "components/Popover/Popover";
 import { Stack } from "components/Stack/Stack";
-import { SecondaryAgentButton } from "../AgentButton";
+import { AgentButton } from "../AgentButton";
 
 export interface SSHButtonProps {
   workspaceName: string;
@@ -34,7 +34,7 @@ export const SSHButton: FC<PropsWithChildren<SSHButtonProps>> = ({
   return (
     <Popover isDefaultOpen={isDefaultOpen}>
       <PopoverTrigger>
-        <SecondaryAgentButton>SSH</SecondaryAgentButton>
+        <AgentButton>SSH</AgentButton>
       </PopoverTrigger>
 
       <PopoverContent horizontal="right" classes={{ paper }}>

diff --git a/site/src/components/Resources/TerminalLink/TerminalLink.tsx b/site/src/components/Resources/TerminalLink/TerminalLink.tsx
@@ -1,5 +1,5 @@
 import Link from "@mui/material/Link";
-import { SecondaryAgentButton } from "components/Resources/AgentButton";
+import { AgentButton } from "components/Resources/AgentButton";
 import { FC } from "react";
 import * as TypesGen from "api/typesGenerated";
 import { generateRandomString } from "utils/random";
@@ -46,7 +46,7 @@ export const TerminalLink: FC<React.PropsWithChildren<TerminalLinkProps>> = ({
       }}
       data-testid="terminal"
     >
-      <SecondaryAgentButton>{Language.linkText}</SecondaryAgentButton>
+      <AgentButton>{Language.linkText}</AgentButton>
     </Link>
   );
 };
diff --git a/site/src/components/Resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx b/site/src/components/Resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx
@@ -2,7 +2,7 @@ import { FC, PropsWithChildren, useState, useRef } from "react";
 import { getApiKey } from "api/api";
 import { VSCodeIcon } from "components/Icons/VSCodeIcon";
 import { VSCodeInsidersIcon } from "components/Icons/VSCodeInsidersIcon";
-import { PrimaryAgentButton } from "components/Resources/AgentButton";
+import { AgentButton } from "components/Resources/AgentButton";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import ButtonGroup from "@mui/material/ButtonGroup";
 import { useLocalStorage } from "hooks";
@@ -63,7 +63,7 @@ export const VSCodeDesktopButton: FC<
           <VSCodeInsidersButton {...props} />
         )}
 
-        <PrimaryAgentButton
+        <AgentButton
           aria-controls={
             isVariantMenuOpen ? "vscode-variant-button-menu" : undefined
           }
@@ -77,7 +77,7 @@ export const VSCodeDesktopButton: FC<
           sx={{ px: 0 }}
         >
           <KeyboardArrowDownIcon sx={{ fontSize: 16 }} />
-        </PrimaryAgentButton>
+        </AgentButton>
       </ButtonGroup>
 
       <Menu
@@ -126,7 +126,7 @@ const VSCodeButton = ({
   const [loading, setLoading] = useState(false);
 
   return (
-    <PrimaryAgentButton
+    <AgentButton
       startIcon={<VSCodeIcon />}
       disabled={loading}
       onClick={() => {
@@ -157,7 +157,7 @@ const VSCodeButton = ({
       }}
     >
       VS Code Desktop
-    </PrimaryAgentButton>
+    </AgentButton>
   );
 };
 
@@ -170,7 +170,7 @@ const VSCodeInsidersButton = ({
   const [loading, setLoading] = useState(false);
 
   return (
-    <PrimaryAgentButton
+    <AgentButton
       startIcon={<VSCodeInsidersIcon />}
       disabled={loading}
       onClick={() => {
@@ -201,6 +201,6 @@ const VSCodeInsidersButton = ({
       }}
     >
       VS Code Insiders
-    </PrimaryAgentButton>
+    </AgentButton>
   );
 };