feat: Add copy button to the SSH Page (#1962)

This commit is contained in:
Bruno Quaresma
2022-06-01 14:01:36 -05:00
committed by GitHub
parent b85de3ee79
commit f5a8d17aa8
3 changed files with 15 additions and 4 deletions

View File

@ -17,3 +17,8 @@ export const Example = Template.bind({})
Example.args = {
code: sampleCode,
}
export const LongCode = Template.bind({})
LongCode.args = {
code: "ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAICnKzATuWwmmt5+CKTPuRGN0R1PBemA+6/SStpLiyX+L",
}

View File

@ -28,7 +28,6 @@ const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
background: theme.palette.background.default,
color: theme.palette.primary.contrastText,
@ -39,6 +38,13 @@ const useStyles = makeStyles((theme) => ({
},
code: {
padding: `${theme.spacing(0.5)}px ${theme.spacing(0.75)}px ${theme.spacing(0.5)}px ${theme.spacing(2)}px`,
whiteSpace: "nowrap",
width: "100%",
overflowX: "auto",
// Have a better area to display the scrollbar
height: 42,
display: "flex",
alignItems: "center",
},
button: {
border: 0,

View File

@ -3,7 +3,7 @@ import Button from "@material-ui/core/Button"
import CircularProgress from "@material-ui/core/CircularProgress"
import { useActor } from "@xstate/react"
import React, { useContext, useEffect } from "react"
import { CodeBlock } from "../../../components/CodeBlock/CodeBlock"
import { CodeExample } from "../../../components/CodeExample/CodeExample"
import { ConfirmDialog } from "../../../components/ConfirmDialog/ConfirmDialog"
import { Section } from "../../../components/Section/Section"
import { Stack } from "../../../components/Stack/Stack"
@ -41,10 +41,10 @@ export const SSHKeysPage: React.FC = () => {
{sshKey && (
<Stack>
<CodeBlock lines={[sshKey.public_key.trim()]} />
<CodeExample code={sshKey.public_key.trim()} />
<div>
<Button
color="primary"
variant="outlined"
onClick={() => {
authSend({ type: "REGENERATE_SSH_KEY" })
}}