From 3a905b1bbfc91e257ef98871187bba9ccbb07274 Mon Sep 17 00:00:00 2001
From: Bruno <bruno@coder.com>
Date: Wed, 1 Jun 2022 18:52:00 +0000
Subject: [PATCH] Add copy button to the SSH Page

---
 site/src/components/CodeExample/CodeExample.stories.tsx   | 5 +++++
 site/src/components/CodeExample/CodeExample.tsx           | 8 +++++++-
 .../pages/UserSettingsPage/SSHKeysPage/SSHKeysPage.tsx    | 6 +++---
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/site/src/components/CodeExample/CodeExample.stories.tsx b/site/src/components/CodeExample/CodeExample.stories.tsx
index 2853ff5e40328..362f56e0abfba 100644
--- 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
index 640f943130623..5a1cac5e2a86d 100644
--- 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
index a69732c59f7a5..14beb82fe6379 100644
--- 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" })
                 }}