test: [M3-8591, M3-8594] - Add unit tests for AccountActivationLandin…

…g component, remove AddNewLink component (#10966)

* add AccountActivationLanding tests + cleanup styling

* switch component to have named instead of default export

* add tests for AddNewLink + skeleton stories

* create storybook for AddNewLink component

* add changesets

* switch to userEvent instead of fireEvent

* Update packages/manager/src/components/AddNewLink/AddNewLink.stories.tsx

Co-authored-by: Purvesh Makode <pmakode@akamai.com>

* Update packages/manager/src/components/AddNewLink/AddNewLink.stories.tsx

Co-authored-by: Purvesh Makode <pmakode@akamai.com>

* add new story/update test

* replacing AddNewLink with button

* delete AddNewLink, update styling

* update changesets

* fix failing tests

* update tests @pmakode-akamai

---------

Co-authored-by: Purvesh Makode <pmakode@akamai.com>

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

packages/manager/.changeset/pr-10966-tests-1726678346834.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tests
+---
+
+Add unit tests for `AccountActivationLanding` component ([#10966](https://github.com/linode/manager/pull/10966))

packages/manager/src/components/AccountActivation/AccountActivationLanding.test.tsx

@@ -0,0 +1,38 @@
+import userEvent from '@testing-library/user-event';
+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(
+      <AccountActivationLanding />
+    );
+
+    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', async () => {
+    const { getByText, queryByText } = renderWithTheme(
+      <AccountActivationLanding />
+    );
+
+    expect(queryByText(openSupportTicket)).not.toBeInTheDocument();
+    const supportButtonLink = getByText(/please open a Support ticket/);
+    await userEvent.click(supportButtonLink);
+    expect(getByText(openSupportTicket)).toBeVisible();
+  });
+});

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<boolean>(
@@ -46,19 +33,24 @@ const AccountActivationLanding = () => {
     <ErrorState
       errorText={
         <React.Fragment>
-          <Typography className={classes.errorHeading} variant="h2">
+          <Typography
+            sx={(theme) => ({ marginBottom: theme.spacing(2) })}
+            variant="h2"
+          >
             Your account is currently being reviewed.
           </Typography>
-          <Typography className={classes.subheading}>
+          <Typography
+            sx={{
+              margin: '0 auto',
+              maxWidth: '60%',
+            }}
+          >
             Thanks for signing up! You&rsquo;ll receive an email from us once
             our review is complete, so hang tight. If you have questions during
             this process{' '}
-            <button
-              className={classes.cta}
-              onClick={() => toggleSupportDrawer(true)}
-            >
+            <StyledLinkButton onClick={() => toggleSupportDrawer(true)}>
               please open a Support ticket
-            </button>
+            </StyledLinkButton>
             .
           </Typography>
           <SupportTicketDialog

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 {

packages/manager/src/features/Databases/DatabaseDetail/AccessControls.test.tsx

@@ -31,21 +31,23 @@ describe('Access Controls', () => {
     ).toBeInTheDocument();
   });
 
-  it('Should disable "Manage Access Control" button if disabled = true', () => {
-    const database = databaseFactory.build();
-    const { getByTitle } = renderWithTheme(
-      <AccessControls database={database} disabled={true} />
-    );
-    const manageAccessControlBtn = getByTitle('Manage Access Controls');
-    expect(manageAccessControlBtn).toBeDisabled();
-  });
-
-  it('Should enable "Manage Access Control" button if disabled = false', () => {
-    const database = databaseFactory.build();
-    const { getByTitle } = renderWithTheme(
-      <AccessControls database={database} disabled={false} />
-    );
-    const manageAccessControlBtn = getByTitle('Manage Access Controls');
-    expect(manageAccessControlBtn).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(
+        <AccessControls database={database} disabled={isDisabled} />
+      );
+      const button = getByRole('button', { name: 'Manage Access Controls' });
+
+      if (isDisabled) {
+        expect(button).toBeDisabled();
+      } else {
+        expect(button).toBeEnabled();
+      }
+    }
+  );
 });

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 { 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,14 @@ export const AccessControls = (props: Props) => {
           </div>
           <div className={classes.sectionText}>{description ?? null}</div>
         </div>
-        <AddNewLink
+        <Button
+          buttonType="primary"
           className={classes.addAccessControlBtn}
           disabled={disabled}
-          label="Manage Access Controls"
           onClick={() => setAddAccessControlDrawerOpen(true)}
-        />
+        >
+          Manage Access Controls
+        </Button>
       </div>
       {ipTable(allowList)}
       <ConfirmationDialog

packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.test.tsx

@@ -24,31 +24,24 @@ describe('DatabaseSettings Component', () => {
     expect(headings[2].textContent).toBe('Delete Cluster');
   });
 
-  it('Should disable buttons if disabled = true', () => {
-    const { getByTitle } = renderWithTheme(
-      <DatabaseSettings database={database} disabled={true} />
+  it.each([
+    ['disable', true],
+    ['enable', false],
+  ])('should %s buttons when disabled is %s', (_, isDisabled) => {
+    const { getByRole, getByTitle } = renderWithTheme(
+      <DatabaseSettings database={database} disabled={isDisabled} />
     );
-    const disabledButtons = [
-      'Manage Access Controls',
-      'Reset Root Password',
-      'Save Changes',
-    ];
+    const button1 = getByTitle('Reset Root Password');
+    const button2 = getByTitle('Save Changes');
+    const button3 = getByRole('button', { name: 'Manage Access Controls' });
 
-    for (const buttonTitle of disabledButtons) {
-      const button = getByTitle(buttonTitle);
-      expect(button).toBeDisabled();
-    }
-  });
-
-  it('Should enable buttons if disabled = false', () => {
-    const { getByTitle } = renderWithTheme(
-      <DatabaseSettings database={database} />
-    );
-    const enabledButtons = ['Manage Access Controls', 'Reset Root Password'];
-
-    for (const buttonTitle of enabledButtons) {
-      const button = getByTitle(buttonTitle);
-      expect(button).toBeEnabled();
+    if (isDisabled) {
+      expect(button1).toBeDisabled();
+      expect(button2).toBeDisabled();
+      expect(button3).toBeDisabled();
+    } else {
+      expect(button1).toBeEnabled();
+      expect(button3).toBeEnabled();
     }
   });
 

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;

packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigs.tsx

@@ -2,8 +2,8 @@ import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
 
-import AddNewLink from 'src/components/AddNewLink';
 import { Box } from 'src/components/Box';
+import { Button } from 'src/components/Button/Button';
 import { DocsLink } from 'src/components/DocsLink/DocsLink';
 import OrderBy from 'src/components/OrderBy';
 import Paginate from 'src/components/Paginate';
@@ -97,11 +97,9 @@ const LinodeConfigs = () => {
           }}
           label={'Configuration Profiles'}
         />
-        <AddNewLink
-          disabled={isReadOnly}
-          label="Add Configuration"
-          onClick={onCreate}
-        />
+        <Button buttonType="primary" disabled={isReadOnly} onClick={onCreate}>
+          Add Configuration
+        </Button>
       </Box>
       <OrderBy data={configs ?? []} order={'asc'} orderBy={'label'}>
         {({ data: orderedData, handleOrderChange, order, orderBy }) => (