feat(deps): update header to 5.6.0 (#409)

build: Switch to ubuntu-latest for builds

.env.development

@@ -7,7 +7,6 @@ LOGOUT_URL='http://localhost:18000/login'
 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/renovate.json

@@ -0,0 +1,33 @@
+{
+    "extends": [
+      "config:base",
+      "schedule:weekly",
+      ":automergeLinters",
+      ":automergeMinor",
+      ":automergeTesters",
+      ":enableVulnerabilityAlerts",
+      ":rebaseStalePrs",
+      ":semanticCommits",
+      ":updateNotScheduled"
+    ],
+    "packageRules": [
+      {
+        "matchDepTypes": [
+          "devDependencies"
+        ],
+        "matchUpdateTypes": [
+          "lockFileMaintenance",
+          "minor",
+          "patch",
+          "pin"
+        ],
+        "automerge": true
+      },
+      {
+        "matchPackagePatterns": ["@edx", "@openedx"],
+        "matchUpdateTypes": ["minor", "patch"],
+        "automerge": true
+      }
+    ],
+    "timezone": "America/New_York"
+  }

.github/workflows/ci.yml

@@ -10,19 +10,19 @@ on:
 
 jobs:
   test:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: [18, 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
       with:
-        node-version: ${{ env.NODE_VER }}
+        node-version: ${{ matrix.node }}
 
     - name: Install dependencies
       run: npm ci
@@ -43,7 +43,10 @@ jobs:
       run: npm run build
 
     - name: Run Coverage
-      uses: codecov/codecov-action@v2
+      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

.nvmrc

@@ -1 +1 @@
-18.15
+20

README.md

@@ -108,6 +108,11 @@ check the ``enabled`` and ``enabled for all courses`` boxes.
 numbers for grades. If your gradebook isn't accepting your changes, or the changes aren't resulting in sane, 
 recalculated grade values, verify you've set all flags correctly.
 
+## 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).
+
 ## Running tests
 
 1. Assuming that you're operating in the context of the edX devstack,

catalog-info.yaml

@@ -0,0 +1,13 @@
+# This file records information about this repo. Its use is described in OEP-55:
+# https://open-edx-proposals.readthedocs.io/en/latest/processes/oep-0055-proc-project-maintainers.html
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: "frontend-app-gradebook"
+  description: "The frontend (MFE) for Open edX Gradebook"
+  annotations:
+    openedx.org/arch-interest-groups: ""
+spec:
+  owner: user:farhaanbukhsh
+  type: 'website'
+  lifecycle: 'experimental'

package.json

@@ -29,11 +29,12 @@
   ],
   "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",
-    "@edx/react-unit-test-utils": "^2.0.0",
+    "@edx/react-unit-test-utils": "^3.0.0",
+    "@openedx/frontend-plugin-framework": "^1.2.1",
+    "@openedx/frontend-slot-footer": "^1.0.2",
     "@openedx/paragon": "^22.1.1",
     "@edx/reactifex": "^2.1.1",
     "@fortawesome/fontawesome-svg-core": "^1.2.25",
@@ -67,7 +68,7 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.1.1",
-    "@openedx/frontend-build": "^13.0.28",
+    "@openedx/frontend-build": "14.0.3",
     "@testing-library/react": "12.1.5",
     "axios": "0.21.2",
     "axios-mock-adapter": "^1.17.0",
@@ -75,7 +76,7 @@
     "fetch-mock": "^6.5.2",
     "husky": "2.7.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^26.6.3",
+    "jest": "^29.7.0",
     "react-dev-utils": "^12.0.1",
     "react-test-renderer": "17.0.2",
     "reactifex": "1.1.1",

src/App.jsx

@@ -3,7 +3,7 @@ import { Route, Routes } from 'react-router-dom';
 
 import { AppProvider } from '@edx/frontend-platform/react';
 
-import Footer from '@edx/frontend-component-footer';
+import FooterSlot from '@openedx/frontend-slot-footer';
 import Header from '@edx/frontend-component-header';
 
 import store from 'data/store';
@@ -24,7 +24,7 @@ const App = () => (
           />
         </Routes>
       </main>
-      <Footer logo={process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
+      <FooterSlot />
     </div>
   </AppProvider>
 );

src/App.test.jsx

@@ -3,8 +3,6 @@ import { shallow } from '@edx/react-unit-test-utils';
 
 import { Route } from 'react-router-dom';
 
-import Footer from '@edx/frontend-component-footer';
-
 import store from 'data/store';
 import GradebookPage from 'containers/GradebookPage';
 
@@ -18,13 +16,12 @@ jest.mock('react-router-dom', () => ({
 jest.mock('@edx/frontend-platform/react', () => ({
   AppProvider: () => 'AppProvider',
 }));
-jest.mock('@edx/frontend-component-footer', () => 'Footer');
+jest.mock('@edx/frontend-component-footer', () => ({ FooterSlot: 'Footer' }));
 jest.mock('data/store', () => 'testStore');
 jest.mock('containers/GradebookPage', () => 'GradebookPage');
 jest.mock('@edx/frontend-component-header', () => 'Header');
 jest.mock('./head/Head', () => 'Head');
 
-const logo = 'fakeLogo.png';
 let el;
 let secondChild;
 
@@ -34,7 +31,6 @@ describe('App router component', () => {
   });
   describe('component', () => {
     beforeEach(() => {
-      process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG = logo;
       el = shallow(<App />);
       secondChild = el.instance.children;
     });
@@ -63,8 +59,5 @@ describe('App router component', () => {
         expect(secondChild[1].findByType(Route)[0].props.element.type).toEqual(GradebookPage);
       });
     });
-    test('Footer logo drawn from env variable', () => {
-      expect(secondChild[1].findByType(Footer)[0].props.logo).toEqual(logo);
-    });
   });
 });

src/__snapshots__/App.test.jsx.snap

@@ -15,7 +15,7 @@ exports[`App router component snapshot 1`] = `
         />
       </Routes>
     </main>
-    <Footer />
+    <FooterSlot />
   </div>
 </AppProvider>
 `;

src/components/BulkManagementHistoryView/__snapshots__/HistoryTable.test.jsx.snap

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`HistoryTable component snapshot history table data (from bulkManagementHistory.map(this.formatHistoryRow) snapshot: maps resultsSummay to ResultsSummary, wraps filename and user, forwards the rest 1`] = `
-Array [
-  Object {
+[
+  {
     "filename": <span
       className="wrap-text-in-cell"
     >
@@ -20,7 +20,7 @@ Array [
       Eifel
     </span>,
   },
-  Object {
+  {
     "filename": <span
       className="wrap-text-in-cell"
     >
@@ -45,26 +45,26 @@ exports[`HistoryTable component snapshot snapshot - loads formatted table 1`] =
 <DataTable
   className="table-striped"
   columns={
-    Array [
-      Object {
+    [
+      {
         "Header": "Gradebook",
         "accessor": "filename",
         "columnSortable": false,
         "width": "col-5",
       },
-      Object {
+      {
         "Header": "Download Summary",
         "accessor": "resultsSummary",
         "columnSortable": false,
         "width": "col",
       },
-      Object {
+      {
         "Header": "Who",
         "accessor": "user",
         "columnSortable": false,
         "width": "col-1",
       },
-      Object {
+      {
         "Header": "When",
         "accessor": "timeUploaded",
         "columnSortable": false,
@@ -73,8 +73,8 @@ exports[`HistoryTable component snapshot snapshot - loads formatted table 1`] =
     ]
   }
   data={
-    Array [
-      Object {
+    [
+      {
         "filename": <span
           className="wrap-text-in-cell"
         >
@@ -92,7 +92,7 @@ exports[`HistoryTable component snapshot snapshot - loads formatted table 1`] =
           Eifel
         </span>,
       },
-      Object {
+      {
         "filename": <span
           className="wrap-text-in-cell"
         >

src/components/BulkManagementHistoryView/__snapshots__/ResultsSummary.test.jsx.snap

@@ -4,8 +4,8 @@ exports[`ResultsSummary component snapshot - safe hyperlink with bulkGradesUrl w
 <Hyperlink
   destination="www.edx.org"
   href={
-    Object {
-      "url": Object {
+    {
+      "url": {
         "rowId": 42,
       },
     }

src/components/GradebookFilters/AssignmentFilter/__snapshots__/index.test.jsx.snap

@@ -10,7 +10,7 @@ exports[`AssignmentFilter component render snapshot 1`] = `
     label="Assignment"
     onChange={[MockFunction]}
     options={
-      Array [
+      [
         <option
           value=""
         >

src/components/GradebookFilters/AssignmentTypeFilter/__snapshots__/index.test.jsx.snap

@@ -10,7 +10,7 @@ exports[`AssignmentFilterType component render snapshot 1`] = `
     label="Assignment Types"
     onChange={[MockFunction]}
     options={
-      Array [
+      [
         <option
           value=""
         >

src/components/GradebookFilters/StudentGroupsFilter/__snapshots__/index.test.jsx.snap

@@ -7,7 +7,7 @@ exports[`StudentGroupsFilter component render snapshot 1`] = `
     label="Tracks"
     onChange={[MockFunction]}
     options={
-      Array [
+      [
         <option
           value="Track-All"
         >
@@ -43,7 +43,7 @@ exports[`StudentGroupsFilter component render snapshot 1`] = `
     label="Cohorts"
     onChange={[MockFunction]}
     options={
-      Array [
+      [
         <option
           value="Cohort-All"
         >

src/components/GradesView/BulkManagementControls/__snapshots__/index.test.jsx.snap

@@ -6,7 +6,7 @@ exports[`BulkManagementControls render snapshot - show - network and import butt
 >
   <NetworkButton
     label={
-      Object {
+      {
         "defaultMessage": "Download Grades",
         "description": "A labeled button that allows an admin user to download course grades all at once (in bulk).",
         "id": "gradebook.GradesView.BulkManagementControls.bulkManagementLabel",

src/components/GradesView/EditModal/OverrideTable/__snapshots__/index.test.jsx.snap

@@ -4,22 +4,22 @@ exports[`OverrideTable component render snapshot 1`] = `
 <DataTable
   columns="test-columns"
   data={
-    Array [
-      Object {
+    [
+      {
         "test": "data",
       },
-      Object {
+      {
         "andOther": "test-data",
       },
-      Object {
+      {
         "adjustedGrade": <AdjustedGradeInput />,
-        "date": Object {
+        "date": {
           "formatted": 2000-01-01T00:00:00.000Z,
         },
         "reason": <ReasonInput />,
       },
     ]
   }
-  itemCount={2}
+  itemCount={3}
 />
 `;

src/components/GradesView/EditModal/OverrideTable/index.jsx

@@ -20,18 +20,20 @@ export const OverrideTable = () => {
 
   if (hide) { return null; }
 
+  const tableData = [
+    ...data,
+    {
+      adjustedGrade: <AdjustedGradeInput />,
+      date: formatDateForDisplay(new Date()),
+      reason: <ReasonInput />,
+    },
+  ];
+
   return (
     <DataTable
       columns={columns}
-      data={[
-        ...data,
-        {
-          adjustedGrade: <AdjustedGradeInput />,
-          date: formatDateForDisplay(new Date()),
-          reason: <ReasonInput />,
-        },
-      ]}
-      itemCount={data.length}
+      data={tableData}
+      itemCount={tableData.length}
     />
   );
 };

src/components/GradesView/FilterBadges/__snapshots__/FilterBadge.test.jsx.snap

@@ -19,8 +19,8 @@ exports[`FilterBadge render do not hide value snapshot 1`] = `
       aria-label="close"
       className="btn-info"
       onClick={
-        Object {
-          "handleClose": Array [
+        {
+          "handleClose": [
             "some",
             "filters",
           ],
@@ -55,8 +55,8 @@ exports[`FilterBadge render hide Value snapshot 1`] = `
       aria-label="close"
       className="btn-info"
       onClick={
-        Object {
-          "handleClose": Array [
+        {
+          "handleClose": [
             "some",
             "filters",
           ],

src/components/GradesView/FilteredUsersLabel/__snapshots__/index.test.jsx.snap

@@ -3,14 +3,14 @@
 exports[`FilteredUsersLabel component render snapshot 1`] = `
 <format-message-function
   message={
-    Object {
+    {
       "defaultMessage": "Showing {filteredUsers} of {totalUsers} total learners",
       "description": "Users visibility label",
       "id": "gradebook.GradesTab.usersVisibilityLabel",
     }
   }
   values={
-    Object {
+    {
       "filteredUsers": <BoldText
         text={100}
       />,

src/components/GradesView/GradebookTable/__snapshots__/Fields.test.jsx.snap

@@ -28,32 +28,32 @@ exports[`Gradebook Table Fields Username with external_user_key snapshot 1`] = `
 `;
 
 exports[`Gradebook Table Fields Username with external_user_key wraps external user key and username 1`] = `
-Object {
-  "children": Array [
-    Object {
-      "children": Array [
-        Object {
-          "children": Array [
+{
+  "children": [
+    {
+      "children": [
+        {
+          "children": [
             "MyNameFromHere",
           ],
-          "props": Object {},
+          "props": {},
           "type": "div",
         },
-        Object {
-          "children": Array [
+        {
+          "children": [
             "My name from another land",
           ],
-          "props": Object {
+          "props": {
             "className": "student-key",
           },
           "type": "div",
         },
       ],
-      "props": Object {},
+      "props": {},
       "type": "div",
     },
   ],
-  "props": Object {
+  "props": {
     "className": "wrap-text-in-cell",
   },
   "type": "span",

src/components/GradesView/GradebookTable/__snapshots__/LabelReplacements.test.jsx.snap

@@ -32,7 +32,7 @@ exports[`LabelReplacements TotalGradeLabelReplacement snapshot 1`] = `
     }
     placement="left"
     trigger={
-      Array [
+      [
         "hover",
         "focus",
       ]
@@ -84,7 +84,7 @@ exports[`snapshot left to right overlay placement 1`] = `
     }
     placement="right"
     trigger={
-      Array [
+      [
         "hover",
         "focus",
       ]
@@ -118,7 +118,7 @@ exports[`snapshot right to left overlay placement 1`] = `
     }
     placement="left"
     trigger={
-      Array [
+      [
         "hover",
         "focus",
       ]

src/components/GradesView/GradebookTable/__snapshots__/index.test.jsx.snap

@@ -7,13 +7,13 @@ exports[`GradebookTable snapshot 1`] = `
   <DataTable
     RowStatusComponent={[MockFunction hooks.nullMethod]}
     columns={
-      Array [
+      [
         "some",
         "columns",
       ]
     }
     data={
-      Array [
+      [
         "some",
         "data",
       ]

src/components/GradesView/ImportGradesButton/__snapshots__/index.test.jsx.snap

@@ -41,7 +41,7 @@ exports[`ImportGradesButton component render snapshot 1`] = `
     className="import-grades-btn"
     import={true}
     label={
-      Object {
+      {
         "defaultMessage": "Import Grades",
         "description": "A labeled button to import grades in the BulkManagement Tab File Upload Form",
         "id": "gradebook.GradesView.importGradesBtnText",

src/components/GradesView/InterventionsReport/__snapshots__/index.test.jsx.snap

@@ -17,7 +17,7 @@ exports[`InterventionsReport component output snapshot 1`] = `
     </div>
     <NetworkButton
       label={
-        Object {
+        {
           "defaultMessage": "Download Interventions",
           "description": "The labeled button to download the Intervention report from the Grades View",
           "id": "gradebook.GradesView.InterventionsReport.downloadBtn",

src/components/GradesView/PageButtons/__snapshots__/index.test.jsx.snap

@@ -4,7 +4,7 @@ exports[`PageButtons component render snapshot 1`] = `
 <div
   className="d-flex justify-content-center"
   style={
-    Object {
+    {
       "paddingBottom": "20px",
     }
   }
@@ -13,7 +13,7 @@ exports[`PageButtons component render snapshot 1`] = `
     disabled="prev-disabled"
     onClick={[MockFunction hooks.prev.onClick]}
     style={
-      Object {
+      {
         "margin": "20px",
       }
     }
@@ -25,7 +25,7 @@ exports[`PageButtons component render snapshot 1`] = `
     disabled="next-disabled"
     onClick={[MockFunction hooks.next.onClick]}
     style={
-      Object {
+      {
         "margin": "20px",
       }
     }

src/components/NetworkButton/__snapshots__/test.jsx.snap

@@ -4,12 +4,12 @@ exports[`NetworkButton component snapshots snapshot 1`] = `
 <StatefulButton
   className="ml-2 test-class"
   disabledStates={
-    Array [
+    [
       "pending",
     ]
   }
   icons={
-    Object {
+    {
       "default": <Icon
         className="fa mr-2 fa-download"
       />,
@@ -19,7 +19,7 @@ exports[`NetworkButton component snapshots snapshot 1`] = `
     }
   }
   labels={
-    Object {
+    {
       "default": <FormattedMessage
         defaultMessage="test button label"
         description="test button label description"

src/data/selectors/index.test.js

@@ -87,15 +87,16 @@ describe('root selectors', () => {
         });
       });
       describe('if neither/only 1 are default values', () => {
-        beforeEach(() => {
-          filterConstants.filterConfig[filterName] = testConfig;
-          config = selectors.root.filterBadgeConfig(testState, filterName);
-        });
         describe.each([
           ['neither', () => false],
           ['only filter1', (v) => v === filters[0]],
           ['only filter2', (v) => v === filters[1]],
         ], '%1 is default', (label, isDefaultFn) => {
+          beforeEach(() => {
+            filterConstants.filterConfig[filterName] = testConfig;
+            config = selectors.root.filterBadgeConfig(testState, filterName);
+          });
+
           it('returns isDefault: false, string value, and remaining filterConfig', () => {
             selectors.filters.isDefault.mockImplementation(isDefaultFn);
             const { filterOrder, ...rest } = testConfig;

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-gradebook` Plugin Slots
+
+* [`footer_slot`](./FooterSlot/)