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

@@ -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
  */

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>

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>

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>

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)}