WIP: Fix material-ui

package.json

@@ -3,12 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@babel/runtime": "^7.4.5",
+    "@material-ui/core": "^4.0.2",
+    "@material-ui/icons": "^4.0.1",
     "autosuggest-highlight": "^3.1.1",
     "client-oauth2": "^4.2.0",
     "immutable": "^3.8.2",
     "lodash": "^4.17.11",
-    "material-ui": "^1.0.0-beta.36",
-    "material-ui-icons": "^1.0.0-beta.36",
     "prop-types": "^15.6.1",
     "react": "^16.2.0",
     "react-autosuggest": "^9.3.4",
@@ -17,7 +18,7 @@
     "react-intl": "^2.4.0",
     "react-redux": "^5.0.7",
     "react-router-dom": "4.2.2",
-    "react-scripts": "^2.1.3",
+    "react-scripts": "^3.0.1",
     "react-visibility-sensor": "^3.11.0",
     "redux": "^3.7.2",
     "redux-api-middleware": "^2.3.0",

src/AssetDetail/containers/Collapse.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import MaterialCollapse from 'material-ui/transitions/Collapse';
+import MaterialCollapse from '@material-ui/core/Collapse';
 import { withDraft } from '../../draft';
 
 /**

src/AssetDetail/containers/DeleteEntryButton.js

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import { withDraft } from '../../draft';
 
-import Button from 'material-ui/Button';
+import Button from '@material-ui/core/Button';
 
 import { confirmDelete } from '../../redux/actions/deleteConfirmation';
 import { navigate as navigate_to_previous } from "../../previous";

src/AssetDetail/containers/SaveDraftButton.js

@@ -4,7 +4,7 @@ import { withRouter } from 'react-router';
 import { withDraft } from '../../draft';
 
 import PropTypes from 'prop-types';
-import Button from 'material-ui/Button';
+import Button from '@material-ui/core/Button';
 
 import { snackbarOpen } from '../../redux/actions/snackbar';
 import { navigate as navigate_to_previous } from "../../previous";

src/AssetDetail/containers/ShowOnlyWhenDraftFieldIs.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types';
-import { withStyles } from 'material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 import { withDraft } from '../../draft';
 
 const styles = theme => ({

src/AssetDetail/presentational/AssetForm.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types';
-import { withStyles } from 'material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
 import PreventNavigationWhenDraftModified from '../../containers/PreventNavigationWhenDraftModified';
 

src/AssetDetail/presentational/AssetPage.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types';
-import { withStyles } from 'material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
 import Page from '../../containers/Page';
 

src/AssetDetail/presentational/AssetView.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types';
-import { withStyles } from 'material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
 import FetchAsset from '../containers/FetchAsset';
 

src/AssetDetail/presentational/CompleteIndicator.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from 'material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
-import InProgressIcon from 'material-ui-icons/MoreHoriz';
-import CompleteIcon from 'material-ui-icons/Check';
+import InProgressIcon from '@material-ui/icons/MoreHoriz';
+import CompleteIcon from '@material-ui/icons/Check';
 
 const styles = theme => ({
   indicator: {

src/AssetDetail/presentational/DisplayOnlyInput.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import Input from 'material-ui/Input';
-import { withStyles } from 'material-ui/styles';
+import Input from '@material-ui/core/Input';
+import { withStyles } from '@material-ui/core/styles';
 
 // This was developed by inspecting the Material UI source directly. (This is, in fact, recommended
 // in the documentation!) It may, therefore, need changing as Material UI changes.

src/AssetDetail/presentational/EditBody.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types';
 
-import { withStyles } from 'material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
-import Paper from 'material-ui/Paper';
-import { LinearProgress } from 'material-ui/Progress';
+import Paper from '@material-ui/core/Paper';
+import { LinearProgress } from '@material-ui/core';
 
 import LiveDraftSensor from '../containers/LiveDraftSensor';
 import LoadingDraftSensor from '../containers/LoadingDraftSensor';

src/AssetDetail/presentational/EditHeader.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { withStyles } from 'material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
-import Typography from 'material-ui/Typography';
-import DeleteIcon from 'material-ui-icons/DeleteForever';
+import Typography from '@material-ui/core/Typography';
+import DeleteIcon from '@material-ui/icons/DeleteForever';
 
 import NavigateBackButton from '../../containers/NavigateBackButton';
 

src/AssetDetail/presentational/GeneralInformationFields.js

@@ -1,12 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types';
-import { withStyles } from 'material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
-import Grid from 'material-ui/Grid';
-import Switch from 'material-ui/Switch';
-import TextField from 'material-ui/TextField';
-import { FormControlLabel } from 'material-ui/Form';
-import MenuItem from 'material-ui/Menu/MenuItem';
+import Grid from '@material-ui/core/Grid';
+import Switch from '@material-ui/core/Switch';
+import TextField from '@material-ui/core/TextField';
+import { FormControlLabel } from '@material-ui/core';
+import MenuItem from '@material-ui/core/Menu';
 
 import Lookup from '../../components/Lookup'
 import OwnInstitutionField from '../../components/OwnInstitutionField';

src/AssetDetail/presentational/GeneralInformationView.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types';
-import { withStyles } from 'material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
-import Grid from 'material-ui/Grid';
-import { FormControl } from 'material-ui/Form';
-import { InputLabel } from 'material-ui/Input';
+import Grid from '@material-ui/core/Grid';
+import { FormControl } from '@material-ui/core';
+import { InputLabel } from '@material-ui/core';
 
 import DisplayOnlyInput from './DisplayOnlyInput';
 import {

src/AssetDetail/presentational/Header.js

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import { withStyles } from 'material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
-import AppBar from 'material-ui/AppBar';
-import Toolbar from 'material-ui/Toolbar';
-import Button from 'material-ui/Button';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import Button from '@material-ui/core/Button';
 
 import NavigateBackButton from '../../containers/NavigateBackButton';
 import withScroll from '../../containers/withScroll';

src/AssetDetail/presentational/MultiSelectViewGroup.js

@@ -1,11 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types';
-import { withStyles } from 'material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
-import { FormGroup, FormControlLabel } from 'material-ui/Form';
-import Checkbox from 'material-ui/Checkbox';
+import { FormGroup, FormControlLabel } from '@material-ui/core';
+import Checkbox from '@material-ui/core/Checkbox';
 
-import CheckIcon from 'material-ui-icons/Check';
+import CheckIcon from '@material-ui/icons/Check';
 
 import styles from '../styles';
 

src/AssetDetail/presentational/PersonalDataFields.js

@@ -1,18 +1,19 @@
 import React from 'react'
 import PropTypes from 'prop-types';
-import { withStyles } from 'material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
-import Grid from 'material-ui/Grid';
+import Grid from '@material-ui/core/Grid';
 import {
   FormLabel,
   FormGroup,
   FormControl,
   FormControlLabel,
   FormHelperText,
-} from 'material-ui/Form';
-import Radio, { RadioGroup } from 'material-ui/Radio';
-import Checkbox from 'material-ui/Checkbox';
-import TextField from 'material-ui/TextField';
+} from '@material-ui/core';
+import Radio from '@material-ui/core/Radio';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import Checkbox from '@material-ui/core/Checkbox';
+import TextField from '@material-ui/core/TextField';
 
 import Collapse from '../containers/Collapse';
 import DraftInput, { DraftTextInput, DraftArrayCheckboxInput } from '../../draft/DraftInput';

src/AssetDetail/presentational/PersonalDataView.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types';
-import { withStyles } from 'material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
-import Grid from 'material-ui/Grid';
-import { FormLabel, FormControl } from 'material-ui/Form';
-import { InputLabel } from 'material-ui/Input';
+import Grid from '@material-ui/core/Grid';
+import { FormLabel, FormControl } from '@material-ui/core';
+import { InputLabel } from '@material-ui/core';
 
 import DisplayOnlyInput from './DisplayOnlyInput';
 

src/AssetDetail/presentational/RiskFields.js

@@ -1,17 +1,17 @@
 import React from 'react'
 import PropTypes from 'prop-types';
-import { withStyles } from 'material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
-import Grid from 'material-ui/Grid';
+import Grid from '@material-ui/core/Grid';
 import {
   FormLabel,
   FormGroup,
   FormControl,
   FormControlLabel,
   FormHelperText,
-} from 'material-ui/Form';
-import TextField from 'material-ui/TextField';
-import Checkbox from 'material-ui/Checkbox';
+} from '@material-ui/core';
+import TextField from '@material-ui/core/TextField';
+import Checkbox from '@material-ui/core/Checkbox';
 
 import {DraftArrayCheckboxInput, DraftClearArrayCheckboxInput, DraftTextInput} from '../../draft/DraftInput';
 import { RISK_TYPE_LABELS } from '../data';

src/AssetDetail/presentational/RiskView.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types';
-import { withStyles } from 'material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
-import Grid from 'material-ui/Grid';
-import { FormLabel, FormControl } from 'material-ui/Form';
-import { InputLabel } from 'material-ui/Input';
+import Grid from '@material-ui/core/Grid';
+import { FormLabel, FormControl } from '@material-ui/core';
+import { InputLabel } from '@material-ui/core';
 
 import DisplayOnlyInput from './DisplayOnlyInput';
 import MultiSelectViewGroup from './MultiSelectViewGroup';

src/AssetDetail/presentational/Section.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { withStyles } from 'material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
 /**
  * A section of the asset form. Takes a title and optional indicator node. Uses the following CSS

src/AssetDetail/presentational/StorageAndSecurityFields.js

@@ -1,18 +1,19 @@
 import React from 'react'
 import PropTypes from 'prop-types';
-import { withStyles } from 'material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
-import Grid from 'material-ui/Grid';
+import Grid from '@material-ui/core/Grid';
 import {
   FormLabel,
   FormGroup,
   FormControl,
   FormControlLabel,
   FormHelperText,
-} from 'material-ui/Form';
-import TextField from 'material-ui/TextField';
-import Radio, { RadioGroup } from 'material-ui/Radio';
-import Checkbox from 'material-ui/Checkbox';
+} from '@material-ui/core';
+import TextField from '@material-ui/core/TextField';
+import Radio from '@material-ui/core/Radio';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import Checkbox from '@material-ui/core/Checkbox';
 
 import Collapse from '../containers/Collapse';
 import DraftInput, {

src/AssetDetail/presentational/StorageAndSecurityView.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types';
-import { withStyles } from 'material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
-import Grid from 'material-ui/Grid';
-import { FormLabel, FormControl } from 'material-ui/Form';
-import { InputLabel } from 'material-ui/Input';
+import Grid from '@material-ui/core/Grid';
+import { FormLabel, FormControl } from '@material-ui/core';
+import { InputLabel } from '@material-ui/core';
 
 import DisplayOnlyInput from './DisplayOnlyInput';
 import MultiSelectViewGroup from './MultiSelectViewGroup';

src/AssetDetail/presentational/ViewBody.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types';
 
-import { withStyles } from 'material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
-import Paper from 'material-ui/Paper';
-import { LinearProgress } from 'material-ui/Progress';
+import Paper from '@material-ui/core/Paper';
+import { LinearProgress } from '@material-ui/core';
 
 import Section from './Section';
 import GeneralInformationView from './GeneralInformationView';

src/AssetDetail/presentational/ViewHeader.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { withStyles } from 'material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 
-import Typography from 'material-ui/Typography';
+import Typography from '@material-ui/core/Typography';
 
 import NavigateBackButton from '../../containers/NavigateBackButton';
 

src/components/AssetListHeader.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
-import { withStyles } from 'material-ui/styles';
-import AppBar from 'material-ui/AppBar';
-import Toolbar from 'material-ui/Toolbar';
-import Typography from 'material-ui/Typography';
-import Button from 'material-ui/Button';
+import { withStyles } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
 
 const styles = theme => ({
   flex: { flex: 1 },

src/components/AssetListItem.js

@@ -5,12 +5,12 @@ import { connect } from 'react-redux';
 import { confirmDelete } from '../redux/actions/deleteConfirmation';
 import {
   MoreVert as MoreVertIcon, Visibility as VisibilityIcon, VisibilityOff as VisibilityOffIcon
-} from 'material-ui-icons';
-import {TableRow, TableCell, IconButton, Tooltip, Menu, MenuItem} from 'material-ui';
+} from '@material-ui/icons';
+import {TableRow, TableCell, IconButton, Tooltip, Menu, MenuItem} from '@material-ui/core';
 import { FormattedRelative, FormattedDate, FormattedTime } from 'react-intl';
 import AssetStatus from './AssetStatus';
 import LookupInstitution from './LookupInstitution';
-import { withStyles } from 'material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
 import { encode_search as encode_search_with_previous } from "../previous";
 
 const privateIconStyles = theme => ({

src/components/AssetListItem.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { render, createMockStore, DEFAULT_INITIAL_STATE } from '../testutils';
 import { Router } from 'react-router-dom';
 import createHistory from "history/createMemoryHistory"
-import Table, { TableBody, TableCell } from 'material-ui/Table';
+import Table, { TableBody, TableCell } from '@material-ui/core/Table';
 import AssetListItem from './AssetListItem';
 import { ASSETS_LIST_SUCCESS } from '../redux/actions/assetRegisterApi';
 import reducer from '../redux/reducers';