refactor: updated frontend-platform & paragon version

* feat!: remove broken transifex and use atlas exclusively

* feat: install openedx-atlas

.github/workflows/lockfileversion-check.yml

@@ -10,4 +10,4 @@ on:
 
 jobs:
   version-check:
-    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master
+    uses: openedx/.github/.github/workflows/lockfile-check.yml@master

.github/workflows/update-browserslist-db.yml

@@ -0,0 +1,12 @@
+name: Update Browserslist DB
+on:
+  schedule:
+    - cron:  '0 0 * * 1'
+  workflow_dispatch:
+
+jobs:
+  update-browserslist:
+    uses: openedx/.github/.github/workflows/update-browserslist-db.yml@master
+
+    secrets:
+        requirements_bot_github_token: ${{ secrets.requirements_bot_github_token }}

Makefile

@@ -4,14 +4,14 @@ i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json
 
 # This directory must match .babelrc .
-transifex_temp = ./temp/babel-plugin-react-intl
+transifex_temp = ./temp/babel-plugin-formatjs
 
 precommit:
 	npm run lint
 	npm audit
 
 requirements:
-	npm install
+	npm ci
 
 i18n.extract:
 	# Pulling display strings from .jsx files into .json files...
@@ -33,13 +33,15 @@ pull_translations:
 	rm -rf src/i18n/messages
 	mkdir src/i18n/messages
 	cd src/i18n/messages \
-	   && atlas pull \
+	   && atlas pull $(ATLAS_OPTIONS) \
 	            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-app-communications
+	$(intl_imports) frontend-component-header frontend-component-footer paragon frontend-lib-content-components frontend-platform frontend-app-communications
 
 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:

README.rst

@@ -1,45 +1,48 @@
-|Codecov| |license|
-
-.. |codecov| image:: https://codecov.io/gh/edx/frontend-app-learning/branch/master/graph/badge.svg?token=3z7XvuzTq3
-   :target: https://codecov.io/gh/edx/frontend-app-communications
-.. |license| image:: https://img.shields.io/badge/license-AGPL-informational
-   :target: https://github.com/edx/frontend-app-account/blob/master/LICENSE
-
 frontend-app-communications
-==============================
+#############################
 
-Please tag **edx-aperture** on any PRs or issues.  Thanks!
+|license-badge| |status-badge| |ci-badge| |codecov-badge|
 
-Introduction
-------------
 
-A tool used by course teams to communicate with thier learners. The interface for anything related to instructor to learner communications. Instructor bulk email, for example.
+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.
 
 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.
 
-1. Clone the repo into your usual workspace
+Cloning and Startup
+===================
 
-   .. code-block::
+   1. Clone your new repo:
 
-      mkdir -p ~/workspace/
-      cd ~/workspace/
-      git clone https://github.com/edx/frontend-app-communications.git
+   ``git clone https://github.com/edx/frontend-app-communications.git``
 
-2. Install frontend dependencies
+   2. Use node v18.x.
 
-   .. code-block::
+      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>`_.
 
-      npm i
+   3. Install npm dependencies:
 
-3. Start the devserver. The app will be running at ``localhost:1984``, or whatever port you change it too.
+   ``cd frontend-app-communications && npm install``
 
-   .. code-block::
+   4. Update the application port to use for local development:
+
+      Default port is 1984. If this does not work for you, update the line
+      `PORT=1984` to your port in all .env.* files
+
+   5. Start the devserver. The app will be running at ``localhost:1984``, or whatever port you change it too.
+
+      .. code-block::
+
+         npm start
 
-      npm start
 
 Environment Variables/Setup Notes
 ---------------------------------
@@ -65,3 +68,96 @@ Tests use `jest` and `react-test-library`. To run all the tests for this repo:
    .. code-block::
 
       npm test
+
+
+**Production Build**
+
+The production build is created with ``npm run build``.
+
+Internationalization
+====================
+
+Please see 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
+
+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`_.
+
+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-communications/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
+
+License
+*******
+
+The code in this repository is licensed under the AGPLv3 unless otherwise
+noted.
+
+Please see `LICENSE <LICENSE>`_ for details.
+
+Contributing
+************
+
+Contributions are very welcome.  Please read `How To Contribute`_ for details.
+
+.. _How To Contribute: https://openedx.org/r/how-to-contribute
+
+This project is currently accepting all types of contributions, bug fixes,
+security fixes, maintenance work, or new features.  However, please make sure
+to have a discussion about your new feature idea with the maintainers prior to
+beginning development to maximize the chances of your change being accepted.
+You can start a conversation by creating a new issue on this repo summarizing
+your idea.
+
+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/
+
+People
+******
+
+The assigned maintainers for this component and other project details may be
+found in `Backstage`_. Backstage pulls this data from the ``catalog-info.yaml``
+file in this repo.
+
+.. _Backstage: https://open-edx-backstage.herokuapp.com/catalog/default/component/frontend-app-communications
+
+Reporting Security Issues
+*************************
+
+Please do not report security issues in public, and email security@openedx.org instead.
+
+.. |license-badge| image:: https://img.shields.io/github/license/openedx/frontend-app-communications.svg
+    :target: https://github.com/openedx/frontend-app-communications/blob/master/LICENSE
+    :alt: License
+
+.. |status-badge| image:: https://img.shields.io/badge/Status-Maintained-brightgreen
+
+.. |ci-badge| image:: https://github.com/openedx/frontend-app-communications/actions/workflows/ci.yml/badge.svg
+    :target: https://github.com/openedx/frontend-app-communications/actions/workflows/ci.yml
+    :alt: Continuous Integration
+
+.. |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

catalog-info.yaml

@@ -0,0 +1,18 @@
+# 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-communications"
+  description: "A tool used by course teams to communicate with their learners."
+  links:
+    - url: "https://github.com/openedx/frontend-app-communications/blob/master/README.rst"
+      title: "README"
+      icon: "Article"
+  annotations:
+    openedx.org/arch-interest-groups: ""
+spec:
+  owner: group:frontend-all
+  type: "service"
+  lifecycle: "production"

package.json

@@ -11,7 +11,7 @@
   ],
   "scripts": {
     "build": "fedx-scripts webpack",
-    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
+    "i18n_extract": "fedx-scripts formatjs extract",
     "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
     "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx .",
     "snapshot": "fedx-scripts jest --updateSnapshot",
@@ -33,12 +33,12 @@
     "url": "https://github.com/edx/frontend-app-communications/issues"
   },
   "dependencies": {
-    "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-    "@edx/frontend-component-footer": "^12.0.0",
-    "@edx/frontend-component-header": "^4.0.0",
-    "@edx/frontend-platform": "^4.2.0",
+    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
+    "@edx/frontend-component-footer": "12.5.0",
+    "@edx/frontend-component-header": "4.8.0",
+    "@edx/frontend-platform": "6.2.0",
     "@edx/openedx-atlas": "^0.5.0",
-    "@edx/paragon": "^20.20.0",
+    "@edx/paragon": "21.5.6",
     "@edx/tinymce-language-selector": "1.1.0",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
@@ -52,26 +52,26 @@
     "jquery": "3.6.1",
     "popper.js": "1.16.1",
     "prop-types": "15.8.1",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "react-helmet": "^6.1.0",
     "react-redux": "7.2.9",
-    "react-router": "5.3.4",
-    "react-router-dom": "5.3.4",
+    "react-router": "6.15.0",
+    "react-router-dom": "6.15.0",
     "redux": "4.2.0",
     "regenerator-runtime": "0.13.11",
     "tinymce": "5.10.7"
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.2.0",
-    "@edx/frontend-build": "^12.7.0",
+    "@edx/frontend-build": "13.0.1",
     "@edx/reactifex": "^2.1.1",
     "@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"
   }

renovate.json

@@ -24,7 +24,7 @@
       "automerge": true
     },
     {
-      "matchPackagePatterns": ["@edx"],
+      "matchPackagePatterns": ["@edx", "@openedx"],
       "matchUpdateTypes": ["minor", "patch"],
       "automerge": true
     }

src/components/bulk-email-tool/BulkEmailTool.jsx

@@ -24,7 +24,7 @@ export default function BulkEmailTool() {
             <Container size="md">
               <BackToInstructor courseId={courseId} />
               <div className="row pb-4.5">
-                <h1 className="text-primary-500" id="main-content">
+                <h1 className="text-primary-500">
                   <FormattedMessage
                     id="bulk.email.send.email.header"
                     defaultMessage="Send an email"

src/components/bulk-email-tool/bulk-email-task-manager/ViewEmailModal.jsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal } from '@edx/paragon';
+import { ActionRow, Button, ModalDialog } from '@edx/paragon';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import messages from './messages';
 import { BulkEmailContext } from '../bulk-email-context';
@@ -12,10 +12,13 @@ function ViewEmailModal({
   const [, dispatch] = useContext(BulkEmailContext);
   return (
     <div>
-      <Modal
-        open={isOpen}
-        title=""
-        body={(
+      <ModalDialog
+        isOpen={isOpen}
+        onClose={() => setModalOpen(false)}
+        hasCloseButton
+      >
+        <ModalDialog.Body>
+
           <div>
             <div className="d-flex flex-row">
               <p>{intl.formatMessage(messages.modalMessageSubject)}</p>
@@ -40,24 +43,30 @@ function ViewEmailModal({
               <div dangerouslySetInnerHTML={{ __html: messageContent.email.html_message }} />
             </div>
           </div>
-        )}
-        onClose={() => setModalOpen(false)}
-        buttons={[
-          <Button
-            onClick={() => {
-              dispatch(
-                copyToEditor({
-                  emailBody: messageContent.email.html_message,
-                  emailSubject: messageContent.subject,
-                }),
-              );
-              setModalOpen(false);
-            }}
-          >
-            <FormattedMessage id="bulk.email.tool.copy.message.button" defaultMessage="Copy to editor" />
-          </Button>,
-        ]}
-      />
+        </ModalDialog.Body>
+        <ModalDialog.Footer>
+          <ActionRow>
+            <ModalDialog.CloseButton variant="link">
+              <FormattedMessage id="bulk.email.tool.close.modalDialog.button" defaultMessage="Close" />
+            </ModalDialog.CloseButton>
+            <Button
+              onClick={() => {
+                dispatch(
+                  copyToEditor({
+                    emailBody: messageContent.email.html_message,
+                    emailSubject: messageContent.subject,
+                  }),
+                );
+                setModalOpen(false);
+              }}
+              variant="primary"
+            >
+              <FormattedMessage id="bulk.email.tool.copy.message.button" defaultMessage="Copy to editor" />
+
+            </Button>
+          </ActionRow>
+        </ModalDialog.Footer>
+      </ModalDialog>
     </div>
   );
 }

src/components/bulk-email-tool/bulk-email-task-manager/messages.js

@@ -34,6 +34,10 @@ const messages = defineMessages({
     id: 'bulk.email.content.history.table.modal.messageBody',
     defaultMessage: 'Message:',
   },
+  modalCloseButton: {
+    id: 'bulk.email.tool.close.modalDialog.button',
+    defaultMessage: 'Close',
+  },
   emailHistoryTableViewMessageInstructions: {
     id: 'bulk.email.content.history.table.viewMessageInstructions',
     defaultMessage: 'To read a sent email message, click the `View Message` button within the table.',

src/components/page-container/PageContainer.jsx

@@ -59,18 +59,20 @@ export default function PageContainer(props) {
   if (courseMetadata) {
     return (
       <CourseMetadataContext.Provider value={courseMetadata}>
-        <Header
-          className="learning-header"
-          courseOrg={courseMetadata.org}
-          courseNumber={courseMetadata.number}
-          courseTitle={courseMetadata.title}
-        />
-        <div className="pb-3 container">
-          <main>
-            {children}
-          </main>
-        </div>
-        <Footer />
+        <>
+          <Header
+            className="learning-header"
+            courseOrg={courseMetadata.org}
+            courseNumber={courseMetadata.number}
+            courseTitle={courseMetadata.title}
+          />
+          <div className="pb-3 container">
+            <main id="main-content">
+              {children}
+            </main>
+          </div>
+          <Footer />
+        </>
       </CourseMetadataContext.Provider>
     );
   }

src/index.jsx

@@ -8,7 +8,7 @@ import { AppProvider, AuthenticatedPageRoute, ErrorPage } from '@edx/frontend-pl
 import ReactDOM from 'react-dom';
 
 import { Helmet } from 'react-helmet';
-import { Switch } from 'react-router-dom';
+import { Routes, Route } from 'react-router-dom';
 import messages from './i18n';
 
 import './index.scss';
@@ -21,13 +21,18 @@ subscribe(APP_READY, () => {
       <Helmet>
         <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
       </Helmet>
-      <Switch>
-        <AuthenticatedPageRoute path="/courses/:courseId/bulk_email">
-          <PageContainer>
-            <BulkEmailTool />
-          </PageContainer>
-        </AuthenticatedPageRoute>
-      </Switch>
+      <Routes>
+        <Route
+          path="/courses/:courseId/bulk_email"
+          element={(
+            <AuthenticatedPageRoute>
+              <PageContainer>
+                <BulkEmailTool />
+              </PageContainer>
+            </AuthenticatedPageRoute>
+          )}
+        />
+      </Routes>
     </AppProvider>,
     document.getElementById('root'),
   );

src/setupTest.js

@@ -14,6 +14,7 @@ jest.mock('@edx/frontend-platform/react/hooks', () => ({
   ...jest.requireActual('@edx/frontend-platform/react/hooks'),
   useTrackColorSchemeChoice: jest.fn(),
 }));
+
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
   value: jest.fn().mockImplementation((query) => ({