PlacementGroupsAffinityEnforcementRadioGroup

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

@@ -0,0 +1,65 @@
+import * as React from 'react';
+
+import { Box } from 'src/components/Box';
+import { FormControlLabel } from 'src/components/FormControlLabel';
+import { FormLabel } from 'src/components/FormLabel';
+import { Notice } from 'src/components/Notice/Notice';
+import { Radio } from 'src/components/Radio/Radio';
+import { RadioGroup } from 'src/components/RadioGroup';
+import { Typography } from 'src/components/Typography';
+
+import type { FormikHelpers } from 'formik';
+
+interface Props {
+  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  setFieldValue: FormikHelpers<any>['setFieldValue'];
+  value: boolean;
+}
+
+export const PlacementGroupsAffinityEnforcementRadioGroup = (props: Props) => {
+  const { handleChange, setFieldValue, value } = props;
+  return (
+    <Box sx={{ pt: 2 }}>
+      <Notice
+        text="Once you create a placement group, you cannot change its Affinity Enforcement setting."
+        variant="warning"
+      />
+      <FormLabel htmlFor="affinity-enforcement-radio-group">
+        Affinity Enforcement
+      </FormLabel>
+      <RadioGroup
+        onChange={(event) => {
+          handleChange(event);
+          setFieldValue('is_strict', event.target.value === 'true');
+        }}
+        id="affinity-enforcement-radio-group"
+        name="is_strict"
+        value={value}
+      >
+        <FormControlLabel
+          label={
+            <Typography>
+              <strong>Strict.</strong> You cannot assign a Linode to your
+              placement group if it will violate the policy of your selected
+              Affinity Type (best practice).
+            </Typography>
+          }
+          control={<Radio />}
+          value={true}
+        />
+        <FormControlLabel
+          label={
+            <Typography>
+              <strong>Flexible.</strong> You can assign a Linode to your
+              placement group, even if it violates the policy of your selected
+              Affinity Type.
+            </Typography>
+          }
+          control={<Radio />}
+          sx={{ mt: 2 }}
+          value={false}
+        />
+      </RadioGroup>
+    </Box>
+  );
+};

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

@@ -4,13 +4,8 @@ import { useSnackbar } from 'notistack';
 import * as React from 'react';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
-import { Box } from 'src/components/Box';
 import { Drawer } from 'src/components/Drawer';
-import { FormControlLabel } from 'src/components/FormControlLabel';
-import { FormLabel } from 'src/components/FormLabel';
 import { Notice } from 'src/components/Notice/Notice';
-import { Radio } from 'src/components/Radio/Radio';
-import { RadioGroup } from 'src/components/RadioGroup';
 import { RegionSelect } from 'src/components/RegionSelect/RegionSelect';
 import { Stack } from 'src/components/Stack';
 import { TextField } from 'src/components/TextField';
@@ -24,6 +19,7 @@ import {
   handleGeneralErrors,
 } from 'src/utilities/formikErrorUtils';
 
+import { PlacementGroupsAffinityEnforcementRadioGroup } from './PlacementGroupsAffinityEnforcementRadioGroup';
 import { PlacementGroupsAffinityTypeSelect } from './PlacementGroupsAffinityTypeSelect';
 import { hasRegionReachedPlacementGroupCapacity } from './utils';
 
@@ -195,48 +191,11 @@ export const PlacementGroupsCreateDrawer = (
             error={errors.affinity_type}
             setFieldValue={setFieldValue}
           />
-          <Box sx={{ pt: 2 }}>
-            <Notice
-              text="Once you create a placement group, you cannot change its Affinity Enforcement setting."
-              variant="warning"
-            />
-            <FormLabel htmlFor="affinity-enforcement-radio-group">
-              Affinity Enforcement
-            </FormLabel>
-            <RadioGroup
-              onChange={(event) => {
-                handleChange(event);
-                setFieldValue('is_strict', event.target.value === 'true');
-              }}
-              id="affinity-enforcement-radio-group"
-              name="is_strict"
-              value={values.is_strict}
-            >
-              <FormControlLabel
-                label={
-                  <Typography>
-                    <strong>Strict.</strong> You cannot assign a Linode to your
-                    placement group if it will violate the policy of your
-                    selected Affinity Type (best practice).
-                  </Typography>
-                }
-                control={<Radio />}
-                value={true}
-              />
-              <FormControlLabel
-                label={
-                  <Typography>
-                    <strong>Flexible.</strong> You can assign a Linode to your
-                    placement group, even if it violates the policy of your
-                    selected Affinity Type.
-                  </Typography>
-                }
-                control={<Radio />}
-                sx={{ mt: 2 }}
-                value={false}
-              />
-            </RadioGroup>
-          </Box>
+          <PlacementGroupsAffinityEnforcementRadioGroup
+            handleChange={handleChange}
+            setFieldValue={setFieldValue}
+            value={values.is_strict}
+          />
           <ActionsPanel
             primaryButtonProps={{
               'data-testid': 'submit',

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

@@ -196,7 +196,6 @@ export const PlacementGroupsLanding = React.memo(() => {
         allPlacementGroups={placementGroups?.data ?? []}
         onClose={onClosePlacementGroupDrawer}
         open={isPlacementGroupCreateDrawerOpen}
-        selectedRegionId="us-west"
       />
       <PlacementGroupsEditDrawer
         onClose={onClosePlacementGroupDrawer}