OpenConceptLab/ocl_issues#986 | updated to React 17 and MUI5

* OpenConceptLab/ocl_issues#986 | updated mui theme provider * OpenConceptLab/ocl_issues#986 | updated mui packages * OpenConceptLab/ocl_issues#986 | updated mui components * OpenConceptLab/ocl_issues#986 | removed mui4 and its deps * OpenConceptLab/ocl_issues#986 | mui5 | theme API update
OpenConceptLab · Oct 11, 2021 · 6e2de25 · 6e2de25
1 parent 85380b8
commit 6e2de25
Show file tree

Hide file tree

Showing 185 changed files with 1,472 additions and 748 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,21 +5,22 @@
   "main": "index.js",
   "homepage": ".",
   "dependencies": {
-    "@date-io/moment": "^1.3.13",
-    "@material-ui/core": "^4.12.3",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.60",
-    "@material-ui/pickers": "^3.3.10",
+    "@emotion/react": "^11.4.1",
+    "@emotion/styled": "^11.3.0",
+    "@mui/icons-material": "^5.0.3",
+    "@mui/lab": "^5.0.0-alpha.50",
+    "@mui/material": "^5.0.3",
+    "@mui/styles": "^5.0.1",
     "alertifyjs": "^1.13.1",
     "axios": "^0.21.4",
     "core-js": "^3.18.2",
     "lodash": "^4.17.21",
     "moment": "^2.29.1",
     "prop-types": "^15.7.2",
-    "react": "^16.14.0",
+    "react": "^17.0.2",
     "react-beautiful-dnd": "^13.1.0",
     "react-diff-viewer": "^3.1.1",
-    "react-dom": "^16.14.0",
+    "react-dom": "^17.0.2",
     "react-dropzone": "^11.4.1",
     "react-ga": "^3.3.0",
     "react-google-recaptcha": "^2.1.0",
@@ -40,11 +41,11 @@
     "eslint": "./node_modules/.bin/eslint ./src"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.5",
+    "@babel/core": "^7.15.8",
     "@babel/plugin-proposal-class-properties": "^7.14.5",
     "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
     "@babel/polyfill": "^7.12.1",
-    "@babel/preset-env": "^7.15.4",
+    "@babel/preset-env": "^7.15.8",
     "@babel/preset-react": "^7.14.5",
     "@babel/runtime": "7.0.0-beta.42",
     "babel-eslint": "^10.1.0",
@@ -67,7 +68,7 @@
     "react-is": "^16.13.1",
     "sass-loader": "^6.0.6",
     "style-loader": "^0.19.1",
-    "webpack": "^5.57.1",
+    "webpack": "^5.58.0",
     "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^3.11.2"
   }

diff --git a/src/components/app/App.scss b/src/components/app/App.scss
@@ -252,7 +252,7 @@ span.separator-small {
 
     &-header {
         margin-left: -1px;
-        div:first-child {
+        div:first-of-type {
             overflow: auto !important;
         }
 
@@ -368,6 +368,7 @@ div.login-paper {
 }
 .material-tab {
     text-transform: capitalize;
+    flex-direction: row;
     span {
         flex-direction: row;
         display: flex;
@@ -512,6 +513,9 @@ div.login-paper {
     }
 }
 .custom-drawer {
+    top: 65px;
+    height: auto;
+    bottom: 0;
     &.large {
         width: 75%;
     }
@@ -949,3 +953,12 @@ div.custom-attributes-accordion-content {
         border-bottom: none;
     }
 }
+
+#chip-date-picker {
+    input#hidden-date-input {
+        display: none;
+    }
+    input#hidden-date-input + div > button {
+        display: none;
+    }
+}
diff --git a/src/components/app/AppVersions.jsx b/src/components/app/AppVersions.jsx
@@ -1,7 +1,7 @@
 /*eslint no-process-env: 0*/
 
 import React from 'react';
-import { Tooltip } from '@material-ui/core';
+import { Tooltip } from '@mui/material';
 import APIService from '../../services/APIService';
 import { isFHIRServer } from '../../common/utils';
 import packageJson from '../../../package.json';

diff --git a/src/components/app/Footer.jsx b/src/components/app/Footer.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { Divider } from '@material-ui/core';
-import { Copyright as CopyrightIcon } from '@material-ui/icons';
+import { Divider } from '@mui/material';
+import { Copyright as CopyrightIcon } from '@mui/icons-material';
 import AppVersions from './AppVersions';
 
 const Footer = () => {

diff --git a/src/components/app/Header.jsx b/src/components/app/Header.jsx
@@ -3,13 +3,13 @@ import {
   AppBar, Toolbar, Typography, Button, Drawer, CssBaseline, List, IconButton,
   ListItem, ListItemText, Collapse, ListItemIcon, Tooltip, Paper,
   Popper, Grow, ClickAwayListener
-} from '@material-ui/core';
+} from '@mui/material';
 import {
   Menu as MenuIcon,
   ExpandLess as ExpandLessIcon,
   ExpandMore as ExpandMoreIcon,
-} from '@material-ui/icons';
-import { makeStyles } from '@material-ui/core/styles';
+} from '@mui/icons-material';
+import makeStyles from '@mui/styles/makeStyles';
 import { map, isEmpty, get } from 'lodash';
 import {
   isAtGlobalSearch, isLoggedIn, isServerSwitched, canSwitchServer, getAppliedServerConfig
@@ -128,8 +128,13 @@ const Header = props => {
       <CssBaseline />
       <AppBar
         position="fixed"
-        variant="outlined"
-        style={{backgroundColor: WHITE, color: BLACK, borderLeft: 'none'}}
+        style={{
+          backgroundColor: WHITE,
+          color: BLACK,
+          borderLeft: 'none',
+          borderBottom: '1px solid rgba(0, 0, 0, 0.12)',
+          boxShadow: 'none'
+        }}
         className={classes.appBar}
       >
         <Toolbar style={{padding: '0 15px'}}>
@@ -139,7 +144,7 @@ const Header = props => {
             onClick={toggleOpen}
             edge="start"
             className={classes.menuButton}
-          >
+            size="large">
             <MenuIcon />
           </IconButton>
           <Typography variant="h6" className="brand col-sm-1" style={{padding: '0 5px'}}>
@@ -272,7 +277,7 @@ const Header = props => {
               edge="start"
               className={open ? classes.menuButton + ' ' + classes.hide : classes.menuButton}
               style={{marginLeft: 0}}
-            >
+              size="large">
               <MenuIcon />
             </IconButton>
           </div>
@@ -359,7 +364,7 @@ const Header = props => {
 
       }
     </React.Fragment>
-  )
+  );
 }
 
 export default Header;
diff --git a/src/components/app/MenuOptions.jsx b/src/components/app/MenuOptions.jsx
@@ -16,7 +16,7 @@ import {
   ContactSupport as FAQIcon,
   Map as MapIcon,
   QuestionAnswer as ContactIcon
-} from '@material-ui/icons';
+} from '@mui/icons-material';
 import OpenMRSLogo from '../common/OpenMRSLogo';
 
 export const SITE_URL = 'https://openconceptlab.org/';

diff --git a/src/components/collections/AddReferencesResult.jsx b/src/components/collections/AddReferencesResult.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import MuiAlert from '@material-ui/lab/Alert';
+import MuiAlert from '@mui/material/Alert';
 import {
   Button, Dialog, DialogActions, DialogContent, DialogTitle,
   Divider
-} from '@material-ui/core'
+} from '@mui/material'
 import { filter, map, get, isEmpty } from 'lodash';
 
 const ReferencesResult = ({references, severity, title, messageKey}) => (

diff --git a/src/components/collections/Collection.jsx b/src/components/collections/Collection.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Loyalty as LoyaltyIcon } from '@material-ui/icons'
+import { Loyalty as LoyaltyIcon } from '@mui/icons-material'
 import { merge, get, isEmpty, map, isArray, reject, includes, keys } from 'lodash'
 import { DARKGRAY } from '../../common/constants';
 import ResourceLabel from '../common/ResourceLabel';

diff --git a/src/components/collections/CollectionHome.jsx b/src/components/collections/CollectionHome.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { CircularProgress } from '@material-ui/core';
+import { CircularProgress } from '@mui/material';
 import { includes, isEmpty, get, findIndex, isEqual, find, isObject } from 'lodash';
 import APIService from '../../services/APIService';
 import CollectionHomeHeader from './CollectionHomeHeader';

diff --git a/src/components/collections/CollectionHomeHeader.jsx b/src/components/collections/CollectionHomeHeader.jsx
@@ -5,8 +5,8 @@ import {
   FileCopy as CopyIcon,
   Edit as EditIcon,
   Delete as DeleteIcon,
-} from '@material-ui/icons';
-import { Tooltip, Button, ButtonGroup, Collapse } from '@material-ui/core';
+} from '@mui/icons-material';
+import { Tooltip, Button, ButtonGroup, Collapse } from '@mui/material';
 import { filter, map, get } from 'lodash';
 import { toFullAPIURL, copyURL, nonEmptyCount, currentUserHasAccess } from '../../common/utils';
 import { GREEN } from '../../common/constants';
@@ -139,22 +139,22 @@ const CollectionHomeHeader = ({
             <span style={{marginLeft: '15px'}}>
               <ButtonGroup variant='text' size='large'>
                 <Tooltip arrow title="Copy URL">
-                  <Button onClick={onIconClick}>
+                  <Button onClick={onIconClick} color='secondary'>
                     <CopyIcon fontSize="inherit" />
                   </Button>
                 </Tooltip>
                 {
                   hasAccess && isVersionedObject &&
                   <Tooltip arrow title='Edit Collection'>
-                    <Button onClick={() => setCollectionForm(true)}>
+                    <Button onClick={() => setCollectionForm(true)} color='secondary'>
                       <EditIcon fontSize='inherit' />
                     </Button>
                   </Tooltip>
                 }
                 {
                   hasAccess && isVersionedObject &&
                   <Tooltip arrow title='Delete Collection'>
-                    <Button onClick={() => setDeleteDialog(true) }>
+                    <Button onClick={() => setDeleteDialog(true) } color='secondary'>
                       <DeleteIcon fontSize='inherit' />
                     </Button>
                   </Tooltip>

diff --git a/src/components/collections/CollectionHomeTabs.jsx b/src/components/collections/CollectionHomeTabs.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Tabs, Tab } from '@material-ui/core';
+import { Tabs, Tab } from '@mui/material';
 import { get, reject, includes, map, pickBy, isString, isObject } from 'lodash';
 import { GREEN } from '../../common/constants';
 import { currentUserHasAccess } from '../../common/utils';

diff --git a/src/components/collections/ReferenceForm.jsx b/src/components/collections/ReferenceForm.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import alertifyjs from 'alertifyjs';
-import { Button, Switch, FormControlLabel } from '@material-ui/core';
+import { Button, Switch, FormControlLabel } from '@mui/material';
 import { set, get, isEmpty, isNumber, isNaN, cloneDeep, pullAt, find, map, compact } from 'lodash';
 import APIService from '../../services/APIService';
 import { SOURCE_CHILD_URI_REGEX } from '../../common/constants';

diff --git a/src/components/collections/ResourceReferenceForm.jsx b/src/components/collections/ResourceReferenceForm.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { TextField } from '@material-ui/core';
-import Autocomplete from '@material-ui/lab/Autocomplete';
+import { TextField } from '@mui/material';
+import Autocomplete from '@mui/material/Autocomplete';
 import { set, map, orderBy, get, includes } from 'lodash';
 import MixedOwnersAutocomplete from '../common/MixedOwnersAutocomplete';
 import ConceptContainersAutocomplete from '../common/ConceptContainersAutocomplete';
@@ -112,7 +112,7 @@ class ResourceReferenceForm extends React.Component {
           <Autocomplete
             blurOnSelect
             openOnFocus
-            getOptionSelected={(option, value) => option.version === get(value, 'version')}
+            isOptionEqualToValue={(option, value) => option.version === get(value, 'version')}
             value={version}
             id='version'
             options={versions}
@@ -161,7 +161,7 @@ class ResourceReferenceForm extends React.Component {
           </React.Fragment>
         }
       </div>
-    )
+    );
   }
 }
 

diff --git a/src/components/collections/URLReferenceForm.jsx b/src/components/collections/URLReferenceForm.jsx
@@ -1,13 +1,13 @@
 import React from 'react';
-import { TextField, IconButton, Button } from '@material-ui/core';
-import { Add as AddIcon, Delete as DeleteIcon } from '@material-ui/icons';
+import { TextField, IconButton, Button } from '@mui/material';
+import { Add as AddIcon, Delete as DeleteIcon } from '@mui/icons-material';
 import { map, isNumber } from 'lodash';
 
 const URLReferenceForm = ({expressions, onAdd, onChange, onBlur, onDelete}) => {
   return (
     <div className='col-md-12 no-side-padding'>
       <div className='col-md-12 no-side-padding' style={{marginTop: '15px'}}>
-        <Button onClick={onAdd} startIcon={<AddIcon />} variant='outlined' color='default'>Expression</Button>
+        <Button onClick={onAdd} startIcon={<AddIcon />} variant='outlined'>Expression</Button>
       </div>
       {
         map(expressions, (expression, index) => {
@@ -32,15 +32,15 @@ const URLReferenceForm = ({expressions, onAdd, onChange, onBlur, onDelete}) => {
               {
                 index > 0 &&
                 <div className='col-md-1 no-side-padding'>
-                  <IconButton onClick={() => onDelete(index)}><DeleteIcon fontSize='inherit'/></IconButton>
+                  <IconButton onClick={() => onDelete(index)} size="large"><DeleteIcon fontSize='inherit'/></IconButton>
                 </div>
               }
             </div>
-          )
+          );
         })
       }
     </div>
-  )
+  );
 }
 
 export default URLReferenceForm;
diff --git a/src/components/common/AccessChip.jsx b/src/components/common/AccessChip.jsx
@@ -2,8 +2,8 @@ import React from 'react';
 import {
   Public as PublicIcon,
   Lock as PrivateIcon,
-} from '@material-ui/icons';
-import { Tooltip, Chip } from '@material-ui/core';
+} from '@mui/icons-material';
+import { Tooltip, Chip } from '@mui/material';
 import { startCase, includes } from 'lodash';
 
 const AccessChip = props => {
@@ -22,6 +22,7 @@ const AccessChip = props => {
                 <PublicIcon fontSize='inherit' /> :
                 <PrivateIcon fontSize='inherit' />
           }
+          style={{backgroundColor: '#e0e0e0'}}
         />
       </Tooltip>
     </span>

diff --git a/src/components/common/AddToCollection.jsx b/src/components/common/AddToCollection.jsx
@@ -4,14 +4,14 @@ import {
   Button, Popper, MenuItem, MenuList, Grow, Paper, ClickAwayListener, Tooltip,
   CircularProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle,
   FormControlLabel, Checkbox, Divider, TextField, InputAdornment
-} from '@material-ui/core'
-import MuiAlert from '@material-ui/lab/Alert';
+} from '@mui/material'
+import MuiAlert from '@mui/material/Alert';
 import {
   ArrowDropDown as ArrowDropDownIcon,
   Loyalty as LoyaltyIcon,
   Help as HelpIcon,
   Search as SearchIcon,
-} from '@material-ui/icons'
+} from '@mui/icons-material'
 import { map, isEmpty, get, filter, cloneDeep } from 'lodash';
 import APIService from '../../services/APIService';
 import { getCurrentUserCollections, getCurrentUser } from '../../common/utils';
@@ -128,13 +128,13 @@ class AddToCollection extends React.Component {
     if(iconButton)
       return (
         <Tooltip arrow title='Add to Collection'>
-          <Button ref={this.anchorRef} onClick={this.toggleOpen} {...rest}>
+          <Button ref={this.anchorRef} onClick={this.toggleOpen} {...rest} color='secondary'>
             <LoyaltyIcon fontSize='inherit' />
           </Button>
         </Tooltip>
       )
     return (
-      <Button ref={this.anchorRef} onClick={this.toggleOpen} startIcon={<LoyaltyIcon />} endIcon={<ArrowDropDownIcon />} {...rest}>
+      <Button ref={this.anchorRef} onClick={this.toggleOpen} startIcon={<LoyaltyIcon />} endIcon={<ArrowDropDownIcon />} {...rest}  color='secondary'>
         Add to Collection
       </Button>
     )

diff --git a/src/components/common/AppsMenu.jsx b/src/components/common/AppsMenu.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { useLocation } from 'react-router';
-import { Apps as AppsIcon , Web as MetadataBrowserIcon, Publish as ImportsIcon } from '@material-ui/icons';
-import { Popper, ClickAwayListener, Tooltip, Grow, Paper, IconButton, Box, Typography } from '@material-ui/core';
+import { Apps as AppsIcon , Web as MetadataBrowserIcon, Publish as ImportsIcon } from '@mui/icons-material';
+import { Popper, ClickAwayListener, Tooltip, Grow, Paper, IconButton, Box, Typography } from '@mui/material';
 import useToggle from '../../hooks/useToggle';
 import OpenMRSLogo from '../common/OpenMRSLogo';
 import { getOpenMRSURL } from '../../common/utils';
@@ -21,7 +21,13 @@ const AppsMenu = () => {
   return (
     <React.Fragment>
       <Tooltip arrow title="Apps menu">
-        <IconButton className={open.value ? "app-menu-toggle selected" : "app-menu-toggle"} style={{marginRight:"5px"}} touch='true' onClick={open.toggle} ref={anchorRef}>
+        <IconButton
+          className={open.value ? "app-menu-toggle selected" : "app-menu-toggle"}
+          style={{marginRight:"5px"}}
+          touch='true'
+          onClick={open.toggle}
+          ref={anchorRef}
+          size="large">
           <AppsIcon/>
         </IconButton>
       </Tooltip>