update drawer

linode · Dec 3, 2024 · 328e227 · 328e227
1 parent 08595d0
commit 328e227
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 84 deletions.
diff --git a/packages/manager/src/features/VPCs/VPCCreateDrawer/VPCCreateDrawer.test.tsx b/packages/manager/src/features/VPCs/VPCCreateDrawer/VPCCreateDrawer.test.tsx
@@ -1,7 +1,7 @@
-import { fireEvent, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 
-import { renderWithTheme } from 'src/utilities/testHelpers';
+import { renderWithThemeAndHookFormContext } from 'src/utilities/testHelpers';
 
 import { VPCCreateDrawer } from './VPCCreateDrawer';
 
@@ -11,11 +11,27 @@ const props = {
   open: true,
 };
 
-describe.skip('VPC Create Drawer', () => {
+const formOptions = {
+  defaultValues: {
+    description: '',
+    label: '',
+    region: '',
+    subnets: [
+      {
+        ipv4: '',
+        label: 'subnet 0',
+      },
+    ],
+  },
+};
+
+describe('VPC Create Drawer', () => {
   it('should render the vpc and subnet sections', () => {
-    const { getAllByText } = renderWithTheme(<VPCCreateDrawer {...props} />);
+    const { getAllByText } = renderWithThemeAndHookFormContext({
+      component: <VPCCreateDrawer {...props} />,
+      useFormOptions: formOptions,
+    });
 
-    getAllByText('Region');
     getAllByText('VPC Label');
     getAllByText('Region');
     getAllByText('Description');
@@ -28,16 +44,21 @@ describe.skip('VPC Create Drawer', () => {
   });
 
   it('should not be able to remove the first subnet', () => {
-    renderWithTheme(<VPCCreateDrawer {...props} />);
+    const { queryByTestId } = renderWithThemeAndHookFormContext({
+      component: <VPCCreateDrawer {...props} />,
+      useFormOptions: formOptions,
+    });
 
-    const deleteSubnet = screen.queryByTestId('delete-subnet-0');
-    expect(deleteSubnet).not.toBeInTheDocument();
+    expect(queryByTestId('delete-subnet-0')).toBeNull();
   });
 
-  it('should close the drawer', () => {
-    renderWithTheme(<VPCCreateDrawer {...props} />);
-    const cancelButton = screen.getByText('Cancel');
-    fireEvent.click(cancelButton);
+  it('should close the drawer', async () => {
+    const { getByText } = renderWithThemeAndHookFormContext({
+      component: <VPCCreateDrawer {...props} />,
+      useFormOptions: formOptions,
+    });
+    const cancelButton = getByText('Cancel');
+    await userEvent.click(cancelButton);
     expect(props.onClose).toHaveBeenCalled();
   });
 });
diff --git a/packages/manager/src/features/VPCs/VPCCreateDrawer/VPCCreateDrawer.tsx b/packages/manager/src/features/VPCs/VPCCreateDrawer/VPCCreateDrawer.tsx
@@ -2,6 +2,7 @@ import { Box, Notice } from '@linode/ui';
 import { useTheme } from '@mui/material/styles';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
+import { FormProvider } from 'react-hook-form';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { Drawer } from 'src/components/Drawer';
@@ -23,80 +24,72 @@ interface Props {
 }
 
 export const VPCCreateDrawer = (props: Props) => {
-  // const theme = useTheme();
-  // const { onClose, onSuccess, open, selectedRegion } = props;
+  const theme = useTheme();
+  const formContainerRef = React.useRef<HTMLFormElement>(null);
+  const { onClose, onSuccess, open, selectedRegion } = props;
 
-  // const {
-  //   formik,
-  //   generalAPIError,
-  //   generalSubnetErrorsFromAPI,
-  //   isLoadingCreateVPC,
-  //   onChangeField,
-  //   onCreateVPC,
-  //   regionsData,
-  //   setGeneralAPIError,
-  //   setGeneralSubnetErrorsFromAPI,
-  //   userCannotAddVPC,
-  // } = useCreateVPC({
-  //   handleSelectVPC: onSuccess,
-  //   onDrawerClose: onClose,
-  //   selectedRegion,
-  // });
+  const {
+    form,
+    isLoadingCreateVPC,
+    onCreateVPC,
+    regionsData,
+    userCannotAddVPC,
+  } = useCreateVPC({
+    formContainerRef,
+    handleSelectVPC: onSuccess,
+    onDrawerClose: onClose,
+    selectedRegion,
+  });
 
-  // const { errors, handleSubmit, resetForm, setFieldValue, values } = formik;
+  const {
+    formState: { errors },
+    handleSubmit,
+    reset,
+  } = form;
 
-  // React.useEffect(() => {
-  //   if (open) {
-  //     resetForm();
-  //     setGeneralSubnetErrorsFromAPI([]);
-  //     setGeneralAPIError(undefined);
-  //   }
-  // }, [open, resetForm, setGeneralAPIError, setGeneralSubnetErrorsFromAPI]);
+  return (
+    <Drawer
+      onClose={() => {
+        onClose();
+        reset();
+      }}
+      open={open}
+      title={'Create VPC'}
+    >
+      {userCannotAddVPC && CannotCreateVPCNotice}
 
-  // return (
-  //   <Drawer onClose={onClose} open={open} title={'Create VPC'}>
-  //     {userCannotAddVPC && CannotCreateVPCNotice}
-  //     <Grid>
-  //       {generalAPIError ? (
-  //         <Notice text={generalAPIError} variant="error" />
-  //       ) : null}
-  //       <form onSubmit={handleSubmit}>
-  //         <Box sx={{ marginTop: theme.spacing(3) }}>
-  //           <VPCTopSectionContent
-  //             disabled={userCannotAddVPC}
-  //             errors={errors}
-  //             isDrawer
-  //             onChangeField={onChangeField}
-  //             regions={regionsData}
-  //             values={values}
-  //           />
-  //         </Box>
-  //         <SubnetContent
-  //           disabled={userCannotAddVPC}
-  //           isDrawer
-  //           onChangeField={setFieldValue}
-  //           subnetErrors={generalSubnetErrorsFromAPI}
-  //           subnets={values.subnets}
-  //         />
-  //         <ActionsPanel
-  //           primaryButtonProps={{
-  //             'data-testid': 'submit',
-  //             disabled: userCannotAddVPC,
-  //             label: 'Create VPC',
-  //             loading: isLoadingCreateVPC,
-  //             onClick: () => {
-  //               onCreateVPC();
-  //             },
-  //           }}
-  //           secondaryButtonProps={{
-  //             'data-testid': 'cancel',
-  //             label: 'Cancel',
-  //             onClick: onClose,
-  //           }}
-  //           style={{ marginTop: theme.spacing(3) }}
-  //         />
-  //       </form>
-  //     </Grid>
-  //   </Drawer>
-  // );
+      <FormProvider {...form}>
+        <Grid>
+          <form onSubmit={handleSubmit(onCreateVPC)} ref={formContainerRef}>
+            {errors.root?.message ? (
+              <Notice text={errors.root.message} variant="error" />
+            ) : null}
+            <Box sx={{ marginTop: theme.spacing(3) }}>
+              <VPCTopSectionContent
+                disabled={userCannotAddVPC}
+                isDrawer
+                regions={regionsData}
+              />
+            </Box>
+            <SubnetContent disabled={userCannotAddVPC} isDrawer />
+            <ActionsPanel
+              primaryButtonProps={{
+                'data-testid': 'submit',
+                disabled: userCannotAddVPC,
+                label: 'Create VPC',
+                loading: isLoadingCreateVPC,
+                onClick: handleSubmit(onCreateVPC),
+              }}
+              secondaryButtonProps={{
+                'data-testid': 'cancel',
+                label: 'Cancel',
+                onClick: onClose,
+              }}
+              style={{ marginTop: theme.spacing(3) }}
+            />
+          </form>
+        </Grid>
+      </FormProvider>
+    </Drawer>
+  );
 };
diff --git a/packages/manager/src/hooks/useCreateVPC.ts b/packages/manager/src/hooks/useCreateVPC.ts
@@ -60,6 +60,7 @@ export const useCreateVPC = (inputs: UseCreateVPCInputs) => {
         if (handleSelectVPC && onDrawerClose) {
           handleSelectVPC(vpc);
           onDrawerClose();
+          form.reset();
         }
       }