upcoming: [M3-7621] - Add PlacementGroups to Linode Migrate Flow

packages/manager/src/features/Linodes/MigrateLinode/ConfigureForm.test.tsx

@@ -2,7 +2,7 @@ import { waitFor } from '@testing-library/react';
 import React from 'react';
 
 import { typeFactory } from 'src/factories/types';
-import { http, HttpResponse, server } from 'src/mocks/testServer';
+import { HttpResponse, http, server } from 'src/mocks/testServer';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
 import { ConfigureForm } from './ConfigureForm';
@@ -48,6 +48,7 @@ const mockLinodeType = typeFactory.build({
 });
 
 const handleSelectRegion = vi.fn();
+const handlePlacementGroupChange = vi.fn();
 const currentPriceLabel = 'Current Price';
 const newPriceLabel = 'New Price';
 const currentPricePanel = 'current-price-panel';
@@ -57,6 +58,7 @@ describe('ConfigureForm component with price comparison', () => {
   const props = {
     backupEnabled: true,
     currentRegion: 'us-east',
+    handlePlacementGroupChange,
     handleSelectRegion,
     linodeType: 'g6-standard-1',
     selectedRegion: '',

packages/manager/src/features/Linodes/MigrateLinode/ConfigureForm.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import EdgeServer from 'src/assets/icons/entityIcons/edge-server.svg';
 import { Flag } from 'src/components/Flag';
 import { Notice } from 'src/components/Notice/Notice';
+import { PlacementGroupsSelect } from 'src/components/PlacementGroupsSelect/PlacementGroupsSelect';
 import { RegionSelect } from 'src/components/RegionSelect/RegionSelect';
 import { sxEdgeIcon } from 'src/components/RegionSelect/RegionSelect.styles';
 import { TooltipIcon } from 'src/components/TooltipIcon';
@@ -28,16 +29,17 @@ import {
 import { MigrationPricing } from './MigrationPricing';
 
 import type { MigrationPricingProps } from './MigrationPricing';
-import type { Linode, PriceObject } from '@linode/api-v4';
+import type { Linode, PlacementGroup, PriceObject } from '@linode/api-v4';
 
 interface Props {
   backupEnabled: Linode['backups']['enabled'];
   currentRegion: string;
   errorText?: string;
+  handlePlacementGroupChange: (selected: PlacementGroup) => void;
   handleSelectRegion: (id: string) => void;
   helperText?: string;
   linodeType: Linode['type'];
-  selectedRegion: null | string;
+  selectedRegion: string;
 }
 
 export type MigratePricePanelType = 'current' | 'new';
@@ -47,6 +49,7 @@ export const ConfigureForm = React.memo((props: Props) => {
     backupEnabled,
     currentRegion,
     errorText,
+    handlePlacementGroupChange,
     handleSelectRegion,
     helperText,
     linodeType,
@@ -55,14 +58,43 @@ export const ConfigureForm = React.memo((props: Props) => {
 
   const flags = useFlags();
   const { data: regions } = useRegionsQuery();
+
   const { data: currentLinodeType } = useTypeQuery(
     linodeType || '',
     Boolean(linodeType)
   );
+
+  const [
+    selectedPlacementGroup,
+    setSelectedPlacementGroup,
+  ] = React.useState<PlacementGroup | null>(null);
+
   const currentActualRegion = regions?.find((r) => r.id === currentRegion);
+
+  const newRegion = regions?.find(
+    (thisRegion) => thisRegion.id === selectedRegion
+  );
+
+  const placementGroupSelectLabel = selectedRegion
+    ? `Placement Groups in ${newRegion?.label} (${newRegion?.id}) (optional)`
+    : 'Placement Group';
+
+  const hasRegionPlacementGroupCapability = Boolean(
+    newRegion?.capabilities.includes('Placement Group')
+  );
+
+  const isPlacementGroupSelectDisabled =
+    !newRegion || !hasRegionPlacementGroupCapability;
+
+  const handlePlacementGroupSelection = (placementGroup: PlacementGroup) => {
+    setSelectedPlacementGroup(placementGroup);
+    handlePlacementGroupChange(placementGroup);
+  };
+
   const country =
     regions?.find((thisRegion) => thisRegion.id == currentRegion)?.country ??
     'us';
+
   const shouldDisplayPriceComparison = Boolean(
     selectedRegion &&
       isLinodeTypeDifferentPriceInSelectedRegion({
@@ -131,7 +163,6 @@ export const ConfigureForm = React.memo((props: Props) => {
             />
           )}
         </StyledMigrationBox>
-
         <StyledMigrationBox>
           <RegionSelect
             regions={
@@ -154,6 +185,16 @@ export const ConfigureForm = React.memo((props: Props) => {
               {...panelPrice(selectedRegion, selectedRegionPrice, 'new')}
             />
           )}
+          <PlacementGroupsSelect
+            handlePlacementGroupChange={(placementGroup) => {
+              handlePlacementGroupSelection(placementGroup);
+            }}
+            disabled={isPlacementGroupSelectDisabled}
+            label={placementGroupSelectLabel}
+            noOptionsMessage="There are no Placement Groups in this region."
+            selectedPlacementGroup={selectedPlacementGroup}
+            selectedRegion={newRegion}
+          />
         </StyledMigrationBox>
       </StyledMigrationContainer>
       {!currentRegionPrice && selectedRegion && (

packages/manager/src/features/Linodes/MigrateLinode/MigrateLinode.tsx

@@ -1,3 +1,4 @@
+import { PlacementGroup } from '@linode/api-v4';
 import { Event } from '@linode/api-v4/lib/account';
 import { styled, useTheme } from '@mui/material/styles';
 import { useSnackbar } from 'notistack';
@@ -96,11 +97,14 @@ export const MigrateLinode = React.memo((props: Props) => {
   const { data: regionsData } = useRegionsQuery();
   const flags = useFlags();
 
-  const [selectedRegion, handleSelectRegion] = React.useState<null | string>(
-    null
-  );
+  const [selectedRegion, handleSelectRegion] = React.useState<string>('');
+  const [
+    placementGroupSelection,
+    setPlacementGroupSelection,
+  ] = React.useState<PlacementGroup>();
 
   const [hasConfirmed, setConfirmed] = React.useState<boolean>(false);
+
   const [hasSignedAgreement, setHasSignedAgreement] = React.useState<boolean>(
     false
   );
@@ -122,7 +126,7 @@ export const MigrateLinode = React.memo((props: Props) => {
     if (open) {
       reset();
       setConfirmed(false);
-      handleSelectRegion(null);
+      handleSelectRegion('');
     }
   }, [open]);
 
@@ -169,6 +173,7 @@ export const MigrateLinode = React.memo((props: Props) => {
     }
 
     return migrateLinode({
+      placementGroup: placementGroupSelection?.id,
       region: selectedRegion,
     }).then(() => {
       checkForNewEvents();
@@ -245,6 +250,7 @@ export const MigrateLinode = React.memo((props: Props) => {
       <ConfigureForm
         backupEnabled={linode.backups.enabled}
         currentRegion={region}
+        handlePlacementGroupChange={setPlacementGroupSelection}
         handleSelectRegion={handleSelectRegion}
         linodeType={linode.type}
         selectedRegion={selectedRegion}

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

@@ -29,10 +29,12 @@ export const PlacementGroupsDetailPanel = (props: Props) => {
   const { handlePlacementGroupChange, selectedRegionId } = props;
   const { data: allPlacementGroups } = useAllPlacementGroupsQuery();
   const { data: regions } = useRegionsQuery();
+
   const [
     isCreatePlacementGroupDrawerOpen,
     setIsCreatePlacementGroupDrawerOpen,
   ] = React.useState(false);
+
   const [
     selectedPlacementGroup,
     setSelectedPlacementGroup,

packages/manager/src/queries/linodes/linodes.ts

@@ -271,17 +271,18 @@ export const useLinodeChangePasswordMutation = (id: number) =>
 
 export const useLinodeMigrateMutation = (id: number) => {
   const queryClient = useQueryClient();
-  return useMutation<{}, APIError[], { region: string } | undefined>(
-    (data) => scheduleOrQueueMigration(id, data),
-    {
-      onSuccess() {
-        queryClient.invalidateQueries([queryKey, 'paginated']);
-        queryClient.invalidateQueries([queryKey, 'all']);
-        queryClient.invalidateQueries([queryKey, 'infinite']);
-        queryClient.invalidateQueries([queryKey, 'linode', id, 'details']);
-      },
-    }
-  );
+  return useMutation<
+    {},
+    APIError[],
+    { placementGroup?: number; region: string } | undefined
+  >((data) => scheduleOrQueueMigration(id, data), {
+    onSuccess() {
+      queryClient.invalidateQueries([queryKey, 'paginated']);
+      queryClient.invalidateQueries([queryKey, 'all']);
+      queryClient.invalidateQueries([queryKey, 'infinite']);
+      queryClient.invalidateQueries([queryKey, 'linode', id, 'details']);
+    },
+  });
 };
 
 export const useLinodeResizeMutation = (id: number) => {