fix: upgrade frontend-build to v12

.eslintrc.js

@@ -4,9 +4,13 @@ const config = createConfig('eslint', {
   rules: {
     'import/no-named-as-default': 'off',
     'import/no-named-as-default-member': 'off',
+    'import/no-import-module-exports': 'off',
     'import/no-self-import': 'off',
     'spaced-comment': ['error', 'always', { 'block': { 'exceptions': ['*'] } }],
     'react-hooks/rules-of-hooks': 'off',
+    "react/forbid-prop-types": ["error", { "forbid": ["any", "array"] }], // arguable object proptype is use when I do not care about the shape of the object
+    'no-import-assign': 'off',
+    'no-promise-executor-return': 'off',
   },
 });
 

package.json

@@ -75,7 +75,7 @@
     "whatwg-fetch": "^3.6.2"
   },
   "devDependencies": {
-    "@edx/frontend-build": "^11.0.2",
+    "@edx/frontend-build": "12.4",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.1.0",
     "axios-mock-adapter": "^1.20.0",

src/components/Head/index.jsx

@@ -5,7 +5,7 @@ import { getConfig } from '@edx/frontend-platform';
 
 import messages from './messages';
 
-function Head() {
+const Head = () => {
   const { formatMessage } = useIntl();
   return (
     <Helmet>
@@ -15,6 +15,6 @@ function Head() {
       <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
     </Helmet>
   );
-}
+};
 
 export default Head;

src/containers/CriterionContainer/RadioCriterion.jsx

@@ -33,27 +33,25 @@ export class RadioCriterion extends React.Component {
       isInvalid,
     } = this.props;
     return (
-      <>
-        <Form.RadioSet name={config.name} value={data}>
-          {config.options.map((option) => (
-            <Form.Radio
-              className="criteria-option"
-              key={option.name}
-              value={option.name}
-              description={intl.formatMessage(messages.optionPoints, { points: option.points })}
-              onChange={this.onChange}
-              disabled={!isGrading}
-            >
-              {option.label}
-            </Form.Radio>
-          ))}
-          {isInvalid && (
-            <Form.Control.Feedback type="invalid" className="feedback-error-msg">
-              {intl.formatMessage(messages.rubricSelectedError)}
-            </Form.Control.Feedback>
-          )}
-        </Form.RadioSet>
-      </>
+      <Form.RadioSet name={config.name} value={data}>
+        {config.options.map((option) => (
+          <Form.Radio
+            className="criteria-option"
+            key={option.name}
+            value={option.name}
+            description={intl.formatMessage(messages.optionPoints, { points: option.points })}
+            onChange={this.onChange}
+            disabled={!isGrading}
+          >
+            {option.label}
+          </Form.Radio>
+        ))}
+        {isInvalid && (
+        <Form.Control.Feedback type="invalid" className="feedback-error-msg">
+          {intl.formatMessage(messages.rubricSelectedError)}
+        </Form.Control.Feedback>
+        )}
+      </Form.RadioSet>
     );
   }
 }

src/containers/CriterionContainer/__snapshots__/RadioCriterion.test.jsx.snap

@@ -1,91 +1,85 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Radio Criterion Container snapshot is grading 1`] = `
-<React.Fragment>
-  <Form.RadioSet
-    name="random name"
-    value="selected radio option"
+<Form.RadioSet
+  name="random name"
+  value="selected radio option"
+>
+  <Form.Radio
+    className="criteria-option"
+    description="1 points"
+    disabled={false}
+    onChange={[MockFunction this.onChange]}
+    value="option name"
   >
-    <Form.Radio
-      className="criteria-option"
-      description="1 points"
-      disabled={false}
-      onChange={[MockFunction this.onChange]}
-      value="option name"
-    >
-      this label
-    </Form.Radio>
-    <Form.Radio
-      className="criteria-option"
-      description="2 points"
-      disabled={false}
-      onChange={[MockFunction this.onChange]}
-      value="option name 2"
-    >
-      this label 2
-    </Form.Radio>
-  </Form.RadioSet>
-</React.Fragment>
+    this label
+  </Form.Radio>
+  <Form.Radio
+    className="criteria-option"
+    description="2 points"
+    disabled={false}
+    onChange={[MockFunction this.onChange]}
+    value="option name 2"
+  >
+    this label 2
+  </Form.Radio>
+</Form.RadioSet>
 `;
 
 exports[`Radio Criterion Container snapshot is not grading 1`] = `
-<React.Fragment>
-  <Form.RadioSet
-    name="random name"
-    value="selected radio option"
+<Form.RadioSet
+  name="random name"
+  value="selected radio option"
+>
+  <Form.Radio
+    className="criteria-option"
+    description="1 points"
+    disabled={true}
+    onChange={[MockFunction this.onChange]}
+    value="option name"
   >
-    <Form.Radio
-      className="criteria-option"
-      description="1 points"
-      disabled={true}
-      onChange={[MockFunction this.onChange]}
-      value="option name"
-    >
-      this label
-    </Form.Radio>
-    <Form.Radio
-      className="criteria-option"
-      description="2 points"
-      disabled={true}
-      onChange={[MockFunction this.onChange]}
-      value="option name 2"
-    >
-      this label 2
-    </Form.Radio>
-  </Form.RadioSet>
-</React.Fragment>
+    this label
+  </Form.Radio>
+  <Form.Radio
+    className="criteria-option"
+    description="2 points"
+    disabled={true}
+    onChange={[MockFunction this.onChange]}
+    value="option name 2"
+  >
+    this label 2
+  </Form.Radio>
+</Form.RadioSet>
 `;
 
 exports[`Radio Criterion Container snapshot radio contain invalid response 1`] = `
-<React.Fragment>
-  <Form.RadioSet
-    name="random name"
-    value="selected radio option"
+<Form.RadioSet
+  name="random name"
+  value="selected radio option"
+>
+  <Form.Radio
+    className="criteria-option"
+    description="1 points"
+    disabled={false}
+    onChange={[MockFunction this.onChange]}
+    value="option name"
   >
-    <Form.Radio
-      className="criteria-option"
-      description="1 points"
-      disabled={false}
-      onChange={[MockFunction this.onChange]}
-      value="option name"
-    >
-      this label
-    </Form.Radio>
-    <Form.Radio
-      className="criteria-option"
-      description="2 points"
-      disabled={false}
-      onChange={[MockFunction this.onChange]}
-      value="option name 2"
-    >
-      this label 2
-    </Form.Radio>
-    <Form.Control.Feedback
-      className="feedback-error-msg"
-      type="invalid"
-    >
-      Rubric selection is required
-    </Form.Control.Feedback>
-  </Form.RadioSet>
-</React.Fragment>
+    this label
+  </Form.Radio>
+  <Form.Radio
+    className="criteria-option"
+    description="2 points"
+    disabled={false}
+    onChange={[MockFunction this.onChange]}
+    value="option name 2"
+  >
+    this label 2
+  </Form.Radio>
+  <Form.Control.Feedback
+    className="feedback-error-msg"
+    type="invalid"
+  >
+    Rubric selection is required
+  </Form.Control.Feedback>
+</Form.RadioSet>
 `;

src/containers/ListView/SubmissionsTable.jsx

@@ -52,7 +52,7 @@ export class SubmissionsTable extends React.Component {
   formatDate = ({ value }) => {
     const date = new Date(moment(value));
     return date.toLocaleString();
-  }
+  };
 
   formatGrade = ({ value: score }) => (
     score === null ? '-' : `${score.pointsEarned}/${score.pointsPossible}`
@@ -65,7 +65,7 @@ export class SubmissionsTable extends React.Component {
   handleViewAllResponsesClick = (data) => () => {
     const getsubmissionUUID = (row) => row.original.submissionUUID;
     this.props.loadSelectionForReview(data.map(getsubmissionUUID));
-  }
+  };
 
   render() {
     if (!this.props.listData.length) {

src/data/redux/submissions/selectors.js

@@ -29,9 +29,7 @@ export const listData = createSelector(
   },
 );
 
-export const isEmptySubmissionData = createSelector(
-  [module.listData], (data) => data.length === 0,
-);
+export const isEmptySubmissionData = createSelector([module.listData], (data) => data.length === 0);
 
 export default StrictDict({
   ...simpleSelectors,