Commit f0c9486b authored by Markus Scheidgen's avatar Markus Scheidgen
Browse files

Fixed most mui4 migration layout issues and warnings.

parent 91562265
Pipeline #72804 failed with stages
in 34 minutes and 44 seconds
......@@ -35,8 +35,7 @@
"react-infinite-scroller": "^1.2.4",
"react-json-view": "^1.19.1",
"react-keycloak": "^6.1.0",
"react-router-dom": "^4.3.1",
"react-router-hash-link": "^1.2.0",
"react-router-dom": "^5.1.2",
"react-scripts": "1.1.4",
"react-swipeable-views": "^0.13.0",
"recompose": "^0.28.2",
......@@ -53,6 +52,7 @@
"eject": "react-scripts eject"
},
"devDependencies": {
"@material-ui/codemod": "^4.5.0",
"babel-eslint": "^8.2.6",
"eslint": "^4.19.1",
"eslint-config-standard": "^11.0.0",
......
......@@ -18,7 +18,7 @@ class About extends React.Component {
static styles = theme => ({
root: {
padding: theme.spacing.unit * 3
padding: theme.spacing(3)
}
})
......
......@@ -20,8 +20,8 @@ class ApiDialogUnstyled extends React.Component {
paddingBottom: 0
},
json: {
marginTop: theme.spacing.unit * 2,
marginBottom: theme.spacing.unit * 2
marginTop: theme.spacing(2),
marginBottom: theme.spacing(2)
},
codeContainer: {
display: 'flex',
......@@ -30,11 +30,11 @@ class ApiDialogUnstyled extends React.Component {
},
code: {
flexGrow: 1,
marginRight: theme.spacing.unit,
marginRight: theme.spacing(1),
overflow: 'hidden'
},
codeActions: {
marginTop: theme.spacing.unit * 3
marginTop: theme.spacing(3)
}
})
......
......@@ -4,11 +4,11 @@ import React from 'react'
import PropTypes, { instanceOf } from 'prop-types'
import { compose } from 'recompose'
import classNames from 'classnames'
import { MuiThemeProvider, withStyles } from '@material-ui/core/styles'
import { MuiThemeProvider, withStyles, makeStyles } from '@material-ui/core/styles'
import { LinearProgress, ListItemIcon, ListItemText, MenuList, MenuItem, Typography,
AppBar, Toolbar, Button, DialogContent, DialogTitle, DialogActions, Dialog, Tooltip,
Snackbar, SnackbarContent } from '@material-ui/core'
import { Route, Link, withRouter } from 'react-router-dom'
import { Route, Link, withRouter, useLocation } from 'react-router-dom'
import BackupIcon from '@material-ui/icons/Backup'
import SearchIcon from '@material-ui/icons/Search'
import UserDataIcon from '@material-ui/icons/AccountCircle'
......@@ -61,6 +61,38 @@ function ReloadSnack() {
</Snackbar>
}
const useMainMenuItemStyles = makeStyles(theme => ({
itemText: {
color: 'black',
paddingRight: theme.spacing(2),
paddingLeft: theme.spacing(2)
},
itemIcon: {
minWidth: 0
}
}))
function MainMenuItem({tooltip, title, path, icon}) {
const {pathname} = useLocation()
const classes = useMainMenuItemStyles()
const selected = path === pathname || (path !== '/' && pathname.startsWith(path))
return <Tooltip title={tooltip}>
<MenuItem component={Link} to={path} selected={selected} dense>
<ListItemIcon className={classes.itemIcon}>
{icon}
</ListItemIcon>
<ListItemText className={classes.itemText} primary={title}/>
</MenuItem>
</Tooltip>
}
MainMenuItem.propTypes = {
'tooltip': PropTypes.string.isRequired,
'title': PropTypes.string.isRequired,
'path': PropTypes.string.isRequired,
'icon': PropTypes.element.isRequired
}
class NavigationUnstyled extends React.Component {
static propTypes = {
classes: PropTypes.object.isRequired,
......@@ -75,7 +107,7 @@ class NavigationUnstyled extends React.Component {
minWidth: 1024
},
title: {
marginLeft: theme.spacing.unit,
marginLeft: theme.spacing(1),
flexGrow: 1,
display: 'flex',
alignItems: 'center',
......@@ -94,20 +126,20 @@ class NavigationUnstyled extends React.Component {
backgroundColor: '#20335D'
},
menuButton: {
marginLeft: theme.spacing.unit
marginLeft: theme.spacing(1)
},
helpButton: {
marginLeft: theme.spacing.unit
marginLeft: theme.spacing(1)
},
hide: {
display: 'none'
},
toolbar: {
paddingRight: theme.spacing.unit * 3
paddingRight: theme.spacing(3)
},
logo: {
height: theme.spacing.unit * 7,
marginRight: theme.spacing.unit * 2
height: theme.spacing(7),
marginRight: theme.spacing(2)
},
menu: {
display: 'inline-flex',
......@@ -116,7 +148,7 @@ class NavigationUnstyled extends React.Component {
backgroundColor: 'white'
},
content: {
marginTop: theme.spacing.unit * 13,
marginTop: theme.spacing(13),
flexGrow: 1,
backgroundColor: theme.palette.background.default,
width: '100%',
......@@ -241,55 +273,43 @@ class NavigationUnstyled extends React.Component {
</div>
</Toolbar>
<MenuList classes={{root: classes.menu}}>
<Tooltip title="Find and download data">
<MenuItem component={Link} to="/search" selected={ pathname.startsWith('/search') } dense>
<ListItemIcon classes={{root: classes.menuItemIcon}}>
<SearchIcon />
</ListItemIcon>
<ListItemText inset primary="Search"/>
</MenuItem>
</Tooltip>
<Tooltip title="Upload and publish data">
<MenuItem component={Link} to="/uploads" selected={ pathname === '/uploads' } dense>
<ListItemIcon classes={{root: classes.menuItemIcon}}>
<BackupIcon />
</ListItemIcon>
<ListItemText inset primary="Upload"/>
</MenuItem>
</Tooltip>
<Tooltip title="Manage your data">
<MenuItem component={Link} to="/userdata" selected={ pathname.startsWith('/userdata') } dense>
<ListItemIcon classes={{root: classes.menuItemIcon}}>
<UserDataIcon />
</ListItemIcon>
<ListItemText inset primary="Your data"/>
</MenuItem>
</Tooltip>
<MainMenuItem
title="Search"
path="/search"
tooltip="Find and download data"
icon={<SearchIcon/>}
/>
<MainMenuItem
title="Upload"
path="/uploads"
tooltip="Upload and publish data"
icon={<BackupIcon/>}
/>
<MainMenuItem
title="Your data"
path="/userdata"
tooltip="Manage your data"
icon={<UserDataIcon/>}
/>
<div className={classes.divider} />
<Tooltip title="NOMAD Repository and Archive">
<MenuItem component={Link} to="/" selected={ pathname === '/' } dense>
<ListItemIcon classes={{root: classes.menuItemIcon}}>
<AboutIcon />
</ListItemIcon>
<ListItemText inset primary="Overview"/>
</MenuItem>
</Tooltip>
<Tooltip title="Frequently Asked Questions (FAQ)">
<MenuItem component={Link} to="/faq" selected={ pathname === '/faq' } dense>
<ListItemIcon classes={{root: classes.menuItemIcon}}>
<FAQIcon />
</ListItemIcon>
<ListItemText inset primary="FAQ"/>
</MenuItem>
</Tooltip>
<Tooltip title="Browse the archive schema">
<MenuItem component={Link} to="/metainfo" selected={ pathname === '/metainfo' } dense>
<ListItemIcon classes={{root: classes.menuItemIcon}}>
<MetainfoIcon />
</ListItemIcon>
<ListItemText inset primary="Meta Info"/>
</MenuItem>
</Tooltip>
<MainMenuItem
title="Overview"
path="/"
tooltip="NOMAD Repository and Archive"
icon={<AboutIcon/>}
/>
<MainMenuItem
title="FAQ"
path="/faq"
tooltip="Frequently Asked Questions (FAQ)"
icon={<FAQIcon/>}
/>
<MainMenuItem
title="Meta Info"
path="/metainfo"
tooltip="Browse the archive schema"
icon={<MetainfoIcon/>}
/>
</MenuList>
{loading ? <LinearProgress color="secondary" /> : ''}
</AppBar>
......
......@@ -32,14 +32,14 @@ class DataTableToolbarUnStyled extends React.Component {
static styles = theme => ({
root: {
paddingLeft: theme.spacing.unit * 3
paddingLeft: theme.spacing(3)
},
selected: {
color: theme.palette.secondary.main
},
title: {
whiteSpace: 'nowrap',
marginRight: theme.spacing.unit
marginRight: theme.spacing(1)
},
grow: {
flex: '1 1 100%'
......@@ -240,8 +240,8 @@ class DataTableUnStyled extends React.Component {
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
maxWidth: 200,
paddingLeft: theme.spacing.unit * 3,
paddingRight: theme.spacing.unit * 3
paddingLeft: theme.spacing(3),
paddingRight: theme.spacing(3)
},
ellipsisFront: {
direction: 'rtl',
......@@ -418,9 +418,7 @@ class DataTableUnStyled extends React.Component {
onColumnsChanged={columns => this.setState({selectedColumns: columns})}
/>
<div className={classes.tableWrapper}>
<Table
className={classes.table}
>
<Table className={classes.table} size="small">
<TableHead>
<TableRow>
{withSelect ? <TableCell padding="checkbox">
......@@ -506,7 +504,7 @@ class DataTableUnStyled extends React.Component {
)
})}
{emptyRows > 0 && (
<TableRow style={{ height: 49 * emptyRows }}>
<TableRow style={{ height: 61 * emptyRows }}>
<TableCell colSpan={selectedColumns.length + 1 + (entryActions ? 1 : 0)} />
</TableRow>
)}
......
......@@ -28,12 +28,12 @@ class DatasetPage extends React.Component {
static styles = theme => ({
description: {
flexGrow: 1,
marginRight: theme.spacing.unit
marginRight: theme.spacing(1)
},
header: {
display: 'flex',
flexDirection: 'row',
padding: theme.spacing.unit * 3
padding: theme.spacing(3)
},
actions: {}
})
......
......@@ -412,7 +412,7 @@ class ActionInput extends React.PureComponent {
value: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired,
label: PropTypes.string,
component: PropTypes.func
component: PropTypes.elementType
}
handleChange(event) {
......@@ -525,13 +525,13 @@ class ListTextInputUnstyled extends React.Component {
/>
<div className={classes.buttonContainer}>
{normalizedValues.length > 1 || (normalizedValues.length === 1 && normalizedValues[0].value)
? <IconButton className={classes.button} size="tiny" onClick={() => handleRemove(index)}>
? <IconButton className={classes.button} size="medium" onClick={() => handleRemove(index)}>
<RemoveIcon fontSize="inherit" />
</IconButton> : ''}
</div>
<div className={classes.buttonContainer}>
{index + 1 === normalizedValues.length && value.value
? <IconButton className={classes.button} size="tiny" onClick={handleAdd}>
? <IconButton className={classes.button} size="medium" onClick={handleAdd}>
<AddIcon fontSize="inherit" />
</IconButton> : ''}
</div>
......@@ -551,13 +551,13 @@ class InviteUserDialogUnstyled extends React.Component {
static styles = theme => ({
button: {
marginLeft: theme.spacing.unit
marginLeft: theme.spacing(1)
},
dialog: {
width: '100%'
},
submitWrapper: {
margin: theme.spacing.unit,
margin: theme.spacing(1),
position: 'relative'
},
submitProgress: {
......@@ -689,15 +689,15 @@ class UserMetadataFieldUnstyled extends React.PureComponent {
root: {
flexWrap: 'nowrap',
alignItems: 'flex-start',
marginTop: theme.spacing.unit * 2
marginTop: theme.spacing(2)
},
container: {
width: '100%'
},
checkbox: {
marginLeft: -theme.spacing.unit * 2,
marginRight: theme.spacing.unit,
marginTop: theme.spacing.unit
marginLeft: -theme.spacing(1) * 2,
marginRight: theme.spacing(1),
marginTop: theme.spacing(1)
}
})
......@@ -739,10 +739,10 @@ class EditUserMetadataDialogUnstyled extends React.Component {
width: '100%'
},
error: {
marginTop: theme.spacing.unit * 2
marginTop: theme.spacing(2)
},
submitWrapper: {
margin: theme.spacing.unit,
margin: theme.spacing(1),
position: 'relative'
},
submitProgress: {
......@@ -753,7 +753,7 @@ class EditUserMetadataDialogUnstyled extends React.Component {
marginLeft: -12
},
liftEmbargoLabel: {
marginTop: theme.spacing.unit * 3
marginTop: theme.spacing(3)
}
})
......
......@@ -11,7 +11,7 @@ class FAQ extends React.Component {
static styles = theme => ({
root: {
padding: theme.spacing.unit * 3
padding: theme.spacing(3)
}
})
......
......@@ -21,7 +21,7 @@ class LoginLogout extends React.Component {
display: 'flex',
alignItems: 'center',
'& p': {
marginRight: theme.spacing.unit * 2
marginRight: theme.spacing(2)
}
},
link: {
......
......@@ -11,7 +11,7 @@ import extend from '@babel/runtime/helpers/extends'
*/
var styles = theme => {
return ({
return {
root: {
fontFamily: theme.typography.fontFamily,
fontSize: 16,
......@@ -70,19 +70,19 @@ var styles = theme => {
}),
'& p, & ul, & ol': {
lineHeight: theme.typography.lineHeight,
marginBottom: theme.spacing.unit
marginBottom: theme.spacing(1)
},
'& ul': {
paddingLeft: 0,
'& li': {
listStyleType: 'none',
fontSize: 'inherit',
paddingLeft: theme.spacing.unit * 4,
paddingLeft: theme.spacing(4),
'&:before': {
content: '\'\'',
fontSize: 'x-large',
marginLeft: -theme.spacing.unit * 4,
paddingRight: theme.spacing.unit * 4 - 14
marginLeft: -theme.spacing(1) * 4,
paddingRight: theme.spacing(4) - 14
}
}
},
......@@ -203,7 +203,7 @@ var styles = theme => {
maxWidth: '100%'
}
}
})
};
}
function Markdown(props) {
......
......@@ -52,14 +52,14 @@ class Quantity extends React.Component {
display: 'flex',
flexDirection: 'row',
'& > :not(:first-child)': {
marginLeft: theme.spacing.unit * 3
marginLeft: theme.spacing(3)
}
},
column: {
display: 'flex',
flexDirection: 'column',
'& > :not(:first-child)': {
marginTop: theme.spacing.unit * 1
marginTop: theme.spacing(1)
}
},
label: {
......
......@@ -658,9 +658,9 @@ class LoginRequiredUnstyled extends React.Component {
root: {
display: 'flex',
alignItems: 'center',
padding: theme.spacing.unit * 2,
padding: theme.spacing(2),
'& p': {
marginRight: theme.spacing.unit * 2
marginRight: theme.spacing(2)
}
}
})
......
......@@ -8,7 +8,7 @@ import { matchPath } from 'react-router'
class ResolveDOI extends React.Component {
static styles = theme => ({
root: {
padding: theme.spacing.unit * 3
padding: theme.spacing(3)
}
})
......
......@@ -26,7 +26,7 @@ export function DFTMethodVisualizations(props) {
}
return (
<Grid container spacing={24}>
<Grid container spacing={2}>
<Grid item xs={8}>
<Quantity quantity="dft.code_name" title="Code" scale={0.25} metric={usedMetric} sort columns={2} />
</Grid>
......@@ -65,7 +65,7 @@ export function DFTSystemVisualizations(props) {
}
return (
<Grid container spacing={24}>
<Grid container spacing={2}>
<Grid item xs={4}>
<Quantity quantity="dft.compound_type" title="Compound type" scale={1} metric={usedMetric} sort />
</Grid>
......@@ -165,7 +165,7 @@ export function DFTPropertyVisualizations(props) {
}
return (
<Grid container spacing={24}>
<Grid container spacing={2}>
<Grid item xs={4}>
<Quantity quantity="dft.searchable_quantities" data={data('energy_quantities')} title="Energy" scale={1} metric={usedMetric} sort tooltips />
<Quantity quantity="dft.searchable_quantities" data={data('electronic_quantities')} title="Electronic" scale={1} metric={usedMetric} sort tooltips />
......
......@@ -14,7 +14,7 @@ class EMSEntryCards extends React.Component {
static styles = theme => ({
root: {},
description: {
marginBottom: theme.spacing.unit * 3
marginBottom: theme.spacing(3)
}
})
......
......@@ -9,7 +9,7 @@ export default function EMSVisualizations(props) {
setStatistics(['ems.method', 'ems.probing_method', 'ems.sample_microstructure', 'ems.sample_constituents'])
}, [])
return (
<Grid container spacing={24}>
<Grid container spacing={2}>
<Grid item xs={6}>
<Quantity quantity="ems.method" title="Method" scale={1} metric={usedMetric} />
<Quantity quantity="ems.probing_method" title="Probing" scale={1} metric={usedMetric} />
......
......@@ -32,7 +32,7 @@ class MetainfoDialogUnstyled extends React.PureComponent {
static styles = theme => ({
root: {},
metaInfoDescription: {
margin: `${theme.spacing.unit}px 0`
margin: `${theme.spacing(1)}px 0`
}
})
......@@ -87,11 +87,11 @@ class ArchiveEntryView extends React.Component {
static styles = theme => ({
root: {
paddingTop: theme.spacing.unit * 2,
paddingBottom: theme.spacing.unit * 2
paddingTop: theme.spacing(2),
paddingBottom: theme.spacing(2)
},
error: {
marginTop: theme.spacing.unit * 2
marginTop: theme.spacing(2)
},
downloadFab: {
zIndex: 1,
......
......@@ -67,10 +67,10 @@ class ArchiveLogView extends React.Component {
static styles = theme => ({
root: {
marginTop: theme.spacing.unit * 2
marginTop: theme.spacing(2)
},
moreLogs: {
marginTop: theme.spacing.unit * 2
marginTop: theme.spacing(2)
},
downloadFab: {
zIndex: 1,
......
......@@ -27,7 +27,7 @@ class EntryPage extends React.Component {
root: {
},
content: {
padding: `0 ${theme.spacing.unit * 3}px`,
padding: `0 ${theme.spacing(3)}px`,
maxWidth: 1024,
margin: 'auto'
}
......
......@@ -9,7 +9,7 @@ import qs from 'qs'
class EntryQuery extends React.Component {
static styles = theme => ({