refactor: upgraded frontend-build version to v12

.eslintrc.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 const { createConfig } = require('@edx/frontend-build');
 
 module.exports = createConfig('eslint');

package.json

@@ -63,7 +63,7 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "^1.1.0",
-    "@edx/frontend-build": "9.2.2",
+    "@edx/frontend-build": "12.3.0",
     "@edx/stylelint-config-edx": "2.2.0",
     "axios": "0.27.2",
     "axios-mock-adapter": "1.21.1",

src/components/Collaborator/index.jsx

@@ -36,28 +36,28 @@ export const Collaborator = ({
         />
       </button>
       { !disabled
-      // Don't show the edit link at all if fields should be disabled
-      && (
-        <Link
-          to={{
-            pathname: `/collaborators/${uuid}`,
-            state: {
-              name,
-              imageUrl,
-              uuid,
-            },
-          }}
-          className="btn mr-1 p-0"
-          onClick={() => store.dispatch(sourceInfo(referrer))}
-        >
-          <Icon
-            id={`edit-icon-${uuid}`}
-            className="fa fa-edit fa-fw"
-            screenReaderText={`Edit ${name}`}
-            title="Edit"
-          />
-        </Link>
-      )}
+        // Don't show the edit link at all if fields should be disabled
+        && (
+          <Link
+            to={{
+              pathname: `/collaborators/${uuid}`,
+              state: {
+                name,
+                imageUrl,
+                uuid,
+              },
+            }}
+            className="btn mr-1 p-0"
+            onClick={() => store.dispatch(sourceInfo(referrer))}
+          >
+            <Icon
+              id={`edit-icon-${uuid}`}
+              className="fa fa-edit fa-fw"
+              screenReaderText={`Edit ${name}`}
+              title="Edit"
+            />
+          </Link>
+        )}
       <span className="name font-weight-bold">
         {name}
       </span>

src/components/Collaborator/renderSuggestion.jsx

@@ -1,22 +1,26 @@
 import React from 'react';
 import NewInstructorImage from '../../../assets/new-instructor-80.png';
 
-export default (suggestion) => (
-  <div className="d-flex flex-row m-1 p-1">
-    <div className="m-1 p-1 w-25">
-      <img
-        src={suggestion.image_url || NewInstructorImage}
-        alt={`logo for ${suggestion.name}`}
-        className="w-100"
-      />
-    </div>
-    <div className="m-1 p-1 w-75">
-      <div className="m-1 p-1">{suggestion.name}</div>
-      <div className="m-1 p-1">
-        {suggestion.item_text && (
+function renderSuggestion(suggestion) {
+  return (
+    <div className="d-flex flex-row m-1 p-1">
+      <div className="m-1 p-1 w-25">
+        <img
+          src={suggestion.image_url || NewInstructorImage}
+          alt={`logo for ${suggestion.name}`}
+          className="w-100"
+        />
+      </div>
+      <div className="m-1 p-1 w-75">
+        <div className="m-1 p-1">{suggestion.name}</div>
+        <div className="m-1 p-1">
+          {suggestion.item_text && (
           <span>{suggestion.item_text}</span>
-        )}
+          )}
+        </div>
       </div>
     </div>
-  </div>
-);
+  );
+}
+
+export default renderSuggestion;

src/components/CourseTable/index.jsx

@@ -133,19 +133,18 @@ class CourseTable extends React.Component {
     const pageOptions = getPageOptionsFromUrl();
 
     return (
-      <>
-        <div className="row">
-          <div className="width-percent-44 px-3 float-left">
-            <Select
-              closeMenuOnSelect={false}
-              value={selectedFilters}
-              options={filterGroups}
-              onChange={filters => this.updateFilterQueryParamsInUrl(filters === null
-                ? [] : filters)}
-              isMulti
-              maxMenuHeight="30vh"
-              placeholder="Filters..."
-              styles={
+      <div className="row">
+        <div className="width-percent-44 px-3 float-left">
+          <Select
+            closeMenuOnSelect={false}
+            value={selectedFilters}
+            options={filterGroups}
+            onChange={filters => this.updateFilterQueryParamsInUrl(filters === null
+              ? [] : filters)}
+            isMulti
+            maxMenuHeight="30vh"
+            placeholder="Filters..."
+            styles={
                 {
                   option: (styles, { data }) => ({ ...styles, ...dot(data.color) }),
                   multiValue: (styles, { data }) => (
@@ -159,29 +158,28 @@ class CourseTable extends React.Component {
                   ),
                 }
               }
-            />
-          </div>
-          <div className="width-percent-44 px-3 float-left">
-            <SearchField
-              value={pageOptions.pubq}
-              onClear={() => {
-                updateUrl({ filter: null });
-              }}
-              onSubmit={(filter) => {
-                updateUrl({ filter, page: 1 });
-              }}
-              placeholder="Search"
-            />
-          </div>
-          <div className="width-percent-12 px-3 float-right">
-            <ButtonToolbar className="mb-3" rightJustify>
-              <Link to="/courses/new">
-                <button type="button" className="btn btn-primary">New course</button>
-              </Link>
-            </ButtonToolbar>
-          </div>
+          />
         </div>
-      </>
+        <div className="width-percent-44 px-3 float-left">
+          <SearchField
+            value={pageOptions.pubq}
+            onClear={() => {
+              updateUrl({ filter: null });
+            }}
+            onSubmit={(filter) => {
+              updateUrl({ filter, page: 1 });
+            }}
+            placeholder="Search"
+          />
+        </div>
+        <div className="width-percent-12 px-3 float-right">
+          <ButtonToolbar className="mb-3" rightJustify>
+            <Link to="/courses/new">
+              <button type="button" className="btn btn-primary">New course</button>
+            </Link>
+          </ButtonToolbar>
+        </div>
+      </div>
     );
   }
 
@@ -261,7 +259,7 @@ CourseTable.defaultProps = {
 CourseTable.propTypes = {
   fetchOrganizations: PropTypes.func,
   publisherUserInfo: PropTypes.shape({
-    organizations: PropTypes.array,
+    organizations: PropTypes.arrayOf(PropTypes.shape({})),
     error: PropTypes.arrayOf(PropTypes.string),
     isFetching: PropTypes.bool,
   }),

src/components/CreateCoursePage/index.jsx

@@ -35,10 +35,6 @@ class CreateCoursePage extends React.Component {
     this.setStartedFetching();
   }
 
-  setStartedFetching() {
-    this.setState({ startedFetching: true });
-  }
-
   handleCourseCreate(options) {
     const priceData = formatPriceData(options, this.props.courseOptions);
     const courseData = {
@@ -59,6 +55,10 @@ class CreateCoursePage extends React.Component {
     return this.props.createCourse(courseData);
   }
 
+  setStartedFetching() {
+    this.setState({ startedFetching: true });
+  }
+
   showModal(options) {
     this.setState({
       createCourseData: options,
@@ -219,7 +219,7 @@ CreateCoursePage.propTypes = {
     pacing_type: PropTypes.string,
   }),
   publisherUserInfo: PropTypes.shape({
-    organizations: PropTypes.array,
+    organizations: PropTypes.arrayOf(PropTypes.shape({})),
     error: PropTypes.arrayOf(PropTypes.string),
     isFetching: PropTypes.bool,
   }),

src/components/CreateCourseRunPage/index.jsx

@@ -54,10 +54,6 @@ class CreateCourseRunPage extends React.Component {
     this.setStartedFetching();
   }
 
-  setStartedFetching() {
-    this.setState({ startedFetching: true });
-  }
-
   handleCourseCreate(options) {
     const {
       courseInfo: {
@@ -85,6 +81,10 @@ class CreateCourseRunPage extends React.Component {
     return createCourseRun(uuid, courseRunData);
   }
 
+  setStartedFetching() {
+    this.setState({ startedFetching: true });
+  }
+
   parseCourseRunLabels(courseRuns) {
     // Sort course runs by descending start dates
     const sortedCourseRuns = courseRuns.sort((run1, run2) => moment(run2.start).diff(moment(run1.start)));

src/components/EditCoursePage/AdditionalMetadataFields.jsx

@@ -7,7 +7,7 @@ import RichEditor from '../RichEditor';
 import { utcTimeZone } from '../../utils';
 import DateTimeField from '../DateTimeField';
 
-function AdditionalMetadataFields(props) {
+const AdditionalMetadataFields = (props) => {
   const {
     disabled,
   } = props;
@@ -141,7 +141,7 @@ function AdditionalMetadataFields(props) {
       </div>
     </div>
   );
-}
+};
 
 AdditionalMetadataFields.propTypes = {
   disabled: PropTypes.bool,

src/components/EditCoursePage/CollapsibleCourseRun.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-no-useless-fragment */
 import React from 'react';
 
 import { CopyToClipboard } from 'react-copy-to-clipboard';
@@ -165,6 +166,7 @@ class CollapsibleCourseRun extends React.Component {
     // We initialize hasExternalKey to null and then the function will reevaluate it into
     // a boolean which will be our exit state
     if (prevState.hasExternalKey === undefined && courseRuns) {
+      // eslint-disable-next-line react/prop-types
       const hasExternalKey = hasMastersTrack(courseRuns[index].run_type, runTypeModes);
       this.setState({ hasExternalKey }); // eslint-disable-line react/no-did-update-set-state
     }
@@ -178,7 +180,7 @@ class CollapsibleCourseRun extends React.Component {
     setTimeout(() => {
       this.setState({ copied: false });
     }, 1800);
-  }
+  };
 
   scrollToStaffPosition(focus) {
     this.setState({

src/components/EditCoursePage/CourseButtonToolbar.jsx

@@ -4,7 +4,7 @@ import React from 'react';
 import ActionButton from '../ActionButton';
 import ButtonToolbar from '../ButtonToolbar';
 
-function CourseButtonToolbar(props) {
+const CourseButtonToolbar = (props) => {
   const {
     className,
     disabled,
@@ -55,7 +55,7 @@ function CourseButtonToolbar(props) {
       />
     </ButtonToolbar>
   );
-}
+};
 
 CourseButtonToolbar.propTypes = {
   className: PropTypes.string,

src/components/EditCoursePage/CourseRunButtonToolbar.jsx

@@ -6,7 +6,7 @@ import CourseRunSubmitButton from './CourseRunSubmitButton';
 
 import { PUBLISHED, UNPUBLISHED } from '../../data/constants';
 
-function CourseRunButtonToolbar(props) {
+const CourseRunButtonToolbar = (props) => {
   const {
     className,
     disabled,
@@ -44,7 +44,7 @@ function CourseRunButtonToolbar(props) {
       />
     </ButtonToolbar>
   );
-}
+};
 
 CourseRunButtonToolbar.propTypes = {
   className: PropTypes.string,

src/components/EditCoursePage/EditCourseForm.jsx

@@ -495,18 +495,16 @@ export class BaseEditCourseForm extends React.Component {
               name="tags"
               component={ReduxFormCreatableSelect}
               label={(
-                <>
-                  <FieldLabel
-                    id="tags.label"
-                    text="Topics"
-                    helpText={(
-                      <p>
-                        You can add tags in the format mba-no-gmat,mba,mba_4_modules,mba_NY
-                      </p>
+                <FieldLabel
+                  id="tags.label"
+                  text="Topics"
+                  helpText={(
+                    <p>
+                      You can add tags in the format mba-no-gmat,mba,mba_4_modules,mba_NY
+                    </p>
                     )}
-                    optional
-                  />
-                </>
+                  optional
+                />
               )}
               disabled={disabled || !administrator}
               value={this.state.courseTag}

src/components/EditCoursePage/EditCoursePage.test.jsx

@@ -870,7 +870,7 @@ describe('EditCoursePage', () => {
     });
 
     it('submit modal can be cancelled', () => {
-      const EditCoursePageWrapper = props => (
+      const EditCoursePageWrapper = (props) => (
         <MemoryRouter>
           <Provider store={mockStore()}>
             <EditCoursePage