feat(pci-instances): allow user to select new region for unavailable flavor

Tsiorifamonjena · ovh-cds · Tsiorifamonjena · commit 37eddd2362d7 · 2025-10-29T10:30:26.000+01:00
ref: #TAPC-4635, #TAPC-5212, #TAPC-4598

Signed-off-by: tsiorifamonjena &lt;tsiorifamonjena.tianjanahary.ext@corp.ovh.com&gt;
Co-authored-by: CDS Translator Agent &lt;opensource@ovh.net&gt;
diff --git a/packages/manager/apps/pci-instances/public/translations/creation/Messages_de_DE.json b/packages/manager/apps/pci-instances/public/translations/creation/Messages_de_DE.json
@@ -3,7 +3,7 @@
   "pci_instances_creation_advanced_parameters": "Erweiterte Einstellungen",
   "pci_instances_creation_quantity_title": "Wählen Sie eine Menge",
   "pci_instances_creation_quantity_label": "Anzahl der zu erstellenden Instanzen",
-  "pci_instance_creation_quantity_rule": "Ihr aktuelles Kontingent erlaubt es Ihnen, gleichzeitig bis zu {{ quota }} Instanz(en) vom Typ {{ type }} für die Region {{ region }} zu erstellen.",
+  "pci_instance_creation_quantity_rule": "Ihr aktuelles Kontingent erlaubt es Ihnen, gleichzeitig bis zu {{ quota }} Instanz(en) vom Typ {{ type }} für die Region {{ region }} zu erstellen. <Link>Überprüfen Sie Ihr Kontingent.</Link>",
   "pci_instance_creation_choose_localization_title": "Wählen Sie einen Standort",
   "pci_instance_creation_select_localization_label": "Wählen Sie einen Standort aus: ",
   "pci_instance_creation_continue_order": "Meine Bestellung fortsetzen",
@@ -31,5 +31,9 @@
   "pci_instance_creation_flavor_unavailable_help": "Dieses Modell ist in Ihrer ausgewählten Region nicht verfügbar. Sie können es jedoch auswählen, müssen aber eine andere Region für dieses Modell wählen.",
   "pci_instance_creation_flavor_unavailable_quota": "Quota nicht verfügbar",
   "pci_instance_creation_flavor_unavailable_quota_help": "Ihr Kontingent erlaubt es Ihnen nicht, dieses Instanzmodell auszuwählen. Bitte erhöhen Sie Ihr Kontingent.",
-  "pci_instance_creation_select_flavor_price_hint": "* Lorem ipsum dolor sit amet"
+  "pci_instance_creation_select_flavor_price_hint": "* Lorem ipsum dolor sit amet",
+  "pci_instance_creation_select_new_region_title": "Wählen Sie eine neue Region",
+  "pci_instance_creation_select_new_region_label": "Wählen Sie eine Region aus",
+  "pci_instance_creation_select_new_region_for_flavor": "Dieses Modell <strong>({{ flavor }})</strong> ist in Ihrer <strong>ausgewählten Region</strong> nicht verfügbar. Sie können es jedoch auswählen, müssen aber eine andere verfügbare Region für dieses Modell wählen.",
+  "pci_instance_creation_select_new_region": "Wählen Sie eine Region aus"
 }
diff --git a/packages/manager/apps/pci-instances/public/translations/creation/Messages_en_GB.json b/packages/manager/apps/pci-instances/public/translations/creation/Messages_en_GB.json
@@ -3,7 +3,7 @@
   "pci_instances_creation_advanced_parameters": "Advanced settings",
   "pci_instances_creation_quantity_title": "Choose a quantity",
   "pci_instances_creation_quantity_label": "Number of instances to create",
-  "pci_instance_creation_quantity_rule": "Your current quota allows you to create up to {{ quota }} instance(s) of type {{ type }} for the {{ region }} region simultaneously.",
+  "pci_instance_creation_quantity_rule": "Your current quota allows you to create up to {{ quota }} instance(s) of type {{ type }} simultaneously for the {{ region }} region. <Link>Check your quota.</Link>",
   "pci_instance_creation_choose_localization_title": "Choose a location",
   "pci_instance_creation_select_localization_label": "Select a location: ",
   "pci_instance_creation_continue_order": "Continue my order",
@@ -31,5 +31,9 @@
   "pci_instance_creation_flavor_unavailable_quota": "Quota unavailable",
   "pci_instance_creation_flavor_unavailable_help": "This model is not available in your selected region. However, you can select it, but you will need to choose another region for this model.",
   "pci_instance_creation_flavor_unavailable_quota_help": "Your quota does not allow you to choose this instance type. Please increase your quota.",
-  "pci_instance_creation_select_flavor_price_hint": "* Lorem ipsum dolor sit amet"
+  "pci_instance_creation_select_flavor_price_hint": "* Lorem ipsum dolor sit amet",
+  "pci_instance_creation_select_new_region_title": "Choose a new region",
+  "pci_instance_creation_select_new_region_label": "Select a region",
+  "pci_instance_creation_select_new_region_for_flavor": "This model <strong>({{ flavor }})</strong> is not available in your <strong>selected region</strong>. However, you can select it, but you will need to choose another available region for this model.",
+  "pci_instance_creation_select_new_region": "Choose a region"
 }
diff --git a/packages/manager/apps/pci-instances/public/translations/creation/Messages_es_ES.json b/packages/manager/apps/pci-instances/public/translations/creation/Messages_es_ES.json
@@ -3,7 +3,7 @@
   "pci_instances_creation_advanced_parameters": "Parámetros avanzados",
   "pci_instances_creation_quantity_title": "Elegir una cantidad",
   "pci_instances_creation_quantity_label": "Número de instancias a crear",
-  "pci_instance_creation_quantity_rule": "Su cuota actual le permite crear simultáneamente hasta {{ quota }} instancia(s) de tipo {{ type }} para la región de {{ region }}.",
+  "pci_instance_creation_quantity_rule": "Su cuota actual le permite crear simultáneamente hasta {{ quota }} instancia(s) del tipo {{ type }} para la región de {{ region }}. <Link>Consulte su cuota.</Link>",
   "pci_instance_creation_choose_localization_title": "Elija una ubicación",
   "pci_instance_creation_select_localization_label": "Seleccione una ubicación: ",
   "pci_instance_creation_continue_order": "Continuar mi pedido",
@@ -31,5 +31,9 @@
   "pci_instance_creation_flavor_unavailable_quota": "Cuota no disponible",
   "pci_instance_creation_flavor_unavailable_help": "Este modelo no está disponible en su región seleccionada. Sin embargo, puede seleccionarlo, pero deberá elegir otra región para este modelo.",
   "pci_instance_creation_flavor_unavailable_quota_help": "Su cuota no le permite elegir este modelo de instancia. Por favor, aumente su cuota.",
-  "pci_instance_creation_select_flavor_price_hint": "* Lorem ipsum dolor sit amet"
+  "pci_instance_creation_select_flavor_price_hint": "* Lorem ipsum dolor sit amet",
+  "pci_instance_creation_select_new_region_title": "Elegir una nueva región",
+  "pci_instance_creation_select_new_region_label": "Seleccionar una región",
+  "pci_instance_creation_select_new_region_for_flavor": "Este modelo <strong>({{ flavor }})</strong> no está disponible en su <strong>región seleccionada</strong>. Sin embargo, puede seleccionarlo, pero deberá elegir otra región disponible para este modelo.",
+  "pci_instance_creation_select_new_region": "Seleccione una región"
 }
diff --git a/packages/manager/apps/pci-instances/public/translations/creation/Messages_fr_CA.json b/packages/manager/apps/pci-instances/public/translations/creation/Messages_fr_CA.json
@@ -52,5 +52,9 @@
   "pci_instance_creation_availabilityZone_choose_for_me": "Choisir pour moi",
   "pci_instance_creation_availabilityZone_user_choice": "Je choisis ma zone de disponibilité",
   "pci_instance_creation_availabilityZone_help_description_p1": "Dans un environnement cloud, la disponibilité et la résilience des services sont essentielles pour garantir la continuité des opérations, même en cas de panne d’une zone de disponibilité (AZ).",
-  "pci_instance_creation_availabilityZone_help_description_p2": "Comme les instances sont des services zonaux, elles ne sont déployées que dans une seule zone de disponibilité. Pour garantir la résilience, il revient donc au client de répartir manuellement ses instances sur plusieurs zones."
+  "pci_instance_creation_availabilityZone_help_description_p2": "Comme les instances sont des services zonaux, elles ne sont déployées que dans une seule zone de disponibilité. Pour garantir la résilience, il revient donc au client de répartir manuellement ses instances sur plusieurs zones.",
+  "pci_instance_creation_select_new_region_title": "Choisir une nouvelle région",
+  "pci_instance_creation_select_new_region_label": "Selectionner une région",
+  "pci_instance_creation_select_new_region_for_flavor": "Ce modèle <strong>({{ flavor }})</strong> n'est pas disponible dans votre <strong>région selectionnée</strong>. Vous pouvez toutefois le sélectionner mais vous devrez choisir une autre région disponible pour ce modèle.",
+  "pci_instance_creation_select_new_region": "Choisissez une région"
 }
diff --git a/packages/manager/apps/pci-instances/public/translations/creation/Messages_fr_FR.json b/packages/manager/apps/pci-instances/public/translations/creation/Messages_fr_FR.json
@@ -52,5 +52,9 @@
   "pci_instance_creation_availabilityZone_choose_for_me": "Choisir pour moi",
   "pci_instance_creation_availabilityZone_user_choice": "Je choisis ma zone de disponibilité",
   "pci_instance_creation_availabilityZone_help_description_p1": "Dans un environnement cloud, la disponibilité et la résilience des services sont essentielles pour garantir la continuité des opérations, même en cas de panne d’une zone de disponibilité (AZ).",
-  "pci_instance_creation_availabilityZone_help_description_p2": "Comme les instances sont des services zonaux, elles ne sont déployées que dans une seule zone de disponibilité. Pour garantir la résilience, il revient donc au client de répartir manuellement ses instances sur plusieurs zones."
+  "pci_instance_creation_availabilityZone_help_description_p2": "Comme les instances sont des services zonaux, elles ne sont déployées que dans une seule zone de disponibilité. Pour garantir la résilience, il revient donc au client de répartir manuellement ses instances sur plusieurs zones.",
+  "pci_instance_creation_select_new_region_title": "Choisir une nouvelle région",
+  "pci_instance_creation_select_new_region_label": "Selectionner une région",
+  "pci_instance_creation_select_new_region_for_flavor": "Ce modèle <strong>({{ flavor }})</strong> n'est pas disponible dans votre <strong>région selectionnée</strong>. Vous pouvez toutefois le sélectionner mais vous devrez choisir une autre région disponible pour ce modèle.",
+  "pci_instance_creation_select_new_region": "Choisissez une région"
 }
diff --git a/packages/manager/apps/pci-instances/public/translations/creation/Messages_it_IT.json b/packages/manager/apps/pci-instances/public/translations/creation/Messages_it_IT.json
@@ -3,7 +3,7 @@
   "pci_instances_creation_advanced_parameters": "Impostazioni avanzate",
   "pci_instances_creation_quantity_title": "Scegli una quantità",
   "pci_instances_creation_quantity_label": "Numero di istanze da creare",
-  "pci_instance_creation_quantity_rule": "Il tuo attuale limite ti consente di creare simultaneamente fino a {{ quota }} istanza(e) di tipo {{ type }} per la regione {{ region }}.",
+  "pci_instance_creation_quantity_rule": "Il tuo attuale quota ti consente di creare simultaneamente fino a {{ quota }} istanza(e) di tipo {{ type }} per la regione di {{ region }}. <Link>Controlla il tuo quota.</Link>",
   "pci_instance_creation_choose_localization_title": "Scegli una posizione",
   "pci_instance_creation_select_localization_label": "Seleziona una posizione: ",
   "pci_instance_creation_continue_order": "Continua il mio ordine",
@@ -31,5 +31,9 @@
   "pci_instance_creation_flavor_unavailable_quota": "Quota non disponibile",
   "pci_instance_creation_flavor_unavailable_help": "Questo modello non è disponibile nella tua regione selezionata. Puoi comunque selezionarlo, ma dovrai scegliere un'altra regione per questo modello.",
   "pci_instance_creation_flavor_unavailable_quota_help": "Il tuo quota non ti consente di scegliere questo modello di istanza. Si prega di aumentare il proprio quota.",
-  "pci_instance_creation_select_flavor_price_hint": "* Lorem ipsum dolor sit amet"
+  "pci_instance_creation_select_flavor_price_hint": "* Lorem ipsum dolor sit amet",
+  "pci_instance_creation_select_new_region_title": "Scegli una nuova regione",
+  "pci_instance_creation_select_new_region_label": "Selezionare una regione",
+  "pci_instance_creation_select_new_region_for_flavor": "Questo modello <strong>({{ flavor }})</strong> non è disponibile nella tua <strong>regione selezionata</strong>. Tuttavia, puoi selezionarlo, ma dovrai scegliere un'altra regione disponibile per questo modello.",
+  "pci_instance_creation_select_new_region": "Seleziona una regione"
 }
diff --git a/packages/manager/apps/pci-instances/public/translations/creation/Messages_pl_PL.json b/packages/manager/apps/pci-instances/public/translations/creation/Messages_pl_PL.json
@@ -3,7 +3,7 @@
   "pci_instances_creation_advanced_parameters": "Ustawienia zaawansowane",
   "pci_instances_creation_quantity_title": "Wybierz ilość",
   "pci_instances_creation_quantity_label": "Liczba instancji do utworzenia",
-  "pci_instance_creation_quantity_rule": "Twój aktualny limit pozwala na jednoczesne utworzenie do {{ quota }} instancji typu {{ type }} w regionie {{ region }}.",
+  "pci_instance_creation_quantity_rule": "Twój aktualny limit pozwala na jednoczesne utworzenie do {{ quota }} instancji typu {{ type }} w regionie {{ region }}. <Link>Sprawdź swój limit.</Link>",
   "pci_instance_creation_choose_localization_title": "Wybierz lokalizację",
   "pci_instance_creation_select_localization_label": "Wybierz lokalizację: ",
   "pci_instance_creation_continue_order": "Kontynuuj moje zamówienie",
@@ -31,5 +31,9 @@
   "pci_instance_creation_flavor_unavailable_quota": "Niedostępny limit",
   "pci_instance_creation_flavor_unavailable_help": "Ten model nie jest dostępny w wybranym regionie. Możesz go jednak wybrać, ale będziesz musiał wybrać inny region dla tego modelu.",
   "pci_instance_creation_flavor_unavailable_quota_help": "Twój limit nie pozwala na wybór tego modelu instancji. Proszę zwiększyć swój limit.",
-  "pci_instance_creation_select_flavor_price_hint": "* Lorem ipsum dolor sit amet"
+  "pci_instance_creation_select_flavor_price_hint": "* Lorem ipsum dolor sit amet",
+  "pci_instance_creation_select_new_region_title": "Wybierz nowy region",
+  "pci_instance_creation_select_new_region_label": "Wybierz region",
+  "pci_instance_creation_select_new_region_for_flavor": "Ten model <strong>({{ flavor }})</strong> nie jest dostępny w twoim <strong>wybranym regionie</strong>. Możesz go jednak wybrać, ale będziesz musiał wybrać inny dostępny region dla tego modelu.",
+  "pci_instance_creation_select_new_region": "Wybierz region"
 }
diff --git a/packages/manager/apps/pci-instances/public/translations/creation/Messages_pt_PT.json b/packages/manager/apps/pci-instances/public/translations/creation/Messages_pt_PT.json
@@ -3,7 +3,7 @@
   "pci_instances_creation_advanced_parameters": "Configurações avançadas",
   "pci_instances_creation_quantity_title": "Escolher uma quantidade",
   "pci_instances_creation_quantity_label": "Número de instâncias a criar",
-  "pci_instance_creation_quantity_rule": "O seu quota atual permite-lhe criar simultaneamente até {{ quota }} instância(s) do tipo {{ type }} para a região {{ region }}.",
+  "pci_instance_creation_quantity_rule": "O seu quota atual permite-lhe criar simultaneamente até {{ quota }} instância(s) do tipo {{ type }} para a região de {{ region }}. <Link>Consulte o seu quota.</Link>",
   "pci_instance_creation_choose_localization_title": "Escolha uma localização",
   "pci_instance_creation_select_localization_label": "Selecione uma localização: ",
   "pci_instance_creation_continue_order": "Continuar a minha encomenda",
@@ -31,5 +31,9 @@
   "pci_instance_creation_flavor_unavailable_quota": "Quota indisponível",
   "pci_instance_creation_flavor_unavailable_help": "Este modelo não está disponível na sua região selecionada. No entanto, você pode selecioná-lo, mas terá que escolher outra região para este modelo.",
   "pci_instance_creation_flavor_unavailable_quota_help": "O seu quota não permite escolher este modelo de instância. Por favor, aumente o seu quota.",
-  "pci_instance_creation_select_flavor_price_hint": "* Lorem ipsum dolor sit amet"
+  "pci_instance_creation_select_flavor_price_hint": "* Lorem ipsum dolor sit amet",
+  "pci_instance_creation_select_new_region_title": "Escolher uma nova região",
+  "pci_instance_creation_select_new_region_label": "Selecionar uma região",
+  "pci_instance_creation_select_new_region_for_flavor": "Este modelo <strong>({{ flavor }})</strong> não está disponível na sua <strong>região selecionada</strong>. No entanto, você pode selecioná-lo, mas terá que escolher outra região disponível para este modelo.",
+  "pci_instance_creation_select_new_region": "Escolha uma região"
 }
diff --git a/packages/manager/apps/pci-instances/src/__mocks__/instance/constants.ts b/packages/manager/apps/pci-instances/src/__mocks__/instance/constants.ts
@@ -850,3 +850,52 @@ export const mockedFlavors: TFlavorDataForTable[] = [
     monthlyPrice: 1632.0,
   },
 ];
+
+export const mockedFlavorAvailableRegions = [
+  {
+    label: 'Europe',
+    options: [
+      {
+        customRendererData: {
+          countryCode: 'be',
+          deploymentMode: 'localzone',
+          macroRegion: 'EU-WEST-LZ-BRU',
+        },
+        label: 'Bruxelles',
+        value: 'EU-WEST-LZ-BRU-A',
+      },
+      {
+        customRendererData: {
+          countryCode: 'fr',
+          deploymentMode: 'region',
+          macroRegion: 'GRA',
+        },
+        label: 'GRA11',
+        value: 'GRA11',
+      },
+      {
+        customRendererData: {
+          countryCode: 'fr',
+          deploymentMode: 'region',
+          macroRegion: 'GRA',
+        },
+        label: 'GRA7',
+        value: 'GRA7',
+      },
+    ],
+  },
+  {
+    label: 'Amerique du Nord',
+    options: [
+      {
+        customRendererData: {
+          countryCode: 'ca',
+          deploymentMode: 'region',
+          macroRegion: 'BHS',
+        },
+        label: 'Beauharnois',
+        value: 'BHS5',
+      },
+    ],
+  },
+];
diff --git a/packages/manager/apps/pci-instances/src/components/flavorsTable/FlavorsTable.component.tsx b/packages/manager/apps/pci-instances/src/components/flavorsTable/FlavorsTable.component.tsx
@@ -27,7 +27,7 @@ export type TFlavorsTableProps = TableProp &
     columns: TableColumn[];
     rows: TableRow[];
     selectable?: boolean;
-    onClick?: (flavorName: string) => void;
+    onRowClick?: (flavorName: string) => void;
   };
 
 const stickyFirstColumnClasses = [
@@ -49,7 +49,7 @@ export const FlavorsTable = memo(
     columns,
     rows,
     className,
-    onClick,
+    onRowClick: onClick,
     selectable = false,
     size = TABLE_SIZE.md,
     variant = TABLE_VARIANT.default,
diff --git a/packages/manager/apps/pci-instances/src/components/flavorsTable/FlavorsTableBody.component.tsx b/packages/manager/apps/pci-instances/src/components/flavorsTable/FlavorsTableBody.component.tsx
@@ -32,7 +32,8 @@ export const FlavorsTableBody = memo(
           <FlavorsTableTr
             key={row.id}
             className={rowClasses}
-            onClick={() => onClick?.(row.id)}
+            {...(onClick &&
+              !row.disabled && { onClick: () => onClick(row.id) })}
             disabled={row.disabled}
           >
             {columns.map((col, colIndex) => {
diff --git a/packages/manager/apps/pci-instances/src/components/flavorsTable/__tests__/FlavorsTable.component.spec.tsx b/packages/manager/apps/pci-instances/src/components/flavorsTable/__tests__/FlavorsTable.component.spec.tsx
@@ -89,7 +89,7 @@ describe('FlavorsTable', () => {
         caption="Flavors"
         columns={columns}
         rows={rows}
-        onClick={onClick}
+        onRowClick={onClick}
         selectable
       />,
     );
diff --git a/packages/manager/apps/pci-instances/src/components/localizationCard/Localization.component.tsx b/packages/manager/apps/pci-instances/src/components/localizationCard/Localization.component.tsx
@@ -0,0 +1,33 @@
+import { FC } from 'react';
+import { Text } from '@ovhcloud/ods-react';
+import { DeploymentModeBadge } from '../deploymentModeBadge/DeploymentModeBadge.component';
+import { Flag } from '../flag/Flag';
+import { TCountryIsoCode } from '../flag/country-iso-code';
+import { TDeploymentMode } from '@/types/instance/common.type';
+import clsx from 'clsx';
+
+type TLocalizationProps = {
+  name: string;
+  countryCode?: TCountryIsoCode;
+  deploymentMode?: TDeploymentMode;
+};
+
+const Localization: FC<TLocalizationProps> = ({
+  name,
+  countryCode,
+  deploymentMode,
+}) => (
+  <div
+    className={clsx('flex justify-between items-center w-full', {
+      'gap-x-6': !!countryCode,
+    })}
+  >
+    <Text className="flex items-center gap-x-4">
+      {countryCode && <Flag isoCode={countryCode} />}
+      {name}
+    </Text>
+    {deploymentMode && <DeploymentModeBadge mode={deploymentMode} />}
+  </div>
+);
+
+export default Localization;
diff --git a/packages/manager/apps/pci-instances/src/components/localizationCard/LocalizationCard.component.tsx b/packages/manager/apps/pci-instances/src/components/localizationCard/LocalizationCard.component.tsx
@@ -1,9 +1,9 @@
-import { Radio, RadioControl, RadioLabel, Text } from '@ovhcloud/ods-react';
+import { Radio, RadioControl, RadioLabel } from '@ovhcloud/ods-react';
 import { Flag } from '../flag/Flag';
 import { TCountryIsoCode } from '../flag/country-iso-code';
-import { DeploymentModeBadge } from '../deploymentModeBadge/DeploymentModeBadge.component';
 import { TDeploymentMode } from '@/types/instance/common.type';
 import { PciCard } from '@/components/pciCard/PciCard.component';
+import Localization from './Localization.component';
 
 type TLocalizationCardProps = {
   city: string;
@@ -41,10 +41,7 @@ export const LocalizationCard = ({
           {city}
         </RadioLabel>
       </Radio>
-      <div className="flex items-center justify-between gap-4 w-full">
-        <Text>{datacenterDetails}</Text>
-        <DeploymentModeBadge mode={deploymentMode} />
-      </div>
+      <Localization name={datacenterDetails} deploymentMode={deploymentMode} />
     </PciCard.Header>
   </PciCard>
 );
diff --git a/packages/manager/apps/pci-instances/src/components/modal/Modal.component.tsx b/packages/manager/apps/pci-instances/src/components/modal/Modal.component.tsx
@@ -9,10 +9,22 @@ import {
   ModalContent,
   Text,
   TEXT_PRESET,
+  ModalProp,
 } from '@ovhcloud/ods-react';
 
 export type TModalVariant = 'primary' | 'warning' | 'critical';
 
+type TModalProps = ModalProp & {
+  title: string;
+  onModalClose: () => void;
+  children: React.ReactNode;
+  isPending: boolean;
+  handleInstanceAction: () => void;
+  variant?: TModalVariant;
+  dismissible?: boolean;
+  disabled?: boolean;
+};
+
 const Modal = ({
   title,
   onModalClose,
@@ -22,22 +34,14 @@ const Modal = ({
   variant = 'primary',
   dismissible = false,
   disabled,
-}: {
-  title: string;
-  onModalClose: () => void;
-  children: React.ReactNode;
-  isPending: boolean;
-  handleInstanceAction: () => void;
-  variant?: TModalVariant;
-  dismissible?: boolean;
-  disabled?: boolean;
-}) => {
+  ...props
+}: TModalProps) => {
   const { t } = useTranslation(NAMESPACES.ACTIONS);
   const id = useId();
 
   return (
     <ODSModal
-      defaultOpen
+      {...('open' in props ? { open: props.open } : { defaultOpen: true })}
       onOpenChange={onModalClose}
       closeOnInteractOutside
       closeOnEscape
diff --git a/packages/manager/apps/pci-instances/src/pages/instances/create/components/FlavorBlock.component.tsx b/packages/manager/apps/pci-instances/src/pages/instances/create/components/FlavorBlock.component.tsx
diff --git a/packages/manager/apps/pci-instances/src/pages/instances/create/components/RegionSelectionModal.component.tsx b/packages/manager/apps/pci-instances/src/pages/instances/create/components/RegionSelectionModal.component.tsx
diff --git a/packages/manager/apps/pci-instances/src/pages/instances/create/components/flavor/FlavorRowsBuilder.tsx b/packages/manager/apps/pci-instances/src/pages/instances/create/components/flavor/FlavorRowsBuilder.tsx
diff --git a/packages/manager/apps/pci-instances/src/pages/instances/create/components/flavor/FlavorSelection.component.tsx b/packages/manager/apps/pci-instances/src/pages/instances/create/components/flavor/FlavorSelection.component.tsx
