From 1a868116614dd9996c78e69941b537e9da19460b Mon Sep 17 00:00:00 2001
From: Aijana Schumann <aijana.schumann@highstreet-technologies.com>
Date: Tue, 1 Feb 2022 13:18:42 +0100
Subject: 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
---
 .../src/components/ifWhenTextInput.tsx             | 25 +++++++++++++++++-----
 .../src/components/uiElementBoolean.tsx            |  6 +++---
 .../src/components/uiElementLeafList.tsx           | 21 +++++++++---------
 .../src/components/uiElementNumber.tsx             |  4 ++--
 .../src/components/uiElementReference.tsx          |  9 +++++---
 .../src/components/uiElementSelection.tsx          |  8 +++----
 .../src/components/uiElementString.tsx             |  4 ++--
 .../src/components/uiElementUnion.tsx              |  4 ++--
 8 files changed, 50 insertions(+), 31 deletions(-)

(limited to 'sdnr/wt/odlux/apps/configurationApp/src/components')

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}
-- 
cgit 1.2.3-korg