fix: open the new-design banner link in the same tab (#151)

src/js/components/Banner/Banner.tsx

@@ -20,6 +20,9 @@ type Props = {
     disabled?: boolean;
   },
   onCrossIconClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  onLinkClick?: () => void;
+  /** Open the link in this tab instead of a new one. */
+  sameTab?: boolean;
 }
 
 const Banner = (props: Props) => {
@@ -34,14 +37,27 @@ const Banner = (props: Props) => {
           </div>
           {props.banner.label &&
             <button className={`banner-link-button type-${props.banner.type}`}>
-              <Link
-                className="banner-link-button-text"
-                to={{ pathname: `https://${props.banner.link}` }}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                {props.banner.label}
-              </Link>
+              {props.sameTab ? (
+                // A plain <a>: react-router's <Link> would treat an external URL
+                // opened in the same tab as an in-app route.
+                <a
+                  className="banner-link-button-text"
+                  href={`https://${props.banner.link}`}
+                  onClick={props.onLinkClick}
+                >
+                  {props.banner.label}
+                </a>
+              ) : (
+                <Link
+                  className="banner-link-button-text"
+                  to={{ pathname: `https://${props.banner.link}` }}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  onClick={props.onLinkClick}
+                >
+                  {props.banner.label}
+                </Link>
+              )}
             </button>}
         </div>
         <button className="banner-cross-bg" onClick={(e) => handleBannerCrossClick(e)}>

src/js/components/Banner/NewDesignBanner.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import Banner from './Banner';
+import { rememberNewDesign } from '../../util/design-preference';
 
 const SESSION_STORAGE_KEY = 'newDesignBannerDismissed';
 
@@ -35,6 +36,10 @@ const NewDesignBanner = () => {
         classes: { notification: 'notification-new-design' },
       }}
       onCrossIconClick={handleDismiss}
+      // Opting in here must remember the choice too, or the old site never
+      // redirects. Same tab, like the home page's "Try it now" link (#151).
+      onLinkClick={rememberNewDesign}
+      sameTab
     />
   );
 };