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)) 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 - setIsCreateDrawerOpen(false)} /> 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 {children}; }; -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.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(); + const { getByText } = renderWithTheme(); // 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( - + ); const inputs = getAllByRole('textbox'); @@ -53,7 +53,7 @@ describe('SSHKeyCreationDrawer', () => { ); const { getAllByRole, getByTestId } = renderWithTheme( - + ); 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..3ed5ece6494 100644 --- a/packages/manager/src/features/Profile/SSHKeys/CreateSSHKeyDrawer.tsx +++ b/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 = () => ( + + + Learn about + {' '} + uploading an SSH key or generating a new key pair. Note that the public + key begins with ssh-rsa and ends with{' '} + your_username@hostname. + + ); + return ( {generalError && } @@ -64,6 +78,12 @@ const CreateSSHKeyDrawer = ({ open, onClose }: Props) => { value={formik.values.ssh_key} multiline rows={1.75} + helperText={} + onBlur={(e) => { + const trimmedValue = e.target.value.trim(); + formik.setFieldValue('ssh_key', trimmedValue); + formik.handleBlur(e); + }} />