diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsAffinityEnforcementRadioGroup.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsAffinityEnforcementRadioGroup.tsx new file mode 100644 index 00000000000..4aa294a486f --- /dev/null +++ b/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) => void; + setFieldValue: FormikHelpers['setFieldValue']; + value: boolean; +} + +export const PlacementGroupsAffinityEnforcementRadioGroup = (props: Props) => { + const { handleChange, setFieldValue, value } = props; + return ( + + + + Affinity Enforcement + + { + handleChange(event); + setFieldValue('is_strict', event.target.value === 'true'); + }} + id="affinity-enforcement-radio-group" + name="is_strict" + value={value} + > + + Strict. You cannot assign a Linode to your + placement group if it will violate the policy of your selected + Affinity Type (best practice). + + } + control={} + value={true} + /> + + Flexible. You can assign a Linode to your + placement group, even if it violates the policy of your selected + Affinity Type. + + } + control={} + sx={{ mt: 2 }} + value={false} + /> + + + ); +}; diff --git a/packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.tsx b/packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.tsx index bb86fd94364..f7bb5d9d931 100644 --- a/packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.tsx +++ b/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} /> - - - - Affinity Enforcement - - { - handleChange(event); - setFieldValue('is_strict', event.target.value === 'true'); - }} - id="affinity-enforcement-radio-group" - name="is_strict" - value={values.is_strict} - > - - Strict. You cannot assign a Linode to your - placement group if it will violate the policy of your - selected Affinity Type (best practice). - - } - control={} - value={true} - /> - - Flexible. You can assign a Linode to your - placement group, even if it violates the policy of your - selected Affinity Type. - - } - control={} - sx={{ mt: 2 }} - value={false} - /> - - + { allPlacementGroups={placementGroups?.data ?? []} onClose={onClosePlacementGroupDrawer} open={isPlacementGroupCreateDrawerOpen} - selectedRegionId="us-west" />