From 0d93b19eb624a082e709a2792fe407abe4e59ae6 Mon Sep 17 00:00:00 2001
From: Cameron Higby-Naquin <me@chigby.org>
Date: Fri, 26 Jan 2024 12:11:18 -0500
Subject: [PATCH] reports: Handle links to other domains in Featured Section
 urls

Before this, if a featured section in a report was configured with a
URL that pointed to an outside domain (one different from
`location.origin`), the link would fail when clicked because it uses
the `Link` component from react router, which we've set up to work
only with relative link paths.

I've changed it so that we check the link and if it's to another
domain (using the pre-existing logic for checking that), and if so, we
render a normal `<a>` tag that will not interact with react router at
all.  If it _is_ a relative link, then it will use the react router
`Link` component as before.
---
 .../react/report/components/FeaturedSections.js | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/newamericadotorg/assets/react/report/components/FeaturedSections.js b/newamericadotorg/assets/react/report/components/FeaturedSections.js
index 4695c3668..326ed8d1c 100644
--- a/newamericadotorg/assets/react/report/components/FeaturedSections.js
+++ b/newamericadotorg/assets/react/report/components/FeaturedSections.js
@@ -4,6 +4,19 @@ import React, { Component } from 'react';
 import { Highlight, DataViz, Resource } from '../../components/Icons';
 import { Link } from 'react-router-dom';
 
+function PossiblyExternalLink({children, ...props}) {
+  // If the given link url is relative to the site domain, return a
+  // `Link` component to tie into react-router.  If it's an external
+  // link, return an plain old `a` tag.
+  let relativizedTarget = props.to.replace(location.origin, '');
+
+  if (relativizedTarget.startsWith('/') || !relativizedTarget) {
+    return (<Link {...props} to={relativizedTarget}>{children}</Link>);
+  } else {
+    return (<a href={props.to} className={props.className} style={props.style}>{children}</a>);
+  }
+}
+
 const iconsMap = {
   'Highlight': Highlight,
   'Data Visualization': DataViz,
@@ -19,7 +32,7 @@ const FeaturedIcon = ({ featuredType, Icon }) => (
 
 const Featured = ({ section }) => (
   <div className="report__featured-button" style={{ marginBottom: '30px' }}>
-    <Link to={section.url.replace(location.origin, '')} style={{ display: 'block' }} className="ga-track-click" data-action="click_landing" data-label="report" data-value="featured_button">
+    <PossiblyExternalLink to={section.url} style={{ display: 'block' }} className="ga-track-click" data-action="click_landing" data-label="report" data-value="featured_button">
       {section.label && <h4 className="margin-top-0 margin-bottom-10">
         {section.label}
       </h4>}
@@ -28,7 +41,7 @@ const Featured = ({ section }) => (
         &nbsp;
       </h4>}
       <FeaturedIcon featuredType={section.type} Icon={iconsMap[section.type]} />
-    </Link>
+    </PossiblyExternalLink>
   </div>
 );