shaba/one
1
0
Fork 0
mirror of https://github.com/OpenNebula/one.git synced 2025-03-21 14:50:08 +03:00
Code Releases Wiki Activity

F #5422: Bump material to 5v (#1507)

Browse Source
This commit is contained in:
Sergio Betanzos 2021-10-07 12:56:10 +02:00 committed by GitHub
parent 2436bbbde3
commit 0620c79d63
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
238 changed files with 2764 additions and 1756 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1664
src/fireedge/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

18
src/fireedge/package.json
View File

@ -61,13 +61,17 @@
"@babel/plugin-proposal-optional-chaining": "7.12.13",
"@babel/preset-env": "7.12.13",
"@babel/preset-react": "7.12.13",
"@emotion/react": "11.4.1",
"@emotion/styled": "11.3.0",
"@hookform/resolvers": "1.3.7",
"@loadable/babel-plugin": "5.13.2",
"@loadable/component": "5.15.0",
"@loadable/server": "5.15.1",
"@loadable/webpack-plugin": "5.15.1",
"@material-ui/core": "4.12.3",
"@material-ui/lab": "4.0.0-alpha.60",
"@mui/lab": "5.0.0-alpha.49",
"@mui/material": "5.0.2",
"@mui/styles": "5.0.1",
"@mui/system": "5.0.2",
"@reduxjs/toolkit": "1.5.1",
"atob": "2.1.2",
"axios": "0.21.1",
@ -92,17 +96,17 @@
"http": "0.0.1-security",
"http-proxy-middleware": "1.0.5",
"https": "1.0.0",
"iconoir-react": "1.1.0",
"iconoir-react": "2.1.0",
"immutable": "4.0.0-rc.12",
"intersection-observer": "0.11.0",
"jsonschema": "1.2.7",
"jsonwebtoken": "8.5.1",
"jwt-simple": "0.5.6",
"lockfile": "1.0.4",
"luxon": "1.25.0",
"luxon": "1.28.0",
"marked": "2.0.0",
"morgan": "1.10.0",
"notistack": "1.0.10",
"notistack": "2.0.2",
"opennebula-guacamole": "1.0.0",
"path": "0.12.7",
"process": "0.11.10",
@ -118,8 +122,8 @@
"react-minimal-pie-chart": "8.2.0",
"react-opennebula-ace": "1.0.1",
"react-redux": "7.2.4",
"react-router": "5.2.0",
"react-router-dom": "5.2.0",
"react-router": "5.2.1",
"react-router-dom": "5.3.0",
"react-table": "7.7.0",
"react-transition-group": "4.4.1",
"react-virtual": "2.7.1",

39
src/fireedge/src/client/apps/provision/theme.js
View File

@ -13,24 +13,11 @@
* See the License for the specific language governing permissions and *
* limitations under the License. *
* ------------------------------------------------------------------------- */
import Color from 'client/constants/color'
import { SCHEMES } from 'client/constants'
import { ThemeOptions } from '@mui/material'
/**
* @param {SCHEMES} scheme - Scheme type
* @returns {object} Provision theme
*/
const theme = (scheme = SCHEMES.DARK) => ({
/** @type {ThemeOptions} Provision theme */
export default {
palette: {
type: scheme,
common: {
black: '#000000',
white: '#ffffff'
},
background: {
paper: scheme === SCHEMES.DARK ? '#2a2d3d' : '#ffffff',
default: scheme === SCHEMES.DARK ? '#222431' : '#f2f4f8'
},
primary: {
light: '#2a2d3d',
main: '#222431',
@ -38,13 +25,19 @@ const theme = (scheme = SCHEMES.DARK) => ({
contrastText: '#ffffff'
},
secondary: {
light: '#fb8554',
main: '#fa6c43',
100: '#ffeae4',
200: '#ffd6c8',
300: '#ffc1ad',
400: '#ffac91',
500: '#fe9876',
600: '#fe835a',
700: '#fe6f3f',
800: '#fe5a23',
900: '#e74a15',
light: '#ffd6c8',
main: '#fe835a',
dark: '#fe5a23',
contrastText: '#ffffff'
},
...Color
}
}
})
export default theme
}

2
src/fireedge/src/client/apps/sunstone/routesFlow.js
View File

@ -15,7 +15,7 @@
* ------------------------------------------------------------------------- */
import {
List as TemplatesIcons,
Cell4x4 as InstancesIcons
Cell4X4 as InstancesIcons
} from 'iconoir-react'
import loadable from '@loadable/component'

2
src/fireedge/src/client/apps/sunstone/routesOne.js
View File

@ -14,7 +14,7 @@
* limitations under the License. *
* ------------------------------------------------------------------------- */
import {
Cell4x4 as InstancesIcons,
Cell4X4 as InstancesIcons,
ModernTv as VmsIcons,
Shuffle as VRoutersIcons,

41
src/fireedge/src/client/apps/sunstone/theme.js
View File

@ -13,24 +13,11 @@
* See the License for the specific language governing permissions and *
* limitations under the License. *
* ------------------------------------------------------------------------- */
import Color from 'client/constants/color'
import { SCHEMES } from 'client/constants'
import { ThemeOptions } from '@mui/material'
/**
* @param {SCHEMES} scheme - Scheme type
* @returns {object} Provision theme
*/
const theme = (scheme = SCHEMES.DARK) => ({
/** @type {ThemeOptions} Sunstone theme */
export default {
palette: {
type: scheme,
common: {
black: '#000000',
white: '#ffffff'
},
background: {
paper: scheme === SCHEMES.DARK ? '#2a2d3d' : '#ffffff',
default: scheme === SCHEMES.DARK ? '#222431' : '#f2f4f8'
},
primary: {
light: '#2a2d3d',
main: '#222431',
@ -38,13 +25,19 @@ const theme = (scheme = SCHEMES.DARK) => ({
contrastText: '#ffffff'
},
secondary: {
light: 'rgba(191, 230, 242, 1)',
main: 'rgba(64, 179, 217, 1)',
dark: 'rgba(0, 152, 195, 1)',
100: '#dff2f8',
200: '#bfe6f0',
300: '#9fd9e9',
400: '#80cce1',
500: '#60bfda',
600: '#40b3da',
700: '#20a6cb',
800: '#0099c3',
900: '#0284a7',
light: '#bfe6f0',
main: '#40b3da',
dark: '#0099c3',
contrastText: '#fff'
},
...Color
}
}
})
export default theme
}

3
src/fireedge/src/client/components/Alerts/Error.js
View File

@ -16,8 +16,7 @@
/* eslint-disable jsdoc/require-jsdoc */
import PropTypes from 'prop-types'
import { Box } from '@material-ui/core'
import { Alert } from '@material-ui/lab'
import { Box, Alert } from '@mui/material'
import { Tr } from 'client/components/HOC'
const AlertError = ({ children, ...props }) => (

3
src/fireedge/src/client/components/AutoScrollBox/index.js
View File

@ -16,7 +16,8 @@
import { memo, useEffect, useRef, useState } from 'react'
import PropTypes from 'prop-types'
import { makeStyles, Chip, Slide } from '@material-ui/core'
import { Chip, Slide } from '@mui/material'
import makeStyles from '@mui/styles/makeStyles'
import { Download as GoToBottomIcon } from 'iconoir-react'
const useStyles = makeStyles(theme => ({

10
src/fireedge/src/client/components/Cards/ApplicationCard.js
View File

@ -16,14 +16,8 @@
import { memo } from 'react'
import PropTypes from 'prop-types'
import {
makeStyles,
Box,
Button,
CardContent,
CardActions,
Chip
} from '@material-ui/core'
import { Box, Button, CardContent, CardActions, Chip } from '@mui/material'
import makeStyles from '@mui/styles/makeStyles'
import { Page as FileIcon } from 'iconoir-react'
import SelectCard from 'client/components/Cards/SelectCard'

2
src/fireedge/src/client/components/Cards/ApplicationNetworkCard.js
View File

@ -16,7 +16,7 @@
import { memo } from 'react'
import PropTypes from 'prop-types'
import { Button, CardActions } from '@material-ui/core'
import { Button, CardActions } from '@mui/material'
import SelectCard from 'client/components/Cards/SelectCard'
import { Tr } from 'client/components/HOC'

10
src/fireedge/src/client/components/Cards/ApplicationTemplateCard.js
View File

@ -16,14 +16,8 @@
import { memo } from 'react'
import PropTypes from 'prop-types'
import {
makeStyles,
Box,
Badge,
Button,
CardContent,
CardActions
} from '@material-ui/core'
import { Box, Badge, Button, CardContent, CardActions } from '@mui/material'
import makeStyles from '@mui/styles/makeStyles'
import {
Page as FileIcon,
HardDrive as HostIcon,

3
src/fireedge/src/client/components/Cards/ClusterCard.js
View File

@ -16,7 +16,8 @@
import { memo } from 'react'
import PropTypes from 'prop-types'
import { makeStyles, Badge, Box, CardContent } from '@material-ui/core'
import { Badge, Box, CardContent } from '@mui/material'
import makeStyles from '@mui/styles/makeStyles'
import {
Server as ClusterIcon,
HardDrive as HostIcon,

3
src/fireedge/src/client/components/Cards/DatastoreCard.js
View File

@ -16,7 +16,8 @@
import { memo } from 'react'
import PropTypes from 'prop-types'
import { makeStyles, Typography } from '@material-ui/core'
import { Typography } from '@mui/material'
import makeStyles from '@mui/styles/makeStyles'
import { Folder as DatastoreIcon } from 'iconoir-react'
import SelectCard, { Action } from 'client/components/Cards/SelectCard'

3
src/fireedge/src/client/components/Cards/EmptyCard.js
View File

@ -16,7 +16,8 @@
import { memo } from 'react'
import PropTypes from 'prop-types'
import { Card, CardHeader, Fade, makeStyles } from '@material-ui/core'
import { Card, CardHeader, Fade } from '@mui/material'
import makeStyles from '@mui/styles/makeStyles'
import { Tr } from 'client/components/HOC'
import { T } from 'client/constants'

3
src/fireedge/src/client/components/Cards/HostCard.js
View File

@ -16,7 +16,8 @@
import { memo } from 'react'
import PropTypes from 'prop-types'
import { makeStyles, Typography } from '@material-ui/core'
import { Typography } from '@mui/material'
import makeStyles from '@mui/styles/makeStyles'
import { HardDrive as HostIcon } from 'iconoir-react'
import SelectCard, { Action } from 'client/components/Cards/SelectCard'

3
src/fireedge/src/client/components/Cards/PolicyCard.js
View File

@ -16,7 +16,8 @@
import { memo } from 'react'
import PropTypes from 'prop-types'
import { makeStyles, Card, CardContent, Button, CardActions } from '@material-ui/core'
import { Card, CardContent, Button, CardActions } from '@mui/material'
import makeStyles from '@mui/styles/makeStyles'
import FormWithSchema from 'client/components/Forms/FormWithSchema'
import { Tr } from 'client/components/HOC'

16
src/fireedge/src/client/components/Cards/SelectCard/SelectCard.js
View File

@ -18,9 +18,13 @@ import PropTypes from 'prop-types'
import clsx from 'clsx'
import {
Card, CardActionArea, CardHeader, CardActions, CardMedia
} from '@material-ui/core'
import { Skeleton } from '@material-ui/lab'
Card,
CardActionArea,
CardHeader,
CardActions,
CardMedia,
Skeleton
} from '@mui/material'
import useNearScreen from 'client/hooks/useNearScreen'
import { ConditionalWrap } from 'client/components/HOC'
@ -97,7 +101,7 @@ const SelectCard = memo(({
noWrap: true,
className: classes.header,
title: typeof title === 'string' ? title : undefined,
...(dataCy) && { 'data-cy': `${dataCy}-card-title` }
...(dataCy && { 'data-cy': `${dataCy}-card-title` })
}}
subheader={subheader}
subheaderTypographyProps={{
@ -105,7 +109,7 @@ const SelectCard = memo(({
noWrap: true,
className: classes.subheader,
title: typeof subheader === 'string' ? subheader : undefined,
...(dataCy) && { 'data-cy': `${dataCy}-card-subheader` }
...(dataCy && { 'data-cy': `${dataCy}-card-subheader` })
}}
{...cardHeaderProps}
/>
@ -143,7 +147,7 @@ const SelectCard = memo(({
</Card>
) : (
<Skeleton
variant="rect"
variant="rectangular"
width="100%"
height={skeletonHeight}
/>

4
src/fireedge/src/client/components/Cards/SelectCard/styles.js
View File

@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and *
* limitations under the License. *
* ------------------------------------------------------------------------- */
import { makeStyles } from '@material-ui/core'
import makeStyles from '@mui/styles/makeStyles'
import { SCHEMES } from 'client/constants'
@ -64,7 +64,7 @@ const styles = makeStyles(theme => ({
filter: ({ isSelected, disableFilterImage }) =>
disableFilterImage
? 'none'
: (theme.palette.type === SCHEMES.DARK || isSelected)
: (theme.palette.mode === SCHEMES.DARK || isSelected)
? 'contrast(0) brightness(2)'
: 'contrast(0) brightness(0.8)'
},

2
src/fireedge/src/client/components/Cards/TierCard.js
View File

@ -16,7 +16,7 @@
import { memo } from 'react'
import PropTypes from 'prop-types'
import { Button, CardActions, Badge } from '@material-ui/core'
import { Button, CardActions, Badge } from '@mui/material'
import { AppleImac2021 as TierIcon } from 'iconoir-react'
import SelectCard from 'client/components/Cards/SelectCard'

15
src/fireedge/src/client/components/Cards/WavesCard.js
View File

@ -17,14 +17,15 @@ import { memo } from 'react'
import PropTypes from 'prop-types'
import clsx from 'clsx'
import { Paper, Typography, makeStyles, lighten, darken } from '@material-ui/core'
import { Paper, Typography, lighten, darken } from '@mui/material'
import makeStyles from '@mui/styles/makeStyles'
import { addOpacityToColor } from 'client/utils'
import { SCHEMES } from 'client/constants'
const useStyles = makeStyles(theme => {
const getBackgroundColor = theme.palette.type === SCHEMES.DARK ? darken : lighten
const getContrastBackgroundColor = theme.palette.type === SCHEMES.LIGHT ? darken : lighten
const getBackgroundColor = theme.palette.mode === SCHEMES.DARK ? darken : lighten
const getContrastBackgroundColor = theme.palette.mode === SCHEMES.LIGHT ? darken : lighten
return {
root: {
@ -33,8 +34,8 @@ const useStyles = makeStyles(theme => {
overflow: 'hidden',
backgroundColor: ({ bgColor }) => getBackgroundColor(bgColor, 0.3),
[theme.breakpoints.only('xs')]: {
display: 'inline-flex',
alignItem: 'baseline',
display: 'flex',
alignItems: 'baseline',
gap: '1em'
}
},
@ -81,8 +82,8 @@ const WavesCard = memo(({ text, value, bgColor, icon: Icon }) => {
return (
<Paper className={classes.root}>
<Typography variant='h6'>{text}</Typography>
<Typography variant='h4'>{value}</Typography>
<Typography variant='h6' zIndex={2}>{text}</Typography>
<Typography variant='h4' zIndex={2}>{value}</Typography>
<span className={clsx(classes.wave, classes.wave1)} />
<span className={clsx(classes.wave, classes.wave2)} />
{Icon && (

2
src/fireedge/src/client/components/Charts/CircleChart.js
View File

@ -16,7 +16,7 @@
import { memo, useState, useEffect, JSXElementConstructor } from 'react'
import PropTypes from 'prop-types'
import { Box, CircularProgress, Typography } from '@material-ui/core'
import { Box, CircularProgress, Typography } from '@mui/material'
import NumberEasing from 'client/components/NumberEasing'
/**

4
src/fireedge/src/client/components/Charts/SingleBar.js
View File

@ -16,7 +16,9 @@
import { JSXElementConstructor } from 'react'
import PropTypes from 'prop-types'
import { makeStyles, Tooltip } from '@material-ui/core'
import { Tooltip } from '@mui/material'
import makeStyles from '@mui/styles/makeStyles'
import { TypographyWithPoint } from 'client/components/Typography'
import { addOpacityToColor } from 'client/utils'

4
src/fireedge/src/client/components/DebugLog/filters.js
View File

@ -16,8 +16,8 @@
import { memo } from 'react'
import PropTypes from 'prop-types'
import { makeStyles, Paper, Divider } from '@material-ui/core'
import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab'
import { Paper, Divider, ToggleButton, ToggleButtonGroup } from '@mui/material'
import makeStyles from '@mui/styles/makeStyles'
import { DEBUG_LEVEL } from 'client/constants'

3
src/fireedge/src/client/components/DebugLog/index.js
View File

@ -16,7 +16,8 @@
import { useEffect, useState, memo } from 'react'
import PropTypes from 'prop-types'
import { makeStyles } from '@material-ui/core'
import makeStyles from '@mui/styles/makeStyles'
import AutoScrollBox from 'client/components/AutoScrollBox'
import MessageList from 'client/components/DebugLog/messagelist'
import Filters from 'client/components/DebugLog/filters'

6
src/fireedge/src/client/components/DebugLog/message.js
View File

@ -17,7 +17,7 @@ import { memo, useState } from 'react'
import PropTypes from 'prop-types'
import clsx from 'clsx'
import { makeStyles } from '@material-ui/core'
import makeStyles from '@mui/styles/makeStyles'
import { NavArrowRight as CollapseIcon, NavArrowDown as ExpandMoreIcon } from 'iconoir-react'
import { DEBUG_LEVEL } from 'client/constants'
@ -71,9 +71,9 @@ const Message = memo(({ timestamp, severity, message }) => {
>
<span>
{isMoreThanMaxChars && (isCollapsed ? (
<CollapseIcon size={18} />
<CollapseIcon />
) : (
<ExpandMoreIcon size={18} />
<ExpandMoreIcon />
))}
</span>
<div>{timestamp}</div>

57
src/fireedge/src/client/components/Dialogs/DialogConfirmation.js
View File

@ -15,7 +15,6 @@
* ------------------------------------------------------------------------- */
import { memo, JSXElementConstructor } from 'react'
import PropTypes from 'prop-types'
import clsx from 'clsx'
import {
useMediaQuery,
@ -24,9 +23,9 @@ import {
DialogContent,
DialogActions,
Typography,
IconButton,
makeStyles
} from '@material-ui/core'
IconButton
} from '@mui/material'
import { Box } from '@mui/system'
import { Cancel as CancelIcon } from 'iconoir-react'
import { Action } from 'client/components/Cards/SelectCard'
@ -48,24 +47,6 @@ import { T } from 'client/constants'
* @property {JSXElementConstructor} [children] - Fix minimum height
*/
const useStyles = makeStyles({
title: {
display: 'flex',
flexWrap: 'nowrap',
alignItems: 'center',
gap: '2em'
},
titleText: {
flexGrow: 1
},
fixedWidth: {
minWidth: '80vw'
},
fixedHeight: {
minHeight: '80vh'
}
})
/**
* @param {DialogProps} props - Dialog properties
* @returns {JSXElementConstructor} - Dialog with confirmation basic buttons
@ -85,26 +66,34 @@ const DialogConfirmation = memo(
fixedHeight,
children
}) => {
const classes = useStyles()
const isMobile = useMediaQuery(theme => theme.breakpoints.only('xs'))
return (
<Dialog
fullScreen={isMobile}
onEntering={handleEntering}
classes={{
paper: clsx({
[classes.fixedWidth]: fixedWidth,
[classes.fixedHeight]: fixedHeight
})
PaperProps={{
elevation: 0,
sx: {
minWidth: fixedWidth ? '80vw' : 'auto',
minHeight: fixedHeight ? '80vh' : 'auto'
}
}}
open={open}
onClose={handleCancel}
maxWidth='lg'
scroll='paper'
>
<DialogTitle disableTypography className={classes.title}>
<div className={classes.titleText}>
TransitionProps={{
onEntering: handleEntering
}}>
<DialogTitle
sx={{
display: 'flex',
flexWrap: 'nowrap',
alignItems: 'center',
gap: '2em'
}}
>
<Box flexGrow={1}>
{title && (
<Typography variant='h6'>
{typeof title === 'string' ? Tr(title) : title}
@ -115,14 +104,14 @@ const DialogConfirmation = memo(
{typeof subheader === 'string' ? Tr(subheader) : subheader}
</Typography>
)}
</div>
</Box>
{handleCancel && (
<IconButton
aria-label='close'
onClick={handleCancel}
data-cy='dg-cancel-button'
{...cancelButtonProps}
>
size="large">
<CancelIcon />
</IconButton>
)}

2
src/fireedge/src/client/components/Dialogs/DialogForm.js
View File

@ -17,7 +17,7 @@
import PropTypes from 'prop-types'
import clsx from 'clsx'
import { makeStyles } from '@material-ui/core'
import makeStyles from '@mui/styles/makeStyles'
import { useForm, FormProvider } from 'react-hook-form'
import { yupResolver } from '@hookform/resolvers/yup'

5
src/fireedge/src/client/components/Dialogs/DialogRequest.js
View File

@ -18,7 +18,8 @@ import { useEffect } from 'react'
import PropTypes from 'prop-types'
import clsx from 'clsx'
import { makeStyles, Backdrop, CircularProgress } from '@material-ui/core'
import { Backdrop, CircularProgress } from '@mui/material'
import makeStyles from '@mui/styles/makeStyles'
import { useFetch } from 'client/hooks'
import { DialogConfirmation } from 'client/components/Dialogs'
@ -47,7 +48,7 @@ const DialogRequest = ({ withTabs, request, dialogProps, children }) => {
if (!data || loading) {
return (
<Backdrop open className={classes.backdrop}>
<CircularProgress color="inherit" />
<CircularProgress color='inherit' />
</Backdrop>
)
}

9
src/fireedge/src/client/components/Fab/index.js
View File

@ -17,7 +17,8 @@ import { memo } from 'react'
import PropTypes from 'prop-types'
import clsx from 'clsx'
import { makeStyles, Fab } from '@material-ui/core'
import { Fab } from '@mui/material'
import makeStyles from '@mui/styles/makeStyles'
const useStyles = makeStyles(theme => ({
root: {
@ -44,10 +45,10 @@ const FloatingActionButton = memo(
FloatingActionButton.propTypes = {
icon: PropTypes.node.isRequired,
className: PropTypes.string,
color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary']),
color: PropTypes.oneOf(['inherit', 'primary', 'secondary']),
disabled: PropTypes.bool,
size: PropTypes.oneOf(['large', 'medium', 'small']),
variant: PropTypes.oneOf(['extended', 'round'])
variant: PropTypes.oneOf(['extended', 'circular'])
}
FloatingActionButton.defaultProps = {
@ -56,7 +57,7 @@ FloatingActionButton.defaultProps = {
color: 'primary',
disabled: false,
size: 'large',
variant: 'round'
variant: 'circular'
}
FloatingActionButton.displayName = 'FloatingActionButton'

2
src/fireedge/src/client/components/Footer/index.js
View File

@ -15,7 +15,7 @@
* ------------------------------------------------------------------------- */
import { memo } from 'react'
import { Box, Link, Typography } from '@material-ui/core'
import { Box, Link, Typography } from '@mui/material'
import footerStyles from 'client/components/Footer/styles'
import { BY } from 'client/constants'

2
src/fireedge/src/client/components/Footer/styles.js
View File

@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and *
* limitations under the License. *
* ------------------------------------------------------------------------- */
import { makeStyles } from '@material-ui/core'
import makeStyles from '@mui/styles/makeStyles'
export default makeStyles(theme => ({
footer: {

12
src/fireedge/src/client/components/FormControl/AutocompleteController.js
View File

@ -16,8 +16,7 @@
import { memo } from 'react'
import PropTypes from 'prop-types'
import { TextField, Chip } from '@material-ui/core'
import { Autocomplete } from '@material-ui/lab'
import { TextField, Chip, Autocomplete } from '@mui/material'
import { Controller } from 'react-hook-form'
import { ErrorHelper } from 'client/components/FormControl'
@ -53,23 +52,20 @@ const AutocompleteController = memo(
tags.map((tag, index) => (
<Chip
key={tag}
size="small"
variant="outlined"
size='small'
variant='outlined'
label={tag}
{...getTagProps({ index })}
/>
))
}
getOptionLabel={option => option.text}
getOptionSelected={option => option.value === renderValue}
isOptionEqualToValue={option => option.value === renderValue}
renderInput={({ inputProps, ...inputParams }) => (
<TextField
color='secondary'
label={Tr(label)}
inputProps={{ ...inputProps, 'data-cy': cy }}
error={Boolean(error)}
variant='outlined'
margin='dense'
helperText={
Boolean(error) && <ErrorHelper label={error?.message} />
}

2
src/fireedge/src/client/components/FormControl/CheckboxController.js
View File

@ -16,7 +16,7 @@
import { memo } from 'react'
import PropTypes from 'prop-types'
import { FormControl, FormControlLabel, Checkbox } from '@material-ui/core'
import { FormControl, FormControlLabel, Checkbox } from '@mui/material'
import { Controller } from 'react-hook-form'
import { ErrorHelper, Tooltip } from 'client/components/FormControl'

6
src/fireedge/src/client/components/FormControl/ErrorHelper.js
View File

@ -16,8 +16,10 @@
import { memo } from 'react'
import { string } from 'prop-types'
import { Box, makeStyles, Typography } from '@material-ui/core'
import { Box, Typography } from '@mui/material'
import makeStyles from '@mui/styles/makeStyles'
import { WarningCircledOutline as WarningIcon } from 'iconoir-react'
import { Tr } from 'client/components/HOC'
const useStyles = makeStyles(theme => ({
@ -38,7 +40,7 @@ const ErrorHelper = memo(({ label, ...rest }) => {
return (
<Box component='span' className={classes.root} {...rest}>
<WarningIcon size={18} />
<WarningIcon />
<Typography className={classes.text} component='span' data-cy='error-text'>
{Tr(label)}
</Typography>

4
src/fireedge/src/client/components/FormControl/FileController.js
View File

@ -17,7 +17,8 @@ import { memo, useState, useRef, useEffect, ChangeEvent } from 'react'
import PropTypes from 'prop-types'
import clsx from 'clsx'
import { makeStyles, FormControl, FormHelperText } from '@material-ui/core'
import { FormControl, FormHelperText } from '@mui/material'
import makeStyles from '@mui/styles/makeStyles'
import { Check as CheckIcon, Page as FileIcon } from 'iconoir-react'
import { Controller } from 'react-hook-form'
@ -110,7 +111,6 @@ const FileController = memo(
<Controller
render={() => (
<input
// {...register(name)}
className={classes.hide}
id={cy}
type='file'

8
src/fireedge/src/client/components/FormControl/PasswordController.js
View File

@ -16,7 +16,7 @@
import { memo, useState, useCallback } from 'react'
import PropTypes from 'prop-types'
import { InputAdornment, IconButton } from '@material-ui/core'
import { InputAdornment, IconButton } from '@mui/material'
import { EyeEmpty as Visibility, EyeOff as VisibilityOff } from 'iconoir-react'
import { TextController } from 'client/components/FormControl'
@ -34,11 +34,11 @@ const PasswordController = memo(({ fieldProps, ...props }) => {
type={showPassword ? 'text' : 'password'}
fieldProps={{
InputProps: {
endAdornment: <InputAdornment position="end">
endAdornment: <InputAdornment position='end'>
<IconButton
aria-label="toggle password visibility"
aria-label='toggle password visibility'
onClick={handleClickShowPassword}
>
size='large'>
{showPassword ? <Visibility /> : <VisibilityOff />}
</IconButton>
</InputAdornment>

5
src/fireedge/src/client/components/FormControl/SelectController.js
View File

@ -16,7 +16,7 @@
import { memo } from 'react'
import PropTypes from 'prop-types'
import { TextField } from '@material-ui/core'
import { TextField } from '@mui/material'
import { Controller } from 'react-hook-form'
import { ErrorHelper, Tooltip } from 'client/components/FormControl'
@ -48,11 +48,8 @@ const SelectController = memo(
}
: onChange
}
color='secondary'
select
fullWidth
variant='outlined'
margin='dense'
SelectProps={{ native: true, multiple }}
label={Tr(label)}
InputProps={{

9
src/fireedge/src/client/components/FormControl/SliderController.js
View File

@ -16,7 +16,7 @@
import { memo } from 'react'
import PropTypes from 'prop-types'
import { Typography, TextField, Slider, FormHelperText, Grid } from '@material-ui/core'
import { Typography, TextField, Slider, FormHelperText, Grid } from '@mui/material'
import { Controller } from 'react-hook-form'
import { ErrorHelper } from 'client/components/FormControl'
@ -30,13 +30,13 @@ const SliderController = memo(
</Typography>
<Controller
render={({ value, onChange, onBlur }) =>
<Grid container spacing={2} alignItems="center">
<Grid container spacing={2} alignItems='center'>
<Grid item xs>
<Slider
color='secondary'
value={typeof value === 'number' ? value : 0}
aria-labelledby={`slider-${name}`}
valueLabelDisplay="auto"
valueLabelDisplay='auto'
data-cy={`${cy}-slider`}
{...fieldProps}
onChange={(_, val) => onChange(val)}
@ -44,13 +44,10 @@ const SliderController = memo(
</Grid>
<Grid item>
<TextField
color='secondary'
fullWidth
value={value ?? ''}
error={Boolean(error)}
type='number'
variant='outlined'
margin='dense'
inputProps={{
'data-cy': `${cy}-input`,
'aria-labelledby': `slider-${name}`,

26
src/fireedge/src/client/components/FormControl/SubmitButton.js
View File

@ -17,14 +17,8 @@ import { forwardRef, memo } from 'react'
import PropTypes from 'prop-types'
import clsx from 'clsx'
import {
makeStyles,
CircularProgress,
Button,
IconButton,
Tooltip,
Typography
} from '@material-ui/core'
import { CircularProgress, Button, IconButton, Tooltip, Typography } from '@mui/material'
import makeStyles from '@mui/styles/makeStyles'
import { Tr, ConditionalWrap } from 'client/components/HOC'
import { T } from 'client/constants'
@ -42,15 +36,16 @@ const useStyles = makeStyles(theme => ({
}))
const ButtonComponent = forwardRef(
({ icon, endicon, children, size = 'small', ...props }, ref) =>
({ icon, endicon, children, size, variant = 'contained', ...props }, ref) =>
icon && !endicon ? (
<IconButton ref={ref} {...props}>{children}</IconButton>
<IconButton ref={ref} {...props}>
{children}
</IconButton>
) : (
<Button ref={ref}
type='submit'
endIcon={endicon}
variant='contained'
size={size}
variant={variant}
{...props}
>
{children}
@ -81,7 +76,7 @@ const TooltipComponent = ({ tooltip, tooltipProps, children }) => (
const SubmitButton = memo(
({ isSubmitting, disabled, label, icon, className, ...props }) => {
const classes = useStyles()
const progressSize = icon?.props?.size ?? 24
const progressSize = icon?.props?.size ?? 20
return (
<TooltipComponent {...props}>
@ -121,8 +116,9 @@ export const SubmitButtonPropTypes = {
isSubmitting: PropTypes.bool,
disabled: PropTypes.bool,
className: PropTypes.string,
color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary']),
size: PropTypes.oneOf(['large', 'medium', 'small'])
color: PropTypes.string,
size: PropTypes.string,
variant: PropTypes.string
}
TooltipComponent.propTypes = SubmitButtonPropTypes

2
src/fireedge/src/client/components/FormControl/SwitchController.js
View File

@ -16,7 +16,7 @@
import { memo } from 'react'
import PropTypes from 'prop-types'
import { FormControl, FormControlLabel, Switch } from '@material-ui/core'
import { FormControl, FormControlLabel, Switch } from '@mui/material'
import { Controller } from 'react-hook-form'
import { ErrorHelper, Tooltip } from 'client/components/FormControl'

5
src/fireedge/src/client/components/FormControl/TextController.js
View File

@ -16,7 +16,7 @@
import { memo } from 'react'
import PropTypes from 'prop-types'
import { TextField } from '@material-ui/core'
import { TextField } from '@mui/material'
import { Controller } from 'react-hook-form'
import { ErrorHelper, Tooltip } from 'client/components/FormControl'
@ -29,11 +29,8 @@ const TextController = memo(
<TextField
fullWidth
multiline={multiline}
color='secondary'
value={value ?? ''}
type={type}
variant='outlined'
margin='dense'
label={typeof label === 'string' ? Tr(label) : label}
InputProps={{
endAdornment: tooltip && <Tooltip title={tooltip} />

5
src/fireedge/src/client/components/FormControl/TimeController-TODO.js
View File

@ -17,7 +17,7 @@ import { memo, useState, useEffect } from 'react'
import PropTypes from 'prop-types'
import Flatpickr from 'react-flatpickr'
import { TextField } from '@material-ui/core'
import { TextField } from '@mui/material'
import { Controller } from 'react-hook-form'
import { Tr } from 'client/components/HOC'
@ -67,11 +67,8 @@ const TimeController = memo(
<TextField
{...props}
fullWidth
color='secondary'
defaultValue={defaultValue}
value={value}
variant='outlined'
margin='dense'
label={translated}
inputProps={{ 'data-cy': cy }}
inputRef={ref}

5
src/fireedge/src/client/components/FormControl/TimeController.js
View File

@ -16,7 +16,7 @@
import { memo } from 'react'
import PropTypes from 'prop-types'
import { TextField } from '@material-ui/core'
import { TextField } from '@mui/material'
import { Controller } from 'react-hook-form'
import { Tr } from 'client/components/HOC'
@ -29,10 +29,7 @@ const TimeController = memo(
<TextField
{...props}
fullWidth
color='secondary'
value={value}
variant='outlined'
margin='dense'
{...(label && { label: Tr(label) })}
type={type}
inputProps={{ 'data-cy': cy, ...fieldProps }}

4
src/fireedge/src/client/components/FormControl/Tooltip.js
View File

@ -17,7 +17,7 @@ import { memo } from 'react'
import PropTypes from 'prop-types'
import { QuestionMarkCircle } from 'iconoir-react'
import { InputAdornment, Typography, Tooltip } from '@material-ui/core'
import { InputAdornment, Typography, Tooltip } from '@mui/material'
const AdornmentWithTooltip = memo(({ title, position = 'end', children }) => (
<Tooltip
@ -30,7 +30,7 @@ const AdornmentWithTooltip = memo(({ title, position = 'end', children }) => (
}
>
<InputAdornment position={position} style={{ cursor: 'help' }}>
{children ?? <QuestionMarkCircle size={18} />}
{children ?? <QuestionMarkCircle />}
</InputAdornment>
</Tooltip>
), (prevProps, nextProps) => prevProps.title === nextProps.title)

9
src/fireedge/src/client/components/FormStepper/MobileStepper.js
View File

@ -16,12 +16,9 @@
/* eslint-disable jsdoc/require-jsdoc */
import PropTypes from 'prop-types'
import { Button, MobileStepper, Typography, Box } from '@material-ui/core'
import { makeStyles, alpha } from '@material-ui/core/styles'
import {
NavArrowLeft as PreviousIcon,
NavArrowRight as NextIcon
} from 'iconoir-react'
import { Button, MobileStepper, Typography, Box, alpha } from '@mui/material'
import makeStyles from '@mui/styles/makeStyles'
import { NavArrowLeft as PreviousIcon, NavArrowRight as NextIcon } from 'iconoir-react'
import { Tr } from 'client/components/HOC'
import { T } from 'client/constants'

17
src/fireedge/src/client/components/FormStepper/Skeleton.js
View File

@ -15,15 +15,14 @@
* ------------------------------------------------------------------------- */
import { memo, JSXElementConstructor } from 'react'
import { Skeleton } from '@material-ui/lab'
import { useMediaQuery, styled } from '@material-ui/core'
import { useMediaQuery, styled, Skeleton } from '@mui/material'
const ControlWrapper = styled('div')(({ theme }) => ({
marginBlock: '1em',
display: 'flex',
justifyContent: 'end',
gap: '1em',
[theme.breakpoints.down('sm')]: {
[theme.breakpoints.down('lg')]: {
justifyContent: 'space-between',
alignItems: 'center'
}
@ -35,17 +34,17 @@ const ControlWrapper = styled('div')(({ theme }) => ({
* @returns {JSXElementConstructor} Skeleton loader component
*/
const SkeletonStepsForm = memo(() => {
const isMobile = useMediaQuery(theme => theme.breakpoints.down('sm'))
const isMobile = useMediaQuery(theme => theme.breakpoints.down('lg'))
return (
<div>
<Skeleton variant='rect' height={120} width='100%' />
<Skeleton variant="rectangular" height={120} width='100%' />
<ControlWrapper>
<Skeleton variant='rect' height={35} width={95} />
{isMobile && <Skeleton variant='rect' height={8} width='100%' />}
<Skeleton variant='rect' height={35} width={95} />
<Skeleton variant="rectangular" height={35} width={95} />
{isMobile && <Skeleton variant="rectangular" height={8} width='100%' />}
<Skeleton variant="rectangular" height={35} width={95} />
</ControlWrapper>
<Skeleton variant='rect' height={200} width='100%' />
<Skeleton variant="rectangular" height={200} width='100%' />
</div>
)
})

183
src/fireedge/src/client/components/FormStepper/Stepper.js
View File

@ -16,45 +16,64 @@
/* eslint-disable jsdoc/require-jsdoc */
import PropTypes from 'prop-types'
import {
Button,
Stepper,
Step,
StepLabel,
Box,
Typography,
StepButton
} from '@material-ui/core'
import { makeStyles, alpha } from '@material-ui/core/styles'
import { alpha, Box, Button, Typography } from '@mui/material'
import Stepper from '@mui/material/Stepper'
import Step from '@mui/material/Step'
import StepLabel from '@mui/material/StepLabel'
import StepButton from '@mui/material/StepButton'
import StepIcon, { stepIconClasses } from '@mui/material/StepIcon'
import StepConnector, { stepConnectorClasses } from '@mui/material/StepConnector'
import { styled } from '@mui/styles'
import { SubmitButton } from 'client/components/FormControl'
import { Tr } from 'client/components/HOC'
import { T } from 'client/constants'
import { Tr, Translate } from 'client/components/HOC'
import { T, SCHEMES } from 'client/constants'
const useStyles = makeStyles(theme => ({
root: {
position: 'sticky',
top: -15,
minHeight: 100,
background: alpha(theme.palette.background.paper, 0.95),
zIndex: theme.zIndex.mobileStepper
const StepperStyled = styled(Stepper)(({ theme }) => ({
position: 'sticky',
top: -15,
minHeight: 100,
background: alpha(theme.palette.background.paper, 0.95),
zIndex: theme.zIndex.mobileStepper
}))
const ConnectorStyled = styled(StepConnector)(({ theme }) => ({
[`&.${stepConnectorClasses.alternativeLabel}`]: {
top: 10,
left: 'calc(-50% + 16px)',
right: 'calc(50% + 16px)'
},
icon: {
color: theme.palette.text.hint,
display: 'block',
'&$completed': {
color: theme.palette.secondary.main
},
'&$active': {
color: theme.palette.secondary.main
},
'&$error': {
color: theme.palette.error.main
[`&.${stepConnectorClasses.active}`]: {
[`& .${stepConnectorClasses.line}`]: {
borderColor: theme.palette.secondary[700]
}
},
completed: {},
active: {},
error: {}
[`&.${stepConnectorClasses.completed}`]: {
[`& .${stepConnectorClasses.line}`]: {
borderColor: theme.palette.secondary[700]
}
},
[`& .${stepConnectorClasses.line}`]: {
borderColor: theme.palette.mode === SCHEMES.DARK
? theme.palette.grey[600]
: theme.palette.grey[400],
borderTopWidth: 2,
borderRadius: 1
}
}))
const StepIconStyled = styled(StepIcon)(({ theme }) => ({
color: theme.palette.text.hint,
display: 'block',
[`&.${stepIconClasses.completed}`]: {
color: theme.palette.secondary[700]
},
[`&.${stepIconClasses.active}`]: {
color: theme.palette.secondary[700]
},
[`&.${stepIconClasses.error}`]: {
color: theme.palette.error.main
}
}))
const CustomStepper = ({
@ -67,62 +86,50 @@ const CustomStepper = ({
handleBack,
errors,
isSubmitting
}) => {
const classes = useStyles()
return (
<>
<Stepper nonLinear activeStep={activeStep} className={classes.root}>
{steps?.map(({ id, label }, stepIdx) => (
<Step key={id}>
<StepButton
onClick={() => handleStep(stepIdx)}
completed={activeStep > stepIdx}
disabled={activeStep + 1 < stepIdx}
optional={
<Typography variant='caption' color='error'>
{errors[id]?.message}
</Typography>
}
}) => (
<>
<StepperStyled nonLinear activeStep={activeStep} connector={<ConnectorStyled />}>
{steps?.map(({ id, label }, stepIdx) => (
<Step key={id} completed={activeStep > stepIdx}>
<StepButton
onClick={() => handleStep(stepIdx)}
disabled={activeStep + 1 < stepIdx}
optional={errors[id] && (
<Typography variant='caption' color='error'>
{errors[id]?.message}
</Typography>
)}
>
<StepLabel
StepIconComponent={StepIconStyled}
error={Boolean(errors[id]?.message)}
>
<StepLabel
StepIconProps={{
classes: {
root: classes.icon,
completed: classes.completed,
active: classes.active,
error: classes.error
}
}}
{...(Boolean(errors[id]?.message) && { error: true })}
>
{typeof label === 'string' ? Tr(label) : label}
</StepLabel>
</StepButton>
</Step>
))}
</Stepper>
<Box marginY={2} textAlign='end'>
<Button
data-cy='stepper-back-button'
disabled={disabledBack || isSubmitting}
onClick={handleBack}
size='small'
>
{Tr(T.Back)}
</Button>
<SubmitButton
color='secondary'
data-cy='stepper-next-button'
isSubmitting={isSubmitting}
label={activeStep === lastStep ? Tr(T.Finish) : Tr(T.Next)}
onClick={handleNext}
size='small'
/>
</Box>
</>
)
}
{typeof label === 'string' ? Tr(label) : label}
</StepLabel>
</StepButton>
</Step>
))}
</StepperStyled>
<Box marginY={2} textAlign='end'>
<Button
data-cy='stepper-back-button'
disabled={disabledBack || isSubmitting}
onClick={handleBack}
size='small'
>
<Translate word={T.Back} />
</Button>
<SubmitButton
color='secondary'
data-cy='stepper-next-button'
isSubmitting={isSubmitting}
onClick={handleNext}
size='small'
label={<Translate word={activeStep === lastStep ? T.Finish : T.Next} />}
/>
</Box>
</>
)
CustomStepper.propTypes = {
steps: PropTypes.arrayOf(

2
src/fireedge/src/client/components/FormStepper/index.js
View File

@ -18,7 +18,7 @@ import PropTypes from 'prop-types'
import { BaseSchema } from 'yup'
import { useFormContext } from 'react-hook-form'
import { useMediaQuery } from '@material-ui/core'
import { useMediaQuery } from '@mui/material'
import { useGeneral } from 'client/features/General'
import CustomMobileStepper from 'client/components/FormStepper/MobileStepper'

80
src/fireedge/src/client/components/Forms/ButtonToTriggerForm.js
View File

@ -17,15 +17,7 @@
import { useState, useMemo } from 'react'
import PropTypes from 'prop-types'
import {
ClickAwayListener,
Grow,
Paper,
Popper,
MenuItem,
MenuList,
ListItemIcon
} from '@material-ui/core'
import { Grow, Menu, MenuItem, Typography, ListItemIcon } from '@mui/material'
import { NavArrowDown } from 'iconoir-react'
import { useDialog } from 'client/hooks'
@ -39,10 +31,10 @@ const ButtonToTriggerForm = ({
buttonProps = {},
options = []
}) => {
const buttonId = buttonProps['data-cy'] ?? 'main-button-form'
const buttonId = buttonProps['data-cy'] ?? 'main-button'
const isGroupButton = options.length > 1
const [anchorEl, setAnchorEl] = useState(null)
const [anchorEl, setAnchorEl] = useState(() => null)
const open = Boolean(anchorEl)
const { display, show, hide, values: Form } = useDialog()
@ -65,14 +57,19 @@ const ButtonToTriggerForm = ({
handleClose()
}
const handleToggle = evt => setAnchorEl(prev => prev ? null : evt.currentTarget)
const handleToggle = evt => setAnchorEl(evt.currentTarget)
const handleClose = () => setAnchorEl(null)
return (
<>
<SubmitButton
id={buttonId}
aria-describedby={buttonId}
aria-controls={open ? `${buttonId}-button` : undefined}
aria-expanded={open ? 'true' : undefined}
aria-haspopup={isGroupButton ? 'true' : false}
disabled={!options.length}
disableElevation
endicon={isGroupButton ? <NavArrowDown /> : undefined}
onClick={evt => !isGroupButton
? openDialogForm(options[0])
@ -82,40 +79,37 @@ const ButtonToTriggerForm = ({
/>
{isGroupButton && (
<Popper
<Menu
id={`${buttonId}-menu`}
anchorEl={anchorEl}
disablePortal
id={buttonId}
open={open}
transition
style={{ zIndex: 2 }}
onClose={handleClose}
TransitionComponent={Grow}
sx={{ zIndex: 2 }}
MenuListProps={{
dense: true,
disablePadding: true
}}
>
{({ TransitionProps }) => (
<Grow {...TransitionProps} >
<Paper variant='outlined'>
<ClickAwayListener onClickAway={handleClose}>
<MenuList variant='menu' disablePadding dense>
{options.map(({ cy, disabled, icon: Icon, name, ...option }) => (
<MenuItem
key={name}
disabled={disabled}
data-cy={cy}
onClick={() => openDialogForm(option)}
>
{Icon && (
<ListItemIcon>
<Icon size={18} />
</ListItemIcon>
)}
<Translate word={name} />
</MenuItem>
))}
</MenuList>
</ClickAwayListener>
</Paper>
</Grow>
)}
</Popper>
{options.map(({ cy, disabled, icon: Icon, name, ...option }) => (
<MenuItem
key={name}
disableRipple
disabled={disabled}
data-cy={cy}
onClick={() => openDialogForm(option)}
>
{Icon && (
<ListItemIcon>
<Icon />
</ListItemIcon>
)}
<Typography variant='inherit' noWrap>
<Translate word={name} />
</Typography>
</MenuItem>
))}
</Menu>
)}
{display && (

2
src/fireedge/src/client/components/Forms/FormWithSchema.js
View File

@ -17,7 +17,7 @@
import { createElement, useMemo } from 'react'
import PropTypes from 'prop-types'
import { styled, Grid } from '@material-ui/core'
import { styled, Grid } from '@mui/material'
import { useFormContext } from 'react-hook-form'
import * as FC from 'client/components/FormControl'

19
src/fireedge/src/client/components/Forms/Provider/CreateForm/Steps/Template/index.js
View File

@ -16,7 +16,8 @@
/* eslint-disable jsdoc/require-jsdoc */
import { useState, useEffect, useMemo } from 'react'
import PropTypes from 'prop-types'
import { Divider, Select, Breadcrumbs, InputLabel, FormControl } from '@material-ui/core'
import { Divider, Select, Breadcrumbs, InputLabel, FormControl } from '@mui/material'
import { } from '@mui/material/Link'
import { NavArrowRight } from 'iconoir-react'
import Marked from 'marked'
@ -34,6 +35,15 @@ import { STEP_FORM_SCHEMA } from 'client/components/Forms/Provider/CreateForm/St
import { STEP_ID as CONFIGURATION_ID } from 'client/components/Forms/Provider/CreateForm/Steps/BasicConfiguration'
import { STEP_ID as CONNECTION_ID } from 'client/components/Forms/Provider/CreateForm/Steps/Connection'
const renderer = new Marked.Renderer()
renderer.link = (href, title, text) => `
<a class='description__link'
target='_blank' rel='nofollow' title='${title ?? ''}' href='${href}'>
${text}
</a>
`
export const STEP_ID = 'template'
const Content = ({ data, setFormData }) => {
@ -110,13 +120,6 @@ const Content = ({ data, setFormData }) => {
}
const RenderDescription = ({ description = '' }) => {
const renderer = new Marked.Renderer()
renderer.link = (href, title, text) => (
`<a class='MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorSecondary'
target='_blank' rel='nofollow' title='${title}' href='${href}'>${text}</a>`
)
const html = Marked(sanitize`${description}`, { renderer })
return <div dangerouslySetInnerHTML={{ __html: html }} />
}

2
src/fireedge/src/client/components/Forms/Provision/CreateForm/Steps/Inputs/index.js
View File

@ -17,7 +17,7 @@
import { useCallback, useEffect, useState } from 'react'
import { useFormContext } from 'react-hook-form'
import { LinearProgress } from '@material-ui/core'
import { LinearProgress } from '@mui/material'
import { useFetch } from 'client/hooks'
import { useGeneralApi } from 'client/features/General'

18
src/fireedge/src/client/components/Forms/Provision/CreateForm/Steps/Template/index.js
View File

@ -15,7 +15,7 @@
* ------------------------------------------------------------------------- */
/* eslint-disable jsdoc/require-jsdoc */
import { useState, useCallback, useEffect, useMemo } from 'react'
import { Divider, Select, Breadcrumbs, InputLabel, FormControl } from '@material-ui/core'
import { Divider, Select, Breadcrumbs, InputLabel, FormControl } from '@mui/material'
import { NavArrowRight } from 'iconoir-react'
import Marked from 'marked'
@ -33,6 +33,15 @@ import { STEP_ID as CONFIGURATION_ID } from 'client/components/Forms/Provision/C
import { STEP_ID as INPUTS_ID } from 'client/components/Forms/Provision/CreateForm/Steps/Inputs'
import { STEP_FORM_SCHEMA } from 'client/components/Forms/Provision/CreateForm/Steps/Template/schema'
const renderer = new Marked.Renderer()
renderer.link = (href, title, text) => `
<a class='description__link'
target='_blank' rel='nofollow' title='${title ?? ''}' href='${href}'>
${text}
</a>
`
export const STEP_ID = 'template'
const Template = () => ({
@ -117,13 +126,6 @@ const Template = () => ({
}
const RenderDescription = ({ description = '' }) => {
const renderer = new Marked.Renderer()
renderer.link = (href, title, text) => (
`<a class='MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorSecondary'
target='_blank' rel='nofollow' title='${title}' href='${href}'>${text}</a>`
)
const html = Marked(sanitize`${description}`, { renderer })
return <div dangerouslySetInnerHTML={{ __html: html }} />
}

11
src/fireedge/src/client/components/Forms/Vm/RecoverForm/index.js
View File

@ -13,27 +13,22 @@
* See the License for the specific language governing permissions and *
* limitations under the License. *
* ------------------------------------------------------------------------- */
import { styled } from '@material-ui/core'
import { Typography } from '@mui/material'
import { createForm } from 'client/utils'
import { SCHEMA, FIELDS } from 'client/components/Forms/Vm/RecoverForm/schema'
const Description = styled('p')(({ theme }) => ({
...theme.typography.subtitle1,
paddingInline: '1rem'
}))
const RecoverForm = createForm(
SCHEMA,
FIELDS,
{
description: (
<Description>
<Typography variant='subtitle1' paddingX='1rem'>
{`Recovers a stuck VM that is waiting for a driver operation.
The recovery may be done by failing, succeeding or retrying the
current operation. YOU NEED TO MANUALLY CHECK THE VM STATUS ON THE HOST,
to decide if the operation was successful or not, or if it can be retried.`}
</Description>
</Typography>
)
}
)

4
src/fireedge/src/client/components/Forms/VmTemplate/InstantiateForm/Steps/BasicConfiguration/styles.js
View File

@ -13,14 +13,14 @@
* See the License for the specific language governing permissions and *
* limitations under the License. *
* ------------------------------------------------------------------------- */
import { makeStyles } from '@material-ui/core'
import makeStyles from '@mui/styles/makeStyles'
export default makeStyles(theme => ({
root: {
display: 'grid',
gridTemplateColumns: '1fr 1fr',
gap: '2em',
[theme.breakpoints.down('sm')]: {
[theme.breakpoints.down('lg')]: {
gridTemplateColumns: '1fr'
}
},

11
src/fireedge/src/client/components/Forms/VmTemplate/InstantiateForm/Steps/ExtraConfiguration/booting.js
View File

@ -24,7 +24,8 @@ import {
Check as CheckIcon,
Square as BlankSquareIcon
} from 'iconoir-react'
import { Divider, makeStyles } from '@material-ui/core'
import { Divider } from '@mui/material'
import makeStyles from '@mui/styles/makeStyles'
import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautiful-dnd'
import { Translate } from 'client/components/HOC'
@ -113,7 +114,7 @@ const Booting = ({ data, setFormData, control }) => {
ID: `disk${idx}`,
NAME: (
<>
<ImageIcon size={16} />
<ImageIcon />
{isVolatile
? <>{`${disk?.NAME}: `}<Translate word={T.VolatileDisk} /></>
: [disk?.NAME, disk?.IMAGE].filter(Boolean).join(': ')}
@ -127,7 +128,7 @@ const Booting = ({ data, setFormData, control }) => {
ID: `nic${idx}`,
NAME: (
<>
<NetworkIcon size={16} />
<NetworkIcon />
{[nic?.NAME, nic.NETWORK].filter(Boolean).join(': ')}
</>
)
@ -189,7 +190,7 @@ const Booting = ({ data, setFormData, control }) => {
>
<Action
cy={ID}
icon={<CheckIcon size={15} />}
icon={<CheckIcon />}
handleClick={() => handleEnable(ID)}
/>
{NAME}
@ -206,7 +207,7 @@ const Booting = ({ data, setFormData, control }) => {
<div key={ID} className={classes.item}>
<Action
cy={ID}
icon={<BlankSquareIcon size={15} />}
icon={<BlankSquareIcon />}
handleClick={() => handleEnable(ID)}
/>
{NAME}

2
src/fireedge/src/client/components/Forms/VmTemplate/InstantiateForm/Steps/ExtraConfiguration/index.js
View File

@ -18,7 +18,7 @@ import { useMemo } from 'react'
import PropTypes from 'prop-types'
import { useFormContext } from 'react-hook-form'
import { useTheme } from '@material-ui/core'
import { useTheme } from '@mui/material'
import { WarningCircledOutline as WarningIcon } from 'iconoir-react'
import { useAuth } from 'client/features/Auth'

6
src/fireedge/src/client/components/Forms/VmTemplate/InstantiateForm/Steps/ExtraConfiguration/networking.js
View File

@ -15,7 +15,7 @@
* ------------------------------------------------------------------------- */
/* eslint-disable jsdoc/require-jsdoc */
import PropTypes from 'prop-types'
import { makeStyles } from '@material-ui/core'
import makeStyles from '@mui/styles/makeStyles'
import { Edit, Trash } from 'iconoir-react'
import { useWatch } from 'react-hook-form'
@ -108,13 +108,13 @@ const Networking = ({ data, setFormData, control }) => {
reorderNics()
reorderBootAfterRemove(NAME, nics, data, setFormData)
}}
icon={<Trash size={18} />}
icon={<Trash />}
/>
}
<ButtonToTriggerForm
buttonProps={{
'data-cy': `edit-${NAME}`,
icon: <Edit size={18} />,
icon: <Edit />,
tooltip: <Translate word={T.Edit} />
}}
options={[{

2
src/fireedge/src/client/components/Forms/VmTemplate/InstantiateForm/Steps/ExtraConfiguration/placement.js
View File

@ -15,7 +15,7 @@
* ------------------------------------------------------------------------- */
/* eslint-disable jsdoc/require-jsdoc */
import PropTypes from 'prop-types'
import { makeStyles } from '@material-ui/core'
import makeStyles from '@mui/styles/makeStyles'
import FormWithSchema from 'client/components/Forms/FormWithSchema'
import { Tr } from 'client/components/HOC'

6
src/fireedge/src/client/components/Forms/VmTemplate/InstantiateForm/Steps/ExtraConfiguration/scheduleAction.js
View File

@ -15,7 +15,7 @@
* ------------------------------------------------------------------------- */
/* eslint-disable jsdoc/require-jsdoc */
import PropTypes from 'prop-types'
import { makeStyles } from '@material-ui/core'
import makeStyles from '@mui/styles/makeStyles'
import { Edit, Trash } from 'iconoir-react'
import { useWatch } from 'react-hook-form'
@ -89,12 +89,12 @@ const ScheduleAction = ({ setFormData, control }) => {
<Action
data-cy={`remove-${NAME}`}
handleClick={() => handleRemove(NAME)}
icon={<Trash size={18} />}
icon={<Trash />}
/>
<ButtonToTriggerForm
buttonProps={{
'data-cy': `edit-${NAME}`,
icon: <Edit size={18} />,
icon: <Edit />,
tooltip: <Translate word={T.Edit} />
}}
options={[{

6
src/fireedge/src/client/components/Forms/VmTemplate/InstantiateForm/Steps/ExtraConfiguration/storage.js
View File

@ -15,7 +15,7 @@
* ------------------------------------------------------------------------- */
/* eslint-disable jsdoc/require-jsdoc */
import PropTypes from 'prop-types'
import { makeStyles } from '@material-ui/core'
import makeStyles from '@mui/styles/makeStyles'
import { Edit, Trash } from 'iconoir-react'
import { useWatch } from 'react-hook-form'
@ -151,12 +151,12 @@ const Storage = ({ data, setFormData, hypervisor, control }) => {
reorderDisks()
reorderBootAfterRemove(NAME, disks, data, setFormData)
}}
icon={<Trash size={18} />}
icon={<Trash />}
/>
<ButtonToTriggerForm
buttonProps={{
'data-cy': `edit-${NAME}`,
icon: <Edit size={18} />,
icon: <Edit />,
tooltip: <Translate word={T.Edit} />
}}
options={[{

2
src/fireedge/src/client/components/Forms/VmTemplate/InstantiateForm/Steps/VmTemplatesTable/index.js
View File

@ -15,7 +15,7 @@
* ------------------------------------------------------------------------- */
/* eslint-disable jsdoc/require-jsdoc */
import PropTypes from 'prop-types'
import { makeStyles } from '@material-ui/core'
import makeStyles from '@mui/styles/makeStyles'
import { useListForm } from 'client/hooks'
import { useVmTemplateApi } from 'client/features/One'

2
src/fireedge/src/client/components/HOC/InternalLayout/index.js
View File

@ -18,7 +18,7 @@ import { useRef, useEffect } from 'react'
import PropTypes from 'prop-types'
import { useParams } from 'react-router-dom'
import clsx from 'clsx'
import { Box, Container } from '@material-ui/core'
import { Box, Container } from '@mui/material'
import { CSSTransition } from 'react-transition-group'
import { useGeneral, useGeneralApi } from 'client/features/General'

2
src/fireedge/src/client/components/HOC/InternalLayout/styles.js
View File

@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and *
* limitations under the License. *
* ------------------------------------------------------------------------- */
import { makeStyles } from '@material-ui/core'
import makeStyles from '@mui/styles/makeStyles'
import { sidebar, toolbar, footer } from 'client/theme/defaults'
export default makeStyles(theme => ({

20
src/fireedge/src/client/components/Header/Group.js
View File

@ -14,20 +14,18 @@
* limitations under the License. *
* ------------------------------------------------------------------------- */
/* eslint-disable jsdoc/require-jsdoc */
import { Button } from '@material-ui/core'
import { Button } from '@mui/material'
import { Group as GroupIcon, VerifiedBadge as SelectIcon } from 'iconoir-react'
import { useAuth, useAuthApi } from 'client/features/Auth'
import Search from 'client/components/Search'
import { FILTER_POOL } from 'client/constants'
import HeaderPopover from 'client/components/Header/Popover'
import headerStyles from 'client/components/Header/styles'
import { Translate } from 'client/components/HOC'
import { T, FILTER_POOL } from 'client/constants'
const { ALL_RESOURCES, PRIMARY_GROUP_RESOURCES } = FILTER_POOL
const Group = () => {
const classes = headerStyles()
const { user, groups, filterPool } = useAuth()
const { changeGroup } = useAuthApi()
@ -40,14 +38,19 @@ const Group = () => {
<Button
key={`switcher-group-${ID}`}
fullWidth
className={classes.groupButton}
tooltip={<Translate Word={T.Group} />}
onClick={() => {
ID && changeGroup({ id: user.ID, group: ID })
handleClose()
}}
sx={{
color: theme => theme.palette.text.primary,
justifyContent: 'start',
'& svg:first-of-type': { my: 0, mx: 2 }
}}
>
{NAME}
{isSelected && <SelectIcon size='1em' />}
{isSelected && <SelectIcon />}
</Button>
)
}
@ -69,8 +72,9 @@ const Group = () => {
<HeaderPopover
id='group-list'
icon={<GroupIcon />}
tooltip={<Translate word={T.SwitchGroup} />}
buttonProps={{ 'data-cy': 'header-group-button' }}
headerTitle='Switch group'
headerTitle={<Translate word={T.SwitchGroup} />}
>
{({ handleClose }) => (
<Search

108
src/fireedge/src/client/components/Header/Popover.js
View File

@ -14,26 +14,16 @@
* limitations under the License. *
* ------------------------------------------------------------------------- */
/* eslint-disable jsdoc/require-jsdoc */
import { memo, useState } from 'react'
import { memo, useState, useRef } from 'react'
import PropTypes from 'prop-types'
import {
Box,
IconButton,
useMediaQuery,
Popover,
Typography,
Button
} from '@material-ui/core'
import { Cancel as CloseIcon } from 'iconoir-react'
import clsx from 'clsx'
import { Tr } from 'client/components/HOC'
import headerStyles from 'client/components/Header/styles'
import { Box, useMediaQuery, Popover, Typography, Tooltip, IconButton, Button } from '@mui/material'
import { Cancel as CloseIcon, NavArrowDown as CaretIcon } from 'iconoir-react'
const HeaderPopover = memo(({
id,
icon,
tooltip,
buttonLabel,
buttonProps,
headerTitle,
@ -41,45 +31,59 @@ const HeaderPopover = memo(({
popoverProps,
children
}) => {
const classes = headerStyles()
const [open, setOpen] = useState(false)
const [tooltipOpen, setTooltipOpen] = useState(false)
const anchorRef = useRef(null)
const isMobile = useMediaQuery(theme => theme.breakpoints.only('xs'))
const [anchorEl, setAnchorEl] = useState(null)
const handleToggle = () => {
setOpen(prevOpen => !prevOpen)
tooltip && setTooltipOpen(false)
}
const handleOpen = event => setAnchorEl(event.currentTarget)
const handleClose = () => setAnchorEl(null)
const open = Boolean(anchorEl)
const anchorId = open ? id : undefined
const handleClose = () => setOpen(false)
return (
<>
<Button
color='inherit'
aria-controls={anchorId}
aria-describedby={anchorId}
aria-haspopup='true'
variant='outlined'
onClick={handleOpen}
size='small'
{...buttonProps}
style={{ margin: '0 2px' }}
<Tooltip
open={tooltipOpen}
onOpen={() => tooltip && setTooltipOpen(!open)}
onClose={() => tooltip && setTooltipOpen(false)}
title={tooltip ?? ''}
enterDelay={300}
>
{icon}
{buttonLabel && (
<span className={classes.buttonLabel}>{buttonLabel}</span>
)}
</Button>
<Button
ref={anchorRef}
aria-controls={open ? `${id}-popover` : undefined}
aria-haspopup='true'
onClick={handleToggle}
size='small'
sx={{ margin: '0 2px' }}
endIcon={<CaretIcon />}
{...buttonProps}
>
{icon}
{buttonLabel && (
<Box pl={1} sx={{ display: { xs: 'none', sm: 'block' } }}>
{buttonLabel}
</Box>
)}
</Button>
</Tooltip>
<Popover
BackdropProps={{ invisible: !isMobile }}
PaperProps={{
className: clsx(classes.paper, {
[classes.padding]: !disablePadding
})
sx: {
...(isMobile && {
width: '100%',
height: '100%'
}),
p: disablePadding ? 0 : 1
}
}}
id={anchorId}
id={id}
open={open}
anchorEl={anchorEl}
anchorEl={anchorRef.current}
onClose={handleClose}
anchorOrigin={{
vertical: 'bottom',
@ -92,14 +96,20 @@ const HeaderPopover = memo(({
{...popoverProps}
>
{(headerTitle || isMobile) && (
<Box className={classes.header}>
<Box
display='flex'
alignItems='center'
justifyContent='flex-end'
borderBottom='1px solid'
borderBottomColor='action.disabledBackground'
>
{headerTitle && (
<Typography className={classes.title} variant='body1'>
{Tr(headerTitle)}
<Typography sx={{ userSelect: 'none' }} variant='body1'>
{headerTitle}
</Typography>
)}
{isMobile && (
<IconButton onClick={handleClose}>
<IconButton onClick={handleClose} size='large'>
<CloseIcon />
</IconButton>
)}
@ -116,7 +126,8 @@ HeaderPopover.propTypes = {
icon: PropTypes.node,
buttonLabel: PropTypes.string,
buttonProps: PropTypes.objectOf(PropTypes.any),
headerTitle: PropTypes.string,
tooltip: PropTypes.any,
headerTitle: PropTypes.any,
disablePadding: PropTypes.bool,
popoverProps: PropTypes.objectOf(PropTypes.any),
children: PropTypes.func
@ -124,10 +135,11 @@ HeaderPopover.propTypes = {
HeaderPopover.defaultProps = {
id: 'id-popover',
icon: null,
icon: undefined,
buttonLabel: undefined,
tooltip: undefined,
buttonProps: {},
headerTitle: null,
headerTitle: undefined,
disablePadding: false,
popoverProps: {},
children: () => undefined

6
src/fireedge/src/client/components/Header/User.js
View File

@ -15,7 +15,7 @@
* ------------------------------------------------------------------------- */
import { memo } from 'react'
import { MenuItem, MenuList, Link } from '@material-ui/core'
import { MenuItem, MenuList, Link } from '@mui/material'
import { ProfileCircled as UserIcon } from 'iconoir-react'
import { useAuth, useAuthApi } from 'client/features/Auth'
@ -38,7 +38,7 @@ const User = memo(() => {
disablePadding
>
{() => (
<MenuList>
<MenuList disablePadding>
<MenuItem onClick={logout} data-cy='header-logout-button'>
{Tr(T.SignOut)}
</MenuItem>
@ -46,9 +46,9 @@ const User = memo(() => {
APPS?.map(appName => (
<MenuItem key={appName}>
<Link
width='100%'
color='secondary'
href={`${APP_URL}/${appName}`}
style={{ width: '100%' }}
>
<DevTypography label={appName} />
</Link>

16
src/fireedge/src/client/components/Header/View.js
View File

@ -16,17 +16,16 @@
/* eslint-disable jsdoc/require-jsdoc */
import { useMemo } from 'react'
import { Button } from '@material-ui/core'
import { Button } from '@mui/material'
import { ViewGrid as ViewIcon, VerifiedBadge as SelectIcon } from 'iconoir-react'
import { useAuth, useAuthApi } from 'client/features/Auth'
import Search from 'client/components/Search'
import HeaderPopover from 'client/components/Header/Popover'
import headerStyles from 'client/components/Header/styles'
import { Translate } from 'client/components/HOC'
import { T } from 'client/constants'
const View = () => {
const classes = headerStyles()
const { view, views = {} } = useAuth()
const { changeView } = useAuthApi()
@ -34,11 +33,15 @@ const View = () => {
<Button
key={`view-${newView}`}
fullWidth
className={classes.groupButton}
onClick={() => {
newView && newView !== view && changeView(newView)
handleClose()
}}
sx={{
color: theme => theme.palette.text.primary,
justifyContent: 'start',
'& svg:first-of-type': { my: 0, mx: 2 }
}}
>
{newView}
{newView === view && <SelectIcon size='1em' />}
@ -51,8 +54,9 @@ const View = () => {
<HeaderPopover
id='view-list'
icon={<ViewIcon />}
tooltip={<Translate word={T.SwitchView} />}
buttonProps={{ 'data-cy': 'header-view-button' }}
headerTitle='Switch view'
headerTitle={<Translate word={T.SwitchView} />}
>
{({ handleClose }) => (
<Search

9
src/fireedge/src/client/components/Header/Zone.js
View File

@ -15,16 +15,17 @@
* ------------------------------------------------------------------------- */
import { memo } from 'react'
import { MenuItem, MenuList } from '@material-ui/core'
import { MenuItem, MenuList } from '@mui/material'
import { Language as ZoneIcon } from 'iconoir-react'
import HeaderPopover from 'client/components/Header/Popover'
import { Tr } from 'client/components/HOC'
import { Translate } from 'client/components/HOC'
import { T } from 'client/constants'
const Zone = memo(() => (
<HeaderPopover
id='zone-menu'
tooltip={T.Zone}
icon={<ZoneIcon />}
buttonProps={{
'data-cy': 'header-zone-button'
@ -32,9 +33,9 @@ const Zone = memo(() => (
disablePadding
>
{({ handleClose }) => (
<MenuList>
<MenuList disablePadding>
<MenuItem onClick={handleClose}>
{Tr(T.Zone)}
<Translate word={T.Zone} />
</MenuItem>
</MenuList>
)}

73
src/fireedge/src/client/components/Header/index.js
View File

@ -14,9 +14,10 @@
* limitations under the License. *
* ------------------------------------------------------------------------- */
/* eslint-disable jsdoc/require-jsdoc */
import { useMemo } from 'react'
import PropTypes from 'prop-types'
import { AppBar, Box, Toolbar, Typography, IconButton, Chip, useMediaQuery } from '@material-ui/core'
import { AppBar, Box, Toolbar, Typography, IconButton, Stack } from '@mui/material'
import { Menu as MenuIcon } from 'iconoir-react'
import { useAuth } from 'client/features/Auth'
@ -26,56 +27,72 @@ import User from 'client/components/Header/User'
import View from 'client/components/Header/View'
import Group from 'client/components/Header/Group'
import Zone from 'client/components/Header/Zone'
import headerStyles from 'client/components/Header/styles'
import { sentenceCase } from 'client/utils'
const Header = () => {
const { isOneAdmin } = useAuth()
const { appTitle, title, isBeta } = useGeneral()
const { fixMenu } = useGeneralApi()
const isUpLg = useMediaQuery(theme => theme.breakpoints.up('lg'))
const isMobile = useMediaQuery(theme => theme.breakpoints.only('xs'))
const classes = headerStyles({ isScroll: false })
const handleFixMenu = () => {
fixMenu(true)
}
const { appTitle, title, isBeta } = useGeneral()
const appAsSentence = useMemo(() => sentenceCase(appTitle), [appTitle])
return (
<AppBar className={classes.appbar} data-cy='header' elevation={1}>
<AppBar data-cy='header' elevation={0} position='absolute'>
<Toolbar>
{!isUpLg && (
<IconButton onClick={handleFixMenu} edge='start' color='inherit'>
<MenuIcon />
</IconButton>
)}
<Box flexGrow={1} display='inline-flex'>
<IconButton
onClick={() => fixMenu(true)}
edge='start'
size='small'
variant='outlined'
sx={{ display: { lg: 'none' } }}
>
<MenuIcon />
</IconButton>
<Box flexGrow={1} ml={2} display='inline-flex'>
<Typography
variant={isMobile ? 'subtitle1' : 'h6'}
className={classes.title}
data-cy='header-app-title'
sx={{ userSelect: 'none', typography: 'h6' }}
>
{'One'}
<span className={classes.app}>
{appTitle}
{isBeta && <Chip size='small' label='BETA' color='primary' />}
</span>
<Typography
variant={'inherit'}
color='secondary.800'
component='span'
sx={{ textTransform: 'capitalize' }}
>
{appAsSentence}
</Typography>
{isBeta && (
<Typography
variant='overline'
color='primary.contrastText'
ml='0.5rem'
>
{'BETA'}
</Typography>
)}
</Typography>
<Typography
variant='h6'
className={classes.description}
data-cy='header-description'
sx={{
useSelect: 'none',
display: { xs: 'none', xl: 'block' },
'&::before': {
content: '"|"',
margin: '0.5em',
color: 'primary.contrastText'
}
}}
>
{title}
</Typography>
</Box>
<Box flexGrow={isMobile ? 1 : 0} flexShrink={0} textAlign='end'>
<Stack direction='row'>
<User />
<View />
{!isOneAdmin && <Group />}
<Zone />
</Box>
</Stack>
</Toolbar>
</AppBar>
)

86
src/fireedge/src/client/components/Header/styles.js
View File

@ -1,86 +0,0 @@
/* ------------------------------------------------------------------------- *
* Copyright 2002-2021, OpenNebula Project, OpenNebula Systems *
* *
* Licensed under the Apache License, Version 2.0 (the "License"); you may *
* not use this file except in compliance with the License. You may obtain *
* a copy of the License at *
* *
* http://www.apache.org/licenses/LICENSE-2.0 *
* *
* Unless required by applicable law or agreed to in writing, software *
* distributed under the License is distributed on an "AS IS" BASIS, *
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. *
* See the License for the specific language governing permissions and *
* limitations under the License. *
* ------------------------------------------------------------------------- */
import { makeStyles } from '@material-ui/core'
const styles = makeStyles(theme => ({
appbar: {
position: 'absolute',
transition: theme.transitions.create('background-color'),
backgroundColor: ({ isScroll }) => isScroll
? theme.palette.secondary.main
: theme.palette.primary.main
},
title: {
userSelect: 'none',
'& span': { textTransform: 'capitalize' }
},
app: {
color: ({ isScroll }) => isScroll
? theme.palette.primary.main
: theme.palette.secondary.main
},
description: {
userSelect: 'none',
'&::before': {
content: '"|"',
margin: '0.5em',
color: theme.palette.primary.contrastText
},
[theme.breakpoints.down('md')]: {
display: 'none'
}
},
/* POPOVER */
backdrop: {
[theme.breakpoints.only('xs')]: {
backgroundColor: theme.palette.action.disabledOpacity
}
},
paper: {
[theme.breakpoints.only('xs')]: {
width: '100%',
height: '100%'
}
},
padding: { padding: theme.spacing(2) },
header: {
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
borderBottom: '1px solid',
borderBottomColor: theme.palette.action.disabledBackground
},
buttonLabel: {
paddingLeft: theme.spacing(1),
[theme.breakpoints.only('xs')]: {
display: 'none'
}
},
/* GROUP SWITCHER */
modeThemeIcon: {
color: theme.palette.primary.contrastText
},
/* GROUP SWITCHER */
headerSwitcherLabel: { flexGrow: 1 },
groupButton: {
justifyContent: 'start',
'& svg:first-of-type': {
margin: theme.spacing(0, 2)
}
}
}))
export default styles

16
src/fireedge/src/client/components/Icons/opennebula.js
View File

@ -13,9 +13,9 @@
* See the License for the specific language governing permissions and *
* limitations under the License. *
* ------------------------------------------------------------------------- */
import { memo } from 'react'
import { memo, useMemo } from 'react'
import { number, string, bool, oneOfType } from 'prop-types'
import { useTheme } from '@material-ui/core'
import { useTheme } from '@mui/material'
import { useGeneral } from 'client/features/General'
import { SCHEMES } from 'client/constants'
@ -23,22 +23,22 @@ import { SCHEMES } from 'client/constants'
const OpenNebulaLogo = memo(
({ width, height, spinner, withText, viewBox, disabledBetaText, ...props }) => {
const { isBeta } = useGeneral()
const { palette: { type } } = useTheme()
const isDarkMode = type === SCHEMES.DARK
const { palette: { mode } } = useTheme()
const isDarkMode = mode === SCHEMES.DARK
const cloudColor = {
const cloudColor = useMemo(() => ({
child1: { from: '#bfe6f2', to: '#ffffff', static: isDarkMode ? '#ffffff' : '#bfe6f2' },
child2: { from: '#80cde6', to: '#ffffff', static: isDarkMode ? '#ffffff' : '#80cde6' },
child3: { from: '#40b3d9', to: '#ffffff', static: isDarkMode ? '#ffffff' : '#40b3d9' },
child4: { from: '#0098c3', to: '#ffffff', static: isDarkMode ? '#ffffff' : '#0098c3' },
child5: { from: '#0098c3', to: '#ffffff', static: isDarkMode ? '#ffffff' : '#0098c3' }
}
}), [isDarkMode])
const textColor = {
const textColor = useMemo(() => ({
top: 'currentColor',
bottom: isDarkMode ? 'currentColor' : '#0098c3',
beta: '#ffffff'
}
}), [isDarkMode])
return (
<svg viewBox={viewBox} width={width} height={height} {...props}>

6
src/fireedge/src/client/components/List/ListCards/index.js
View File

@ -17,9 +17,7 @@
import PropTypes from 'prop-types'
import { CSSTransition, TransitionGroup } from 'react-transition-group'
import {
CardActionArea, Card, Grid, LinearProgress, useMediaQuery
} from '@material-ui/core'
import { CardActionArea, Card, Grid, LinearProgress, useMediaQuery } from '@mui/material'
import { Plus as PlusIcon } from 'iconoir-react'
import { EmptyCard } from 'client/components/Cards'
@ -137,7 +135,7 @@ ListCards.propTypes = {
ListCards.defaultProps = {
list: [],
keyProp: 'id',
breakpoints: { xs: 12, sm: 6, md: 4, lg: 2 },
breakpoints: { xs: 12, sm: 6, md: 4, xl: 3 },
handleCreate: undefined,
ButtonCreateComponent: undefined,
CardComponent: null,

2
src/fireedge/src/client/components/List/ListCards/styles.js
View File

@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and *
* limitations under the License. *
* ------------------------------------------------------------------------- */
import { makeStyles } from '@material-ui/core'
import makeStyles from '@mui/styles/makeStyles'
export default makeStyles({
cardPlus: {

2
src/fireedge/src/client/components/List/ListHeader/index.js
View File

@ -16,7 +16,7 @@
import { memo } from 'react'
import PropTypes from 'prop-types'
import { Box, Typography, InputBase } from '@material-ui/core'
import { Box, Typography, InputBase } from '@mui/material'
import {
RefreshDouble as RefreshIcon,
AddCircledOutline as AddIcon,

5
src/fireedge/src/client/components/List/ListHeader/styles.js
View File

@ -13,7 +13,8 @@
* See the License for the specific language governing permissions and *
* limitations under the License. *
* ------------------------------------------------------------------------- */
import { makeStyles, alpha } from '@material-ui/core'
import { alpha } from '@mui/material'
import makeStyles from '@mui/styles/makeStyles'
export default makeStyles(theme => ({
root: {
@ -78,7 +79,7 @@ export default makeStyles(theme => ({
inputInput: {
padding: theme.spacing(1, 1, 1, 0),
// vertical padding + font size from searchIcon
paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
paddingLeft: `calc(1em + ${theme.spacing(4)})`,
width: '100%'
}
}))

4
src/fireedge/src/client/components/List/ListInfiniteScroll.js
View File

@ -17,7 +17,7 @@
import { useRef, useEffect, useCallback, createRef } from 'react'
import PropTypes from 'prop-types'
import { debounce, LinearProgress } from '@material-ui/core'
import { debounce, LinearProgress } from '@mui/material'
import { useList, useNearScreen } from 'client/hooks'
const ListInfiniteScroll = ({ list, renderResult }) => {
@ -55,7 +55,7 @@ const ListInfiniteScroll = ({ list, renderResult }) => {
style={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
gridGap: 10
gridGap: 4
}}
>
{shortList?.map(renderResult)}

3
src/fireedge/src/client/components/List/ListVirtualized.js
View File

@ -18,7 +18,8 @@ import { useRef, useCallback, useEffect } from 'react'
import PropTypes from 'prop-types'
import { useVirtual } from 'react-virtual'
import { debounce, makeStyles, Box, LinearProgress } from '@material-ui/core'
import { debounce, Box, LinearProgress } from '@mui/material'
import makeStyles from '@mui/styles/makeStyles'
import { useNearScreen } from 'client/hooks'

48
src/fireedge/src/client/components/LoadingScreen/index.js
View File

@ -15,40 +15,32 @@
* ------------------------------------------------------------------------- */
import { JSXElementConstructor } from 'react'
import { makeStyles, Box } from '@material-ui/core'
import { Box } from '@mui/material'
import { OpenNebulaLogo } from 'client/components/Icons'
const useStyles = makeStyles(theme => ({
root: {
width: '100%',
height: '100vh',
backgroundColor: theme.palette.background.default,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
position: 'fixed',
zIndex: 10000
}
}))
/**
* Component with OpenNebula logo as spinner in full width and height.
*
* @returns {JSXElementConstructor} Container with logo inside
*/
const LoadingScreen = () => {
const classes = useStyles()
return (
<Box className={classes.root}>
<OpenNebulaLogo
width={360}
height={360}
spinner
withText
/>
</Box>
)
}
const LoadingScreen = () => (
<Box sx={{
width: '100%',
height: '100vh',
backgroundColor: 'background.default',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
position: 'fixed',
zIndex: 10000
}}>
<OpenNebulaLogo
width={360}
height={360}
spinner
withText
/>
</Box>
)
export default LoadingScreen

6
src/fireedge/src/client/components/Notifier/index.js
View File

@ -18,14 +18,14 @@ import { useEffect } from 'react'
import PropTypes from 'prop-types'
import { useSnackbar } from 'notistack'
import { IconButton } from '@material-ui/core'
import { IconButton } from '@mui/material'
import { Cancel as CloseIcon } from 'iconoir-react'
import { useGeneral, useGeneralApi } from 'client/features/General'
const CloseButton = ({ handleClick }) => (
<IconButton onClick={handleClick} component="span">
<CloseIcon size='1em' />
<IconButton onClick={handleClick} component='span'>
<CloseIcon />
</IconButton>
)

2
src/fireedge/src/client/components/Search/index.js
View File

@ -15,8 +15,8 @@
* ------------------------------------------------------------------------- */
/* eslint-disable jsdoc/require-jsdoc */
import PropTypes from 'prop-types'
import { TextField, Box } from '@mui/material'
import { TextField, Box } from '@material-ui/core'
import { useSearch } from 'client/hooks'
import { ListInfiniteScroll } from 'client/components/List'

34
src/fireedge/src/client/components/Search/styles.js
View File

@ -1,34 +0,0 @@
/* ------------------------------------------------------------------------- *
* Copyright 2002-2021, OpenNebula Project, OpenNebula Systems *
* *
* Licensed under the Apache License, Version 2.0 (the "License"); you may *
* not use this file except in compliance with the License. You may obtain *
* a copy of the License at *
* *
* http://www.apache.org/licenses/LICENSE-2.0 *
* *
* Unless required by applicable law or agreed to in writing, software *
* distributed under the License is distributed on an "AS IS" BASIS, *
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. *
* See the License for the specific language governing permissions and *
* limitations under the License. *
* ------------------------------------------------------------------------- */
import { makeStyles } from '@material-ui/core'
export default makeStyles(theme => ({
backdrop: {
[theme.breakpoints.only('xs')]: {
backgroundColor: theme.palette.action.disabledOpacity
}
},
paper: {
padding: '1rem',
[theme.breakpoints.only('xs')]: {
width: '100%',
height: '100%'
}
},
header: { display: 'flex', alignItems: 'center' },
title: { flexGrow: 1 },
button: { justifyContent: 'start' }
}))

7
src/fireedge/src/client/components/Sidebar/SidebarCollapseItem.js
View File

@ -21,13 +21,12 @@ import clsx from 'clsx'
import {
List,
Icon as MIcon,
Collapse,
ListItem,
ListItemText,
ListItemIcon,
useMediaQuery
} from '@material-ui/core'
} from '@mui/material'
import {
Minus as CollapseIcon,
@ -69,9 +68,7 @@ const SidebarCollapseItem = ({ label, routes, icon: Icon }) => {
data-cy={label}
data-min-label={label.slice(0, 3)}
/>
<MIcon className={clsx({ [classes.expandIcon]: isUpLg && !isFixMenu })}>
{expanded ? <CollapseIcon /> : <ExpandMoreIcon />}
</MIcon>
{expanded ? <CollapseIcon/> : <ExpandMoreIcon />}
</ListItem>
{routes
?.filter(({ sidebar = false, label }) => sidebar && typeof label === 'string')

2
src/fireedge/src/client/components/Sidebar/SidebarLink.js
View File

@ -23,7 +23,7 @@ import {
ListItemIcon,
ListItemText,
useMediaQuery
} from '@material-ui/core'
} from '@mui/material'
import { useGeneralApi } from 'client/features/General'
import sidebarStyles from 'client/components/Sidebar/styles'

35
src/fireedge/src/client/components/Sidebar/index.js
View File

@ -24,15 +24,24 @@ import {
Divider,
Box,
IconButton,
useMediaQuery
} from '@material-ui/core'
import { Menu as MenuIcon, Cancel as CloseIcon } from 'iconoir-react'
useMediaQuery,
Tooltip
} from '@mui/material'
import {
Menu as MenuIcon,
NavArrowLeft as ArrowLeftIcon,
Cancel as CloseIcon
} from 'iconoir-react'
import { useGeneral, useGeneralApi } from 'client/features/General'
import { OpenNebulaLogo } from 'client/components/Icons'
import { Translate } from 'client/components/HOC'
import { T } from 'client/constants'
import sidebarStyles from 'client/components/Sidebar/styles'
import SidebarLink from 'client/components/Sidebar/SidebarLink'
import SidebarCollapseItem from 'client/components/Sidebar/SidebarCollapseItem'
import { OpenNebulaLogo } from 'client/components/Icons'
const Sidebar = ({ endpoints }) => {
const classes = sidebarStyles()
@ -59,7 +68,7 @@ const Sidebar = ({ endpoints }) => {
return (
<Drawer
variant={'permanent'}
variant='permanent'
className={clsx({ [classes.drawerFixed]: isFixMenu })}
classes={{
paper: clsx(classes.drawerPaper, {
@ -78,9 +87,19 @@ const Sidebar = ({ endpoints }) => {
className={classes.svg}
disabledBetaText
/>
<IconButton onClick={handleSwapMenu}>
{isUpLg ? <MenuIcon /> : <CloseIcon />}
</IconButton>
{!isUpLg || isFixMenu ? (
<Tooltip title={<Translate word={T.Close} />}>
<IconButton onClick={handleSwapMenu} variant='outlined' size='small'>
{!isUpLg ? <CloseIcon/> : <ArrowLeftIcon />}
</IconButton>
</Tooltip>
) : (
<Tooltip title={<Translate word={T.Pin} />}>
<IconButton onClick={handleSwapMenu} variant='outlined' size='small'>
<MenuIcon />
</IconButton>
</Tooltip>
)}
</Box>
<Divider />
<Box className={classes.menu}>

8
src/fireedge/src/client/components/Sidebar/styles.js
View File

@ -13,7 +13,8 @@
* See the License for the specific language governing permissions and *
* limitations under the License. *
* ------------------------------------------------------------------------- */
import { makeStyles, alpha } from '@material-ui/core'
import { alpha } from '@mui/material'
import makeStyles from '@mui/styles/makeStyles'
import { sidebar, toolbar } from 'client/theme/defaults'
export default makeStyles(theme => ({
@ -52,7 +53,7 @@ export default makeStyles(theme => ({
'& #logo__text': {
visibility: 'hidden'
},
'& $expandIcon, & $subItemWrapper': {
'& $subItemWrapper': {
display: 'none'
},
'& $itemText::before': {
@ -76,7 +77,7 @@ export default makeStyles(theme => ({
'& #logo__text': {
visibility: 'visible !important'
},
'& $expandIcon, & $subItemWrapper': {
'& $subItemWrapper': {
display: 'block !important'
},
'& $itemText::before': {
@ -141,7 +142,6 @@ export default makeStyles(theme => ({
content: 'attr(data-max-label)'
}
},
expandIcon: {},
subItemWrapper: {},
subItem: {
paddingLeft: theme.spacing(4)

4
src/fireedge/src/client/components/SpeedDial/index.js
View File

@ -16,8 +16,8 @@
import { useState, JSXElementConstructor } from 'react'
import PropTypes from 'prop-types'
import { SpeedDial as MSpeedDial, SpeedDialIcon, SpeedDialAction } from '@material-ui/lab'
import { makeStyles } from '@material-ui/core/styles'
import { SpeedDial as MSpeedDial, SpeedDialIcon, SpeedDialAction } from '@mui/material'
import makeStyles from '@mui/styles/makeStyles'
const useStyles = makeStyles(theme => ({
root: {

4
src/fireedge/src/client/components/SplitPane/index.js
View File

@ -16,7 +16,9 @@
/* eslint-disable jsdoc/require-jsdoc */
import { useState, createRef, useRef, useEffect } from 'react'
import PropTypes from 'prop-types'
import { makeStyles, Divider } from '@material-ui/core'
import { Divider } from '@mui/material'
import makeStyles from '@mui/styles/makeStyles'
const useStyles = makeStyles(theme => ({
splitPane: {

3
src/fireedge/src/client/components/Status/Badge.js
View File

@ -16,7 +16,8 @@
import { memo } from 'react'
import PropTypes from 'prop-types'
import { makeStyles, Badge } from '@material-ui/core'
import { Badge } from '@mui/material'
import makeStyles from '@mui/styles/makeStyles'
const useStyles = makeStyles({
badge: {

17
src/fireedge/src/client/components/Status/Chip.js
View File

@ -16,24 +16,27 @@
import { memo } from 'react'
import PropTypes from 'prop-types'
import { makeStyles, Typography, lighten, darken } from '@material-ui/core'
import { Typography, lighten, darken } from '@mui/material'
import makeStyles from '@mui/styles/makeStyles'
import { addOpacityToColor } from 'client/utils'
import { SCHEMES } from 'client/constants'
const useStyles = makeStyles(theme => {
const getBackgroundColor = theme.palette.type === SCHEMES.DARK ? lighten : darken
const defaultStateColor = theme.palette.grey[theme.palette.type === SCHEMES.DARK ? 300 : 700]
const useStyles = makeStyles(({ spacing, palette, typography }) => {
const getBackgroundColor = palette.mode === SCHEMES.DARK ? lighten : darken
const defaultStateColor = palette.grey[palette.mode === SCHEMES.DARK ? 300 : 700]
return {
root: ({ stateColor = defaultStateColor }) => ({
color: getBackgroundColor(stateColor, 0.75),
backgroundColor: addOpacityToColor(stateColor, 0.2),
cursor: 'default',
padding: theme.spacing('0.25rem', '0.5rem'),
padding: spacing('0.25rem', '0.5rem'),
borderRadius: 2,
textTransform: 'uppercase',
fontSize: theme.typography.overline.fontSize,
fontWeight: theme.typography.fontWeightBold
fontSize: typography.overline.fontSize,
fontWeight: 500,
lineHeight: 'normal'
})
}
})

4
src/fireedge/src/client/components/Status/Circle.js
View File

@ -16,7 +16,9 @@
/* eslint-disable jsdoc/require-jsdoc */
import { memo } from 'react'
import PropTypes from 'prop-types'
import { makeStyles, Tooltip, Typography } from '@material-ui/core'
import { Tooltip, Typography } from '@mui/material'
import makeStyles from '@mui/styles/makeStyles'
const useStyles = makeStyles({
circle: ({ color }) => ({

6
src/fireedge/src/client/components/Status/LinearProgressWithLabel.js
View File

@ -15,7 +15,9 @@
* ------------------------------------------------------------------------- */
import { memo } from 'react'
import PropTypes from 'prop-types'
import { withStyles, Typography, LinearProgress } from '@material-ui/core'
import { Typography, LinearProgress } from '@mui/material'
import withStyles from '@mui/styles/withStyles'
const BorderLinearProgress = withStyles(({ palette }) => ({
root: {
@ -23,7 +25,7 @@ const BorderLinearProgress = withStyles(({ palette }) => ({
borderRadius: 5
},
colorPrimary: {
backgroundColor: palette.grey[palette.type === 'light' ? 400 : 700]
backgroundColor: palette.grey[palette.mode === 'light' ? 400 : 700]
},
bar: {
borderRadius: 5,

10
src/fireedge/src/client/components/Tables/Clusters/row.js
View File

@ -17,7 +17,7 @@
import PropTypes from 'prop-types'
import { HardDrive, NetworkAlt, Folder, Cloud } from 'iconoir-react'
import { Typography } from '@material-ui/core'
import { Typography } from '@mui/material'
import { rowStyles } from 'client/components/Tables/styles'
@ -36,19 +36,19 @@ const Row = ({ original, value, ...props }) => {
<div className={classes.caption}>
<span>{`#${ID}`}</span>
<span title={`Total Hosts: ${HOSTS}`}>
<HardDrive size={16} />
<HardDrive />
<span>{` ${HOSTS}`}</span>
</span>
<span title={`Total Datastores: ${DATASTORES}`}>
<Folder size={16} />
<Folder />
<span>{` ${DATASTORES}`}</span>
</span>
<span title={`Total Virtual Networks: ${VNETS}`}>
<NetworkAlt size={16} />
<NetworkAlt />
<span>{` ${VNETS}`}</span>
</span>
{PROVIDER_NAME && <span title={`Provider: ${PROVIDER_NAME}`}>
<Cloud size={16} />
<Cloud />
<span>{` ${PROVIDER_NAME}`}</span>
</span>}
</div>

12
src/fireedge/src/client/components/Tables/Datastores/row.js
View File

@ -17,7 +17,7 @@
import PropTypes from 'prop-types'
import { User, Group, Lock, Cloud, Server } from 'iconoir-react'
import { Typography } from '@material-ui/core'
import { Typography } from '@mui/material'
import { StatusCircle, LinearProgressWithLabel, StatusChip } from 'client/components/Status'
import { rowStyles } from 'client/components/Tables/styles'
@ -43,26 +43,26 @@ const Row = ({ original, value, ...props }) => {
{NAME}
</Typography>
<span className={classes.labels}>
{LOCK && <Lock size={20} />}
{LOCK && <Lock />}
<StatusChip text={TYPE?.name} />
</span>
</div>
<div className={classes.caption}>
<span>{`#${ID}`}</span>
<span title={`Owner: ${UNAME}`}>
<User size={16} />
<User />
<span>{` ${UNAME}`}</span>
</span>
<span title={`Group: ${GNAME}`}>
<Group size={16} />
<Group />
<span>{` ${GNAME}`}</span>
</span>
{PROVISION_ID && <span title={`Provision ID: #${PROVISION_ID}`}>
<Cloud size={16} />
<Cloud />
<span>{` ${PROVISION_ID}`}</span>
</span>}
<span title={`Cluster IDs: ${CLUSTERS.join(',')}`}>
<Server size={16} />
<Server />
<span>{` ${CLUSTERS.join(',')}`}</span>
</span>
</div>

13
src/fireedge/src/client/components/Tables/Enhanced/Utils/CategoryFilter.js
View File

@ -16,11 +16,12 @@
import { useEffect, useMemo, JSXElementConstructor } from 'react'
import PropTypes from 'prop-types'
import { List, ListSubheader, ListItem, Typography, IconButton } from '@material-ui/core'
import { List, ListSubheader, ListItem, Typography, IconButton, Tooltip } from '@mui/material'
import { Cancel } from 'iconoir-react'
import { UseFiltersInstanceProps } from 'react-table'
import { Tr } from 'client/components/HOC'
import { Tr, Translate } from 'client/components/HOC'
import { T } from 'client/constants'
/**
* Render category filter to table.
@ -85,9 +86,11 @@ const CategoryFilter = ({ title, column, accessorOption, multiple = false }) =>
>
{Tr(title)}
{isFiltered && (
<IconButton disableRipple size='small' onClick={handleClear}>
<Cancel/>
</IconButton>
<Tooltip title={<Translate word={T.Clear} />}>
<IconButton disableRipple size='small' onClick={handleClear}>
<Cancel/>
</IconButton>
</Tooltip>
)}
</ListSubheader>
)}

8
src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalActions/Action.js
View File

@ -63,7 +63,8 @@ const ActionItem = memo(({ item, selectedRows }) => {
accessor,
tooltip,
label,
color = 'secondary',
color,
variant = 'contained',
icon: Icon,
options,
action,
@ -72,9 +73,10 @@ const ActionItem = memo(({ item, selectedRows }) => {
const buttonProps = {
color,
variant,
'data-cy': accessor && `action.${accessor}`,
disabled: typeof disabled === 'function' ? disabled(selectedRows) : disabled,
icon: Icon && <Icon size={18} />,
icon: Icon && <Icon />,
label: label && Tr(label),
title: tooltip && Tr(tooltip)
}
@ -117,7 +119,9 @@ const ActionItem = memo(({ item, selectedRows }) => {
export const ActionPropTypes = PropTypes.shape({
accessor: PropTypes.string,
variant: PropTypes.string,
color: PropTypes.string,
size: PropTypes.string,
label: PropTypes.string,
tooltip: PropTypes.string,
icon: PropTypes.any,

3
src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalActions/index.js
View File

@ -15,8 +15,9 @@
* ------------------------------------------------------------------------- */
import { JSXElementConstructor, useMemo } from 'react'
import PropTypes from 'prop-types'
import { Row } from 'react-table'
import { makeStyles } from '@material-ui/core'
import makeStyles from '@mui/styles/makeStyles'
import Action, { ActionPropTypes, GlobalAction } from 'client/components/Tables/Enhanced/Utils/GlobalActions/Action'

5
src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalFilter.js
View File

@ -17,7 +17,8 @@ import { JSXElementConstructor, useState, useCallback } from 'react'
import PropTypes from 'prop-types'
import clsx from 'clsx'
import { makeStyles, alpha, debounce, InputBase } from '@material-ui/core'
import { alpha, debounce, InputBase } from '@mui/material'
import makeStyles from '@mui/styles/makeStyles'
import { Search as SearchIcon } from 'iconoir-react'
import { UseGlobalFiltersInstanceProps, UseGlobalFiltersState } from 'react-table'
@ -50,7 +51,7 @@ const useStyles = makeStyles(({ spacing, palette, shape, breakpoints }) => ({
inputInput: {
padding: spacing(1, 1, 1, 0),
// vertical padding + font size from searchIcon
paddingLeft: `calc(1em + ${spacing(4)}px)`
paddingLeft: `calc(1em + ${spacing(4)})`
}
}))

3
src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalSelectedRows.js
View File

@ -17,7 +17,8 @@ import { useMemo, JSXElementConstructor } from 'react'
import PropTypes from 'prop-types'
import { TableProps } from 'react-table'
import { makeStyles, Chip } from '@material-ui/core'
import { Chip } from '@mui/material'
import makeStyles from '@mui/styles/makeStyles'
const useStyles = makeStyles({
root: {

6
src/fireedge/src/client/components/Tables/Enhanced/Utils/GlobalSort.js
View File

@ -18,7 +18,8 @@ import { useEffect, useMemo, JSXElementConstructor } from 'react'
import PropTypes from 'prop-types'
import { SortDown, ArrowDown, ArrowUp } from 'iconoir-react'
import { makeStyles, MenuItem, MenuList, Chip } from '@material-ui/core'
import { MenuItem, MenuList, Chip } from '@mui/material'
import makeStyles from '@mui/styles/makeStyles'
import { TableInstance, UseSortByInstanceProps, UseSortByState } from 'react-table'
import HeaderPopover from 'client/components/Header/Popover'
@ -79,7 +80,8 @@ const GlobalSort = ({ useTableProps }) => {
buttonLabel={T.SortBy}
buttonProps={{
'data-cy': 'sort-by-button',
disabled: headersNotSorted.length === 0
disabled: headersNotSorted.length === 0,
variant: 'outlined'
}}
popoverProps= {{
anchorOrigin: {

Some files were not shown because too many files have changed in this diff Show More