chore: update browserslist DB (#272)

Co-authored-by: arbrandes <759355+arbrandes@users.noreply.github.com>

.env

@@ -21,3 +21,5 @@ USER_INFO_COOKIE_NAME=''
 SCHEDULE_EMAIL_SECTION=''
 APP_ID=''
 MFE_CONFIG_API_URL=''
+# Fallback in local style files
+PARAGON_THEME_URLS={}

.env.development

@@ -22,3 +22,5 @@ USER_INFO_COOKIE_NAME='edx-user-info'
 SCHEDULE_EMAIL_SECTION='true'
 APP_ID=''
 MFE_CONFIG_API_URL=''
+# Fallback in local style files
+PARAGON_THEME_URLS={}

.env.test

@@ -20,3 +20,4 @@ USER_INFO_COOKIE_NAME='edx-user-info'
 SCHEDULE_EMAIL_SECTION='true'
 APP_ID=''
 MFE_CONFIG_API_URL=''
+PARAGON_THEME_URLS={}

.nvmrc

@@ -1,2 +1 @@
-20
-
+24

README.rst

@@ -5,14 +5,24 @@ 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.
 
-Getting started
----------------
+Getting Started
+***************
+
+Prerequisites
+=============
+
+`Tutor`_ is currently recommended as a development environment for your
+new MFE. Please refer
+to the `relevant tutor-mfe documentation`_ to get started using it.
+
+.. _Tutor: https://github.com/overhangio/tutor
+
+.. _relevant tutor-mfe documentation: https://github.com/overhangio/tutor-mfe?tab=readme-ov-file#mfe-development
 
-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
 ===================
@@ -23,9 +33,9 @@ Cloning and Startup
 
    git clone https://github.com/edx/frontend-app-communications.git
 
-2. Use node v18.x.
+2. Use the version of Node specified in the ``.nvmrc`` file.
 
-   The current version of the micro-frontend build scripts supports node 18.
+   The current version of the micro-frontend build scripts supports the version of Node found in ``.nvmrc``.
    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>`_.

package.json

@@ -12,8 +12,8 @@
   "scripts": {
     "build": "fedx-scripts webpack",
     "i18n_extract": "fedx-scripts formatjs extract",
-    "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
-    "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx .",
+    "lint": "fedx-scripts eslint --ext .js --ext .jsx src/",
+    "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx src/",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
     "dev": "PUBLIC_PATH=/communications/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
@@ -31,8 +31,8 @@
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
     "@edx/frontend-component-footer": "^14.6.0",
-    "@edx/frontend-component-header": "^6.4.0",
-    "@edx/frontend-platform": "^8.3.1",
+    "@edx/frontend-component-header": "^6.6.1",
+    "@edx/frontend-platform": "^8.3.7",
     "@edx/openedx-atlas": "^0.6.0",
     "@edx/tinymce-language-selector": "1.1.0",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
@@ -41,7 +41,7 @@
     "@fortawesome/free-solid-svg-icons": "5.15.4",
     "@fortawesome/react-fontawesome": "0.2.0",
     "@openedx/frontend-plugin-framework": "^1.6.0",
-    "@openedx/paragon": "^22.16.0",
+    "@openedx/paragon": "^23.3.0",
     "@tinymce/tinymce-react": "3.14.0",
     "axios": "0.27.2",
     "classnames": "2.3.2",
@@ -61,8 +61,8 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.2.0",
-    "@edx/reactifex": "^2.1.1",
-    "@openedx/frontend-build": "^14.3.3",
+    "@edx/typescript-config": "^1.1.0",
+    "@openedx/frontend-build": "^14.6.2",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "axios-mock-adapter": "1.21.2",

src/components/bulk-email-tool/bulk-email-form/BulkEmailForm.jsx

@@ -8,7 +8,7 @@ import {
 import {
   SpinnerSimple, Cancel, Send, Event, Check,
 } from '@openedx/paragon/icons';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import classNames from 'classnames';
 import { getConfig } from '@edx/frontend-platform';
 import TextEditor from '../text-editor/TextEditor';
@@ -51,8 +51,8 @@ function BulkEmailForm(props) {
     courseId,
     cohorts,
     courseModes,
-    intl,
   } = props;
+  const intl = useIntl();
   const [{ editor }, dispatch] = useContext(BulkEmailContext);
   const [emailFormStatus, setEmailFormStatus] = useState(FORM_SUBMIT_STATES.DEFAULT);
   const [emailFormValidation, setEmailFormValidation] = useState({
@@ -392,7 +392,7 @@ BulkEmailForm.defaultProps = {
 BulkEmailForm.propTypes = {
   courseId: PropTypes.string.isRequired,
   cohorts: PropTypes.arrayOf(PropTypes.string),
-  intl: intlShape.isRequired,
+
   courseModes: PropTypes.arrayOf(
     PropTypes.shape({
       slug: PropTypes.string.isRequired,
@@ -401,4 +401,4 @@ BulkEmailForm.propTypes = {
   ).isRequired,
 };
 
-export default injectIntl(BulkEmailForm);
+export default BulkEmailForm;

src/components/bulk-email-tool/bulk-email-form/test/BulkEmailForm.test.jsx

@@ -39,7 +39,7 @@ function renderBulkEmailForm() {
 function renderBulkEmailFormContext(value) {
   return (
     <BulkEmailContext.Provider value={[value, dispatchMock]}>
-      <BulkEmailForm courseId="test" courseMode={courseMode} />
+      <BulkEmailForm courseId="test" courseModes={courseMode} />
     </BulkEmailContext.Provider>
   );
 }

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

@@ -3,7 +3,7 @@
 import React, { useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useParams } from 'react-router-dom';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import {
   Button, Collapsible, Icon,
@@ -14,7 +14,8 @@ import { getSentEmailHistory } from './data/api';
 import BulkEmailTaskManagerTable from './BulkEmailHistoryTable';
 import ViewEmailModal from './ViewEmailModal';
 
-function BulkEmailContentHistory({ intl }) {
+function BulkEmailContentHistory() {
+  const intl = useIntl();
   const { courseId } = useParams();
   const [emailHistoryData, setEmailHistoryData] = useState();
   const [errorRetrievingData, setErrorRetrievingData] = useState(false);
@@ -154,7 +155,6 @@ function BulkEmailContentHistory({ intl }) {
 }
 
 BulkEmailContentHistory.propTypes = {
-  intl: intlShape.isRequired,
   row: PropTypes.shape({
     index: PropTypes.number,
   }),
@@ -164,4 +164,4 @@ BulkEmailContentHistory.defaultProps = {
   row: {},
 };
 
-export default injectIntl(BulkEmailContentHistory);
+export default BulkEmailContentHistory;

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

@@ -1,13 +1,14 @@
 import React, { useState } from 'react';
 import { useParams } from 'react-router-dom';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { getInstructorTasks } from './data/api';
 import messages from './messages';
 import useInterval from '../../../utils/useInterval';
 import BulkEmailTaskManagerTable from './BulkEmailHistoryTable';
 
-function BulkEmailPendingTasks({ intl }) {
+function BulkEmailPendingTasks() {
+  const intl = useIntl();
   const { courseId } = useParams();
 
   const [instructorTaskData, setInstructorTaskData] = useState();
@@ -89,8 +90,4 @@ function BulkEmailPendingTasks({ intl }) {
   );
 }
 
-BulkEmailPendingTasks.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(BulkEmailPendingTasks);
+export default BulkEmailPendingTasks;

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

@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { Icon, Collapsible } from '@openedx/paragon';
 import { SpinnerSimple } from '@openedx/paragon/icons';
@@ -11,7 +11,8 @@ import BulkEmailTaskManagerTable from './BulkEmailHistoryTable';
 
 import './bulkEmailTaskHistory.scss';
 
-function BulkEmailTaskHistory({ intl }) {
+function BulkEmailTaskHistory() {
+  const intl = useIntl();
   const { courseId } = useParams();
 
   const [emailTaskHistoryData, setEmailTaskHistoryData] = useState([]);
@@ -117,8 +118,4 @@ function BulkEmailTaskHistory({ intl }) {
   );
 }
 
-BulkEmailTaskHistory.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(BulkEmailTaskHistory);
+export default BulkEmailTaskHistory;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
 import BulkEmailContentHistory from './BulkEmailContentHistory';
 import BulkEmailTaskHistory from './BulkEmailTaskHistory';
@@ -9,7 +9,8 @@ import messages from './messages';
 import BulkEmailScheduledEmailsTable from './bulk-email-scheduled-emails-table';
 import BulkEmailPendingTasksAlert from './BulkEmailPendingTasksAlert';
 
-function BulkEmailTaskManager({ intl, courseId }) {
+function BulkEmailTaskManager({ courseId }) {
+  const intl = useIntl();
   return (
     <div className="w-100">
       {getConfig().SCHEDULE_EMAIL_SECTION && (
@@ -34,8 +35,7 @@ function BulkEmailTaskManager({ intl, courseId }) {
 }
 
 BulkEmailTaskManager.propTypes = {
-  intl: intlShape.isRequired,
   courseId: PropTypes.string.isRequired,
 };
 
-export default injectIntl(BulkEmailTaskManager);
+export default BulkEmailTaskManager;

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

@@ -1,14 +1,15 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { ActionRow, Button, ModalDialog } from '@openedx/paragon';
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import messages from './messages';
 import { BulkEmailContext } from '../bulk-email-context';
 import { copyToEditor } from '../bulk-email-form/data/actions';
 
 function ViewEmailModal({
-  intl, messageContent, isOpen, setModalOpen,
+  messageContent, isOpen, setModalOpen,
 }) {
+  const intl = useIntl();
   const [, dispatch] = useContext(BulkEmailContext);
   return (
     <div>
@@ -72,7 +73,6 @@ function ViewEmailModal({
 }
 
 ViewEmailModal.propTypes = {
-  intl: intlShape.isRequired,
   messageContent: PropTypes.shape({
     subject: PropTypes.string,
     requester: PropTypes.string,
@@ -86,4 +86,4 @@ ViewEmailModal.propTypes = {
   setModalOpen: PropTypes.func.isRequired,
 };
 
-export default injectIntl(ViewEmailModal);
+export default ViewEmailModal;

src/components/bulk-email-tool/bulk-email-task-manager/bulk-email-scheduled-emails-table/BulkEmailScheduledEmailsTable.jsx

@@ -4,7 +4,7 @@
 import React, {
   useCallback, useContext, useState, useEffect,
 } from 'react';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   Alert, DataTable, Icon, IconButton, useToggle,
 } from '@openedx/paragon';
@@ -32,7 +32,8 @@ function flattenScheduledEmailsArray(emails) {
   }));
 }
 
-function BulkEmailScheduledEmailsTable({ intl }) {
+function BulkEmailScheduledEmailsTable() {
+  const intl = useIntl();
   const { courseId } = useParams();
   const [{ scheduledEmailsTable }, dispatch] = useContext(BulkEmailContext);
   const [tableData, setTableData] = useState([]);
@@ -196,8 +197,4 @@ function BulkEmailScheduledEmailsTable({ intl }) {
   );
 }
 
-BulkEmailScheduledEmailsTable.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(BulkEmailScheduledEmailsTable);
+export default BulkEmailScheduledEmailsTable;

src/components/bulk-email-tool/task-alert-modal/TaskAlertModal.jsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ActionRow, AlertModal, Button } from '@openedx/paragon';
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 
 function TaskAlertModal(props) {
   const {
-    isOpen, close, alertMessage, intl,
+    isOpen, close, alertMessage,
   } = props;
-
+  const intl = useIntl();
   const messages = {
     taskAlertTitle: {
       id: 'bulk.email.task.alert.title',
@@ -57,7 +57,6 @@ TaskAlertModal.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   close: PropTypes.func.isRequired,
   alertMessage: PropTypes.node.isRequired,
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(TaskAlertModal);
+export default TaskAlertModal;

src/components/bulk-email-tool/text-editor/TextEditor.jsx

@@ -17,8 +17,8 @@ import 'tinymce/plugins/image';
 import 'tinymce/plugins/codesample';
 import '@edx/tinymce-language-selector';
 
-import contentUiCss from 'tinymce/skins/ui/oxide/content.css';
-import contentCss from 'tinymce/skins/content/default/content.css';
+import contentUiCss from 'tinymce/skins/ui/oxide/content.css?raw';
+import contentCss from 'tinymce/skins/content/default/content.css?raw';
 
 export default function TextEditor(props) {
   const {

src/index.scss

@@ -1,7 +1,4 @@
-@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;
 
 @import "~@edx/frontend-component-header/dist/index";
 @import "~@edx/frontend-component-footer/dist/footer";

src/index.test.jsx

@@ -3,7 +3,7 @@ import {
 } from '@edx/frontend-platform';
 
 // Jest needs this for module resolution
-import * as app from '.'; // eslint-disable-line no-unused-vars
+import * as app from '.'; // eslint-disable-line @typescript-eslint/no-unused-vars
 
 // These need to be var not let so they get hoisted
 // and can be used by jest.mock (which is also hoisted)

src/setupTest.js

@@ -13,6 +13,7 @@ import messages from './i18n';
 jest.mock('@edx/frontend-platform/react/hooks', () => ({
   ...jest.requireActual('@edx/frontend-platform/react/hooks'),
   useTrackColorSchemeChoice: jest.fn(),
+  useParagonTheme: () => [{ isThemeLoaded: true }, jest.fn()],
 }));
 
 Object.defineProperty(window, 'matchMedia', {
@@ -57,11 +58,6 @@ export function initializeMockApp() {
   return { loggingService, i18nService, authService };
 }
 
-jest.mock('@edx/frontend-platform/react/hooks', () => ({
-  ...jest.requireActual('@edx/frontend-platform/react/hooks'),
-  useTrackColorSchemeChoice: jest.fn(),
-}));
-
 function render(ui, options) {
   // eslint-disable-next-line react/prop-types
   function Wrapper({ children }) {

tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "@edx/typescript-config",
+  "compilerOptions": {
+    "baseUrl": "./src",
+    "paths": {
+      "*": ["*"]
+    },
+    "rootDir": ".",
+    "outDir": "dist"
+  },
+  "include": ["*.js", ".eslintrc.js", "src/**/*", "plugins/**/*", "jest.config.ts"],
+  "exclude": ["*.js", ".eslintrc.js", "dist", "node_modules"]
+}

webpack.dev.config.js

@@ -22,8 +22,13 @@ const webpack5esmInteropRule = {
   },
 };
 
+const rawAssetRule = {
+  resourceQuery: /raw/,
+  type: 'asset/source',
+};
+
 const otherRules = config.module.rules;
 
-config.module.rules = [webpack5esmInteropRule, ...otherRules];
+config.module.rules = [rawAssetRule, webpack5esmInteropRule, ...otherRules];
 
 module.exports = config;

webpack.prod.config.js

@@ -14,8 +14,13 @@ const webpack5esmInteropRule = {
   },
 };
 
+const rawAssetRule = {
+  resourceQuery: /raw/,
+  type: 'asset/source',
+};
+
 const otherRules = config.module.rules;
 
-config.module.rules = [webpack5esmInteropRule, ...otherRules];
+config.module.rules = [rawAssetRule, webpack5esmInteropRule, ...otherRules];
 
 module.exports = config;