feat: replace hardcoded edx string in page head (#424 )

* feat: replace hardcoded edx string in page head with site_name from configs * feat: add ability to obtain site name dynamically and fix tests
2023-03-09 13:51:14 -05:00
12 changed files with 121 additions and 5 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,6 +30,7 @@
        "prop-types": "15.7.2",
        "react": "16.14.0",
        "react-dom": "16.14.0",
+        "react-helmet": "^6.1.0",
        "react-redux": "7.1.3",
        "react-responsive": "8.1.0",
        "react-router": "5.1.2",
@@ -20127,6 +20128,25 @@
        }
      }
    },
+    "node_modules/react-helmet": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+      "dependencies": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0"
+      }
+    },
+    "node_modules/react-helmet/node_modules/react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+    },
    "node_modules/react-intl": {
      "version": "5.25.1",
      "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-5.25.1.tgz",
@@ -20347,6 +20367,14 @@
        "react": ">=15"
      }
    },
+    "node_modules/react-side-effect": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
+      "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
    "node_modules/react-style-singleton": {
      "version": "2.2.1",
      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
@@ -40393,6 +40421,24 @@
        "use-sidecar": "^1.1.2"
      }
    },
+    "react-helmet": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      },
+      "dependencies": {
+        "react-fast-compare": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+          "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+        }
+      }
+    },
    "react-intl": {
      "version": "5.25.1",
      "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-5.25.1.tgz",
@@ -40544,6 +40590,12 @@
        "tiny-warning": "^1.0.0"
      }
    },
+    "react-side-effect": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
+      "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
+      "requires": {}
+    },
    "react-style-singleton": {
      "version": "2.2.1",
      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
    "prop-types": "15.7.2",
    "react": "16.14.0",
    "react-dom": "16.14.0",
+    "react-helmet": "^6.1.0",
    "react-redux": "7.1.3",
    "react-responsive": "8.1.0",
    "react-router": "5.1.2",
--- a/public/index.html
+++ b/public/index.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html lang="en-us">
  <head>
-      <title>Course Authoring | edX</title>
+      <title>Course Authoring | <%= process.env.SITE_NAME %></title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="shortcut icon" href="<%= process.env.FAVICON_URL %>" type="image/x-icon" />
--- a/src/head/Head.jsx
+++ b/src/head/Head.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
+
+import messages from './messages';
+
+const Head = ({ intl }) => (
+  <Helmet>
+    <title>
+      {intl.formatMessage(messages['course-authoring.page.title'], { siteName: getConfig().SITE_NAME })}
+    </title>
+    <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
+  </Helmet>
+);
+
+Head.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(Head);
--- a/src/head/Head.test.jsx
+++ b/src/head/Head.test.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { Helmet } from 'react-helmet';
+import { mount } from 'enzyme';
+import { getConfig } from '@edx/frontend-platform';
+import Head from './Head';
+
+describe('Head', () => {
+  const props = {};
+  it('should match render title tag and favicon with the site configuration values', () => {
+    mount(<IntlProvider locale="en"><Head {...props} /></IntlProvider>);
+    const helmet = Helmet.peek();
+    expect(helmet.title).toEqual(`Course Authoring | ${getConfig().SITE_NAME}`);
+    expect(helmet.linkTags[0].rel).toEqual('shortcut icon');
+    expect(helmet.linkTags[0].href).toEqual(getConfig().FAVICON_URL);
+  });
+});
--- a/src/head/messages.js
+++ b/src/head/messages.js
@@ -0,0 +1,11 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  'course-authoring.page.title': {
+    id: 'course-authoring.page.title',
+    defaultMessage: 'Course Authoring | {siteName}',
+    description: 'Title tag',
+  },
+});
+
+export default messages;
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -16,10 +16,12 @@ import appMessages from './i18n';
 import initializeStore from './store';
 import './index.scss';
 import CourseAuthoringRoutes from './CourseAuthoringRoutes';
+import Head from './head/Head';

 subscribe(APP_READY, () => {
  ReactDOM.render(
    <AppProvider store={initializeStore()}>
+      <Head />
      <Switch>
        <Route
          path="/course/:courseId"
--- a/src/pages-and-resources/discussions/DiscussionsSettings.test.jsx
+++ b/src/pages-and-resources/discussions/DiscussionsSettings.test.jsx
@@ -1,3 +1,4 @@
+import ReactDOM from 'react-dom';
 import {
  getConfig, history, initializeMockApp, setConfig,
 } from '@edx/frontend-platform';
@@ -42,6 +43,9 @@ let axiosMock;
 let store;
 let container;

+// Modal creates a portal. Overriding ReactDOM.createPortal allows portals to be tested in jest.
+ReactDOM.createPortal = jest.fn(node => node);
+
 function renderComponent() {
  const wrapper = render(
    <AppProvider store={store}>
--- a/src/pages-and-resources/live/BbbSettings.test.jsx
+++ b/src/pages-and-resources/live/BbbSettings.test.jsx
@@ -6,6 +6,7 @@ import {
  waitForElementToBeRemoved,
 } from '@testing-library/react';

+import ReactDOM from 'react-dom';
 import { Switch } from 'react-router-dom';
 import { initializeMockApp, history } from '@edx/frontend-platform';
 import MockAdapter from 'axios-mock-adapter';
@@ -34,6 +35,9 @@ let container;
 let store;
 const liveSettingsUrl = `/course/${courseId}/pages-and-resources/live/settings`;

+// Modal creates a portal. Overriding ReactDOM.createPortal allows portals to be tested in jest.
+ReactDOM.createPortal = jest.fn(node => node);
+
 const renderComponent = () => {
  const wrapper = render(
    <IntlProvider locale="en">
--- a/src/pages-and-resources/live/Settings.test.jsx
+++ b/src/pages-and-resources/live/Settings.test.jsx
@@ -10,6 +10,7 @@ import {
  waitForElementToBeRemoved,
 } from '@testing-library/react';

+import ReactDOM from 'react-dom';
 import { Switch } from 'react-router-dom';
 import { initializeMockApp, history } from '@edx/frontend-platform';
 import MockAdapter from 'axios-mock-adapter';
@@ -37,6 +38,9 @@ let container;
 let store;
 const liveSettingsUrl = `/course/${courseId}/pages-and-resources/live/settings`;

+// Modal creates a portal. Overriding ReactDOM.createPortal allows portals to be tested in jest.
+ReactDOM.createPortal = jest.fn(node => node);
+
 const renderComponent = () => {
  const wrapper = render(
    <IntlProvider locale="en">
--- a/src/pages-and-resources/live/ZoomSettings.test.jsx
+++ b/src/pages-and-resources/live/ZoomSettings.test.jsx
@@ -5,6 +5,7 @@ import {
  waitForElementToBeRemoved,
 } from '@testing-library/react';

+import ReactDOM from 'react-dom';
 import { Switch } from 'react-router-dom';
 import { initializeMockApp, history } from '@edx/frontend-platform';
 import MockAdapter from 'axios-mock-adapter';
@@ -32,6 +33,9 @@ let container;
 let store;
 const liveSettingsUrl = `/course/${courseId}/pages-and-resources/live/settings`;

+// Modal creates a portal. Overriding ReactDOM.createPortal allows portals to be tested in jest.
+ReactDOM.createPortal = jest.fn(node => node);
+
 const renderComponent = () => {
  const wrapper = render(
    <IntlProvider locale="en">
--- a/src/setupTest.js
+++ b/src/setupTest.js
@@ -2,7 +2,6 @@ import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 import '@testing-library/jest-dom';
 import '@testing-library/jest-dom/extend-expect';
-import ReactDOM from 'react-dom';

 /* eslint-disable import/no-extraneous-dependencies */
 import Enzyme from 'enzyme';
@@ -29,9 +28,6 @@ Object.defineProperty(window, 'matchMedia', {
  })),
 });

-// Modal creates a portal.  Overriding ReactDOM.createPortal allows portals to be tested in jest.
-ReactDOM.createPortal = node => node;
-
 // Mock Intersection Observer which is unavailable in the context of a test.
 global.IntersectionObserver = jest.fn(function mockIntersectionObserver() {
  this.observe = jest.fn();