feat(pci-instances): add distributionType selector

Tsiorifamonjena · ovh-cds · Tsiorifamonjena · commit 36fa3c292e48 · 2025-10-31T10:30:12.000+01:00
ref: #TAPC-4615

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
@@ -39,5 +39,7 @@
   "pci_instance_creation_select_image_title": "Wählen Sie ein Bild aus",
   "pci_instance_creation_select_image_help_title": "Bilder",
   "pci_instance_creation_select_image_help_text": "Die in diesem Schritt verfügbaren Bilder hängen von den in den vorherigen Schritten getroffenen Entscheidungen ab, d.h. von der Kompatibilität mit dem Instanzmodell und der regionalen Verfügbarkeit. Wenn Sie beispielsweise ein Windows-Betriebssystem auswählen möchten und keine Windows-Distributionen verfügbar sind, müssen Sie Ihre Auswahl in den vorherigen Schritten ändern.",
-  "pci_instance_creation_select_image_life_cycle_help_label": "Lebenszyklus einer Distribution bei OVH"
+  "pci_instance_creation_select_image_life_cycle_help_label": "Lebenszyklus einer Distribution bei OVH",
+  "pci_instance_creation_select_image_distribution_type_label": "Verteilungsart",
+  "pci_instance_creation_select_image_distribution_type_license_information": "Die Verwendung eines Bildes unterliegt der vorherigen Zustimmung des Lizenzvertrags des Anbieters."
 }
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
@@ -39,5 +39,7 @@
   "pci_instance_creation_select_image_title": "Select an image",
   "pci_instance_creation_select_image_help_title": "Images",
   "pci_instance_creation_select_image_help_text": "The images available at this stage depend on the choices made in the previous steps, that is to say, on compatibility with the instance model and regional availability. For example, if you want to select a Windows operating system and there are no Windows distributions available, you need to change your choices from the previous steps.",
-  "pci_instance_creation_select_image_life_cycle_help_label": "Lifecycle of a distribution at OVH"
+  "pci_instance_creation_select_image_life_cycle_help_label": "Lifecycle of a distribution at OVH",
+  "pci_instance_creation_select_image_distribution_type_label": "Distribution type",
+  "pci_instance_creation_select_image_distribution_type_license_information": "The use of an image is subject to the prior acceptance of the supplier's user license agreement."
 }
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
@@ -39,5 +39,7 @@
   "pci_instance_creation_select_image_title": "Seleccione una imagen",
   "pci_instance_creation_select_image_help_title": "Imágenes",
   "pci_instance_creation_select_image_help_text": "Las imágenes disponibles en esta etapa dependen de las elecciones realizadas en las etapas anteriores, es decir, de la compatibilidad con el modelo de instancia y de la disponibilidad regional. Por ejemplo, si desea seleccionar un sistema operativo Windows y no hay distribuciones de Windows disponibles, debe modificar sus elecciones de las etapas anteriores.",
-  "pci_instance_creation_select_image_life_cycle_help_label": "Ciclo de vida de una distribución en OVH"
+  "pci_instance_creation_select_image_life_cycle_help_label": "Ciclo de vida de una distribución en OVH",
+  "pci_instance_creation_select_image_distribution_type_label": "Tipo de distribución",
+  "pci_instance_creation_select_image_distribution_type_license_information": "El uso de una imagen está sujeto a la aceptación previa del Contrato de licencia de usuario del proveedor."
 }
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
@@ -60,5 +60,7 @@
   "pci_instance_creation_select_image_title": "Sélectionnez une image",
   "pci_instance_creation_select_image_help_title": "Images",
   "pci_instance_creation_select_image_help_text": "Les images disponibles à cette étape dépendent des choix opérés lors des étapes précédentes, c'est-à-dire de la compatibilité avec le modèle d'instance et de la disponibilité régionale. Par exemple, si vous souhaitez sélectionner un système d'exploitation Windows et qu'il n'y a pas de distributions Windows disponibles, vous devez modifier vos choix des étapes précédentes.",
-  "pci_instance_creation_select_image_life_cycle_help_label": "Cycle de vie d'une distribution chez OVH"
+  "pci_instance_creation_select_image_life_cycle_help_label": "Cycle de vie d'une distribution chez OVH",
+  "pci_instance_creation_select_image_distribution_type_label": "Type de distribution",
+  "pci_instance_creation_select_image_distribution_type_license_information": "L'utilisation d'une image est soumise à l'acceptation préalable du Contrat de license utilisateur du fournisseur."
 }
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
@@ -60,5 +60,7 @@
   "pci_instance_creation_select_image_title": "Sélectionnez une image",
   "pci_instance_creation_select_image_help_title": "Images",
   "pci_instance_creation_select_image_help_text": "Les images disponibles à cette étape dépendent des choix opérés lors des étapes précédentes, c'est-à-dire de la compatibilité avec le modèle d'instance et de la disponibilité régionale. Par exemple, si vous souhaitez sélectionner un système d'exploitation Windows et qu'il n'y a pas de distributions Windows disponibles, vous devez modifier vos choix des étapes précédentes.",
-  "pci_instance_creation_select_image_life_cycle_help_label": "Cycle de vie d'une distribution chez OVH"
+  "pci_instance_creation_select_image_life_cycle_help_label": "Cycle de vie d'une distribution chez OVH",
+  "pci_instance_creation_select_image_distribution_type_label": "Type de distribution",
+  "pci_instance_creation_select_image_distribution_type_license_information": "L'utilisation d'une image est soumise à l'acceptation préalable du Contrat de license utilisateur du fournisseur."
 }
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
@@ -39,5 +39,7 @@
   "pci_instance_creation_select_image_title": "Seleziona un'immagine",
   "pci_instance_creation_select_image_help_title": "ISO",
   "pci_instance_creation_select_image_help_text": "Le immagini disponibili in questo passaggio dipendono dalle scelte effettuate nei passaggi precedenti, ovvero dalla compatibilità con il modello di istanza e dalla disponibilità regionale. Ad esempio, se desideri selezionare un sistema operativo Windows e non ci sono distribuzioni Windows disponibili, devi modificare le tue scelte nei passaggi precedenti.",
-  "pci_instance_creation_select_image_life_cycle_help_label": "Ciclo di vita di una distribuzione presso OVH"
+  "pci_instance_creation_select_image_life_cycle_help_label": "Ciclo di vita di una distribuzione presso OVH",
+  "pci_instance_creation_select_image_distribution_type_label": "Tipo di distribuzione",
+  "pci_instance_creation_select_image_distribution_type_license_information": "L'uso di un'immagine è soggetto all'accettazione preventiva del Contratto di licenza utente del fornitore."
 }
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
@@ -39,5 +39,7 @@
   "pci_instance_creation_select_image_title": "Wybierz obraz",
   "pci_instance_creation_select_image_help_title": "Systemy",
   "pci_instance_creation_select_image_help_text": "Dostępne obrazy na tym etapie zależą od wyborów dokonanych w poprzednich etapach, to znaczy od zgodności z modelem instancji i dostępności regionalnej. Na przykład, jeśli chcesz wybrać system operacyjny Windows, a nie ma dostępnych dystrybucji Windows, musisz zmienić swoje wybory z poprzednich etapów.",
-  "pci_instance_creation_select_image_life_cycle_help_label": "Cykl życia dystrybucji w OVH"
+  "pci_instance_creation_select_image_life_cycle_help_label": "Cykl życia dystrybucji w OVH",
+  "pci_instance_creation_select_image_distribution_type_label": "Rodzaj dystrybucji",
+  "pci_instance_creation_select_image_distribution_type_license_information": "Użycie obrazu podlega wcześniejszemu zatwierdzeniu umowy licencyjnej dostawcy."
 }
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
@@ -39,5 +39,7 @@
   "pci_instance_creation_select_image_title": "Selecione uma imagem",
   "pci_instance_creation_select_image_help_title": "Imagens",
   "pci_instance_creation_select_image_help_text": "As imagens disponíveis nesta etapa dependem das escolhas feitas nas etapas anteriores, ou seja, da compatibilidade com o modelo de instância e da disponibilidade regional. Por exemplo, se você deseja selecionar um sistema operativo Windows e não há distribuições Windows disponíveis, deve alterar suas escolhas nas etapas anteriores.",
-  "pci_instance_creation_select_image_life_cycle_help_label": "Ciclo de vida de uma distribuição na OVH"
+  "pci_instance_creation_select_image_life_cycle_help_label": "Ciclo de vida de uma distribuição na OVH",
+  "pci_instance_creation_select_image_distribution_type_label": "Tipo de distribuição",
+  "pci_instance_creation_select_image_distribution_type_license_information": "A utilização de uma imagem está sujeita à aceitação prévia do Contrato de licença do utilizador do fornecedor."
 }
diff --git a/packages/manager/apps/pci-instances/src/__mocks__/instance/constants.ts b/packages/manager/apps/pci-instances/src/__mocks__/instance/constants.ts
@@ -899,3 +899,22 @@ export const mockedFlavorAvailableRegions = [
     ],
   },
 ];
+
+export const mockedDistributionImageType = [
+  {
+    label: 'Distributions Unix',
+    value: 'linux',
+  },
+  {
+    label: 'Distributions Windows',
+    value: 'windows',
+  },
+  {
+    label: 'Distributions + apps',
+    value: 'apps',
+  },
+  {
+    label: 'Backups',
+    value: 'backups',
+  },
+];
diff --git a/packages/manager/apps/pci-instances/src/pages/instances/create/CreateInstance.page.tsx b/packages/manager/apps/pci-instances/src/pages/instances/create/CreateInstance.page.tsx
@@ -16,6 +16,7 @@ import {
   microRegionSelectionSchema,
   nameSchema,
   quantitySchema,
+  distributionImageTypeSchema,
 } from '@/pages/instances/create/CreateInstance.schema';
 
 import { useInstancesCatalog } from '@/data/hooks/catalog/useInstancesCatalog';
@@ -33,6 +34,7 @@ export const instanceCreationSchema = z.object({
   macroRegion: macroRegionSelectionSchema,
   microRegion: microRegionSelectionSchema,
   availabilityZone: availabilityZoneSelectionSchema,
+  distributionImageType: distributionImageTypeSchema,
 });
 
 const CreateInstance: FC = () => {
diff --git a/packages/manager/apps/pci-instances/src/pages/instances/create/CreateInstance.schema.ts b/packages/manager/apps/pci-instances/src/pages/instances/create/CreateInstance.schema.ts
@@ -29,3 +29,5 @@ export const quantitySchema = z
   .number()
   .min(quantityRules.min)
   .max(quantityRules.max);
+
+export const distributionImageTypeSchema = z.string().nullable();
diff --git a/packages/manager/apps/pci-instances/src/pages/instances/create/components/DistributionImage.component.tsx b/packages/manager/apps/pci-instances/src/pages/instances/create/components/DistributionImage.component.tsx
@@ -2,6 +2,7 @@ import { FC } from 'react';
 import { Divider, Text } from '@ovhcloud/ods-react';
 import { useTranslation } from 'react-i18next';
 import { ImageHelper } from './distributionImage/ImageHelper.component';
+import DistributionImageType from './distributionImage/DistributionImageType.component';
 
 const DistributionImage: FC = () => {
   const { t } = useTranslation('creation');
@@ -15,6 +16,7 @@ const DistributionImage: FC = () => {
         </Text>
         <ImageHelper />
       </div>
+      <DistributionImageType />
     </section>
   );
 };
diff --git a/packages/manager/apps/pci-instances/src/pages/instances/create/components/distributionImage/DistributionImageType.component.tsx b/packages/manager/apps/pci-instances/src/pages/instances/create/components/distributionImage/DistributionImageType.component.tsx
@@ -0,0 +1,87 @@
+import { FC } from 'react';
+import {
+  Controller,
+  ControllerRenderProps,
+  useFormContext,
+  useWatch,
+} from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import {
+  ButtonType,
+  PageLocation,
+  useOvhTracking,
+} from '@ovh-ux/manager-react-shell-client';
+import {
+  FormField,
+  FormFieldLabel,
+  Select,
+  SelectContent,
+  SelectControl,
+  SelectValueChangeDetail,
+  Text,
+} from '@ovhcloud/ods-react';
+import { mockedDistributionImageType } from '@/__mocks__/instance/constants';
+import { TInstanceCreationForm } from '../../CreateInstance.page';
+
+const DistributionImageType: FC = () => {
+  const { t } = useTranslation('creation');
+  const { trackClick } = useOvhTracking();
+  const { control } = useFormContext<TInstanceCreationForm>();
+  const selectedImageType = useWatch({
+    control,
+    name: 'distributionImageType',
+  });
+
+  const handleImageTypeChange = (
+    field: ControllerRenderProps<
+      TInstanceCreationForm,
+      'distributionImageType'
+    >,
+  ) => ({ value }: SelectValueChangeDetail) => {
+    const imageType = value[0];
+
+    if (!imageType) return;
+    field.onChange(imageType);
+
+    trackClick({
+      location: PageLocation.funnel,
+      buttonType: ButtonType.tab,
+      actionType: 'action',
+      actions: ['add_instance', 'select_image', imageType],
+    });
+  };
+
+  return (
+    <div className="mt-4">
+      <Controller
+        name="distributionImageType"
+        control={control}
+        render={({ field }) => (
+          <FormField className="max-w-[32%]">
+            <FormFieldLabel>
+              {t(
+                'creation:pci_instance_creation_select_image_distribution_type_label',
+              )}
+            </FormFieldLabel>
+            <Select
+              items={mockedDistributionImageType}
+              value={selectedImageType ? [selectedImageType] : []}
+              onValueChange={handleImageTypeChange(field)}
+            >
+              <SelectControl />
+              <SelectContent />
+            </Select>
+          </FormField>
+        )}
+      />
+
+      <Text className="mt-4" preset="paragraph">
+        {t(
+          'creation:pci_instance_creation_select_image_distribution_type_license_information',
+        )}
+      </Text>
+    </div>
+  );
+};
+
+export default DistributionImageType;
diff --git a/packages/manager/apps/pci-instances/src/pages/instances/create/hooks/useForm.ts b/packages/manager/apps/pci-instances/src/pages/instances/create/hooks/useForm.ts
@@ -11,7 +11,10 @@ import {
   selectCategories,
   selectTypes,
 } from '../view-models/categoriesTypesViewModel';
-import { mockedFlavors } from '@/__mocks__/instance/constants';
+import {
+  mockedDistributionImageType,
+  mockedFlavors,
+} from '@/__mocks__/instance/constants';
 
 export const useForm = (projectId: string) => {
   const deploymentModesDefaultValue: TDeploymentMode[] = [
@@ -50,6 +53,9 @@ export const useForm = (projectId: string) => {
 
   const availabilityZoneDefaultValue = null;
 
+  const distributionImageTypeDefaultValue =
+    mockedDistributionImageType[0]?.value ?? null;
+
   const formMethods = useReactHookForm({
     resolver: zodResolver(instanceCreationSchema),
     values: {
@@ -63,6 +69,7 @@ export const useForm = (projectId: string) => {
       macroRegion: macroRegionDefaultValue,
       microRegion: microRegionDefaultValue,
       availabilityZone: availabilityZoneDefaultValue,
+      distributionImageType: distributionImageTypeDefaultValue,
     },
     mode: 'onChange',
   });

Original file line number	Diff line number	Diff line change
`@@ -39,5 +39,7 @@`
`39`	`39`	`"pci_instance_creation_select_image_title": "Wählen Sie ein Bild aus",`
`40`	`40`	`"pci_instance_creation_select_image_help_title": "Bilder",`
`41`	`41`	`"pci_instance_creation_select_image_help_text": "Die in diesem Schritt verfügbaren Bilder hängen von den in den vorherigen Schritten getroffenen Entscheidungen ab, d.h. von der Kompatibilität mit dem Instanzmodell und der regionalen Verfügbarkeit. Wenn Sie beispielsweise ein Windows-Betriebssystem auswählen möchten und keine Windows-Distributionen verfügbar sind, müssen Sie Ihre Auswahl in den vorherigen Schritten ändern.",`
`42`		`- "pci_instance_creation_select_image_life_cycle_help_label": "Lebenszyklus einer Distribution bei OVH"`
	`42`	`+ "pci_instance_creation_select_image_life_cycle_help_label": "Lebenszyklus einer Distribution bei OVH",`
	`43`	`+ "pci_instance_creation_select_image_distribution_type_label": "Verteilungsart",`
	`44`	`+ "pci_instance_creation_select_image_distribution_type_license_information": "Die Verwendung eines Bildes unterliegt der vorherigen Zustimmung des Lizenzvertrags des Anbieters."`
`43`	`45`	`}`
Original file line number	Diff line number	Diff line change
`@@ -60,5 +60,7 @@`
`60`	`60`	`"pci_instance_creation_select_image_title": "Sélectionnez une image",`
`61`	`61`	`"pci_instance_creation_select_image_help_title": "Images",`
`62`	`62`	`"pci_instance_creation_select_image_help_text": "Les images disponibles à cette étape dépendent des choix opérés lors des étapes précédentes, c'est-à-dire de la compatibilité avec le modèle d'instance et de la disponibilité régionale. Par exemple, si vous souhaitez sélectionner un système d'exploitation Windows et qu'il n'y a pas de distributions Windows disponibles, vous devez modifier vos choix des étapes précédentes.",`
`63`		`- "pci_instance_creation_select_image_life_cycle_help_label": "Cycle de vie d'une distribution chez OVH"`
	`63`	`+ "pci_instance_creation_select_image_life_cycle_help_label": "Cycle de vie d'une distribution chez OVH",`
	`64`	`+ "pci_instance_creation_select_image_distribution_type_label": "Type de distribution",`
	`65`	`+ "pci_instance_creation_select_image_distribution_type_license_information": "L'utilisation d'une image est soumise à l'acceptation préalable du Contrat de license utilisateur du fournisseur."`
`64`	`66`	`}`