opensource/coder
3
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-09-24 15:04:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(site): Fix secondary buttons with popovers (#7296)

Browse Source
This commit is contained in:
Bruno Quaresma
2023-04-26 15:33:23 +00:00
committed by GitHub
parent 218d6a92d4
commit 0e469031b8
2 changed files with 70 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/Resources/AgentButton.tsx
+15 -14
View File
@@ -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: {
site/src/components/SSHButton/SSHButton.tsx
+55 -53
View File
@@ -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>
</>
)
}