Update ODLUX

Updated to Material-ui 5, updated dashboard view, removed NetworkMap, LinkCalculator and LineOfSightApp, small bugfixes

Issue-ID: CCSDK-3580
Signed-off-by: Aijana Schumann <aijana.schumann@highstreet-technologies.com>
Change-Id: Id0fc148673e23a755cafc2be1c489248c38ff47c

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: {