feat: add ability to obtain site name dynamically

openedx · Mar 2, 2023 · 820f556 · 820f556
1 parent 6d72656
commit 820f556
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 0 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -53,6 +53,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",

diff --git 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);
diff --git 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);
+  });
+});
diff --git 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;
diff --git 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"