feat(olmo): add cdn and css variables compatibility

.eslintrc.js

@@ -1,3 +1,8 @@
+/* eslint-disable import/no-extraneous-dependencies */
 const { createConfig } = require('@edx/frontend-build');
 
-module.exports = createConfig('eslint');
+module.exports = createConfig('eslint', {
+  rules: {
+    'react/function-component-definition': 'off',
+  },
+});

.github/workflows/ci.yml

@@ -33,7 +33,5 @@ jobs:
       run: npm run build
     - name: i18n_extract
       run: npm run i18n_extract
-    - name: is-es5
-      run: npm run is-es5
     - name: Coverage
       uses: codecov/codecov-action@v2

package.json

@@ -7,18 +7,17 @@
     "url": "git+https://github.com/edx/frontend-app-communications.git"
   },
   "browserslist": [
-    "last 2 versions",
-    "ie 11"
+    "extends @edx/browserslist-config"
   ],
   "scripts": {
     "build": "fedx-scripts webpack",
     "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
-    "is-es5": "es-check es5 ./dist/*.js",
     "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
     "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx .",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
-    "test": "TZ=UTC fedx-scripts jest --coverage --passWithNoTests"
+    "test": "TZ=UTC fedx-scripts jest --coverage --passWithNoTests",
+    "replace-variables": "paragon replace-variables -p src -t usage"
   },
   "husky": {
     "hooks": {
@@ -36,10 +35,10 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@edx/[email protected]",
-    "@edx/frontend-component-footer": "11.2.1",
-    "@edx/frontend-component-header": "3.2.1",
-    "@edx/frontend-platform": "2.6.2",
-    "@edx/paragon": "19.25.3",
+    "@edx/frontend-component-footer": "npm:@edunext/[email protected]",
+    "@edx/frontend-component-header": "npm:@edunext/[email protected]",
+    "@edx/frontend-platform": "npm:@edunext/[email protected]",
+    "@edx/paragon": "22.0.0-alpha.13",
     "@edx/tinymce-language-selector": "1.1.0",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
@@ -63,17 +62,18 @@
     "tinymce": "5.10.5"
   },
   "devDependencies": {
-    "@edx/frontend-build": "9.2.2",
+    "@edx/browserslist-config": "^1.2.0",
+    "@edx/frontend-build": "github:edunext/frontend-build#ednx-release/css-variables",
+    "@edx/reactifex": "^2.1.1",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "12.1.5",
     "axios-mock-adapter": "1.21.2",
     "codecov": "3.8.3",
-    "es-check": "6.2.1",
     "glob": "7.2.3",
     "husky": "7.0.4",
     "jest": "27.5.1",
     "prettier": "2.7.1",
     "reactifex": "1.1.1",
     "rosie": "2.1.0"
   }
-}
+}

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

@@ -12,7 +12,7 @@ import { CourseMetadataContext } from '../page-container/PageContainer';
 import { BulkEmailProvider } from './bulk-email-context';
 import BackToInstructor from '../navigation-tabs/BackToInstructor';
 
-export default function BulkEmailTool() {
+const BulkEmailTool = () => {
   const { courseId } = useParams();
 
   return (
@@ -46,4 +46,6 @@ export default function BulkEmailTool() {
       ))}
     </CourseMetadataContext.Consumer>
   );
-}
+};
+
+export default BulkEmailTool;

src/components/bulk-email-tool/bulk-email-context/BulkEmailProvider.jsx

@@ -8,7 +8,7 @@ import scheduledEmailsTable, {
 
 export const BulkEmailContext = React.createContext();
 
-export default function BulkEmailProvider({ children }) {
+const BulkEmailProvider = ({ children }) => {
   const initialState = {
     editor: editorInitialState,
     scheduledEmailsTable: scheduledEmailsTableInitialState,
@@ -17,9 +17,12 @@ export default function BulkEmailProvider({ children }) {
     combineReducers({ editor, scheduledEmailsTable }),
     initialState,
   );
+  // eslint-disable-next-line react/jsx-no-constructed-context-values
   return <BulkEmailContext.Provider value={[state, dispatch]}>{children}</BulkEmailContext.Provider>;
-}
+};
 
 BulkEmailProvider.propTypes = {
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
 };
+
+export default BulkEmailProvider;

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

@@ -1,3 +1,5 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable react/no-unstable-nested-components */
 import React, { useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import {
@@ -45,7 +47,7 @@ const FORM_ACTIONS = {
   PATCH: 'PATCH',
 };
 
-function BulkEmailForm(props) {
+const BulkEmailForm = (props) => {
   const { courseId, cohorts, intl } = props;
   const [{ editor }, dispatch] = useContext(BulkEmailContext);
   const [emailFormStatus, setEmailFormStatus] = useState(FORM_SUBMIT_STATES.DEFAULT);
@@ -372,7 +374,7 @@ function BulkEmailForm(props) {
       </Form>
     </div>
   );
-}
+};
 
 BulkEmailForm.defaultProps = {
   cohorts: [],

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

@@ -5,7 +5,7 @@ import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { Form } from '@edx/paragon';
 import useMobileResponsive from '../../../utils/useMobileResponsive';
 
-function ScheduleEmailForm(props) {
+const ScheduleEmailForm = (props) => {
   const isMobile = useMobileResponsive();
   const { isValid, onDateTimeChange, dateTime } = props;
   const { date, time } = dateTime;
@@ -68,7 +68,7 @@ function ScheduleEmailForm(props) {
       )}
     </Form.Group>
   );
-}
+};
 
 ScheduleEmailForm.defaultProps = {
   dateTime: {

src/components/bulk-email-tool/bulk-email-form/bulk-email-recipient/BulkEmailRecipient.jsx

@@ -13,7 +13,7 @@ const DEFAULT_GROUPS = {
   AUDIT: 'track:audit',
 };
 
-export default function BulkEmailRecipient(props) {
+const BulkEmailRecipient = (props) => {
   const { handleCheckboxes, selectedGroups, additionalCohorts } = props;
   return (
     <Form.Group>
@@ -115,7 +115,7 @@ export default function BulkEmailRecipient(props) {
       )}
     </Form.Group>
   );
-}
+};
 
 BulkEmailRecipient.defaultProps = {
   isValid: true,
@@ -128,3 +128,5 @@ BulkEmailRecipient.propTypes = {
   isValid: PropTypes.bool,
   additionalCohorts: PropTypes.arrayOf(PropTypes.string),
 };
+
+export default BulkEmailRecipient;

src/components/bulk-email-tool/bulk-email-form/bulk-email-recipient/index.js

@@ -1 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
 export { default } from './BulkEmailRecipient';

src/components/bulk-email-tool/bulk-email-form/index.js

@@ -1 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
 export { default } from './BulkEmailForm';

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

@@ -1,3 +1,5 @@
+/* eslint-disable react/jsx-no-bind */
+/* eslint-disable react/no-unstable-nested-components */
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useParams } from 'react-router-dom';
@@ -12,7 +14,7 @@ import { getSentEmailHistory } from './data/api';
 import BulkEmailTaskManagerTable from './BulkEmailHistoryTable';
 import ViewEmailModal from './ViewEmailModal';
 
-function BulkEmailContentHistory({ intl }) {
+const BulkEmailContentHistory = ({ intl }) => {
   const { courseId } = useParams();
   const [emailHistoryData, setEmailHistoryData] = useState();
   const [errorRetrievingData, setErrorRetrievingData] = useState(false);
@@ -150,7 +152,7 @@ function BulkEmailContentHistory({ intl }) {
       </div>
     </div>
   );
-}
+};
 
 BulkEmailContentHistory.propTypes = {
   intl: intlShape.isRequired,

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

@@ -2,7 +2,7 @@ import { Alert, DataTable } from '@edx/paragon';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-export default function BulkEmailTaskManagerTable(props) {
+const BulkEmailTaskManagerTable = (props) => {
   const {
     errorRetrievingData,
     tableData,
@@ -67,20 +67,22 @@ export default function BulkEmailTaskManagerTable(props) {
       {canRenderTable()}
     </div>
   );
-}
+};
 
 BulkEmailTaskManagerTable.propTypes = {
   errorRetrievingData: PropTypes.bool.isRequired,
-  tableData: PropTypes.arrayOf(PropTypes.object),
+  tableData: PropTypes.arrayOf(PropTypes.shape({})),
   tableDescription: PropTypes.string,
   alertWarningMessage: PropTypes.string.isRequired,
   alertErrorMessage: PropTypes.string.isRequired,
-  columns: PropTypes.arrayOf(PropTypes.object).isRequired,
-  additionalColumns: PropTypes.arrayOf(PropTypes.object),
+  columns: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  additionalColumns: PropTypes.arrayOf(PropTypes.shape({})),
 };
 
 BulkEmailTaskManagerTable.defaultProps = {
   tableData: [],
   tableDescription: '',
   additionalColumns: [],
 };
+
+export default BulkEmailTaskManagerTable;

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

@@ -7,7 +7,7 @@ import messages from './messages';
 import useInterval from '../../../utils/useInterval';
 import BulkEmailTaskManagerTable from './BulkEmailHistoryTable';
 
-function BulkEmailPendingTasks({ intl }) {
+const BulkEmailPendingTasks = ({ intl }) => {
   const { courseId } = useParams();
 
   const [instructorTaskData, setInstructorTaskData] = useState();
@@ -87,7 +87,7 @@ function BulkEmailPendingTasks({ intl }) {
       />
     </div>
   );
-}
+};
 
 BulkEmailPendingTasks.propTypes = {
   intl: intlShape.isRequired,

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

@@ -5,30 +5,28 @@ import { Hyperlink, Alert } from '@edx/paragon';
 import { WarningFilled } from '@edx/paragon/icons';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
-export default function BulkEmailPendingTasksAlert() {
-  return (
-    <>
-      <Alert variant="warning" icon={WarningFilled}>
-        <FormattedMessage
-          id="bulk.email.pending.tasks.description.one"
-          defaultMessage="To view all pending tasks, including email, visit&nbsp;"
-        />
-        <Hyperlink
-          destination={`${getConfig().LMS_BASE_URL}/courses/${window.location.pathname.split('/')[2]}/instructor#view-course-info`}
-          target="_blank"
-          isInline
-          showLaunchIcon={false}
-        >
-          <FormattedMessage
-            id="bulk.email.pending.tasks.link"
-            defaultMessage="Course Info"
-          />
-        </Hyperlink>
-        <FormattedMessage
-          id="bulk.email.pending.tasks.description.two"
-          defaultMessage="&nbsp;in the Instructor Dashboard."
-        />
-      </Alert>
-    </>
-  );
-}
+const BulkEmailPendingTasksAlert = () => (
+  <Alert variant="warning" icon={WarningFilled}>
+    <FormattedMessage
+      id="bulk.email.pending.tasks.description.one"
+      defaultMessage="To view all pending tasks, including email, visit&nbsp;"
+    />
+    <Hyperlink
+      destination={`${getConfig().LMS_BASE_URL}/courses/${window.location.pathname.split('/')[2]}/instructor#view-course-info`}
+      target="_blank"
+      isInline
+      showLaunchIcon={false}
+    >
+      <FormattedMessage
+        id="bulk.email.pending.tasks.link"
+        defaultMessage="Course Info"
+      />
+    </Hyperlink>
+    <FormattedMessage
+      id="bulk.email.pending.tasks.description.two"
+      defaultMessage="&nbsp;in the Instructor Dashboard."
+    />
+  </Alert>
+);
+
+export default BulkEmailPendingTasksAlert;

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

@@ -11,7 +11,7 @@ import BulkEmailTaskManagerTable from './BulkEmailHistoryTable';
 
 import './bulkEmailTaskHistory.scss';
 
-function BulkEmailTaskHistory({ intl }) {
+const BulkEmailTaskHistory = ({ intl }) => {
   const { courseId } = useParams();
 
   const [emailTaskHistoryData, setEmailTaskHistoryData] = useState([]);
@@ -89,6 +89,7 @@ function BulkEmailTaskHistory({ intl }) {
         <Collapsible
           styling="card"
           title={intl.formatMessage(messages.emailTaskHistoryTableSectionButton)}
+          // eslint-disable-next-line react/jsx-no-bind
           onOpen={fetchEmailTaskHistoryData}
         >
           {showHistoricalTaskContentTable ? (
@@ -106,7 +107,7 @@ function BulkEmailTaskHistory({ intl }) {
       </div>
     </div>
   );
-}
+};
 
 BulkEmailTaskHistory.propTypes = {
   intl: intlShape.isRequired,