fix: [M3-9413] - Authentication Provider Selection Card UI Issue

packages/manager/.changeset/pr-11732-fixed-1740533390539.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+Authentication Provider Selection Card UI regression ([#11732](https://github.com/linode/manager/pull/11732))

packages/manager/src/components/SelectionCard/SelectionCard.tsx

@@ -1,6 +1,6 @@
 import { Tooltip } from '@linode/ui';
 import { styled } from '@mui/material/styles';
-import Grid from '@mui/material/Grid2';
+import Grid, { Grid2Props } from '@mui/material/Grid2';
 import * as React from 'react';
 
 import { CardBase } from './CardBase';
@@ -18,11 +18,21 @@ export interface SelectionCardProps {
    * Additional CSS classes to apply to the root element.
    */
   className?: string;
+  /**
+   * An optional custom data-testid
+   * @default selection-card
+   */
+  'data-testid'?: string;
   /**
    * If true, the card will be disabled and will be displayed in a disabled state.
    * @default false
    */
   disabled?: boolean;
+  /**
+   * Optionally override the grid item's size
+   * @default { lg: 4, sm: 6, xl: 3, xs: 12 }
+   */
+  gridSize?: Grid2Props['size'];
   /**
    * The heading of the card.
    * @example Linode 1GB
@@ -106,6 +116,7 @@ export const SelectionCard = React.memo((props: SelectionCardProps) => {
     checked,
     className,
     disabled,
+    gridSize,
     heading,
     headingDecoration,
     id,
@@ -156,12 +167,12 @@ export const SelectionCard = React.memo((props: SelectionCardProps) => {
       className={className}
       data-qa-selection-card
       data-qa-selection-card-checked={checked}
-      data-testid="selection-card"
+      data-testid={props['data-testid'] ?? 'selection-card'}
       disabled={disabled}
       id={id}
       onClick={handleClick}
       onKeyPress={handleKeyPress}
-      size={{ lg: 4, sm: 6, xl: 3, xs: 12 }}
+      size={gridSize ?? { lg: 4, sm: 6, xl: 3, xs: 12 }}
       sx={sxGrid}
       tabIndex={0}
     >

packages/manager/src/features/Profile/AuthenticationSettings/TPAProviders.test.tsx

@@ -1,69 +1,73 @@
-import { screen } from '@testing-library/react';
+import { screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import { TPAProviders } from './TPAProviders';
 
-vi.mock('src/hooks/useFlags', () => ({
-  __esModule: true,
-  useFlags: vi.fn().mockReturnValue({
-    tpaProviders: [
-      {
-        displayName: 'Google',
-        href: 'https://google.com',
-        icon: 'GoogleIcon',
-        name: 'google',
-      },
-      {
-        displayName: 'GitHub',
-        href: 'https://github.com',
-        icon: 'GitHubIcon',
-        name: 'github',
-      },
-    ],
-  }),
-}));
+import type { Provider } from 'src/featureFlags';
+
+const providers: Provider[] = [
+  {
+    displayName: 'Google',
+    href: 'https://google.com',
+    icon: 'GoogleIcon',
+    name: 'google',
+  },
+  {
+    displayName: 'GitHub',
+    href: 'https://github.com',
+    icon: 'GitHubIcon',
+    name: 'github',
+  },
+];
+
+const flags = { tpaProviders: providers };
 
 describe('TPAProviders component', () => {
   it('Should render login method with Linode button', () => {
-    const authType = 'password';
-    renderWithTheme(<TPAProviders authType={authType} />);
+    renderWithTheme(<TPAProviders authType="password" />, { flags });
+
     const linodeButton = screen.getByTestId('Button-Cloud Manager');
-    const LinodeButtonEnabled = screen.getByTestId('Enabled-Cloud Manager');
     expect(linodeButton).toBeInTheDocument();
-    expect(linodeButton).toHaveAttribute('aria-disabled', 'true');
-    expect(LinodeButtonEnabled).toBeInTheDocument();
+    expect(linodeButton).toBeDisabled();
+
+    const enabledText = within(linodeButton).getByText('Enabled');
+    expect(enabledText).toBeVisible();
   });
   it('Should render login method with Google button', () => {
-    const authType = 'google';
-    renderWithTheme(<TPAProviders authType={authType} />);
+    renderWithTheme(<TPAProviders authType="google" />, { flags });
+
     const googleButton = screen.getByTestId('Button-Google');
-    const googleButtonEnabled = screen.getByTestId('Enabled-Google');
-    const noticeElement = screen.getByTestId('Notice-Google');
     expect(googleButton).toBeInTheDocument();
-    expect(googleButton).toHaveAttribute('aria-disabled', 'true');
-    expect(googleButtonEnabled).toBeInTheDocument();
+    expect(googleButton).toBeDisabled();
+
+    const enabledText = within(googleButton).getByText('Enabled');
+    expect(enabledText).toBeVisible();
+
+    const noticeElement = screen.getByTestId('Notice-Google');
     expect(noticeElement).toBeInTheDocument();
   });
   it('Should render login method with GitHub button', () => {
-    const authType = 'github';
-    renderWithTheme(<TPAProviders authType={authType} />);
+    renderWithTheme(<TPAProviders authType="github" />, { flags });
+
     const githubButton = screen.getByTestId('Button-GitHub');
-    const githubButtonEnabled = screen.getByTestId('Enabled-GitHub');
-    const noticeElement = screen.getByTestId('Notice-GitHub');
     expect(githubButton).toBeInTheDocument();
-    expect(githubButton).toHaveAttribute('aria-disabled', 'true');
-    expect(githubButtonEnabled).toBeInTheDocument();
+    expect(githubButton).toBeDisabled();
+
+    const enabledText = within(githubButton).getByText('Enabled');
+    expect(enabledText).toBeInTheDocument();
+
+    const noticeElement = screen.getByTestId('Notice-GitHub');
     expect(noticeElement).toBeInTheDocument();
   });
 
   test('Should open the dialog when the button is clicked', async () => {
-    const authType = 'password';
-    const { getByTestId } = renderWithTheme(
-      <TPAProviders authType={authType} />
-    );
+    const {
+      getByTestId,
+    } = renderWithTheme(<TPAProviders authType="password" />, { flags });
+
     const button = getByTestId('Button-Google');
     await userEvent.click(button);
     const dialog = getByTestId('drawer');