Tests

packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.test.tsx

@@ -0,0 +1,70 @@
+import { fireEvent } from '@testing-library/react';
+import * as React from 'react';
+
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { PlacementGroupsCreateDrawer } from './PlacementGroupsCreateDrawer';
+
+describe('PlacementGroupsCreateDrawer', () => {
+  it('should render have its fields enabled', () => {
+    const { getByLabelText } = renderWithTheme(
+      <PlacementGroupsCreateDrawer
+        numberOfPlacementGroupsCreated={0}
+        onClose={vi.fn()}
+        onPlacementGroupCreated={vi.fn()}
+        open={true}
+      />
+    );
+
+    expect(getByLabelText('Label')).toBeEnabled();
+    expect(getByLabelText('Region')).toBeEnabled();
+    expect(getByLabelText('Affinity Type')).toBeEnabled();
+  });
+
+  it('Affinity Type select should have the correct options', async () => {
+    const { getByPlaceholderText, getByText } = renderWithTheme(
+      <PlacementGroupsCreateDrawer
+        numberOfPlacementGroupsCreated={0}
+        onClose={vi.fn()}
+        onPlacementGroupCreated={vi.fn()}
+        open={true}
+      />
+    );
+
+    const inputElement = getByPlaceholderText('Select an Affinity Type');
+    fireEvent.focus(inputElement);
+
+    fireEvent.change(inputElement, { target: { value: 'Affinity' } });
+    expect(getByText('Affinity')).toBeInTheDocument();
+
+    fireEvent.change(inputElement, { target: { value: 'Anti-affinity' } });
+    expect(getByText('Anti-affinity')).toBeInTheDocument();
+  });
+
+  it('should disable the submit button when the number of placement groups created is >= to the max', () => {
+    const { getByTestId } = renderWithTheme(
+      <PlacementGroupsCreateDrawer
+        numberOfPlacementGroupsCreated={5}
+        onClose={vi.fn()}
+        onPlacementGroupCreated={vi.fn()}
+        open={true}
+      />
+    );
+
+    expect(getByTestId('submit')).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  it('should populate the region select with the selected region prop', () => {
+    const { getByLabelText } = renderWithTheme(
+      <PlacementGroupsCreateDrawer
+        numberOfPlacementGroupsCreated={0}
+        onClose={vi.fn()}
+        onPlacementGroupCreated={vi.fn()}
+        open={true}
+        selectedRegionId="us-east"
+      />
+    );
+
+    expect(getByLabelText('Region')).toHaveValue('Newark, NJ (us-east)');
+  });
+});

packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.tsx

@@ -14,11 +14,13 @@ import {
   handleGeneralErrors,
 } from 'src/utilities/formikErrorUtils';
 
-import { PlacementGroupsDrawerContent } from './PlacementGroupDrawerContent';
+import { PlacementGroupsDrawerContent } from './PlacementGroupsDrawerContent';
 import { MAX_NUMBER_OF_PLACEMENT_GROUPS } from './constants';
 
-import type { PlacementGroupsCreateDrawerProps } from './types';
-import type { CreatePlacementGroupPayload } from '@linode/api-v4';
+import type {
+  PlacementGroupDrawerFormikProps,
+  PlacementGroupsCreateDrawerProps,
+} from './types';
 
 export const PlacementGroupsCreateDrawer = (
   props: PlacementGroupsCreateDrawerProps
@@ -50,12 +52,12 @@ export const PlacementGroupsCreateDrawer = (
   } = useFormik({
     enableReinitialize: true,
     initialValues: {
-      affinity_type: '' as CreatePlacementGroupPayload['affinity_type'],
+      affinity_type: '' as PlacementGroupDrawerFormikProps['affinity_type'],
       label: '',
       region: selectedRegionId ?? '',
     },
     onSubmit(
-      values: CreatePlacementGroupPayload,
+      values: PlacementGroupDrawerFormikProps,
       { setErrors, setStatus, setSubmitting }
     ) {
       setIsFormDirty(false);

packages/manager/src/features/PlacementGroups/PlacementGroupsDrawerContent.test.tsx

@@ -0,0 +1,43 @@
+import { FormikProps } from 'formik';
+import * as React from 'react';
+
+import { placementGroupFactory } from 'src/factories';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { PlacementGroupsDrawerContent } from './PlacementGroupsDrawerContent';
+
+import type { PlacementGroupDrawerFormikProps } from './types';
+
+describe('PlacementGroupsDrawerContent', () => {
+  it('should render the right form elements', () => {
+    const { getByLabelText, getByRole } = renderWithTheme(
+      <PlacementGroupsDrawerContent
+        formik={
+          ({
+            errors: {},
+            resetForm: vi.fn(),
+            values: {
+              affinity_type: 'affinity',
+              label: '',
+              region: '',
+            },
+          } as unknown) as FormikProps<PlacementGroupDrawerFormikProps>
+        }
+        mode="create"
+        onClose={vi.fn()}
+        open={true}
+        regions={[]}
+        selectedPlacementGroup={placementGroupFactory.build()}
+        setIsFormDirty={vi.fn()}
+      />
+    );
+
+    expect(getByLabelText('Label')).toBeInTheDocument();
+    expect(getByLabelText('Region')).toBeInTheDocument();
+    expect(getByLabelText('Affinity Type')).toBeInTheDocument();
+    expect(getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
+    expect(
+      getByRole('button', { name: 'Create Placement Group' })
+    ).toBeInTheDocument();
+  });
+});

packages/manager/src/features/PlacementGroups/PlacementGroupDrawerContent.tsx → packages/manager/src/features/PlacementGroups/PlacementGroupsDrawerContent.tsx

@@ -68,7 +68,7 @@ export const PlacementGroupsDrawerContent = (props: Props) => {
     if (isSubmitting) {
       setIsFormDirty(true);
     }
-  }, [isSubmitting]);
+  }, [isSubmitting, setIsFormDirty]);
 
   const generalError = status?.generalError;
   const isRenameDrawer = mode === 'rename';

packages/manager/src/features/PlacementGroups/PlacementGroupsRenameDrawer.test.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+
+import { placementGroupFactory } from 'src/factories/placementGroups';
+import { renderWithTheme } from 'src/utilities/testHelpers';
+
+import { PlacementGroupsRenameDrawer } from './PlacementGroupsRenameDrawer';
+
+describe('PlacementGroupsCreateDrawer', () => {
+  it('should render have the proper fields populated with PG values, and disabled', () => {
+    const { getByLabelText } = renderWithTheme(
+      <PlacementGroupsRenameDrawer
+        selectedPlacementGroup={placementGroupFactory.build({
+          affinity_type: 'anti_affinity',
+          label: 'PG-1',
+          region: 'us-east',
+        })}
+        numberOfPlacementGroupsCreated={0}
+        onClose={vi.fn()}
+        onPlacementGroupRenamed={vi.fn()}
+        open={true}
+      />
+    );
+
+    expect(getByLabelText('Label')).toBeEnabled();
+    expect(getByLabelText('Label')).toHaveValue('PG-1');
+
+    expect(getByLabelText('Region')).toBeDisabled();
+    expect(getByLabelText('Region')).toHaveValue('Newark, NJ (us-east)');
+
+    expect(getByLabelText('Affinity Type')).toBeDisabled();
+    expect(getByLabelText('Affinity Type')).toHaveValue('Anti-affinity');
+  });
+});

packages/manager/src/features/PlacementGroups/PlacementGroupsRenameDrawer.tsx

@@ -14,16 +14,12 @@ import {
   handleGeneralErrors,
 } from 'src/utilities/formikErrorUtils';
 
-import { PlacementGroupsDrawerContent } from './PlacementGroupDrawerContent';
+import { PlacementGroupsDrawerContent } from './PlacementGroupsDrawerContent';
 
-import type { PlacementGroupsRenameDrawerProps } from './types';
 import type {
-  CreatePlacementGroupPayload,
-  RenamePlacementGroupPayload,
-} from '@linode/api-v4';
-
-type PlacementGroupDrawerFormikProps = RenamePlacementGroupPayload &
-  CreatePlacementGroupPayload;
+  PlacementGroupDrawerFormikProps,
+  PlacementGroupsRenameDrawerProps,
+} from './types';
 
 export const PlacementGroupsRenameDrawer = (
   props: PlacementGroupsRenameDrawerProps
@@ -56,7 +52,7 @@ export const PlacementGroupsRenameDrawer = (
   } = useFormik<PlacementGroupDrawerFormikProps>({
     enableReinitialize: true,
     initialValues: {
-      affinity_type: selectedPlacementGroup?.affinity_type as CreatePlacementGroupPayload['affinity_type'],
+      affinity_type: selectedPlacementGroup?.affinity_type as PlacementGroupDrawerFormikProps['affinity_type'],
       label: selectedPlacementGroup?.label ?? '',
       region: selectedPlacementGroup?.region ?? '',
     },
@@ -65,15 +61,15 @@ export const PlacementGroupsRenameDrawer = (
       setStatus(undefined);
       setErrors({});
       const payload = { ...values };
+      // This is a bit of an outlier. We only need to pass the label since that' the only value the API accepts.
+      // Meanwhile formik is still keeping track of the other values since we're showing them in the UI.
       const { label } = payload;
 
       mutateAsync({ label })
         .then((response) => {
           setSubmitting(false);
-          // Invalidate Placement Groups Queries
           queryClient.invalidateQueries([placementGroupQueryKey]);
 
-          // Show snackbar notification
           enqueueSnackbar(
             `Placement Group ${payload.label} successfully renamed`,
             {

packages/manager/src/features/PlacementGroups/types.ts

@@ -1,4 +1,8 @@
-import { PlacementGroup } from '@linode/api-v4';
+import {
+  CreatePlacementGroupPayload,
+  PlacementGroup,
+  RenamePlacementGroupPayload,
+} from '@linode/api-v4';
 
 export type PlacementGroupsDrawerPropsBase = {
   numberOfPlacementGroupsCreated: number;
@@ -15,3 +19,6 @@ export type PlacementGroupsRenameDrawerProps = PlacementGroupsDrawerPropsBase &
   onPlacementGroupRenamed?: (placementGroup: PlacementGroup) => void;
   selectedPlacementGroup: PlacementGroup | undefined;
 };
+
+export type PlacementGroupDrawerFormikProps = RenamePlacementGroupPayload &
+  CreatePlacementGroupPayload;