From 0e469031b8cc3e7e99dbd58432b454a626e49f64 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Wed, 26 Apr 2023 12:33:23 -0300
Subject: [PATCH] fix(site): Fix secondary buttons with popovers (#7296)

---
 site/src/components/Resources/AgentButton.tsx |  29 ++---
 site/src/components/SSHButton/SSHButton.tsx   | 108 +++++++++---------
 2 files changed, 70 insertions(+), 67 deletions(-)

diff --git a/site/src/components/Resources/AgentButton.tsx b/site/src/components/Resources/AgentButton.tsx
index 9b3d7975b3..1929ad2878 100644
--- a/site/src/components/Resources/AgentButton.tsx
+++ b/site/src/components/Resources/AgentButton.tsx
@@ -1,6 +1,6 @@
 import { makeStyles } from "@material-ui/core/styles"
 import Button, { ButtonProps } from "@material-ui/core/Button"
-import { FC } from "react"
+import { FC, forwardRef } from "react"
 import { combineClasses } from "utils/combineClasses"
 
 export const PrimaryAgentButton: FC<ButtonProps> = ({
@@ -17,20 +17,21 @@ export const PrimaryAgentButton: FC<ButtonProps> = ({
   )
 }
 
-export const SecondaryAgentButton: FC<ButtonProps> = ({
-  className,
-  ...props
-}) => {
-  const styles = useStyles()
+// eslint-disable-next-line react/display-name -- Name is inferred from variable name
+export const SecondaryAgentButton = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, ...props }, ref) => {
+    const styles = useStyles()
 
-  return (
-    <Button
-      variant="outlined"
-      className={combineClasses([styles.secondaryButton, className])}
-      {...props}
-    />
-  )
-}
+    return (
+      <Button
+        ref={ref}
+        variant="outlined"
+        className={combineClasses([styles.secondaryButton, className])}
+        {...props}
+      />
+    )
+  },
+)
 
 const useStyles = makeStyles((theme) => ({
   primaryButton: {
diff --git a/site/src/components/SSHButton/SSHButton.tsx b/site/src/components/SSHButton/SSHButton.tsx
index dfeff8341f..6e0880057f 100644
--- a/site/src/components/SSHButton/SSHButton.tsx
+++ b/site/src/components/SSHButton/SSHButton.tsx
@@ -42,62 +42,64 @@ export const SSHButton: React.FC<React.PropsWithChildren<SSHButtonProps>> = ({
       >
         Connect SSH
       </SecondaryAgentButton>
-      <Popover
-        classes={{ paper: styles.popoverPaper }}
-        id={id}
-        open={isOpen}
-        anchorEl={anchorRef.current}
-        onClose={onClose}
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "left",
-        }}
-        transformOrigin={{
-          vertical: "top",
-          horizontal: "left",
-        }}
-      >
-        <HelpTooltipText>
-          Run the following commands to connect with SSH:
-        </HelpTooltipText>
+      <div>
+        <Popover
+          classes={{ paper: styles.popoverPaper }}
+          id={id}
+          open={isOpen}
+          anchorEl={anchorRef.current}
+          onClose={onClose}
+          anchorOrigin={{
+            vertical: "bottom",
+            horizontal: "left",
+          }}
+          transformOrigin={{
+            vertical: "top",
+            horizontal: "left",
+          }}
+        >
+          <HelpTooltipText>
+            Run the following commands to connect with SSH:
+          </HelpTooltipText>
 
-        <Stack spacing={0.5} className={styles.codeExamples}>
-          <div>
-            <HelpTooltipText>
-              <strong className={styles.codeExampleLabel}>
-                Configure SSH hosts on machine:
-              </strong>
-            </HelpTooltipText>
-            <CodeExample code="coder config-ssh" />
-          </div>
+          <Stack spacing={0.5} className={styles.codeExamples}>
+            <div>
+              <HelpTooltipText>
+                <strong className={styles.codeExampleLabel}>
+                  Configure SSH hosts on machine:
+                </strong>
+              </HelpTooltipText>
+              <CodeExample code="coder config-ssh" />
+            </div>
 
-          <div>
-            <HelpTooltipText>
-              <strong className={styles.codeExampleLabel}>
-                Connect to the agent:
-              </strong>
-            </HelpTooltipText>
-            <CodeExample
-              code={`ssh ${sshPrefix}${workspaceName}.${agentName}`}
-            />
-          </div>
-        </Stack>
+            <div>
+              <HelpTooltipText>
+                <strong className={styles.codeExampleLabel}>
+                  Connect to the agent:
+                </strong>
+              </HelpTooltipText>
+              <CodeExample
+                code={`ssh ${sshPrefix}${workspaceName}.${agentName}`}
+              />
+            </div>
+          </Stack>
 
-        <HelpTooltipLinksGroup>
-          <HelpTooltipLink href="https://coder.com/docs/coder-oss/latest/install">
-            Install Coder CLI
-          </HelpTooltipLink>
-          <HelpTooltipLink href="https://coder.com/docs/coder-oss/latest/ides#vs-code-remote">
-            Connect via VS Code Remote SSH
-          </HelpTooltipLink>
-          <HelpTooltipLink href="https://coder.com/docs/coder-oss/latest/ides#jetbrains-gateway">
-            Connect via JetBrains Gateway
-          </HelpTooltipLink>
-          <HelpTooltipLink href="https://coder.com/docs/coder-oss/latest/ides#ssh-configuration">
-            SSH configuration
-          </HelpTooltipLink>
-        </HelpTooltipLinksGroup>
-      </Popover>
+          <HelpTooltipLinksGroup>
+            <HelpTooltipLink href="https://coder.com/docs/coder-oss/latest/install">
+              Install Coder CLI
+            </HelpTooltipLink>
+            <HelpTooltipLink href="https://coder.com/docs/coder-oss/latest/ides#vs-code-remote">
+              Connect via VS Code Remote SSH
+            </HelpTooltipLink>
+            <HelpTooltipLink href="https://coder.com/docs/coder-oss/latest/ides#jetbrains-gateway">
+              Connect via JetBrains Gateway
+            </HelpTooltipLink>
+            <HelpTooltipLink href="https://coder.com/docs/coder-oss/latest/ides#ssh-configuration">
+              SSH configuration
+            </HelpTooltipLink>
+          </HelpTooltipLinksGroup>
+        </Popover>
+      </div>
     </>
   )
 }