From d25ded18b1d799363a30fa8fc270ad4e17b8eda6 Mon Sep 17 00:00:00 2001
From: Jeff Chaves <58956521+chavesj@users.noreply.github.com>
Date: Thu, 8 Apr 2021 16:30:04 -0400
Subject: [PATCH] refactor: opens all B2C course page links in a new tab (#252)

* refactor: opens all B2C course page links in a new tab

* refactor: removes subject link, adds active label with course title to course page breadcrumbs
---
 .../course/CourseAssociatedPrograms.jsx       |  6 ++---
 src/components/course/CourseHeader.jsx        | 25 ++++++++++---------
 src/components/course/CourseMainContent.jsx   | 17 ++++++++++---
 src/components/course/CourseSidebar.jsx       |  9 ++++---
 src/components/course/CreatedBy.jsx           | 22 ++++++++++++----
 .../course/tests/CourseHeader.test.jsx        |  5 ++--
 6 files changed, 53 insertions(+), 31 deletions(-)

diff --git a/src/components/course/CourseAssociatedPrograms.jsx b/src/components/course/CourseAssociatedPrograms.jsx
index 94ca834ff1..7828b35c0a 100644
--- a/src/components/course/CourseAssociatedPrograms.jsx
+++ b/src/components/course/CourseAssociatedPrograms.jsx
@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
+import { Hyperlink } from '@edx/paragon';
 
 import { CourseContext } from './CourseContextProvider';
-
 import { getProgramIcon, formatProgramType } from './data/utils';
 
 export default function CourseAssociatedPrograms() {
@@ -28,9 +28,9 @@ export default function CourseAssociatedPrograms() {
               </div>
             </div>
             <div className="col">
-              <a href={program.marketingUrl}>
+              <Hyperlink destination={program.marketingUrl} target="_blank">
                 {program.title}
-              </a>
+              </Hyperlink>
             </div>
           </li>
         ))}
diff --git a/src/components/course/CourseHeader.jsx b/src/components/course/CourseHeader.jsx
index ab6551bb0e..19b46af59c 100644
--- a/src/components/course/CourseHeader.jsx
+++ b/src/components/course/CourseHeader.jsx
@@ -65,18 +65,17 @@ export default function CourseHeader() {
         <div className="row py-4">
           <div className="col-12 col-lg-7">
             {primarySubject && (
-              <Breadcrumb
-                links={[
-                  {
-                    label: 'Find a Course',
-                    url: `/${enterpriseConfig.slug}/search`,
-                  },
-                  {
-                    label: `${primarySubject.name} Courses`,
-                    url: primarySubject.url,
-                  },
-                ]}
-              />
+              <div className="small">
+                <Breadcrumb
+                  links={[
+                    {
+                      label: 'Find a Course',
+                      url: `/${enterpriseConfig.slug}/search`,
+                    },
+                  ]}
+                  activeLabel={course.title}
+                />
+              </div>
             )}
             {partners.length > 0 && (
               <div className="mt-4 mb-2">
@@ -85,6 +84,8 @@ export default function CourseHeader() {
                     className="d-inline-block mr-4"
                     href={partner.marketingUrl}
                     key={partner.uuid}
+                    target="_blank"
+                    rel="noopener noreferrer"
                   >
                     <img
                       src={partner.logoImageUrl}
diff --git a/src/components/course/CourseMainContent.jsx b/src/components/course/CourseMainContent.jsx
index 57c1b28b9c..f032c20140 100644
--- a/src/components/course/CourseMainContent.jsx
+++ b/src/components/course/CourseMainContent.jsx
@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import MediaQuery from 'react-responsive';
-import { breakpoints } from '@edx/paragon';
+import { breakpoints, Hyperlink } from '@edx/paragon';
 import { AppContext } from '@edx/frontend-platform/react';
 
 import { PreviewExpand } from '../preview-expand';
@@ -64,13 +64,22 @@ export default function CourseMainContent() {
             {course.sponsors.map((sponsor) => (
               <div className="col-lg-6 mb-3" key={sponsor.name}>
                 <div className="mb-2">
-                  <a href={`${config.MARKETING_SITE_BASE_URL}/${sponsor.marketingUrl}`} aria-hidden="true" tabIndex="-1">
+                  <a
+                    href={`${config.MARKETING_SITE_BASE_URL}/${sponsor.marketingUrl}`}
+                    aria-hidden="true"
+                    tabIndex="-1"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
                     <img src={sponsor.logoImageUrl} alt={`${sponsor.name} logo`} />
                   </a>
                 </div>
-                <a href={`${config.MARKETING_SITE_BASE_URL}/${sponsor.marketingUrl}`}>
+                <Hyperlink
+                  destination={`${config.MARKETING_SITE_BASE_URL}/${sponsor.marketingUrl}`}
+                  target="_blank"
+                >
                   {sponsor.name}
-                </a>
+                </Hyperlink>
               </div>
             ))}
           </div>
diff --git a/src/components/course/CourseSidebar.jsx b/src/components/course/CourseSidebar.jsx
index db7ec2a175..233b43c8e5 100644
--- a/src/components/course/CourseSidebar.jsx
+++ b/src/components/course/CourseSidebar.jsx
@@ -11,6 +11,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import ISO6391 from 'iso-639-1';
 
+import { Hyperlink } from '@edx/paragon';
 import { CourseContext } from './CourseContextProvider';
 import CourseSidebarListItem from './CourseSidebarListItem';
 import CourseAssociatedPrograms from './CourseAssociatedPrograms';
@@ -66,9 +67,9 @@ export default function CourseSidebar() {
             label={institutionLabel}
             content={partners.map(partner => (
               <span key={partner.key} className="d-block">
-                <a href={partner.marketingUrl}>
+                <Hyperlink destination={partner.marketingUrl} target="_blank">
                   {partner.key}
-                </a>
+                </Hyperlink>
               </span>
             ))}
           />
@@ -78,9 +79,9 @@ export default function CourseSidebar() {
             icon={faGraduationCap}
             label="Subject"
             content={(
-              <a href={primarySubject.url}>
+              <Hyperlink destination={primarySubject.url} target="_blank">
                 {primarySubject.name}
-              </a>
+              </Hyperlink>
             )}
           />
         )}
diff --git a/src/components/course/CreatedBy.jsx b/src/components/course/CreatedBy.jsx
index c2586e2620..91581025ce 100644
--- a/src/components/course/CreatedBy.jsx
+++ b/src/components/course/CreatedBy.jsx
@@ -1,8 +1,8 @@
 import React, { useContext } from 'react';
 import { AppContext } from '@edx/frontend-platform/react';
+import { Hyperlink } from '@edx/paragon';
 
 import { CourseContext } from './CourseContextProvider';
-
 import { useCoursePartners } from './data/hooks';
 
 export default function CreatedBy() {
@@ -25,11 +25,19 @@ export default function CreatedBy() {
           {partners.map(partner => (
             <div className="col-lg-6 mb-3" key={partner.name}>
               <div className="mb-2">
-                <a href={partner.marketingUrl} aria-hidden="true" tabIndex="-1">
+                <a
+                  href={partner.marketingUrl}
+                  aria-hidden="true"
+                  tabIndex="-1"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
                   <img src={partner.logoImageUrl} alt={`${partner.name} logo`} />
                 </a>
               </div>
-              <a href={partner.marketingUrl}>{partner.name}</a>
+              <Hyperlink destination={partner.marketingUrl} target="_blank">
+                {partner.name}
+              </Hyperlink>
             </div>
           ))}
         </div>
@@ -45,9 +53,13 @@ export default function CreatedBy() {
                 style={{ width: 72, height: 72 }}
               />
               <div>
-                <a href={`${config.MARKETING_SITE_BASE_URL}/bio/${staff.slug}`} className="font-weight-bold">
+                <Hyperlink
+                  destination={`${config.MARKETING_SITE_BASE_URL}/bio/${staff.slug}`}
+                  className="font-weight-bold"
+                  target="_blank"
+                >
                   {formatStaffFullName(staff)}
-                </a>
+                </Hyperlink>
                 {staff.position && (
                   <>
                     <div className="font-italic">{staff.position.title}</div>
diff --git a/src/components/course/tests/CourseHeader.test.jsx b/src/components/course/tests/CourseHeader.test.jsx
index 68f0ce0755..d3ada4b794 100644
--- a/src/components/course/tests/CourseHeader.test.jsx
+++ b/src/components/course/tests/CourseHeader.test.jsx
@@ -91,8 +91,7 @@ describe('<CourseHeader />', () => {
       />,
     );
     expect(screen.queryByText('Find a Course')).toBeInTheDocument();
-    const subject = initialCourseState.course.subjects[0];
-    expect(screen.queryByText(`${subject.name} Courses`)).toBeInTheDocument();
+    expect(screen.queryAllByText(initialCourseState.course.title)[0]).toBeInTheDocument();
   });
 
   test('renders course title and short description', () => {
@@ -105,7 +104,7 @@ describe('<CourseHeader />', () => {
     );
 
     const { title, shortDescription } = initialCourseState.course;
-    expect(screen.queryByText(title)).toBeInTheDocument();
+    expect(screen.queryAllByText(title)[1]).toBeInTheDocument();
     expect(screen.queryByText(shortDescription)).toBeInTheDocument();
   });