Upgrade frontend libraries

client/app/__test__/setup.js

@@ -1,4 +1,4 @@
-import { PropTypes } from 'react';
+import PropTypes from 'prop-types';
 import { IntlProvider, intlShape } from 'react-intl';
 import getMuiTheme from 'material-ui/styles/getMuiTheme';
 import injectTapEventPlugin from 'lib/injectTapEventPlugin';

client/app/__test__/utils/__test__/shallowUntil.test.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import shallowUntil from '../shallowUntil';
 
 describe('#shallowUntil', () => {

client/app/bundles/course/assessment/components/ConditionList/index.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table';
 import Subheader from 'material-ui/Subheader';
@@ -93,7 +94,7 @@ class ConditionList extends React.Component {
   renderConditionRows() {
     return (
       this.props.conditions.map(condition =>
-        <TableRow key={condition.edit_url}>
+        (<TableRow key={condition.edit_url}>
           <TableRowColumn colSpan="1">{condition.type}</TableRowColumn>
           <TableRowColumn colSpan="3">{condition.description}</TableRowColumn>
           <TableRowColumn colSpan="2" style={styles.alignRight}>
@@ -109,7 +110,7 @@ class ConditionList extends React.Component {
               <DeleteIcon />
             </IconButton>
           </TableRowColumn>
-        </TableRow>
+        </TableRow>)
       )
     );
   }

client/app/bundles/course/assessment/containers/AssessmentForm/index.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { reduxForm, Field, Form, formValueSelector, change } from 'redux-form';
 import { connect } from 'react-redux';

client/app/bundles/course/assessment/containers/AssessmentForm/translations.intl.js

@@ -39,15 +39,17 @@ const translations = defineMessages({
   },
   showPrivateHint: {
     id: 'course.assessment.form.showPrivateHint',
-    defaultMessage: 'Show private tests to students after the submission is graded and published (For programming questions)',
+    defaultMessage:
+      'Show private tests to students after the submission is graded and published (For programming questions)',
   },
   showEvaluation: {
     id: 'course.assessment.form.showEvaluation',
     defaultMessage: 'Show evaluation tests',
   },
   showEvaluationHint: {
     id: 'course.assessment.form.showEvaluationHint',
-    defaultMessage: 'Show evaluation tests to students after the submission is graded and published (For programming questions)',
+    defaultMessage:
+      'Show evaluation tests to students after the submission is graded and published (For programming questions)',
   },
   published: {
     id: 'course.assessment.form.published',

client/app/bundles/course/assessment/containers/MaterialUploader/Material.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { FormattedMessage, defineMessages } from 'react-intl';
 import { formatLongDateTime } from 'lib/moment';
 import IconButton from 'material-ui/IconButton';

client/app/bundles/course/assessment/containers/MaterialUploader/MaterialList.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { List } from 'material-ui/List';
 import Subheader from 'material-ui/Subheader';

client/app/bundles/course/assessment/containers/MaterialUploader/index.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import CourseAPI from 'api/course';
 import MaterialList from './MaterialList';

client/app/bundles/course/assessment/pages/AssessmentEdit/index.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { submit } from 'redux-form';
 import { injectIntl, FormattedMessage, intlShape } from 'react-intl';

client/app/bundles/course/assessment/pages/AssessmentIndex/__test__/index.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import ReactTestUtils from 'react-addons-test-utils';
+import ReactTestUtils from 'react-dom/test-utils';
 import { mount } from 'enzyme';
 import ProviderWrapper from 'lib/components/ProviderWrapper';
 import storeCreator from '../../../store';

client/app/bundles/course/assessment/pages/AssessmentIndex/index.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { submit, isPristine } from 'redux-form';
 import { injectIntl, FormattedMessage, intlShape } from 'react-intl';

client/app/bundles/course/assessment/question/programming/ProgrammingQuestion.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import Immutable from 'immutable';

client/app/bundles/course/assessment/question/programming/components/BuildLog.jsx

@@ -1,6 +1,7 @@
 import Immutable from 'immutable';
 
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { injectIntl, defineMessages, intlShape } from 'react-intl';
 
 const translations = defineMessages({

client/app/bundles/course/assessment/question/programming/components/OnlineEditor.jsx

@@ -1,6 +1,7 @@
 import Immutable from 'immutable';
 
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { injectIntl, defineMessages, intlShape } from 'react-intl';
 import OnlineEditorPythonView, { validation as pythonValidation } from './OnlineEditorPythonView';
 

client/app/bundles/course/assessment/question/programming/components/OnlineEditorPythonView.jsx

@@ -1,6 +1,7 @@
 import Immutable from 'immutable';
 
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import AceEditor from 'react-ace';
 import { injectIntl, FormattedMessage, intlShape } from 'react-intl';
 import { Card, CardHeader, CardText } from 'material-ui/Card';
@@ -24,7 +25,7 @@ const MAX_TEST_CASES = 99;
 const propTypes = {
   data: PropTypes.instanceOf(Immutable.Map).isRequired,
   dataFiles: PropTypes.instanceOf(Immutable.Map).isRequired,
-  actions: React.PropTypes.shape({
+  actions: PropTypes.shape({
     updatePythonCodeBlock: PropTypes.func.isRequired,
     createPythonTestCase: PropTypes.func.isRequired,
     updatePythonTestCase: PropTypes.func.isRequired,
@@ -39,7 +40,7 @@ const propTypes = {
 };
 
 const contextTypes = {
-  muiTheme: React.PropTypes.object.isRequired,
+  muiTheme: PropTypes.object.isRequired,
 };
 
 export function validation(data, pathOfKeysToData, intl) {

client/app/bundles/course/assessment/question/programming/components/ProgrammingQuestionForm.jsx

@@ -1,7 +1,8 @@
 /* eslint-disable react/no-array-index-key */
 import Immutable from 'immutable';
 
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from 'react-intl';
 import SelectField from 'material-ui/SelectField';
 import MenuItem from 'material-ui/MenuItem';
@@ -23,7 +24,7 @@ import translations from './ProgrammingQuestionForm.intl';
 
 const propTypes = {
   data: PropTypes.instanceOf(Immutable.Map).isRequired,
-  actions: React.PropTypes.shape({
+  actions: PropTypes.shape({
     submitForm: PropTypes.func.isRequired,
     updateProgrammingQuestion: PropTypes.func.isRequired,
     updateSkills: PropTypes.func.isRequired,

client/app/bundles/course/assessment/question/programming/components/UploadedPackageTemplateView.jsx

@@ -1,6 +1,7 @@
 import Immutable from 'immutable';
 
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { Card } from 'material-ui/Card';
 import { Tabs, Tab } from 'material-ui/Tabs';
 import { cyan500, grey300 } from 'material-ui/styles/colors';

client/app/bundles/course/assessment/question/programming/components/UploadedPackageTestCaseView.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { injectIntl, defineMessages, intlShape } from 'react-intl';
 import { Card, CardHeader } from 'material-ui/Card';
 import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table';

client/app/bundles/course/assessment/question/programming/components/UploadedPackageView.jsx

@@ -1,6 +1,7 @@
 import Immutable from 'immutable';
 
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { injectIntl, defineMessages, intlShape } from 'react-intl';
 import UploadedPackageTemplateView from './UploadedPackageTemplateView';
 import UploadedPackageTestCaseView from './UploadedPackageTestCaseView';
@@ -23,27 +24,25 @@ const propTypes = {
   intl: intlShape.isRequired,
 };
 
-class UploadedPackageView extends React.Component {
-  render() {
-    const { data, intl } = this.props;
-    const packageUI = data.get('package_ui');
-    const templates = packageUI.get('templates');
-    const testCases = packageUI.get('test_cases');
-
-    if (data.get('question').get('package')) {
-      return (
-        <div className="template-package-container">
-          <h3>{intl.formatMessage(translations.templateHeader)}</h3>
-          <UploadedPackageTemplateView {...{ templates }} />
-          <h3>{intl.formatMessage(translations.testCasesHeader)}</h3>
-          <UploadedPackageTestCaseView {...{ testCases }} />
-        </div>
-      );
-    }
-
-    return null;
+const UploadedPackageView = (props) => {
+  const { data, intl } = props;
+  const packageUI = data.get('package_ui');
+  const templates = packageUI.get('templates');
+  const testCases = packageUI.get('test_cases');
+
+  if (data.get('question').get('package')) {
+    return (
+      <div className="template-package-container">
+        <h3>{intl.formatMessage(translations.templateHeader)}</h3>
+        <UploadedPackageTemplateView {...{ templates }} />
+        <h3>{intl.formatMessage(translations.testCasesHeader)}</h3>
+        <UploadedPackageTestCaseView {...{ testCases }} />
+      </div>
+    );
   }
-}
+
+  return null;
+};
 
 UploadedPackageView.propTypes = propTypes;
 

client/app/bundles/course/lesson-plan/components/LessonPlanEdit.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { injectIntl, defineMessages, intlShape } from 'react-intl';
 import moment from 'lib/moment';
 import Snackbar from 'material-ui/Snackbar';

client/app/bundles/course/lesson-plan/components/LessonPlanFilterButton.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import Immutable from 'immutable';
 import { injectIntl, defineMessages, intlShape } from 'react-intl';
 import RaisedButton from 'material-ui/RaisedButton';

client/app/bundles/course/lesson-plan/components/LessonPlanGroup.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import Immutable from 'immutable';
 import { Element } from 'react-scroll';
 import Paper from 'material-ui/Paper';
@@ -13,10 +14,10 @@ const LessonPlanGroup = ({ milestone, items }) => {
       <Paper>
         {
           items.map(item =>
-            <LessonPlanItem
+            (<LessonPlanItem
               key={componentKey(item)}
               {...{ item }}
-            />
+            />)
           )
         }
       </Paper>
@@ -27,7 +28,7 @@ const LessonPlanGroup = ({ milestone, items }) => {
 LessonPlanGroup.propTypes = {
   milestone: PropTypes.instanceOf(Immutable.Map).isRequired,
   items: PropTypes.arrayOf(
-    React.PropTypes.instanceOf(Immutable.Map).isRequired
+    PropTypes.instanceOf(Immutable.Map).isRequired
   ).isRequired,
 };
 

client/app/bundles/course/lesson-plan/components/LessonPlanIndex.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import Immutable from 'immutable';
 import { scroller } from 'react-scroll';
 import styles from './LessonPlanIndex.scss';
@@ -47,11 +48,11 @@ class LessonPlanIndex extends React.Component {
       <div className={styles.mainPanel}>
         {
           milestoneGroups.map(group =>
-            <LessonPlanGroup
+            (<LessonPlanGroup
               key={group.milestone.get('id')}
               milestone={group.milestone}
               items={group.items}
-            />
+            />)
           )
         }
         <div className={styles.navContainer}>

client/app/bundles/course/lesson-plan/components/LessonPlanItem.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import Immutable from 'immutable';
 import { injectIntl, defineMessages, intlShape } from 'react-intl';
 import moment, { shortDateTime, shortTime } from 'lib/moment';
@@ -238,12 +239,12 @@ class LessonPlanItem extends React.Component {
       <div style={styles.attachments}>
         {
           item.get('materials').map(material =>
-            <div key={material.get('name')} style={styles.attachment}>
+            (<div key={material.get('name')} style={styles.attachment}>
               <Description style={styles.attachmentIcon} color={grey700} />
               <a href={material.get('url')}>
                 { material.get('name') }
               </a>
-            </div>
+            </div>)
           )
         }
       </div>

client/app/bundles/course/lesson-plan/components/LessonPlanItemEdit.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import Immutable from 'immutable';
 import moment from 'lib/moment';
 import { injectIntl, defineMessages, intlShape } from 'react-intl';

client/app/bundles/course/lesson-plan/components/LessonPlanMilestone.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import Immutable from 'immutable';
 import { injectIntl, defineMessages, intlShape } from 'react-intl';
 import moment, { longDate } from 'lib/moment';

client/app/bundles/course/lesson-plan/components/LessonPlanNav.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import Immutable from 'immutable';
 import { injectIntl, defineMessages, intlShape } from 'react-intl';
 import RaisedButton from 'material-ui/RaisedButton';

client/app/bundles/course/lesson-plan/containers/LessonPlanContainer.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import Immutable from 'immutable';
 import { connect } from 'react-redux';
 import { Route, Switch } from 'react-router-dom';

client/app/bundles/course/lesson-plan/containers/LessonPlanFilter.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import Immutable from 'immutable';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';

client/app/bundles/course/survey/components/AddButton.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import FloatingActionButton from 'material-ui/FloatingActionButton';
 import ContentAdd from 'material-ui/svg-icons/content/add';
 

client/app/bundles/course/survey/components/FormDialogue.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from 'react-intl';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';

client/app/bundles/course/survey/components/OptionsListItem.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { Card, CardText } from 'material-ui/Card';
 import Thumbnail from './Thumbnail';
 

client/app/bundles/course/survey/components/Thumbnail.jsx

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';