feat(pci-instances): add image section with helper drawer

Tsiorifamonjena · ovh-cds · Tsiorifamonjena · commit 84e23a747f1c · 2025-10-30T09:54:52.000+01:00
ref: #TAPC-4614, #TAPC-4652

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/common/Messages_de_DE.json b/packages/manager/apps/pci-instances/public/translations/common/Messages_de_DE.json
@@ -24,5 +24,6 @@
   "pci_instances_common_instance_continent_oceania": "Ozeanien",
   "pci_instances_common_instance_continent_europe": "Europa",
   "pci_instances_common_instance_category": "Instanzmodell",
-  "pci_instances_common_instance_type": "Typ"
+  "pci_instances_common_instance_type": "Typ",
+  "pci_instances_common_more_info": "Mehr Informationen"
 }
diff --git a/packages/manager/apps/pci-instances/public/translations/common/Messages_en_GB.json b/packages/manager/apps/pci-instances/public/translations/common/Messages_en_GB.json
@@ -24,5 +24,6 @@
   "pci_instances_common_instance_continent_oceania": "Oceania",
   "pci_instances_common_instance_continent_europe": "Europe",
   "pci_instances_common_instance_category": "Instance model",
-  "pci_instances_common_instance_type": "Type"
+  "pci_instances_common_instance_type": "Type",
+  "pci_instances_common_more_info": "More information"
 }
diff --git a/packages/manager/apps/pci-instances/public/translations/common/Messages_es_ES.json b/packages/manager/apps/pci-instances/public/translations/common/Messages_es_ES.json
@@ -24,5 +24,6 @@
   "pci_instances_common_instance_continent_oceania": "Oceanía",
   "pci_instances_common_instance_continent_europe": "Europa",
   "pci_instances_common_instance_category": "Modelo de la instancia",
-  "pci_instances_common_instance_type": "Tipo"
+  "pci_instances_common_instance_type": "Tipo",
+  "pci_instances_common_more_info": "Más información"
 }
diff --git a/packages/manager/apps/pci-instances/public/translations/common/Messages_fr_CA.json b/packages/manager/apps/pci-instances/public/translations/common/Messages_fr_CA.json
@@ -25,5 +25,6 @@
   "pci_instances_common_instance_continent_north_africa": "Afrique du Nord",
   "pci_instances_common_instance_continent_south_east_asia": "Asie du Sud Est",
   "pci_instances_common_instance_continent_oceania": "Océanie",
-  "pci_instances_common_instance_continent_all": "Tous"
+  "pci_instances_common_instance_continent_all": "Tous",
+  "pci_instances_common_more_info": "Plus d'informations"
 }
diff --git a/packages/manager/apps/pci-instances/public/translations/common/Messages_fr_FR.json b/packages/manager/apps/pci-instances/public/translations/common/Messages_fr_FR.json
@@ -25,5 +25,6 @@
   "pci_instances_common_instance_continent_north_africa": "Afrique du Nord",
   "pci_instances_common_instance_continent_south_east_asia": "Asie du Sud Est",
   "pci_instances_common_instance_continent_oceania": "Océanie",
-  "pci_instances_common_instance_continent_all": "Tous"
+  "pci_instances_common_instance_continent_all": "Tous",
+  "pci_instances_common_more_info": "Plus d'informations"
 }
diff --git a/packages/manager/apps/pci-instances/public/translations/common/Messages_it_IT.json b/packages/manager/apps/pci-instances/public/translations/common/Messages_it_IT.json
@@ -24,5 +24,6 @@
   "pci_instances_common_instance_continent_oceania": "Oceania",
   "pci_instances_common_instance_continent_europe": "Europa",
   "pci_instances_common_instance_category": "Modello dell'istanza",
-  "pci_instances_common_instance_type": "Tipo"
+  "pci_instances_common_instance_type": "Tipo",
+  "pci_instances_common_more_info": "Maggiori informazioni"
 }
diff --git a/packages/manager/apps/pci-instances/public/translations/common/Messages_pl_PL.json b/packages/manager/apps/pci-instances/public/translations/common/Messages_pl_PL.json
@@ -24,5 +24,6 @@
   "pci_instances_common_instance_continent_oceania": "Oceania",
   "pci_instances_common_instance_continent_europe": "Europa",
   "pci_instances_common_instance_category": "Model instancji",
-  "pci_instances_common_instance_type": "Rodzaj"
+  "pci_instances_common_instance_type": "Rodzaj",
+  "pci_instances_common_more_info": "Więcej informacji"
 }
diff --git a/packages/manager/apps/pci-instances/public/translations/common/Messages_pt_PT.json b/packages/manager/apps/pci-instances/public/translations/common/Messages_pt_PT.json
@@ -24,5 +24,6 @@
   "pci_instances_common_instance_continent_oceania": "Oceânia",
   "pci_instances_common_instance_continent_europe": "Europa",
   "pci_instances_common_instance_category": "Modelo da instância",
-  "pci_instances_common_instance_type": "Tipo"
+  "pci_instances_common_instance_type": "Tipo",
+  "pci_instances_common_more_info": "Mais informações"
 }
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
@@ -35,5 +35,9 @@
   "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"
+  "pci_instance_creation_select_new_region": "Wählen Sie eine Region aus",
+  "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"
 }
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
@@ -35,5 +35,9 @@
   "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"
+  "pci_instance_creation_select_new_region": "Choose a region",
+  "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"
 }
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
@@ -35,5 +35,9 @@
   "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"
+  "pci_instance_creation_select_new_region": "Seleccione una región",
+  "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"
 }
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
@@ -56,5 +56,9 @@
   "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"
+  "pci_instance_creation_select_new_region": "Choisissez une région",
+  "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"
 }
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
@@ -56,5 +56,9 @@
   "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"
+  "pci_instance_creation_select_new_region": "Choisissez une région",
+  "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"
 }
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
@@ -35,5 +35,9 @@
   "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"
+  "pci_instance_creation_select_new_region": "Seleziona una regione",
+  "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"
 }
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
@@ -35,5 +35,9 @@
   "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"
+  "pci_instance_creation_select_new_region": "Wybierz region",
+  "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"
 }
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
@@ -35,5 +35,9 @@
   "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"
+  "pci_instance_creation_select_new_region": "Escolha uma região",
+  "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"
 }
diff --git a/packages/manager/apps/pci-instances/src/hooks/url/useGuideLink.constant.ts b/packages/manager/apps/pci-instances/src/hooks/url/useGuideLink.constant.ts
@@ -2,29 +2,40 @@ import { Subsidiary } from '@ovh-ux/manager-config';
 
 const HELP_ROOT = 'https://www.ovhcloud.com';
 
+const HELP_URL = 'https://help.ovhcloud.com/csm';
+
 type TGuideLinkGroup = {
   DEFAULT: string;
 } & {
   [key in Subsidiary]?: string;
 };
 
-type TGuideKey = 'LOCATION' | 'FLAVOR' | 'AVAILABILITY_ZONES';
+export type TGuideKey =
+  | 'LOCATION'
+  | 'FLAVOR'
+  | 'AVAILABILITY_ZONES'
+  | 'DISTRIBUTION_IMAGE'
+  | 'DISTRIBUTION_IMAGE_LIFE_CYCLE';
 
 export const GUIDE_LINKS: Record<TGuideKey, TGuideLinkGroup> = {
   LOCATION: {
-    DEFAULT:
-      'https://help.ovhcloud.com/csm/fr-public-cloud-deployments-modes?id=kb_article_view&sysparm_article=KB0066031',
-    FR:
-      'https://help.ovhcloud.com/csm/fr-public-cloud-deployments-modes?id=kb_article_view&sysparm_article=KB0066031',
+    DEFAULT: `${HELP_URL}/fr-public-cloud-deployments-modes?id=kb_article_view&sysparm_article=KB0066031`,
+    FR: `${HELP_URL}/fr-public-cloud-deployments-modes?id=kb_article_view&sysparm_article=KB0066031`,
   },
   AVAILABILITY_ZONES: {
-    DEFAULT:
-      ' https://help.ovhcloud.com/csm/fr-public-cloud-deployments-modes?id=kb_article_view&sysparm_article=KB0066031',
-    FR:
-      ' https://help.ovhcloud.com/csm/fr-public-cloud-deployments-modes?id=kb_article_view&sysparm_article=KB0066031',
+    DEFAULT: `${HELP_URL}/fr-public-cloud-deployments-modes?id=kb_article_view&sysparm_article=KB0066031`,
+    FR: `${HELP_URL}/fr-public-cloud-deployments-modes?id=kb_article_view&sysparm_article=KB0066031`,
   },
   FLAVOR: {
     DEFAULT: `${HELP_ROOT}/fr/public-cloud/virtual-instances/`,
     FR: `${HELP_ROOT}/fr/public-cloud/virtual-instances/`,
   },
+  DISTRIBUTION_IMAGE: {
+    DEFAULT: `${HELP_URL}/fr-public-cloud-compute-getting-started?id=kb_article_view&sysparm_article=KB0051011`,
+    FR: `${HELP_URL}/fr-public-cloud-compute-getting-started?id=kb_article_view&sysparm_article=KB0051011`,
+  },
+  DISTRIBUTION_IMAGE_LIFE_CYCLE: {
+    DEFAULT: `${HELP_URL}/fr-public-cloud-compute-vps-image-life-cycle?id=kb_article_view&sysparm_article=KB0050802`,
+    FR: `${HELP_URL}/fr-public-cloud-compute-vps-image-life-cycle?id=kb_article_view&sysparm_article=KB0050802`,
+  },
 };
diff --git a/packages/manager/apps/pci-instances/src/hooks/url/useGuideLink.spec.tsx b/packages/manager/apps/pci-instances/src/hooks/url/useGuideLink.spec.tsx
@@ -0,0 +1,79 @@
+import { createContext } from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { renderHook, waitFor } from '@testing-library/react';
+import { useGuideLink } from './useGuideLink';
+import { GUIDE_LINKS, TGuideKey } from './useGuideLink.constant';
+
+const mockGetOvhSubsidiary = vi.hoisted(() => vi.fn());
+
+vi.mock('@ovh-ux/manager-react-shell-client', () => ({
+  ShellContext: createContext({
+    environment: {
+      getUser: mockGetOvhSubsidiary,
+    },
+  }),
+}));
+
+describe('useGuideLink', () => {
+  const testCasesSingleKey = [
+    {
+      ovhSubsidiary: 'FR',
+      key: 'FLAVOR' as TGuideKey,
+      expected: GUIDE_LINKS.FLAVOR.FR,
+      description: 'returns guide link for valid subsidiary',
+    },
+    {
+      ovhSubsidiary: 'fakeSubsidiary',
+      key: 'FLAVOR' as TGuideKey,
+      expected: GUIDE_LINKS.FLAVOR.DEFAULT,
+      description: 'returns default guide link for unknown subsidiary',
+    },
+  ];
+
+  it.each(testCasesSingleKey)(
+    'should $description',
+    async ({ ovhSubsidiary, key, expected }) => {
+      mockGetOvhSubsidiary.mockReturnValue({ ovhSubsidiary });
+
+      const { result } = renderHook(() => useGuideLink(key));
+
+      await waitFor(() => {
+        expect(result.current).toStrictEqual(expected);
+      });
+    },
+  );
+
+  const testCasesMultipleKey = [
+    {
+      ovhSubsidiary: 'FR',
+      key: ['FLAVOR', 'DISTRIBUTION_IMAGE'] as TGuideKey[],
+      expected: {
+        FLAVOR: GUIDE_LINKS.FLAVOR.FR,
+        DISTRIBUTION_IMAGE: GUIDE_LINKS.DISTRIBUTION_IMAGE.FR,
+      },
+      description: 'returns guide links for valid subsidiary',
+    },
+    {
+      ovhSubsidiary: 'fakeSubsidiary',
+      key: ['FLAVOR', 'DISTRIBUTION_IMAGE'] as TGuideKey[],
+      expected: {
+        FLAVOR: GUIDE_LINKS.FLAVOR.DEFAULT,
+        DISTRIBUTION_IMAGE: GUIDE_LINKS.DISTRIBUTION_IMAGE.DEFAULT,
+      },
+      description: 'returns default guide links for unknown subsidiary',
+    },
+  ];
+
+  it.each(testCasesMultipleKey)(
+    'should $description',
+    async ({ ovhSubsidiary, key, expected }) => {
+      mockGetOvhSubsidiary.mockReturnValue({ ovhSubsidiary });
+
+      const { result } = renderHook(() => useGuideLink(key));
+
+      await waitFor(() => {
+        expect(result.current).toStrictEqual(expected);
+      });
+    },
+  );
+});
diff --git a/packages/manager/apps/pci-instances/src/hooks/url/useGuideLink.ts b/packages/manager/apps/pci-instances/src/hooks/url/useGuideLink.ts
@@ -1,10 +1,23 @@
 import { ShellContext } from '@ovh-ux/manager-react-shell-client';
 import { useContext } from 'react';
-import { GUIDE_LINKS } from './useGuideLink.constant';
+import { GUIDE_LINKS, TGuideKey } from './useGuideLink.constant';
+import { Subsidiary } from '@ovh-ux/manager-config';
 
-export const useGuideLink = (name: keyof typeof GUIDE_LINKS) => {
+const getGuideLink = (key: TGuideKey, ovhSubsidiary: Subsidiary) =>
+  GUIDE_LINKS[key][ovhSubsidiary] ?? GUIDE_LINKS[key].DEFAULT;
+
+export function useGuideLink(key: TGuideKey): string;
+export function useGuideLink(keys: TGuideKey[]): Record<TGuideKey, string>;
+export function useGuideLink(keys: TGuideKey | TGuideKey[]) {
   const { ovhSubsidiary } = useContext(ShellContext).environment.getUser();
-  const guideLink = GUIDE_LINKS[name];
 
-  return guideLink[ovhSubsidiary] ?? guideLink.DEFAULT;
-};
+  return Array.isArray(keys)
+    ? keys.reduce(
+        (prev, currentKey) => ({
+          ...prev,
+          [currentKey]: getGuideLink(currentKey, ovhSubsidiary),
+        }),
+        {} as Record<TGuideKey, string>,
+      )
+    : getGuideLink(keys, ovhSubsidiary);
+}
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
@@ -0,0 +1,22 @@
+import { FC } from 'react';
+import { Divider, Text } from '@ovhcloud/ods-react';
+import { useTranslation } from 'react-i18next';
+import { ImageHelper } from './distributionImage/ImageHelper.component';
+
+const DistributionImage: FC = () => {
+  const { t } = useTranslation('creation');
+
+  return (
+    <section>
+      <Divider spacing="64" />
+      <div className="flex items-center space-x-4">
+        <Text preset="heading-3">
+          {t('pci_instance_creation_select_image_title')}
+        </Text>
+        <ImageHelper />
+      </div>
+    </section>
+  );
+};
+
+export default DistributionImage;
diff --git a/packages/manager/apps/pci-instances/src/pages/instances/create/components/createInstanceForm/CreateInstanceForm.component.tsx b/packages/manager/apps/pci-instances/src/pages/instances/create/components/createInstanceForm/CreateInstanceForm.component.tsx
@@ -17,6 +17,7 @@ import { useTranslation } from 'react-i18next';
 import { selectAvailabilityZones } from '../../view-models/availabilityZonesViewModel';
 import { AvailabilityZoneSelection } from '../availabilityZoneSelection/AvailabilityZoneSelection.component';
 import { LocalizationSelection } from '../localisationSelection/LocalizationSelection.component';
+import DistributionImage from '../DistributionImage.component';
 
 const quantityHintParams = {
   quota: 1,
@@ -70,6 +71,7 @@ export const CreateInstanceForm = () => {
           )}
           <Divider spacing="64" />
           <FlavorBlock />
+          <DistributionImage />
           <AdvancedParameters />
           <PciCardShowcaseComponent />
         </section>
diff --git a/packages/manager/apps/pci-instances/src/pages/instances/create/components/distributionImage/ImageHelper.component.tsx b/packages/manager/apps/pci-instances/src/pages/instances/create/components/distributionImage/ImageHelper.component.tsx

Original file line number	Diff line number	Diff line change
`@@ -24,5 +24,6 @@`
`24`	`24`	`"pci_instances_common_instance_continent_oceania": "Ozeanien",`
`25`	`25`	`"pci_instances_common_instance_continent_europe": "Europa",`
`26`	`26`	`"pci_instances_common_instance_category": "Instanzmodell",`
`27`		`- "pci_instances_common_instance_type": "Typ"`
	`27`	`+ "pci_instances_common_instance_type": "Typ",`
	`28`	`+ "pci_instances_common_more_info": "Mehr Informationen"`
`28`	`29`	`}`
Original file line number	Diff line number	Diff line change
`@@ -25,5 +25,6 @@`
`25`	`25`	`"pci_instances_common_instance_continent_north_africa": "Afrique du Nord",`
`26`	`26`	`"pci_instances_common_instance_continent_south_east_asia": "Asie du Sud Est",`
`27`	`27`	`"pci_instances_common_instance_continent_oceania": "Océanie",`
`28`		`- "pci_instances_common_instance_continent_all": "Tous"`
	`28`	`+ "pci_instances_common_instance_continent_all": "Tous",`
	`29`	`+ "pci_instances_common_more_info": "Plus d'informations"`
`29`	`30`	`}`