Feat: [M3-6473] - Add helper text to the Add SSHKey Drawer Form

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))

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)}
       />

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',
 }));

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';

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');

packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx

@@ -2,9 +2,12 @@ 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 Typography from 'src/components/core/Typography';
+import { Code } from 'src/components/Code/Code';
+import { Notice } from 'src/components/Notice/Notice';
 import { useCreateSSHKeyMutation } from 'src/queries/profile';
 import { useFormik } from 'formik';
 import { useSnackbar } from 'notistack';
@@ -14,7 +17,7 @@ interface Props {
   onClose: () => void;
 }
 
-const CreateSSHKeyDrawer = ({ open, onClose }: Props) => {
+export const CreateSSHKeyDrawer = React.memo(({ open, onClose }: Props) => {
   const { enqueueSnackbar } = useSnackbar();
   const {
     mutateAsync: createSSHKey,
@@ -45,6 +48,17 @@ const CreateSSHKeyDrawer = ({ 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 <Code>ssh-rsa</Code> and ends with{' '}
+      <Code>your_username@hostname</Code>.
+    </Typography>
+  );
+
   return (
     <Drawer open={open} title="Add SSH Key" onClose={onClose}>
       {generalError && <Notice error text={generalError} />}
@@ -64,6 +78,12 @@ const CreateSSHKeyDrawer = ({ open, onClose }: Props) => {
           value={formik.values.ssh_key}
           multiline
           rows={1.75}
+          helperText={<SSHTextAreaHelperText />}
+          onBlur={(e) => {
+            const trimmedValue = e.target.value.trim();
+            formik.setFieldValue('ssh_key', trimmedValue);
+            formik.handleBlur(e);
+          }}
         />
         <ActionsPanel>
           <Button buttonType="secondary" onClick={onClose}>
@@ -81,6 +101,4 @@ const CreateSSHKeyDrawer = ({ open, onClose }: Props) => {
       </form>
     </Drawer>
   );
-};
-
-export default React.memo(CreateSSHKeyDrawer);
+});

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)}
       />