feat(pci.private-network): using link component instead

ref: TAPC-735 Signed-off-by: tsiorifamonjena <[email protected]>
ovh · Oct 8, 2024 · 8417058 · 8417058
1 parent fbbc712
commit 8417058
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 18 deletions.
diff --git a/packages/manager/apps/pci-private-network/public/translations/common/Messages_fr_FR.json b/packages/manager/apps/pci-private-network/public/translations/common/Messages_fr_FR.json
@@ -90,5 +90,5 @@
   "common_password_weak_password": "Mot de passe faible.",
   "common_password_good_password": "Mot de passe correct.",
   "common_password_strong_password": "Mot de passe fort.",
-  "common_find_out_more_here": "En savoir plus ici."
+  "common_find_out_more_here": "En savoir plus ici"
 }
diff --git a/packages/manager/apps/pci-private-network/public/translations/new/Messages_fr_FR.json b/packages/manager/apps/pci-private-network/public/translations/new/Messages_fr_FR.json
@@ -17,7 +17,7 @@
   "pci_projects_project_network_private_create_public_gateway_decription_2": "Autorisez les instances de ce réseau privé à accéder à Internet de manière sécurisée. La sélection de cette option utilisera l’instance Gateway existante ou en créera une le cas échéant. Veuillez noter que cela peut entraîner des frais supplémentaires (des détails seront disponibles ci-dessous, dans la page de résumé).",
   "pci_projects_project_network_private_create_public_gateway_footer": "Cette option peut ne pas être disponible dans la région sélectionnée. Pour en savoir plus sur la disponibilité des produits par région,  <a href=\"{{ guideLink }}\" target=\"_blank\" data-track-on=\"click\" data-track-type=\"action\" data-track-name=\" {{ trackLabel }} \">cliquez ici</a>.",
   "pci_projects_project_network_private_create_layer_2_options": "Options réseau du layer 2 :",
-  "pci_projects_project_network_private_create_vlan_tip": "Astuce : vous devrez peut-être utiliser le même identifiant de VLAN sur votre serveur dédié ou votre Hosted Private Cloud pour vos usages de cloud hybride. <link />",
+  "pci_projects_project_network_private_create_vlan_tip": "Astuce : vous devrez peut-être utiliser le même identifiant de VLAN sur votre serveur dédié ou votre Hosted Private Cloud pour vos usages de cloud hybride. ",
   "pci_projects_project_network_private_create_dhcp_address_distribution_options": "Options de distribution des adresses DHCP:",
   "pci_projects_project_network_private_create_enable_dhcp": "Activer DHCP pour ce réseau privé",
   "pci_projects_project_network_private_create_announce_first_address": "Annoncer la première adresse d'un CIDR donné comme passerelle par défaut (DHCP option 3)",

diff --git a/packages/manager/apps/pci-private-network/src/pages/new/steps/ConfigurationStep.tsx b/packages/manager/apps/pci-private-network/src/pages/new/steps/ConfigurationStep.tsx
@@ -1,10 +1,12 @@
 import {
   StepComponent,
   useNotifications,
+  Links,
+  LinkType,
 } from '@ovh-ux/manager-react-components';
-
+import { OdsHTMLAnchorElementTarget } from '@ovhcloud/ods-common-core';
 import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
-import { useTranslation, Trans } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
 import {
   ODS_BUTTON_SIZE,
@@ -393,20 +395,12 @@ export default function ConfigurationStep({
                     level={ODS_TEXT_LEVEL.body}
                     size={ODS_TEXT_SIZE._400}
                   >
-                    <Trans
-                      t={t}
-                      i18nKey="pci_projects_project_network_private_create_vlan_tip"
-                      components={{
-                        link: (
-                          <a
-                            href={VLAN_GUIDE_URL}
-                            target="_blank"
-                            rel="noreferrer"
-                          >
-                            {tCommon('common_find_out_more_here')}
-                          </a>
-                        ),
-                      }}
+                    {t('pci_projects_project_network_private_create_vlan_tip')}
+                    <Links
+                      label={tCommon('common_find_out_more_here')}
+                      href={VLAN_GUIDE_URL}
+                      target={OdsHTMLAnchorElementTarget._blank}
+                      type={LinkType.external}
                     />
                   </OsdsText>
                 </div>