From 4aa75c5bc224f2da8259f43c317b3fc307ee0c36 Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Wed, 21 Jun 2023 12:58:52 -0400
Subject: [PATCH 1/6] Feat: [M3-6473] initial commit - replace default export

---
 .../src/components/AccessPanel/UserSSHKeyPanel.tsx        | 4 ++--
 .../features/Profile/SSHKeys/CreateSSHKeyDrawer.test.tsx  | 8 ++++----
 .../src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx   | 6 ++----
 packages/manager/src/features/Profile/SSHKeys/SSHKeys.tsx | 4 ++--
 4 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx b/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx
index a5ba0508b85..6bafbfbeadd 100644
--- a/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx
+++ b/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx
@@ -10,7 +10,7 @@ import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
 import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty';
 import { TableRowError } from 'src/components/TableRowError/TableRowError';
-import SSHKeyCreationDrawer from 'src/features/Profile/SSHKeys/CreateSSHKeyDrawer';
+import { CreateSSHKeyDrawer } from 'src/features/Profile/SSHKeys/CreateSSHKeyDrawer';
 import { usePagination } from 'src/hooks/usePagination';
 import { useAccountUsers } from 'src/queries/accountUsers';
 import { useProfile, useSSHKeysQuery } from 'src/queries/profile';
@@ -219,7 +219,7 @@ const UserSSHKeyPanel = (props: Props) => {
       >
         Add an SSH Key
       </Button>
-      <SSHKeyCreationDrawer
+      <CreateSSHKeyDrawer
         open={isCreateDrawerOpen}
         onClose={() => setIsCreateDrawerOpen(false)}
       />
diff --git a/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.test.tsx b/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.test.tsx
index c948e2eebb2..f6c1eb65f4a 100644
--- a/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.test.tsx
+++ b/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.test.tsx
@@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event';
 import { sshKeyFactory } from 'src/factories';
 import { rest, server } from 'src/mocks/testServer';
 import { renderWithTheme } from 'src/utilities/testHelpers';
-import SSHKeyCreationDrawer from './CreateSSHKeyDrawer';
+import { CreateSSHKeyDrawer } from './CreateSSHKeyDrawer';
 
 const props = {
   open: true,
@@ -13,7 +13,7 @@ const props = {
 
 describe('SSHKeyCreationDrawer', () => {
   it('should have an input field for label', () => {
-    const { getByText } = renderWithTheme(<SSHKeyCreationDrawer {...props} />);
+    const { getByText } = renderWithTheme(<CreateSSHKeyDrawer {...props} />);
     // Check for inputs
     getByText('Label');
     getByText('SSH Public Key');
@@ -25,7 +25,7 @@ describe('SSHKeyCreationDrawer', () => {
 
   it('should be submittable and should show client side validation errors', async () => {
     const { getAllByRole, getByTestId, getByText } = renderWithTheme(
-      <SSHKeyCreationDrawer {...props} />
+      <CreateSSHKeyDrawer {...props} />
     );
 
     const inputs = getAllByRole('textbox');
@@ -53,7 +53,7 @@ describe('SSHKeyCreationDrawer', () => {
     );
 
     const { getAllByRole, getByTestId } = renderWithTheme(
-      <SSHKeyCreationDrawer {...props} />
+      <CreateSSHKeyDrawer {...props} />
     );
 
     const inputs = getAllByRole('textbox');
diff --git a/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx b/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx
index bae6261d462..6809eaa5792 100644
--- a/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx
+++ b/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx
@@ -14,7 +14,7 @@ interface Props {
   onClose: () => void;
 }
 
-const CreateSSHKeyDrawer = ({ open, onClose }: Props) => {
+export const CreateSSHKeyDrawer = React.memo(({ open, onClose }: Props) => {
   const { enqueueSnackbar } = useSnackbar();
   const {
     mutateAsync: createSSHKey,
@@ -81,6 +81,4 @@ const CreateSSHKeyDrawer = ({ open, onClose }: Props) => {
       </form>
     </Drawer>
   );
-};
-
-export default React.memo(CreateSSHKeyDrawer);
+});
diff --git a/packages/manager/src/features/Profile/SSHKeys/SSHKeys.tsx b/packages/manager/src/features/Profile/SSHKeys/SSHKeys.tsx
index cfbaa6691ca..c29d0fdeaf1 100644
--- a/packages/manager/src/features/Profile/SSHKeys/SSHKeys.tsx
+++ b/packages/manager/src/features/Profile/SSHKeys/SSHKeys.tsx
@@ -5,7 +5,7 @@ import EditSSHKeyDrawer from './EditSSHKeyDrawer';
 import Grid from '@mui/material/Unstable_Grid2';
 import Hidden from 'src/components/core/Hidden';
 import SSHKeyActionMenu from 'src/features/Profile/SSHKeys/SSHKeyActionMenu';
-import SSHKeyCreationDrawer from './CreateSSHKeyDrawer';
+import { CreateSSHKeyDrawer } from './CreateSSHKeyDrawer';
 import Typography from 'src/components/core/Typography';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import { getSSHKeyFingerprint } from 'src/utilities/ssh-fingerprint';
@@ -144,7 +144,7 @@ export const SSHKeys = () => {
         onClose={() => setIsEditDrawerOpen(false)}
         sshKey={selectedKey}
       />
-      <SSHKeyCreationDrawer
+      <CreateSSHKeyDrawer
         open={isCreateDrawerOpen}
         onClose={() => setIsCreateDrawerOpen(false)}
       />

From 43a7398af1ddd1b59dfcab0033b832e5bfb83ac9 Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Thu, 22 Jun 2023 14:52:06 -0400
Subject: [PATCH 2/6] Feat: [M3-6473] Helper text and trim on blur

---
 .../Profile/SSHKeys/CreateSSHKeyDrawer.tsx    | 33 +++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx b/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx
index 6809eaa5792..860eaa46a60 100644
--- a/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx
+++ b/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx
@@ -2,9 +2,11 @@ import * as React from 'react';
 import ActionsPanel from 'src/components/ActionsPanel';
 import Button from 'src/components/Button';
 import Drawer from 'src/components/Drawer';
-import { Notice } from 'src/components/Notice/Notice';
-import TextField from 'src/components/TextField';
 import getAPIErrorFor from 'src/utilities/getAPIErrorFor';
+import Link from 'src/components/Link';
+import TextField from 'src/components/TextField';
+import { Notice } from 'src/components/Notice/Notice';
+import { styled } from '@mui/material/styles';
 import { useCreateSSHKeyMutation } from 'src/queries/profile';
 import { useFormik } from 'formik';
 import { useSnackbar } from 'notistack';
@@ -45,6 +47,17 @@ export const CreateSSHKeyDrawer = React.memo(({ open, onClose }: Props) => {
 
   const generalError = hasErrorFor('none');
 
+  const sshTextArea = (
+    <>
+      <Link to="https://www.linode.com/docs/guides/use-public-key-authentication-with-ssh/">
+        Learn about
+      </Link>{' '}
+      uploading an SSH key or generating a new key pair. Note that the public
+      key begins with <StyledInlineCode>ssh-rsa</StyledInlineCode> and ends with{' '}
+      <StyledInlineCode>your_username@hostname</StyledInlineCode>
+    </>
+  );
+
   return (
     <Drawer open={open} title="Add SSH Key" onClose={onClose}>
       {generalError && <Notice error text={generalError} />}
@@ -64,6 +77,12 @@ export const CreateSSHKeyDrawer = React.memo(({ open, onClose }: Props) => {
           value={formik.values.ssh_key}
           multiline
           rows={1.75}
+          helperText={sshTextArea}
+          onBlur={(e) => {
+            const trimmedValue = e.target.value.trim();
+            formik.setFieldValue('ssh_key', trimmedValue);
+            formik.handleBlur(e);
+          }}
         />
         <ActionsPanel>
           <Button buttonType="secondary" onClick={onClose}>
@@ -82,3 +101,13 @@ export const CreateSSHKeyDrawer = React.memo(({ open, onClose }: Props) => {
     </Drawer>
   );
 });
+
+const StyledInlineCode = styled('span', {
+  label: 'StyledInlineCode',
+})(({ theme }) => ({
+  display: 'inline',
+  fontFamily: '"Ubuntu Mono", monospace, sans-serif',
+  margin: '0 2px',
+  backgroundColor: theme.color.grey5,
+  padding: '0 4px',
+}));

From ee04ccd85596474b113da6c48c84b0fd1dfdca72 Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Thu, 22 Jun 2023 16:16:33 -0400
Subject: [PATCH 3/6] Feat: [M3-6473] Cleanup

---
 .../src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx b/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx
index 860eaa46a60..1daf6caaddc 100644
--- a/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx
+++ b/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx
@@ -47,7 +47,7 @@ export const CreateSSHKeyDrawer = React.memo(({ open, onClose }: Props) => {
 
   const generalError = hasErrorFor('none');
 
-  const sshTextArea = (
+  const SSHTextAreaHelperText = () => (
     <>
       <Link to="https://www.linode.com/docs/guides/use-public-key-authentication-with-ssh/">
         Learn about
@@ -77,7 +77,7 @@ export const CreateSSHKeyDrawer = React.memo(({ open, onClose }: Props) => {
           value={formik.values.ssh_key}
           multiline
           rows={1.75}
-          helperText={sshTextArea}
+          helperText={<SSHTextAreaHelperText />}
           onBlur={(e) => {
             const trimmedValue = e.target.value.trim();
             formik.setFieldValue('ssh_key', trimmedValue);

From 2123a27de7d5d11fa92188621d850cb30a5b84c1 Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Thu, 22 Jun 2023 16:44:39 -0400
Subject: [PATCH 4/6] Added changeset: Helper Text for the Add SHHKey Drawer
 form

---
 packages/manager/.changeset/pr-9290-added-1687466679796.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 packages/manager/.changeset/pr-9290-added-1687466679796.md

diff --git a/packages/manager/.changeset/pr-9290-added-1687466679796.md b/packages/manager/.changeset/pr-9290-added-1687466679796.md
new file mode 100644
index 00000000000..8f10d2bed10
--- /dev/null
+++ b/packages/manager/.changeset/pr-9290-added-1687466679796.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Helper Text for the Add SHHKey Drawer form ([#9290](https://github.com/linode/manager/pull/9290))

From 6196acca5d681513201075bc1842a4c9077c7232 Mon Sep 17 00:00:00 2001
From: Alban Bailly <abailly@akamai.com>
Date: Fri, 23 Jun 2023 10:53:12 -0400
Subject: [PATCH 5/6] Feat: [M3-6473] Feedback

---
 packages/manager/src/components/Code/Code.tsx | 13 ++++++------
 packages/manager/src/components/Code/index.ts |  2 --
 .../LinodeStorage/ResizeDiskDrawer.tsx        |  2 +-
 .../Profile/SSHKeys/CreateSSHKeyDrawer.tsx    | 21 ++++++-------------
 4 files changed, 13 insertions(+), 25 deletions(-)
 delete mode 100644 packages/manager/src/components/Code/index.ts

diff --git a/packages/manager/src/components/Code/Code.tsx b/packages/manager/src/components/Code/Code.tsx
index c3b18a4ef95..a4457bb7fc9 100644
--- a/packages/manager/src/components/Code/Code.tsx
+++ b/packages/manager/src/components/Code/Code.tsx
@@ -5,17 +5,16 @@ interface Props {
   children: string;
 }
 
-const Code = (props: Props) => {
+export const Code = (props: Props) => {
   const { children } = props;
 
   return <StyledSpan>{children}</StyledSpan>;
 };
 
-export default Code;
-
 const StyledSpan = styled('span')(({ theme }) => ({
-  backgroundColor: theme.color.grey8,
-  fontWeight: 'bold',
-  fontFamily: 'Courier',
-  color: theme.name === 'dark' ? theme.color.white : theme.color.black,
+  color: theme.color.black,
+  fontFamily: '"Ubuntu Mono", monospace, sans-serif',
+  margin: '0 2px',
+  backgroundColor: theme.color.grey5,
+  padding: '0 4px',
 }));
diff --git a/packages/manager/src/components/Code/index.ts b/packages/manager/src/components/Code/index.ts
deleted file mode 100644
index 50549f23972..00000000000
--- a/packages/manager/src/components/Code/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import Code from './Code';
-export default Code;
diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/ResizeDiskDrawer.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/ResizeDiskDrawer.tsx
index c10c590fcb4..974f4e2652e 100644
--- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/ResizeDiskDrawer.tsx
+++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeStorage/ResizeDiskDrawer.tsx
@@ -3,7 +3,7 @@ import { useFormik } from 'formik';
 import * as React from 'react';
 import ActionsPanel from 'src/components/ActionsPanel';
 import Button from 'src/components/Button';
-import Code from 'src/components/Code';
+import { Code } from 'src/components/Code/Code';
 import FormHelperText from 'src/components/core/FormHelperText';
 import InputAdornment from 'src/components/core/InputAdornment';
 import { makeStyles } from '@mui/styles';
diff --git a/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx b/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx
index 1daf6caaddc..ddd172f5312 100644
--- a/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx
+++ b/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx
@@ -5,8 +5,9 @@ import Drawer from 'src/components/Drawer';
 import getAPIErrorFor from 'src/utilities/getAPIErrorFor';
 import Link from 'src/components/Link';
 import TextField from 'src/components/TextField';
+import Typography from 'src/components/core/Typography';
+import { Code } from 'src/components/Code/Code';
 import { Notice } from 'src/components/Notice/Notice';
-import { styled } from '@mui/material/styles';
 import { useCreateSSHKeyMutation } from 'src/queries/profile';
 import { useFormik } from 'formik';
 import { useSnackbar } from 'notistack';
@@ -48,14 +49,14 @@ export const CreateSSHKeyDrawer = React.memo(({ open, onClose }: Props) => {
   const generalError = hasErrorFor('none');
 
   const SSHTextAreaHelperText = () => (
-    <>
+    <Typography component="span">
       <Link to="https://www.linode.com/docs/guides/use-public-key-authentication-with-ssh/">
         Learn about
       </Link>{' '}
       uploading an SSH key or generating a new key pair. Note that the public
-      key begins with <StyledInlineCode>ssh-rsa</StyledInlineCode> and ends with{' '}
-      <StyledInlineCode>your_username@hostname</StyledInlineCode>
-    </>
+      key begins with <Code>ssh-rsa</Code> and ends with{' '}
+      <Code>your_username@hostname</Code>
+    </Typography>
   );
 
   return (
@@ -101,13 +102,3 @@ export const CreateSSHKeyDrawer = React.memo(({ open, onClose }: Props) => {
     </Drawer>
   );
 });
-
-const StyledInlineCode = styled('span', {
-  label: 'StyledInlineCode',
-})(({ theme }) => ({
-  display: 'inline',
-  fontFamily: '"Ubuntu Mono", monospace, sans-serif',
-  margin: '0 2px',
-  backgroundColor: theme.color.grey5,
-  padding: '0 4px',
-}));

From 3d6b6f83d5823a7ef6a6bb788de5170a6273b3cd Mon Sep 17 00:00:00 2001
From: Alban Bailly <130582365+abailly-akamai@users.noreply.github.com>
Date: Mon, 26 Jun 2023 15:23:58 -0400
Subject: [PATCH 6/6] Update
 packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx

Co-authored-by: Mariah Jacobs <114685994+mjac0bs@users.noreply.github.com>
---
 .../manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx b/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx
index ddd172f5312..3ed5ece6494 100644
--- a/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx
+++ b/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx
@@ -55,7 +55,7 @@ export const CreateSSHKeyDrawer = React.memo(({ open, onClose }: Props) => {
       </Link>{' '}
       uploading an SSH key or generating a new key pair. Note that the public
       key begins with <Code>ssh-rsa</Code> and ends with{' '}
-      <Code>your_username@hostname</Code>
+      <Code>your_username@hostname</Code>.
     </Typography>
   );