fix(mrc): fix ignore translation in component property

fixes: #gh-15421 Signed-off-by: David Arsène <[email protected]>
ovh · Mar 6, 2025 · 39e51d8 · 39e51d8
1 parent 8ad0f2c
commit 39e51d8
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 9 deletions.
diff --git a/packages/manager-react-components/src/components/order/OrderSummary.component.tsx b/packages/manager-react-components/src/components/order/OrderSummary.component.tsx
@@ -6,8 +6,8 @@ import {
 import { OdsButton, OdsText } from '@ovhcloud/ods-components/react';
 import { Trans, useTranslation } from 'react-i18next';
 import React, { useEffect } from 'react';
-import { Links, LinkType } from '../typography';
 import { useOrderContext } from './Order.context';
+import { Links, LinkType } from '../typography';
 
 export type TOrderSummary = {
   onFinish: () => void;
@@ -52,7 +52,7 @@ export const OrderSummary: React.FC<TOrderSummary> = ({
             t={t}
             i18nKey="order_summary_order_initiated_subtitle"
             components={{
-              OrderLink: (
+              ExternalLink: (
                 <Links
                   type={LinkType.external}
                   target="_blank"
@@ -62,7 +62,7 @@ export const OrderSummary: React.FC<TOrderSummary> = ({
                 />
               ),
             }}
-          ></Trans>
+          />
         </OdsText>
         <OdsText preset={ODS_TEXT_PRESET.paragraph}>
           {t('order_summary_order_initiated_info', { product })}

diff --git a/packages/manager-react-components/src/components/order/translations/Messages_fr_FR.json b/packages/manager-react-components/src/components/order/translations/Messages_fr_FR.json
@@ -4,6 +4,6 @@
   "order_summary_finish": "Terminer",
   "order_summary_product_default_label": "service",
   "order_summary_order_initiated_title": "Commande de votre {{product}} initiée",
-  "order_summary_order_initiated_subtitle": "Si vous n'avez pas pu finaliser votre commande, merci de la compléter en cliquant sur le <OrderLink label=\"lien suivant\">{{label}}</OrderLink>",
+  "order_summary_order_initiated_subtitle": "Si vous n'avez pas pu finaliser votre commande, merci de la compléter en cliquant sur le <ExternalLink>lien suivant</ExternalLink>",
   "order_summary_order_initiated_info": "Nous vous informerons de la disponibilité de votre {{product}} par e-mail."
 }
diff --git a/packages/manager-react-components/src/components/typography/links/links.component.tsx b/packages/manager-react-components/src/components/typography/links/links.component.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import {
   ODS_ICON_NAME,
   ODS_LINK_COLOR,
@@ -21,6 +21,7 @@ export interface LinksProps {
   color?: ODS_LINK_COLOR;
   download?: string;
   label?: string;
+  children?: string;
   href?: string;
   rel?: string;
   target?: string;
@@ -30,7 +31,8 @@ export interface LinksProps {
   isDisabled?: boolean;
 }
 
-export const Links: React.FC<LinksProps> = ({
+export const Links: React.FC<LinksProps & PropsWithChildren> = ({
+  children,
   label,
   onClickReturn,
   type,
@@ -39,7 +41,7 @@ export const Links: React.FC<LinksProps> = ({
   iconAlignment,
   className = '',
   ...props
-}: LinksProps) => (
+}) => (
   <OdsLink
     className={className}
     href={href}
@@ -55,7 +57,7 @@ export const Links: React.FC<LinksProps> = ({
     })}
     {...(type === LinkType.next && { icon: ODS_ICON_NAME.arrowRight })}
     {...(type === LinkType.external && { icon: ODS_ICON_NAME.externalLink })}
-    label={label}
+    label={label ?? children}
   />
 );
 

diff --git a/packages/manager-react-components/src/components/typography/links/links.spec.tsx b/packages/manager-react-components/src/components/typography/links/links.spec.tsx
@@ -24,7 +24,7 @@ describe('Links component', () => {
     const linkElement = container.querySelector('[label="Next Page"]');
     expect(linkElement).toBeInTheDocument();
   });
-  it('renders a external link correctly', () => {
+  it('renders a external link correctly with label as prop', () => {
     const props = {
       href: 'https://www.ovhcloud.com/',
       target: '_blank',
@@ -37,4 +37,17 @@ describe('Links component', () => {
 
     expect(linkElement).toBeInTheDocument();
   });
+
+  it('renders a external link correctly with label as children', () => {
+    const props = {
+      href: 'https://www.ovhcloud.com/',
+      target: '_blank',
+      type: LinkType.external,
+    };
+
+    const { container } = render(<Links {...props}>External Page</Links>);
+    const linkElement = container.querySelector('[label="External Page"]');
+
+    expect(linkElement).toBeInTheDocument();
+  });
 });