Upgrade to MUI v5 - rebased from client-deps-2 upgrade

client/app/__test__/setup.js

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import { IntlProvider, intlShape } from 'react-intl';
-import getMuiTheme from 'material-ui/styles/getMuiTheme';
-
+import { createTheme } from '@mui/material/styles';
 import Enzyme from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 
@@ -15,8 +14,9 @@ const timeZone = 'Asia/Singapore';
 const intlProvider = new IntlProvider({ locale: 'en', timeZone }, {});
 const courseId = '1';
 
-const muiTheme = getMuiTheme();
+const muiTheme = createTheme();
 const intl = intlProvider.getChildContext().intl;
+
 const buildContextOptions = (store) => ({
   context: { intl, store, muiTheme },
   childContextTypes: {

client/app/bundles/course/achievement/containers/AchievementForm/index.jsx

@@ -2,9 +2,9 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { reduxForm, Field, Form } from 'redux-form';
 import ConditionList from 'lib/components/course/ConditionList';
-import TextField from 'lib/components/redux-form/TextField';
+import renderTextField from 'lib/components/redux-form/TextField';
 import RichTextField from 'lib/components/redux-form/RichTextField';
-import Toggle from 'lib/components/redux-form/Toggle';
+import renderToggleField from 'lib/components/redux-form/Toggle';
 import SingleFileInput, {
   BadgePreview,
 } from 'lib/components/redux-form/SingleFileInput';
@@ -60,8 +60,8 @@ const AchievementForm = ({
     <Field
       fullWidth
       name="title"
-      component={TextField}
-      floatingLabelText={<FormattedMessage {...translations.title} />}
+      component={renderTextField}
+      label={<FormattedMessage {...translations.title} />}
       disabled={submitting}
     />
     <br />
@@ -82,9 +82,8 @@ const AchievementForm = ({
     <Field
       name="published"
       parse={Boolean}
-      component={Toggle}
+      component={renderToggleField}
       label={<FormattedMessage {...translations.published} />}
-      labelPosition="right"
       style={styles.toggle}
       disabled={submitting}
     />

client/app/bundles/course/achievement/pages/AchievementEdit/index.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { submit } from 'redux-form';
 import { injectIntl, FormattedMessage, intlShape } from 'react-intl';
-import RaisedButton from 'material-ui/RaisedButton';
+import { Button } from '@mui/material';
 import NotificationBar, {
   notificationShape,
 } from 'lib/components/NotificationBar';
@@ -47,13 +47,15 @@ class EditPage extends Component {
           initialValues={initialValues}
         />
         <div style={styles.buttonContainer}>
-          <RaisedButton
-            label={<FormattedMessage {...translations.updateAchievement} />}
-            primary
+          <Button
+            variant="contained"
+            color="primary"
             className="btn-submit"
             disabled={this.props.disabled}
             onClick={() => dispatch(submit(formNames.ACHIEVEMENT))}
-          />
+          >
+            <FormattedMessage {...translations.updateAchievement} />
+          </Button>
         </div>
         <NotificationBar notification={this.props.notification} />
       </>

client/app/bundles/course/achievement/pages/AchievementIndex/__test__/index.test.js

@@ -15,6 +15,8 @@ describe('<AchievementIndex />', () => {
 
     const newBtn = indexPage.find('button');
     newBtn.simulate('click');
-    expect(indexPage.find('Dialog').first().props().open).toBe(true);
+    expect(indexPage.find('ForwardRef(Dialog)').first().props().open).toBe(
+      true,
+    );
   });
 });

client/app/bundles/course/achievement/pages/AchievementIndex/index.jsx

@@ -3,15 +3,18 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { submit, isPristine } from 'redux-form';
 import { injectIntl, FormattedMessage, intlShape } from 'react-intl';
-import Dialog from 'material-ui/Dialog';
-import RaisedButton from 'material-ui/RaisedButton';
-import FlatButton from 'material-ui/FlatButton';
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+} from '@mui/material';
 import NotificationBar, {
   notificationShape,
 } from 'lib/components/NotificationBar';
 import ConfirmationDialog from 'lib/components/ConfirmationDialog';
 import formTranslations from 'lib/translations/form';
-import modalFormStyles from 'lib/styles/ModalForm.scss';
 import AchievementForm from '../../containers/AchievementForm';
 import * as actions from '../../actions';
 import translations from './translations.intl';
@@ -55,21 +58,23 @@ class PopupDialog extends Component {
     const { intl, dispatch, badge } = this.props;
 
     const formActions = [
-      <FlatButton
-        label={<FormattedMessage {...formTranslations.cancel} />}
-        primary
+      <Button
+        color="primary"
         disabled={this.props.disabled}
-        onClick={this.handleClose}
         key="achievement-popup-dialog-cancel-button"
-      />,
-      <FlatButton
-        label={<FormattedMessage {...formTranslations.submit} />}
+        onClick={this.handleClose}
+      >
+        <FormattedMessage {...formTranslations.cancel} />
+      </Button>,
+      <Button
+        color="primary"
         className="btn-submit"
-        primary
-        onClick={() => dispatch(submit(formNames.ACHIEVEMENT))}
         disabled={this.props.disabled}
         key="achievement-popup-dialog-submit-button"
-      />,
+        onClick={() => dispatch(submit(formNames.ACHIEVEMENT))}
+      >
+        <FormattedMessage {...formTranslations.submit} />
+      </Button>,
     ];
 
     const initialValues = {
@@ -79,26 +84,29 @@ class PopupDialog extends Component {
 
     return (
       <>
-        <RaisedButton
-          label={intl.formatMessage(translations.new)}
-          primary
+        <Button
+          variant="contained"
+          color="primary"
           onClick={this.handleOpen}
           style={styles.newButton}
-        />
+        >
+          {intl.formatMessage(translations.new)}
+        </Button>
         <Dialog
-          title={intl.formatMessage(translations.newAchievement)}
-          modal={false}
+          onClose={this.handleClose}
           open={this.props.visible}
-          actions={formActions}
-          onRequestClose={this.handleClose}
-          autoScrollBodyContent
-          contentStyle={styles.dialog}
-          bodyClassName={modalFormStyles.modalForm}
+          maxWidth="xl"
         >
-          <AchievementForm
-            onSubmit={this.onFormSubmit}
-            initialValues={initialValues}
-          />
+          <DialogTitle>
+            {intl.formatMessage(translations.newAchievement)}
+          </DialogTitle>
+          <DialogContent>
+            <AchievementForm
+              onSubmit={this.onFormSubmit}
+              initialValues={initialValues}
+            />
+          </DialogContent>
+          <DialogActions>{formActions}</DialogActions>
         </Dialog>
         <ConfirmationDialog
           confirmDiscard

client/app/bundles/course/admin/pages/LessonPlanSettings/MilestoneGroupSettings.jsx

@@ -2,7 +2,7 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { defineMessages, FormattedMessage } from 'react-intl';
-import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
+import { FormControlLabel, Radio, RadioGroup } from '@mui/material';
 import { updateLessonPlanSettings } from 'course/admin/actions/lesson-plan-items';
 import { initialState as defaultSettings } from 'course/lesson-plan/reducers/flags';
 
@@ -59,26 +59,32 @@ class MilestoneGroupSettings extends Component {
         <p>
           <FormattedMessage {...translations.explanation} />
         </p>
-        <RadioButtonGroup
+        <RadioGroup
           name="milestonesExpanded"
-          valueSelected={
+          value={
             this.props.milestonesExpanded || defaultSettings.milestonesExpanded
           }
           onChange={this.handleUpdate}
         >
-          <RadioButton
+          <FormControlLabel
+            key="all"
+            control={<Radio style={{ padding: 0, paddingLeft: 12 }} />}
             value="all"
             label={<FormattedMessage {...translations.expandAll} />}
           />
-          <RadioButton
+          <FormControlLabel
+            key="none"
+            control={<Radio style={{ padding: 0, paddingLeft: 12 }} />}
             value="none"
             label={<FormattedMessage {...translations.expandNone} />}
           />
-          <RadioButton
+          <FormControlLabel
+            key="current"
+            control={<Radio style={{ padding: 0, paddingLeft: 12 }} />}
             value="current"
             label={<FormattedMessage {...translations.expandCurrent} />}
           />
-        </RadioButtonGroup>
+        </RadioGroup>
       </>
     );
   }

client/app/bundles/course/admin/pages/LessonPlanSettings/__test__/index.test.jsx

@@ -30,12 +30,12 @@ describe('<LessonPlanSettings />', () => {
       buildContextOptions(store),
     );
 
-    const toggles = lessonPlanSettings.find('Toggle');
+    const toggles = lessonPlanSettings.find('ForwardRef(Switch)');
     // Enabled? and Visible? toggles.
     expect(toggles).toHaveLength(2);
 
     const toggle = toggles.first();
-    toggle.props().onToggle(null, true);
+    toggle.props().onChange(null, true);
     const expectedPayload = {
       lesson_plan_settings: {
         lesson_plan_item_settings: {