From ab139553c541602664240e774b28811689613aff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Thu, 4 Jan 2024 14:32:27 +0000
Subject: [PATCH] fix: adapts react markdown to open links in new tab (#5762)

Adapts our current implementations of `ReactMarkdown` to always open
markdown links in new tabs.
---
 frontend/src/component/banners/Banner/Banner.tsx              | 2 +-
 .../component/banners/Banner/BannerDialog/BannerDialog.tsx    | 4 +++-
 .../IntegrationHowToSection/IntegrationHowToSection.tsx       | 4 +++-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/component/banners/Banner/Banner.tsx b/frontend/src/component/banners/Banner/Banner.tsx
index 818ef10521..205a6268cb 100644
--- a/frontend/src/component/banners/Banner/Banner.tsx
+++ b/frontend/src/component/banners/Banner/Banner.tsx
@@ -84,7 +84,7 @@ export const Banner = ({ banner, inline, maxHeight }: IBannerProps) => {
             <StyledIcon variant={variant}>
                 <BannerIcon icon={icon} variant={variant} />
             </StyledIcon>
-            <ReactMarkdown>{message}</ReactMarkdown>
+            <ReactMarkdown linkTarget='_blank'>{message}</ReactMarkdown>
             <BannerButton
                 link={link}
                 plausibleEvent={plausibleEvent}
diff --git a/frontend/src/component/banners/Banner/BannerDialog/BannerDialog.tsx b/frontend/src/component/banners/Banner/BannerDialog/BannerDialog.tsx
index 8d92557cb0..6f0649a9f0 100644
--- a/frontend/src/component/banners/Banner/BannerDialog/BannerDialog.tsx
+++ b/frontend/src/component/banners/Banner/BannerDialog/BannerDialog.tsx
@@ -30,7 +30,9 @@ export const BannerDialog = ({
                 setOpen(false);
             }}
         >
-            <StyledReactMarkdown>{children}</StyledReactMarkdown>
+            <StyledReactMarkdown linkTarget='_blank'>
+                {children}
+            </StyledReactMarkdown>
         </Dialogue>
     );
 };
diff --git a/frontend/src/component/integrations/IntegrationHowToSection/IntegrationHowToSection.tsx b/frontend/src/component/integrations/IntegrationHowToSection/IntegrationHowToSection.tsx
index 266f82a914..0a73adf5bd 100644
--- a/frontend/src/component/integrations/IntegrationHowToSection/IntegrationHowToSection.tsx
+++ b/frontend/src/component/integrations/IntegrationHowToSection/IntegrationHowToSection.tsx
@@ -34,7 +34,9 @@ export const IntegrationHowToSection: VFC<IIntegrationHowToSectionProps> = ({
             >
                 <IntegrationIcon name={provider.name} /> {title}
             </Typography>
-            <ReactMarkdown>{provider!.howTo || ''}</ReactMarkdown>
+            <ReactMarkdown linkTarget='_blank'>
+                {provider!.howTo || ''}
+            </ReactMarkdown>
         </StyledHowDoesItWorkSection>
     );
 };