fix: Update frontend-platform to version 8.3.8 for fixes with theme URL loading. (#472)

8.3.7: Simplify the logic for Paragon `fallbackThemeUrl` to always rely on `window.location?.origin`;
8.3.8: Allow the creation of URLs with only `brandOverride` definition.

.env

@@ -33,3 +33,5 @@ ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM=''
 APP_ID=''
 MFE_CONFIG_API_URL=''
 ACCOUNT_SETTINGS_URL=''
+# Fallback in local style files
+PARAGON_THEME_URLS={}

.env.development

@@ -38,3 +38,5 @@ ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='Footer'
 APP_ID=''
 MFE_CONFIG_API_URL=''
 ACCOUNT_SETTINGS_URL=http://localhost:1997
+# Fallback in local style files
+PARAGON_THEME_URLS={}

.env.test

@@ -36,3 +36,4 @@ ENTERPRISE_MARKETING_UTM_SOURCE='example.com'
 ENTERPRISE_MARKETING_UTM_CAMPAIGN='example.com Referral'
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='Footer'
 ACCOUNT_SETTINGS_URL=http://localhost:1997
+PARAGON_THEME_URLS={}

.github/workflows/ci.yml

@@ -11,9 +11,6 @@ on:
 jobs:
   tests:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node: [18.15, 20]
 
     steps:
     - name: Checkout
@@ -24,7 +21,7 @@ jobs:
       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: ${{ matrix.node }}
+        node-version-file: '.nvmrc'
 
     - name: Install dependencies
       run: npm ci

.github/workflows/npm-publish.yml

@@ -1,32 +0,0 @@
-name: Release CI
-on:
-  push:
-    tags:
-      - "*"
-
-jobs:
-  release:
-    name: Release
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-        with:
-          fetch-depth: 0
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v2
-        with:
-          node-version: 12
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Create Build
-        run: npm run build
-
-      - name: Release Package
-        env:
-          GITHUB_TOKEN: ${{ secrets.SEMANTIC_RELEASE_GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.SEMANTIC_RELEASE_NPM_TOKEN }}
-        run: npm semantic-release

.husky/pre-push

@@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npm run lint

.releaserc

@@ -1,27 +0,0 @@
-{
-  "branch": "master",
-  "tagFormat": "v${version}",
-  "verifyConditions": [
-    "@semantic-release/npm",
-    {
-      "path": "@semantic-release/github",
-      "assets": {
-        "path": "dist/*"
-      }
-    }
-  ],
-  "analyzeCommits": "@semantic-release/commit-analyzer",
-  "generateNotes": "@semantic-release/release-notes-generator",
-  "prepare": "@semantic-release/npm",
-  "publish": [
-    "@semantic-release/npm",
-    {
-      "path": "@semantic-release/github",
-      "assets": {
-        "path": "dist/*"
-      }
-    }
-  ],
-  "success": [],
-  "fail": []
-}

catalog-info.yaml

@@ -13,7 +13,9 @@ metadata:
     - url: "https://ora-grading.stage.edx.org"
       title: "Stage Site"
       icon: "Web"
+  annotations:
+    openedx.org/release: "master"     
 spec:
-  owner: "group:openedx-unmaintained"
+  owner: "user:codewithemad"
   type: 'website'
   lifecycle: 'production'

openedx.yaml

@@ -1,9 +0,0 @@
-# This file describes this Open edX repo, as described in OEP-2:
-# http://open-edx-proposals.readthedocs.io/en/latest/oeps/oep-0002.html#specification
-
-tags:
-  - frontend-app
-  - masters
-oeps:
-  oep-2: true    # Repository metadata
-openedx-release: {ref: master}

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",
@@ -13,9 +16,9 @@
     "lint-fix": "fedx-scripts eslint --fix --ext .jsx,.js src/",
     "semantic-release": "semantic-release",
     "start": "fedx-scripts webpack-dev-server --progress",
+    "dev": "PUBLIC_PATH=/ora-grading/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
     "test": "TZ=GMT fedx-scripts jest --coverage --passWithNoTests",
-    "watch-tests": "jest --watch",
-    "prepare": "husky install"
+    "watch-tests": "jest --watch"
   },
   "author": "edX",
   "license": "AGPL-3.0",
@@ -25,16 +28,17 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-header": "^5.6.0",
-    "@edx/frontend-platform": "8.0.0",
+    "@edx/frontend-component-footer": "^14.6.0",
+    "@edx/frontend-component-header": "^6.2.0",
+    "@edx/frontend-platform": "^8.3.8",
     "@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",
+    "@openedx/paragon": "^23.4.5",
     "@redux-beacon/segment": "^1.1.0",
+    "@redux-devtools/extension": "3.0.0",
     "@reduxjs/toolkit": "^1.6.1",
     "@testing-library/user-event": "^14.0.0",
     "@zip.js/zip.js": "^2.4.6",
@@ -52,18 +56,17 @@
     "moment": "^2.29.3",
     "prop-types": "15.8.1",
     "query-string": "7.1.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
     "react-intl": "6.4.7",
-    "react-pdf": "^5.5.0",
+    "react-pdf": "^7.0.0",
     "react-redux": "^7.2.9",
     "react-router": "6.21.3",
     "react-router-dom": "6.21.3",
     "react-router-redux": "^5.0.0-alpha.9",
     "redux": "4.2.1",
     "redux-beacon": "^2.1.0",
-    "redux-devtools-extension": "2.13.9",
     "redux-logger": "3.0.6",
     "redux-thunk": "2.4.2",
     "regenerator-runtime": "^0.14.0",
@@ -72,23 +75,21 @@
     "whatwg-fetch": "^3.6.2"
   },
   "devDependencies": {
-    "@edx/browserslist-config": "^1.2.0",
-    "@edx/react-unit-test-utils": "3.0.0",
+    "@edx/browserslist-config": "^1.3.0",
+    "@edx/react-unit-test-utils": "^4.0.0",
     "@edx/reactifex": "^2.1.1",
-    "@openedx/frontend-build": "14.0.3",
-    "@testing-library/jest-dom": "^6.0.0",
-    "@testing-library/react": "12.1.5",
+    "@openedx/frontend-build": "^14.3.3",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
     "axios-mock-adapter": "^1.20.0",
     "fetch-mock": "^9.11.0",
-    "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",
+    "react-test-renderer": "^18.3.1",
     "reactifex": "1.1.1",
-    "redux-mock-store": "^1.5.4",
-    "semantic-release": "^19.0.3"
+    "redux-mock-store": "^1.5.5"
   }
 }

src/App.jsx

@@ -3,13 +3,12 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { BrowserRouter as Router } from 'react-router-dom';
 
-import FooterSlot from '@openedx/frontend-slot-footer';
+import { FooterSlot } from '@edx/frontend-component-footer';
 import { LearningHeader as Header } from '@edx/frontend-component-header';
 
 import { selectors } from 'data/redux';
 
 import DemoWarning from 'containers/DemoWarning';
-import CTA from 'containers/CTA';
 import NotificationsBanner from 'containers/NotificationsBanner';
 import ListView from 'containers/ListView';
 
@@ -27,7 +26,6 @@ export const App = ({ courseMetadata, isEnabled }) => (
         data-testid="header"
       />
       {!isEnabled && <DemoWarning />}
-      <CTA />
       <NotificationsBanner />
       <main data-testid="main">
         <ListView />

src/App.scss

@@ -1,15 +1,13 @@
 // frontend-app-*/src/index.scss
-@import "~@edx/brand/paragon/fonts";
-@import "~@edx/brand/paragon/variables";
-@import "~@openedx/paragon/scss/core/core";
-@import "~@edx/brand/paragon/overrides";
+@use "@openedx/paragon/styles/css/core/custom-media-breakpoints" as paragonCustomMediaBreakpoints;
 
 $fa-font-path: "~font-awesome/fonts";
 @import "~font-awesome/scss/font-awesome";
 
-$input-focus-box-shadow: $input-box-shadow; // hack to get upgrade to paragon 4.0.0 to work
+$input-focus-box-shadow: var(--pgn-elevation-form-input-base); // hack to get upgrade to paragon 4.0.0 to work
 
 @import "~@edx/frontend-component-footer/dist/_footer";
+@import "~@edx/frontend-component-header/dist/index";
 
 #root {
   display: flex;

src/App.test.jsx

@@ -15,10 +15,9 @@ jest.mock('data/redux', () => ({
 jest.mock('@edx/frontend-component-header', () => ({
   LearningHeader: 'Header',
 }));
-jest.mock('@edx/frontend-component-footer', () => ({ FooterSlot: 'Footer' }));
+jest.mock('@edx/frontend-component-footer', () => ({ FooterSlot: 'FooterSlot' }));
 
 jest.mock('containers/DemoWarning', () => 'DemoWarning');
-jest.mock('containers/CTA', () => 'CTA');
 jest.mock('containers/ListView', () => 'ListView');
 jest.mock('components/Head', () => 'Head');
 

src/__snapshots__/App.test.jsx.snap

@@ -11,7 +11,6 @@ exports[`App router component snapshot: disabled (show demo warning) 1`] = `
       data-testid="header"
     />
     <DemoWarning />
-    <CTA />
     <NotificationsBanner />
     <main
       data-testid="main"
@@ -33,7 +32,6 @@ exports[`App router component snapshot: enabled 1`] = `
       courseTitle="course-title"
       data-testid="header"
     />
-    <CTA />
     <NotificationsBanner />
     <main
       data-testid="main"

src/__snapshots__/index.test.jsx.snap

@@ -1,24 +1,28 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`app registry subscribe: APP_INIT_ERROR.  snapshot: displays an ErrorPage to root element 1`] = `
-<ErrorPage
-  message="test-error-message"
-/>
+<React Strict Mode>
+  <ErrorPage
+    message="test-error-message"
+  />
+</React Strict Mode>
 `;
 
 exports[`app registry subscribe: APP_READY.  links App to root element 1`] = `
-<AppProvider
-  store={
-    {
-      "dispatch": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-      Symbol(Symbol.observable): [Function],
+<React Strict Mode>
+  <AppProvider
+    store={
+      {
+        "dispatch": [Function],
+        "getState": [Function],
+        "replaceReducer": [Function],
+        "subscribe": [Function],
+        Symbol(Symbol.observable): [Function],
+      }
     }
-  }
-  wrapWithRouter={false}
->
-  <App />
-</AppProvider>
+    wrapWithRouter={false}
+  >
+    <App />
+  </AppProvider>
+</React Strict Mode>
 `;

src/components/FilePreview/BaseRenderers/PDFRenderer.jsx

@@ -1,17 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
-import { pdfjs, Document, Page } from 'react-pdf';
+import { Document, Page, pdfjs } from 'react-pdf';
 import {
   Icon, Form, ActionRow, IconButton,
 } from '@openedx/paragon';
 import { ChevronLeft, ChevronRight } from '@openedx/paragon/icons';
-import pdfjsWorker from 'react-pdf/dist/esm/pdf.worker.entry';
 
 import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
 import { rendererHooks } from './pdfHooks';
 
-pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
+pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;
 
 /**
  * <PDFRenderer />

src/components/FilePreview/BaseRenderers/pdfHooks.jsx

@@ -1,16 +1,11 @@
 import { useState, useRef } from 'react';
 
-import { pdfjs } from 'react-pdf';
-import pdfjsWorker from 'react-pdf/dist/esm/pdf.worker.entry';
-
 import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
 
 import { ErrorStatuses } from 'data/constants/requests';
 import { StrictDict } from 'utils';
 import * as module from './pdfHooks';
 
-pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
-
 export const errors = StrictDict({
   missingPDF: 'MissingPDFException',
 });

src/components/FilePreview/FileCard.scss

@@ -1,7 +1,5 @@
-@import "@openedx/paragon/scss/core/core";
-
 .file-card {
-  margin: map-get($spacers, 1) 0;
+  margin: var(--pgn-spacing-spacer-1) 0;
 
   .file-card-title {
     text-overflow: ellipsis;
@@ -26,8 +24,8 @@
   white-space: pre-wrap;
 }
 
-@include media-breakpoint-down(sm) {
+@media (--pgn-size-breakpoint-max-width-sm) {
   .file-card-title {
-    width: calc(map-get($container-max-widths, "sm")/2);
+    width: calc(var(--pgn-size-container-max-width-sm)/2);
   }
-}
+}

src/containers/CTA/CTA.test.jsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { CTA } from '.';
-
-describe('CTA component', () => {
-  test('snapshots', () => {
-    const el = shallow(<CTA hide />);
-    expect(el.snapshot).toMatchSnapshot();
-  });
-});

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

@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CTA component snapshots 1`] = `
-<PageBanner>
-  <span>
-    <FormattedMessage
-      defaultMessage="Thanks for using the new ORA staff grading experience. "
-      description="Thank user for using ora and ask for feed back"
-      id="ora-grading.CTA.feedbackMessage"
-    />
-    <Hyperlink
-      destination="https://docs.google.com/forms/d/1Hu1rgJcCHl5_EtDb5Up3hiZ40sSUtkZQfRHJ3fWOvfQ/edit"
-      isInline={true}
-      showLaunchIcon={false}
-      target="_blank"
-      variant="muted"
-    >
-      <FormattedMessage
-        defaultMessage="Provide some feedback"
-        description="placeholder for the feedback anchor link"
-        id="ora-grading.CTA.linkMessage"
-      />
-    </Hyperlink>
-    <FormattedMessage
-      defaultMessage=" and let us know what you think!"
-      description="inform user to provide feedback"
-      id="ora-grading.CTA.letUsKnowMessage"
-    />
-  </span>
-</PageBanner>
-`;

src/containers/CTA/index.jsx

@@ -1,29 +0,0 @@
-import React from 'react';
-
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { PageBanner, Hyperlink } from '@openedx/paragon';
-
-import messages from './messages';
-
-/**
- * <CTA />
- */
-export const CTA = () => (
-  <PageBanner>
-    <span>
-      <FormattedMessage {...messages.ctaFeedbackMessage} />
-      <Hyperlink
-        isInline
-        variant="muted"
-        destination="https://docs.google.com/forms/d/1Hu1rgJcCHl5_EtDb5Up3hiZ40sSUtkZQfRHJ3fWOvfQ/edit"
-        target="_blank"
-        showLaunchIcon={false}
-      >
-        <FormattedMessage {...messages.ctaLinkMessage} />
-      </Hyperlink>
-      <FormattedMessage {...messages.ctaLetUsKnowMessage} />
-    </span>
-  </PageBanner>
-);
-
-export default CTA;

src/containers/CTA/messages.js

@@ -1,23 +0,0 @@
-/* eslint-disable quotes */
-import { defineMessages } from '@edx/frontend-platform/i18n';
-import { StrictDict } from 'utils';
-
-const messages = defineMessages({
-  ctaFeedbackMessage: {
-    id: 'ora-grading.CTA.feedbackMessage',
-    defaultMessage: 'Thanks for using the new ORA staff grading experience. ',
-    description: 'Thank user for using ora and ask for feed back',
-  },
-  ctaLinkMessage: {
-    id: 'ora-grading.CTA.linkMessage',
-    defaultMessage: 'Provide some feedback',
-    description: 'placeholder for the feedback anchor link',
-  },
-  ctaLetUsKnowMessage: {
-    id: 'ora-grading.CTA.letUsKnowMessage',
-    defaultMessage: ' and let us know what you think!',
-    description: 'inform user to provide feedback',
-  },
-});
-
-export default StrictDict(messages);

src/containers/CriterionContainer/RadioCriterion.jsx

@@ -36,12 +36,13 @@ export class RadioCriterion extends React.Component {
       <Form.RadioSet name={config.name} value={data}>
         {config.options.map((option) => (
           <Form.Radio
-            className="criteria-option"
+            className="criteria-option align-items-center"
             key={option.name}
             value={option.name}
             description={intl.formatMessage(messages.optionPoints, { points: option.points })}
             onChange={this.onChange}
             disabled={!isGrading}
+            style={{ flexShrink: 0 }}
           >
             {option.label}
           </Form.Radio>

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

@@ -6,21 +6,31 @@ exports[`Radio Criterion Container snapshot is grading 1`] = `
   value="selected radio option"
 >
   <Form.Radio
-    className="criteria-option"
+    className="criteria-option align-items-center"
     description="1 points"
     disabled={false}
     key="option name"
     onChange={[Function]}
+    style={
+      {
+        "flexShrink": 0,
+      }
+    }
     value="option name"
   >
     this label
   </Form.Radio>
   <Form.Radio
-    className="criteria-option"
+    className="criteria-option align-items-center"
     description="2 points"
     disabled={false}
     key="option name 2"
     onChange={[Function]}
+    style={
+      {
+        "flexShrink": 0,
+      }
+    }
     value="option name 2"
   >
     this label 2
@@ -34,21 +44,31 @@ exports[`Radio Criterion Container snapshot is not grading 1`] = `
   value="selected radio option"
 >
   <Form.Radio
-    className="criteria-option"
+    className="criteria-option align-items-center"
     description="1 points"
     disabled={true}
     key="option name"
     onChange={[Function]}
+    style={
+      {
+        "flexShrink": 0,
+      }
+    }
     value="option name"
   >
     this label
   </Form.Radio>
   <Form.Radio
-    className="criteria-option"
+    className="criteria-option align-items-center"
     description="2 points"
     disabled={true}
     key="option name 2"
     onChange={[Function]}
+    style={
+      {
+        "flexShrink": 0,
+      }
+    }
     value="option name 2"
   >
     this label 2
@@ -62,21 +82,31 @@ exports[`Radio Criterion Container snapshot radio contain invalid response 1`] =
   value="selected radio option"
 >
   <Form.Radio
-    className="criteria-option"
+    className="criteria-option align-items-center"
     description="1 points"
     disabled={false}
     key="option name"
     onChange={[Function]}
+    style={
+      {
+        "flexShrink": 0,
+      }
+    }
     value="option name"
   >
     this label
   </Form.Radio>
   <Form.Radio
-    className="criteria-option"
+    className="criteria-option align-items-center"
     description="2 points"
     disabled={false}
     key="option name 2"
     onChange={[Function]}
+    style={
+      {
+        "flexShrink": 0,
+      }
+    }
     value="option name 2"
   >
     this label 2

src/containers/ListView/ListView.scss

@@ -1,12 +1,10 @@
-@import "@openedx/paragon/scss/core/core";
-
 span.pgn__icon.breadcrumb-arrow {
   width: 16px !important;
   height: 16px !important;
 };
 
 .empty-submission {
-  width: map-get($container-max-widths, "sm");
+  width: var(--pgn-size-container-max-width-sm);
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -15,7 +13,7 @@ span.pgn__icon.breadcrumb-arrow {
   margin: auto;
 
   > img {
-    padding: map-get($spacers, 5);
+    padding: var(--pgn-spacing-spacer-5);
   }
 }
 

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"
 >
@@ -11,7 +11,7 @@ exports[`NotificationsBanner component snapshots 1`] = `
       id="ora-grading.NotificationsBanner.Message"
     />
     <Hyperlink
-      destination="http://localhost:1997/notifications"
+      destination="http://localhost:1997/#notifications"
       isInline={true}
       rel="noopener noreferrer"
       showLaunchIcon={false}
@@ -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/ResponseDisplay.scss

@@ -1,14 +1,12 @@
-@import "@openedx/paragon/scss/core/core";
-
 .response-display {
-  padding: map-get($spacers, 0);
-  width: map-get($container-max-widths, "md");
+  padding: var(--pgn-spacing-spacer-0);
+  width: var(--pgn-size-container-max-width-md);
   overflow-y: hidden;
   height: fit-content;
 
   .submission-files {
     .submission-files-title {
-      padding: map-get($spacers, 3);
+      padding: var(--pgn-spacing-spacer-3);
       border-radius: calc(0.375rem - 1px);
       border-bottom: 1px solid transparent;
       transition: border-color 100ms ease 150ms;
@@ -25,13 +23,13 @@
         cursor: initial;
 
         > h3 {
-          color: $gray-300;
+          color: var(--pgn-color-gray-300);
         }
       }
     }
 
     .submission-files-body {
-      padding: map-get($spacers, 3);
+      padding: var(--pgn-spacing-spacer-3);
       padding-top: 0;
 
       .submission-files-table thead {
@@ -41,7 +39,7 @@
   }
 
   .preview-display {
-    padding: map-get($spacers, 3) 0;
+    padding: var(--pgn-spacing-spacer-3) 0;
   }
 
   .response-display-text-content {
@@ -50,12 +48,12 @@
   }
 }
 
-@include media-breakpoint-down(sm) {
+@media (--pgn-size-breakpoint-max-width-sm) {
   .response-display {
     width: 100%;
 
     .preview-display {
-      padding: map-get($spacers, 1) 0;
+      padding: var(--pgn-spacing-spacer-1) 0;
     }
   }
-}
+}

src/containers/ReviewActions/ReviewActions.scss

@@ -1,16 +1,14 @@
-@import "@openedx/paragon/scss/core/core";
-
 // action reviews
 .review-actions {
-  padding: map_get($spacers, 3);
+  padding: var(--pgn-spacing-spacer-3);
   flex-direction: row;
-  background-color: $light-200;
+  background-color: var(--pgn-color-light-200);
 
   .review-actions-username {
     flex-grow: 1;
   }
   .review-actions-status {
-    margin-left: map_get($spacers, 3);
+    margin-left: var(--pgn-spacing-spacer-3);
     vertical-align: middle;
   }
   .review-actions-group {
@@ -20,18 +18,18 @@
 
     .submission-navigation {
       float: right;
-      padding: map-get($spacers, 1);
+      padding: var(--pgn-spacing-spacer-1);
     }
   }
 }
 
-@include media-breakpoint-down(md) {
+@media (--pgn-size-breakpoint-max-width-md) {
   .review-actions {
     flex-direction: column;
     align-items: flex-start !important;
   }
 
   .review-actions-username {
-    padding-bottom: map-get($spacers, 3);
+    padding-bottom:var(--pgn-spacing-spacer-3);
   }
-}
+}

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/ReviewModal.scss

@@ -1,15 +1,10 @@
-@import "@openedx/paragon/scss/core/core";
-
 .review-modal-body {
-  background-color: $gray-300 !important;
+  background-color: var(--pgn-color-gray-300) !important;
+  overflow: auto !important;
   padding: inherit;
 
-  & > div.pgn__modal-body-content {
+  & > div.pgn__modal-body-content .row {
     height: 100%;
-
-    .row {
-      height: 100%;
-    }
   }
 
   .content-block {
@@ -23,7 +18,7 @@
   }
 }
 
-@include media-breakpoint-down(sm) {
+@media (--pgn-size-breakpoint-max-width-sm) {
   .review-modal-body {
     padding: 0 !important;
     overflow: hidden !important;
@@ -40,4 +35,4 @@
       width: 100%;
     }
   }
-}
+}

src/containers/Rubric/Rubric.scss

@@ -1,33 +1,33 @@
-@import "~@edx/brand/paragon/variables";
-@import "~@openedx/paragon/scss/core/core";
-@import "~@edx/brand/paragon/overrides";
-
 .criteria-label {
   width: 100%;
   .criteria-title {
     display: inline-block;
     max-width: calc(100% - 44px);
-    color: $primary-500;
+    color: var(--pgn-color-primary-500);
     font-weight: bold;
     vertical-align: top;
   }
   .esg-help-icon {
     float: right;
-    margin-top: (map-get($spacers, 2) * -1);
-    margin-right: (map-get($spacers, 2\.5) * -1);
+    margin-top: calc(var(--pgn-spacing-spacer-2) * -1);
+    margin-right: calc(var(--pgn-spacing-spacer-2-5) * -1);
     vertical-align: top;
   }
 }
 .criteria-option {
+  display: flex;
   width: 100%;
   > div {
-    display: inline;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
     width: 100%;
     .pgn__form-label {
       display: inline-flex;
+      padding-right: 10px;
     }
     .pgn__form-control-description {
-      float: right;
+      white-space: nowrap;
     }
   }
 }
@@ -38,9 +38,13 @@
 
 .popover.overlay-help-popover {
   z-index: 4000;
-  margin-right: map-get($spacers, 1) !important;
+  margin-right: var(--pgn-spacing-spacer-1) !important;
   .help-popover-option {
-    margin-bottom: map-get($spacers, 1);
+    margin-bottom: var(--pgn-spacing-spacer-1);
+  }
+  .popover-body {
+    max-height: 100vh;
+    overflow-y: auto !important;
   }
 }
 
@@ -49,15 +53,15 @@
   width: 320px !important;
   height: fit-content;
   max-height: 100%;
-  margin-left: map-get($spacers, 3);
+  margin-left: var(--pgn-spacing-spacer-3);
   position: sticky !important;
-  top: map-get($spacers, 1) * -1;
+  top: calc(var(--pgn-spacing-spacer-1) * -1);
 
   .grading-rubric-header {
     box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.3) !important;
     display: flex;
     justify-content: center;
-    padding: map-get($spacers, 3);
+    padding: var(--pgn-spacing-spacer-3);
   }
 
   .grading-rubric-body {
@@ -68,7 +72,7 @@
     box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.3) !important;
     display: flex;
     justify-content: center;
-    padding: map-get($spacers, 3);
+    padding: var(--pgn-spacing-spacer-3);
   }
 
   button.pgn__stateful-btn.pgn__stateful-btn-state-pending {
@@ -76,8 +80,8 @@
   }
 }
 
-@include media-breakpoint-down(sm) {
+@media (--pgn-size-breakpoint-max-width-sm) {
   .grading-rubric-card {
     margin-left: 0 !important;
   } 
-}
+}

src/data/constants/app.js

@@ -1,4 +1,5 @@
-import { getConfig } from '@edx/frontend-platform';
+import { getConfig, getPath } from '@edx/frontend-platform';
 
-export const routePath = () => `${getConfig().PUBLIC_PATH}:courseId`;
-export const locationId = () => decodeURIComponent(window.location.pathname).replace(getConfig().PUBLIC_PATH, '');
+const publicPath = getPath(getConfig().PUBLIC_PATH);
+export const routePath = () => `${publicPath}:courseId`;
+export const locationId = () => decodeURIComponent(window.location.pathname).replace(publicPath, '');

src/data/constants/app.test.js

@@ -6,6 +6,7 @@ jest.unmock('./app');
 jest.mock('@edx/frontend-platform', () => {
   const PUBLIC_PATH = '/test-public-path/';
   return {
+    ...jest.requireActual('@edx/frontend-platform'),
     getConfig: () => ({ PUBLIC_PATH }),
     PUBLIC_PATH,
   };

src/data/redux/grading/reducer.js

@@ -182,11 +182,11 @@ const grading = createSlice({
 
       const gradeData = {
         ...state.gradeData,
-        ...(payload && { [submissionUUID]: payload.submissionStatus.gradeData }),
+        ...(payload && { [submissionUUID]: payload.gradeData }),
       };
 
-      const { gradeStatus } = payload ? payload.submissionStatus : state.current;
-      const lockStatus = payload ? payload.submissionStatus.lockStatus : lockStatuses.unlocked;
+      const { gradeStatus } = payload || state.current;
+      const lockStatus = payload ? payload.lockStatus : lockStatuses.unlocked;
 
       return {
         ...state,

src/data/redux/grading/reducer.test.js

@@ -250,7 +250,7 @@ describe('app reducer', () => {
       });
       describe('stopGrading', () => {
         let output;
-        const args = { submissionStatus: { gradeData: testData, lockStatus, gradeStatus } };
+        const args = { gradeData: testData, lockStatus, gradeStatus };
         describe('resulting state', () => {
           test('gradingData: deletes current data', () => {
             output = reducer(testState, actions.stopGrading());

src/data/redux/submissions/selectors.js

@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import sortBy from 'lodash/sortBy';
 import { createSelector } from 'reselect';
 
 import { StrictDict } from 'utils';
@@ -22,7 +22,7 @@ export const listData = createSelector(
       const gradingStatus = (lockStatus === lockStatuses.unlocked ? gradeStatus : lockStatus);
       return { gradingStatus, ...rest };
     });
-    return _.sortBy(
+    return sortBy(
       submissionList,
       ['submissionDate'],
     );

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/data/store.js

@@ -1,6 +1,6 @@
 import * as redux from 'redux';
 import thunkMiddleware from 'redux-thunk';
-import { composeWithDevTools } from 'redux-devtools-extension/logOnlyInProduction';
+import { composeWithDevTools } from '@redux-devtools/extension';
 import { createLogger } from 'redux-logger';
 
 import apiTestUtils from 'data/services/lms/fakeData/testUtils';

src/data/store.test.js

@@ -1,6 +1,6 @@
 import { applyMiddleware } from 'redux';
 import thunkMiddleware from 'redux-thunk';
-import { composeWithDevTools } from 'redux-devtools-extension/logOnlyInProduction';
+import { composeWithDevTools } from '@redux-devtools/extension';
 import { createLogger } from 'redux-logger';
 
 import rootReducer, { actions, selectors } from 'data/redux';
@@ -22,7 +22,7 @@ jest.mock('redux', () => ({
   applyMiddleware: (...middleware) => ({ applied: middleware }),
   createStore: (reducer, middleware) => ({ reducer, middleware }),
 }));
-jest.mock('redux-devtools-extension/logOnlyInProduction', () => ({
+jest.mock('@redux-devtools/extension', () => ({
   composeWithDevTools: (middleware) => ({ withDevTools: middleware }),
 }));
 

src/index.jsx

@@ -2,8 +2,8 @@
 import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React, { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
 import { AppProvider, ErrorPage } from '@edx/frontend-platform/react';
 
 import store from 'data/store';
@@ -20,18 +20,24 @@ import messages from './i18n';
 import App from './App';
 
 subscribe(APP_READY, () => {
-  ReactDOM.render(
-    <AppProvider store={store} wrapWithRouter={false}>
-      <App />
-    </AppProvider>,
-    document.getElementById('root'),
+  const root = createRoot(document.getElementById('root'));
+
+  root.render(
+    <StrictMode>
+      <AppProvider store={store} wrapWithRouter={false}>
+        <App />
+      </AppProvider>
+    </StrictMode>,
   );
 });
 
 subscribe(APP_INIT_ERROR, (error) => {
-  ReactDOM.render(
-    <ErrorPage message={error.message} />,
-    document.getElementById('root'),
+  const root = createRoot(document.getElementById('root'));
+
+  root.render(
+    <StrictMode>
+      <ErrorPage message={error.message} />
+    </StrictMode>,
   );
 });
 

src/index.test.jsx

@@ -1,5 +1,3 @@
-import { render } from 'react-dom';
-
 import {
   APP_INIT_ERROR,
   APP_READY,
@@ -11,8 +9,24 @@ import {
 import messages from './i18n';
 import * as app from '.';
 
-jest.mock('react-dom', () => ({
-  render: jest.fn(),
+// These need to be var not let so they get hoisted
+// and can be used by jest.mock (which is also hoisted)
+var mockRender; // eslint-disable-line no-var
+var mockCreateRoot; // eslint-disable-line no-var
+jest.mock('react-dom/client', () => {
+  mockRender = jest.fn();
+  mockCreateRoot = jest.fn(() => ({
+    render: mockRender,
+  }));
+
+  return ({
+    createRoot: mockCreateRoot,
+  });
+});
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  StrictMode: 'React Strict Mode',
 }));
 
 jest.mock('@edx/frontend-component-footer', () => ({
@@ -39,7 +53,7 @@ describe('app registry', () => {
   let getElement;
 
   beforeEach(() => {
-    render.mockClear();
+    mockRender.mockClear();
     getElement = window.document.getElementById;
     window.document.getElementById = jest.fn(id => ({ id }));
   });
@@ -51,18 +65,16 @@ describe('app registry', () => {
     const callArgs = subscribe.mock.calls[0];
     expect(callArgs[0]).toEqual(APP_READY);
     callArgs[1]();
-    const [rendered, target] = render.mock.calls[0];
+    const [rendered] = mockRender.mock.calls[0];
     expect(rendered).toMatchSnapshot();
-    expect(target).toEqual(document.getElementById('root'));
   });
   test('subscribe: APP_INIT_ERROR.  snapshot: displays an ErrorPage to root element', () => {
     const callArgs = subscribe.mock.calls[1];
     expect(callArgs[0]).toEqual(APP_INIT_ERROR);
     const error = { message: 'test-error-message' };
     callArgs[1](error);
-    const [rendered, target] = render.mock.calls[0];
+    const [rendered] = mockRender.mock.calls[0];
     expect(rendered).toMatchSnapshot();
-    expect(target).toEqual(document.getElementById('root'));
   });
   test('initialize is called with footerMessages and requireAuthenticatedUser', () => {
     expect(initialize).toHaveBeenCalledTimes(1);

src/plugin-slots/FooterSlot/README.md

@@ -1,12 +1,15 @@
 # Footer Slot
 
-### Slot ID: `footer_slot`
+### Slot ID: `org.openedx.frontend.layout.footer.v1`
+
+### Slot ID Aliases
+* `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/).
+The implementation of the `FooterSlot` component lives in [the `frontend-component-footer` repository](https://github.com/openedx/frontend-component-footer/).
 
 ## Example
 
@@ -23,7 +26,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    footer_slot: {
+    'org.openedx.frontend.layout.footer.v1': {
       plugins: [
         {
           // Hide the default footer

src/plugin-slots/README.md

@@ -1,3 +1,3 @@
 # `frontend-app-ora-grading` Plugin Slots
 
-* [`footer_slot`](./FooterSlot/)
+* [`org.openedx.frontend.layout.footer.v1`](./FooterSlot/)