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

BrunoQuaresma · kylecarbs · commit 2eedcc8979d0 · 2022-06-10T17:02:41.000Z
diff --git a/site/src/components/CodeExample/CodeExample.stories.tsx b/site/src/components/CodeExample/CodeExample.stories.tsx
@@ -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",
+}
diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx
@@ -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,
diff --git a/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPage.tsx b/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPage.tsx
@@ -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" })
                 }}

Original file line number	Diff line number	Diff line change
`@@ -17,3 +17,8 @@ export const Example = Template.bind({})`
`17`	`17`	`Example.args = {`
`18`	`18`	`code: sampleCode,`
`19`	`19`	`}`
	`20`	`+`
	`21`	`+export const LongCode = Template.bind({})`
	`22`	`+LongCode.args = {`
	`23`	`+ code: "ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAICnKzATuWwmmt5+CKTPuRGN0R1PBemA+6/SStpLiyX+L",`
	`24`	`+}`