Skip to content

Commit 0e46903

Browse files
BrunoQuaresmaBrunoQuaresma
authored
fix(site): Fix secondary buttons with popovers (#7296)
1 parent 218d6a9 commit 0e46903

File tree

2 files changed

+70
-67
lines changed

2 files changed

+70
-67
lines changed

‎site/src/components/Resources/AgentButton.tsx

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { makeStyles } from "@material-ui/core/styles"
22
import Button, { ButtonProps } from "@material-ui/core/Button"
3-
import { FC } from "react"
3+
import { FC, forwardRef } from "react"
44
import { combineClasses } from "utils/combineClasses"
55

66
export const PrimaryAgentButton: FC<ButtonProps> = ({
@@ -17,20 +17,21 @@ export const PrimaryAgentButton: FC<ButtonProps> = ({
1717
)
1818
}
1919

20-
export const SecondaryAgentButton: FC<ButtonProps> = ({
21-
className,
22-
...props
23-
}) => {
24-
const styles = useStyles()
20+
// eslint-disable-next-line react/display-name -- Name is inferred from variable name
21+
export const SecondaryAgentButton = forwardRef<HTMLButtonElement, ButtonProps>(
22+
({ className, ...props }, ref) => {
23+
const styles = useStyles()
2524

26-
return (
27-
<Button
28-
variant="outlined"
29-
className={combineClasses([styles.secondaryButton, className])}
30-
{...props}
31-
/>
32-
)
33-
}
25+
return (
26+
<Button
27+
ref={ref}
28+
variant="outlined"
29+
className={combineClasses([styles.secondaryButton, className])}
30+
{...props}
31+
/>
32+
)
33+
},
34+
)
3435

3536
const useStyles = makeStyles((theme) => ({
3637
primaryButton: {

‎site/src/components/SSHButton/SSHButton.tsx

Lines changed: 55 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -42,62 +42,64 @@ export const SSHButton: React.FC<React.PropsWithChildren<SSHButtonProps>> = ({
4242
>
4343
Connect SSH
4444
</SecondaryAgentButton>
45-
<Popover
46-
classes={{ paper: styles.popoverPaper }}
47-
id={id}
48-
open={isOpen}
49-
anchorEl={anchorRef.current}
50-
onClose={onClose}
51-
anchorOrigin={{
52-
vertical: "bottom",
53-
horizontal: "left",
54-
}}
55-
transformOrigin={{
56-
vertical: "top",
57-
horizontal: "left",
58-
}}
59-
>
60-
<HelpTooltipText>
61-
Run the following commands to connect with SSH:
62-
</HelpTooltipText>
45+
<div>
46+
<Popover
47+
classes={{ paper: styles.popoverPaper }}
48+
id={id}
49+
open={isOpen}
50+
anchorEl={anchorRef.current}
51+
onClose={onClose}
52+
anchorOrigin={{
53+
vertical: "bottom",
54+
horizontal: "left",
55+
}}
56+
transformOrigin={{
57+
vertical: "top",
58+
horizontal: "left",
59+
}}
60+
>
61+
<HelpTooltipText>
62+
Run the following commands to connect with SSH:
63+
</HelpTooltipText>
6364

64-
<Stack spacing={0.5} className={styles.codeExamples}>
65-
<div>
66-
<HelpTooltipText>
67-
<strong className={styles.codeExampleLabel}>
68-
Configure SSH hosts on machine:
69-
</strong>
70-
</HelpTooltipText>
71-
<CodeExample code="coder config-ssh" />
72-
</div>
65+
<Stack spacing={0.5} className={styles.codeExamples}>
66+
<div>
67+
<HelpTooltipText>
68+
<strong className={styles.codeExampleLabel}>
69+
Configure SSH hosts on machine:
70+
</strong>
71+
</HelpTooltipText>
72+
<CodeExample code="coder config-ssh" />
73+
</div>
7374

74-
<div>
75-
<HelpTooltipText>
76-
<strong className={styles.codeExampleLabel}>
77-
Connect to the agent:
78-
</strong>
79-
</HelpTooltipText>
80-
<CodeExample
81-
code={`ssh ${sshPrefix}${workspaceName}.${agentName}`}
82-
/>
83-
</div>
84-
</Stack>
75+
<div>
76+
<HelpTooltipText>
77+
<strong className={styles.codeExampleLabel}>
78+
Connect to the agent:
79+
</strong>
80+
</HelpTooltipText>
81+
<CodeExample
82+
code={`ssh ${sshPrefix}${workspaceName}.${agentName}`}
83+
/>
84+
</div>
85+
</Stack>
8586

86-
<HelpTooltipLinksGroup>
87-
<HelpTooltipLink href="https://coder.com/docs/coder-oss/latest/install">
88-
Install Coder CLI
89-
</HelpTooltipLink>
90-
<HelpTooltipLink href="https://coder.com/docs/coder-oss/latest/ides#vs-code-remote">
91-
Connect via VS Code Remote SSH
92-
</HelpTooltipLink>
93-
<HelpTooltipLink href="https://coder.com/docs/coder-oss/latest/ides#jetbrains-gateway">
94-
Connect via JetBrains Gateway
95-
</HelpTooltipLink>
96-
<HelpTooltipLink href="https://coder.com/docs/coder-oss/latest/ides#ssh-configuration">
97-
SSH configuration
98-
</HelpTooltipLink>
99-
</HelpTooltipLinksGroup>
100-
</Popover>
87+
<HelpTooltipLinksGroup>
88+
<HelpTooltipLink href="https://coder.com/docs/coder-oss/latest/install">
89+
Install Coder CLI
90+
</HelpTooltipLink>
91+
<HelpTooltipLink href="https://coder.com/docs/coder-oss/latest/ides#vs-code-remote">
92+
Connect via VS Code Remote SSH
93+
</HelpTooltipLink>
94+
<HelpTooltipLink href="https://coder.com/docs/coder-oss/latest/ides#jetbrains-gateway">
95+
Connect via JetBrains Gateway
96+
</HelpTooltipLink>
97+
<HelpTooltipLink href="https://coder.com/docs/coder-oss/latest/ides#ssh-configuration">
98+
SSH configuration
99+
</HelpTooltipLink>
100+
</HelpTooltipLinksGroup>
101+
</Popover>
102+
</div>
101103
</>
102104
)
103105
}

0 commit comments

Comments
 (0)