diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/configurationApp')
14 files changed, 128 insertions, 80 deletions
diff --git a/sdnr/wt/odlux/apps/configurationApp/package.json b/sdnr/wt/odlux/apps/configurationApp/package.json index 8dd2d041f..afd5456ec 100644 --- a/sdnr/wt/odlux/apps/configurationApp/package.json +++ b/sdnr/wt/odlux/apps/configurationApp/package.json @@ -21,20 +21,23 @@ "author": "Matthias Fischer", "license": "Apache-2.0", "dependencies": { + "@emotion/react": "^11.7.0", + "@emotion/styled": "^11.6.0", + "@mui/icons-material": "^5.2.0", + "@mui/material": "^5.2.2", + "@mui/styles": "^5.2.2", "@odlux/framework": "*" }, "peerDependencies": { - "@types/react": "17.0.3", - "@types/react-dom": "17.0.2", - "@types/react-router-dom": "5.1.7", - "@material-ui/core": "4.11.4", - "@material-ui/icons": "4.11.2", "@types/classnames": "2.2.6", "@types/flux": "3.1.8", "@types/jquery": "3.3.10", + "@types/react": "17.0.37", + "@types/react-dom": "17.0.11", + "@types/react-router-dom": "5.1.7", "jquery": "3.3.1", - "react": "17.0.1", - "react-dom": "17.0.1", + "react": "17.0.2", + "react-dom": "17.0.2", "react-router-dom": "5.2.0" } -}
\ No newline at end of file +} diff --git a/sdnr/wt/odlux/apps/configurationApp/src/actions/deviceActions.ts b/sdnr/wt/odlux/apps/configurationApp/src/actions/deviceActions.ts index ac8aa0ac2..0dd42e3b7 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/actions/deviceActions.ts +++ b/sdnr/wt/odlux/apps/configurationApp/src/actions/deviceActions.ts @@ -1,3 +1,21 @@ +/** + * ============LICENSE_START======================================================================== + * ONAP : ccsdk feature sdnr wt odlux + * ================================================================================================= + * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved. + * ================================================================================================= + * 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. + * ============LICENSE_END========================================================================== + */ + import { Action } from '../../../../framework/src/flux/action'; import { Dispatch } from '../../../../framework/src/flux/store'; import { IApplicationStoreState } from "../../../../framework/src/store/applicationStore"; @@ -9,7 +27,7 @@ import { restService } from "../services/restServices"; import { YangParser } from "../yang/yangParser"; import { Module } from "../models/yang"; import { ViewSpecification, ViewElement, isViewElementReference, isViewElementList, isViewElementObjectOrList, isViewElementRpc, isViewElementChoise, ViewElementChoiseCase, ViewElementString } from "../models/uiModels"; -import { exception } from 'console'; + export class EnableValueSelector extends Action { constructor(public listSpecification: ViewSpecification, public listData: any[], public keyProperty: string, public onValueSelected : (value: any) => void ) { @@ -570,7 +588,7 @@ export const updateDataActionAsyncCreator = (vPath: string, data: any) => async } if (isNew) { - return dispatch(new ReplaceAction(`/configuration/${nodeId}/${vPath.replace(/\[\]$/i, `[${isNew}]`)}`)) // navigate to new element + return dispatch(new ReplaceAction(`/configuration/${nodeId}/${vPath.replace(/\[\]$/i, `[${isNew}]`)}`)); // navigate to new element } // create display specification diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/ifWhenTextInput.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/ifWhenTextInput.tsx index 56ec8dfd0..8ce3106a6 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/components/ifWhenTextInput.tsx +++ b/sdnr/wt/odlux/apps/configurationApp/src/components/ifWhenTextInput.tsx @@ -17,11 +17,26 @@ */ import { ViewElementBase } from "models/uiModels"; -import { TextField, InputAdornment, Input, Tooltip, Divider, IconButton, InputBase, Paper, makeStyles, Theme, createStyles, FormControl, InputLabel, FormHelperText } from "@material-ui/core"; +import { + TextField, + InputAdornment, + Input, + Tooltip, + Divider, + IconButton, + InputBase, + Paper, + Theme, + FormControl, + InputLabel, + FormHelperText, +} from "@mui/material"; +import makeStyles from '@mui/styles/makeStyles'; +import createStyles from '@mui/styles/createStyles'; import * as React from 'react'; import { faAdjust } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { InputProps } from "@material-ui/core/Input"; +import { InputProps } from "@mui/material/Input"; const useStyles = makeStyles((theme: Theme) => createStyles({ @@ -54,7 +69,7 @@ export const IfWhenTextInput = (props: IfwhenProps) => { const ifFeature = element.ifFeature ? ( - <Tooltip onMouseMove={e => props.onChangeTooltipVisuability(false)} onMouseOut={e => props.onChangeTooltipVisuability(true)} title={element.ifFeature}> + <Tooltip disableInteractive onMouseMove={e => props.onChangeTooltipVisuability(false)} onMouseOut={e => props.onChangeTooltipVisuability(true)} title={element.ifFeature}> <InputAdornment position="start"> <FontAwesomeIcon icon={faAdjust} className={classes.iconDark} /> </InputAdornment> @@ -64,7 +79,7 @@ export const IfWhenTextInput = (props: IfwhenProps) => { const whenFeature = element.when ? ( - <Tooltip className={classes.padding} onMouseMove={() => props.onChangeTooltipVisuability(false)} onMouseOut={() => props.onChangeTooltipVisuability(true)} title={element.when}> + <Tooltip disableInteractive className={classes.padding} onMouseMove={() => props.onChangeTooltipVisuability(false)} onMouseOut={() => props.onChangeTooltipVisuability(true)} title={element.when}> <InputAdornment className={classes.padding} position="end"> <FontAwesomeIcon icon={faAdjust} className={classes.iconLight}/> </InputAdornment> @@ -73,7 +88,7 @@ export const IfWhenTextInput = (props: IfwhenProps) => { : null; return ( - <FormControl error={error} style={style}> + <FormControl variant="standard" error={error} style={style}> <InputLabel htmlFor={id} >{label}</InputLabel> <Input id={id} inputProps={{'aria-label': label+'-input'}} endAdornment={<div>{ifFeature}{whenFeature}</div>} {...otherProps} /> <FormHelperText>{errorText}</FormHelperText> diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementBoolean.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementBoolean.tsx index 081ec46e8..81c9d6dcd 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementBoolean.tsx +++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementBoolean.tsx @@ -17,7 +17,7 @@ */ import * as React from "react" -import { MenuItem, FormHelperText, Select, FormControl, InputLabel } from "@material-ui/core"; +import { MenuItem, FormHelperText, Select, FormControl, InputLabel } from "@mui/material"; import { ViewElementBoolean } from "../models/uiModels"; import { BaseProps } from "./baseProps"; @@ -32,9 +32,9 @@ export const UiElementBoolean = (props: BooleanInputProps) => { const mandetoryError = element.mandatory && value !== 'true' && value !== 'false'; return (!props.readOnly || element.id != null - ? (<FormControl style={{ width: 485, marginLeft: 20, marginRight: 20 }}> + ? (<FormControl variant="standard" style={{ width: 485, marginLeft: 20, marginRight: 20 }}> <InputLabel htmlFor={`select-${element.id}`} >{element.label}</InputLabel> - <Select + <Select variant="standard" aria-label={element.label+'-selection'} required={!!element.mandatory} error={mandetoryError} diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementLeafList.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementLeafList.tsx index c705b982f..5937ed7b3 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementLeafList.tsx +++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementLeafList.tsx @@ -17,10 +17,11 @@ */ import * as React from "react" -import { FormControl, InputLabel, Paper, Chip, FormHelperText, Dialog, DialogTitle, DialogContentText, DialogActions, Button, DialogContent } from "@material-ui/core"; -import { makeStyles } from '@material-ui/core/styles'; -import AddIcon from '@material-ui/icons/Add'; +import { FormControl, InputLabel, Paper, Chip, FormHelperText, Dialog, DialogTitle, DialogContentText, DialogActions, Button, DialogContent } from "@mui/material"; +import makeStyles from '@mui/styles/makeStyles'; +import AddIcon from '@mui/icons-material/Add'; +import { Theme } from '@mui/material/styles'; import { ViewElement } from "../models/uiModels"; import { BaseProps } from "./baseProps"; @@ -29,8 +30,8 @@ type LeafListProps = BaseProps<any []> & { getEditorForViewElement: (uiElement: ViewElement) => (null | React.ComponentType<BaseProps<any>>) }; -const useStyles = makeStyles((theme) => { - const light = theme.palette.type === 'light'; +const useStyles = makeStyles((theme: Theme) => { + const light = theme.palette.mode === 'light'; const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)'; return ({ @@ -64,10 +65,10 @@ const useStyles = makeStyles((theme) => { }), pointerEvents: 'none', // Transparent to the hover style. }, - '&$focused:after': { + '&.Mui-focused:after': { transform: 'scaleX(1)', }, - '&$error:after': { + '&.Mui-error:after': { borderBottomColor: theme.palette.error.main, transform: 'scaleX(1)', // error is always underlined in red }, @@ -91,7 +92,7 @@ const useStyles = makeStyles((theme) => { borderBottom: `1px solid ${bottomLineColor}`, }, }, - '&$disabled:before': { + '&.Mui-disabled:before': { borderBottomStyle: 'dotted', }, }, @@ -144,7 +145,7 @@ export const UiElementLeafList = (props: LeafListProps) => { return ( <> - <FormControl style={{ width: 485, marginLeft: 20, marginRight: 20 }}> + <FormControl variant="standard" style={{ width: 485, marginLeft: 20, marginRight: 20 }}> <InputLabel htmlFor={`list-${element.id}`} shrink={!props.readOnly || !!(inputValue && inputValue.length)} >{element.label}</InputLabel> <ul className={`${classes.root} ${classes.underline}`} id={`list-${element.id}`}> { !props.readOnly ? <li> @@ -195,7 +196,7 @@ export const UiElementLeafList = (props: LeafListProps) => { /> || null } </DialogContent> <DialogActions> - <Button onClick={ handleClose }> Cancel </Button> + <Button color="inherit" onClick={ handleClose }> Cancel </Button> <Button disabled={editorValue == null || editorValue === "" } onClick={ onApplyButton } color="secondary"> {editorValueIndex < 0 ? "Add" : "Apply"} </Button> </DialogActions> </Dialog> diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementNumber.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementNumber.tsx index ac4afc1d9..c4816686a 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementNumber.tsx +++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementNumber.tsx @@ -17,7 +17,7 @@ */ import { ViewElementNumber } from "models/uiModels"; -import { Tooltip, InputAdornment } from "@material-ui/core"; +import { Tooltip, InputAdornment } from "@mui/material"; import * as React from 'react'; import { BaseProps } from "./baseProps"; import { IfWhenTextInput } from "./ifWhenTextInput"; @@ -53,7 +53,7 @@ export const UiElementNumber = (props: numberInputProps) => { } return ( - <Tooltip title={isTooltipVisible ? element.description || '' : ''}> + <Tooltip disableInteractive title={isTooltipVisible ? element.description || '' : ''}> <IfWhenTextInput element={element} onChangeTooltipVisuability={setTooltipVisibility} spellCheck={false} autoFocus margin="dense" id={element.id} label={element.label} type="text" value={props.inputValue} diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementReference.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementReference.tsx index b7697c880..9e863f0d0 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementReference.tsx +++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementReference.tsx @@ -17,7 +17,10 @@ */ import React, { useState } from 'react'; -import { Tooltip, Button, FormControl, Theme, createStyles, makeStyles } from '@material-ui/core'; +import { Tooltip, Button, FormControl, Theme } from '@mui/material'; + +import createStyles from '@mui/styles/createStyles'; +import makeStyles from '@mui/styles/makeStyles'; import { ViewElement } from '../models/uiModels'; @@ -38,8 +41,8 @@ export const UIElementReference: React.FC<UIElementReferenceProps> = (props) => const [disabled, setDisabled] = useState(true); const { element } = props; return ( - <FormControl key={element.id} style={{ width: 485, marginLeft: 20, marginRight: 20 }} onMouseDown={(ev) => { ev.preventDefault(); ev.stopPropagation(); ev.button === 1 && setDisabled(!disabled) }}> - <Tooltip title={element.description || element.path || ''}> + <FormControl variant="standard" key={element.id} style={{ width: 485, marginLeft: 20, marginRight: 20 }} onMouseDown={(ev) => { ev.preventDefault(); ev.stopPropagation(); ev.button === 1 && setDisabled(!disabled) }}> + <Tooltip disableInteractive title={element.description || element.path || ''}> <Button className={classes.button} aria-label={element.label+'-button'} color="secondary" disabled={props.disabled && disabled} onClick={() => { props.onOpenReference(element); }} >{`${element.label}`}</Button> diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementSelection.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementSelection.tsx index 530b0be9b..7ca9ae36b 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementSelection.tsx +++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementSelection.tsx @@ -19,7 +19,7 @@ import * as React from 'react'; import { BaseProps } from './baseProps'; import { ViewElementSelection } from '../models/uiModels' -import { FormControl, InputLabel, Select, FormHelperText, MenuItem, Tooltip } from '@material-ui/core'; +import { FormControl, InputLabel, Select, FormHelperText, MenuItem, Tooltip } from '@mui/material'; type selectionProps = BaseProps; @@ -34,9 +34,9 @@ export const UiElementSelection = (props: selectionProps) => { } return (props.readOnly || props.inputValue != null - ? (<FormControl style={{ width: 485, marginLeft: 20, marginRight: 20 }}> + ? (<FormControl variant="standard" style={{ width: 485, marginLeft: 20, marginRight: 20 }}> <InputLabel htmlFor={`select-${element.id}`} >{element.label}</InputLabel> - <Select + <Select variant="standard" required={!!element.mandatory} error={!!error} onChange={(e) => { props.onChange(e.target.value as string) }} @@ -50,7 +50,7 @@ export const UiElementSelection = (props: selectionProps) => { }} > {element.options.map(option => ( - <MenuItem key={option.key} value={option.key} aria-label={option.key}><Tooltip title={option.description || '' }><div style={{width:"100%"}}>{option.key}</div></Tooltip></MenuItem> + <MenuItem key={option.key} value={option.key} aria-label={option.key}><Tooltip disableInteractive title={option.description || '' }><div style={{width:"100%"}}>{option.key}</div></Tooltip></MenuItem> ))} </Select> <FormHelperText>{error}</FormHelperText> diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementString.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementString.tsx index f87b94f1d..4908c41aa 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementString.tsx +++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementString.tsx @@ -17,7 +17,7 @@ */ import * as React from "react" -import { Tooltip, TextField } from "@material-ui/core"; +import { Tooltip, TextField } from "@mui/material"; import { ViewElementString } from "../models/uiModels"; import { BaseProps } from "./baseProps"; import { IfWhenTextInput } from "./ifWhenTextInput"; @@ -68,7 +68,7 @@ export const UiElementString = (props: stringEntryProps) => { } return ( - <Tooltip title={isTooltipVisible ? element.description || '' : ''}> + <Tooltip disableInteractive title={isTooltipVisible ? element.description || '' : ''}> <IfWhenTextInput element={element} onChangeTooltipVisuability={setTooltipVisibility} spellCheck={false} autoFocus margin="dense" id={element.id} label={props?.isKey ? "🔑 " + element.label : element.label} type="text" value={props.inputValue} diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementUnion.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementUnion.tsx index 669e39360..67cd998d7 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementUnion.tsx +++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementUnion.tsx @@ -18,7 +18,7 @@ import * as React from 'react' import { BaseProps } from './baseProps'; -import { Tooltip } from '@material-ui/core'; +import { Tooltip } from '@mui/material'; import { IfWhenTextInput } from './ifWhenTextInput'; import { ViewElementUnion, isViewElementString, isViewElementNumber, isViewElementObject, ViewElementNumber } from '../models/uiModels'; import { checkRange, checkPattern } from './verifyer'; @@ -76,7 +76,7 @@ export const UIElementUnion = (props: UiElementUnionProps) => { } }; - return <Tooltip title={isTooltipVisible ? element.description || '' : ''}> + return <Tooltip disableInteractive title={isTooltipVisible ? element.description || '' : ''}> <IfWhenTextInput element={element} onChangeTooltipVisuability={setTooltipVisibility} spellCheck={false} autoFocus margin="dense" id={element.id} label={props.isKey ? "🔑 " + element.label : element.label} type="text" value={props.inputValue} diff --git a/sdnr/wt/odlux/apps/configurationApp/src/pluginConfiguration.tsx b/sdnr/wt/odlux/apps/configurationApp/src/pluginConfiguration.tsx index 3b9baa657..e37879102 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/pluginConfiguration.tsx +++ b/sdnr/wt/odlux/apps/configurationApp/src/pluginConfiguration.tsx @@ -63,7 +63,7 @@ const ConfigurationApplicationRouteAdapter = connect(undefined, mapDisp)((props: currentNodeId = currentNodeId.replace(/\|dump$/i, ''); } currentVirtualPath = null; - currentNodeId && await props.updateNodeId(currentNodeId); + currentNodeId && (await props.updateNodeId(currentNodeId)); } if (currentVirtualPath !== props.match.params[0]) { diff --git a/sdnr/wt/odlux/apps/configurationApp/src/services/yangService.ts b/sdnr/wt/odlux/apps/configurationApp/src/services/yangService.ts index 3dc3a8634..cf4677bc9 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/services/yangService.ts +++ b/sdnr/wt/odlux/apps/configurationApp/src/services/yangService.ts @@ -31,7 +31,7 @@ class YangService { if (cacheHit) return cacheHit; const res = await fetch(url); - const yangFile = res.ok && await res.text(); + const yangFile = res.ok && (await res.text()); if (yangFile !== false && yangFile !== null) { cache[url] = yangFile; } diff --git a/sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx b/sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx index b777cdbe5..2879899a5 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx +++ b/sdnr/wt/odlux/apps/configurationApp/src/views/configurationApplication.tsx @@ -19,7 +19,11 @@ import React, { useState } from 'react'; import { RouteComponentProps, withRouter } from 'react-router-dom'; -import { WithStyles, withStyles, createStyles, Theme } from '@material-ui/core/styles'; +import { Theme } from '@mui/material/styles'; + +import { WithStyles } from '@mui/styles'; +import withStyles from '@mui/styles/withStyles'; +import createStyles from '@mui/styles/createStyles'; import connect, { IDispatcher, Connect } from "../../../../framework/src/flux/connect"; import { IApplicationStoreState } from "../../../../framework/src/store/applicationStore"; @@ -33,28 +37,28 @@ import { ViewSpecification, isViewElementString, isViewElementNumber, isViewElem import { getAccessPolicyByUrl } from "../../../../framework/src/services/restService"; -import Fab from '@material-ui/core/Fab'; -import AddIcon from '@material-ui/icons/Add'; -import PostAdd from '@material-ui/icons/PostAdd'; -import ArrowBack from '@material-ui/icons/ArrowBack'; -import RemoveIcon from '@material-ui/icons/RemoveCircleOutline'; -import SaveIcon from '@material-ui/icons/Save'; -import EditIcon from '@material-ui/icons/Edit'; -import Tooltip from "@material-ui/core/Tooltip"; -import FormControl from "@material-ui/core/FormControl"; -import IconButton from "@material-ui/core/IconButton"; - -import InputLabel from "@material-ui/core/InputLabel"; -import Select from "@material-ui/core/Select"; -import MenuItem from "@material-ui/core/MenuItem"; -import Breadcrumbs from "@material-ui/core/Breadcrumbs"; -import Button from '@material-ui/core/Button'; -import Link from "@material-ui/core/Link"; -import Accordion from '@material-ui/core/Accordion'; -import AccordionSummary from '@material-ui/core/AccordionSummary'; -import AccordionDetails from '@material-ui/core/AccordionDetails'; -import Typography from '@material-ui/core/Typography'; -import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; +import Fab from '@mui/material/Fab'; +import AddIcon from '@mui/icons-material/Add'; +import PostAdd from '@mui/icons-material/PostAdd'; +import ArrowBack from '@mui/icons-material/ArrowBack'; +import RemoveIcon from '@mui/icons-material/RemoveCircleOutline'; +import SaveIcon from '@mui/icons-material/Save'; +import EditIcon from '@mui/icons-material/Edit'; +import Tooltip from "@mui/material/Tooltip"; +import FormControl from "@mui/material/FormControl"; +import IconButton from "@mui/material/IconButton"; + +import InputLabel from "@mui/material/InputLabel"; +import Select from "@mui/material/Select"; +import MenuItem from "@mui/material/MenuItem"; +import Breadcrumbs from "@mui/material/Breadcrumbs"; +import Button from '@mui/material/Button'; +import Link from "@mui/material/Link"; +import Accordion from '@mui/material/Accordion'; +import AccordionSummary from '@mui/material/AccordionSummary'; +import AccordionDetails from '@mui/material/AccordionDetails'; +import Typography from '@mui/material/Typography'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import { BaseProps } from '../components/baseProps'; @@ -425,9 +429,9 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp const subElements = currentCase?.elements; return ( <> - <FormControl key={uiElement.id} style={{ width: 485, marginLeft: 20, marginRight: 20 }}> + <FormControl variant="standard" key={uiElement.id} style={{ width: 485, marginLeft: 20, marginRight: 20 }}> <InputLabel htmlFor={`select-${uiElement.id}`} >{uiElement.label}</InputLabel> - <Select + <Select variant="standard" aria-label={uiElement.label + '-selection'} required={!!uiElement.mandatory} onChange={(e) => { @@ -615,15 +619,19 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp const confirm = useConfirm(); return ( - <Tooltip title={"Remove"} > - <IconButton disabled={props.disabled} className={classes.button} aria-label="remove-element-button" + <Tooltip disableInteractive title={"Remove"} > + <IconButton + disabled={props.disabled} + className={classes.button} + aria-label="remove-element-button" onClick={async (e) => { e.stopPropagation(); e.preventDefault(); - confirm({ title: "Do you really want to delete this element ?", description: "This action is permanent!", confirmationButtonProps: { color: "secondary" } }) + confirm({ title: "Do you really want to delete this element ?", description: "This action is permanent!", confirmationButtonProps: { color: "secondary" }, cancellationButtonProps: { color:"inherit" } }) .then(() => removeElement(`${this.props.vPath}[${props.rowData[listKeyProperty]}]`)) .then(props.onReload); - }} > + }} + size="large"> <RemoveIcon /> </IconButton> </Tooltip> @@ -714,7 +722,7 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp </div> ) : null } - <Button onClick={() => { + <Button color="inherit" onClick={() => { const resultingViewData = inputViewSpecification && this.collectData(inputViewSpecification.elements); this.props.executeRpc(this.props.vPath!, resultingViewData); }} >Exec</Button> @@ -738,12 +746,12 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp <div className={this.props.classes.header}> <div> <Breadcrumbs aria-label="breadcrumbs"> - <Link color="inherit" href="#" aria-label="back-breadcrumb" + <Link underline="hover" color="inherit" href="#" aria-label="back-breadcrumb" onClick={(ev: React.MouseEvent<HTMLElement>) => { ev.preventDefault(); this.props.history.push(lastPath); }}>Back</Link> - <Link color="inherit" href="#" + <Link underline="hover" color="inherit" href="#" aria-label={nodeId + '-breadcrumb'} onClick={(ev: React.MouseEvent<HTMLElement>) => { ev.preventDefault(); @@ -756,14 +764,14 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp const propTitle = prop.replace(/^[^:]+:/, ""); const ret = ( <span key={ind}> - <Link color="inherit" href="#" + <Link underline="hover" color="inherit" href="#" aria-label={propTitle + '-breadcrumb'} onClick={(ev: React.MouseEvent<HTMLElement>) => { ev.preventDefault(); this.props.history.push(path); }}><span>{propTitle}</span></Link> { - keyPath && <Link color="inherit" href="#" + keyPath && <Link underline="hover" color="inherit" href="#" aria-label={key + '-breadcrumb'} onClick={(ev: React.MouseEvent<HTMLElement>) => { ev.preventDefault(); @@ -781,7 +789,7 @@ class ConfigurationApplicationComponent extends React.Component<ConfigurationApp </div> {this.state.editMode && ( <Fab color="secondary" aria-label="back-button" className={this.props.classes.fab} onClick={async () => { - this.props.vPath && await this.props.reloadView(this.props.vPath); + this.props.vPath && (await this.props.reloadView(this.props.vPath)); this.setState({ editMode: false }); }} ><ArrowBack /></Fab> ) || null} diff --git a/sdnr/wt/odlux/apps/configurationApp/webpack.config.js b/sdnr/wt/odlux/apps/configurationApp/webpack.config.js index e3f3b6f19..5461c14f2 100644 --- a/sdnr/wt/odlux/apps/configurationApp/webpack.config.js +++ b/sdnr/wt/odlux/apps/configurationApp/webpack.config.js @@ -88,7 +88,7 @@ module.exports = (env) => { manifest: require(path.resolve(frameworkPath, "app-manifest.json")), sourceType: "umd2" }), - ...(env === "release") ? [ + ...(env === "release" ? [ new webpack.DefinePlugin({ "process.env": { NODE_ENV: "'production'", @@ -106,7 +106,7 @@ module.exports = (env) => { from: 'index.html', to: distPath }]), - ] + ]) ], watchOptions: { |