@spinnaker/google 2026.2.2 → 2026.3.0

package/src/serverGroup/configure/wizard/zones/GceInstanceFlexibilityConfigurer.spec.tsx

@@ -0,0 +1,390 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import { HelpField } from '@spinnaker/core';
+
+import {
+  GceInstanceFlexibilityConfigurer,
+  hasValidFlexibilityPolicy,
+  nextSelectionName,
+} from './GceInstanceFlexibilityConfigurer';
+
+describe('GceInstanceFlexibilityConfigurer', () => {
+  const policy = {
+    instanceSelections: {
+      preferred: { rank: 1, machineTypes: ['n2-standard-8'] },
+    },
+  };
+
+  it('links the flexibility editor to its help content', () => {
+    const wrapper = shallow(
+      <GceInstanceFlexibilityConfigurer
+        regional={true}
+        targetShape="BALANCED"
+        setInstanceFlexibilityPolicy={jasmine.createSpy('setPolicy')}
+      />,
+    );
+
+    expect(wrapper.find(HelpField).prop('id')).toBe('gce.serverGroup.instanceFlexibilityPolicy');
+  });
+
+  it('allows EVEN when flexibility is absent', () => {
+    expect(
+      hasValidFlexibilityPolicy({
+        regional: true,
+        distributionPolicy: { targetShape: 'EVEN' },
+      }),
+    ).toBe(true);
+  });
+
+  it('blocks zonal and EVEN combinations when selections exist', () => {
+    const policy = {
+      instanceSelections: {
+        preferred: { machineTypes: ['n2-standard-8'] },
+      },
+    };
+    expect(
+      hasValidFlexibilityPolicy({
+        regional: false,
+        distributionPolicy: { targetShape: 'BALANCED' },
+        instanceFlexibilityPolicy: policy,
+      }),
+    ).toBe(false);
+    expect(
+      hasValidFlexibilityPolicy({
+        regional: true,
+        distributionPolicy: { targetShape: 'EVEN' },
+        instanceFlexibilityPolicy: policy,
+      }),
+    ).toBe(false);
+  });
+
+  it('rejects blank machine type placeholders', () => {
+    expect(
+      hasValidFlexibilityPolicy({
+        regional: true,
+        distributionPolicy: { targetShape: 'BALANCED' },
+        instanceFlexibilityPolicy: {
+          instanceSelections: {
+            preferred: { machineTypes: [''] },
+          },
+        },
+      }),
+    ).toBe(false);
+    expect(
+      hasValidFlexibilityPolicy({
+        regional: true,
+        distributionPolicy: { targetShape: 'BALANCED' },
+        instanceFlexibilityPolicy: {
+          instanceSelections: {
+            preferred: { machineTypes: ['n2-standard-8', ''] },
+          },
+        },
+      }),
+    ).toBe(false);
+  });
+
+  it('rejects duplicate machine types within and across selections', () => {
+    [
+      {
+        preferred: { machineTypes: ['e2-standard-2', 'e2-standard-2'] },
+      },
+      {
+        preferred: { machineTypes: ['e2-standard-2'] },
+        fallback: { machineTypes: ['e2-standard-2'] },
+      },
+    ].forEach((instanceSelections) => {
+      expect(
+        hasValidFlexibilityPolicy({
+          regional: true,
+          distributionPolicy: { targetShape: 'BALANCED' },
+          instanceFlexibilityPolicy: { instanceSelections },
+        }),
+      ).toBe(false);
+    });
+  });
+
+  it('normalizes duplicate machine types and displays a warning', () => {
+    const duplicatePolicy = {
+      instanceSelections: {
+        preferred: {
+          machineTypes: [
+            ' https://www.googleapis.com/compute/v1/projects/test-project/zones/us-central1-a/machineTypes/E2-STANDARD-2 ',
+          ],
+        },
+        fallback: { machineTypes: ['zones/us-central1-b/machineTypes/e2-standard-2'] },
+      },
+    };
+
+    expect(
+      hasValidFlexibilityPolicy({
+        regional: true,
+        distributionPolicy: { targetShape: 'BALANCED' },
+        instanceFlexibilityPolicy: duplicatePolicy,
+      }),
+    ).toBe(false);
+
+    const wrapper = shallow(
+      <GceInstanceFlexibilityConfigurer
+        instanceFlexibilityPolicy={duplicatePolicy}
+        regional={true}
+        targetShape="BALANCED"
+        setInstanceFlexibilityPolicy={jasmine.createSpy('setPolicy')}
+      />,
+    );
+    expect(wrapper.text()).toContain('Machine types must be unique across instance selections.');
+    expect(wrapper.find('[role="alert"]').text()).toBe('Machine types must be unique across instance selections.');
+  });
+
+  it('accepts distinct machine types across selections', () => {
+    expect(
+      hasValidFlexibilityPolicy({
+        regional: true,
+        distributionPolicy: { targetShape: 'BALANCED' },
+        instanceFlexibilityPolicy: {
+          instanceSelections: {
+            preferred: { machineTypes: ['e2-standard-2', 'n2-standard-2'] },
+            fallback: { machineTypes: ['c2-standard-4'] },
+          },
+        },
+      }),
+    ).toBe(true);
+  });
+
+  it('rejects ranks that are not finite non-negative integers', () => {
+    [-1, 1.5, Number.NaN, Number.POSITIVE_INFINITY].forEach((rank) => {
+      expect(
+        hasValidFlexibilityPolicy({
+          regional: true,
+          distributionPolicy: { targetShape: 'BALANCED' },
+          instanceFlexibilityPolicy: {
+            instanceSelections: {
+              preferred: { rank, machineTypes: ['n2-standard-8'] },
+            },
+          },
+        }),
+      ).toBe(false);
+    });
+  });
+
+  it('announces submission errors and associates malformed persisted controls', () => {
+    const wrapper = shallow(
+      <GceInstanceFlexibilityConfigurer
+        instanceFlexibilityPolicy={{
+          instanceSelections: {
+            preferred: { rank: -1, machineTypes: ['', 'n2-standard-8'] },
+          },
+        }}
+        regional={true}
+        targetShape="BALANCED"
+        validationError="Instance flexibility policy is invalid."
+        setInstanceFlexibilityPolicy={jasmine.createSpy('setPolicy')}
+      />,
+    );
+    const errorId = 'gce-instance-flexibility-error';
+    const rankInput = wrapper.find('#instance-flexibility-selection-preferred-rank');
+    const blankMachineType = wrapper.find('input[aria-label="Machine type 1 for selection preferred"]');
+    const validMachineType = wrapper.find('input[aria-label="Machine type 2 for selection preferred"]');
+
+    expect(wrapper.find(`#${errorId}`).prop('role')).toBe('alert');
+    expect(wrapper.find(`#${errorId}`).text()).toBe('Instance flexibility policy is invalid.');
+    expect(rankInput.prop('aria-invalid')).toBe(true);
+    expect(rankInput.prop('aria-describedby')).toBe(errorId);
+    expect(blankMachineType.prop('aria-invalid')).toBe(true);
+    expect(blankMachineType.prop('aria-describedby')).toBe(errorId);
+    expect(validMachineType.prop('aria-invalid')).toBe(false);
+    expect(validMachineType.prop('aria-describedby')).toBeUndefined();
+  });
+
+  it('accepts regional BALANCED/ANY/ANY_SINGLE_ZONE with rankless selections', () => {
+    const policy = {
+      instanceSelections: {
+        preferred: { machineTypes: ['n2-standard-8'] },
+        fallback: { machineTypes: ['e2-standard-8'] },
+      },
+    };
+    ['BALANCED', 'ANY', 'ANY_SINGLE_ZONE', ' balanced '].forEach((targetShape) => {
+      expect(
+        hasValidFlexibilityPolicy({
+          regional: true,
+          distributionPolicy: { targetShape },
+          instanceFlexibilityPolicy: policy,
+        }),
+      ).toBe(true);
+    });
+  });
+
+  it('chooses the first unused selection name', () => {
+    expect(nextSelectionName([])).toBe('selection-1');
+    expect(nextSelectionName(['selection-1', 'preferred'])).toBe('selection-2');
+    expect(nextSelectionName(['selection-1', 'selection-2'])).toBe('selection-3');
+    expect(nextSelectionName(['selection-2'])).toBe('selection-1');
+  });
+
+  it('adds a named selection through the configurer', () => {
+    const setPolicy = jasmine.createSpy('setPolicy');
+    const wrapper = shallow(
+      <GceInstanceFlexibilityConfigurer
+        instanceFlexibilityPolicy={undefined}
+        regional={true}
+        targetShape="BALANCED"
+        setInstanceFlexibilityPolicy={setPolicy}
+      />,
+    );
+
+    wrapper.find('button').simulate('click');
+
+    expect(setPolicy).toHaveBeenCalledWith({
+      instanceSelections: {
+        'selection-1': { machineTypes: [''] },
+      },
+    });
+  });
+
+  it('does not overwrite an existing renamed selection when adding another', () => {
+    const setPolicy = jasmine.createSpy('setPolicy');
+    const wrapper = shallow(
+      <GceInstanceFlexibilityConfigurer
+        instanceFlexibilityPolicy={{
+          instanceSelections: {
+            'selection-1': { machineTypes: ['n2-standard-8'] },
+          },
+        }}
+        regional={true}
+        targetShape="BALANCED"
+        setInstanceFlexibilityPolicy={setPolicy}
+      />,
+    );
+
+    wrapper.find('button').last().simulate('click');
+
+    expect(setPolicy).toHaveBeenCalledWith({
+      instanceSelections: {
+        'selection-1': { machineTypes: ['n2-standard-8'] },
+        'selection-2': { machineTypes: [''] },
+      },
+    });
+  });
+
+  it('sends an explicit empty policy when the final selection is removed', () => {
+    const setPolicy = jasmine.createSpy('setPolicy');
+    const wrapper = shallow(
+      <GceInstanceFlexibilityConfigurer
+        instanceFlexibilityPolicy={policy}
+        regional={true}
+        targetShape="BALANCED"
+        setInstanceFlexibilityPolicy={setPolicy}
+      />,
+    );
+
+    wrapper
+      .find('button')
+      .filterWhere((button) => button.text() === 'Remove')
+      .simulate('click');
+
+    expect(setPolicy).toHaveBeenCalledWith({ instanceSelections: {} });
+  });
+
+  it('only persists finite non-negative integer ranks and supports rank zero and clearing', () => {
+    const setPolicy = jasmine.createSpy('setPolicy');
+    const wrapper = shallow(
+      <GceInstanceFlexibilityConfigurer
+        instanceFlexibilityPolicy={policy}
+        regional={true}
+        targetShape="BALANCED"
+        setInstanceFlexibilityPolicy={setPolicy}
+      />,
+    );
+    const rankInput = wrapper.find('input[type="number"]');
+
+    expect(rankInput.prop('step')).toBe(1);
+
+    rankInput.simulate('change', { target: { value: '1.5' } });
+    rankInput.simulate('change', { target: { value: '-1' } });
+    rankInput.simulate('change', { target: { value: 'not-a-number' } });
+    expect(setPolicy).not.toHaveBeenCalled();
+
+    rankInput.simulate('change', { target: { value: '0' } });
+    expect(setPolicy).toHaveBeenCalledWith({
+      instanceSelections: {
+        preferred: { rank: 0, machineTypes: ['n2-standard-8'] },
+      },
+    });
+
+    setPolicy.calls.reset();
+    rankInput.simulate('change', { target: { value: '' } });
+    expect(setPolicy).toHaveBeenCalledWith({
+      instanceSelections: {
+        preferred: { machineTypes: ['n2-standard-8'] },
+      },
+    });
+  });
+
+  it('resets blank and duplicate rename drafts to the current valid selection name', () => {
+    const setPolicy = jasmine.createSpy('setPolicy');
+    const wrapper = shallow(
+      <GceInstanceFlexibilityConfigurer
+        instanceFlexibilityPolicy={{
+          instanceSelections: {
+            preferred: { machineTypes: ['n2-standard-8'] },
+            fallback: { machineTypes: ['e2-standard-8'] },
+          },
+        }}
+        regional={true}
+        targetShape="BALANCED"
+        setInstanceFlexibilityPolicy={setPolicy}
+      />,
+    );
+    const preferredNameInput = wrapper.find('input').filterWhere((input) => input.prop('defaultValue') === 'preferred');
+    const blankDraft = { value: ' ' };
+    const duplicateDraft = { value: 'fallback' };
+
+    preferredNameInput.simulate('blur', { currentTarget: blankDraft, target: blankDraft });
+    expect(blankDraft.value).toBe('preferred');
+    preferredNameInput.simulate('blur', { currentTarget: duplicateDraft, target: duplicateDraft });
+    expect(duplicateDraft.value).toBe('preferred');
+    expect(setPolicy).not.toHaveBeenCalled();
+  });
+
+  it('associates labels and contextual accessible names with selection controls', () => {
+    const wrapper = shallow(
+      <GceInstanceFlexibilityConfigurer
+        instanceFlexibilityPolicy={policy}
+        regional={true}
+        targetShape="BALANCED"
+        setInstanceFlexibilityPolicy={jasmine.createSpy('setPolicy')}
+      />,
+    );
+    const selectionId = 'instance-flexibility-selection-preferred';
+
+    expect(wrapper.find(`label[htmlFor="${selectionId}-name"]`).text()).toBe('Selection name');
+    expect(wrapper.find(`input#${selectionId}-name`).exists()).toBe(true);
+    expect(wrapper.find(`label[htmlFor="${selectionId}-rank"]`).text()).toBe('Rank (optional)');
+    expect(wrapper.find(`input#${selectionId}-rank`).exists()).toBe(true);
+    expect(wrapper.find(`input[aria-label="Machine type 1 for selection preferred"]`).prop('id')).toBe(
+      `${selectionId}-machine-type-0`,
+    );
+    expect(wrapper.find('button[aria-label="Remove selection preferred"]').exists()).toBe(true);
+    expect(wrapper.find('button[aria-label="Remove machine type 1 from selection preferred"]').exists()).toBe(true);
+  });
+
+  it('rerenders when policy and sibling primitive props change identity', () => {
+    const wrapper = shallow(
+      <GceInstanceFlexibilityConfigurer
+        instanceFlexibilityPolicy={undefined}
+        regional={true}
+        targetShape="BALANCED"
+        setInstanceFlexibilityPolicy={jasmine.createSpy('setPolicy')}
+      />,
+    );
+
+    expect(wrapper.text()).toContain('Add flexibility policy');
+
+    wrapper.setProps({ instanceFlexibilityPolicy: policy });
+    expect(wrapper.find('button[aria-label="Remove selection preferred"]').exists()).toBe(true);
+
+    wrapper.setProps({ regional: false, targetShape: 'EVEN' });
+    expect(wrapper.text()).toContain('Flexibility requires a regional server group.');
+    expect(wrapper.text()).toContain('not EVEN');
+  });
+});

package/src/serverGroup/configure/wizard/zones/GceInstanceFlexibilityConfigurer.tsx

@@ -0,0 +1,310 @@
+import { isEmpty } from 'lodash';
+import React from 'react';
+
+import { HelpField } from '@spinnaker/core';
+
+import type { IGceInstanceFlexibilityPolicy, IGceInstanceSelection } from '../../../../domain/serverGroup';
+
+export interface IGceInstanceFlexibilityConfigurerProps {
+  instanceFlexibilityPolicy?: IGceInstanceFlexibilityPolicy;
+  regional?: boolean;
+  targetShape?: string;
+  validationError?: string;
+  setInstanceFlexibilityPolicy: (policy: IGceInstanceFlexibilityPolicy) => void;
+}
+
+const FLEX_TARGET_SHAPES = new Set(['BALANCED', 'ANY', 'ANY_SINGLE_ZONE']);
+const VALIDATION_ERROR_ID = 'gce-instance-flexibility-error';
+
+function hasSelections(policy?: IGceInstanceFlexibilityPolicy): boolean {
+  return !isEmpty(policy?.instanceSelections);
+}
+
+function emptySelection(): IGceInstanceSelection {
+  return { machineTypes: [''] };
+}
+
+/** First unused selection-N name so rename/remove cannot overwrite an existing entry. */
+export function nextSelectionName(existingNames: string[]): string {
+  const used = new Set(existingNames);
+  let index = 1;
+  while (used.has(`selection-${index}`)) {
+    index += 1;
+  }
+  return `selection-${index}`;
+}
+
+function hasNonEmptyMachineTypes(selection?: IGceInstanceSelection): boolean {
+  const machineTypes = selection?.machineTypes || [];
+  return machineTypes.length > 0 && machineTypes.every((machineType) => !!machineType && machineType.trim().length > 0);
+}
+
+function normalizeMachineType(machineType?: string | null): string | undefined {
+  const trimmed = machineType?.trim();
+  if (!trimmed) {
+    return undefined;
+  }
+  return trimmed.substring(trimmed.lastIndexOf('/') + 1).toLowerCase();
+}
+
+// GCP requires each normalized machine type to occur only once across the entire policy.
+function hasUniqueMachineTypes(policy?: IGceInstanceFlexibilityPolicy): boolean {
+  const machineTypes = new Set<string>();
+  for (const selection of Object.values(policy?.instanceSelections || {})) {
+    for (const machineType of selection?.machineTypes || []) {
+      const normalizedMachineType = normalizeMachineType(machineType);
+      if (normalizedMachineType && machineTypes.has(normalizedMachineType)) {
+        return false;
+      }
+      if (normalizedMachineType) {
+        machineTypes.add(normalizedMachineType);
+      }
+    }
+  }
+  return true;
+}
+
+function hasValidRank(selection?: IGceInstanceSelection): boolean {
+  return (
+    selection?.rank == null ||
+    (Number.isFinite(selection.rank) && Number.isInteger(selection.rank) && selection.rank >= 0)
+  );
+}
+
+export function GceInstanceFlexibilityConfigurer({
+  instanceFlexibilityPolicy,
+  regional,
+  targetShape: targetShapeProp,
+  validationError,
+  setInstanceFlexibilityPolicy,
+}: IGceInstanceFlexibilityConfigurerProps) {
+  const policy = instanceFlexibilityPolicy || { instanceSelections: {} };
+  const entries = Object.entries(policy.instanceSelections || {});
+  const enabled = entries.length > 0;
+  const targetShape = (targetShapeProp || '').trim().toUpperCase();
+  const regionalRequired = enabled && !regional;
+  const evenBlocked = enabled && (!targetShape || targetShape === 'EVEN' || !FLEX_TARGET_SHAPES.has(targetShape));
+  const duplicateMachineTypes = enabled && !hasUniqueMachineTypes(policy);
+
+  const updateSelections = (instanceSelections: { [name: string]: IGceInstanceSelection }) => {
+    setInstanceFlexibilityPolicy({ instanceSelections });
+  };
+
+  const addSelection = () => {
+    const nextName = nextSelectionName(Object.keys(policy.instanceSelections || {}));
+    updateSelections({ ...policy.instanceSelections, [nextName]: emptySelection() });
+  };
+
+  const removeSelection = (name: string) => {
+    const next = { ...policy.instanceSelections };
+    delete next[name];
+    updateSelections(next);
+  };
+
+  const renameSelection = (oldName: string, newName: string): boolean => {
+    const trimmed = newName.trim();
+    if (!trimmed || trimmed === oldName || policy.instanceSelections[trimmed]) {
+      return false;
+    }
+    const next: { [name: string]: IGceInstanceSelection } = {};
+    Object.entries(policy.instanceSelections).forEach(([name, selection]) => {
+      next[name === oldName ? trimmed : name] = selection;
+    });
+    updateSelections(next);
+    return true;
+  };
+
+  const updateSelection = (name: string, selection: IGceInstanceSelection) => {
+    updateSelections({ ...policy.instanceSelections, [name]: selection });
+  };
+
+  const updateMachineType = (name: string, index: number, value: string) => {
+    const selection = policy.instanceSelections[name];
+    const machineTypes = [...(selection.machineTypes || [])];
+    machineTypes[index] = value;
+    updateSelection(name, { ...selection, machineTypes });
+  };
+
+  const addMachineType = (name: string) => {
+    const selection = policy.instanceSelections[name];
+    updateSelection(name, {
+      ...selection,
+      machineTypes: [...(selection.machineTypes || []), ''],
+    });
+  };
+
+  const removeMachineType = (name: string, index: number) => {
+    const selection = policy.instanceSelections[name];
+    const machineTypes = (selection.machineTypes || []).filter((_type, i) => i !== index);
+    updateSelection(name, {
+      ...selection,
+      machineTypes: machineTypes.length ? machineTypes : [''],
+    });
+  };
+
+  const updateRank = (name: string, rawRank: string) => {
+    const selection = policy.instanceSelections[name];
+    if (rawRank === '') {
+      const { rank, ...withoutRank } = selection;
+      updateSelection(name, withoutRank as IGceInstanceSelection);
+      return;
+    }
+    const parsed = Number(rawRank);
+    if (Number.isFinite(parsed) && Number.isInteger(parsed) && parsed >= 0) {
+      updateSelection(name, { ...selection, rank: parsed });
+    }
+  };
+
+  return (
+    <div className="form-group">
+      <div className="col-md-3 sm-label-right">
+        <b>Instance Flexibility</b> <HelpField id="gce.serverGroup.instanceFlexibilityPolicy" />
+      </div>
+      <div className="col-md-9">
+        {validationError && (
+          <div className="alert alert-danger" id={VALIDATION_ERROR_ID} role="alert">
+            {validationError}
+          </div>
+        )}
+        {!enabled && (
+          <button type="button" className="btn btn-sm btn-default" onClick={addSelection}>
+            Add flexibility policy
+          </button>
+        )}
+        {enabled && (
+          <div>
+            {regionalRequired && (
+              <div className="alert alert-warning">Flexibility requires a regional server group.</div>
+            )}
+            {evenBlocked && (
+              <div className="alert alert-warning">
+                Flexibility requires target shape BALANCED, ANY, or ANY_SINGLE_ZONE (not EVEN).
+              </div>
+            )}
+            {duplicateMachineTypes && (
+              <div className="alert alert-warning" role="alert">
+                Machine types must be unique across instance selections.
+              </div>
+            )}
+            {entries.map(([name, selection]) => (
+              <div key={name} className="well well-sm" style={{ marginBottom: '10px' }} data-selection-name={name}>
+                {(() => {
+                  const selectionId = `instance-flexibility-selection-${encodeURIComponent(name)}`;
+                  const rankInvalid = !hasValidRank(selection);
+                  return (
+                    <>
+                      <div className="form-group">
+                        <label className="col-md-3 sm-label-right" htmlFor={`${selectionId}-name`}>
+                          Selection name
+                        </label>
+                        <div className="col-md-6">
+                          <input
+                            id={`${selectionId}-name`}
+                            className="form-control input-sm"
+                            defaultValue={name}
+                            onBlur={(e) => {
+                              if (!renameSelection(name, e.currentTarget.value)) {
+                                e.currentTarget.value = name;
+                              }
+                            }}
+                          />
+                        </div>
+                        <div className="col-md-3">
+                          <button
+                            type="button"
+                            className="btn btn-sm btn-default"
+                            aria-label={`Remove selection ${name}`}
+                            onClick={() => removeSelection(name)}
+                          >
+                            Remove
+                          </button>
+                        </div>
+                      </div>
+                      <div className="form-group">
+                        <label className="col-md-3 sm-label-right" htmlFor={`${selectionId}-rank`}>
+                          Rank (optional)
+                        </label>
+                        <div className="col-md-3">
+                          <input
+                            id={`${selectionId}-rank`}
+                            type="number"
+                            min={0}
+                            step={1}
+                            className="form-control input-sm"
+                            aria-describedby={rankInvalid && validationError ? VALIDATION_ERROR_ID : undefined}
+                            aria-invalid={rankInvalid}
+                            value={selection.rank == null ? '' : selection.rank}
+                            onChange={(e) => updateRank(name, e.target.value)}
+                          />
+                        </div>
+                      </div>
+                      <div className="form-group">
+                        <div className="col-md-3 sm-label-right">Machine types</div>
+                        <div className="col-md-9">
+                          {(selection.machineTypes || []).map((machineType, index) => (
+                            <div key={index} style={{ display: 'flex', marginBottom: '4px' }}>
+                              <input
+                                id={`${selectionId}-machine-type-${index}`}
+                                className="form-control input-sm"
+                                aria-describedby={
+                                  !machineType?.trim() && validationError ? VALIDATION_ERROR_ID : undefined
+                                }
+                                aria-invalid={!machineType?.trim()}
+                                value={machineType}
+                                onChange={(e) => updateMachineType(name, index, e.target.value)}
+                                placeholder="e.g. n2-standard-8"
+                                aria-label={`Machine type ${index + 1} for selection ${name}`}
+                              />
+                              <button
+                                type="button"
+                                className="btn btn-sm btn-default"
+                                style={{ marginLeft: '4px' }}
+                                aria-label={`Remove machine type ${index + 1} from selection ${name}`}
+                                onClick={() => removeMachineType(name, index)}
+                              >
+                                ×
+                              </button>
+                            </div>
+                          ))}
+                          <button type="button" className="btn btn-sm btn-link" onClick={() => addMachineType(name)}>
+                            Add machine type
+                          </button>
+                        </div>
+                      </div>
+                    </>
+                  );
+                })()}
+              </div>
+            ))}
+            <button type="button" className="btn btn-sm btn-default" onClick={addSelection}>
+              Add selection
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function hasValidFlexibilityPolicy(command: {
+  regional?: boolean;
+  distributionPolicy?: { targetShape?: string };
+  instanceFlexibilityPolicy?: IGceInstanceFlexibilityPolicy;
+}): boolean {
+  if (!hasSelections(command.instanceFlexibilityPolicy)) {
+    return true;
+  }
+  if (!command.regional) {
+    return false;
+  }
+  const targetShape = (command.distributionPolicy?.targetShape || '').trim().toUpperCase();
+  if (!FLEX_TARGET_SHAPES.has(targetShape)) {
+    return false;
+  }
+  // Clouddriver rejects empty machineTypes and negative ranks; blank placeholders must not pass submit.
+  return (
+    Object.values(command.instanceFlexibilityPolicy.instanceSelections || {}).every(
+      (selection) => hasNonEmptyMachineTypes(selection) && hasValidRank(selection),
+    ) && hasUniqueMachineTypes(command.instanceFlexibilityPolicy)
+  );
+}