test: [M3-8591, M3-8594] - Add unit tests for AccountActivationLanding component, remove AddNewLink component

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(
+      <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', () => {
+    const { getByText, queryByText } = renderWithTheme(
+      <AccountActivationLanding />
+    );
+
+    expect(queryByText(openSupportTicket)).not.toBeInTheDocument();
+    const supportButtonLink = getByText(/please open a Support ticket/);
+    fireEvent.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/AddNewLink/AddNewLink.stories.tsx

@@ -0,0 +1,46 @@
+import { action } from '@storybook/addon-actions';
+import React from 'react';
+
+import { AddNewLink } from './AddNewLink';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof AddNewLink> = {
+  component: AddNewLink,
+  title: 'Components/AddNewLink',
+};
+
+type Story = StoryObj<typeof AddNewLink>;
+
+const defaultArgs = {
+  label: 'test label',
+  onClick: action('onClick'),
+};
+
+export const Default: Story = {
+  args: {
+    ...defaultArgs,
+  },
+  render: (args) => {
+    return <AddNewLink {...args} />;
+  },
+};
+
+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;

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(<AddNewLink {...props} />);
+
+    expect(getByText(label)).toBeVisible();
+  });
+  it('renders the AddNewLink component without a tooltip if disabled is falsy', () => {
+    const { queryByLabelText, queryByTestId } = renderWithTheme(
+      <AddNewLink
+        {...props}
+        disabledReason={disabledReason}
+        display="test-display"
+      />
+    );
+
+    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(
+      <AddNewLink {...props} disabled />
+    );
+
+    expect(queryByTestId(testId)).not.toBeInTheDocument();
+  });
+
+  it('renders a tooltip if disabled and disabledReason are truthy', () => {
+    const { getByLabelText, getByTestId } = renderWithTheme(
+      <AddNewLink
+        {...props}
+        disabled
+        disabledReason={disabledReason}
+        display="test-display"
+      />
+    );
+
+    expect(getByLabelText(disabledReason)).toBeVisible();
+    expect(getByTestId(testId)).toBeInTheDocument();
+  });
+
+  it("displays the passed in 'display' value if it is given", () => {
+    const { getByText, queryByText } = renderWithTheme(
+      <AddNewLink {...props} display="test-display" />
+    );
+
+    expect(getByText('test-display')).toBeVisible();
+    expect(queryByText(label)).not.toBeInTheDocument();
+  });
+
+  it('fires the onClick event if the button is clicked', () => {
+    const { getByText } = renderWithTheme(<AddNewLink {...props} />);
+
+    const button = getByText(label);
+    fireEvent.click(button);
+    expect(props.onClick).toHaveBeenCalled();
+  });
+});

packages/manager/src/components/AddNewLink/AddNewLink.tsx

@@ -1,18 +1,35 @@
 import * as React from 'react';
 
-import { Tooltip, TooltipProps } from 'src/components/Tooltip';
+import { Tooltip } from 'src/components/Tooltip';
 
 import { Button } from '../Button/Button';
 
-export interface Props extends Omit<TooltipProps, 'children' | 'title'> {
+import type { TooltipProps } from 'src/components/Tooltip';
+
+interface Props extends Omit<TooltipProps, 'children' | 'title'> {
+  /**
+   * 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<HTMLElement>) => void;
 }
 
-const AddNewLink = (props: Props) => {
+export const AddNewLink = (props: Props) => {
   const {
     className,
     disabled,
@@ -35,7 +52,7 @@ const AddNewLink = (props: Props) => {
     return (
       <Tooltip
         {...remainingPropsAsTooltipProps}
-        data-qa-disabled-text-icon-tooltip
+        data-testid="disabled-tooltip"
         enterTouchDelay={0}
         leaveTouchDelay={5000}
         placement={props.placement ? props.placement : 'bottom'}
@@ -57,5 +74,3 @@ const AddNewLink = (props: Props) => {
     </Button>
   );
 };
-
-export default AddNewLink;

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

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

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

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 = () => {

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

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