From 2336bfc2b6b450474ec8f15ad921bd4980022141 Mon Sep 17 00:00:00 2001 From: Connie Liu Date: Tue, 17 Sep 2024 11:19:34 -0400 Subject: [PATCH 01/14] add AccountActivationLanding tests + cleanup styling --- .../AccountActivationLanding.test.tsx | 38 +++++++++++++++++++ .../AccountActivationLanding.tsx | 38 ++++++++----------- 2 files changed, 53 insertions(+), 23 deletions(-) create mode 100644 packages/manager/src/components/AccountActivation/AccountActivationLanding.test.tsx diff --git a/packages/manager/src/components/AccountActivation/AccountActivationLanding.test.tsx b/packages/manager/src/components/AccountActivation/AccountActivationLanding.test.tsx new file mode 100644 index 00000000000..9e800c86045 --- /dev/null +++ b/packages/manager/src/components/AccountActivation/AccountActivationLanding.test.tsx @@ -0,0 +1,38 @@ +import { fireEvent } from '@testing-library/react'; +import * as React from 'react'; + +import { renderWithTheme } from 'src/utilities/testHelpers'; + +import AccountActivationLanding from './AccountActivationLanding'; + +const openSupportTicket = 'Open a Support Ticket'; + +describe('AccountActivationLanding', () => { + it('renders the AccountActivationLanding component', () => { + const { getByText, queryByText } = renderWithTheme( + + ); + + expect( + getByText('Your account is currently being reviewed.') + ).toBeVisible(); + expect( + getByText( + /Thanks for signing up! You’ll receive an email from us once our review is complete, so hang tight. If you have questions during this process/ + ) + ).toBeVisible(); + expect(getByText(/please open a Support ticket/)).toBeVisible(); + expect(queryByText(openSupportTicket)).not.toBeInTheDocument(); + }); + + it('toggles open the Support Ticket dialog', () => { + const { getByText, queryByText } = renderWithTheme( + + ); + + expect(queryByText(openSupportTicket)).not.toBeInTheDocument(); + const supportButtonLink = getByText(/please open a Support ticket/); + fireEvent.click(supportButtonLink); + expect(getByText(openSupportTicket)).toBeVisible(); + }); +}); diff --git a/packages/manager/src/components/AccountActivation/AccountActivationLanding.tsx b/packages/manager/src/components/AccountActivation/AccountActivationLanding.tsx index a4b96a57da8..ea68ced58e2 100644 --- a/packages/manager/src/components/AccountActivation/AccountActivationLanding.tsx +++ b/packages/manager/src/components/AccountActivation/AccountActivationLanding.tsx @@ -1,29 +1,16 @@ import Warning from '@mui/icons-material/CheckCircle'; -import { Theme } from '@mui/material/styles'; import * as React from 'react'; import { useHistory } from 'react-router-dom'; -import { makeStyles } from 'tss-react/mui'; import { ErrorState } from 'src/components/ErrorState/ErrorState'; import { Typography } from 'src/components/Typography'; -import { AttachmentError } from 'src/features/Support/SupportTicketDetail/SupportTicketDetail'; import { SupportTicketDialog } from 'src/features/Support/SupportTickets/SupportTicketDialog'; -const useStyles = makeStyles()((theme: Theme) => ({ - cta: { - ...theme.applyLinkStyles, - }, - errorHeading: { - marginBottom: theme.spacing(2), - }, - subheading: { - margin: '0 auto', - maxWidth: '60%', - }, -})); +import { StyledLinkButton } from '../Button/StyledLinkButton'; + +import type { AttachmentError } from 'src/features/Support/SupportTicketDetail/SupportTicketDetail'; const AccountActivationLanding = () => { - const { classes } = useStyles(); const history = useHistory(); const [supportDrawerIsOpen, toggleSupportDrawer] = React.useState( @@ -46,19 +33,24 @@ const AccountActivationLanding = () => { - + ({ marginBottom: theme.spacing(2) })} + variant="h2" + > Your account is currently being reviewed. - + Thanks for signing up! You’ll receive an email from us once our review is complete, so hang tight. If you have questions during this process{' '} - + . Date: Tue, 17 Sep 2024 11:28:14 -0400 Subject: [PATCH 02/14] switch component to have named instead of default export --- .../src/components/AddNewLink/AddNewLink.tsx | 8 ++++---- .../manager/src/components/AddNewLink/index.ts | 4 ---- .../Databases/DatabaseDetail/AccessControls.tsx | 2 +- .../LinodesDetail/LinodeConfigs/LinodeConfigs.tsx | 2 +- .../src/features/Managed/Contacts/Contacts.tsx | 15 ++++++++------- .../Managed/Credentials/CredentialList.tsx | 9 +++++---- .../features/Managed/Monitors/MonitorTable.tsx | 9 +++++---- .../Profile/OAuthClients/OAuthClients.tsx | 2 +- .../src/features/Profile/SSHKeys/SSHKeys.tsx | 4 ++-- .../manager/src/features/Users/UsersLanding.tsx | 2 +- 10 files changed, 28 insertions(+), 29 deletions(-) delete mode 100644 packages/manager/src/components/AddNewLink/index.ts diff --git a/packages/manager/src/components/AddNewLink/AddNewLink.tsx b/packages/manager/src/components/AddNewLink/AddNewLink.tsx index 6103a8acc73..70253edac48 100644 --- a/packages/manager/src/components/AddNewLink/AddNewLink.tsx +++ b/packages/manager/src/components/AddNewLink/AddNewLink.tsx @@ -1,9 +1,11 @@ import * as React from 'react'; -import { Tooltip, TooltipProps } from 'src/components/Tooltip'; +import { Tooltip } from 'src/components/Tooltip'; import { Button } from '../Button/Button'; +import type { TooltipProps } from 'src/components/Tooltip'; + export interface Props extends Omit { disabled?: boolean; disabledReason?: string; @@ -12,7 +14,7 @@ export interface Props extends Omit { onClick: (e?: React.MouseEvent) => void; } -const AddNewLink = (props: Props) => { +export const AddNewLink = (props: Props) => { const { className, disabled, @@ -57,5 +59,3 @@ const AddNewLink = (props: Props) => { ); }; - -export default AddNewLink; diff --git a/packages/manager/src/components/AddNewLink/index.ts b/packages/manager/src/components/AddNewLink/index.ts deleted file mode 100644 index be5b3a5da7f..00000000000 --- a/packages/manager/src/components/AddNewLink/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -import AddNewLink, { Props as _AddNewLinkProps } from './AddNewLink'; -/* tslint:disable */ -export type AddNewLinkProps = _AddNewLinkProps; -export default AddNewLink; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.tsx b/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.tsx index 69d4d2e4d74..9f72275a1a0 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; -import AddNewLink from 'src/components/AddNewLink'; +import { AddNewLink } from 'src/components/AddNewLink/AddNewLink'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction'; import { Notice } from 'src/components/Notice/Notice'; diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigs.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigs.tsx index 1b1f25cbe3a..8ca0f463c33 100644 --- a/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigs.tsx +++ b/packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigs.tsx @@ -2,7 +2,7 @@ import { useTheme } from '@mui/material/styles'; import * as React from 'react'; import { useParams } from 'react-router-dom'; -import AddNewLink from 'src/components/AddNewLink'; +import { AddNewLink } from 'src/components/AddNewLink/AddNewLink'; import { Box } from 'src/components/Box'; import { DocsLink } from 'src/components/DocsLink/DocsLink'; import OrderBy from 'src/components/OrderBy'; diff --git a/packages/manager/src/features/Managed/Contacts/Contacts.tsx b/packages/manager/src/features/Managed/Contacts/Contacts.tsx index b82c906679f..f8b3707f7f7 100644 --- a/packages/manager/src/features/Managed/Contacts/Contacts.tsx +++ b/packages/manager/src/features/Managed/Contacts/Contacts.tsx @@ -1,8 +1,7 @@ -import { ManagedContact } from '@linode/api-v4/lib/managed'; import { useSnackbar } from 'notistack'; import * as React from 'react'; -import AddNewLink from 'src/components/AddNewLink'; +import { AddNewLink } from 'src/components/AddNewLink/AddNewLink'; import { DeletionDialog } from 'src/components/DeletionDialog/DeletionDialog'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { Hidden } from 'src/components/Hidden'; @@ -23,14 +22,16 @@ import { } from 'src/queries/managed/managed'; import { getAPIErrorOrDefault } from 'src/utilities/errorUtils'; -import ContactDrawer from './ContactsDrawer'; -import ContactTableContact from './ContactsTableContent'; -import { ManagedContactGroup, Mode } from './common'; import { - StyledWrapperGrid, - StyledTypography, StyledHeaderGrid, + StyledTypography, + StyledWrapperGrid, } from './Contacts.styles'; +import ContactDrawer from './ContactsDrawer'; +import ContactTableContact from './ContactsTableContent'; + +import type { ManagedContactGroup, Mode } from './common'; +import type { ManagedContact } from '@linode/api-v4/lib/managed'; const Contacts = () => { const { enqueueSnackbar } = useSnackbar(); diff --git a/packages/manager/src/features/Managed/Credentials/CredentialList.tsx b/packages/manager/src/features/Managed/Credentials/CredentialList.tsx index ff64d9fa4f3..b9f79818124 100644 --- a/packages/manager/src/features/Managed/Credentials/CredentialList.tsx +++ b/packages/manager/src/features/Managed/Credentials/CredentialList.tsx @@ -1,10 +1,7 @@ -import { CredentialPayload } from '@linode/api-v4/lib/managed/types'; -import { APIError } from '@linode/api-v4/lib/types'; -import { FormikBag } from 'formik'; import { useSnackbar } from 'notistack'; import * as React from 'react'; -import AddNewLink from 'src/components/AddNewLink'; +import { AddNewLink } from 'src/components/AddNewLink/AddNewLink'; import { DeletionDialog } from 'src/components/DeletionDialog/DeletionDialog'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import OrderBy from 'src/components/OrderBy'; @@ -39,6 +36,10 @@ import AddCredentialDrawer from './AddCredentialDrawer'; import CredentialTableContent from './CredentialTableContent'; import UpdateCredentialDrawer from './UpdateCredentialDrawer'; +import type { CredentialPayload } from '@linode/api-v4/lib/managed/types'; +import type { APIError } from '@linode/api-v4/lib/types'; +import type { FormikBag } from 'formik'; + export type FormikProps = FormikBag<{}, CredentialPayload>; export const CredentialList = () => { diff --git a/packages/manager/src/features/Managed/Monitors/MonitorTable.tsx b/packages/manager/src/features/Managed/Monitors/MonitorTable.tsx index 2a8933ff543..71778a6f846 100644 --- a/packages/manager/src/features/Managed/Monitors/MonitorTable.tsx +++ b/packages/manager/src/features/Managed/Monitors/MonitorTable.tsx @@ -1,11 +1,8 @@ -import { ManagedServicePayload } from '@linode/api-v4/lib/managed'; -import { APIError } from '@linode/api-v4/lib/types'; import Grid from '@mui/material/Unstable_Grid2'; -import { FormikBag } from 'formik'; import { useSnackbar } from 'notistack'; import * as React from 'react'; -import AddNewLink from 'src/components/AddNewLink'; +import { AddNewLink } from 'src/components/AddNewLink/AddNewLink'; import { DeletionDialog } from 'src/components/DeletionDialog/DeletionDialog'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import OrderBy from 'src/components/OrderBy'; @@ -41,6 +38,10 @@ import { } from './MonitorTable.styles'; import MonitorTableContent from './MonitorTableContent'; +import type { ManagedServicePayload } from '@linode/api-v4/lib/managed'; +import type { APIError } from '@linode/api-v4/lib/types'; +import type { FormikBag } from 'formik'; + export type Modes = 'create' | 'edit'; export type FormikProps = FormikBag<{}, ManagedServicePayload>; diff --git a/packages/manager/src/features/Profile/OAuthClients/OAuthClients.tsx b/packages/manager/src/features/Profile/OAuthClients/OAuthClients.tsx index 974e8726b88..84f51c9b592 100644 --- a/packages/manager/src/features/Profile/OAuthClients/OAuthClients.tsx +++ b/packages/manager/src/features/Profile/OAuthClients/OAuthClients.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import AddNewLink from 'src/components/AddNewLink'; +import { AddNewLink } from 'src/components/AddNewLink/AddNewLink'; import { Box } from 'src/components/Box'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { Hidden } from 'src/components/Hidden'; diff --git a/packages/manager/src/features/Profile/SSHKeys/SSHKeys.tsx b/packages/manager/src/features/Profile/SSHKeys/SSHKeys.tsx index 91afe803212..a2d7dd77f8e 100644 --- a/packages/manager/src/features/Profile/SSHKeys/SSHKeys.tsx +++ b/packages/manager/src/features/Profile/SSHKeys/SSHKeys.tsx @@ -1,8 +1,8 @@ -import Grid from '@mui/material/Unstable_Grid2'; import { styled } from '@mui/material/styles'; +import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; -import AddNewLink from 'src/components/AddNewLink'; +import { AddNewLink } from 'src/components/AddNewLink/AddNewLink'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { Hidden } from 'src/components/Hidden'; import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter'; diff --git a/packages/manager/src/features/Users/UsersLanding.tsx b/packages/manager/src/features/Users/UsersLanding.tsx index 08a74f61930..dca96afbd61 100644 --- a/packages/manager/src/features/Users/UsersLanding.tsx +++ b/packages/manager/src/features/Users/UsersLanding.tsx @@ -2,7 +2,7 @@ import { useTheme } from '@mui/material/styles'; import useMediaQuery from '@mui/material/useMediaQuery'; import * as React from 'react'; -import AddNewLink from 'src/components/AddNewLink'; +import { AddNewLink } from 'src/components/AddNewLink/AddNewLink'; import { Box } from 'src/components/Box'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter'; From 9bcccf67816b975e2d267515e9adce1783a7d134 Mon Sep 17 00:00:00 2001 From: Connie Liu Date: Tue, 17 Sep 2024 16:02:56 -0400 Subject: [PATCH 03/14] add tests for AddNewLink + skeleton stories --- .../AddNewLink/AddNewLink.stories.tsx | 16 ++++ .../components/AddNewLink/AddNewLink.test.tsx | 74 +++++++++++++++++++ .../src/components/AddNewLink/AddNewLink.tsx | 4 +- 3 files changed, 92 insertions(+), 2 deletions(-) create mode 100644 packages/manager/src/components/AddNewLink/AddNewLink.stories.tsx create mode 100644 packages/manager/src/components/AddNewLink/AddNewLink.test.tsx diff --git a/packages/manager/src/components/AddNewLink/AddNewLink.stories.tsx b/packages/manager/src/components/AddNewLink/AddNewLink.stories.tsx new file mode 100644 index 00000000000..2e3fa33c401 --- /dev/null +++ b/packages/manager/src/components/AddNewLink/AddNewLink.stories.tsx @@ -0,0 +1,16 @@ +// import React from 'react'; + +import { AddNewLink } from './AddNewLink'; + +import type { Meta, StoryObj } from '@storybook/react'; + +const meta: Meta = { + component: AddNewLink, + title: 'Components/AddNewLink', +}; + +type Story = StoryObj; + +export const Default: Story = {}; + +export default meta; diff --git a/packages/manager/src/components/AddNewLink/AddNewLink.test.tsx b/packages/manager/src/components/AddNewLink/AddNewLink.test.tsx new file mode 100644 index 00000000000..f798e247e12 --- /dev/null +++ b/packages/manager/src/components/AddNewLink/AddNewLink.test.tsx @@ -0,0 +1,74 @@ +import { fireEvent } from '@testing-library/react'; +import * as React from 'react'; + +import { renderWithTheme } from 'src/utilities/testHelpers'; + +import { AddNewLink } from './AddNewLink'; + +const label = 'test-label'; +const disabledReason = 'test disabled reason'; +const testId = 'disabled-tooltip'; + +const props = { + label, + onClick: vi.fn(), +}; + +describe('AddNewLink', () => { + it('renders the AddNewLink component', () => { + const { getByText } = renderWithTheme(); + + expect(getByText(label)).toBeVisible(); + }); + it('renders the AddNewLink component without a tooltip if disabled is falsy', () => { + const { queryByLabelText, queryByTestId } = renderWithTheme( + + ); + + expect(queryByLabelText(disabledReason)).not.toBeInTheDocument(); + expect(queryByTestId(testId)).not.toBeInTheDocument(); + }); + + it('renders the AddNewLink component without a tooltip if disabledReason is falsy', () => { + const { queryByTestId } = renderWithTheme( + + ); + + expect(queryByTestId(testId)).not.toBeInTheDocument(); + }); + + it('renders a tooltip if disabled and disabledReason are truthy', () => { + const { getByLabelText, getByTestId } = renderWithTheme( + + ); + + expect(getByLabelText(disabledReason)).toBeVisible(); + expect(getByTestId(testId)).toBeInTheDocument(); + }); + + it("displays the passed in 'display' value if it is given", () => { + const { getByText, queryByText } = renderWithTheme( + + ); + + expect(getByText('test-display')).toBeVisible(); + expect(queryByText(label)).not.toBeInTheDocument(); + }); + + it('fires the onClick event if the button is clicked', () => { + const { getByText } = renderWithTheme(); + + const button = getByText(label); + fireEvent.click(button); + expect(props.onClick).toHaveBeenCalled(); + }); +}); diff --git a/packages/manager/src/components/AddNewLink/AddNewLink.tsx b/packages/manager/src/components/AddNewLink/AddNewLink.tsx index 70253edac48..a46fc33ff69 100644 --- a/packages/manager/src/components/AddNewLink/AddNewLink.tsx +++ b/packages/manager/src/components/AddNewLink/AddNewLink.tsx @@ -6,7 +6,7 @@ import { Button } from '../Button/Button'; import type { TooltipProps } from 'src/components/Tooltip'; -export interface Props extends Omit { +interface Props extends Omit { disabled?: boolean; disabledReason?: string; display?: string; @@ -37,7 +37,7 @@ export const AddNewLink = (props: Props) => { return ( Date: Wed, 18 Sep 2024 11:39:34 -0400 Subject: [PATCH 04/14] create storybook for AddNewLink component --- .../AddNewLink/AddNewLink.stories.tsx | 34 +++++++++++++++++-- .../src/components/AddNewLink/AddNewLink.tsx | 15 ++++++++ 2 files changed, 47 insertions(+), 2 deletions(-) diff --git a/packages/manager/src/components/AddNewLink/AddNewLink.stories.tsx b/packages/manager/src/components/AddNewLink/AddNewLink.stories.tsx index 2e3fa33c401..dea1c03a4e0 100644 --- a/packages/manager/src/components/AddNewLink/AddNewLink.stories.tsx +++ b/packages/manager/src/components/AddNewLink/AddNewLink.stories.tsx @@ -1,4 +1,5 @@ -// import React from 'react'; +import { action } from '@storybook/addon-actions'; +import React from 'react'; import { AddNewLink } from './AddNewLink'; @@ -11,6 +12,35 @@ const meta: Meta = { type Story = StoryObj; -export const Default: Story = {}; +const defaultArgs = { + label: 'test label', + onClick: action('onClick'), +}; + +export const Default: Story = { + args: { + ...defaultArgs, + }, + render: (args) => { + return ; + }, +}; + +export const CustomDisplay = { + args: { + ...defaultArgs, + display: 'test display', + }, + render: Default.render, +}; + +export const Disabled = { + args: { + ...defaultArgs, + disabled: true, + disabledReason: 'This is disabled', + }, + render: Default.render, +}; export default meta; diff --git a/packages/manager/src/components/AddNewLink/AddNewLink.tsx b/packages/manager/src/components/AddNewLink/AddNewLink.tsx index a46fc33ff69..c3339e8b063 100644 --- a/packages/manager/src/components/AddNewLink/AddNewLink.tsx +++ b/packages/manager/src/components/AddNewLink/AddNewLink.tsx @@ -7,10 +7,25 @@ import { Button } from '../Button/Button'; import type { TooltipProps } from 'src/components/Tooltip'; interface Props extends Omit { + /** + * Boolean for if `AddNewLink` should be disabled or not + */ disabled?: boolean; + /** + * The reason why `AddNewLink` is disabled + */ disabledReason?: string; + /** + * The text to display in `AddNewLink`. Takes precendence over `label` + */ display?: string; + /** + * The text to display if no `display` prop is passed in + */ label: string; + /** + * The action to perform when clicking on `AddNewLink` + */ onClick: (e?: React.MouseEvent) => void; } From decc4538ca55ced51df10bcea8345c00def07669 Mon Sep 17 00:00:00 2001 From: Connie Liu Date: Wed, 18 Sep 2024 12:52:57 -0400 Subject: [PATCH 05/14] add changesets --- packages/manager/.changeset/pr-10966-added-1726678370482.md | 5 +++++ packages/manager/.changeset/pr-10966-tests-1726678346834.md | 5 +++++ 2 files changed, 10 insertions(+) create mode 100644 packages/manager/.changeset/pr-10966-added-1726678370482.md create mode 100644 packages/manager/.changeset/pr-10966-tests-1726678346834.md diff --git a/packages/manager/.changeset/pr-10966-added-1726678370482.md b/packages/manager/.changeset/pr-10966-added-1726678370482.md new file mode 100644 index 00000000000..56d211b8b80 --- /dev/null +++ b/packages/manager/.changeset/pr-10966-added-1726678370482.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Added +--- + +Storybook for `AddNewLink` component ([#10966](https://github.com/linode/manager/pull/10966)) diff --git a/packages/manager/.changeset/pr-10966-tests-1726678346834.md b/packages/manager/.changeset/pr-10966-tests-1726678346834.md new file mode 100644 index 00000000000..6478be50194 --- /dev/null +++ b/packages/manager/.changeset/pr-10966-tests-1726678346834.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Tests +--- + +Add unit tests for `AddNewLink` and `AccountActivationLanding` components ([#10966](https://github.com/linode/manager/pull/10966)) From eeb4aec1f52ebd159cc4e8880de88d9748a2c4e5 Mon Sep 17 00:00:00 2001 From: Connie Liu Date: Wed, 18 Sep 2024 14:02:35 -0400 Subject: [PATCH 06/14] switch to userEvent instead of fireEvent --- .../AccountActivation/AccountActivationLanding.test.tsx | 6 +++--- .../manager/src/components/AddNewLink/AddNewLink.test.tsx | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/manager/src/components/AccountActivation/AccountActivationLanding.test.tsx b/packages/manager/src/components/AccountActivation/AccountActivationLanding.test.tsx index 9e800c86045..4c943493612 100644 --- a/packages/manager/src/components/AccountActivation/AccountActivationLanding.test.tsx +++ b/packages/manager/src/components/AccountActivation/AccountActivationLanding.test.tsx @@ -1,4 +1,4 @@ -import { fireEvent } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import * as React from 'react'; import { renderWithTheme } from 'src/utilities/testHelpers'; @@ -25,14 +25,14 @@ describe('AccountActivationLanding', () => { expect(queryByText(openSupportTicket)).not.toBeInTheDocument(); }); - it('toggles open the Support Ticket dialog', () => { + it('toggles open the Support Ticket dialog', async () => { const { getByText, queryByText } = renderWithTheme( ); expect(queryByText(openSupportTicket)).not.toBeInTheDocument(); const supportButtonLink = getByText(/please open a Support ticket/); - fireEvent.click(supportButtonLink); + await userEvent.click(supportButtonLink); expect(getByText(openSupportTicket)).toBeVisible(); }); }); diff --git a/packages/manager/src/components/AddNewLink/AddNewLink.test.tsx b/packages/manager/src/components/AddNewLink/AddNewLink.test.tsx index f798e247e12..4fb72fc4ed2 100644 --- a/packages/manager/src/components/AddNewLink/AddNewLink.test.tsx +++ b/packages/manager/src/components/AddNewLink/AddNewLink.test.tsx @@ -1,4 +1,4 @@ -import { fireEvent } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import * as React from 'react'; import { renderWithTheme } from 'src/utilities/testHelpers'; @@ -64,11 +64,11 @@ describe('AddNewLink', () => { expect(queryByText(label)).not.toBeInTheDocument(); }); - it('fires the onClick event if the button is clicked', () => { + it('fires the onClick event if the button is clicked', async () => { const { getByText } = renderWithTheme(); const button = getByText(label); - fireEvent.click(button); + await userEvent.click(button); expect(props.onClick).toHaveBeenCalled(); }); }); From a8eef6f48d8fafbd3472b23d765d2acb2dc99719 Mon Sep 17 00:00:00 2001 From: Connie Liu <139280159+coliu-akamai@users.noreply.github.com> Date: Thu, 19 Sep 2024 08:23:08 -0400 Subject: [PATCH 07/14] Update packages/manager/src/components/AddNewLink/AddNewLink.stories.tsx Co-authored-by: Purvesh Makode --- .../manager/src/components/AddNewLink/AddNewLink.stories.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/manager/src/components/AddNewLink/AddNewLink.stories.tsx b/packages/manager/src/components/AddNewLink/AddNewLink.stories.tsx index dea1c03a4e0..c9f035fe062 100644 --- a/packages/manager/src/components/AddNewLink/AddNewLink.stories.tsx +++ b/packages/manager/src/components/AddNewLink/AddNewLink.stories.tsx @@ -18,9 +18,7 @@ const defaultArgs = { }; export const Default: Story = { - args: { - ...defaultArgs, - }, + args: defaultArgs, render: (args) => { return ; }, From 510766ed5a081d13c8e7e9f70784914e3f2884b6 Mon Sep 17 00:00:00 2001 From: Connie Liu <139280159+coliu-akamai@users.noreply.github.com> Date: Thu, 19 Sep 2024 08:23:24 -0400 Subject: [PATCH 08/14] Update packages/manager/src/components/AddNewLink/AddNewLink.stories.tsx Co-authored-by: Purvesh Makode --- .../manager/src/components/AddNewLink/AddNewLink.stories.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/manager/src/components/AddNewLink/AddNewLink.stories.tsx b/packages/manager/src/components/AddNewLink/AddNewLink.stories.tsx index c9f035fe062..d782eeaded4 100644 --- a/packages/manager/src/components/AddNewLink/AddNewLink.stories.tsx +++ b/packages/manager/src/components/AddNewLink/AddNewLink.stories.tsx @@ -29,7 +29,6 @@ export const CustomDisplay = { ...defaultArgs, display: 'test display', }, - render: Default.render, }; export const Disabled = { From b12fb1818c7f7cfda0bb9532c548ea0921bd77f6 Mon Sep 17 00:00:00 2001 From: Connie Liu Date: Thu, 19 Sep 2024 08:34:02 -0400 Subject: [PATCH 09/14] add new story/update test --- .../components/AddNewLink/AddNewLink.stories.tsx | 14 ++++++++------ .../src/components/AddNewLink/AddNewLink.test.tsx | 7 +++++-- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/packages/manager/src/components/AddNewLink/AddNewLink.stories.tsx b/packages/manager/src/components/AddNewLink/AddNewLink.stories.tsx index d782eeaded4..ad14b67a2a0 100644 --- a/packages/manager/src/components/AddNewLink/AddNewLink.stories.tsx +++ b/packages/manager/src/components/AddNewLink/AddNewLink.stories.tsx @@ -1,5 +1,4 @@ import { action } from '@storybook/addon-actions'; -import React from 'react'; import { AddNewLink } from './AddNewLink'; @@ -19,9 +18,6 @@ const defaultArgs = { export const Default: Story = { args: defaultArgs, - render: (args) => { - return ; - }, }; export const CustomDisplay = { @@ -31,13 +27,19 @@ export const CustomDisplay = { }, }; -export const Disabled = { +export const DisabledWithoutReason = { + args: { + ...defaultArgs, + disabled: true, + }, +}; + +export const DisabledWithReason = { args: { ...defaultArgs, disabled: true, disabledReason: 'This is disabled', }, - render: Default.render, }; export default meta; diff --git a/packages/manager/src/components/AddNewLink/AddNewLink.test.tsx b/packages/manager/src/components/AddNewLink/AddNewLink.test.tsx index 4fb72fc4ed2..2cd1e5253ff 100644 --- a/packages/manager/src/components/AddNewLink/AddNewLink.test.tsx +++ b/packages/manager/src/components/AddNewLink/AddNewLink.test.tsx @@ -20,6 +20,7 @@ describe('AddNewLink', () => { expect(getByText(label)).toBeVisible(); }); + it('renders the AddNewLink component without a tooltip if disabled is falsy', () => { const { queryByLabelText, queryByTestId } = renderWithTheme( { expect(queryByTestId(testId)).not.toBeInTheDocument(); }); - it('renders the AddNewLink component without a tooltip if disabledReason is falsy', () => { - const { queryByTestId } = renderWithTheme( + it('renders the AddNewLink component without a tooltip if disabledReason is falsy', async () => { + const { getByText, queryByTestId } = renderWithTheme( ); expect(queryByTestId(testId)).not.toBeInTheDocument(); + await userEvent.click(getByText(label)); + expect(props.onClick).not.toHaveBeenCalled(); }); it('renders a tooltip if disabled and disabledReason are truthy', () => { From dfeba2e150f2432339d27b523c8407606d72c492 Mon Sep 17 00:00:00 2001 From: Connie Liu Date: Thu, 19 Sep 2024 12:38:54 -0400 Subject: [PATCH 10/14] replacing AddNewLink with button --- packages/manager/src/components/Button/Button.tsx | 9 ++++++--- .../Databases/DatabaseDetail/AccessControls.tsx | 9 +++++---- .../LinodesDetail/LinodeConfigs/LinodeConfigs.tsx | 10 ++++------ .../src/features/Managed/Contacts/Contacts.tsx | 9 +++++---- .../features/Managed/Credentials/CredentialList.tsx | 7 ++----- .../src/features/Managed/Monitors/MonitorTable.tsx | 9 ++++----- .../features/Profile/OAuthClients/OAuthClients.tsx | 9 ++++----- .../manager/src/features/Profile/SSHKeys/SSHKeys.tsx | 9 ++++----- packages/manager/src/features/Users/UsersLanding.tsx | 11 ++++++----- 9 files changed, 40 insertions(+), 42 deletions(-) diff --git a/packages/manager/src/components/Button/Button.tsx b/packages/manager/src/components/Button/Button.tsx index db54b5cec07..e9e3019b07c 100644 --- a/packages/manager/src/components/Button/Button.tsx +++ b/packages/manager/src/components/Button/Button.tsx @@ -1,7 +1,6 @@ import HelpOutline from '@mui/icons-material/HelpOutline'; -import _Button, { ButtonProps as _ButtonProps } from '@mui/material/Button'; -import { Theme, styled } from '@mui/material/styles'; -import { SxProps } from '@mui/system'; +import _Button from '@mui/material/Button'; +import { styled } from '@mui/material/styles'; import * as React from 'react'; import Reload from 'src/assets/icons/reload.svg'; @@ -10,6 +9,10 @@ import { Tooltip } from 'src/components/Tooltip'; import { rotate360 } from '../../styles/keyframes'; import { omittedProps } from '../../utilities/omittedProps'; +import type { ButtonProps as _ButtonProps } from '@mui/material/Button'; +import type { Theme } from '@mui/material/styles'; +import type { SxProps } from '@mui/system'; + export type ButtonType = 'outlined' | 'primary' | 'secondary'; export interface ButtonProps extends _ButtonProps { diff --git a/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.tsx b/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.tsx index 9f72275a1a0..3dd4730b8c4 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { makeStyles } from 'tss-react/mui'; import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel'; -import { AddNewLink } from 'src/components/AddNewLink/AddNewLink'; +import { Button } from 'src/components/Button/Button'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction'; import { Notice } from 'src/components/Notice/Notice'; @@ -197,12 +197,13 @@ export const AccessControls = (props: Props) => {
{description ?? null}
- setAddAccessControlDrawerOpen(true)} - /> + > + Manage Access Controls + {ipTable(allowList)} { }} label={'Configuration Profiles'} /> - + {({ data: orderedData, handleOrderChange, order, orderBy }) => ( diff --git a/packages/manager/src/features/Managed/Contacts/Contacts.tsx b/packages/manager/src/features/Managed/Contacts/Contacts.tsx index f8b3707f7f7..c8a32587eb1 100644 --- a/packages/manager/src/features/Managed/Contacts/Contacts.tsx +++ b/packages/manager/src/features/Managed/Contacts/Contacts.tsx @@ -1,7 +1,7 @@ import { useSnackbar } from 'notistack'; import * as React from 'react'; -import { AddNewLink } from 'src/components/AddNewLink/AddNewLink'; +import { Button } from 'src/components/Button/Button'; import { DeletionDialog } from 'src/components/DeletionDialog/DeletionDialog'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { Hidden } from 'src/components/Hidden'; @@ -100,13 +100,14 @@ const Contacts = () => { spacing={2} > - { setContactDrawerMode('create'); contactDrawer.open(); }} - label="Add Contact" - /> + > + Add Contact + diff --git a/packages/manager/src/features/Managed/Credentials/CredentialList.tsx b/packages/manager/src/features/Managed/Credentials/CredentialList.tsx index b9f79818124..2c97a4a2898 100644 --- a/packages/manager/src/features/Managed/Credentials/CredentialList.tsx +++ b/packages/manager/src/features/Managed/Credentials/CredentialList.tsx @@ -1,7 +1,7 @@ import { useSnackbar } from 'notistack'; import * as React from 'react'; -import { AddNewLink } from 'src/components/AddNewLink/AddNewLink'; +import { Button } from 'src/components/Button/Button'; import { DeletionDialog } from 'src/components/DeletionDialog/DeletionDialog'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import OrderBy from 'src/components/OrderBy'; @@ -205,10 +205,7 @@ export const CredentialList = () => { spacing={2} > - setDrawerOpen(true)} - /> + diff --git a/packages/manager/src/features/Managed/Monitors/MonitorTable.tsx b/packages/manager/src/features/Managed/Monitors/MonitorTable.tsx index 71778a6f846..dac04b9bd99 100644 --- a/packages/manager/src/features/Managed/Monitors/MonitorTable.tsx +++ b/packages/manager/src/features/Managed/Monitors/MonitorTable.tsx @@ -2,7 +2,7 @@ import Grid from '@mui/material/Unstable_Grid2'; import { useSnackbar } from 'notistack'; import * as React from 'react'; -import { AddNewLink } from 'src/components/AddNewLink/AddNewLink'; +import { Button } from 'src/components/Button/Button'; import { DeletionDialog } from 'src/components/DeletionDialog/DeletionDialog'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import OrderBy from 'src/components/OrderBy'; @@ -181,10 +181,9 @@ export const MonitorTable = () => { - setMonitorDrawerOpen(true)} - /> + diff --git a/packages/manager/src/features/Profile/OAuthClients/OAuthClients.tsx b/packages/manager/src/features/Profile/OAuthClients/OAuthClients.tsx index 84f51c9b592..cb9acbb2118 100644 --- a/packages/manager/src/features/Profile/OAuthClients/OAuthClients.tsx +++ b/packages/manager/src/features/Profile/OAuthClients/OAuthClients.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import { AddNewLink } from 'src/components/AddNewLink/AddNewLink'; import { Box } from 'src/components/Box'; +import { Button } from 'src/components/Button/Button'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { Hidden } from 'src/components/Hidden'; import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter'; @@ -129,10 +129,9 @@ const OAuthClients = () => { marginBottom={1} paddingRight={{ lg: 0, md: 0, sm: 1, xs: 1 }} > - setIsCreateDrawerOpen(true)} - /> + diff --git a/packages/manager/src/features/Profile/SSHKeys/SSHKeys.tsx b/packages/manager/src/features/Profile/SSHKeys/SSHKeys.tsx index a2d7dd77f8e..eb067e67a93 100644 --- a/packages/manager/src/features/Profile/SSHKeys/SSHKeys.tsx +++ b/packages/manager/src/features/Profile/SSHKeys/SSHKeys.tsx @@ -2,7 +2,7 @@ import { styled } from '@mui/material/styles'; import Grid from '@mui/material/Unstable_Grid2'; import * as React from 'react'; -import { AddNewLink } from 'src/components/AddNewLink/AddNewLink'; +import { Button } from 'src/components/Button/Button'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { Hidden } from 'src/components/Hidden'; import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter'; @@ -108,10 +108,9 @@ export const SSHKeys = () => { spacing={2} > - setIsCreateDrawerOpen(true)} - /> +
diff --git a/packages/manager/src/features/Users/UsersLanding.tsx b/packages/manager/src/features/Users/UsersLanding.tsx index dca96afbd61..35b14e73446 100644 --- a/packages/manager/src/features/Users/UsersLanding.tsx +++ b/packages/manager/src/features/Users/UsersLanding.tsx @@ -2,8 +2,8 @@ import { useTheme } from '@mui/material/styles'; import useMediaQuery from '@mui/material/useMediaQuery'; import * as React from 'react'; -import { AddNewLink } from 'src/components/AddNewLink/AddNewLink'; import { Box } from 'src/components/Box'; +import { Button } from 'src/components/Button/Button'; import { DocumentTitleSegment } from 'src/components/DocumentTitle'; import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter'; import { Table } from 'src/components/Table'; @@ -146,16 +146,17 @@ export const UsersLanding = () => { User Settings )} - setIsCreateDrawerOpen(true)} - /> + > + Add a User +
Date: Thu, 19 Sep 2024 13:08:19 -0400 Subject: [PATCH 11/14] delete AddNewLink, update styling --- .../AddNewLink/AddNewLink.stories.tsx | 45 ----------- .../components/AddNewLink/AddNewLink.test.tsx | 77 ------------------- .../src/components/AddNewLink/AddNewLink.tsx | 76 ------------------ .../DatabaseDetail/AccessControls.tsx | 1 + .../LinodeConfigs/LinodeConfigs.tsx | 2 +- .../features/Managed/Contacts/Contacts.tsx | 1 + .../Managed/Credentials/CredentialList.tsx | 4 +- .../Managed/Monitors/MonitorTable.tsx | 5 +- .../Profile/OAuthClients/OAuthClients.tsx | 5 +- .../src/features/Profile/SSHKeys/SSHKeys.tsx | 5 +- .../src/features/Users/UsersLanding.tsx | 1 + 11 files changed, 19 insertions(+), 203 deletions(-) delete mode 100644 packages/manager/src/components/AddNewLink/AddNewLink.stories.tsx delete mode 100644 packages/manager/src/components/AddNewLink/AddNewLink.test.tsx delete mode 100644 packages/manager/src/components/AddNewLink/AddNewLink.tsx diff --git a/packages/manager/src/components/AddNewLink/AddNewLink.stories.tsx b/packages/manager/src/components/AddNewLink/AddNewLink.stories.tsx deleted file mode 100644 index ad14b67a2a0..00000000000 --- a/packages/manager/src/components/AddNewLink/AddNewLink.stories.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { action } from '@storybook/addon-actions'; - -import { AddNewLink } from './AddNewLink'; - -import type { Meta, StoryObj } from '@storybook/react'; - -const meta: Meta = { - component: AddNewLink, - title: 'Components/AddNewLink', -}; - -type Story = StoryObj; - -const defaultArgs = { - label: 'test label', - onClick: action('onClick'), -}; - -export const Default: Story = { - args: defaultArgs, -}; - -export const CustomDisplay = { - args: { - ...defaultArgs, - display: 'test display', - }, -}; - -export const DisabledWithoutReason = { - args: { - ...defaultArgs, - disabled: true, - }, -}; - -export const DisabledWithReason = { - args: { - ...defaultArgs, - disabled: true, - disabledReason: 'This is disabled', - }, -}; - -export default meta; diff --git a/packages/manager/src/components/AddNewLink/AddNewLink.test.tsx b/packages/manager/src/components/AddNewLink/AddNewLink.test.tsx deleted file mode 100644 index 2cd1e5253ff..00000000000 --- a/packages/manager/src/components/AddNewLink/AddNewLink.test.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import userEvent from '@testing-library/user-event'; -import * as React from 'react'; - -import { renderWithTheme } from 'src/utilities/testHelpers'; - -import { AddNewLink } from './AddNewLink'; - -const label = 'test-label'; -const disabledReason = 'test disabled reason'; -const testId = 'disabled-tooltip'; - -const props = { - label, - onClick: vi.fn(), -}; - -describe('AddNewLink', () => { - it('renders the AddNewLink component', () => { - const { getByText } = renderWithTheme(); - - expect(getByText(label)).toBeVisible(); - }); - - it('renders the AddNewLink component without a tooltip if disabled is falsy', () => { - const { queryByLabelText, queryByTestId } = renderWithTheme( - - ); - - expect(queryByLabelText(disabledReason)).not.toBeInTheDocument(); - expect(queryByTestId(testId)).not.toBeInTheDocument(); - }); - - it('renders the AddNewLink component without a tooltip if disabledReason is falsy', async () => { - const { getByText, queryByTestId } = renderWithTheme( - - ); - - expect(queryByTestId(testId)).not.toBeInTheDocument(); - await userEvent.click(getByText(label)); - expect(props.onClick).not.toHaveBeenCalled(); - }); - - it('renders a tooltip if disabled and disabledReason are truthy', () => { - const { getByLabelText, getByTestId } = renderWithTheme( - - ); - - expect(getByLabelText(disabledReason)).toBeVisible(); - expect(getByTestId(testId)).toBeInTheDocument(); - }); - - it("displays the passed in 'display' value if it is given", () => { - const { getByText, queryByText } = renderWithTheme( - - ); - - expect(getByText('test-display')).toBeVisible(); - expect(queryByText(label)).not.toBeInTheDocument(); - }); - - it('fires the onClick event if the button is clicked', async () => { - const { getByText } = renderWithTheme(); - - const button = getByText(label); - await userEvent.click(button); - expect(props.onClick).toHaveBeenCalled(); - }); -}); diff --git a/packages/manager/src/components/AddNewLink/AddNewLink.tsx b/packages/manager/src/components/AddNewLink/AddNewLink.tsx deleted file mode 100644 index c3339e8b063..00000000000 --- a/packages/manager/src/components/AddNewLink/AddNewLink.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import * as React from 'react'; - -import { Tooltip } from 'src/components/Tooltip'; - -import { Button } from '../Button/Button'; - -import type { TooltipProps } from 'src/components/Tooltip'; - -interface Props extends Omit { - /** - * Boolean for if `AddNewLink` should be disabled or not - */ - disabled?: boolean; - /** - * The reason why `AddNewLink` is disabled - */ - disabledReason?: string; - /** - * The text to display in `AddNewLink`. Takes precendence over `label` - */ - display?: string; - /** - * The text to display if no `display` prop is passed in - */ - label: string; - /** - * The action to perform when clicking on `AddNewLink` - */ - onClick: (e?: React.MouseEvent) => void; -} - -export const AddNewLink = (props: Props) => { - const { - className, - disabled, - disabledReason, - display, - label, - onClick, - ...remainingPropsAsTooltipProps - } = props; - - const baseProps = { - className, - disabled, - onClick, - text: label, - title: label, - }; - - if (!!disabled && !!disabledReason) { - return ( - -
- {/* Wrapping in div because the child of tooltip needs to be able to hold a ref */} - -
- - ); - } - - return ( - - ); -}; diff --git a/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.tsx b/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.tsx index 3dd4730b8c4..1e2a9070474 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.tsx @@ -198,6 +198,7 @@ export const AccessControls = (props: Props) => {
{description ?? null}
diff --git a/packages/manager/src/features/Managed/Contacts/Contacts.tsx b/packages/manager/src/features/Managed/Contacts/Contacts.tsx index c8a32587eb1..1c7d5b88018 100644 --- a/packages/manager/src/features/Managed/Contacts/Contacts.tsx +++ b/packages/manager/src/features/Managed/Contacts/Contacts.tsx @@ -105,6 +105,7 @@ const Contacts = () => { setContactDrawerMode('create'); contactDrawer.open(); }} + buttonType="primary" > Add Contact diff --git a/packages/manager/src/features/Managed/Credentials/CredentialList.tsx b/packages/manager/src/features/Managed/Credentials/CredentialList.tsx index 2c97a4a2898..54770113d01 100644 --- a/packages/manager/src/features/Managed/Credentials/CredentialList.tsx +++ b/packages/manager/src/features/Managed/Credentials/CredentialList.tsx @@ -205,7 +205,9 @@ export const CredentialList = () => { spacing={2} > - + diff --git a/packages/manager/src/features/Managed/Monitors/MonitorTable.tsx b/packages/manager/src/features/Managed/Monitors/MonitorTable.tsx index dac04b9bd99..95df7aad844 100644 --- a/packages/manager/src/features/Managed/Monitors/MonitorTable.tsx +++ b/packages/manager/src/features/Managed/Monitors/MonitorTable.tsx @@ -181,7 +181,10 @@ export const MonitorTable = () => { - diff --git a/packages/manager/src/features/Profile/OAuthClients/OAuthClients.tsx b/packages/manager/src/features/Profile/OAuthClients/OAuthClients.tsx index cb9acbb2118..db289cf3a6e 100644 --- a/packages/manager/src/features/Profile/OAuthClients/OAuthClients.tsx +++ b/packages/manager/src/features/Profile/OAuthClients/OAuthClients.tsx @@ -129,7 +129,10 @@ const OAuthClients = () => { marginBottom={1} paddingRight={{ lg: 0, md: 0, sm: 1, xs: 1 }} > - diff --git a/packages/manager/src/features/Profile/SSHKeys/SSHKeys.tsx b/packages/manager/src/features/Profile/SSHKeys/SSHKeys.tsx index eb067e67a93..622bb9dab1b 100644 --- a/packages/manager/src/features/Profile/SSHKeys/SSHKeys.tsx +++ b/packages/manager/src/features/Profile/SSHKeys/SSHKeys.tsx @@ -108,7 +108,10 @@ export const SSHKeys = () => { spacing={2} > - diff --git a/packages/manager/src/features/Users/UsersLanding.tsx b/packages/manager/src/features/Users/UsersLanding.tsx index 35b14e73446..a0298e8690f 100644 --- a/packages/manager/src/features/Users/UsersLanding.tsx +++ b/packages/manager/src/features/Users/UsersLanding.tsx @@ -152,6 +152,7 @@ export const UsersLanding = () => { ? 'You cannot create other users as a restricted user.' : undefined } + buttonType="primary" disabled={isRestrictedUser} onClick={() => setIsCreateDrawerOpen(true)} > From 457d2b7505c1232da9e82122f746c702851e316c Mon Sep 17 00:00:00 2001 From: Connie Liu Date: Thu, 19 Sep 2024 13:10:34 -0400 Subject: [PATCH 12/14] update changesets --- packages/manager/.changeset/pr-10966-added-1726678370482.md | 5 ----- .../manager/.changeset/pr-10966-removed-1726765827523.md | 5 +++++ packages/manager/.changeset/pr-10966-tests-1726678346834.md | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) delete mode 100644 packages/manager/.changeset/pr-10966-added-1726678370482.md create mode 100644 packages/manager/.changeset/pr-10966-removed-1726765827523.md diff --git a/packages/manager/.changeset/pr-10966-added-1726678370482.md b/packages/manager/.changeset/pr-10966-added-1726678370482.md deleted file mode 100644 index 56d211b8b80..00000000000 --- a/packages/manager/.changeset/pr-10966-added-1726678370482.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@linode/manager": Added ---- - -Storybook for `AddNewLink` component ([#10966](https://github.com/linode/manager/pull/10966)) diff --git a/packages/manager/.changeset/pr-10966-removed-1726765827523.md b/packages/manager/.changeset/pr-10966-removed-1726765827523.md new file mode 100644 index 00000000000..9e38773af5c --- /dev/null +++ b/packages/manager/.changeset/pr-10966-removed-1726765827523.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Removed +--- + +`AddNewLink` component, replacing instances with `Button` ([#10966](https://github.com/linode/manager/pull/10966)) diff --git a/packages/manager/.changeset/pr-10966-tests-1726678346834.md b/packages/manager/.changeset/pr-10966-tests-1726678346834.md index 6478be50194..d206c4c7bc0 100644 --- a/packages/manager/.changeset/pr-10966-tests-1726678346834.md +++ b/packages/manager/.changeset/pr-10966-tests-1726678346834.md @@ -2,4 +2,4 @@ "@linode/manager": Tests --- -Add unit tests for `AddNewLink` and `AccountActivationLanding` components ([#10966](https://github.com/linode/manager/pull/10966)) +Add unit tests for `AccountActivationLanding` component ([#10966](https://github.com/linode/manager/pull/10966)) From 00e8638ac35c0f8912caccefc3f01327d47d5f3e Mon Sep 17 00:00:00 2001 From: Connie Liu Date: Thu, 19 Sep 2024 15:23:17 -0400 Subject: [PATCH 13/14] fix failing tests --- .../DatabaseDetail/AccessControls.test.tsx | 14 +++++++----- .../DatabaseSettings.test.tsx | 22 +++++++++---------- .../DatabaseSettings/DatabaseSettings.tsx | 5 +++-- 3 files changed, 21 insertions(+), 20 deletions(-) diff --git a/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.test.tsx b/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.test.tsx index 128121d878f..6754905c376 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.test.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.test.tsx @@ -33,19 +33,21 @@ describe('Access Controls', () => { it('Should disable "Manage Access Control" button if disabled = true', () => { const database = databaseFactory.build(); - const { getByTitle } = renderWithTheme( + const { getByRole } = renderWithTheme( ); - const manageAccessControlBtn = getByTitle('Manage Access Controls'); - expect(manageAccessControlBtn).toBeDisabled(); + expect( + getByRole('button', { name: 'Manage Access Controls' }) + ).toBeDisabled(); }); it('Should enable "Manage Access Control" button if disabled = false', () => { const database = databaseFactory.build(); - const { getByTitle } = renderWithTheme( + const { getByRole } = renderWithTheme( ); - const manageAccessControlBtn = getByTitle('Manage Access Controls'); - expect(manageAccessControlBtn).toBeEnabled(); + expect( + getByRole('button', { name: 'Manage Access Controls' }) + ).toBeEnabled(); }); }); diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.test.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.test.tsx index d310fbfc8ae..2d82bc80b18 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.test.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.test.tsx @@ -25,30 +25,28 @@ describe('DatabaseSettings Component', () => { }); it('Should disable buttons if disabled = true', () => { - const { getByTitle } = renderWithTheme( + const { getByRole, getByTitle } = renderWithTheme( ); - const disabledButtons = [ - 'Manage Access Controls', - 'Reset Root Password', - 'Save Changes', - ]; + const disabledButtons = ['Reset Root Password', 'Save Changes']; for (const buttonTitle of disabledButtons) { const button = getByTitle(buttonTitle); expect(button).toBeDisabled(); } + expect( + getByRole('button', { name: 'Manage Access Controls' }) + ).toBeDisabled(); }); it('Should enable buttons if disabled = false', () => { - const { getByTitle } = renderWithTheme( + const { getByRole, getByTitle } = renderWithTheme( ); - const enabledButtons = ['Manage Access Controls', 'Reset Root Password']; - for (const buttonTitle of enabledButtons) { - const button = getByTitle(buttonTitle); - expect(button).toBeEnabled(); - } + expect(getByTitle('Reset Root Password')).toBeEnabled(); + expect( + getByRole('button', { name: 'Manage Access Controls' }) + ).toBeEnabled(); }); }); diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.tsx index f7bead67c5c..03197dd8d01 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.tsx @@ -1,9 +1,8 @@ -import { Database } from '@linode/api-v4/lib/databases/types'; import * as React from 'react'; import { Divider } from 'src/components/Divider'; -import { Typography } from 'src/components/Typography'; import { Paper } from 'src/components/Paper'; +import { Typography } from 'src/components/Typography'; import { useProfile } from 'src/queries/profile/profile'; import AccessControls from '../AccessControls'; @@ -12,6 +11,8 @@ import DatabaseSettingsMenuItem from './DatabaseSettingsMenuItem'; import DatabaseSettingsResetPasswordDialog from './DatabaseSettingsResetPasswordDialog'; import MaintenanceWindow from './MaintenanceWindow'; +import type { Database } from '@linode/api-v4/lib/databases/types'; + interface Props { database: Database; disabled?: boolean; From a8e5fcbce224962547a73d9ca79be38407bf7acf Mon Sep 17 00:00:00 2001 From: Connie Liu Date: Fri, 20 Sep 2024 09:12:03 -0400 Subject: [PATCH 14/14] update tests @pmakode-akamai --- .../DatabaseDetail/AccessControls.test.tsx | 38 +++++++++---------- .../DatabaseSettings.test.tsx | 37 ++++++++---------- 2 files changed, 35 insertions(+), 40 deletions(-) diff --git a/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.test.tsx b/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.test.tsx index 6754905c376..5d551ca4253 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.test.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/AccessControls.test.tsx @@ -31,23 +31,23 @@ describe('Access Controls', () => { ).toBeInTheDocument(); }); - it('Should disable "Manage Access Control" button if disabled = true', () => { - const database = databaseFactory.build(); - const { getByRole } = renderWithTheme( - - ); - expect( - getByRole('button', { name: 'Manage Access Controls' }) - ).toBeDisabled(); - }); - - it('Should enable "Manage Access Control" button if disabled = false', () => { - const database = databaseFactory.build(); - const { getByRole } = renderWithTheme( - - ); - expect( - getByRole('button', { name: 'Manage Access Controls' }) - ).toBeEnabled(); - }); + it.each([ + ['disable', true], + ['enable', false], + ])( + 'should %s "Manage Access Control" button when disabled is %s', + (_, isDisabled) => { + const database = databaseFactory.build(); + const { getByRole } = renderWithTheme( + + ); + const button = getByRole('button', { name: 'Manage Access Controls' }); + + if (isDisabled) { + expect(button).toBeDisabled(); + } else { + expect(button).toBeEnabled(); + } + } + ); }); diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.test.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.test.tsx index 2d82bc80b18..c4a23817d57 100644 --- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.test.tsx +++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.test.tsx @@ -24,29 +24,24 @@ describe('DatabaseSettings Component', () => { expect(headings[2].textContent).toBe('Delete Cluster'); }); - it('Should disable buttons if disabled = true', () => { + it.each([ + ['disable', true], + ['enable', false], + ])('should %s buttons when disabled is %s', (_, isDisabled) => { const { getByRole, getByTitle } = renderWithTheme( - + ); - const disabledButtons = ['Reset Root Password', 'Save Changes']; - - for (const buttonTitle of disabledButtons) { - const button = getByTitle(buttonTitle); - expect(button).toBeDisabled(); + const button1 = getByTitle('Reset Root Password'); + const button2 = getByTitle('Save Changes'); + const button3 = getByRole('button', { name: 'Manage Access Controls' }); + + if (isDisabled) { + expect(button1).toBeDisabled(); + expect(button2).toBeDisabled(); + expect(button3).toBeDisabled(); + } else { + expect(button1).toBeEnabled(); + expect(button3).toBeEnabled(); } - expect( - getByRole('button', { name: 'Manage Access Controls' }) - ).toBeDisabled(); - }); - - it('Should enable buttons if disabled = false', () => { - const { getByRole, getByTitle } = renderWithTheme( - - ); - - expect(getByTitle('Reset Root Password')).toBeEnabled(); - expect( - getByRole('button', { name: 'Manage Access Controls' }) - ).toBeEnabled(); }); });