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

.github/workflows/ci.yml

@@ -10,7 +10,7 @@ on:
 
 jobs:
   tests:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
     strategy:
       matrix:
         node: [18.15, 20]

.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

package-lock.json

@@ -10,7 +10,7 @@
       "license": "AGPL-3.0",
       "dependencies": {
         "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-        "@edx/frontend-component-header": "5.3.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",
@@ -57,7 +57,7 @@
         "whatwg-fetch": "^3.6.2"
       },
       "devDependencies": {
-        "@edx/browserslist-config": "^1.2.0",
+        "@edx/browserslist-config": "^1.3.0",
         "@edx/react-unit-test-utils": "3.0.0",
         "@edx/reactifex": "^2.1.1",
         "@openedx/frontend-build": "14.0.3",
@@ -2048,10 +2048,11 @@
       "integrity": "sha512-Dn9CtpC8fovh++Xi4NF5NJoeR9yU2yXZnV9IujxIyGd/dn0Phq5t6dzJVfupwq09mpDnzJv7egA8Znz/3ljO+w=="
     },
     "node_modules/@edx/browserslist-config": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@edx/browserslist-config/-/browserslist-config-1.2.0.tgz",
-      "integrity": "sha512-T1+6P52Yx7SMkmoIr4O0Q3m/DyRdrLTJbv1xVijdRLFEq1hqdafEs+Ln1423U5LSkTePb9AOkEtL1G0RZLFl1w==",
-      "dev": true
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@edx/browserslist-config/-/browserslist-config-1.3.0.tgz",
+      "integrity": "sha512-qf4BHyjdsx/bVMQmfj1y/MwTZwI5+9DAOul+PJnyO+YhWSwdxtdvXqkOw1wLxqmDtqOPc5bYgDQf8zZfe+aDFA==",
+      "dev": true,
+      "license": "AGPL-3.0"
     },
     "node_modules/@edx/eslint-config": {
       "version": "4.0.0",
@@ -2138,17 +2139,19 @@
       }
     },
     "node_modules/@edx/frontend-component-header": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-component-header/-/frontend-component-header-5.3.0.tgz",
-      "integrity": "sha512-xBtZDWx54Wa2WEwY175wzirnsHgrr7T8TGDZfsMXuKVYbFosjSYSFyrOkxgHb8AOAykjlUEaWLJorsppyLb4YA==",
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-component-header/-/frontend-component-header-5.6.0.tgz",
+      "integrity": "sha512-ITLLrej6BbWVc/0baMkKg/ACTvUGSR188Rn/BC2Y82Tdu8gRsZB6+0GUsDX/6FJjeIazLXdUusKlfwVU90sXLA==",
       "dependencies": {
-        "@fortawesome/fontawesome-svg-core": "6.5.2",
-        "@fortawesome/free-brands-svg-icons": "6.5.2",
-        "@fortawesome/free-regular-svg-icons": "6.5.2",
-        "@fortawesome/free-solid-svg-icons": "6.5.2",
+        "@fortawesome/fontawesome-svg-core": "6.6.0",
+        "@fortawesome/free-brands-svg-icons": "6.6.0",
+        "@fortawesome/free-regular-svg-icons": "6.6.0",
+        "@fortawesome/free-solid-svg-icons": "6.6.0",
         "@fortawesome/react-fontawesome": "^0.2.0",
+        "@openedx/frontend-plugin-framework": "^1.3.0",
         "axios-mock-adapter": "1.22.0",
         "babel-polyfill": "6.26.0",
+        "classnames": "^2.5.1",
         "jest-environment-jsdom": "^29.7.0",
         "react-responsive": "8.2.0",
         "react-transition-group": "4.4.5"
@@ -2162,57 +2165,41 @@
       }
     },
     "node_modules/@edx/frontend-component-header/node_modules/@fortawesome/fontawesome-common-types": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.2.tgz",
-      "integrity": "sha512-gBxPg3aVO6J0kpfHNILc+NMhXnqHumFxOmjYCFfOiLZfwhnnfhtsdA2hfJlDnj+8PjAs6kKQPenOTKj3Rf7zHw==",
-      "hasInstallScript": true,
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz",
+      "integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==",
       "engines": {
         "node": ">=6"
       }
     },
     "node_modules/@edx/frontend-component-header/node_modules/@fortawesome/fontawesome-svg-core": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.2.tgz",
-      "integrity": "sha512-5CdaCBGl8Rh9ohNdxeeTMxIj8oc3KNBgIeLMvJosBMdslK/UnEB8rzyDRrbKdL1kDweqBPo4GT9wvnakHWucZw==",
-      "hasInstallScript": true,
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz",
+      "integrity": "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==",
       "dependencies": {
-        "@fortawesome/fontawesome-common-types": "6.5.2"
+        "@fortawesome/fontawesome-common-types": "6.6.0"
       },
       "engines": {
         "node": ">=6"
       }
     },
     "node_modules/@edx/frontend-component-header/node_modules/@fortawesome/free-brands-svg-icons": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.5.2.tgz",
-      "integrity": "sha512-zi5FNYdmKLnEc0jc0uuHH17kz/hfYTg4Uei0wMGzcoCL/4d3WM3u1VMc0iGGa31HuhV5i7ZK8ZlTCQrHqRHSGQ==",
-      "hasInstallScript": true,
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.6.0.tgz",
+      "integrity": "sha512-1MPD8lMNW/earme4OQi1IFHtmHUwAKgghXlNwWi9GO7QkTfD+IIaYpIai4m2YJEzqfEji3jFHX1DZI5pbY/biQ==",
       "dependencies": {
-        "@fortawesome/fontawesome-common-types": "6.5.2"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@edx/frontend-component-header/node_modules/@fortawesome/free-regular-svg-icons": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.5.2.tgz",
-      "integrity": "sha512-iabw/f5f8Uy2nTRtJ13XZTS1O5+t+anvlamJ3zJGLEVE2pKsAWhPv2lq01uQlfgCX7VaveT3EVs515cCN9jRbw==",
-      "hasInstallScript": true,
-      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "6.5.2"
+        "@fortawesome/fontawesome-common-types": "6.6.0"
       },
       "engines": {
         "node": ">=6"
       }
     },
     "node_modules/@edx/frontend-component-header/node_modules/@fortawesome/free-solid-svg-icons": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.2.tgz",
-      "integrity": "sha512-QWFZYXFE7O1Gr1dTIp+D6UcFUF0qElOnZptpi7PBUMylJh+vFmIedVe1Ir6RM1t2tEQLLSV1k7bR4o92M+uqlw==",
-      "hasInstallScript": true,
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz",
+      "integrity": "sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==",
       "dependencies": {
-        "@fortawesome/fontawesome-common-types": "6.5.2"
+        "@fortawesome/fontawesome-common-types": "6.6.0"
       },
       "engines": {
         "node": ">=6"
@@ -2979,7 +2966,6 @@
       "version": "6.6.0",
       "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.6.0.tgz",
       "integrity": "sha512-Yv9hDzL4aI73BEwSEh20clrY8q/uLxawaQ98lekBx6t9dQKDHcDzzV1p2YtBGTtolYtNqcWdniOnhzB+JPnQEQ==",
-      "peer": true,
       "dependencies": {
         "@fortawesome/fontawesome-common-types": "6.6.0"
       },
@@ -2991,7 +2977,6 @@
       "version": "6.6.0",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz",
       "integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==",
-      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -4047,9 +4032,9 @@
       }
     },
     "node_modules/@openedx/frontend-plugin-framework": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@openedx/frontend-plugin-framework/-/frontend-plugin-framework-1.2.3.tgz",
-      "integrity": "sha512-2FBBDESusqruZHuMDNZ7SmegwXlKcrR1Po0kgEbRUGnpZKCmDnpMc8koX0vaivl7Y+XB8FBZuWV6DSC1aXwrSw==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@openedx/frontend-plugin-framework/-/frontend-plugin-framework-1.3.0.tgz",
+      "integrity": "sha512-qLtX/4HIuWXiIhBdtBuL6mPVbV2un0rsFYx3I5+3tIUf7+T7WRq81a6JHU5QGyAmZy9dfiv7QwbqwiEQOVXVuQ==",
       "dependencies": {
         "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
         "classnames": "^2.3.2",

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,7 +28,7 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-header": "5.3.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",
@@ -72,7 +75,7 @@
     "whatwg-fetch": "^3.6.2"
   },
   "devDependencies": {
-    "@edx/browserslist-config": "^1.2.0",
+    "@edx/browserslist-config": "^1.3.0",
     "@edx/react-unit-test-utils": "3.0.0",
     "@edx/reactifex": "^2.1.1",
     "@openedx/frontend-build": "14.0.3",

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/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/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/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; },
   };
 });