refactor: [UIE-9325] - Replace Formik with React Hook Form in AddAccessControlDrawer

packages/manager/.changeset/pr-13002-tech-stories-1761925907093.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Replace Formik with React Hook Form in DatabaseManageNetworkingDrawer ([#13002](https://github.com/linode/manager/pull/13002))

packages/manager/.changeset/pr-13044-tech-stories-1761925886848.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Replace Formik with React Hook Form in ManageAccessControlDrawer  ([#13044](https://github.com/linode/manager/pull/13044))

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

@@ -12,7 +12,7 @@ import { TableBody } from 'src/components/TableBody';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
 
-import AddAccessControlDrawer from './AddAccessControlDrawer';
+import { ManageAccessControlDrawer } from './ManageAccessControlDrawer';
 
 import type { APIError, Database } from '@linode/api-v4';
 import type { Theme } from '@mui/material/styles';
@@ -93,7 +93,7 @@ export const AccessControls = (props: Props) => {
   const [accessControlToBeRemoved, setAccessControlToBeRemoved] =
     React.useState<null | string>(null);
 
-  const [addAccessControlDrawerOpen, setAddAccessControlDrawerOpen] =
+  const [manageAccessControlDrawerOpen, setManageAccessControlDrawerOpen] =
     React.useState<boolean>(false);
 
   const { isPending: databaseUpdating, mutateAsync: updateDatabase } =
@@ -176,7 +176,7 @@ export const AccessControls = (props: Props) => {
           className={classes.addAccessControlBtn}
           data-testid="button-access-control"
           disabled={disabled}
-          onClick={() => setAddAccessControlDrawerOpen(true)}
+          onClick={() => setManageAccessControlDrawerOpen(true)}
           variant="secondary"
         >
           Manage Access
@@ -197,10 +197,10 @@ export const AccessControls = (props: Props) => {
           address.
         </Typography>
       </ConfirmationDialog>
-      <AddAccessControlDrawer
+      <ManageAccessControlDrawer
         database={database}
-        onClose={() => setAddAccessControlDrawerOpen(false)}
-        open={addAccessControlDrawerOpen}
+        onClose={() => setManageAccessControlDrawerOpen(false)}
+        open={manageAccessControlDrawerOpen}
       />
     </>
   );

packages/manager/src/features/Databases/DatabaseDetail/AddAccessControlDrawer.test.tsx → packages/manager/src/features/Databases/DatabaseDetail/ManageAccessControlDrawer.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 
@@ -7,22 +7,21 @@
 import { mockMatchMedia, renderWithTheme } from 'src/utilities/testHelpers';
 
 import AccessControls from './AccessControls';
-import AddAccessControlDrawer from './AddAccessControlDrawer';
+import { ManageAccessControlDrawer } from './ManageAccessControlDrawer';
 
 import type { DatabaseInstance } from '@linode/api-v4';
 
 beforeAll(() => mockMatchMedia());
 
-describe('Add Access Controls drawer', () => {
-  const database = databaseFactory.build();
-  const { getByTestId } = renderWithTheme(
-    <AccessControls database={database} />
-  );
-
-  const button = getByTestId('button-access-control');
-  fireEvent.click(button);
+describe('Manage Access Controls drawer', () => {
+  it('Should open when a user clicks the Manage Access Controls button', async () => {
+    const database = databaseFactory.build();
+    const { getByTestId } = renderWithTheme(
+      <AccessControls database={database} />
+    );
 
-  it('Should open when a user clicks the Add Access Controls button', () => {
+    const button = getByTestId('button-access-control');
+    await userEvent.click(button);
     // 'drawer' is the data-testid of the <Drawer /> component
     expect(getByTestId('drawer')).toBeVisible();
   });
@@ -35,7 +34,11 @@
       id: 123,
     } as DatabaseInstance;
     const { getAllByTestId } = renderWithTheme(
-      <AddAccessControlDrawer database={db} onClose={() => null} open={true} />
+      <ManageAccessControlDrawer
+        database={db}
+        onClose={() => null}
+        open={true}
+      />
     );
 
     expect(getAllByTestId('domain-transfer-input')).toHaveLength(
@@ -54,19 +57,26 @@
       id: 123,
     } as DatabaseInstance;
     const { getByText } = renderWithTheme(
-      <AddAccessControlDrawer database={db} onClose={() => null} open={true} />
+      <ManageAccessControlDrawer
+        database={db}
+        onClose={() => null}
+        open={true}
+      />
     );
 
-    const addAccessControlsButton = getByText('Update Access Controls').closest(
-      'button'
-    );
+    const updateAccessControlsButton = getByText(
+      'Update Access Controls'
+    ).closest('button');
 
     // Before making a change to the IP addresses, the "Add Inbound Sources" button should be disabled.
-    expect(addAccessControlsButton).toHaveAttribute('aria-disabled', 'true');
+    expect(updateAccessControlsButton).toHaveAttribute('aria-disabled', 'true');
 
     const addAnIPButton = getByText('Add Another IP');
     await userEvent.click(addAnIPButton);
 
-    expect(addAccessControlsButton).toHaveAttribute('aria-disabled', 'false');
+    expect(updateAccessControlsButton).toHaveAttribute(
+      'aria-disabled',
+      'false'
+    );
   });
 });