feat: import FooterSlot from component package instead of slot package (#450)

Co-authored-by: jansenk <1639231+jansenk@users.noreply.github.com>

README.md

@@ -18,8 +18,8 @@ Jump to:
 
 For existing documentation see:
 
-- Basic Usage: [Review Learner Grades (read-the-docs)](https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/student_progress/course_grades.html#review-learner-grades-on-the-instructor-dashboard)
-- Bulk Grade Management: [Override Learner Subsection Scores in Bulk (read-the-docs)](https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/student_progress/course_grades.html#override-learner-subsection-scores-in-bulk)
+- Basic Usage: [Review Learner Grades (read-the-docs)](https://docs.openedx.org/en/latest/educators/how-tos/data/view_learner_grades.html)
+- Bulk Grade Management: [Override Learner Subsection Scores in Bulk (read-the-docs)](https://docs.openedx.org/en/latest/educators/how-tos/data/manage_learner_grades.html#override-learner-subsection-scores-in-bulk)
 
 ## Should I use Gradebook in my course?
 
@@ -58,56 +58,53 @@ To install gradebook into your project:
 ```
 npm i --save @edx/frontend-app-gradebook
 ```
+
 Cloning and Startup
 ===================
 
 1. Clone your new repo:
 
-  ``git clone https://github.com/openedx/frontend-app-gradebook.git``
+   ``git clone https://github.com/openedx/frontend-app-gradebook.git``
 
-2. Install npm dependencies:
+2. Use the version of Node specified in ``.nvmrc``
 
-  ``cd frontend-app-gradebook && npm install``
+3. Stop the Tutor devstack, if it's running:
 
-3. Start the dev server:
+   ``tutor dev stop``
 
-  ``npm start``
+4. Next, we need to tell Tutor that we're going to be running this repo in development mode, and it should be excluded from the mfe container that otherwise runs every MFE. Run this:
+
+   ``tutor mounts add /path/to/frontend-app-gradebook``
+
+5. Start Tutor in development mode. This command will start the LMS and Studio,
+   and other required MFEs like ``authn`` and ``account``, but will not start the
+   Gradebook MFE, which we're going to run on the host instead of in a container
+   managed by Tutor. Run:
+
+   ``tutor dev start lms cms mfe``
+
+## Startup
+
+1. Install npm dependencies:
+
+   ``cd frontend-app-gradebook && npm install``
+
+2. Start the dev server:
+
+   ``npm run dev``
 
 ## Running the UI Standalone
 
-To install the project please refer to the [`edX Developer Stack`](https://github.com/openedx/devstack) instructions.
+To install the project please refer to the [`MFE Development on Tutor`](https://github.com/overhangio/tutor-mfe?tab=readme-ov-file#mfe-development) instructions.
 
-The web application runs on port **1994**, so when you go to `http://localhost:1994/course-v1:edX+DemoX+Demo_Course` you should see the UI (assuming you have such a Demo Course in your devstack).  Note that you always have to provide a course id to actually see a gradebook.
+When not mounted, gradebook will run in the shared MFE container at http://apps.local.openedx.io/gradebook/course-v1:edX+DemoX+Demo_Course.
 
-If you don't, you can see the log messages for the docker container by executing `make gradebook-logs` in the `devstack` directory.
+When mounted in the tutor ``gradebook`` container, or when running a local (host) webpack dev server, the web application runs on port **1994**, so when you go to `http://apps.local.openedx.io:1994/gradebook/course-v1:edX+DemoX+Demo_Course` you should see the UI (assuming you have such a Demo Course in your devstack).  Note that you always have to provide a course id to actually see a gradebook.
+
+(Note: This may not work in Tutor; these instructions are for the deprecated Devstack) You can see the log messages for the docker container by executing `make gradebook-logs` in the `devstack` directory.
 
 Note that starting the container executes the `npm run start` script which will hot-reload JavaScript and Sass files changes, so you should (:crossed_fingers:) not need to do anything (other than wait) when making changes.
 
-## Configuring for local use in edx-platform
-
-Assuming you've got the UI running at `http://localhost:1994`, you can configure the LMS in edx-platform
-to point to your local gradebook from the instructor dashboard by putting this setting in `lms/env/private.py`:
-```
-WRITABLE_GRADEBOOK_URL = 'http://localhost:1994'
-```
-
-There are also several edx-platform waffle and feature flags you'll have to enable from the Django admin:
-
-1. Grades > Persistent grades enabled flag.  Add this flag if it doesn't exist,
-check the ``enabled`` and ``enabled for all courses`` boxes.
-
-2. Waffle > Switches.  Add the ``grades.assume_zero_grade_if_absent`` switch and make it active.
-
-3. Waffle_utils > Waffle flag course overrides.  Activate waffle flags for courses where you want to enable Gradebook functionality:
-    - Enable Gradebook by adding the ``grades.writable_gradebook`` add checking the ``enabled`` box.
-    - Enable Bulk Grade Management by adding the ``grades.bulk_management`` flag and checking the ``enabled`` box.
-
-    Alternatively, you could add these as regular waffle flags to enable the functionality for all courses.
-
-**NOTE:** IF the above flags are not configured correctly, the gradebook may appear to work, but will return bogus
-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).
 
@@ -115,10 +112,13 @@ The parts of this MFE that can be customized in that manner are documented [here
 
 ## Running tests
 
-1. Assuming that you're operating in the context of the edX devstack,
-run `gradebook-shell` from your devstack directory.  This will start a bash shell inside your
-running gradebook container.
-2. Run `make test` (which executes `npm run test`).  This will run all of the gradebook tests.
+Run:
+
+``nvm use``
+
+``npm ci``
+
+``npm test``
 
 ## Directory Structure
 
@@ -151,9 +151,7 @@ noted.
 Contributing
 ============
 
-Contributions are very welcome.  Please read `How To Contribute`_ for details.
-
-.. _How To Contribute: https://openedx.org/r/how-to-contribute
+Contributions are very welcome.  Please read [How To Contribute](https://docs.openedx.org/en/latest/developers/references/developer_guide/process/index.html) for details.
 
 This project is currently accepting all types of contributions, bug fixes,
 security fixes, maintenance work, or new features.  However, please make sure
@@ -168,29 +166,23 @@ Getting Help
 If you're having trouble, we have discussion forums at
 https://discuss.openedx.org where you can connect with others in the community.
 
-Our real-time conversations are on Slack. You can request a `Slack
-invitation`_, then join our `community Slack workspace`_.  Because this is a
-frontend repository, the best place to discuss it would be in the `#wg-frontend
-channel`_.
+Our real-time conversations are on Slack. You can request a [Slack
+invitation](https://openedx.org/slack), then join our 
+[community Slack workspace](https://openedx.slack.com/)  Because this is a
+frontend repository, the best place to discuss it would be in the 
+[#wg-frontend channel](https://openedx.slack.com/archives/C04BM6YC7A6).
 
 For anything non-trivial, the best path is to open an issue in this repository
 with as many details about the issue you are facing as you can provide.
 
 https://github.com/openedx/frontend-app-gradebook/issues
 
-For more information about these options, see the `Getting Help`_ page.
-
-.. _Slack invitation: https://openedx.org/slack
-.. _community Slack workspace: https://openedx.slack.com/
-.. _#wg-frontend channel: https://openedx.slack.com/archives/C04BM6YC7A6
-.. _Getting Help: https://openedx.org/community/connect
+For more information about these options, see the [Getting Help](https://openedx.org/community/connect) page.
 
 The Open edX Code of Conduct
 ============================
 
-All community members are expected to follow the `Open edX Code of Conduct`_.
-
-.. _Open edX Code of Conduct: https://openedx.org/code-of-conduct/
+All community members are expected to follow the [Open edX Code of Conduct](https://openedx.org/code-of-conduct/).
 
 Reporting Security Issues
 =========================

documentation/testing/test-setup.md

@@ -4,15 +4,15 @@ Instructions for setting up environments and data for testing Gradebook.
 
 ## Set up a course with graded content
 
-A course with graded content is the first prerequisite to testing. Use an existing course (e.g. the DemoX Demonstration Course in Devstack) or see [Building and Running an edX Course > Developing Your Course](https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/developing_course/index.html) for notes on how to develop a course from scratch.
+A course with graded content is the first prerequisite to testing. Use an existing course (e.g. the DemoX Demonstration Course in Devstack) or see [Building and Running an edX Course > Developing Your Course](https://docs.openedx.org/en/latest/educators/quickstarts/build_a_course.html) for notes on how to develop a course from scratch.
 
 Notably, the course needs a grading policy and subsections with scoreable content.
 After creating subsections with content, they need to be configured with an "Assignment Type" to be included in grading.
 
 Suggested resources:
-- [Establishing a Grading Policy For Your Course](https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/grading/index.html)
-- [Adding Exercises and Tools](https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/grading/index.html)
-- [Set the Assignment Type and Due Date for a Subsection](https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/developing_course/course_subsections.html#set-the-assignment-type-and-due-date-for-a-subsection)
+- [Establishing a Grading Policy For Your Course](https://docs.openedx.org/en/latest/educators/how-tos/data/manage_learner_grades.html#review-how-grading-is-configured-for-your-course)
+- [Adding Exercises and Tools](https://docs.openedx.org/en/latest/educators/concepts/exercise_tools/about_problems_exercises_tools.html)
+- [Set the Assignment Type and Due Date for a Subsection](https://docs.openedx.org/en/latest/educators/how-tos/course_development/set_subsection_problem_date.html#set-the-assignment-type-and-due-date-for-a-subsection)
 
 ## Enable Gradebook for course
 
@@ -35,7 +35,7 @@ Bulk Management is an added feature to allow modifying grades in bulk via CSV up
 
 ## Create a Master's track for testing Master's-only features
 
-[source](https://openedx.atlassian.net/wiki/spaces/MS/pages/1453818012/Add+a+learner+into+a+master+s+track)
+[source - note: possibly outdated, edx.org-specific](https://openedx.atlassian.net/wiki/spaces/MS/pages/1453818012/Add+a+learner+into+a+master+s+track)
 
 Add a Master's track in your course:
 - As an admin user, go to Django Admin (`{lms-url}/admin`) > Course Modes and add a new course mode

package.json

@@ -30,18 +30,17 @@
   ],
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-footer": "^14.3.0",
-    "@edx/frontend-component-header": "^6.2.0",
+    "@edx/frontend-component-footer": "^14.6.0",
+    "@edx/frontend-component-header": "^6.4.0",
     "@edx/frontend-platform": "^8.3.1",
     "@edx/openedx-atlas": "^0.6.0",
-    "@edx/react-unit-test-utils": "^3.0.0",
+    "@edx/react-unit-test-utils": "^4.0.0",
     "@edx/reactifex": "^2.1.1",
     "@fortawesome/fontawesome-svg-core": "^1.2.25",
     "@fortawesome/free-brands-svg-icons": "^5.11.2",
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
     "@fortawesome/react-fontawesome": "^0.1.5",
     "@openedx/frontend-plugin-framework": "^1.6.0",
-    "@openedx/frontend-slot-footer": "^1.0.2",
     "@openedx/paragon": "^22.16.0",
     "@redux-beacon/segment": "^1.0.0",
     "@reduxjs/toolkit": "^1.5.1",
@@ -52,8 +51,8 @@
     "history": "4.10.1",
     "prop-types": "15.8.1",
     "query-string": "6.13.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
     "react-redux": "^7.2.9",
     "react-router": "6.15.0",
@@ -71,14 +70,13 @@
   "devDependencies": {
     "@edx/browserslist-config": "^1.1.1",
     "@openedx/frontend-build": "^14.3.3",
-    "@testing-library/react": "12.1.5",
+    "@testing-library/react": "^16.2.0",
     "es-check": "^2.3.0",
     "fetch-mock": "^12.2.0",
-    "husky": "2.7.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "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.3"
   }

src/App.jsx

@@ -3,7 +3,7 @@ import { Route, Routes } from 'react-router-dom';
 
 import { AppProvider } from '@edx/frontend-platform/react';
 
-import FooterSlot from '@openedx/frontend-slot-footer';
+import { FooterSlot } from '@edx/frontend-component-footer';
 import Header from '@edx/frontend-component-header';
 
 import store from 'data/store';

src/App.test.jsx

@@ -16,7 +16,7 @@ jest.mock('react-router-dom', () => ({
 jest.mock('@edx/frontend-platform/react', () => ({
   AppProvider: () => 'AppProvider',
 }));
-jest.mock('@edx/frontend-component-footer', () => ({ FooterSlot: 'Footer' }));
+jest.mock('@edx/frontend-component-footer', () => ({ FooterSlot: 'FooterSlot' }));
 jest.mock('data/store', () => 'testStore');
 jest.mock('containers/GradebookPage', () => 'GradebookPage');
 jest.mock('@edx/frontend-component-header', () => 'Header');

src/index.jsx

@@ -1,8 +1,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 {
   APP_READY,
@@ -18,7 +18,14 @@ import App from './App';
 
 subscribe(APP_READY, () => {
   lightning();
-  ReactDOM.render(<App />, document.getElementById('root'));
+
+  const root = createRoot(document.getElementById('root'));
+
+  root.render(
+    <StrictMode>
+      <App />
+    </StrictMode>,
+  );
 });
 
 initialize({

src/index.test.jsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React, { StrictMode } from 'react';
 
 import {
   APP_READY,
@@ -12,9 +11,21 @@ import messages from './i18n';
 import App from './App';
 import '.';
 
-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('@edx/frontend-platform', () => ({
   APP_READY: 'app-is-ready-key',
   initialize: jest.fn(),
@@ -36,8 +47,11 @@ describe('app registry', () => {
   test('subscribe is called for APP_READY, linking App to root element', () => {
     const callArgs = subscribe.mock.calls[0];
     expect(callArgs[0]).toEqual(APP_READY);
-    expect(callArgs[1]()).toEqual(
-      ReactDOM.render(<App />, document.getElementById('root')),
+    callArgs[1]();
+    expect(mockRender).toHaveBeenCalledWith(
+      <StrictMode>
+        <App />
+      </StrictMode>,
     );
   });
   test('initialize is called with requireAuthenticatedUser, messages, and a config handler', () => {

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-gradebook` Plugin Slots
 
-* [`footer_slot`](./FooterSlot/)
+* [`org.openedx.frontend.layout.footer.v1`](./FooterSlot/)