feat(pci-instances): add network block

Tsiorifamonjena · ovh-cds · Tsiorifamonjena · commit 5234d70d3c30 · 2025-12-04T11:23:06.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
@@ -94,5 +94,9 @@
   "pci_instance_creation_select_image_distribution_version_label": "Bildversion",
   "pci_instance_creation_select_image_distribution_version_unavailable": "Version nicht verfügbar",
   "pci_instance_creation_windows_image_hourly_price": "+ {{ price }} inkl. MwSt./vCore/Stunde",
-  "pci_instance_creation_image_available_on_other_models": "Dieses Bild ist in anderen Modellen verfügbar."
+  "pci_instance_creation_image_available_on_other_models": "Dieses Bild ist in anderen Modellen 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
@@ -94,5 +94,9 @@
   "pci_instance_creation_select_image_distribution_version_label": "Image version",
   "pci_instance_creation_select_image_distribution_version_unavailable": "Version unavailable",
   "pci_instance_creation_windows_image_hourly_price": "+ {{ price }} ex VAT/vCore/hour",
-  "pci_instance_creation_image_available_on_other_models": "This image is available on other models."
+  "pci_instance_creation_image_available_on_other_models": "This image is available on other models.",
+  "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
@@ -94,5 +94,9 @@
   "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_windows_image_hourly_price": "+ {{ price }} /hora + IVA por vCore",
-  "pci_instance_creation_image_available_on_other_models": "Esta imagen está disponible en otros modelos."
+  "pci_instance_creation_image_available_on_other_models": "Esta imagen está disponible en otros modelos.",
+  "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
@@ -94,5 +94,9 @@
   "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_windows_image_hourly_price": "+ {{ price }} HT/vCore/heure",
-  "pci_instance_creation_image_available_on_other_models": "Cette image est disponible sur d'autres modèles."
+  "pci_instance_creation_image_available_on_other_models": "Cette image est disponible sur d'autres modèles.",
+  "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
@@ -94,5 +94,9 @@
   "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_windows_image_hourly_price": "+ {{ price }} HT/vCore/heure",
-  "pci_instance_creation_image_available_on_other_models": "Cette image est disponible sur d'autres modèles."
+  "pci_instance_creation_image_available_on_other_models": "Cette image est disponible sur d'autres modèles.",
+  "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
@@ -94,5 +94,9 @@
   "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_windows_image_hourly_price": "+ {{ price }} +IVA/vCore/ora",
-  "pci_instance_creation_image_available_on_other_models": "Questa immagine è disponibile su altri modelli."
+  "pci_instance_creation_image_available_on_other_models": "Questa immagine è disponibile su altri modelli.",
+  "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
@@ -94,5 +94,9 @@
   "pci_instance_creation_select_image_distribution_version_label": "Wersja obrazu",
   "pci_instance_creation_select_image_distribution_version_unavailable": "Wersja niedostępna",
   "pci_instance_creation_windows_image_hourly_price": "+ {{ price }} netto/vCore/godz.",
-  "pci_instance_creation_image_available_on_other_models": "Ten obraz jest dostępny w innych modelach."
+  "pci_instance_creation_image_available_on_other_models": "Ten obraz jest dostępny w innych modelach.",
+  "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
@@ -94,5 +94,9 @@
   "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_windows_image_hourly_price": "+ {{ price }} /hora + IVA por vCore",
-  "pci_instance_creation_image_available_on_other_models": "Esta imagem está disponível em outros modelos."
+  "pci_instance_creation_image_available_on_other_models": "Esta imagem está disponível em outros modelos.",
+  "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/__tests__/wrapperRenders.tsx b/packages/manager/apps/pci-instances/src/__tests__/wrapperRenders.tsx
@@ -1,11 +1,29 @@
-import { FC, PropsWithChildren } from 'react';
+import { PropsWithChildren, ReactElement } from 'react';
+import { render, RenderOptions } from '@testing-library/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { MemoryRouter } from 'react-router-dom';
+import {
+  ShellContext,
+  ShellContextType,
+} from '@ovh-ux/manager-react-shell-client';
 
-export const QueryClientWrapper: FC<PropsWithChildren> = ({ children }) => (
-  <MemoryRouter>
-    <QueryClientProvider client={new QueryClient()}>
-      {children}
-    </QueryClientProvider>
-  </MemoryRouter>
+const shellContext = {
+  environment: {
+    getUser: vi.fn().mockReturnValue({ ovhSubsidiary: 'FR' }),
+  },
+};
+
+export const AppTestWrapper = ({ children }: PropsWithChildren) => (
+  <ShellContext.Provider value={(shellContext as unknown) as ShellContextType}>
+    <MemoryRouter>
+      <QueryClientProvider client={new QueryClient()}>
+        {children}
+      </QueryClientProvider>
+    </MemoryRouter>
+  </ShellContext.Provider>
 );
+
+export const renderWithMockedWrappers = (
+  ui: ReactElement,
+  options?: Omit<RenderOptions, 'wrapper'>,
+) => render(ui, { wrapper: AppTestWrapper, ...options });
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/__test__/NetworkHelper.component.spec.tsx b/packages/manager/apps/pci-instances/src/pages/instances/create/components/__test__/NetworkHelper.component.spec.tsx
@@ -0,0 +1,66 @@
+import { describe, expect, it, vi } from 'vitest';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
+import NetworkHelper from '../network/NetworkHelper.component';
+import { ButtonType, PageLocation } from '@ovh-ux/manager-react-shell-client';
+import { renderWithMockedWrappers } from '@/__tests__/wrapperRenders';
+import { NAMESPACES } from '@ovh-ux/manager-common-translations';
+import { GUIDE_LINKS } from '@/hooks/url/useGuideLink.constant';
+
+const trackClick = vi.hoisted(() => vi.fn());
+
+vi.mock('@ovh-ux/manager-react-shell-client', async (importOriginal) => {
+  const original: typeof import('@ovh-ux/manager-react-shell-client') = await importOriginal();
+
+  return {
+    ...original,
+    useOvhTracking: vi.fn().mockReturnValue(({
+      trackClick,
+    } as unknown) as {
+      trackCurrentPage: () => void;
+      trackPage: () => void;
+      trackClick: () => void;
+    }),
+  };
+});
+
+describe('Considering NetworkHelper component', () => {
+  it('should track the open click', async () => {
+    renderWithMockedWrappers(<NetworkHelper />);
+
+    const helpButton = screen.getByText('common:pci_instances_common_help');
+
+    fireEvent.click(helpButton);
+
+    await waitFor(() =>
+      expect(trackClick).toHaveBeenCalledWith({
+        location: PageLocation.popup,
+        actionType: 'action',
+        actions: ['add_instance', 'see-helper_network'],
+      }),
+    );
+  });
+
+  it('should track the guide link', async () => {
+    renderWithMockedWrappers(<NetworkHelper />);
+
+    const guideLink = screen.getByText(
+      `${NAMESPACES.ONBOARDING}:find_out_more`,
+    );
+
+    fireEvent.click(guideLink);
+
+    expect(guideLink).toHaveAttribute(
+      'href',
+      (GUIDE_LINKS['NETWORK'] as { FR: string }).FR,
+    );
+
+    await waitFor(() => {
+      expect(trackClick).toHaveBeenCalledWith({
+        location: PageLocation.funnel,
+        buttonType: ButtonType.externalLink,
+        actionType: 'action',
+        actions: ['add_instance', 'go-to-see-documentation_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;
diff --git a/packages/manager/apps/pci-instances/src/pages/instances/instance/dashboard/components/__tests__/BackupBlock.spec.tsx b/packages/manager/apps/pci-instances/src/pages/instances/instance/dashboard/components/__tests__/BackupBlock.spec.tsx
