feat: upgraded to node v18, added .nvmrc and updated workflows (#281)

Co-authored-by: Abdullah Waheed <abdullah.waheed@arbisoft.com>

.eslintrc.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 const { createConfig } = require('@edx/frontend-build');
 
 const config = createConfig('eslint', {
@@ -5,23 +6,24 @@ const config = createConfig('eslint', {
     'import/no-named-as-default': 'off',
     'import/no-named-as-default-member': 'off',
     'import/no-self-import': 'off',
-    'spaced-comment': ['error', 'always', { 'block': { 'exceptions': ['*'] } }],
+    'spaced-comment': ['error', 'always', { block: { exceptions: ['*'] } }],
     'react-hooks/rules-of-hooks': 'off',
     'react-hooks/exhaustive-deps': 'off',
-    'radix': 'off',
+    'no-promise-executor-return': 'off',
+    radix: 'off',
   },
 });
 
 config.settings = {
-  "import/resolver": {
+  'import/resolver': {
     alias: {
       map: [
         ['editors', './src/editors'],
       ],
     },
     node: {
-      paths: ["editors", "node_modules"],
-      extensions: [".js", ".jsx"],
+      paths: ['editors', 'node_modules'],
+      extensions: ['.js', '.jsx'],
     },
   },
 };

.github/workflows/lockfileversion-check.yml

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

.nvmrc

@@ -1 +1 @@
-v16
+18

package.json

@@ -38,8 +38,8 @@
   "homepage": "https://github.com/edx/frontend-lib-content-components#readme",
   "devDependencies": {
     "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-build": "^11.0.2",
-    "@edx/frontend-platform": "2.4.0",
+    "@edx/frontend-build": "12.8.27",
+    "@edx/frontend-platform": "4.2.0",
     "@edx/paragon": "^20.32.0",
     "@edx/reactifex": "^2.1.1",
     "@testing-library/dom": "^8.13.0",
@@ -67,6 +67,7 @@
     "@codemirror/lint": "^6.2.1",
     "@codemirror/state": "^6.0.0",
     "@codemirror/view": "^6.0.0",
+    "@edx/browserslist-config": "^1.1.1",
     "@reduxjs/toolkit": "^1.8.1",
     "@tinymce/tinymce-react": "^3.14.0",
     "babel-polyfill": "6.26.0",
@@ -91,7 +92,7 @@
     "xmlchecker": "^0.1.0"
   },
   "peerDependencies": {
-    "@edx/frontend-platform": ">1.15.0",
+    "@edx/frontend-platform": "^4.0.0",
     "@edx/paragon": "^20.27.0",
     "prop-types": "^15.5.10",
     "react": "^16.14.0",

src/Placeholder.jsx

@@ -1,15 +1,13 @@
 import React from 'react';
 
-function Placeholder() {
-  return (
-    <div className="Placeholder">
-      <h1>
-        Under Construction
-        <br />
-        Coming Soon
-      </h1>
-    </div>
-  );
-}
+const Placeholder = () => (
+  <div className="Placeholder">
+    <h1>
+      Under Construction
+      <br />
+      Coming Soon
+    </h1>
+  </div>
+);
 
 export default Placeholder;

src/editors/containers/EditorContainer/components/TitleHeader/EditableHeader.jsx

@@ -31,6 +31,7 @@ EditableHeader.defaultProps = {
 EditableHeader.propTypes = {
   inputRef: PropTypes.oneOfType([
     PropTypes.func,
+    // eslint-disable-next-line react/forbid-prop-types
     PropTypes.shape({ current: PropTypes.any }),
   ]),
   handleChange: PropTypes.func.isRequired,

src/editors/containers/EditorContainer/components/TitleHeader/hooks.test.js

@@ -129,6 +129,7 @@ describe('TitleHeader hooks', () => {
         output = hooks.localTitleHooks({ dispatch });
       });
       afterEach(() => {
+        // eslint-disable-next-line no-import-assign
         hooks.hooks = oldHooks;
       });
       it('returns isEditing, startEditing, and stopEditing, tied to the isEditing hook', () => {

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswersContainer.test.jsx

@@ -18,7 +18,9 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
   getLocale: jest.fn(),
 }));
 
-jest.mock('./AnswerOption', () => () => <div>MockAnswerOption</div>);
+jest.mock('./AnswerOption', () => function () {
+  return <div>MockAnswerOption</div>;
+});
 
 jest.mock('../../../../../data/redux', () => ({
   actions: {

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx

@@ -50,6 +50,7 @@ export const SettingsWidget = ({
         </div>
       );
     }
+    // eslint-disable-next-line react/jsx-no-useless-fragment
     return (<></>);
   };
 

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GeneralFeedback/index.test.jsx

@@ -25,9 +25,7 @@ describe('RandomizationCard', () => {
   describe('behavior', () => {
     it(' calls generalFeedbackHooks with props when initialized', () => {
       shallow(<GeneralFeedbackCard {...props} />);
-      expect(generalFeedbackHooks).toHaveBeenCalledWith(
-        props.generalFeedback, props.updateSettings,
-      );
+      expect(generalFeedbackHooks).toHaveBeenCalledWith(props.generalFeedback, props.updateSettings);
     });
   });
 

src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Tolerance/index.test.jsx

@@ -15,9 +15,10 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
   )),
 }));
 
-jest.mock('../../SettingsOption', () => ({ children, summary }) => (
-  <div className="SettingsOption" data-testid="Settings-Option">{summary}{children}</div>
-));
+// eslint-disable-next-line react/prop-types
+jest.mock('../../SettingsOption', () => function ({ children, summary }) {
+  return <div className="SettingsOption" data-testid="Settings-Option">{summary}{children}</div>;
+});
 
 jest.mock('@edx/paragon', () => ({
   Alert: jest.fn(({ children }) => (

src/editors/containers/ProblemEditor/index.jsx

@@ -66,7 +66,7 @@ ProblemEditor.propTypes = {
   studioViewFinished: PropTypes.bool.isRequired,
   problemType: PropTypes.string.isRequired,
   initializeProblemEditor: PropTypes.func.isRequired,
-  blockValue: PropTypes.objectOf(PropTypes.object).isRequired,
+  blockValue: PropTypes.objectOf(PropTypes.shape({})).isRequired,
 };
 
 export const mapStateToProps = (state) => ({

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/constants.js

@@ -14,6 +14,7 @@ export const MAX_WIDTH = 1280;
 export const MAX_HEIGHT = 720;
 export const MIN_WIDTH = 640;
 export const MIN_HEIGHT = 360;
+// eslint-disable-next-line no-loss-of-precision
 export const ASPECT_RATIO = 1.7777777777777777777;
 export const ASPECT_RATIO_ERROR_MARGIN = 0.1;
 export default {

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/Transcript.jsx

@@ -46,6 +46,7 @@ export const Transcript = ({
 }) => {
   const { inDeleteConfirmation, launchDeleteConfirmation, cancelDelete } = module.hooks.setUpDeleteConfirmation();
   return (
+    // eslint-disable-next-line react/jsx-no-useless-fragment
     <>
       {inDeleteConfirmation
         ? (

src/editors/data/redux/requests/selectors.test.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-import-assign */
 import { RequestStates } from '../../constants/requests';
 
 // import * in order to mock in-file references

src/editors/data/redux/thunkActions/app.test.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-import-assign */
 import { actions } from '..';
 import { camelizeKeys } from '../../../utils';
 import * as thunkActions from './app';

src/editors/data/redux/thunkActions/requests.test.js

@@ -174,6 +174,7 @@ describe('requests thunkActions module', () => {
   };
   describe('network request actions', () => {
     beforeEach(() => {
+      // eslint-disable-next-line no-import-assign
       requests.networkRequest = jest.fn(args => ({ networkRequest: args }));
     });
     describe('fetchBlock', () => {

src/editors/data/services/cms/api.js

@@ -256,7 +256,7 @@ export const processVideoIds = ({
 };
 
 export const isEdxVideo = (src) => {
-  const uuid4Regex = new RegExp(/^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/);
+  const uuid4Regex = /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/;
   if (src && src.match(uuid4Regex)) {
     return true;
   }
@@ -264,7 +264,7 @@ export const isEdxVideo = (src) => {
 };
 
 export const parseYoutubeId = (src) => {
-  const youtubeRegex = new RegExp(/^((?:https?:)?\/\/)?((?:www|m)\.)?((?:youtube\.com|youtu.be))(\/(?:[\w-]+\?v=|embed\/|v\/)?)([\w-]+)(\S+)?$/);
+  const youtubeRegex = /^((?:https?:)?\/\/)?((?:www|m)\.)?((?:youtube\.com|youtu.be))(\/(?:[\w-]+\?v=|embed\/|v\/)?)([\w-]+)(\S+)?$/;
   if (!src.match(youtubeRegex)) {
     return null;
   }

src/editors/data/services/cms/api.test.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-import-assign */
 import * as utils from '../../../utils';
 import * as api from './api';
 import * as mockApi from './mockApi';

src/editors/sharedComponents/CodeEditor/index.jsx

@@ -45,6 +45,7 @@ export const CodeEditor = ({
 CodeEditor.propTypes = {
   innerRef: PropTypes.oneOfType([
     PropTypes.func,
+    // eslint-disable-next-line react/forbid-prop-types
     PropTypes.shape({ current: PropTypes.any }),
   ]).isRequired,
   value: PropTypes.string.isRequired,

src/editors/sharedComponents/ErrorAlerts/ErrorAlert.jsx

@@ -13,10 +13,12 @@ export const hooks = {
   },
   dismissalHooks: ({ dismissError, isError }) => {
     const [isDismissed, setIsDismissed] = hooks.state.isDismissed(false);
-    React.useEffect(() => {
-      setIsDismissed(isDismissed && !isError);
-    },
-    [isError]);
+    React.useEffect(
+      () => {
+        setIsDismissed(isDismissed && !isError);
+      },
+      [isError],
+    );
     return {
       isDismissed,
       dismissAlert: () => {

src/editors/sharedComponents/ErrorBoundary/index.test.jsx

@@ -11,7 +11,9 @@ jest.mock('@edx/frontend-platform/logging', () => ({
 }));
 
 // stubbing this to avoid needing to inject a stubbed intl into an internal component
-jest.mock('./ErrorPage', () => () => <p>Error Page</p>);
+jest.mock('./ErrorPage', () => function () {
+  return <p>Error Page</p>;
+});
 
 describe('ErrorBoundary', () => {
   it('should render children if no error', () => {

src/editors/sharedComponents/ImageUploadModal/index.jsx

@@ -129,6 +129,7 @@ ImageUploadModal.propTypes = {
   close: PropTypes.func.isRequired,
   editorRef: PropTypes.oneOfType([
     PropTypes.func,
+    // eslint-disable-next-line react/forbid-prop-types
     PropTypes.shape({ current: PropTypes.any }),
   ]),
   isOpen: PropTypes.bool.isRequired,

src/editors/sharedComponents/ImageUploadModal/index.test.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-import-assign */
 import React from 'react';
 import { shallow } from 'enzyme';
 

src/editors/sharedComponents/RawEditor/index.jsx

@@ -43,6 +43,7 @@ RawEditor.defaultProps = {
 RawEditor.propTypes = {
   editorRef: PropTypes.oneOfType([
     PropTypes.func,
+    // eslint-disable-next-line react/forbid-prop-types
     PropTypes.shape({ current: PropTypes.any }),
   ]),
   content: PropTypes.oneOfType([

src/editors/sharedComponents/SelectionModal/Gallery.jsx

@@ -90,7 +90,7 @@ Gallery.propTypes = {
   isLoaded: PropTypes.bool.isRequired,
   galleryIsEmpty: PropTypes.bool.isRequired,
   searchIsEmpty: PropTypes.bool.isRequired,
-  displayList: PropTypes.arrayOf(PropTypes.object).isRequired,
+  displayList: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
   highlighted: PropTypes.string,
   onHighlightChange: PropTypes.func.isRequired,
   emptyGalleryLabel: PropTypes.shape({}).isRequired,

src/editors/sharedComponents/SelectionModal/GalleryCard.jsx

@@ -94,7 +94,7 @@ GalleryCard.propTypes = {
     duration: PropTypes.number,
     status: PropTypes.string,
     statusBadgeVariant: PropTypes.string,
-    transcripts: PropTypes.array,
+    transcripts: PropTypes.shape([]),
   }).isRequired,
 };
 

src/editors/sharedComponents/SelectionModal/index.test.jsx

@@ -79,20 +79,22 @@ const mockUploadErrorAlertFn = jest.fn();
 
 jest.mock('../BaseModal', () => 'BaseModal');
 jest.mock('./SearchSort', () => 'SearchSort');
-jest.mock('./Gallery', () => (componentProps) => {
+jest.mock('./Gallery', () => function (componentProps) {
   mockGalleryFn(componentProps);
   return (<div>Gallery</div>);
 });
-jest.mock('../FileInput', () => (componentProps) => {
+jest.mock('../FileInput', () => function (componentProps) {
   mockFileInputFn(componentProps);
   return (<div>FileInput</div>);
 });
-jest.mock('../ErrorAlerts/ErrorAlert', () => () => (<div>ErrorAlert</div>));
-jest.mock('../ErrorAlerts/FetchErrorAlert', () => (componentProps) => {
+jest.mock('../ErrorAlerts/ErrorAlert', () => function () {
+  return <div>ErrorAlert</div>;
+});
+jest.mock('../ErrorAlerts/FetchErrorAlert', () => function (componentProps) {
   mockFetchErrorAlertFn(componentProps);
   return (<div>FetchErrorAlert</div>);
 });
-jest.mock('../ErrorAlerts/UploadErrorAlert', () => (componentProps) => {
+jest.mock('../ErrorAlerts/UploadErrorAlert', () => function (componentProps) {
   mockUploadErrorAlertFn(componentProps);
   return (<div>UploadErrorAlert</div>);
 });

src/editors/sharedComponents/SourceCodeModal/index.jsx

@@ -50,6 +50,7 @@ SourceCodeModal.propTypes = {
   close: PropTypes.func.isRequired,
   editorRef: PropTypes.oneOfType([
     PropTypes.func,
+    // eslint-disable-next-line react/forbid-prop-types
     PropTypes.shape({ current: PropTypes.any }),
   ]).isRequired,
   // injected

www/package.json

@@ -12,9 +12,9 @@
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-edx.org@^2.0.3",
     "@edx/browserslist-config": "1.0.0",
-    "@edx/frontend-build": "^11.0.0",
+    "@edx/frontend-build": "12.8.27",
     "@edx/frontend-lib-content-components": "file:..",
-    "@edx/frontend-platform": "2.5.1",
+    "@edx/frontend-platform": "4.2.0",
     "@edx/paragon": "^20.32.0",
     "core-js": "^3.21.1",
     "dotenv": "^16.0.0",