upcoming: [M3 7738] - Update Placement Group Create & Edit Drawers

packages/api-v4/src/placement-groups/placement-groups.ts

@@ -1,6 +1,6 @@
 import {
   createPlacementGroupSchema,
-  renamePlacementGroupSchema,
+  updatePlacementGroupSchema,
 } from '@linode/validation';
 import { API_ROOT } from '../constants';
 
@@ -63,14 +63,14 @@ export const createPlacementGroup = (data: CreatePlacementGroupPayload) =>
   );
 
 /**
- * renamePlacementGroup
+ * updatePlacementGroup
  *
- * Renames a Placement Group (updates label).
+ * Updates a Placement Group (updates label).
  *
  * @param placementGroupId { number } The id of the Placement Group to be updated.
  * @param data { PlacementGroup } The data for the Placement Group.
  */
-export const renamePlacementGroup = (
+export const updatePlacementGroup = (
   placementGroupId: number,
   data: UpdatePlacementGroupPayload
 ) =>
@@ -79,7 +79,7 @@ export const renamePlacementGroup = (
       `${API_ROOT}/placement/groups/${encodeURIComponent(placementGroupId)}`
     ),
     setMethod('PUT'),
-    setData(data, renamePlacementGroupSchema)
+    setData(data, updatePlacementGroupSchema)
   );
 
 /**

packages/manager/.changeset/pr-10205-changed-1709570324014.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Allow the disabling of the TypeToConfirm input ([#10205](https://github.com/linode/manager/pull/10205))

packages/manager/.changeset/pr-10205-upcoming-features-1709303410944.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Update Placement Group Create & Edit Drawers ([#10205](https://github.com/linode/manager/pull/10205))

packages/manager/src/__data__/regionsData.ts

@@ -12,6 +12,7 @@ export const regions: Region[] = [
       'Vlans',
       'Block Storage Migrations',
       'Managed Databases',
+      'Placement Group',
     ],
     country: 'in',
     id: 'ap-west',
@@ -37,6 +38,7 @@ export const regions: Region[] = [
       'Vlans',
       'Block Storage Migrations',
       'Managed Databases',
+      'Placement Group',
     ],
     country: 'ca',
     id: 'ca-central',
@@ -62,6 +64,7 @@ export const regions: Region[] = [
       'Vlans',
       'Block Storage Migrations',
       'Managed Databases',
+      'Placement Group',
     ],
     country: 'au',
     id: 'ap-southeast',
@@ -89,6 +92,7 @@ export const regions: Region[] = [
       'Managed Databases',
       'Metadata',
       'Premium Plans',
+      'Placement Group',
     ],
     country: 'us',
     id: 'us-iad',
@@ -143,6 +147,7 @@ export const regions: Region[] = [
       'Managed Databases',
       'Metadata',
       'Premium Plans',
+      'Placement Group',
     ],
     country: 'fr',
     id: 'fr-par',
@@ -169,6 +174,7 @@ export const regions: Region[] = [
       'Vlans',
       'Metadata',
       'Premium Plans',
+      'Placement Group',
     ],
     country: 'us',
     id: 'us-sea',
@@ -195,6 +201,7 @@ export const regions: Region[] = [
       'Vlans',
       'Metadata',
       'Premium Plans',
+      'Placement Group',
     ],
     country: 'br',
     id: 'br-gru',
@@ -221,6 +228,7 @@ export const regions: Region[] = [
       'Vlans',
       'Metadata',
       'Premium Plans',
+      'Placement Group',
     ],
     country: 'nl',
     id: 'nl-ams',
@@ -247,6 +255,7 @@ export const regions: Region[] = [
       'Vlans',
       'Metadata',
       'Premium Plans',
+      'Placement Group',
     ],
     country: 'se',
     id: 'se-sto',
@@ -273,6 +282,7 @@ export const regions: Region[] = [
       'Vlans',
       'Metadata',
       'Premium Plans',
+      'Placement Group',
     ],
     country: 'in',
     id: 'in-maa',
@@ -299,6 +309,7 @@ export const regions: Region[] = [
       'Vlans',
       'Metadata',
       'Premium Plans',
+      'Placement Group',
     ],
     country: 'jp',
     id: 'jp-osa',
@@ -325,6 +336,7 @@ export const regions: Region[] = [
       'Vlans',
       'Metadata',
       'Premium Plans',
+      'Placement Group',
     ],
     country: 'it',
     id: 'it-mil',
@@ -351,6 +363,7 @@ export const regions: Region[] = [
       'Vlans',
       'Metadata',
       'Premium Plans',
+      'Placement Group',
     ],
     country: 'us',
     id: 'us-mia',
@@ -377,6 +390,7 @@ export const regions: Region[] = [
       'Vlans',
       'Metadata',
       'Premium Plans',
+      'Placement Group',
     ],
     country: 'id',
     id: 'id-cgk',
@@ -403,6 +417,7 @@ export const regions: Region[] = [
       'Vlans',
       'Metadata',
       'Premium Plans',
+      'Placement Group',
     ],
     country: 'us',
     id: 'us-lax',
@@ -428,6 +443,7 @@ export const regions: Region[] = [
       'Vlans',
       'Block Storage Migrations',
       'Managed Databases',
+      'Placement Group',
     ],
     country: 'us',
     id: 'us-central',
@@ -452,11 +468,12 @@ export const regions: Region[] = [
       'Cloud Firewall',
       'Block Storage Migrations',
       'Managed Databases',
+      'Placement Group',
     ],
     country: 'us',
     id: 'us-west',
     label: 'Fremont, CA',
-    maximum_pgs_per_customer: 5,
+    maximum_pgs_per_customer: 0,
     maximum_vms_per_pg: 10,
     resolvers: {
       ipv4:
@@ -479,6 +496,7 @@ export const regions: Region[] = [
       'Vlans',
       'Block Storage Migrations',
       'Managed Databases',
+      'Placement Group',
     ],
     country: 'us',
     id: 'us-southeast',
@@ -507,6 +525,7 @@ export const regions: Region[] = [
       'Vlans',
       'Block Storage Migrations',
       'Managed Databases',
+      'Placement Group',
     ],
     country: 'us',
     id: 'us-east',
@@ -532,6 +551,7 @@ export const regions: Region[] = [
       'Vlans',
       'Block Storage Migrations',
       'Managed Databases',
+      'Placement Group',
     ],
     country: 'gb',
     id: 'eu-west',
@@ -559,6 +579,7 @@ export const regions: Region[] = [
       'Vlans',
       'Block Storage Migrations',
       'Managed Databases',
+      'Placement Group',
     ],
     country: 'sg',
     id: 'ap-south',
@@ -586,6 +607,7 @@ export const regions: Region[] = [
       'Vlans',
       'Block Storage Migrations',
       'Managed Databases',
+      'Placement Group',
     ],
     country: 'de',
     id: 'eu-central',

packages/manager/src/components/TextField.tsx

@@ -1,9 +1,9 @@
 import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
+import { Theme, useTheme } from '@mui/material/styles';
 import {
   default as _TextField,
   StandardTextFieldProps,
 } from '@mui/material/TextField';
-import { Theme, useTheme } from '@mui/material/styles';
 import { clamp } from 'ramda';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';

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/PlacementGroupsAffinityTypeSelect.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+
+import { Autocomplete } from 'src/components/Autocomplete/Autocomplete';
+import { Link } from 'src/components/Link';
+import { ListItem } from 'src/components/ListItem';
+import { Tooltip } from 'src/components/Tooltip';
+import { Typography } from 'src/components/Typography';
+
+import { affinityTypeOptions } from './utils';
+
+import type { FormikHelpers } from 'formik';
+
+interface Props {
+  error: string | undefined;
+  setFieldValue: FormikHelpers<any>['setFieldValue'];
+}
+
+export const PlacementGroupsAffinityTypeSelect = (props: Props) => {
+  const { error, setFieldValue } = props;
+  return (
+    <Autocomplete
+      defaultValue={affinityTypeOptions.find(
+        (option) => option.value === 'anti_affinity'
+      )}
+      onChange={(_, value) => {
+        setFieldValue('affinity_type', value?.value ?? '');
+      }}
+      renderOption={(props, option) => {
+        const isDisabledMenuItem = option.value === 'affinity';
+
+        return (
+          <Tooltip
+            title={
+              isDisabledMenuItem ? (
+                <Typography>
+                  Only supporting Anti-affinity host placement groups for Beta.{' '}
+                  <Link to="TODO VM_Placement: update link">Learn more</Link>.
+                </Typography>
+              ) : (
+                ''
+              )
+            }
+            disableFocusListener={!isDisabledMenuItem}
+            disableHoverListener={!isDisabledMenuItem}
+            disableTouchListener={!isDisabledMenuItem}
+            enterDelay={200}
+            enterNextDelay={200}
+            enterTouchDelay={200}
+            key={option.value}
+          >
+            <ListItem
+              {...props}
+              className={
+                isDisabledMenuItem
+                  ? `${props.className} Mui-disabled`
+                  : props.className
+              }
+              onClick={(e) =>
+                isDisabledMenuItem
+                  ? e.preventDefault()
+                  : props.onClick
+                  ? props.onClick(e)
+                  : null
+              }
+              component="li"
+            >
+              {option.label}
+            </ListItem>
+          </Tooltip>
+        );
+      }}
+      textFieldProps={{
+        tooltipText: (
+          <Typography>
+            Linodes in a placement group that use ‘Affinity’ always exist on the
+            same host. This can help with performance. Linodes in a placement
+            group that use ‘Anti-affinity: Host’ are never on the same host. Use
+            this to support a high-availability model.
+            <br />
+            <Link to="TODO VM_Placement: update link">Learn more.</Link>
+          </Typography>
+        ),
+      }}
+      disableClearable={true}
+      errorText={error}
+      label="Affinity Type"
+      options={affinityTypeOptions}
+      placeholder="Select an Affinity Type"
+    />
+  );
+};