diff --git a/package-lock.json b/package-lock.json
index 76159a55..45e7899e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15729,6 +15729,22 @@
"integrity": "sha512-+DMR2k5c6BqMDSMF8hLH0vYKtKTeikiFW+fj0LClN+XZg4N9b8QUAdHC62CGWNLTi/gnuuemNcNcTFrCvK1f+A==",
"dev": true
},
+ "react-fast-compare": {
+ "version": "2.0.4",
+ "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
+ "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
+ },
+ "react-helmet": {
+ "version": "6.0.0",
+ "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.0.0.tgz",
+ "integrity": "sha512-My6S4sa0uHN/IuVUn0HFmasW5xj9clTkB9qmMngscVycQ5vVG51Qp44BEvLJ4lixupTwDlU9qX1/sCrMN4AEPg==",
+ "requires": {
+ "object-assign": "^4.1.1",
+ "prop-types": "^15.7.2",
+ "react-fast-compare": "^2.0.4",
+ "react-side-effect": "^2.1.0"
+ }
+ },
"react-intl": {
"version": "2.9.0",
"resolved": "https://registry.npmjs.org/react-intl/-/react-intl-2.9.0.tgz",
@@ -15806,6 +15822,11 @@
"tiny-warning": "^1.0.0"
}
},
+ "react-side-effect": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.0.tgz",
+ "integrity": "sha512-IgmcegOSi5SNX+2Snh1vqmF0Vg/CbkycU9XZbOHJlZ6kMzTmi3yc254oB1WCkgA7OQtIAoLmcSFuHTc/tlcqXg=="
+ },
"react-transition-group": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.3.0.tgz",
diff --git a/package.json b/package.json
index cef7c10d..91564217 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
"prop-types": "^15.7.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
+ "react-helmet": "6.0.0",
"react-redux": "^7.1.3",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
diff --git a/src/courseware/course/Course.jsx b/src/courseware/course/Course.jsx
index ffc7a8b7..194ce905 100644
--- a/src/courseware/course/Course.jsx
+++ b/src/courseware/course/Course.jsx
@@ -1,5 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
+import { Helmet } from 'react-helmet';
+import { getConfig } from '@edx/frontend-platform';
import { AlertList } from '../../user-messages';
import { useAccessExpirationAlert } from '../../alerts/access-expiration-alert';
@@ -34,6 +36,12 @@ function Course({
const sequence = useModel('sequences', sequenceId);
const section = useModel('sections', sequence ? sequence.sectionId : null);
+ const pageTitleBreadCrumbs = [
+ section,
+ sequence,
+ course,
+ ].filter(element => element != null).map(element => element.title);
+
useOfferAlert(courseId);
useAccessExpirationAlert(courseId);
@@ -44,6 +52,9 @@ function Course({
return (
<>
+
+ {`${pageTitleBreadCrumbs.join(' | ')} | ${getConfig().SITE_NAME}`}
+