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
openedx · Apr 8, 2021 · d25ded1 · d25ded1
1 parent e479bf6
commit d25ded1
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 31 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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();
   });