synced/coder
1
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2025-07-12 00:14:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

5
site/src/components/CodeExample/CodeExample.stories.tsx
View File

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

8
site/src/components/CodeExample/CodeExample.tsx
View File

@ -28,7 +28,6 @@ const useStyles = makeStyles((theme) => ({
root: { root: {
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
justifyContent: "space-between",
alignItems: "center", alignItems: "center",
background: theme.palette.background.default, background: theme.palette.background.default,
color: theme.palette.primary.contrastText, color: theme.palette.primary.contrastText,
@ -39,6 +38,13 @@ const useStyles = makeStyles((theme) => ({
}, },
code: { code: {
padding: `${theme.spacing(0.5)}px ${theme.spacing(0.75)}px ${theme.spacing(0.5)}px ${theme.spacing(2)}px`, 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: { button: {
border: 0, border: 0,

6
site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPage.tsx
View File

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