feat(pci-instances): add network block

Tsiorifamonjena · ovh-cds · Tsiorifamonjena · commit 32e521d11579 · 2025-11-21T17:12:21.000+01:00
ref: #TAPC-5315, #TAPC-5316, #TAPC-5318

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
@@ -11,7 +11,7 @@
   "pci_instances_common_search": "Suchen",
   "pci_instances_common_instance_title": "Instanz",
   "pci_instances_common_instance_name": "Instanzname",
-  "pci_instances_common_help": "Hilfe",
+  "pci_instances_common_help": "Hilfen",
   "pci_instances_common_instance_localzone_deployment_mode": "Local Zone",
   "pci_instances_common_instance_region_deployment_mode": "1-AZ Region",
   "pci_instances_common_instance_region-3-az_deployment_mode": "3-AZ Region",
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
@@ -11,7 +11,7 @@
   "pci_instances_common_search": "Search",
   "pci_instances_common_instance_title": "Instance",
   "pci_instances_common_instance_name": "Instance name",
-  "pci_instances_common_help": "Help",
+  "pci_instances_common_help": "Support",
   "pci_instances_common_instance_localzone_deployment_mode": "Local Zone",
   "pci_instances_common_instance_region_deployment_mode": "1-AZ Region",
   "pci_instances_common_instance_region-3-az_deployment_mode": " 3-AZ Region",
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
@@ -11,7 +11,7 @@
   "pci_instances_common_search": "Buscar",
   "pci_instances_common_instance_title": "Instancia",
   "pci_instances_common_instance_name": "Nombre de instancia",
-  "pci_instances_common_help": "Ayuda",
+  "pci_instances_common_help": "Ayudas",
   "pci_instances_common_instance_localzone_deployment_mode": "Local Zone",
   "pci_instances_common_instance_region_deployment_mode": "Región 1-AZ",
   "pci_instances_common_instance_region-3-az_deployment_mode": "Región 3-AZ",
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
@@ -13,7 +13,7 @@
   "pci_instances_common_instance_name": "Nom d'instance",
   "pci_instances_common_instance_category": "Modèle de l'instance",
   "pci_instances_common_instance_type": "Type",
-  "pci_instances_common_help": "Aide",
+  "pci_instances_common_help": "Aides",
   "pci_instances_common_instance_region_deployment_mode": "Région 1-AZ",
   "pci_instances_common_instance_region-3-az_deployment_mode": "Région 3-AZ",
   "pci_instances_common_instance_localzone_deployment_mode": "Local Zone",
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
@@ -13,7 +13,7 @@
   "pci_instances_common_instance_name": "Nom d'instance",
   "pci_instances_common_instance_category": "Modèle de l'instance",
   "pci_instances_common_instance_type": "Type",
-  "pci_instances_common_help": "Aide",
+  "pci_instances_common_help": "Aides",
   "pci_instances_common_instance_region_deployment_mode": "Région 1-AZ",
   "pci_instances_common_instance_region-3-az_deployment_mode": "Région 3-AZ",
   "pci_instances_common_instance_localzone_deployment_mode": "Local Zone",
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
@@ -11,7 +11,7 @@
   "pci_instances_common_search": "Cercare",
   "pci_instances_common_instance_title": "Istanza",
   "pci_instances_common_instance_name": "Nome dell'istanza",
-  "pci_instances_common_help": "Aiuto",
+  "pci_instances_common_help": "Aiuti",
   "pci_instances_common_instance_localzone_deployment_mode": "Local Zone",
   "pci_instances_common_instance_region_deployment_mode": "Region 1-AZ",
   "pci_instances_common_instance_region-3-az_deployment_mode": "Region 3-AZ",
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
@@ -11,7 +11,7 @@
   "pci_instances_common_search": "Procurar",
   "pci_instances_common_instance_title": "Instância",
   "pci_instances_common_instance_name": "Nome da instância",
-  "pci_instances_common_help": "Ajuda",
+  "pci_instances_common_help": "Ajudas",
   "pci_instances_common_instance_localzone_deployment_mode": "Local Zone",
   "pci_instances_common_instance_region_deployment_mode": "Região 1-AZ",
   "pci_instances_common_instance_region-3-az_deployment_mode": "Região 3-AZ",
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
@@ -92,5 +92,9 @@
   "pci_instance_creation_select_sshKey_add_key_done": "Ihr SSH-Schlüssel wird am Ende des Konfigurationsprozesses erstellt.",
   "pci_instance_creation_select_sshKey_add_name_unavailable_error": "Bitte wählen Sie einen anderen Namen, dieser ist bereits vergeben.",
   "pci_instance_creation_select_image_distribution_version_label": "Bildversion",
-  "pci_instance_creation_select_image_distribution_version_unavailable": "Version nicht verfügbar"
+  "pci_instance_creation_select_image_distribution_version_unavailable": "Version nicht verfügbar",
+  "pci_instance_creation_network_setting_title": "Netzwerkparameter",
+  "pci_instance_creation_network_private_network_setting_title": "Privates Netzwerk",
+  "pci_instance_creation_network_private_network_setting_description": "Die Instanzen sind in einem privaten Netzwerk. Ein Internet- oder SSH-Zugriff erfordert eine Floating IP, ein Gateway oder einen SSH-Proxy.",
+  "pci_instance_creation_network_setting_help_title": "Verständnis der Netzwerkparameter"
 }
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
@@ -92,5 +92,9 @@
   "pci_instance_creation_select_sshKey_add_key_done": "Your SSH key will be created at the end of the setup process.",
   "pci_instance_creation_select_sshKey_add_name_unavailable_error": "Thank you for choosing a different name, this one is already in use.",
   "pci_instance_creation_select_image_distribution_version_label": "Image version",
-  "pci_instance_creation_select_image_distribution_version_unavailable": "Version unavailable"
+  "pci_instance_creation_select_image_distribution_version_unavailable": "Version unavailable",
+  "pci_instance_creation_network_setting_title": "Network settings",
+  "pci_instance_creation_network_private_network_setting_title": "Private Network",
+  "pci_instance_creation_network_private_network_setting_description": "The authorities are part of a private network. Internet or SSH access requires a Floating IP, a Gateway or an SSH Proxy.",
+  "pci_instance_creation_network_setting_help_title": "Understanding network settings"
 }
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
@@ -92,5 +92,9 @@
   "pci_instance_creation_select_sshKey_add_key_done": "Su clave SSH se creará al final del proceso de configuración.",
   "pci_instance_creation_select_sshKey_add_name_unavailable_error": "Gracias por elegir un nombre diferente, este ya está en uso.",
   "pci_instance_creation_select_image_distribution_version_label": "Versión de la imagen",
-  "pci_instance_creation_select_image_distribution_version_unavailable": "Versión no disponible"
+  "pci_instance_creation_select_image_distribution_version_unavailable": "Versión no disponible",
+  "pci_instance_creation_network_setting_title": "Configuración de redes",
+  "pci_instance_creation_network_private_network_setting_title": "Red Privada",
+  "pci_instance_creation_network_private_network_setting_description": "Las instancias están en red privada. Un acceso a Internet o SSH requiere una IP flotante, una puerta de enlace o un proxy SSH.",
+  "pci_instance_creation_network_setting_help_title": "Entender la configuración de redes"
 }
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
@@ -92,5 +92,9 @@
   "pci_instance_creation_select_sshKey_add_key_done": "Votre clé SSH sera créée à la fin du processus de configuration.",
   "pci_instance_creation_select_sshKey_add_name_unavailable_error": "Merci de choisir un nom différent, celui-ci est déjà utilisé",
   "pci_instance_creation_select_image_distribution_version_label": "Version de l'image",
-  "pci_instance_creation_select_image_distribution_version_unavailable": "Version indisponible"
+  "pci_instance_creation_select_image_distribution_version_unavailable": "Version indisponible",
+  "pci_instance_creation_network_setting_title": "Paramètres de réseaux",
+  "pci_instance_creation_network_private_network_setting_title": "Réseau Privé",
+  "pci_instance_creation_network_private_network_setting_description": "Les instances sont en réseau privé. Un accès Internet ou SSH nécessite une Floating IP, une Gateway ou un SSH-Proxy.",
+  "pci_instance_creation_network_setting_help_title": "Comprendre les paramètres réseaux"
 }
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
@@ -92,5 +92,9 @@
   "pci_instance_creation_select_sshKey_add_key_done": "Votre clé SSH sera créée à la fin du processus de configuration.",
   "pci_instance_creation_select_sshKey_add_name_unavailable_error": "Merci de choisir un nom différent, celui-ci est déjà utilisé",
   "pci_instance_creation_select_image_distribution_version_label": "Version de l'image",
-  "pci_instance_creation_select_image_distribution_version_unavailable": "Version indisponible"
+  "pci_instance_creation_select_image_distribution_version_unavailable": "Version indisponible",
+  "pci_instance_creation_network_setting_title": "Paramètres de réseaux",
+  "pci_instance_creation_network_private_network_setting_title": "Réseau Privé",
+  "pci_instance_creation_network_private_network_setting_description": "Les instances sont en réseau privé. Un accès Internet ou SSH nécessite une Floating IP, une Gateway ou un SSH-Proxy.",
+  "pci_instance_creation_network_setting_help_title": "Comprendre les paramètres réseaux"
 }
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
@@ -92,5 +92,9 @@
   "pci_instance_creation_select_sshKey_add_key_done": "La tua chiave SSH verrà creata al termine del processo di configurazione.",
   "pci_instance_creation_select_sshKey_add_name_unavailable_error": "Grazie per aver scelto un nome diverso, questo è già in uso.",
   "pci_instance_creation_select_image_distribution_version_label": "Versione dell'immagine",
-  "pci_instance_creation_select_image_distribution_version_unavailable": "Versione non disponibile"
+  "pci_instance_creation_select_image_distribution_version_unavailable": "Versione non disponibile",
+  "pci_instance_creation_network_setting_title": "Impostazioni di rete",
+  "pci_instance_creation_network_private_network_setting_title": "Rete privata",
+  "pci_instance_creation_network_private_network_setting_description": "Le istanze sono collegate in rete privata. Per l'accesso a Internet o SSH è necessario un Floating IP, un Gateway o un SSH-Proxy.",
+  "pci_instance_creation_network_setting_help_title": "Comprendere i parametri di rete"
 }
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
@@ -92,5 +92,9 @@
   "pci_instance_creation_select_sshKey_add_key_done": "Twój klucz SSH zostanie utworzony na końcu procesu konfiguracji.",
   "pci_instance_creation_select_sshKey_add_name_unavailable_error": "Dziękujemy za wybranie innej nazwy, ta jest już używana.",
   "pci_instance_creation_select_image_distribution_version_label": "Wersja obrazu",
-  "pci_instance_creation_select_image_distribution_version_unavailable": "Wersja niedostępna"
+  "pci_instance_creation_select_image_distribution_version_unavailable": "Wersja niedostępna",
+  "pci_instance_creation_network_setting_title": "Parametry sieciowe",
+  "pci_instance_creation_network_private_network_setting_title": "Sieć prywatna",
+  "pci_instance_creation_network_private_network_setting_description": "Instancje są połączone w sieć prywatną. Dostęp do Internetu lub SSH wymaga adresu Floating IP, bramy lub serwera proxy SSH.",
+  "pci_instance_creation_network_setting_help_title": "Zrozumienie parametrów sieciowych"
 }
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
@@ -92,5 +92,9 @@
   "pci_instance_creation_select_sshKey_add_key_done": "A sua chave SSH será criada no final do processo de configuração.",
   "pci_instance_creation_select_sshKey_add_name_unavailable_error": "Obrigado por escolher um nome diferente, este já está em uso.",
   "pci_instance_creation_select_image_distribution_version_label": "Versão da imagem",
-  "pci_instance_creation_select_image_distribution_version_unavailable": "Versão indisponível"
+  "pci_instance_creation_select_image_distribution_version_unavailable": "Versão indisponível",
+  "pci_instance_creation_network_setting_title": "Parâmetros de redes",
+  "pci_instance_creation_network_private_network_setting_title": "Rede Privada",
+  "pci_instance_creation_network_private_network_setting_description": "As instâncias estão em rede privada. O acesso à Internet ou SSH requer uma IP Flutuante, um Gateway ou um SSH-Proxy.",
+  "pci_instance_creation_network_setting_help_title": "Compreender os parâmetros de rede"
 }
diff --git a/packages/manager/apps/pci-instances/src/components/helpDrawer/HelpDrawer.component.tsx b/packages/manager/apps/pci-instances/src/components/helpDrawer/HelpDrawer.component.tsx
@@ -14,13 +14,13 @@ import { PropsWithChildren } from 'react';
 type HelperDrawerProps = PropsWithChildren<DrawerProp> &
   React.HTMLAttributes<HTMLDivElement>;
 
-export const HelpDrawer = ({ children }: HelperDrawerProps) => {
+export const HelpDrawer = ({ children, onOpenChange }: HelperDrawerProps) => {
   const { t } = useTranslation([NAMESPACES.ONBOARDING, 'common']);
 
   return (
     <>
       <div className="w-px bg-[var(--ods-color-information-800)] h-[25px]" />
-      <Drawer closeOnEscape closeOnInteractOutside>
+      <Drawer closeOnEscape closeOnInteractOutside onOpenChange={onOpenChange}>
         <DrawerTrigger asChild>
           <Button variant="ghost" size="sm">
             {t('common:pci_instances_common_help')}
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
@@ -16,7 +16,8 @@ export type TGuideKey =
   | 'AVAILABILITY_ZONES'
   | 'DISTRIBUTION_IMAGE'
   | 'DISTRIBUTION_IMAGE_LIFE_CYCLE'
-  | 'SSH_KEY';
+  | 'SSH_KEY'
+  | 'NETWORK';
 
 export const GUIDE_LINKS: Record<TGuideKey, TGuideLinkGroup> = {
   LOCATION: {
@@ -43,4 +44,8 @@ export const GUIDE_LINKS: Record<TGuideKey, TGuideLinkGroup> = {
     DEFAULT: `${HELP_URL}/fr-public-cloud-compute-creating-ssh-keys?id=kb_article_view&sysparm_article=KB0064541`,
     FR: `${HELP_URL}/fr-public-cloud-compute-creating-ssh-keys?id=kb_article_view&sysparm_article=KB0064541`,
   },
+  NETWORK: {
+    DEFAULT: `${HELP_URL}/fr-public-cloud-network-vrack?id=kb_article_view&sysparm_article=KB0050279`,
+    FR: `${HELP_URL}/fr-public-cloud-network-vrack?id=kb_article_view&sysparm_article=KB0050279`,
+  },
 };
diff --git a/packages/manager/apps/pci-instances/src/pages/instances/create/components/Network.component.tsx b/packages/manager/apps/pci-instances/src/pages/instances/create/components/Network.component.tsx
@@ -0,0 +1,31 @@
+import { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Text } from '@ovhcloud/ods-react';
+import NetworkHelper from './network/NetworkHelper.component';
+
+const Network: FC = () => {
+  const { t } = useTranslation('creation');
+
+  return (
+    <section>
+      <div className="flex items-center space-x-4">
+        <Text preset="heading-3">
+          {t('creation:pci_instance_creation_network_setting_title')}
+        </Text>
+        <NetworkHelper />
+      </div>
+      <Text preset="heading-4" className="mt-4">
+        {t(
+          'creation:pci_instance_creation_network_private_network_setting_title',
+        )}
+      </Text>
+      <Text className="mt-4" preset="paragraph">
+        {t(
+          'creation:pci_instance_creation_network_private_network_setting_description',
+        )}
+      </Text>
+    </section>
+  );
+};
+
+export default Network;
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
@@ -19,6 +19,7 @@ import { AvailabilityZoneSelection } from '../availabilityZoneSelection/Availabi
 import { LocalizationSelection } from '../localisationSelection/LocalizationSelection.component';
 import DistributionImage from '../DistributionImage.component';
 import SshKey from '../SshKey.component';
+import Network from '../Network.component';
 
 const quantityHintParams = {
   quota: 1,
@@ -78,6 +79,8 @@ export const CreateInstanceForm = () => {
           {microRegion && osType !== 'windows' && (
             <SshKey microRegion={microRegion} />
           )}
+          <Divider spacing="64" />
+          <Network />
           <AdvancedParameters />
           <PciCardShowcaseComponent />
         </section>
diff --git a/packages/manager/apps/pci-instances/src/pages/instances/create/components/network/NetworkHelper.component.tsx b/packages/manager/apps/pci-instances/src/pages/instances/create/components/network/NetworkHelper.component.tsx
@@ -0,0 +1,58 @@
+import { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { HelpDrawer } from '@/components/helpDrawer/HelpDrawer.component';
+import { NAMESPACES } from '@ovh-ux/manager-common-translations';
+import {
+  ButtonType,
+  PageLocation,
+  useOvhTracking,
+} from '@ovh-ux/manager-react-shell-client';
+import { DrawerOpenChangeDetail, Link, Text } from '@ovhcloud/ods-react';
+import { useGuideLink } from '@/hooks/url/useGuideLink';
+
+const NetworkHelper: FC = () => {
+  const { t } = useTranslation(['creation', 'common']);
+  const { trackClick } = useOvhTracking();
+  const guide = useGuideLink('NETWORK');
+
+  const handleOpenGuideLink = () =>
+    trackClick({
+      location: PageLocation.funnel,
+      buttonType: ButtonType.externalLink,
+      actionType: 'action',
+      actions: ['add_instance', 'go-to-see-documentation_network'],
+    });
+
+  const handleOpenHelper = ({ open }: DrawerOpenChangeDetail) => {
+    if (open) {
+      trackClick({
+        location: PageLocation.popup,
+        actionType: 'action',
+        actions: ['add_instance', 'see-helper_network'],
+      });
+    }
+  };
+
+  return (
+    <HelpDrawer onOpenChange={handleOpenHelper}>
+      <Text preset="heading-2">
+        {t('creation:pci_instance_creation_network_setting_help_title')}
+      </Text>
+      <Text preset="paragraph" className="py-4">
+        Lorem ipsum dolor sit amet consectetur. Vel orci tincidunt leo porttitor
+        sagittis facilisis tincidunt non. Pellentesque auctor lectus ligula
+        consequat.
+      </Text>
+      <Link
+        className="visited:text-[var(--ods-color-primary-500)]"
+        href={guide}
+        onClick={handleOpenGuideLink}
+        target="_blank"
+      >
+        {t(`${NAMESPACES.ONBOARDING}:find_out_more`)}
+      </Link>
+    </HelpDrawer>
+  );
+};
+
+export default NetworkHelper;
