diff --git a/client/app/__test__/setup.js b/client/app/__test__/setup.js index 087bd27781e..334e7886ddf 100644 --- a/client/app/__test__/setup.js +++ b/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: { diff --git a/client/app/bundles/course/achievement/containers/AchievementForm/index.jsx b/client/app/bundles/course/achievement/containers/AchievementForm/index.jsx index b823463b818..122886111cd 100644 --- a/client/app/bundles/course/achievement/containers/AchievementForm/index.jsx +++ b/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 = ({ } + component={renderTextField} + label={} disabled={submitting} />
@@ -82,9 +82,8 @@ const AchievementForm = ({ } - labelPosition="right" style={styles.toggle} disabled={submitting} /> diff --git a/client/app/bundles/course/achievement/pages/AchievementEdit/index.jsx b/client/app/bundles/course/achievement/pages/AchievementEdit/index.jsx index 1d53059b02c..6b7c975f776 100644 --- a/client/app/bundles/course/achievement/pages/AchievementEdit/index.jsx +++ b/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} />
- } - primary +
diff --git a/client/app/bundles/course/achievement/pages/AchievementIndex/__test__/index.test.js b/client/app/bundles/course/achievement/pages/AchievementIndex/__test__/index.test.js index f19946f6683..9e553a144de 100644 --- a/client/app/bundles/course/achievement/pages/AchievementIndex/__test__/index.test.js +++ b/client/app/bundles/course/achievement/pages/AchievementIndex/__test__/index.test.js @@ -15,6 +15,8 @@ describe('', () => { 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, + ); }); }); diff --git a/client/app/bundles/course/achievement/pages/AchievementIndex/index.jsx b/client/app/bundles/course/achievement/pages/AchievementIndex/index.jsx index 59ceb1c4347..a67d9c23026 100644 --- a/client/app/bundles/course/achievement/pages/AchievementIndex/index.jsx +++ b/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 = [ - } - primary + , + , ]; const initialValues = { @@ -79,26 +84,29 @@ class PopupDialog extends Component { return ( <> - + > + {intl.formatMessage(translations.new)} + - + + {intl.formatMessage(translations.newAchievement)} + + + + + {formActions}

- - } value="all" label={} /> - } value="none" label={} /> - } value="current" label={} /> - + ); } diff --git a/client/app/bundles/course/admin/pages/LessonPlanSettings/__test__/index.test.jsx b/client/app/bundles/course/admin/pages/LessonPlanSettings/__test__/index.test.jsx index bd0865de1d4..ad44d7f4df6 100644 --- a/client/app/bundles/course/admin/pages/LessonPlanSettings/__test__/index.test.jsx +++ b/client/app/bundles/course/admin/pages/LessonPlanSettings/__test__/index.test.jsx @@ -30,12 +30,12 @@ describe('', () => { 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: { diff --git a/client/app/bundles/course/admin/pages/LessonPlanSettings/index.jsx b/client/app/bundles/course/admin/pages/LessonPlanSettings/index.jsx index f6df52bb313..71db15d9781 100644 --- a/client/app/bundles/course/admin/pages/LessonPlanSettings/index.jsx +++ b/client/app/bundles/course/admin/pages/LessonPlanSettings/index.jsx @@ -3,16 +3,15 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { FormattedMessage } from 'react-intl'; -import Subheader from 'material-ui/Subheader'; -import Toggle from 'material-ui/Toggle'; import { + ListSubheader, + Switch, Table, TableBody, - TableHeader, - TableHeaderColumn, + TableCell, + TableHead, TableRow, - TableRowColumn, -} from 'material-ui/Table'; +} from '@mui/material'; import NotificationPopup from 'lib/containers/NotificationPopup'; import { updateLessonPlanSettings } from 'course/admin/actions/lesson-plan-items'; import translations from './translations.intl'; @@ -83,20 +82,22 @@ class LessonPlanSettings extends Component { - {categoryTitle} - {tabTitle} - - {categoryTitle} + {tabTitle} + + - - - + + - + ); } @@ -106,19 +107,21 @@ class LessonPlanSettings extends Component { return ( - {componentTitle} - - {componentTitle} + + - - - + + - + ); } @@ -132,9 +135,9 @@ class LessonPlanSettings extends Component { if (assessmentItemSettings.length < 1) { return ( - + - + ); } @@ -146,23 +149,23 @@ class LessonPlanSettings extends Component { /> - + - + - - + + - - + + - - + + - + - - + + {assessmentItemSettings.map((item) => this.renderAssessmentSettingRow(item), )} @@ -183,9 +186,9 @@ class LessonPlanSettings extends Component { if (componentItemSettings.length < 1) { return ( - + - + ); } @@ -195,20 +198,20 @@ class LessonPlanSettings extends Component {
- + - + - - + + - - + + - + - - + + {componentItemSettings.map((item) => this.renderComponentSettingRow(item), )} diff --git a/client/app/bundles/course/admin/pages/NotificationSettings/__test__/index.test.jsx b/client/app/bundles/course/admin/pages/NotificationSettings/__test__/index.test.jsx index bd5e9efcce2..fa3ddaaceba 100644 --- a/client/app/bundles/course/admin/pages/NotificationSettings/__test__/index.test.jsx +++ b/client/app/bundles/course/admin/pages/NotificationSettings/__test__/index.test.jsx @@ -25,11 +25,11 @@ describe('', () => { buildContextOptions(store), ); - const toggles = notificationSettings.find('Toggle'); + const toggles = notificationSettings.find('ForwardRef(Switch)'); expect(toggles).toHaveLength(2); const toggle = toggles.first(); - toggle.props().onToggle(null, true); + toggle.props().onChange(null, true); const expectedPayload = { email_settings: { component: 'sample_component', diff --git a/client/app/bundles/course/admin/pages/NotificationSettings/index.jsx b/client/app/bundles/course/admin/pages/NotificationSettings/index.jsx index 79d06d8f9a3..8738c0854db 100644 --- a/client/app/bundles/course/admin/pages/NotificationSettings/index.jsx +++ b/client/app/bundles/course/admin/pages/NotificationSettings/index.jsx @@ -2,16 +2,15 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { FormattedMessage } from 'react-intl'; -import Subheader from 'material-ui/Subheader'; -import Toggle from 'material-ui/Toggle'; import { + ListSubheader, + Switch, Table, TableBody, - TableHeader, - TableHeaderColumn, + TableCell, + TableHead, TableRow, - TableRowColumn, -} from 'material-ui/Table'; +} from '@mui/material'; import NotificationPopup from 'lib/containers/NotificationPopup'; import { updateNotificationSetting } from 'course/admin/actions/notifications'; import adminTranslations from 'course/translations.intl'; @@ -82,34 +81,34 @@ class NotificationSettings extends Component { if (emailSettings.length < 1) { return ( - + - + ); } return (
- + - + - - + + - - + + - - + + - - + + - + - - + + {emailSettings.map((item) => this.renderRow(item))}
@@ -147,29 +146,31 @@ class NotificationSettings extends Component { setting.setting } > - {componentTitle} - {settingTitle} - + {componentTitle} + {settingTitle} + {settingDescription} - - - + + - - - + + - + ); } diff --git a/client/app/bundles/course/assessment/containers/AssessmentForm/index.jsx b/client/app/bundles/course/assessment/containers/AssessmentForm/index.jsx index a52d86a0fe9..0515fb7f1c5 100644 --- 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'; +import { MenuItem } from '@mui/material'; import ErrorText, { errorProps } from 'lib/components/ErrorText'; 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 SelectField from 'lib/components/redux-form/SelectField'; +import renderToggleField from 'lib/components/redux-form/Toggle'; +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'; @@ -24,7 +24,6 @@ const styles = { }, flexChild: { flex: 1, - marginLeft: 10, }, toggle: { marginTop: 16, @@ -143,10 +142,9 @@ class AssessmentForm extends Component { <> } - labelPosition="right" style={styles.toggle} disabled={submitting} /> @@ -164,30 +162,27 @@ class AssessmentForm extends Component { <> } - labelPosition="right" style={styles.toggle} disabled={submitting} /> } - labelPosition="right" style={styles.toggle} disabled={submitting} /> } - labelPosition="right" style={styles.toggle} disabled={submitting} /> @@ -202,29 +197,26 @@ class AssessmentForm extends Component { <> } - floatingLabelFixed - fullWidth + component={renderSelectField} + label={} type="boolean" disabled={submitting} > - } - /> + + + } - /> + > + + } - labelPosition="right" style={styles.toggle} disabled={submitting} /> @@ -233,10 +225,9 @@ class AssessmentForm extends Component { } - labelPosition="right" style={styles.toggle} disabled={submitting} /> @@ -253,8 +244,8 @@ class AssessmentForm extends Component {
} + component={renderTextField} + placeholder={translations.viewPassword.defaultMessage} fullWidth autoComplete="off" disabled={submitting} @@ -265,8 +256,8 @@ class AssessmentForm extends Component { } + component={renderTextField} + placeholder={translations.sessionPassword.defaultMessage} fullWidth autoComplete="off" disabled={submitting} @@ -284,19 +275,15 @@ class AssessmentForm extends Component { return ( } - floatingLabelFixed + component={renderSelectField} + label={} disabled={editing && submitting} > {tabs && tabs.map((tab) => ( - + + {tab.title} + ))} ); @@ -323,14 +310,13 @@ class AssessmentForm extends Component {
} + label={} disabled={submitting} /> {editing && this.renderTabs()}
-
} + label={} style={styles.flexChild} disabled={submitting} afterChange={this.onStartAtChange} @@ -350,7 +336,7 @@ class AssessmentForm extends Component { name="end_at" component={DateTimePicker} clearable - floatingLabelText={} + label={} style={styles.flexChild} disabled={submitting} /> @@ -359,9 +345,7 @@ class AssessmentForm extends Component { name="bonus_end_at" component={DateTimePicker} clearable - floatingLabelText={ - - } + label={} style={styles.flexChild} disabled={submitting} /> @@ -371,8 +355,8 @@ class AssessmentForm extends Component {
} + component={renderTextField} + label={} type="number" onWheel={(event) => event.currentTarget.blur()} style={styles.flexChild} @@ -380,10 +364,8 @@ class AssessmentForm extends Component { /> - } + component={renderTextField} + label={} type="number" onWheel={(event) => event.currentTarget.blur()} style={styles.flexChild} @@ -395,10 +377,9 @@ class AssessmentForm extends Component { {editing && ( } - labelPosition="right" style={styles.toggle} disabled={submitting} /> @@ -406,7 +387,7 @@ class AssessmentForm extends Component { ) } - labelPosition="right" style={styles.toggle} disabled={!modeSwitching || submitting} /> @@ -428,14 +408,13 @@ class AssessmentForm extends Component { } - labelPosition="right" style={styles.toggle} disabled={submitting} /> @@ -444,10 +423,9 @@ class AssessmentForm extends Component { } - labelPosition="right" style={styles.toggle} disabled={submitting} /> @@ -462,28 +440,25 @@ class AssessmentForm extends Component {
} - labelPosition="right" style={styles.flexChild} disabled={submitting} /> } - labelPosition="right" style={styles.flexChild} disabled={submitting} /> } - labelPosition="right" style={styles.flexChild} disabled={submitting} /> @@ -491,10 +466,9 @@ class AssessmentForm extends Component { } - labelPosition="right" style={styles.toggle} disabled={submitting} /> @@ -503,10 +477,9 @@ class AssessmentForm extends Component {
} - labelPosition="right" style={styles.toggle} disabled={submitting} /> @@ -520,10 +493,9 @@ class AssessmentForm extends Component { <> } - labelPosition="right" style={styles.toggle} disabled={submitting} /> @@ -532,12 +504,11 @@ class AssessmentForm extends Component {
} - labelPosition="right" style={styles.toggle} disabled={submitting} /> diff --git a/client/app/bundles/course/assessment/containers/MaterialUploader/Material.jsx b/client/app/bundles/course/assessment/containers/MaterialUploader/Material.jsx index 92f140c052a..645edc60cf3 100644 --- a/client/app/bundles/course/assessment/containers/MaterialUploader/Material.jsx +++ b/client/app/bundles/course/assessment/containers/MaterialUploader/Material.jsx @@ -2,32 +2,30 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; import { FormattedMessage, defineMessages } from 'react-intl'; import { formatLongDateTime } from 'lib/moment'; -import IconButton from 'material-ui/IconButton'; -import { ListItem } from 'material-ui/List'; -import CircularProgress from 'material-ui/CircularProgress'; -import Avatar from 'material-ui/Avatar'; -import ActionAssignment from 'material-ui/svg-icons/action/assignment'; -import DeleteIcon from 'material-ui/svg-icons/action/delete'; +import { + Avatar, + CircularProgress, + IconButton, + ListItem, + ListItemAvatar, + ListItemText, + ListItemSecondaryAction, +} from '@mui/material'; +import Assignment from '@mui/icons-material/Assignment'; +import Delete from '@mui/icons-material/Delete'; import ReactTooltip from 'react-tooltip'; const styles = { - root: { - fontSize: 14, - lineHeight: '14px', - }, - innerDiv: { - paddingTop: 8, - paddingBottom: 8, - }, avatar: { - top: 8, + height: '32px', + width: '32px', }, iconButton: { + color: 'black', width: 24, height: 24, padding: 4, marginRight: 16, - top: 8, }, secondaryText: { fontSize: 12, @@ -71,11 +69,11 @@ class Material extends Component { return ( - } /> - } - secondaryText={this.renderSecondaryText()} - style={styles.root} - innerDivStyle={styles.innerDiv} - /> + + + + + + + + {this.renderIcon()} + ); } } diff --git a/client/app/bundles/course/assessment/containers/MaterialUploader/MaterialList.jsx b/client/app/bundles/course/assessment/containers/MaterialUploader/MaterialList.jsx index c2e436cbda9..73864ecedc9 100644 --- a/client/app/bundles/course/assessment/containers/MaterialUploader/MaterialList.jsx +++ b/client/app/bundles/course/assessment/containers/MaterialUploader/MaterialList.jsx @@ -1,10 +1,7 @@ import PropTypes from 'prop-types'; import { FormattedMessage, defineMessages } from 'react-intl'; -import { List } from 'material-ui/List'; -import Subheader from 'material-ui/Subheader'; -import FlatButton from 'material-ui/FlatButton'; -import Divider from 'material-ui/Divider'; -import ContentAdd from 'material-ui/svg-icons/content/add'; +import { Button, List, ListSubheader, Divider } from '@mui/material'; +import Add from '@mui/icons-material/Add'; import NotificationBar, { notificationShape, } from 'lib/components/NotificationBar'; @@ -12,6 +9,10 @@ import ReactTooltip from 'react-tooltip'; import Material from './Material'; const translations = defineMessages({ + addFiles: { + id: 'course.material.addFiles', + defaultMessage: 'Add Files', + }, disableNewFile: { id: 'course.material.disableNewFile', defaultMessage: @@ -105,14 +106,14 @@ const MaterialList = (props) => { data-for="add-files-button" data-tip-disable={enableMaterialsAction} > - } - containerElement="label" + startIcon={} style={styles.newFileButton} - disabled={!enableMaterialsAction} > + { onChange={onFileInputChange} disabled={!enableMaterialsAction} /> - +
@@ -133,7 +134,7 @@ const MaterialList = (props) => { {(materials.length > 0 || uploadingMaterials.length > 0) && ( - {header} + {header} )} {materialNodes} {uploadingMaterialNodes} diff --git a/client/app/bundles/course/assessment/containers/MaterialUploader/__test__/__snapshots__/index.test.js.snap b/client/app/bundles/course/assessment/containers/MaterialUploader/__test__/__snapshots__/index.test.js.snap index ad7876deb0e..b6ff0e763a1 100644 --- a/client/app/bundles/course/assessment/containers/MaterialUploader/__test__/__snapshots__/index.test.js.snap +++ b/client/app/bundles/course/assessment/containers/MaterialUploader/__test__/__snapshots__/index.test.js.snap @@ -1,60 +1,49 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[` renders the material 1`] = ` -} - size={32} + + + - } - nestedItems={Array []} - nestedLevel={0} - onKeyboardFocus={[Function]} - onMouseEnter={[Function]} - onMouseLeave={[Function]} - onNestedListToggle={[Function]} - onTouchEnd={[Function]} - onTouchStart={[Function]} - open={null} - primaryText="Uploaded Material" - primaryTogglesNestedList={false} - rightAvatar={ - + + + + + 01 Jan 2017, 4:00pm + + } + /> + + - renders the material 1`] = ` values={Object {}} /> - - } - secondaryText={ -
- 01 Jan 2017, 4:00pm -
- } - secondaryTextLines={1} - style={ - Object { - "fontSize": 14, - "lineHeight": "14px", - } - } -/> + + + `; exports[` renders the component with materials 1`] = ` - - - + + - + renders the component with materials 1`] = ` data-for="add-files-button" data-tip={true} > - } - label="Add Files" - labelPosition="after" - labelStyle={Object {}} - onKeyboardFocus={[Function]} - onMouseEnter={[Function]} - onMouseLeave={[Function]} - onTouchStart={[Function]} - primary={false} - secondary={false} + startIcon={} style={ Object { "verticalAlign": "middle", } } > + renders the component with materials 1`] = ` } type="file" /> - + renders the component with materials 1`] = ` values={Object {}} /> - - - + + diff --git a/client/app/bundles/course/assessment/containers/MaterialUploader/__test__/index.test.js b/client/app/bundles/course/assessment/containers/MaterialUploader/__test__/index.test.js index 550130c7da7..a567e893f0b 100644 --- a/client/app/bundles/course/assessment/containers/MaterialUploader/__test__/index.test.js +++ b/client/app/bundles/course/assessment/containers/MaterialUploader/__test__/index.test.js @@ -61,17 +61,17 @@ describe('', () => { materials: [uploadedMaterial], }); - const materailUploder = mount( + const materialUploader = mount( , ); - expect(materailUploder.find('Material')).toHaveLength(2); + expect(materialUploader.find('Material')).toHaveLength(2); const spyUpload = jest.spyOn(CourseAPI.materialFolders, 'upload'); // Upload a file - materailUploder.find('input[type="file"]').simulate('change', { + materialUploader.find('input[type="file"]').simulate('change', { target: { files: [{ name: 'Uploading file' }], }, @@ -79,6 +79,6 @@ describe('', () => { await sleep(1); expect(spyUpload).toHaveBeenCalled(); - expect(materailUploder.find('Material')).toHaveLength(3); + expect(materialUploader.find('Material')).toHaveLength(3); }); }); diff --git a/client/app/bundles/course/assessment/pages/AssessmentEdit/index.jsx b/client/app/bundles/course/assessment/pages/AssessmentEdit/index.jsx index bb11568d6d0..dbbf0dc7c87 100644 --- a/client/app/bundles/course/assessment/pages/AssessmentEdit/index.jsx +++ b/client/app/bundles/course/assessment/pages/AssessmentEdit/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'; @@ -71,12 +71,14 @@ class EditPage extends Component { initialValues={initialValues} />
- } - primary +
diff --git a/client/app/bundles/course/assessment/pages/AssessmentIndex/__test__/index.test.js b/client/app/bundles/course/assessment/pages/AssessmentIndex/__test__/index.test.js index 3bfb5e1220b..72aa710a3e4 100644 --- a/client/app/bundles/course/assessment/pages/AssessmentIndex/__test__/index.test.js +++ b/client/app/bundles/course/assessment/pages/AssessmentIndex/__test__/index.test.js @@ -15,6 +15,8 @@ describe('', () => { 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, + ); }); }); diff --git a/client/app/bundles/course/assessment/pages/AssessmentIndex/index.jsx b/client/app/bundles/course/assessment/pages/AssessmentIndex/index.jsx index eda95defcea..ab63b1c34ce 100644 --- a/client/app/bundles/course/assessment/pages/AssessmentIndex/index.jsx +++ b/client/app/bundles/course/assessment/pages/AssessmentIndex/index.jsx @@ -3,30 +3,23 @@ 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 AssessmentForm from '../../containers/AssessmentForm'; import * as actions from '../../actions'; import translations from './translations.intl'; import actionTypes, { formNames } from '../../constants'; -const styles = { - newButton: { - fontSize: 14, - }, - dialog: { - width: '80%', - maxWidth: 'none', - }, -}; - class PopupDialog extends Component { onFormSubmit = (data) => { const { categoryId, tabId, intl } = this.props; @@ -57,21 +50,23 @@ class PopupDialog extends Component { const { intl, dispatch } = this.props; const formActions = [ - } - primary + , + , ]; const initialValues = { @@ -93,29 +88,32 @@ class PopupDialog extends Component { return ( <> - + > + {intl.formatMessage(translations.new)} + - + + {intl.formatMessage(translations.newAssessment)} + + + + + {formActions} { @@ -68,17 +67,18 @@ class OnlineEditorCppView extends Component { const testCases = data.get('test_cases'); const testCaseError = data.getIn(['test_cases', 'error']); const errorTextElement = testCaseError && ( -
- {testCaseError} -
+ +
+ {testCaseError} +
+ ); return ( @@ -214,32 +214,37 @@ class OnlineEditorCppView extends Component { }; return ( - - - - - + + } + style={{ fontSize: 14, fontWeight: 'bold', margin: 0 }} + > + {header} + + +
+ - - + + {this.props.intl.formatMessage(translations.fileNameHeader)} - - + + {this.props.intl.formatMessage(translations.fileSizeHeader)} - + - - - {this.props.data.get('data_files').map(renderDataFile)} + + + {this.props.data.get(fileType).map(renderDataFile)}
- - + + ); } @@ -267,21 +272,24 @@ class OnlineEditorCppView extends Component { .map(renderNewFile); return ( - - - - - - {newPackageFilesRows} - + + } + style={{ fontSize: 16, fontWeight: 'bold', margin: 0 }} + > + {header} + + +
+ {newPackageFilesRows}
- - + + ); } @@ -322,44 +330,50 @@ class OnlineEditorCppView extends Component { )); return ( - - - - - + + } + style={{ fontSize: 16, fontWeight: 'bold', margin: 0 }} + > + {header} + + +
+ - - {identifier} - {expression} - {expected} - {hint} + + {identifier} + {expression} + {expected} + {hint} - - {rows} - + + {rows} + - - } + + +
- - + + ); } @@ -380,6 +394,5 @@ class OnlineEditorCppView extends Component { } OnlineEditorCppView.propTypes = propTypes; -OnlineEditorCppView.contextTypes = contextTypes; export default injectIntl(OnlineEditorCppView); diff --git a/client/app/bundles/course/assessment/question/programming/components/OnlineEditor/EditorCard.jsx b/client/app/bundles/course/assessment/question/programming/components/OnlineEditor/EditorCard.jsx index 291b856d6de..4ca57b12e13 100644 --- a/client/app/bundles/course/assessment/question/programming/components/OnlineEditor/EditorCard.jsx +++ b/client/app/bundles/course/assessment/question/programming/components/OnlineEditor/EditorCard.jsx @@ -1,9 +1,27 @@ import { Component } from 'react'; import PropTypes from 'prop-types'; import { injectIntl } from 'react-intl'; -import { Card, CardHeader, CardText } from 'material-ui/Card'; +import { Accordion, AccordionDetails, AccordionSummary } from '@mui/material'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import AceEditor from 'react-ace'; +const styles = { + panel: { + margin: 0, + }, + panelSummary: { + fontSize: 14, + fontWeight: 'bold', + margin: 0, + }, + panelSummaryText: { + flexDirection: 'column', + }, + panelSummarySubtitle: { + color: 'grey', + }, +}; + class EditorCard extends Component { static getInputName(field) { return `question_programming[${field}]`; @@ -16,20 +34,23 @@ class EditorCard extends Component { render() { const { mode, field, value, header, subtitle, isLoading } = this.props; return ( - - - + + } + style={styles.panelSummary} + > +
+ {header} +
+
{subtitle}
+
+ +