finish remaining v0 to v3 migration for redux field mui components

Coursemology · Feb 22, 2022 · 01d4a64 · 01d4a64
1 parent 22e7bac
commit 01d4a64
Show file tree

Hide file tree

Showing 16 changed files with 247 additions and 268 deletions.
diff --git a/client/app/__test__/setup.js b/client/app/__test__/setup.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import { IntlProvider, intlShape } from 'react-intl';
 import getMuiTheme from 'material-ui/styles/getMuiTheme';
-
+// import { createMuiTheme } from '@material-ui/core/styles';
 import Enzyme from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 
@@ -15,7 +15,10 @@ const timeZone = 'Asia/Singapore';
 const intlProvider = new IntlProvider({ locale: 'en', timeZone }, {});
 const courseId = '1';
 
+// To replace v0 style below once all v0 components have been removed
 const muiTheme = getMuiTheme();
+// const theme = createMuiTheme();
+
 const buildContextOptions = (store) => ({
   context: { intl, store, muiTheme },
   childContextTypes: {

diff --git a/client/app/bundles/course/achievement/containers/AchievementForm/index.jsx b/client/app/bundles/course/achievement/containers/AchievementForm/index.jsx
@@ -85,7 +85,6 @@ const AchievementForm = ({
       parse={Boolean}
       component={Toggle}
       label={<FormattedMessage {...translations.published} />}
-      labelPosition="right"
       style={styles.toggle}
       disabled={submitting}
     />

diff --git a/client/app/bundles/course/assessment/containers/AssessmentForm/index.jsx b/client/app/bundles/course/assessment/containers/AssessmentForm/index.jsx
@@ -3,13 +3,13 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { reduxForm, Field, Form, formValueSelector, change } from 'redux-form';
 import { connect } from 'react-redux';
-import MenuItem from 'material-ui/MenuItem'; // MUI Redux Field
+import { MenuItem } from '@material-ui/core';
 import ErrorText, { errorProps } from 'lib/components/ErrorText';
 import ConditionList from 'lib/components/course/ConditionList';
 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 SelectField from 'lib/components/redux-form/SelectField';
+import renderSelectField from 'lib/components/redux-form/SelectField';
 import formTranslations from 'lib/translations/form';
 import DateTimePicker from 'lib/components/redux-form/DateTimePicker';
 import { achievementTypesConditionAttributes, typeMaterial } from 'lib/types';
@@ -142,18 +142,15 @@ class AssessmentForm extends React.Component {
     return (
       <Field
         name="tab_id"
-        component={SelectField}
-        style={styles.flexChild}
+        component={renderSelectField}
         label={<FormattedMessage {...translations.tab} />}
         disabled={editing && submitting}
       >
         {tabs &&
           tabs.map((tab) => (
-            <MenuItem
-              key={tab.tab_id}
-              value={tab.tab_id}
-              primaryText={tab.title}
-            />
+            <MenuItem key={tab.tab_id} value={tab.tab_id}>
+              {tab.title}
+            </MenuItem>
           ))}
       </Field>
     );
@@ -201,7 +198,6 @@ class AssessmentForm extends React.Component {
           component={Toggle}
           parse={Boolean}
           label={<FormattedMessage {...translations.enableRandomization} />}
-          labelPosition="right"
           style={styles.toggle}
           disabled={submitting}
         />
@@ -222,7 +218,6 @@ class AssessmentForm extends React.Component {
             component={Toggle}
             parse={Boolean}
             label={<FormattedMessage {...translations.skippable} />}
-            labelPosition="right"
             style={styles.toggle}
             disabled={submitting}
           />
@@ -233,7 +228,6 @@ class AssessmentForm extends React.Component {
             label={
               <FormattedMessage {...translations.allowPartialSubmission} />
             }
-            labelPosition="right"
             style={styles.toggle}
             disabled={submitting}
           />
@@ -242,7 +236,6 @@ class AssessmentForm extends React.Component {
             component={Toggle}
             parse={Boolean}
             label={<FormattedMessage {...translations.showMcqAnswer} />}
-            labelPosition="right"
             style={styles.toggle}
             disabled={submitting}
           />
@@ -257,27 +250,25 @@ class AssessmentForm extends React.Component {
       <>
         <Field
           name="tabbed_view"
-          component={SelectField}
+          component={renderSelectField}
           label={<FormattedMessage {...translations.layout} />}
-          fullWidth
           type="boolean"
           disabled={submitting}
         >
-          <MenuItem
-            value={false}
-            primaryText={<FormattedMessage {...translations.singlePage} />}
-          />
+          <MenuItem value={false}>
+            <FormattedMessage {...translations.singlePage} />
+          </MenuItem>
           <MenuItem
             value={true} // eslint-disable-line
-            primaryText={<FormattedMessage {...translations.tabbedView} />}
-          />
+          >
+            <FormattedMessage {...translations.tabbedView} />
+          </MenuItem>
         </Field>
         <Field
           name="delayed_grade_publication"
           component={Toggle}
           parse={Boolean}
           label={<FormattedMessage {...translations.delayedGradePublication} />}
-          labelPosition="right"
           style={styles.toggle}
           disabled={submitting}
         />
@@ -289,7 +280,6 @@ class AssessmentForm extends React.Component {
           component={Toggle}
           parse={Boolean}
           label={<FormattedMessage {...translations.passwordProtection} />}
-          labelPosition="right"
           style={styles.toggle}
           disabled={submitting}
         />
@@ -327,7 +317,6 @@ class AssessmentForm extends React.Component {
           />
           {editing && this.renderTabs()}
         </div>
-        <br />
         <Field
           name="description"
           component={RichTextField}
@@ -393,7 +382,6 @@ class AssessmentForm extends React.Component {
             component={Toggle}
             parse={Boolean}
             label={<FormattedMessage {...translations.published} />}
-            labelPosition="right"
             style={styles.toggle}
             disabled={submitting}
           />
@@ -410,7 +398,6 @@ class AssessmentForm extends React.Component {
               <FormattedMessage {...translations.modeSwitchingDisabled} />
             )
           }
-          labelPosition="right"
           style={styles.toggle}
           disabled={!modeSwitching || submitting}
         />
@@ -430,7 +417,6 @@ class AssessmentForm extends React.Component {
               {...translations.blockStudentViewingAfterSubmitted}
             />
           }
-          labelPosition="right"
           style={styles.toggle}
           disabled={submitting}
         />
@@ -442,7 +428,6 @@ class AssessmentForm extends React.Component {
           component={Toggle}
           parse={Boolean}
           label={<FormattedMessage {...translations.showMcqMrqSolution} />}
-          labelPosition="right"
           style={styles.toggle}
           disabled={submitting}
         />
@@ -460,7 +445,6 @@ class AssessmentForm extends React.Component {
             component={Toggle}
             parse={Boolean}
             label={<FormattedMessage {...translations.usePublic} />}
-            labelPosition="right"
             style={styles.flexChild}
             disabled={submitting}
           />
@@ -469,7 +453,6 @@ class AssessmentForm extends React.Component {
             component={Toggle}
             parse={Boolean}
             label={<FormattedMessage {...translations.usePrivate} />}
-            labelPosition="right"
             style={styles.flexChild}
             disabled={submitting}
           />
@@ -478,7 +461,6 @@ class AssessmentForm extends React.Component {
             component={Toggle}
             parse={Boolean}
             label={<FormattedMessage {...translations.useEvaluation} />}
-            labelPosition="right"
             style={styles.flexChild}
             disabled={submitting}
           />
@@ -489,7 +471,6 @@ class AssessmentForm extends React.Component {
           component={Toggle}
           parse={Boolean}
           label={<FormattedMessage {...translations.showPrivate} />}
-          labelPosition="right"
           style={styles.toggle}
           disabled={submitting}
         />
@@ -501,7 +482,6 @@ class AssessmentForm extends React.Component {
           component={Toggle}
           parse={Boolean}
           label={<FormattedMessage {...translations.showEvaluation} />}
-          labelPosition="right"
           style={styles.toggle}
           disabled={submitting}
         />
@@ -518,7 +498,6 @@ class AssessmentForm extends React.Component {
               component={Toggle}
               parse={Boolean}
               label={<FormattedMessage {...translations.hasPersonalTimes} />}
-              labelPosition="right"
               style={styles.toggle}
               disabled={submitting}
             />
@@ -532,7 +511,6 @@ class AssessmentForm extends React.Component {
               label={
                 <FormattedMessage {...translations.affectsPersonalTimes} />
               }
-              labelPosition="right"
               style={styles.toggle}
               disabled={submitting}
             />

diff --git a/client/app/bundles/course/assessment/submission/components/ScribingView/ScribingToolbar.jsx b/client/app/bundles/course/assessment/submission/components/ScribingView/ScribingToolbar.jsx
@@ -362,7 +362,11 @@ class ScribingToolbar extends Component {
             this.props.scribing.canvasMaxWidth,
         }}
       >
-        <Grid xs={3} style={{ display: 'flex', justifyContent: 'flex-end' }}>
+        <Grid
+          item
+          xs={3}
+          style={{ display: 'flex', justifyContent: 'flex-end' }}
+        >
           <ToolDropdown
             activeObject={scribing.activeObject}
             disabled={
@@ -688,7 +692,7 @@ class ScribingToolbar extends Component {
             />
           )}
         </Grid>
-        <Grid xs={3}>
+        <Grid item xs={3}>
           <LayersComponent
             onClick={(event) =>
               this.onClickPopover(event, scribingPopoverTypes.LAYER)
@@ -718,7 +722,7 @@ class ScribingToolbar extends Component {
             }}
           />
         </Grid>
-        <Grid xs={2} style={{ display: 'flex', justifyContent: 'center' }}>
+        <Grid item xs={2} style={{ display: 'flex', justifyContent: 'center' }}>
           <Tooltip
             placement="top"
             title={<FormattedMessage {...translations.select} />}
@@ -764,7 +768,7 @@ class ScribingToolbar extends Component {
             />
           </Tooltip>
         </Grid>
-        <Grid xs={2} style={{ display: 'flex', justifyContent: 'center' }}>
+        <Grid item xs={2} style={{ display: 'flex', justifyContent: 'center' }}>
           <Tooltip
             placement="top"
             title={<FormattedMessage {...translations.move} />}
@@ -800,7 +804,7 @@ class ScribingToolbar extends Component {
             />
           </Tooltip>
         </Grid>
-        <Grid xs={1}>
+        <Grid item xs={1}>
           <Tooltip
             placement="top"
             title={<FormattedMessage {...translations.delete} />}
@@ -812,7 +816,7 @@ class ScribingToolbar extends Component {
             />
           </Tooltip>
         </Grid>
-        <Grid xs={1}>
+        <Grid item xs={1}>
           <SavingIndicator
             isSaving={this.props.scribing.isSaving}
             isSaved={this.props.scribing.isSaved}

diff --git a/...nt/app/bundles/course/assessment/submission/components/ScribingView/fields/ShapeField.jsx b/...nt/app/bundles/course/assessment/submission/components/ScribingView/fields/ShapeField.jsx
@@ -18,32 +18,32 @@ const ShapeField = (props) => {
   return (
     <>
       <Button
-        color={currentShape === scribingShapes.RECT && 'primary'}
+        color={currentShape === scribingShapes.RECT ? 'primary' : undefined}
         className="forum-post-expand-button"
         onClick={() => setSelectedShape(scribingShapes.RECT)}
       >
         <Icon
           className="fa fa-square-o"
-          color={
+          style={
             currentShape === scribingShapes.RECT
-              ? blue[500]
-              : 'rgba(0, 0, 0, 0.4)'
+              ? { color: blue[500] }
+              : { color: 'rgba(0, 0, 0, 0.4)' }
           }
         />
         {intl.formatMessage(translations.rectangle)}
       </Button>
 
       <Button
-        color={currentShape === scribingShapes.ELLIPSE && 'primary'}
+        color={currentShape === scribingShapes.ELLIPSE ? 'primary' : undefined}
         className="forum-post-expand-button"
         onClick={() => setSelectedShape(scribingShapes.ELLIPSE)}
       >
         <Icon
           className="fa fa-circle-o"
-          color={
+          style={
             currentShape === scribingShapes.ELLIPSE
-              ? blue[500]
-              : 'rgba(0, 0, 0, 0.4)'
+              ? { color: blue[500] }
+              : { color: 'rgba(0, 0, 0, 0.4)' }
           }
         />
         {intl.formatMessage(translations.ellipse)}

diff --git a/client/app/bundles/course/lesson-plan/containers/EventFormDialog/EventForm.jsx b/client/app/bundles/course/lesson-plan/containers/EventFormDialog/EventForm.jsx
@@ -142,7 +142,6 @@ const EventForm = ({
       component={Toggle}
       parse={Boolean}
       label={<FormattedMessage {...translations[PUBLISHED]} />}
-      labelPosition="right"
       style={styles.toggle}
       disabled={disabled}
     />