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

* build: Upgrade to Node 20

* refactor: updated package-lock

* refactor: updated the lockfile version workflow

.github/workflows/ci.yml

@@ -9,6 +9,9 @@ on:
 jobs:
   tests:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: [18, 20]
 
     steps:
     - name: Checkout
@@ -18,9 +21,9 @@ jobs:
     - 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
     - name: Validate package-lock.json changes
@@ -34,4 +37,7 @@ jobs:
     - name: i18n_extract
       run: npm run i18n_extract
     - name: Coverage
-      uses: codecov/codecov-action@v3
+      uses: codecov/codecov-action@v4
+      with:
+        token: ${{ secrets.CODECOV_TOKEN }}
+        fail_ci_if_error: true

.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

.nvmrc

@@ -1,2 +1,2 @@
-18
+20
 

Makefile

@@ -37,11 +37,10 @@ pull_translations:
 	            translations/frontend-component-header/src/i18n/messages:frontend-component-header  \
 	            translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
 	            translations/paragon/src/i18n/messages:paragon \
-	            translations/frontend-lib-content-components/src/i18n/messages:frontend-lib-content-components \
 	            translations/frontend-platform/src/i18n/messages:frontend-platform \
 	            translations/frontend-app-communications/src/i18n/messages:frontend-app-communications
 
-	$(intl_imports) frontend-component-header frontend-component-footer paragon frontend-lib-content-components frontend-platform frontend-app-communications
+	$(intl_imports) frontend-component-header frontend-component-footer paragon frontend-platform frontend-app-communications
 
 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:

README.rst

@@ -1,5 +1,5 @@
 frontend-app-communications
-#############################
+###########################
 
 |license-badge| |status-badge| |ci-badge| |codecov-badge|
 
@@ -7,52 +7,56 @@ frontend-app-communications
 Purpose
 *******
 
-A tool used by course teams to communicate with their learners. The interface for anything related to instructor to learner communications. Instructor bulk email, for example.
+A tool used by course teams to communicate with their learners. The interface for anything related to instructor-to-learner communications. Instructor bulk email, for example.
 
 Getting started
-------------
+---------------
 
-For now, this repo is not intergrated with devstack. You'll be running the app locally and not through docker. This does make setup a little easier.
+For now, this repo is not integrated with devstack. You'll be running the app locally and not through docker. This does make setup a little easier.
 
 Cloning and Startup
 ===================
 
-   1. Clone your new repo:
+1. Clone your new repo:
 
-   ``git clone https://github.com/edx/frontend-app-communications.git``
+.. code-block:: bash
 
-   2. Use node v18.x.
+   git clone https://github.com/edx/frontend-app-communications.git
 
-      The current version of the micro-frontend build scripts support node 18.
-      Using other major versions of node *may* work, but this is unsupported.  For
-      convenience, this repository includes an .nvmrc file to help in setting the
-      correct node version via `nvm <https://github.com/nvm-sh/nvm>`_.
+2. Use node v18.x.
 
-   3. Install npm dependencies:
+   The current version of the micro-frontend build scripts supports node 18.
+   Using other major versions of node *may* work, but this is unsupported.  For
+   convenience, this repository includes a ``.nvmrc`` file to help in setting the
+   correct node version via `nvm <https://github.com/nvm-sh/nvm>`_.
 
-   ``cd frontend-app-communications && npm install``
+3. Install npm dependencies:
 
-   4. Update the application port to use for local development:
+.. code-block:: bash
 
-      Default port is 1984. If this does not work for you, update the line
-      `PORT=1984` to your port in all .env.* files
+   cd frontend-app-communications && npm install
 
-   5. Start the devserver. The app will be running at ``localhost:1984``, or whatever port you change it too.
+4. Update the application port to use for local development:
 
-      .. code-block::
+   The default port is 1984. If this does not work for you, update the line
+   ``PORT=1984`` to your port in all ``.env.*`` files
 
-         npm start
+5. Start the devserver. The app will be running at ``localhost:1984``, or whatever port you change it too.
+
+   .. code-block:: bash
+
+      npm start
 
 
 Environment Variables/Setup Notes
 ---------------------------------
 
-If you wish to add new environment varibles for local testing, they should be listed in 2 places:
+If you wish to add new environment variables for local testing, they should be listed in 2 places:
 
 1. In ``.env.development``
 2. Added to the ``mergeConfig`` found in ``src/index.jsx``
 
-.. code-block::
+.. code-block:: jsx
 
    initialize({
       config: () => {
@@ -61,14 +65,19 @@ If you wish to add new environment varibles for local testing, they should be li
        }, 'CommuncationsAppConfig');
 
 Running Tests
----------------------------
+-------------
 
 Tests use `jest` and `react-test-library`. To run all the tests for this repo:
 
-   .. code-block::
+.. code-block::
 
-      npm test
+   npm test
 
+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>`_.
 
 **Production Build**
 
@@ -77,7 +86,7 @@ The production build is created with ``npm run build``.
 Internationalization
 ====================
 
-Please see refer to the `frontend-platform i18n howto`_ for documentation on
+Please refer to the `frontend-platform i18n howto`_ for documentation on
 internationalization.
 
 .. _frontend-platform i18n howto: https://github.com/openedx/frontend-platform/blob/master/docs/how_tos/i18n.rst
@@ -160,4 +169,4 @@ Please do not report security issues in public, and email security@openedx.org i
 
 .. |codecov-badge| image:: https://codecov.io/github/openedx/frontend-app-communications/coverage.svg?branch=master
     :target: https://codecov.io/github/openedx/frontend-app-communications?branch=master
-    :alt: Codecov
+    :alt: Codecov

package.json

@@ -34,9 +34,8 @@
   },
   "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.0.1",
+    "@edx/frontend-component-header": "^5.6.0",
+    "@edx/frontend-platform": "^8.0.0",
     "@edx/openedx-atlas": "^0.6.0",
     "@edx/tinymce-language-selector": "1.1.0",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
@@ -44,6 +43,8 @@
     "@fortawesome/free-regular-svg-icons": "5.15.4",
     "@fortawesome/free-solid-svg-icons": "5.15.4",
     "@fortawesome/react-fontawesome": "0.2.0",
+    "@openedx/frontend-plugin-framework": "^1.1.2",
+    "@openedx/frontend-slot-footer": "^1.0.2",
     "@openedx/paragon": "^22.0.0",
     "@tinymce/tinymce-react": "3.14.0",
     "axios": "0.27.2",
@@ -64,14 +65,14 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.2.0",
+    "@openedx/frontend-build": "14.0.3",
     "@edx/reactifex": "^2.1.1",
-    "@openedx/frontend-build": "13.0.27",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "12.1.5",
     "axios-mock-adapter": "1.21.2",
     "glob": "7.2.3",
     "husky": "7.0.4",
-    "jest": "27.5.1",
+    "jest": "29.7.0",
     "prettier": "2.8.1",
     "rosie": "2.1.0"
   }

src/components/page-container/PageContainer.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { useParams } from 'react-router-dom';
 
 import { LearningHeader as Header } from '@edx/frontend-component-header';
-import Footer from '@edx/frontend-component-footer';
+import FooterSlot from '@openedx/frontend-slot-footer';
 import { Spinner } from '@openedx/paragon';
 
 import { getCohorts, getCourseHomeCourseMetadata } from './data/api';
@@ -72,7 +72,7 @@ export default function PageContainer(props) {
               {children}
             </main>
           </div>
-          <Footer />
+          <FooterSlot />
         </>
       </CourseMetadataContext.Provider>
     );

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