openedx · arbrandes · Dec 7, 2023 · Oct 4, 2023 · Oct 10, 2023 · Oct 12, 2023
diff --git a/Makefile b/Makefile
@@ -10,7 +10,7 @@ i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json
 
 # This directory must match .babelrc .
-transifex_temp = ./temp/babel-plugin-react-intl
+transifex_temp = ./temp/babel-plugin-formatjs
 
 NPM_TESTS=build i18n_extract lint test
 

diff --git a/README.md b/README.md
@@ -21,6 +21,45 @@ Some guidelines for writing widgets:
 * You can load data from the redux store, but should not add or modify fields in that structure.
 * Network events should be managed in component hooks, though can use our `data/constants/requests:requestStates` for ease of tracking the request states.
 
+ ## License
+
+The code in this repository is licensed under the AGPLv3 unless otherwise
+noted.
+
+Please see `LICENSE <LICENSE>`_ for details.
+
+## Getting Help
+
+If you're having trouble, we have discussion forums at
+https://discuss.openedx.org where you can connect with others in the community.
+
+Our real-time conversations are on Slack. You can request a `Slack
+invitation`_, then join our `community Slack workspace`_.  Because this is a
+frontend repository, the best place to discuss it would be in the `#wg-frontend
+channel`_.
+
+For anything non-trivial, the best path is to open an issue in this repository
+with as many details about the issue you are facing as you can provide.
+
+https://github.com/openedx/frontend-app-learner-dashboard/issues
+
+For more information about these options, see the `Getting Help`_ page.
+
+.. _Slack invitation: https://openedx.org/slack
+.. _community Slack workspace: https://openedx.slack.com/
+.. _#wg-frontend channel: https://openedx.slack.com/archives/C04BM6YC7A6
+.. _Getting Help: https://openedx.org/community/connect
+
 ## Resources
 
 * [Learner Home project info at the Open edX Wiki](https://openedx.atlassian.net/wiki/spaces/OEPM/pages/3575906333/Learner+Home)
+
+## The Open edX Code of Conduct
+
+All community members are expected to follow the `Open edX Code of Conduct`_.
+
+.. _Open edX Code of Conduct: https://openedx.org/code-of-conduct/
+
+## Reporting Security Issues
+
+Please do not report security issues in public. Please email [email protected].
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
   },
   "scripts": {
     "build": "fedx-scripts webpack",
-    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
+    "i18n_extract": "fedx-scripts formatjs extract",
     "lint": "fedx-scripts eslint --ext .jsx,.js src/",
     "lint-fix": "fedx-scripts eslint --fix --ext .jsx,.js src/",
     "semantic-release": "semantic-release",
@@ -26,7 +26,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@edx/brand": "npm:@edx/brand-edx.org@^2.0.3",
+    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
     "@edx/browserslist-config": "^1.1.0",
     "@edx/frontend-component-footer": "^12.2.1",
     "@edx/frontend-enterprise-hotjar": "^2.0.0",
@@ -80,7 +80,7 @@
     "whatwg-fetch": "^3.6.2"
   },
   "devDependencies": {
-    "@edx/frontend-build": "12.8.27",
+    "@edx/frontend-build": "13.0.1",
     "@edx/reactifex": "^2.1.1",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.1.0",

diff --git a/public/index.html b/public/index.html
@@ -1,19 +1,8 @@
 <!doctype html>
 <html lang="en-us" dir="ltr">
   <head>
-      <title>Learner Dashboard | <%= 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="<%=htmlWebpackPlugin.options.FAVICON_URL%>" type="image/x-icon" />
-      <% if (process.env.OPTIMIZELY_URL) { %>
-        <script
-          src="<%= process.env.OPTIMIZELY_URL %>"
-        ></script>
-      <% } else if (process.env.OPTIMIZELY_PROJECT_ID) { %>
-        <script
-          src="<%= process.env.MARKETING_SITE_BASE_URL %>/optimizelyjs/<%= process.env.OPTIMIZELY_PROJECT_ID %>.js"
-        ></script>
-      <% } %>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.jsx b/src/App.jsx
@@ -27,6 +27,7 @@ import fakeData from 'data/services/lms/fakeData/courses';
 import AppWrapper from 'containers/WidgetContainers/AppWrapper';
 import LearnerDashboardHeader from 'containers/LearnerDashboardHeader';
 
+import { getConfig } from '@edx/frontend-platform';
 import messages from './messages';
 import './App.scss';
 
@@ -41,8 +42,21 @@ export const App = () => {
   const { supportEmail } = reduxHooks.usePlatformSettingsData();
   const loadData = reduxHooks.useLoadData();
 
+  const optimizelyScript = () => {
+    if (getConfig().OPTIMIZELY_URL) {
+      return <script src={getConfig().OPTIMIZELY_URL} />;
+    } if (getConfig().OPTIMIZELY_PROJECT_ID) {
+      return (
+        <script
+          src={`${getConfig().MARKETING_SITE_BASE_URL}/optimizelyjs/${getConfig().OPTIMIZELY_PROJECT_ID}.js`}
+        />
+      );
+    }
+    return null;
+  };
+
   React.useEffect(() => {
-    if (authenticatedUser?.administrator || process.env.NODE_ENV === 'development') {
+    if (authenticatedUser?.administrator || getConfig().NODE_ENV === 'development') {
       window.loadEmptyData = () => {
         loadData({ ...fakeData.globalData, courses: [] });
       };
@@ -60,12 +74,12 @@ export const App = () => {
       window.actions = actions;
       window.track = track;
     }
-    if (process.env.HOTJAR_APP_ID) {
+    if (getConfig().HOTJAR_APP_ID) {
       try {
         initializeHotjar({
-          hotjarId: process.env.HOTJAR_APP_ID,
-          hotjarVersion: process.env.HOTJAR_VERSION,
-          hotjarDebug: !!process.env.HOTJAR_DEBUG,
+          hotjarId: getConfig().HOTJAR_APP_ID,
+          hotjarVersion: getConfig().HOTJAR_VERSION,
+          hotjarDebug: !!getConfig().HOTJAR_DEBUG,
         });
       } catch (error) {
         logError(error);
@@ -76,6 +90,8 @@ export const App = () => {
     <>
       <Helmet>
         <title>{formatMessage(messages.pageTitle)}</title>
+        <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
+        {optimizelyScript()}
       </Helmet>
       <div>
         <AppWrapper>
@@ -93,7 +109,7 @@ export const App = () => {
               )}
           </main>
         </AppWrapper>
-        <Footer logo={process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
+        <Footer logo={getConfig().LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
         <ZendeskFab />
       </div>
     </>

diff --git a/src/App.test.jsx b/src/App.test.jsx
@@ -4,6 +4,7 @@ import { shallow } from '@edx/react-unit-test-utils';
 
 import Footer from '@edx/frontend-component-footer';
 import { useIntl } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
 
 import { RequestKeys } from 'data/constants/requests';
 import { reduxHooks } from 'hooks';
@@ -37,17 +38,21 @@ jest.mock('hooks', () => ({
 }));
 jest.mock('data/store', () => 'data/store');
 
+const logo = 'fakeLogo.png';
+
+jest.mock('@edx/frontend-platform', () => ({
+  getConfig: jest.fn(() => ({})),
+}));
+
 const loadData = jest.fn();
 reduxHooks.useLoadData.mockReturnValue(loadData);
 
-const logo = 'fakeLogo.png';
 let el;
 
 const supportEmail = 'test-support-url';
 reduxHooks.usePlatformSettingsData.mockReturnValue({ supportEmail });
 
 describe('App router component', () => {
-  process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG = logo;
   const { formatMessage } = useIntl();
   describe('component', () => {
     const runBasicTests = () => {
@@ -73,6 +78,43 @@ describe('App router component', () => {
     describe('no network failure', () => {
       beforeAll(() => {
         reduxHooks.useRequestIsFailed.mockReturnValue(false);
+        getConfig.mockReturnValue({ LOGO_POWERED_BY_OPEN_EDX_URL_SVG: logo });
+        el = shallow(<App />);
+      });
+      runBasicTests();
+      it('loads dashboard', () => {
+        const main = el.instance.findByType('main')[0];
+        expect(main.children.length).toEqual(1);
+        const expProvider = main.children[0];
+        expect(expProvider.type).toEqual('ExperimentProvider');
+        expect(expProvider.children.length).toEqual(1);
+        expect(
+          expProvider.matches(shallow(<ExperimentProvider><Dashboard /></ExperimentProvider>)),
+        ).toEqual(true);
+      });
+    });
+    describe('no network failure with optimizely url', () => {
+      beforeAll(() => {
+        reduxHooks.useRequestIsFailed.mockReturnValue(false);
+        getConfig.mockReturnValue({ LOGO_POWERED_BY_OPEN_EDX_URL_SVG: logo, OPTIMIZELY_URL: 'fake.url' });
+        el = shallow(<App />);
+      });
+      runBasicTests();
+      it('loads dashboard', () => {
+        const main = el.instance.findByType('main')[0];
+        expect(main.children.length).toEqual(1);
+        const expProvider = main.children[0];
+        expect(expProvider.type).toEqual('ExperimentProvider');
+        expect(expProvider.children.length).toEqual(1);
+        expect(
+          expProvider.matches(shallow(<ExperimentProvider><Dashboard /></ExperimentProvider>)),
+        ).toEqual(true);
+      });
+    });
+    describe('no network failure with optimizely project id', () => {
+      beforeAll(() => {
+        reduxHooks.useRequestIsFailed.mockReturnValue(false);
+        getConfig.mockReturnValue({ LOGO_POWERED_BY_OPEN_EDX_URL_SVG: logo, OPTIMIZELY_PROJECT_ID: 'fakeId' });
         el = shallow(<App />);
       });
       runBasicTests();
@@ -90,6 +132,7 @@ describe('App router component', () => {
     describe('initialize failure', () => {
       beforeAll(() => {
         reduxHooks.useRequestIsFailed.mockImplementation((key) => key === RequestKeys.initialize);
+        getConfig.mockReturnValue({ LOGO_POWERED_BY_OPEN_EDX_URL_SVG: logo });
         el = shallow(<App />);
       });
       runBasicTests();
@@ -107,6 +150,7 @@ describe('App router component', () => {
     describe('refresh failure', () => {
       beforeAll(() => {
         reduxHooks.useRequestIsFailed.mockImplementation((key) => key === RequestKeys.refreshList);
+        getConfig.mockReturnValue({ LOGO_POWERED_BY_OPEN_EDX_URL_SVG: logo });
         el = shallow(<App />);
       });
       runBasicTests();

diff --git a/src/__snapshots__/App.test.jsx.snap b/src/__snapshots__/App.test.jsx.snap
@@ -9,6 +9,10 @@ exports[`App router component component initialize failure snapshot 1`] = `
     <title>
       Learner Home
     </title>
+    <link
+      rel="shortcut icon"
+      type="image/x-icon"
+    />
   </HelmetWrapper>
   <div>
     <AppWrapper>
@@ -40,6 +44,78 @@ exports[`App router component component no network failure snapshot 1`] = `
     <title>
       Learner Home
     </title>
+    <link
+      rel="shortcut icon"
+      type="image/x-icon"
+    />
+  </HelmetWrapper>
+  <div>
+    <AppWrapper>
+      <LearnerDashboardHeader />
+      <main>
+        <ExperimentProvider>
+          <Dashboard />
+        </ExperimentProvider>
+      </main>
+    </AppWrapper>
+    <Footer
+      logo="fakeLogo.png"
+    />
+    <ZendeskFab />
+  </div>
+</Fragment>
+`;
+
+exports[`App router component component no network failure with optimizely project id snapshot 1`] = `
+<Fragment>
+  <HelmetWrapper
+    defer={true}
+    encodeSpecialCharacters={true}
+  >
+    <title>
+      Learner Home
+    </title>
+    <link
+      rel="shortcut icon"
+      type="image/x-icon"
+    />
+    <script
+      src="undefined/optimizelyjs/fakeId.js"
+    />
+  </HelmetWrapper>
+  <div>
+    <AppWrapper>
+      <LearnerDashboardHeader />
+      <main>
+        <ExperimentProvider>
+          <Dashboard />
+        </ExperimentProvider>
+      </main>
+    </AppWrapper>
+    <Footer
+      logo="fakeLogo.png"
+    />
+    <ZendeskFab />
+  </div>
+</Fragment>
+`;
+
+exports[`App router component component no network failure with optimizely url snapshot 1`] = `
+<Fragment>
+  <HelmetWrapper
+    defer={true}
+    encodeSpecialCharacters={true}
+  >
+    <title>
+      Learner Home
+    </title>
+    <link
+      rel="shortcut icon"
+      type="image/x-icon"
+    />
+    <script
+      src="fake.url"
+    />
   </HelmetWrapper>
   <div>
     <AppWrapper>
@@ -67,6 +143,10 @@ exports[`App router component component refresh failure snapshot 1`] = `
     <title>
       Learner Home
     </title>
+    <link
+      rel="shortcut icon"
+      type="image/x-icon"
+    />
   </HelmetWrapper>
   <div>
     <AppWrapper>

diff --git a/src/components/EmailLink.jsx b/src/components/EmailLink.jsx
diff --git a/src/components/EmailLink.test.jsx b/src/components/EmailLink.test.jsx