fix: properly handle markdown links (#5768)

Iterates on https://github.com/Unleash/unleash/pull/5762

While on the previous PR we would always open markdown links on a new
tab, we still want to navigate on the same tab when a relative link is
specified.

This adds a new `Markdown` common component with this logic by default,
which should make things a lot simpler and easier to maintain. The logic
that was followed is similar to the existing internal/external links
logic in our banners.

frontend/src/component/banners/Banner/Banner.tsx

@@ -9,7 +9,7 @@ import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import { useNavigate } from 'react-router-dom';
 import { BannerDialog } from './BannerDialog/BannerDialog';
 import { useState } from 'react';
-import ReactMarkdown from 'react-markdown';
+import { Markdown } from 'component/common/Markdown/Markdown';
 import { BannerVariant, IBanner } from 'interfaces/banner';
 import { Sticky } from 'component/common/Sticky/Sticky';
 
@@ -84,7 +84,7 @@ export const Banner = ({ banner, inline, maxHeight }: IBannerProps) => {
             <StyledIcon variant={variant}>
                 <BannerIcon icon={icon} variant={variant} />
             </StyledIcon>
-            <ReactMarkdown linkTarget='_blank'>{message}</ReactMarkdown>
+            <Markdown>{message}</Markdown>
             <BannerButton
                 link={link}
                 plausibleEvent={plausibleEvent}

frontend/src/component/banners/Banner/BannerDialog/BannerDialog.tsx

@@ -1,8 +1,8 @@
 import { styled } from '@mui/material';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
-import ReactMarkdown from 'react-markdown';
+import { Markdown } from 'component/common/Markdown/Markdown';
 
-const StyledReactMarkdown = styled(ReactMarkdown)(({ theme }) => ({
+const StyledMarkdown = styled(Markdown)(({ theme }) => ({
     'h1, h2, h3': {
         margin: theme.spacing(2, 0),
     },
@@ -30,9 +30,7 @@ export const BannerDialog = ({
                 setOpen(false);
             }}
         >
-            <StyledReactMarkdown linkTarget='_blank'>
+            <StyledMarkdown>{children}</StyledMarkdown>
-                {children}
-            </StyledReactMarkdown>
         </Dialogue>
     );
 };

frontend/src/component/common/Markdown/Markdown.tsx

@@ -0,0 +1,24 @@
+import { Link } from '@mui/material';
+import { AnchorHTMLAttributes, ComponentProps } from 'react';
+import ReactMarkdown from 'react-markdown';
+import { useNavigate } from 'react-router-dom';
+
+const LinkRenderer = ({
+    href = '',
+    children,
+}: AnchorHTMLAttributes<HTMLAnchorElement>) => {
+    const navigate = useNavigate();
+
+    if (href.startsWith('/'))
+        return <Link onClick={() => navigate(href)}>{children}</Link>;
+
+    return (
+        <Link href={href} target='_blank' rel='noreferrer'>
+            {children}
+        </Link>
+    );
+};
+
+export const Markdown = (props: ComponentProps<typeof ReactMarkdown>) => (
+    <ReactMarkdown components={{ a: LinkRenderer }} {...props} />
+);

frontend/src/component/integrations/IntegrationHowToSection/IntegrationHowToSection.tsx

@@ -3,7 +3,7 @@ import { VFC } from 'react';
 import { StyledRaisedSection } from '../IntegrationForm/IntegrationForm.styles';
 import { Typography, styled } from '@mui/material';
 import { IntegrationIcon } from '../IntegrationList/IntegrationIcon/IntegrationIcon';
-import ReactMarkdown from 'react-markdown';
+import { Markdown } from 'component/common/Markdown/Markdown';
 
 const StyledHowDoesItWorkSection = styled(StyledRaisedSection)(({ theme }) => ({
     fontSize: theme.fontSizes.smallBody,
@@ -34,9 +34,7 @@ export const IntegrationHowToSection: VFC<IIntegrationHowToSectionProps> = ({
             >
                 <IntegrationIcon name={provider.name} /> {title}
             </Typography>
-            <ReactMarkdown linkTarget='_blank'>
+            <Markdown>{provider!.howTo || ''}</Markdown>
-                {provider!.howTo || ''}
-            </ReactMarkdown>
         </StyledHowDoesItWorkSection>
     );
 };