refactor: [M3-6920] - Replace react-select with Autocomplete in 'Billing'

packages/manager/.changeset/pr-10681-tech-stories-1721227051502.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Replace 'react-select' with Autocomplete in Billing ([#10681](https://github.com/linode/manager/pull/10681))

packages/manager/cypress/e2e/core/billing/smoke-billing-activity.spec.ts

@@ -170,11 +170,6 @@ describe('Billing Activity Feed', () => {
         .scrollIntoView()
         .should('be.visible');
 
-      cy.contains('[data-qa-enhanced-select]', 'All Transaction Types').should(
-        'be.visible'
-      );
-      cy.contains('[data-qa-enhanced-select]', '6 Months').should('be.visible');
-
       // Confirm that payments and invoices from the past 6 months are displayed,
       // and that payments and invoices beyond 6 months are not displayed.
       invoiceMocks6Months.forEach((invoice) =>
@@ -201,11 +196,12 @@ describe('Billing Activity Feed', () => {
       mockGetInvoices(invoiceMocks).as('getInvoices');
       mockGetPayments(paymentMocks).as('getPayments');
 
-      cy.contains('[data-qa-enhanced-select]', '6 Months')
+      cy.findByText('Transaction Dates').click().type(`All Time`);
+      ui.autocompletePopper
+        .findByTitle(`All Time`)
         .should('be.visible')
         .click();
 
-      ui.select.findItemByText('All Time').should('be.visible').click();
       cy.wait(['@getInvoices', '@getPayments']);
 
       // Confirm that all invoices and payments are displayed.
@@ -218,12 +214,12 @@ describe('Billing Activity Feed', () => {
       });
 
       // Change transaction type drop-down to "Payments" only.
-      cy.contains('[data-qa-enhanced-select]', 'All Transaction Types')
+      cy.findByText('Transaction Types').click().type(`Payments`);
+      ui.autocompletePopper
+        .findByTitle(`Payments`)
         .should('be.visible')
         .click();
 
-      ui.select.findItemByText('Payments').should('be.visible').click();
-
       // Confirm that all payments are shown and that all invoices are hidden.
       paymentMocks.forEach((payment) =>
         cy.findByText(`Payment #${payment.id}`).should('be.visible')
@@ -233,12 +229,12 @@ describe('Billing Activity Feed', () => {
       );
 
       // Change transaction type drop-down to "Invoices" only.
-      cy.contains('[data-qa-enhanced-select]', 'Payments')
+      cy.findByText('Transaction Types').should('be.visible').focused().click();
+      ui.autocompletePopper
+        .findByTitle('Invoices')
         .should('be.visible')
         .click();
 
-      ui.select.findItemByText('Invoices').should('be.visible').click();
-
       // Confirm that all invoices are shown and that all payments are hidden.
       invoiceMocks6Months.forEach((invoice) => {
         cy.findByText(invoice.label).should('be.visible');
@@ -272,11 +268,8 @@ describe('Billing Activity Feed', () => {
     cy.wait(['@getInvoices', '@getPayments', '@getPaymentMethods']);
 
     // Change invoice date selection from "6 Months" to "All Time".
-    cy.contains('[data-qa-enhanced-select]', '6 Months')
-      .should('be.visible')
-      .click();
-
-    ui.select.findItemByText('All Time').should('be.visible').click();
+    cy.findByText('Transaction Dates').click().type('All Time');
+    ui.autocompletePopper.findByTitle('All Time').should('be.visible').click();
 
     cy.get('[data-qa-billing-activity-panel]')
       .should('be.visible')

packages/manager/src/features/Billing/BillingDetail.tsx

@@ -1,6 +1,6 @@
 import Paper from '@mui/material/Paper';
-import Grid from '@mui/material/Unstable_Grid2';
 import { styled } from '@mui/material/styles';
+import Grid from '@mui/material/Unstable_Grid2';
 import { PayPalScriptProvider } from '@paypal/react-paypal-js';
 import * as React from 'react';
 
@@ -14,7 +14,7 @@ import { useAllPaymentMethodsQuery } from 'src/queries/account/payment';
 import { useProfile } from 'src/queries/profile/profile';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 
-import BillingActivityPanel from './BillingPanels/BillingActivityPanel/BillingActivityPanel';
+import { BillingActivityPanel } from './BillingPanels/BillingActivityPanel/BillingActivityPanel';
 import BillingSummary from './BillingPanels/BillingSummary';
 import ContactInfo from './BillingPanels/ContactInfoPanel';
 import PaymentInformation from './BillingPanels/PaymentInfoPanel';
@@ -120,5 +120,3 @@ export const BillingActionButton = styled(Button)(({ theme, ...props }) => ({
   minWidth: 'auto',
   padding: 0,
 }));
-
-export default BillingDetail;

packages/manager/src/features/Billing/BillingPanels/BillingActivityPanel/BillingActivityPanel.test.tsx

@@ -5,11 +5,13 @@ import * as React from 'react';
 import { invoiceFactory, paymentFactory } from 'src/factories/billing';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
-import BillingActivityPanel, {
+import {
+  BillingActivityPanel,
   getCutoffFromDateRange,
   invoiceToActivityFeedItem,
   makeFilter,
   paymentToActivityFeedItem,
+  transactionDateOptions,
 } from './BillingActivityPanel';
 vi.mock('../../../../utilities/getUserTimezone');
 
@@ -71,13 +73,13 @@ describe('BillingActivityPanel', () => {
   });
 
   it('should filter by item type', async () => {
-    const { queryAllByTestId, queryByTestId, queryByText } = renderWithTheme(
+    const { getByLabelText, queryByTestId, queryByText } = renderWithTheme(
       <BillingActivityPanel />
     );
 
     // Test selecting "Invoices"
     await waitFor(() => {
-      const transactionTypeSelect = queryAllByTestId('select')?.[0];
+      const transactionTypeSelect = getByLabelText('Transaction Types');
       fireEvent.change(transactionTypeSelect, {
         target: { value: 'invoice' },
       });
@@ -86,7 +88,7 @@ describe('BillingActivityPanel', () => {
 
     // Test selecting "Payments"
     await waitFor(() => {
-      const transactionTypeSelect = queryAllByTestId('select')?.[0];
+      const transactionTypeSelect = getByLabelText('Transaction Types');
       fireEvent.change(transactionTypeSelect, {
         target: { value: 'payment' },
       });
@@ -95,12 +97,12 @@ describe('BillingActivityPanel', () => {
   });
 
   it('should filter by transaction date', async () => {
-    const { queryAllByTestId, queryByTestId, queryByText } = renderWithTheme(
+    const { getByLabelText, queryByTestId, queryByText } = renderWithTheme(
       <BillingActivityPanel />
     );
 
     await waitFor(() => {
-      const transactionDateSelect = queryAllByTestId('select')?.[1];
+      const transactionDateSelect = getByLabelText('Transaction Dates');
       fireEvent.change(transactionDateSelect, {
         target: { value: '30 Days' },
       });
@@ -110,11 +112,11 @@ describe('BillingActivityPanel', () => {
   });
 
   it('should display transaction selection components with defaults', async () => {
-    const { getByText } = renderWithTheme(<BillingActivityPanel />);
-    await waitFor(() => {
-      getByText('All Transaction Types');
-      getByText('90 Days');
-    });
+    const { getByLabelText } = renderWithTheme(<BillingActivityPanel />);
+    const transactionTypeSelect = getByLabelText('Transaction Types');
+    expect(transactionTypeSelect).toHaveValue('All Transaction Types');
+    const transactionDateSelect = getByLabelText('Transaction Dates');
+    expect(transactionDateSelect).toHaveValue('6 Months');
   });
 
   it('should display "Account active since"', async () => {
@@ -173,22 +175,29 @@ describe('paymentToActivityFeedItem', () => {
         throw new Error('Invalid test date');
       }
 
-      expect(getCutoffFromDateRange('30 Days', testDateISO)).toBe(
-        testDate.minus({ days: 30 }).toISO()
-      );
-      expect(getCutoffFromDateRange('60 Days', testDateISO)).toBe(
-        testDate.minus({ days: 60 }).toISO()
-      );
-      expect(getCutoffFromDateRange('90 Days', testDateISO)).toBe(
-        testDate.minus({ days: 90 }).toISO()
-      );
-      expect(getCutoffFromDateRange('6 Months', testDateISO)).toBe(
-        testDate.minus({ months: 6 }).toISO()
-      );
-      expect(getCutoffFromDateRange('12 Months', testDateISO)).toBe(
-        testDate.minus({ months: 12 }).toISO()
-      );
-      expect(getCutoffFromDateRange('All Time', testDateISO)).toBeNull();
+      expect(
+        getCutoffFromDateRange(transactionDateOptions[0], testDateISO)
+      ).toBe(testDate.minus({ days: 30 }).toISO());
+
+      expect(
+        getCutoffFromDateRange(transactionDateOptions[1], testDateISO)
+      ).toBe(testDate.minus({ days: 60 }).toISO());
+
+      expect(
+        getCutoffFromDateRange(transactionDateOptions[2], testDateISO)
+      ).toBe(testDate.minus({ days: 90 }).toISO());
+
+      expect(
+        getCutoffFromDateRange(transactionDateOptions[3], testDateISO)
+      ).toBe(testDate.minus({ months: 6 }).toISO());
+
+      expect(
+        getCutoffFromDateRange(transactionDateOptions[4], testDateISO)
+      ).toBe(testDate.minus({ months: 12 }).toISO());
+
+      expect(
+        getCutoffFromDateRange(transactionDateOptions[5], testDateISO)
+      ).toBeNull();
     });
   });