fix: convert notification banner to text if accounts url is not set (#362) (#385)

* fix: convert banner to text if ACCOUNT_SETTINGS_URL is not set

* refactor: refactoring

* refactor: rename notificationsBannerLinkMessage to notificationsBannerPreferencesCenterMessage

* refactor: remove lodash usage

* refactor: remove lodash usage

.env.development

@@ -7,7 +7,6 @@ LOGOUT_URL='http://localhost:18000/logout'
 LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
 LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
-LOGO_POWERED_BY_OPEN_EDX_URL_SVG=https://edx-cdn.org/v3/stage/open-edx-tag.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'

.env.test

@@ -7,7 +7,6 @@ LOGOUT_URL='http://localhost:18000/logout'
 LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
 LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
-LOGO_POWERED_BY_OPEN_EDX_URL_SVG=https://edx-cdn.org/v3/stage/open-edx-tag.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'

.github/workflows/ci.yml

@@ -10,17 +10,21 @@ on:
 
 jobs:
   tests:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: [18.15, 20]
+
     steps:
     - name: Checkout
       uses: actions/checkout@v3
     - name: Setup Nodejs Env
       run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
     - name: Setup Nodejs
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
 # Because of node 18 bug (https://github.com/nodejs/node/issues/47563), Pinning node version 18.15 until the next release of node
       with:
-        node-version: 18.15
+        node-version: ${{ matrix.node }}
 
     - name: Install dependencies
       run: npm ci
@@ -38,7 +42,10 @@ jobs:
       run: npm run build
 
     - name: Run Coverage
-      uses: codecov/codecov-action@v3
+      uses: codecov/codecov-action@v4
+      with:
+        token: ${{ secrets.CODECOV_TOKEN }}
+        fail_ci_if_error: true
 
     - name: Send failure notification
       if: ${{ failure() }}

.github/workflows/lockfileversion-check.yml

@@ -10,4 +10,4 @@ on:
 
 jobs:
   version-check:
-    uses: openedx/.github/.github/workflows/lockfile-check.yml@master
+    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master

.github/workflows/npm-publish.yml

@@ -7,7 +7,7 @@ on:
 jobs:
   release:
     name: Release
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v2

.nvmrc

@@ -1 +1 @@
-18.19
+20

README.rst

@@ -39,6 +39,12 @@ to the `relevant tutor-mfe documentation`_ to get started using it.
 
 .. _relevant tutor-mfe documentation: https://github.com/overhangio/tutor-mfe#mfe-development
 
+Plugins
+=======
+This MFE can be customized using `Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>`_.
+
+The parts of this MFE that can be customized in that manner are documented `here </src/plugin-slots>`_.
+
 Developing
 ==========
 

catalog-info.yaml

@@ -14,6 +14,6 @@ metadata:
       title: "Stage Site"
       icon: "Web"
 spec:
-  owner: ~
+  owner: "group:openedx-unmaintained"
   type: 'website'
   lifecycle: 'production'

package.json

@@ -6,6 +6,9 @@
     "type": "git",
     "url": "git+https://github.com/edx/frontend-app-ora-grading.git"
   },
+  "browserslist": [
+    "extends @edx/browserslist-config"
+  ],
   "scripts": {
     "build": "fedx-scripts webpack",
     "i18n_extract": "fedx-scripts formatjs extract",
@@ -25,14 +28,14 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-footer": "13.0.2",
-    "@edx/frontend-component-header": "5.0.2",
-    "@edx/frontend-platform": "7.1.0",
+    "@edx/frontend-component-header": "^5.6.0",
+    "@edx/frontend-platform": "8.0.0",
     "@edx/openedx-atlas": "^0.6.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@openedx/frontend-slot-footer": "^1.0.2",
     "@openedx/paragon": "21.11.3",
     "@redux-beacon/segment": "^1.1.0",
     "@reduxjs/toolkit": "^1.6.1",
@@ -72,10 +75,10 @@
     "whatwg-fetch": "^3.6.2"
   },
   "devDependencies": {
-    "@edx/browserslist-config": "^1.2.0",
-    "@edx/react-unit-test-utils": "2.0.0",
+    "@edx/browserslist-config": "^1.3.0",
+    "@edx/react-unit-test-utils": "3.0.0",
     "@edx/reactifex": "^2.1.1",
-    "@openedx/frontend-build": "13.0.28",
+    "@openedx/frontend-build": "14.0.3",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "12.1.5",
     "axios-mock-adapter": "^1.20.0",
@@ -83,6 +86,7 @@
     "husky": "^7.0.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-expect-message": "^1.0.2",
     "react-dev-utils": "^12.0.1",
     "react-test-renderer": "^17.0.2",

src/App.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { BrowserRouter as Router } from 'react-router-dom';
 
-import Footer from '@edx/frontend-component-footer';
+import FooterSlot from '@openedx/frontend-slot-footer';
 import { LearningHeader as Header } from '@edx/frontend-component-header';
 
 import { selectors } from 'data/redux';
@@ -32,7 +32,7 @@ export const App = ({ courseMetadata, isEnabled }) => (
       <main data-testid="main">
         <ListView />
       </main>
-      <Footer logo={process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG} data-testid="footer" />
+      <FooterSlot />
     </div>
   </Router>
 );

src/App.test.jsx

@@ -15,14 +15,13 @@ jest.mock('data/redux', () => ({
 jest.mock('@edx/frontend-component-header', () => ({
   LearningHeader: 'Header',
 }));
-jest.mock('@edx/frontend-component-footer', () => 'Footer');
+jest.mock('@edx/frontend-component-footer', () => ({ FooterSlot: 'Footer' }));
 
 jest.mock('containers/DemoWarning', () => 'DemoWarning');
 jest.mock('containers/CTA', () => 'CTA');
 jest.mock('containers/ListView', () => 'ListView');
 jest.mock('components/Head', () => 'Head');
 
-const logo = 'fakeLogo.png';
 let el;
 
 describe('App router component', () => {
@@ -42,7 +41,6 @@ describe('App router component', () => {
   });
   describe('component', () => {
     beforeEach(() => {
-      process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG = logo;
       el = shallow(<App {...props} />);
     });
     describe('Router', () => {
@@ -51,9 +49,6 @@ describe('App router component', () => {
         expect(el.instance.findByTestId('main')[0].children[0].type).toBe('ListView');
       });
     });
-    test('Footer logo drawn from env variable', () => {
-      expect(el.instance.findByTestId('footer')[0].props.logo).toEqual(logo);
-    });
 
     test('Header to use courseMetadata props', () => {
       const {

src/__snapshots__/App.test.jsx.snap

@@ -18,10 +18,7 @@ exports[`App router component snapshot: disabled (show demo warning) 1`] = `
     >
       <ListView />
     </main>
-    <Footer
-      data-testid="footer"
-      logo="https://edx-cdn.org/v3/stage/open-edx-tag.svg"
-    />
+    <FooterSlot />
   </div>
 </BrowserRouter>
 `;
@@ -43,10 +40,7 @@ exports[`App router component snapshot: enabled 1`] = `
     >
       <ListView />
     </main>
-    <Footer
-      data-testid="footer"
-      logo="https://edx-cdn.org/v3/stage/open-edx-tag.svg"
-    />
+    <FooterSlot />
   </div>
 </BrowserRouter>
 `;

src/__snapshots__/index.test.jsx.snap

@@ -9,7 +9,7 @@ exports[`app registry subscribe: APP_INIT_ERROR.  snapshot: displays an ErrorPag
 exports[`app registry subscribe: APP_READY.  links App to root element 1`] = `
 <AppProvider
   store={
-    Object {
+    {
       "dispatch": [Function],
       "getState": [Function],
       "replaceReducer": [Function],

src/components/FilePreview/Banners/__snapshots__/ErrorBanner.test.jsx.snap

@@ -3,7 +3,7 @@
 exports[`Error Banner component snapshot 1`] = `
 <Alert
   actions={
-    Array [
+    [
       <Button
         onClick={[MockFunction action1.onClick]}
         variant="outline-primary"

src/components/FilePreview/BaseRenderers/__snapshots__/PDFRenderer.test.jsx.snap

@@ -12,7 +12,7 @@ exports[`PDF Renderer Component snapshots first page, prev is disabled 1`] = `
     <div
       className="page-wrapper"
       style={
-        Object {
+        {
           "height": 200,
         }
       }
@@ -80,7 +80,7 @@ exports[`PDF Renderer Component snapshots on last page, next is disabled 1`] = `
     <div
       className="page-wrapper"
       style={
-        Object {
+        {
           "height": 200,
         }
       }

src/components/FilePreview/__snapshots__/FileRenderer.test.jsx.snap

@@ -3,7 +3,7 @@
 exports[`FileRenderer component snapshot is not loading, with error 1`] = `
 <FileCard
   file={
-    Object {
+    {
       "downloadUrl": "file download url",
       "name": "filename.txt",
     }
@@ -19,7 +19,7 @@ exports[`FileRenderer component snapshot is not loading, with error 1`] = `
 exports[`FileRenderer component snapshot isLoading, no Error 1`] = `
 <FileCard
   file={
-    Object {
+    {
       "downloadUrl": "file download url",
       "name": "filename.txt",
     }

src/components/FilePreview/hooks.js

@@ -79,7 +79,7 @@ export const renderHooks = ({
     message: messages.retryButton,
   };
   const error = {
-    headerMessage: errorMessage,
+    headingMessage: errorMessage,
     children: intl.formatMessage(errorMessage),
     actions: [errorAction],
   };

src/components/FilePreview/hooks.test.js

@@ -55,7 +55,7 @@ describe('FilePreview hooks', () => {
           });
           describe('error', () => {
             it('loads message from current error status, if valid, else from serverError', () => {
-              expect(hook.error.headerMessage).toEqual(
+              expect(hook.error.headingMessage).toEqual(
                 hooks.ERROR_STATUSES[ErrorStatuses.serverError],
               );
               expect(hook.error.children).toEqual(
@@ -63,7 +63,7 @@ describe('FilePreview hooks', () => {
               );
               state.mockVal(state.keys.errorStatus, ErrorStatuses.notFound);
               hook = hooks.renderHooks({ intl: { formatMessage }, file });
-              expect(hook.error.headerMessage).toEqual(
+              expect(hook.error.headingMessage).toEqual(
                 hooks.ERROR_STATUSES[ErrorStatuses.notFound],
               );
               expect(hook.error.children).toEqual(

src/containers/CriterionContainer/__snapshots__/ReviewCriterion.test.jsx.snap

@@ -25,7 +25,7 @@ exports[`Review Crition Container snapshot 1`] = `
           description="criterion option point value display"
           id="ora-grading.RadioCriterion.optionPoints"
           values={
-            Object {
+            {
               "points": 1,
             }
           }
@@ -54,7 +54,7 @@ exports[`Review Crition Container snapshot 1`] = `
           description="criterion option point value display"
           id="ora-grading.RadioCriterion.optionPoints"
           values={
-            Object {
+            {
               "points": 2,
             }
           }

src/containers/ListView/__snapshots__/ListError.test.jsx.snap

@@ -3,7 +3,7 @@
 exports[`ListError component component render tests snapshot 1`] = `
 <Alert
   actions={
-    Array [
+    [
       <Button
         onClick={[MockFunction]}
       >
@@ -30,7 +30,7 @@ exports[`ListError component component render tests snapshot 1`] = `
       description="Initialization failure alert message line 2"
       id="ora-grading.ListView.loadErrorMessage1"
       values={
-        Object {
+        {
           "backToResponses": <Hyperlink
             destination="api/openResponse/test-course-id"
           >

src/containers/ListView/__snapshots__/SelectedBulkAction.test.jsx.snap

@@ -11,7 +11,7 @@ exports[`SelectedBulkAction component snapshots 1`] = `
     description="Button text to load selected responses for review/grading"
     id="ora-grading.ListView.viewSelectedResponses"
     values={
-      Object {
+      {
         "value": 2,
       }
     }

src/containers/ListView/__snapshots__/SubmissionsTable.test.jsx.snap

@@ -9,50 +9,50 @@ exports[`SubmissionsTable component component render tests snapshots snapshot: h
   <DataTable
     FilterStatusComponent={[MockFunction FilterStatusComponent]}
     bulkActions={
-      Array [
+      [
         <mockConstructor
           handleClick={[Function]}
         />,
       ]
     }
     columns={
-      Array [
-        Object {
+      [
+        {
           "Header": "Username",
           "accessor": "username",
         },
-        Object {
+        {
           "Cell": [Function],
           "Header": "Learner submission date",
           "accessor": "dateSubmitted",
           "disableFilters": true,
         },
-        Object {
+        {
           "Cell": [Function],
           "Header": "Grade",
           "accessor": "score",
           "disableFilters": true,
         },
-        Object {
+        {
           "Cell": [Function],
           "Filter": "MultiSelectDropdownFilter",
           "Header": "Grading status",
           "accessor": "gradingStatus",
           "filter": "includesValue",
-          "filterChoices": Array [
-            Object {
+          "filterChoices": [
+            {
               "name": "Ungraded",
               "value": "ungraded",
             },
-            Object {
+            {
               "name": "Grading Completed",
               "value": "graded",
             },
-            Object {
+            {
               "name": "Currently being graded by someone else",
               "value": "locked",
             },
-            Object {
+            {
               "name": "You are currently grading this response",
               "value": "in-progress",
             },
@@ -61,29 +61,29 @@ exports[`SubmissionsTable component component render tests snapshots snapshot: h
       ]
     }
     data={
-      Array [
-        Object {
+      [
+        {
           "dateSubmitted": "2021-12-08 09:06:15.319213+00:00",
           "gradingStatus": "ungraded",
-          "score": Object {
+          "score": {
             "pointsEarned": 1,
             "pointsPossible": 10,
           },
           "username": "username-1",
         },
-        Object {
+        {
           "dateSubmitted": "2021-12-10 18:06:15.319213+00:00",
           "gradingStatus": "graded",
-          "score": Object {
+          "score": {
             "pointsEarned": 2,
             "pointsPossible": 10,
           },
           "username": "username-2",
         },
-        Object {
+        {
           "dateSubmitted": "2021-12-11 07:06:15.319213+00:00",
           "gradingStatus": "in-progress",
-          "score": Object {
+          "score": {
             "pointsEarned": 3,
             "pointsPossible": 10,
           },
@@ -93,12 +93,12 @@ exports[`SubmissionsTable component component render tests snapshots snapshot: h
     }
     data-testid="data-table"
     defaultColumnValues={
-      Object {
+      {
         "Filter": "TextFilter",
       }
     }
     initialState={
-      Object {
+      {
         "pageIndex": 0,
         "pageSize": 10,
       }
@@ -110,7 +110,7 @@ exports[`SubmissionsTable component component render tests snapshots snapshot: h
     itemCount={3}
     numBreakoutFilters={2}
     tableActions={
-      Array [
+      [
         <mockConstructor
           handleClick={[Function]}
         />,
@@ -131,50 +131,50 @@ exports[`SubmissionsTable component component render tests snapshots snapshot: t
   <DataTable
     FilterStatusComponent={[MockFunction FilterStatusComponent]}
     bulkActions={
-      Array [
+      [
         <mockConstructor
           handleClick={[Function]}
         />,
       ]
     }
     columns={
-      Array [
-        Object {
+      [
+        {
           "Header": "Team name",
           "accessor": "teamName",
         },
-        Object {
+        {
           "Cell": [Function],
           "Header": "Team submission date",
           "accessor": "dateSubmitted",
           "disableFilters": true,
         },
-        Object {
+        {
           "Cell": [Function],
           "Header": "Grade",
           "accessor": "score",
           "disableFilters": true,
         },
-        Object {
+        {
           "Cell": [Function],
           "Filter": "MultiSelectDropdownFilter",
           "Header": "Grading status",
           "accessor": "gradingStatus",
           "filter": "includesValue",
-          "filterChoices": Array [
-            Object {
+          "filterChoices": [
+            {
               "name": "Ungraded",
               "value": "ungraded",
             },
-            Object {
+            {
               "name": "Grading Completed",
               "value": "graded",
             },
-            Object {
+            {
               "name": "Currently being graded by someone else",
               "value": "locked",
             },
-            Object {
+            {
               "name": "You are currently grading this response",
               "value": "in-progress",
             },
@@ -183,29 +183,29 @@ exports[`SubmissionsTable component component render tests snapshots snapshot: t
       ]
     }
     data={
-      Array [
-        Object {
+      [
+        {
           "dateSubmitted": "2021-12-08 09:06:15.319213+00:00",
           "gradingStatus": "ungraded",
-          "score": Object {
+          "score": {
             "pointsEarned": 1,
             "pointsPossible": 10,
           },
           "teamName": "teamName-1",
         },
-        Object {
+        {
           "dateSubmitted": "2021-12-10 18:06:15.319213+00:00",
           "gradingStatus": "graded",
-          "score": Object {
+          "score": {
             "pointsEarned": 2,
             "pointsPossible": 10,
           },
           "teamName": "teamName-2",
         },
-        Object {
+        {
           "dateSubmitted": "2021-12-11 07:06:15.319213+00:00",
           "gradingStatus": "in-progress",
-          "score": Object {
+          "score": {
             "pointsEarned": 3,
             "pointsPossible": 10,
           },
@@ -215,12 +215,12 @@ exports[`SubmissionsTable component component render tests snapshots snapshot: t
     }
     data-testid="data-table"
     defaultColumnValues={
-      Object {
+      {
         "Filter": "TextFilter",
       }
     }
     initialState={
-      Object {
+      {
         "pageIndex": 0,
         "pageSize": 10,
       }
@@ -232,7 +232,7 @@ exports[`SubmissionsTable component component render tests snapshots snapshot: t
     itemCount={3}
     numBreakoutFilters={2}
     tableActions={
-      Array [
+      [
         <mockConstructor
           handleClick={[Function]}
         />,

src/containers/NotificationsBanner/NotificationsBanner.test.jsx

@@ -1,10 +1,30 @@
 import React from 'react';
 import { shallow } from '@edx/react-unit-test-utils';
+import { getConfig } from '@edx/frontend-platform';
 
 import { NotificationsBanner } from '.';
 
+jest.mock('@edx/frontend-platform', () => ({
+  getConfig: jest.fn(),
+}));
+
 describe('NotificationsBanner component', () => {
-  test('snapshots', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('snapshots with empty ACCOUNT_SETTINGS_URL', () => {
+    getConfig.mockReturnValue({
+      ACCOUNT_SETTINGS_URL: '',
+    });
+    const el = shallow(<NotificationsBanner hide />);
+    expect(el.snapshot).toMatchSnapshot();
+  });
+
+  test('snapshots with ACCOUNT_SETTINGS_URL', () => {
+    getConfig.mockReturnValue({
+      ACCOUNT_SETTINGS_URL: 'http://localhost:1997',
+    });
     const el = shallow(<NotificationsBanner hide />);
     expect(el.snapshot).toMatchSnapshot();
   });

src/containers/NotificationsBanner/__snapshots__/NotificationsBanner.test.jsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NotificationsBanner component snapshots 1`] = `
+exports[`NotificationsBanner component snapshots with ACCOUNT_SETTINGS_URL 1`] = `
 <PageBanner
   variant="accentB"
 >
@@ -27,3 +27,22 @@ exports[`NotificationsBanner component snapshots 1`] = `
   </span>
 </PageBanner>
 `;
+
+exports[`NotificationsBanner component snapshots with empty ACCOUNT_SETTINGS_URL 1`] = `
+<PageBanner
+  variant="accentB"
+>
+  <span>
+    <FormattedMessage
+      defaultMessage="You can now enable notifications for ORA assignments that require staff grading, from the "
+      description="user info message that user can enable notifications for ORA assignments"
+      id="ora-grading.NotificationsBanner.Message"
+    />
+    <FormattedMessage
+      defaultMessage="preferences center."
+      description="placeholder for the preferences center link"
+      id="ora-grading.NotificationsBanner.linkMessage"
+    />
+  </span>
+</PageBanner>
+`;

src/containers/NotificationsBanner/index.jsx

@@ -10,16 +10,26 @@ export const NotificationsBanner = () => (
   <PageBanner variant="accentB">
     <span>
       <FormattedMessage {...messages.infoMessage} />
-      <Hyperlink
-        isInline
-        variant="muted"
-        destination={`${getConfig().ACCOUNT_SETTINGS_URL}/notifications`}
-        target="_blank"
-        rel="noopener noreferrer"
-        showLaunchIcon={false}
-      >
-        <FormattedMessage {...messages.notificationsBannerLinkMessage} />
-      </Hyperlink>
+      {
+        (
+          getConfig().ACCOUNT_SETTINGS_URL === null
+            || getConfig().ACCOUNT_SETTINGS_URL === undefined
+            || getConfig().ACCOUNT_SETTINGS_URL.trim().length === 0
+        ) ? (
+          <FormattedMessage {...messages.notificationsBannerPreferencesCenterMessage} />
+          ) : (
+            <Hyperlink
+              isInline
+              variant="muted"
+              destination={`${getConfig().ACCOUNT_SETTINGS_URL}/notifications`}
+              target="_blank"
+              rel="noopener noreferrer"
+              showLaunchIcon={false}
+            >
+              <FormattedMessage {...messages.notificationsBannerPreferencesCenterMessage} />
+            </Hyperlink>
+          )
+        }
     </span>
   </PageBanner>
 );

src/containers/NotificationsBanner/messages.js

@@ -8,7 +8,7 @@ const messages = defineMessages({
     defaultMessage: 'You can now enable notifications for ORA assignments that require staff grading, from the ',
     description: 'user info message that user can enable notifications for ORA assignments',
   },
-  notificationsBannerLinkMessage: {
+  notificationsBannerPreferencesCenterMessage: {
     id: 'ora-grading.NotificationsBanner.linkMessage',
     defaultMessage: 'preferences center.',
     description: 'placeholder for the preferences center link',

src/containers/ResponseDisplay/__snapshots__/FileDownload.test.jsx.snap

@@ -3,13 +3,13 @@
 exports[`FileDownload component snapshot download is completed 1`] = `
 <StatefulButton
   disabledStates={
-    Array [
+    [
       "pending",
       "complete",
     ]
   }
   icons={
-    Object {
+    {
       "complete": <Icon
         className="fa fa-check"
       />,
@@ -25,7 +25,7 @@ exports[`FileDownload component snapshot download is completed 1`] = `
     }
   }
   labels={
-    Object {
+    {
       "complete": <FormattedMessage
         defaultMessage="Downloaded!"
         description="Download files completed state label"
@@ -56,13 +56,13 @@ exports[`FileDownload component snapshot download is completed 1`] = `
 exports[`FileDownload component snapshot download is failed 1`] = `
 <StatefulButton
   disabledStates={
-    Array [
+    [
       "pending",
       "complete",
     ]
   }
   icons={
-    Object {
+    {
       "complete": <Icon
         className="fa fa-check"
       />,
@@ -78,7 +78,7 @@ exports[`FileDownload component snapshot download is failed 1`] = `
     }
   }
   labels={
-    Object {
+    {
       "complete": <FormattedMessage
         defaultMessage="Downloaded!"
         description="Download files completed state label"
@@ -109,13 +109,13 @@ exports[`FileDownload component snapshot download is failed 1`] = `
 exports[`FileDownload component snapshot download is inactive 1`] = `
 <StatefulButton
   disabledStates={
-    Array [
+    [
       "pending",
       "complete",
     ]
   }
   icons={
-    Object {
+    {
       "complete": <Icon
         className="fa fa-check"
       />,
@@ -131,7 +131,7 @@ exports[`FileDownload component snapshot download is inactive 1`] = `
     }
   }
   labels={
-    Object {
+    {
       "complete": <FormattedMessage
         defaultMessage="Downloaded!"
         description="Download files completed state label"
@@ -162,13 +162,13 @@ exports[`FileDownload component snapshot download is inactive 1`] = `
 exports[`FileDownload component snapshot download is pending 1`] = `
 <StatefulButton
   disabledStates={
-    Array [
+    [
       "pending",
       "complete",
     ]
   }
   icons={
-    Object {
+    {
       "complete": <Icon
         className="fa fa-check"
       />,
@@ -184,7 +184,7 @@ exports[`FileDownload component snapshot download is pending 1`] = `
     }
   }
   labels={
-    Object {
+    {
       "complete": <FormattedMessage
         defaultMessage="Downloaded!"
         description="Download files completed state label"

src/containers/ResponseDisplay/__snapshots__/PreviewDisplay.test.jsx.snap

@@ -12,7 +12,7 @@ exports[`PreviewDisplay component snapshot files render with props 1`] = `
 >
   <FileRenderer
     file={
-      Object {
+      {
         "description": "file description 0",
         "downloadUrl": "/url-path/fake_file_0.pdf",
         "name": "fake_file_0.pdf",
@@ -22,7 +22,7 @@ exports[`PreviewDisplay component snapshot files render with props 1`] = `
   />
   <FileRenderer
     file={
-      Object {
+      {
         "description": "file description 1",
         "downloadUrl": "/url-path/fake_file_1.jpg",
         "name": "fake_file_1.jpg",
@@ -32,7 +32,7 @@ exports[`PreviewDisplay component snapshot files render with props 1`] = `
   />
   <FileRenderer
     file={
-      Object {
+      {
         "description": "file description 2",
         "downloadUrl": "/url-path/fake_file_2.jpeg",
         "name": "fake_file_2.jpeg",
@@ -42,7 +42,7 @@ exports[`PreviewDisplay component snapshot files render with props 1`] = `
   />
   <FileRenderer
     file={
-      Object {
+      {
         "description": "file description 3",
         "downloadUrl": "/url-path/fake_file_3.png",
         "name": "fake_file_3.png",
@@ -52,7 +52,7 @@ exports[`PreviewDisplay component snapshot files render with props 1`] = `
   />
   <FileRenderer
     file={
-      Object {
+      {
         "description": "file description 4",
         "downloadUrl": "/url-path/fake_file_4.bmp",
         "name": "fake_file_4.bmp",
@@ -62,7 +62,7 @@ exports[`PreviewDisplay component snapshot files render with props 1`] = `
   />
   <FileRenderer
     file={
-      Object {
+      {
         "description": "file description 5",
         "downloadUrl": "/url-path/fake_file_5.txt",
         "name": "fake_file_5.txt",
@@ -72,7 +72,7 @@ exports[`PreviewDisplay component snapshot files render with props 1`] = `
   />
   <FileRenderer
     file={
-      Object {
+      {
         "description": "file description 6",
         "downloadUrl": "/url-path/fake_file_6.gif",
         "name": "fake_file_6.gif",
@@ -82,7 +82,7 @@ exports[`PreviewDisplay component snapshot files render with props 1`] = `
   />
   <FileRenderer
     file={
-      Object {
+      {
         "description": "file description 7",
         "downloadUrl": "/url-path/fake_file_7.jfif",
         "name": "fake_file_7.jfif",
@@ -92,7 +92,7 @@ exports[`PreviewDisplay component snapshot files render with props 1`] = `
   />
   <FileRenderer
     file={
-      Object {
+      {
         "description": "file description 8",
         "downloadUrl": "/url-path/fake_file_8.pjpeg",
         "name": "fake_file_8.pjpeg",
@@ -102,7 +102,7 @@ exports[`PreviewDisplay component snapshot files render with props 1`] = `
   />
   <FileRenderer
     file={
-      Object {
+      {
         "description": "file description 9",
         "downloadUrl": "/url-path/fake_file_9.pjp",
         "name": "fake_file_9.pjp",
@@ -112,7 +112,7 @@ exports[`PreviewDisplay component snapshot files render with props 1`] = `
   />
   <FileRenderer
     file={
-      Object {
+      {
         "description": "file description 10",
         "downloadUrl": "/url-path/fake_file_10.svg",
         "name": "fake_file_10.svg",

src/containers/ResponseDisplay/__snapshots__/SubmissionFiles.test.jsx.snap

@@ -53,19 +53,19 @@ exports[`SubmissionFiles component snapshot files existed for props 1`] = `
         >
           <DataTable
             columns={
-              Array [
-                Object {
+              [
+                {
                   "Cell": [MockFunction FileNameCell],
                   "Header": "Name",
                   "accessor": "name",
                 },
-                Object {
+                {
                   "Cell": [MockFunction FileExtensionCell],
                   "Header": "File Extension",
                   "accessor": "name",
                   "id": "extension",
                 },
-                Object {
+                {
                   "Cell": [MockFunction FilePopoverCell],
                   "Header": "File Metadata",
                   "accessor": "",
@@ -73,14 +73,14 @@ exports[`SubmissionFiles component snapshot files existed for props 1`] = `
               ]
             }
             data={
-              Array [
-                Object {
+              [
+                {
                   "description": "description for the file",
                   "downloadURL": "/valid-url-wink-wink",
                   "name": "some file name.jpg",
                   "size": 0,
                 },
-                Object {
+                {
                   "description": "description for this file",
                   "downloadURL": "/url-2",
                   "name": "file number 2.jpg",
@@ -101,14 +101,14 @@ exports[`SubmissionFiles component snapshot files existed for props 1`] = `
       <FileDownload
         data-testid="file-download"
         files={
-          Array [
-            Object {
+          [
+            {
               "description": "description for the file",
               "downloadURL": "/valid-url-wink-wink",
               "name": "some file name.jpg",
               "size": 0,
             },
-            Object {
+            {
               "description": "description for this file",
               "downloadURL": "/url-2",
               "name": "file number 2.jpg",
@@ -161,19 +161,19 @@ exports[`SubmissionFiles component snapshot files size exceed 1`] = `
         >
           <DataTable
             columns={
-              Array [
-                Object {
+              [
+                {
                   "Cell": [MockFunction FileNameCell],
                   "Header": "Name",
                   "accessor": "name",
                 },
-                Object {
+                {
                   "Cell": [MockFunction FileExtensionCell],
                   "Header": "File Extension",
                   "accessor": "name",
                   "id": "extension",
                 },
-                Object {
+                {
                   "Cell": [MockFunction FilePopoverCell],
                   "Header": "File Metadata",
                   "accessor": "",
@@ -181,14 +181,14 @@ exports[`SubmissionFiles component snapshot files size exceed 1`] = `
               ]
             }
             data={
-              Array [
-                Object {
+              [
+                {
                   "description": "description for the file",
                   "downloadURL": "/valid-url-wink-wink",
                   "name": "some file name.jpg",
                   "size": 1610612737,
                 },
-                Object {
+                {
                   "description": "description for this file",
                   "downloadURL": "/url-2",
                   "name": "file number 2.jpg",

src/containers/ResponseDisplay/__snapshots__/index.test.jsx.snap

@@ -23,11 +23,11 @@ exports[`ResponseDisplay component snapshot file upload disabled without respons
 >
   <SubmissionFiles
     data-testid="submission-files"
-    files={Array []}
+    files={[]}
   />
   <PreviewDisplay
     data-testid="allow-file-upload"
-    files={Array []}
+    files={[]}
   />
 </div>
 `;
@@ -39,13 +39,13 @@ exports[`ResponseDisplay component snapshot file upload enable with valid respon
   <SubmissionFiles
     data-testid="submission-files"
     files={
-      Array [
-        Object {
+      [
+        {
           "description": "description for the file",
           "downloadURL": "/valid-url-wink-wink",
           "name": "some file name.jpg",
         },
-        Object {
+        {
           "description": "description for this file",
           "downloadURL": "/url-2",
           "name": "file number 2.jpg",
@@ -56,13 +56,13 @@ exports[`ResponseDisplay component snapshot file upload enable with valid respon
   <PreviewDisplay
     data-testid="allow-file-upload"
     files={
-      Array [
-        Object {
+      [
+        {
           "description": "description for the file",
           "downloadURL": "/valid-url-wink-wink",
           "name": "some file name.jpg",
         },
-        Object {
+        {
           "description": "description for this file",
           "downloadURL": "/url-2",
           "name": "file number 2.jpg",
@@ -89,11 +89,11 @@ exports[`ResponseDisplay component snapshot file upload enable without response
 >
   <SubmissionFiles
     data-testid="submission-files"
-    files={Array []}
+    files={[]}
   />
   <PreviewDisplay
     data-testid="allow-file-upload"
-    files={Array []}
+    files={[]}
   />
 </div>
 `;

src/containers/ReviewActions/__snapshots__/index.test.jsx.snap

@@ -25,7 +25,7 @@ exports[`ReviewActions component component snapshot: do not show rubric 1`] = `
           description="Review pane action bar score display"
           id="ora-grading.ReviewActions.pointsDisplay"
           values={
-            Object {
+            {
               "pointsEarned": 3,
               "pointsPossible": 10,
             }
@@ -80,7 +80,7 @@ exports[`ReviewActions component component snapshot: loading 1`] = `
           description="Review pane action bar score display"
           id="ora-grading.ReviewActions.pointsDisplay"
           values={
-            Object {
+            {
               "pointsEarned": 3,
               "pointsPossible": 10,
             }

src/containers/ReviewActions/components/__snapshots__/SubmissionNavigation.test.jsx.snap

@@ -21,7 +21,7 @@ exports[`SubmissionNavigation component component snapshot: no next submission (
       description="Submission navigation location label"
       id="ora-grading.ReviewActions.navigationLabel"
       values={
-        Object {
+        {
           "current": 5,
           "total": 5,
         }
@@ -61,7 +61,7 @@ exports[`SubmissionNavigation component component snapshot: no prev submission (
       description="Submission navigation location label"
       id="ora-grading.ReviewActions.navigationLabel"
       values={
-        Object {
+        {
           "current": 1,
           "total": 5,
         }

src/containers/ReviewModal/ReviewErrors/LockErrors.jsx

@@ -16,7 +16,7 @@ import ReviewError from './ReviewError';
  */
 export class LockErrors extends React.Component {
   get errorProp() {
-    if (this.props.errorStatus === ErrorStatuses.forbidden) {
+    if (this.props.errorStatus === ErrorStatuses.conflict) {
       return {
         heading: messages.errorLockContestedHeading,
         message: messages.errorLockContested,

src/containers/ReviewModal/ReviewErrors/LockErrors.test.jsx

@@ -41,7 +41,7 @@ describe('LockErrors component', () => {
         expect(el.snapshot).toMatchSnapshot();
       });
       test('snapshot: error with conflicted lock', () => {
-        el = shallow(<LockErrors {...props} errorStatus={ErrorStatuses.forbidden} />);
+        el = shallow(<LockErrors {...props} errorStatus={ErrorStatuses.conflict} />);
         expect(el.snapshot).toMatchSnapshot();
       });
     });

src/containers/ReviewModal/ReviewErrors/SubmitErrors/__snapshots__/index.test.jsx.snap

@@ -5,7 +5,7 @@ exports[`SubmitErrors component snapshots snapshot: no failure 1`] = `null`;
 exports[`SubmitErrors component snapshots snapshot: with valid error, loads from hook 1`] = `
 <ReviewError
   actions={
-    Object {
+    {
       "cancel": "hooks.reviewActions.cancel",
       "confirm": "hooks.reviewActions.confirm",
     }

src/containers/ReviewModal/ReviewErrors/__snapshots__/DownloadErrors.test.jsx.snap

@@ -3,17 +3,17 @@
 exports[`DownloadErrors component component snapshots failed: show error 1`] = `
 <ReviewError
   actions={
-    Object {
-      "cancel": Object {
-        "message": Object {
+    {
+      "cancel": {
+        "message": {
           "defaultMessage": "Dismiss",
           "description": "Dismiss error action button text",
           "id": "ora-grading.ReviewModal.dismiss",
         },
         "onClick": [Function],
       },
-      "confirm": Object {
-        "message": Object {
+      "confirm": {
+        "message": {
           "defaultMessage": "Retry download",
           "description": "Failed download retry button text",
           "id": "ora-grading.ReviewModal.errorRetryDownload",
@@ -23,7 +23,7 @@ exports[`DownloadErrors component component snapshots failed: show error 1`] = `
     }
   }
   headingMessage={
-    Object {
+    {
       "defaultMessage": "Couldn't download files",
       "id": "ora-grading.ReviewModal.errorDownloadFailed",
     }

src/containers/ReviewModal/ReviewErrors/__snapshots__/LockErrors.test.jsx.snap

@@ -3,7 +3,7 @@
 exports[`LockErrors component component snapshots no failure 1`] = `
 <ReviewError
   headingMessage={
-    Object {
+    {
       "defaultMessage": "Invalid request. Please check your input.",
       "description": "Error lock request for missing params",
       "id": "ora-grading.ReviewModal.errorLockBadRequestHeading",
@@ -22,7 +22,7 @@ exports[`LockErrors component component snapshots no failure 1`] = `
 exports[`LockErrors component component snapshots snapshot: error with bad request 1`] = `
 <ReviewError
   headingMessage={
-    Object {
+    {
       "defaultMessage": "Invalid request. Please check your input.",
       "description": "Error lock request for missing params",
       "id": "ora-grading.ReviewModal.errorLockBadRequestHeading",
@@ -41,7 +41,7 @@ exports[`LockErrors component component snapshots snapshot: error with bad reque
 exports[`LockErrors component component snapshots snapshot: error with conflicted lock 1`] = `
 <ReviewError
   headingMessage={
-    Object {
+    {
       "defaultMessage": "The lock owned by another user",
       "description": "Error lock by someone else",
       "id": "ora-grading.ReviewModal.errorLockContestedHeading",

src/containers/ReviewModal/ReviewErrors/__snapshots__/ReviewError.test.jsx.snap

@@ -3,7 +3,7 @@
 exports[`ReviewError component component snapshots cancel and confirm 1`] = `
 <Alert
   actions={
-    Array [
+    [
       <Button
         onClick={[MockFunction this.props.cancel.onClick]}
         variant="outline-primary"
@@ -43,7 +43,7 @@ exports[`ReviewError component component snapshots cancel and confirm 1`] = `
 exports[`ReviewError component component snapshots cancel only 1`] = `
 <Alert
   actions={
-    Array [
+    [
       <Button
         onClick={[MockFunction this.props.cancel.onClick]}
         variant="outline-primary"
@@ -75,7 +75,7 @@ exports[`ReviewError component component snapshots cancel only 1`] = `
 exports[`ReviewError component component snapshots confirm only 1`] = `
 <Alert
   actions={
-    Array [
+    [
       <Button
         onClick={[MockFunction this.props.confirm.onClick]}
       >
@@ -105,7 +105,7 @@ exports[`ReviewError component component snapshots confirm only 1`] = `
 
 exports[`ReviewError component component snapshots no actions 1`] = `
 <Alert
-  actions={Array []}
+  actions={[]}
   className=""
   variant="danger"
 >

src/containers/ReviewModal/__snapshots__/index.test.jsx.snap

@@ -37,7 +37,7 @@ exports[`ReviewModal component component snapshots loading 1`] = `
   <ReviewContent />
   <LoadingMessage
     message={
-      Object {
+      {
         "defaultMessage": "Loading response",
         "description": "loading text for submission response review screen",
         "id": "ora-grading.ReviewModal.loadingResponse",

src/containers/Rubric/__snapshots__/index.test.jsx.snap

@@ -70,7 +70,7 @@ exports[`Rubric Container snapshot: show footer 1`] = `
     >
       <StatefulButton
         labels={
-          Object {
+          {
             "complete": "Grade Submitted",
             "default": "Submit grade",
             "pending": "Submitting grade",

src/data/redux/thunkActions/download.test.js

@@ -6,9 +6,9 @@ import { RequestKeys } from 'data/constants/requests';
 import api from 'data/services/lms/api';
 import * as download from './download';
 
-const mockBlobWriter = jest.fn().mockName('BlobWriter');
-const mockTextReader = jest.fn().mockName('TextReader');
-const mockBlobReader = jest.fn().mockName('BlobReader');
+const mockBlobWriter = jest.fn();
+const mockTextReader = jest.fn();
+const mockBlobReader = jest.fn();
 
 const mockZipAdd = jest.fn();
 const mockZipClose = jest.fn();
@@ -21,9 +21,9 @@ jest.mock('@zip.js/zip.js', () => {
       close: mockZipClose.mockImplementation(() => Promise.resolve(files)),
       files,
     })),
-    BlobWriter: () => mockBlobWriter,
-    TextReader: () => mockTextReader,
-    BlobReader: () => mockBlobReader,
+    BlobWriter: function _() { return mockBlobWriter; },
+    TextReader: function _() { return mockTextReader; },
+    BlobReader: function _() { return mockBlobReader; },
   };
 });
 

src/plugin-slots/FooterSlot/README.md

@@ -0,0 +1,50 @@
+# Footer Slot
+
+### Slot ID: `footer_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the footer.
+
+The implementation of the `FooterSlot` component lives in [the `frontend-slot-footer` repository](https://github.com/openedx/frontend-slot-footer/).
+
+## Example
+
+The following `env.config.jsx` will replace the default footer.
+
+![Screenshot of Default Footer](./images/default_footer.png)
+
+with a simple custom footer
+
+![Screenshot of Custom Footer](./images/custom_footer.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    footer_slot: {
+      plugins: [
+        {
+          // Hide the default footer
+          op: PLUGIN_OPERATIONS.Hide,
+          widgetId: 'default_contents',
+        },
+        {
+          // Insert a custom footer
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_footer',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🦶</h1>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```

src/plugin-slots/README.md

@@ -0,0 +1,3 @@
+# `frontend-app-ora-grading` Plugin Slots
+
+* [`footer_slot`](./FooterSlot/)