Upgrade frontend-build to v14

.eslintrc.js

@@ -11,7 +11,6 @@ module.exports = createConfig(
       }],
       'template-curly-spacing': 'off',
       'react-hooks/exhaustive-deps': 'off',
-      indent: ['error', 2],
       'no-restricted-exports': 'off',
     },
     settings: {

.stylelintrc.json

@@ -26,6 +26,7 @@
     "scss/at-rule-no-unknown": true,
     "scss/at-import-partial-extension": null,
     "scss/comment-no-empty": null,
+    "import-notation": "string",
     "property-no-unknown": [true, {
       "ignoreProperties": ["xs", "sm", "md", "lg", "xl", "xxl"]
     }],

package.json

@@ -14,7 +14,7 @@
     "i18n_extract": "fedx-scripts formatjs extract",
     "stylelint": "stylelint \"plugins/**/*.scss\" \"src/**/*.scss\" \"scss/**/*.scss\" --config .stylelintrc.json",
     "lint": "npm run stylelint && fedx-scripts eslint --ext .js --ext .jsx .",
-    "lint:fix": "npm run stylelint && fedx-scripts eslint --ext .js --ext .jsx . --fix",
+    "lint:fix": "npm run stylelint -- --fix && fedx-scripts eslint --fix --ext .js --ext .jsx .",
     "snapshot": "TZ=UTC fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
     "start:with-theme": "paragon install-theme && npm start && npm install",
@@ -40,13 +40,13 @@
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-ai-translations": "^2.0.0",
-    "@edx/frontend-component-footer": "^13.0.2",
-    "@edx/frontend-component-header": "^5.1.0",
+    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.3",
+    "@edx/frontend-component-ai-translations": "github:open-craft/frontend-component-ai-translations#jill/frontend-platform-v8",
+    "@edx/frontend-component-footer": "^14.0.3",
+    "@edx/frontend-component-header": "^5.3.3",
     "@edx/frontend-enterprise-hotjar": "^2.0.0",
-    "@edx/frontend-lib-content-components": "^2.1.10",
-    "@edx/frontend-platform": "7.0.1",
+    "@edx/frontend-lib-content-components": "github:open-craft/frontend-lib-content-components#jill/bilalqamar95/jest-v29-upgrade",
+    "@edx/frontend-platform": "8.0.3",
     "@edx/openedx-atlas": "^0.6.0",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
@@ -64,19 +64,19 @@
     "@openedx-plugins/course-app-teams": "file:plugins/course-apps/teams",
     "@openedx-plugins/course-app-wiki": "file:plugins/course-apps/wiki",
     "@openedx-plugins/course-app-xpert_unit_summary": "file:plugins/course-apps/xpert_unit_summary",
-    "@openedx/frontend-plugin-framework": "^1.1.0",
-    "@openedx/paragon": "^22.2.1",
+    "@openedx/frontend-plugin-framework": "^1.2.1",
+    "@openedx/paragon": "^22.5.1",
     "@reduxjs/toolkit": "1.9.7",
     "@tanstack/react-query": "4.36.1",
-    "classnames": "2.2.6",
-    "core-js": "3.8.1",
+    "classnames": "2.5.1",
+    "core-js": "3.37.1",
     "email-validator": "2.0.4",
     "file-saver": "^2.0.5",
-    "formik": "2.2.6",
+    "formik": "2.4.6",
     "jszip": "^3.10.1",
     "lodash": "4.17.21",
     "meilisearch": "^0.38.0",
-    "moment": "2.29.4",
+    "moment": "2.30.1",
     "prop-types": "^15.8.1",
     "react": "17.0.2",
     "react-datepicker": "^4.13.0",
@@ -85,10 +85,10 @@
     "react-helmet": "^6.1.0",
     "react-redux": "7.2.9",
     "react-responsive": "9.0.2",
-    "react-router": "6.16.0",
-    "react-router-dom": "6.16.0",
+    "react-router": "6.23.1",
+    "react-router-dom": "6.23.1",
     "react-select": "5.8.0",
-    "react-textarea-autosize": "^8.4.1",
+    "react-textarea-autosize": "^8.5.3",
     "react-transition-group": "4.4.5",
     "redux": "4.0.5",
     "regenerator-runtime": "0.13.7",
@@ -98,11 +98,11 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "1.2.0",
-    "@edx/react-unit-test-utils": "2.0.0",
+    "@edx/react-unit-test-utils": "2.1.1",
     "@edx/reactifex": "^1.0.3",
-    "@edx/stylelint-config-edx": "2.3.0",
+    "@edx/stylelint-config-edx": "2.3.3",
     "@edx/typescript-config": "^1.0.1",
-    "@openedx/frontend-build": "13.1.0",
+    "@openedx/frontend-build": "^14.0.3",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
@@ -117,7 +117,7 @@
     "jest-expect-message": "^1.1.3",
     "react-test-renderer": "17.0.2",
     "reactifex": "1.1.1",
-    "ts-loader": "^9.5.0"
+    "ts-loader": "^9.5.1"
   },
   "peerDependencies": {
     "decode-uri-component": ">=0.2.2"

plugins/course-apps/ora_settings/__snapshots__/Settings.test.jsx.snap

@@ -5,7 +5,7 @@ exports[`ORASettings should render 1`] = `
   appId="ora_settings"
   hideAppToggle={true}
   initialValues={
-    Object {
+    {
       "enableFlexiblePeerGrade": "abitrary value",
     }
   }
@@ -19,19 +19,25 @@ exports[`ORASettings should render 1`] = `
       <div
         className="pt-3"
       >
-        <withDeprecatedProps(Hyperlink)
+        <ForwardRef
           className="text-primary-500 small"
           destination="https://learnmore.test"
+          externalLinkAlternativeText="in a new tab"
+          externalLinkTitle="Opens in a new tab"
+          isInline={false}
+          onClick={[Function]}
           rel="noreferrer noopener"
+          showLaunchIcon={true}
           target="_blank"
+          variant="default"
         >
           Learn more about open response assessment settings
-        </withDeprecatedProps(Hyperlink)>
+        </ForwardRef>
       </div>
     </div>
   }
   validationSchema={
-    Object {
+    {
       "enableFlexiblePeerGrade": "Yub.boolean",
     }
   }

plugins/course-apps/proctoring/Settings.test.jsx

@@ -273,9 +273,9 @@ describe('ProctoredExamSettings', () => {
         await act(async () => {
           fireEvent.change(selectEscalationEmailElement, { target: { value: 'foo.bar' } });
         });
-        const selectButton = screen.getByTestId('submissionButton');
+        const proctoringForm = screen.getByTestId('proctoringForm');
         await act(async () => {
-          fireEvent.click(selectButton);
+          fireEvent.submit(proctoringForm);
         });
 
         // verify alert content and focus management

plugins/course-apps/xpert_unit_summary/settings-modal/SettingsModal.jsx

@@ -137,12 +137,12 @@ const ResetUnitsButton = ({
 
   const getResetButtonState = () => {
     switch (resetStatusRequestStatus) {
-    case RequestStatus.PENDING:
-      return 'pending';
-    case RequestStatus.SUCCESSFUL:
-      return 'finish';
-    default:
-      return 'default';
+      case RequestStatus.PENDING:
+        return 'pending';
+      case RequestStatus.SUCCESSFUL:
+        return 'finish';
+      default:
+        return 'default';
     }
   };
 
@@ -246,7 +246,7 @@ const SettingsModal = ({
       success = success && await onSettingsSave(values);
     }
     setSaveError(!success);
-    !success && alertRef?.current.scrollIntoView(); // eslint-disable-line no-unused-expressions
+    !success && alertRef?.current.scrollIntoView(); // eslint-disable-line @typescript-eslint/no-unused-expressions
   };
 
   const handleFormikSubmit = ({ handleSubmit, errors }) => async (event) => {

src/accessibility-page/messages.js

@@ -2,7 +2,7 @@ import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
   pageTitle: {
-    id: 'course-authoring.import.page.title',
+    id: 'course-authoring.accessibility.page.title',
     defaultMessage: 'Studio Accessibility Policy| {siteName}',
   },
 });

src/content-tags-drawer/ContentTagsCollapsibleHelper.jsx

@@ -298,7 +298,7 @@ const useContentTagsCollapsibleHelper = (
         traversal[tag].lineage = tagLineage;
       }
 
-      // eslint-disable-next-line no-unused-expressions
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
       isExplicit ? add(value.join(',')) : remove(value.join(','));
       traversal = traversal[tag].children;
     });

src/content-tags-drawer/ContentTagsDrawer.scss

@@ -2,7 +2,7 @@
   min-width: max(500px, 33vw);
 }
 
-@media only screen and (max-width: 500px) {
+@media only screen and (width <= 500px) {
   .pgn__sheet-component:has(#content-tags-drawer) {
     min-width: 100vw;
   }

src/content-tags-drawer/messages.js

@@ -69,7 +69,7 @@ const messages = defineMessages({
     defaultMessage: 'Add a tag',
   },
   collapsibleNoTagsAddedText: {
-    id: 'course-authoring.content-tags-drawer.content-tags-collapsible.custom-menu.placeholder-text',
+    id: 'course-authoring.content-tags-drawer.content-tags-collapsible.custom-menu.no-tags-added-text',
     defaultMessage: 'No tags added yet.',
   },
   collapsibleAddStagedTagsButtonText: {

src/course-checklist/ChecklistSection/ChecklistItemComment.jsx

@@ -79,10 +79,9 @@ const ChecklistItemComment = ({
         <ul className="assignment-list">
           {gradedAssignmentsOutsideDateRange.map(assignment => (
             <li className="assignment-list-item" key={assignment.id}>
-              <Hyperlink
-                content={assignment.displayName}
-                destination={`${outlineUrl}#${assignment.id}`}
-              />
+              <Hyperlink destination={`${outlineUrl}#${assignment.id}`}>
+                {assignment.displayName}
+              </Hyperlink>
             </li>
           ))}
         </ul>

src/course-checklist/ChecklistSection/utils/getValidatedValue.js

@@ -2,30 +2,30 @@ import * as healthValidators from './courseChecklistValidators';
 
 const getValidatedValue = (data, id) => {
   switch (id) {
-  case 'welcomeMessage':
-    return healthValidators.hasWelcomeMessage(data.updates);
-  case 'gradingPolicy':
-    return healthValidators.hasGradingPolicy(data.grades);
-  case 'certificate':
-    return healthValidators.hasCertificate(data.certificates);
-  case 'courseDates':
-    return healthValidators.hasDates(data.dates);
-  case 'assignmentDeadlines':
-    return healthValidators.hasAssignmentDeadlines(data.assignments, data.dates);
-  case 'videoDuration':
-    return healthValidators.hasShortVideoDuration(data.videos);
-  case 'mobileFriendlyVideo':
-    return healthValidators.hasMobileFriendlyVideos(data.videos);
-  case 'diverseSequences':
-    return healthValidators.hasDiverseSequences(data.subsections);
-  case 'weeklyHighlights':
-    return healthValidators.hasWeeklyHighlights(data.sections);
-  case 'unitDepth':
-    return healthValidators.hasShortUnitDepth(data.units);
-  case 'proctoringEmail':
-    return healthValidators.hasProctoringEscalationEmail(data.proctoring);
-  default:
-    throw new Error(`Unknown validator ${id}.`);
+    case 'welcomeMessage':
+      return healthValidators.hasWelcomeMessage(data.updates);
+    case 'gradingPolicy':
+      return healthValidators.hasGradingPolicy(data.grades);
+    case 'certificate':
+      return healthValidators.hasCertificate(data.certificates);
+    case 'courseDates':
+      return healthValidators.hasDates(data.dates);
+    case 'assignmentDeadlines':
+      return healthValidators.hasAssignmentDeadlines(data.assignments, data.dates);
+    case 'videoDuration':
+      return healthValidators.hasShortVideoDuration(data.videos);
+    case 'mobileFriendlyVideo':
+      return healthValidators.hasMobileFriendlyVideos(data.videos);
+    case 'diverseSequences':
+      return healthValidators.hasDiverseSequences(data.subsections);
+    case 'weeklyHighlights':
+      return healthValidators.hasWeeklyHighlights(data.sections);
+    case 'unitDepth':
+      return healthValidators.hasShortUnitDepth(data.units);
+    case 'proctoringEmail':
+      return healthValidators.hasProctoringEscalationEmail(data.proctoring);
+    default:
+      throw new Error(`Unknown validator ${id}.`);
   }
 };
 

src/course-outline/card-header/messages.js

@@ -58,7 +58,7 @@ const messages = defineMessages({
     defaultMessage: 'Delete',
   },
   menuCopy: {
-    id: 'course-authoring.course-outline.card.menu.delete',
+    id: 'course-authoring.course-outline.card.menu.copy',
     defaultMessage: 'Copy to clipboard',
   },
   menuProctoringLinkText: {

src/course-outline/enable-highlights-modal/EnableHighlightsModal.test.jsx

@@ -10,7 +10,7 @@ import initializeStore from '../../store';
 import EnableHighlightsModal from './EnableHighlightsModal';
 import messages from './messages';
 
-// eslint-disable-next-line no-unused-vars
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 let axiosMock;
 let store;
 const mockPathname = '/foo-bar';

src/course-outline/highlights-modal/HighlightsModal.test.jsx

@@ -5,16 +5,12 @@ import {
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { useSelector } from 'react-redux';
 import { initializeMockApp } from '@edx/frontend-platform';
-import MockAdapter from 'axios-mock-adapter';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { AppProvider } from '@edx/frontend-platform/react';
 
 import initializeStore from '../../store';
 import HighlightsModal from './HighlightsModal';
 import messages from './messages';
 
-// eslint-disable-next-line no-unused-vars
-let axiosMock;
 let store;
 const mockPathname = '/foo-bar';
 
@@ -68,7 +64,6 @@ describe('<HighlightsModal />', () => {
     });
 
     store = initializeStore();
-    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
     useSelector.mockReturnValue(currentItemMock);
   });