From 77a5f179a9515f5e34f1a8f47ae1638712f43ca1 Mon Sep 17 00:00:00 2001
From: Vim <86254807+vim-usds@users.noreply.github.com>
Date: Thu, 23 Sep 2021 00:22:15 -0700
Subject: [PATCH] Open external links in new tabs (#731)

* Open external links in new tabs

- allow contact page mailto link opens in new tab
- allow about page mailto link opens in new tab
- comment against opening external links in same tab

* Update snapshots
---
 client/src/components/LinkTypeWrapper/index.tsx      | 5 +++++
 client/src/pages/__snapshots__/contact.test.tsx.snap | 2 ++
 client/src/pages/__snapshots__/index.test.tsx.snap   | 2 ++
 client/src/pages/contact.tsx                         | 7 ++++++-
 client/src/pages/index.tsx                           | 1 +
 5 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/client/src/components/LinkTypeWrapper/index.tsx b/client/src/components/LinkTypeWrapper/index.tsx
index 70545d34..d7539856 100644
--- a/client/src/components/LinkTypeWrapper/index.tsx
+++ b/client/src/components/LinkTypeWrapper/index.tsx
@@ -17,6 +17,11 @@ interface ILinkTypeWrapper {
  * instance to choose the type of link along with the props necessary to
  * set new tabs, classes.
  *
+ * Note - if the link is an external link and will not open in a new
+ * browser tab, ensure that hitting the back button works. This has shown to
+ * have errors on edge cases (ie, launching the gmail client with mailto links)
+ * and it is the recommendation to not have external links open in the same tab.
+ *
  * @param props
  * @returns
  */
diff --git a/client/src/pages/__snapshots__/contact.test.tsx.snap b/client/src/pages/__snapshots__/contact.test.tsx.snap
index 80ecc16f..e276f6fa 100644
--- a/client/src/pages/__snapshots__/contact.test.tsx.snap
+++ b/client/src/pages/__snapshots__/contact.test.tsx.snap
@@ -302,6 +302,8 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
             For general feedback, email 
             <a
               href="mailto:screeningtool.feedback@usds.gov"
+              rel="noreferrer"
+              target="_blank"
             >
               screeningtool.feedback@usds.gov
             </a>
diff --git a/client/src/pages/__snapshots__/index.test.tsx.snap b/client/src/pages/__snapshots__/index.test.tsx.snap
index dcdcf71a..eb924464 100644
--- a/client/src/pages/__snapshots__/index.test.tsx.snap
+++ b/client/src/pages/__snapshots__/index.test.tsx.snap
@@ -552,6 +552,8 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                   <a
                     class="j40-aboutcard-link"
                     href="mailto:screeningtool.feedback@usds.gov"
+                    rel="noreferrer"
+                    target="_blank"
                   >
                     Email: screeningtool.feedback@usds.gov
                   </a>
diff --git a/client/src/pages/contact.tsx b/client/src/pages/contact.tsx
index a2da2860..adc9aaec 100644
--- a/client/src/pages/contact.tsx
+++ b/client/src/pages/contact.tsx
@@ -38,7 +38,12 @@ const ContactPage = ({location}: IContactPageProps) => {
                 defaultMessage={CONTACT_COPY.CONTACT_VIA_EMAIL.DEFAULT_MESSAGE}
                 values={{
                   general_email_address:
-                    <a href={`mailto:${CONTACT_COPY.FEEDBACK_EMAIL}`}>{CONTACT_COPY.FEEDBACK_EMAIL}</a>,
+                    <a
+                      href={`mailto:${CONTACT_COPY.FEEDBACK_EMAIL}`}
+                      target="_blank"
+                      rel="noreferrer">
+                      {CONTACT_COPY.FEEDBACK_EMAIL}
+                    </a>,
                 }}/>
             </p>
           </Grid>
diff --git a/client/src/pages/index.tsx b/client/src/pages/index.tsx
index 4b731fdf..845aecc6 100644
--- a/client/src/pages/index.tsx
+++ b/client/src/pages/index.tsx
@@ -123,6 +123,7 @@ const IndexPage = ({location}: IndexPageProps) => {
             header={intl.formatMessage(ABOUT_COPY.GET_INVOLVED.SEND_FEEDBACK_HEADING)}
             linkText={`Email: ${CONTACT_COPY.FEEDBACK_EMAIL}`}
             url={`mailto:${CONTACT_COPY.FEEDBACK_EMAIL}`}
+            openUrlNewTab={true}
             internal={false}>
             <p>
               {intl.formatMessage(ABOUT_COPY.GET_INVOLVED.SEND_FEEDBACK_INFO)}