Odlux Update

Add eslint and custom icons update

Issue-ID: CCSDK-3871
Signed-off-by: sai-neetha <sai-neetha.phulmali@highstreet-technologies.com>
Change-Id: If6b676128cc9cff0437a5dc54f85eaafd3b8c586
Signed-off-by: highstreetherbert <herbert.eiselt@highstreet-technologies.com>

10 files changed, 220 insertions, 463 deletions

diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/baseProps.ts b/sdnr/wt/odlux/apps/configurationApp/src/components/baseProps.ts
index 26c3944c9..7187c0a4e 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/components/baseProps.ts
+++ b/sdnr/wt/odlux/apps/configurationApp/src/components/baseProps.ts
@@ -16,13 +16,13 @@
  * ============LICENSE_END==========================================================================
  */
 
-import { ViewElement } from "../models/uiModels";
+import { ViewElement } from '../models/uiModels';
 
 export type BaseProps<TValue = string> = { 
-    value: ViewElement, 
-    inputValue: TValue, 
-    readOnly: boolean, 
-    disabled: boolean, 
-    onChange(newValue: TValue): void;
-    isKey?: boolean 
+  value: ViewElement; 
+  inputValue: TValue; 
+  readOnly: boolean; 
+  disabled: boolean; 
+  onChange(newValue: TValue): void;
+  isKey?: boolean; 
 };
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/ifWhenTextInput.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/ifWhenTextInput.tsx
index 8ce3106a6..b176e5db5 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/components/ifWhenTextInput.tsx
+++ b/sdnr/wt/odlux/apps/configurationApp/src/components/ifWhenTextInput.tsx
@@ -16,82 +16,86 @@
  * ============LICENSE_END==========================================================================
  */
 
-import { ViewElementBase } from "models/uiModels";
-import {
-  TextField,
-  InputAdornment,
-  Input,
-  Tooltip,
-  Divider,
-  IconButton,
-  InputBase,
-  Paper,
-  Theme,
-  FormControl,
-  InputLabel,
-  FormHelperText,
-} from "@mui/material";
+import React from 'react';
+import InputAdornment from '@mui/material/InputAdornment';
+import Input, { InputProps } from '@mui/material/Input';
+import Tooltip from '@mui/material/Tooltip';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import FormHelperText from '@mui/material/FormHelperText';
+
 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 "@mui/material/Input";
 
-const useStyles = makeStyles((theme: Theme) =>
+import { faAdjust } from '@fortawesome/free-solid-svg-icons/faAdjust';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import { ViewElementBase } from '../models/uiModels';
+
+const useStyles = makeStyles(() =>
   createStyles({
     iconDark: {
-      color: '#ff8800'
+      color: '#ff8800',
     },
     iconLight: {
-      color: 'orange'
+      color: 'orange',
     },
     padding: {
       paddingLeft: 10,
-      paddingRight: 10
+      paddingRight: 10,
     },
   }),
 );
 
-type IfwhenProps = InputProps & {
+type IfWhenProps = InputProps & {
   label: string;
   element: ViewElementBase;
   helperText: string;
   error: boolean;
-  onChangeTooltipVisuability(value: boolean): void;
+  onChangeTooltipVisibility(value: boolean): void;
 };
 
-export const IfWhenTextInput = (props: IfwhenProps) => {
+export const IfWhenTextInput = (props: IfWhenProps) => {
 
-  const { element, onChangeTooltipVisuability: toogleTooltip, id, label, helperText: errorText, error, style, ...otherProps } = props;
+  const { element, id, label, helperText: errorText, error, style, ...otherProps } = props;
   const classes = useStyles();
 
-
   const ifFeature = element.ifFeature
     ? (
-        <Tooltip disableInteractive onMouseMove={e => props.onChangeTooltipVisuability(false)} onMouseOut={e => props.onChangeTooltipVisuability(true)} title={element.ifFeature}>
+      <Tooltip
+        title={element.ifFeature}
+        disableInteractive
+        onMouseMove={() => props.onChangeTooltipVisibility(false)}
+        onMouseOut={() => props.onChangeTooltipVisibility(true)}
+      >
           <InputAdornment position="start">
             <FontAwesomeIcon icon={faAdjust} className={classes.iconDark} />
           </InputAdornment>
         </Tooltip>
-      )
+    )
     : null;
 
   const whenFeature = element.when
     ? (
-        <Tooltip disableInteractive className={classes.padding} onMouseMove={() => props.onChangeTooltipVisuability(false)} onMouseOut={() => props.onChangeTooltipVisuability(true)} title={element.when}>
+      <Tooltip
+        title={element.when}
+        disableInteractive
+        className={classes.padding}
+        onMouseMove={() => props.onChangeTooltipVisibility(false)}
+        onMouseOut={() => props.onChangeTooltipVisibility(true)}
+      >
           <InputAdornment className={classes.padding} position="end">
             <FontAwesomeIcon icon={faAdjust} className={classes.iconLight}/>
           </InputAdornment>
         </Tooltip>
-      ) 
+    ) 
     : null;
 
   return (
     <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}  />
+      <Input id={id} inputProps={{ 'aria-label': label + '-input' }} endAdornment={<div>{ifFeature}{whenFeature}</div>} {...otherProps}  />
       <FormHelperText>{errorText}</FormHelperText>
     </FormControl>
   );
-}
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementBoolean.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementBoolean.tsx
index 81c9d6dcd..56fb93cea 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementBoolean.tsx
+++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementBoolean.tsx
@@ -16,43 +16,48 @@
  * ============LICENSE_END==========================================================================
  */
 
-import * as React from "react"
-import { MenuItem, FormHelperText, Select, FormControl, InputLabel } from "@mui/material";
+import React from 'react';
 
-import { ViewElementBoolean } from "../models/uiModels";
-import { BaseProps } from "./baseProps";
+import MenuItem from '@mui/material/MenuItem';
+import FormHelperText from '@mui/material/FormHelperText';
+import Select from '@mui/material/Select';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+
+import { ViewElementBoolean } from '../models/uiModels';
+import { BaseProps } from './baseProps';
 
 type BooleanInputProps = BaseProps<boolean>;
 
 export const UiElementBoolean = (props: BooleanInputProps) => {
 
-    const element = props.value as ViewElementBoolean;
+  const element = props.value as ViewElementBoolean;
 
-    const value = String(props.inputValue).toLowerCase();
-    const mandetoryError = element.mandatory && value !== 'true' && value !== 'false';
+  const value = String(props.inputValue).toLowerCase();
+  const mandatoryError = element.mandatory && value !== 'true' && value !== 'false';
     
-    return (!props.readOnly || element.id != null
-        ? (<FormControl variant="standard" style={{ width: 485, marginLeft: 20, marginRight: 20 }}>
+  return (!props.readOnly || element.id != null
+    ? (<FormControl variant="standard" style={{ width: 485, marginLeft: 20, marginRight: 20 }}>
             <InputLabel htmlFor={`select-${element.id}`} >{element.label}</InputLabel>
             <Select variant="standard"
-                aria-label={element.label+'-selection'}
+                aria-label={element.label + '-selection'}
                 required={!!element.mandatory}
-                error={mandetoryError}
-                onChange={(e) => { props.onChange(e.target.value === 'true') }}
+                error={mandatoryError}
+                onChange={(e) => { props.onChange(e.target.value === 'true'); }}
                 readOnly={props.readOnly}
                 disabled={props.disabled}
                 value={value}
                 inputProps={{
-                    name: element.id,
-                    id: `select-${element.id}`,
+                  name: element.id,
+                  id: `select-${element.id}`,
                 }}
             >
                 <MenuItem value={'true'} aria-label="true">{element.trueValue || 'True'}</MenuItem>
                 <MenuItem value={'false'} aria-label="false">{element.falseValue || 'False'}</MenuItem>
 
             </Select>
-            <FormHelperText>{mandetoryError ? "Value is mandetory" : ""}</FormHelperText>
+            <FormHelperText>{mandatoryError ? 'Value is mandatory' : ''}</FormHelperText>
         </FormControl>)
-        : null
-    );
-}
\ No newline at end of file
+    : null
+  );
+};
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementLeafList.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementLeafList.tsx
index 5937ed7b3..669ddff63 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementLeafList.tsx
+++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementLeafList.tsx
@@ -16,19 +16,23 @@
  * ============LICENSE_END==========================================================================
  */
 
-import * as React from "react"
-import { FormControl, InputLabel, Paper, Chip, FormHelperText, Dialog, DialogTitle, DialogContentText, DialogActions, Button, DialogContent } from "@mui/material";
+import React from 'react';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import Chip from '@mui/material/Chip';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import Button from '@mui/material/Button';
+
 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";
+import { ViewElement } from '../models/uiModels';
 
-type LeafListProps = BaseProps<any []> & {
-  getEditorForViewElement:  (uiElement: ViewElement) => (null | React.ComponentType<BaseProps<any>>)  
-};
+import { BaseProps } from './baseProps';
 
 const useStyles = makeStyles((theme: Theme) => {
   const light = theme.palette.mode === 'light';
@@ -50,93 +54,93 @@ const useStyles = makeStyles((theme: Theme) => {
       margin: theme.spacing(0.5),
     },
     underline: {
-        '&:after': {
-          borderBottom: `2px solid ${theme.palette.primary.main}`,
-          left: 0,
-          bottom: 0,
-          // Doing the other way around crash on IE 11 "''" https://github.com/cssinjs/jss/issues/242
-          content: '""',
-          position: 'absolute',
-          right: 0,
-          transform: 'scaleX(0)',
-          transition: theme.transitions.create('transform', {
-            duration: theme.transitions.duration.shorter,
-            easing: theme.transitions.easing.easeOut,
-          }),
-          pointerEvents: 'none', // Transparent to the hover style.
-        },
-        '&.Mui-focused:after': {
-          transform: 'scaleX(1)',
-        },
-        '&.Mui-error:after': {
-          borderBottomColor: theme.palette.error.main,
-          transform: 'scaleX(1)', // error is always underlined in red
-        },
-        '&:before': {
+      '&:after': {
+        borderBottom: `2px solid ${theme.palette.primary.main}`,
+        left: 0,
+        bottom: 0,
+        // Doing the other way around crash on IE 11 "''" https://github.com/cssinjs/jss/issues/242
+        content: '""',
+        position: 'absolute',
+        right: 0,
+        transform: 'scaleX(0)',
+        transition: theme.transitions.create('transform', {
+          duration: theme.transitions.duration.shorter,
+          easing: theme.transitions.easing.easeOut,
+        }),
+        pointerEvents: 'none', // Transparent to the hover style.
+      },
+      '&.Mui-focused:after': {
+        transform: 'scaleX(1)',
+      },
+      '&.Mui-error:after': {
+        borderBottomColor: theme.palette.error.main,
+        transform: 'scaleX(1)', // error is always underlined in red
+      },
+      '&:before': {
+        borderBottom: `1px solid ${bottomLineColor}`,
+        left: 0,
+        bottom: 0,
+        // Doing the other way around crash on IE 11 "''" https://github.com/cssinjs/jss/issues/242
+        content: '"\\00a0"',
+        position: 'absolute',
+        right: 0,
+        transition: theme.transitions.create('border-bottom-color', {
+          duration: theme.transitions.duration.shorter,
+        }),
+        pointerEvents: 'none', // Transparent to the hover style.
+      },
+      '&:hover:not($disabled):before': {
+        borderBottom: `2px solid ${theme.palette.text.primary}`,
+        // Reset on touch devices, it doesn't add specificity
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        '@media (hover: none)': {
           borderBottom: `1px solid ${bottomLineColor}`,
-          left: 0,
-          bottom: 0,
-          // Doing the other way around crash on IE 11 "''" https://github.com/cssinjs/jss/issues/242
-          content: '"\\00a0"',
-          position: 'absolute',
-          right: 0,
-          transition: theme.transitions.create('border-bottom-color', {
-            duration: theme.transitions.duration.shorter,
-          }),
-          pointerEvents: 'none', // Transparent to the hover style.
-        },
-        '&:hover:not($disabled):before': {
-          borderBottom: `2px solid ${theme.palette.text.primary}`,
-          // Reset on touch devices, it doesn't add specificity
-          '@media (hover: none)': {
-            borderBottom: `1px solid ${bottomLineColor}`,
-          },
-        },
-        '&.Mui-disabled:before': {
-          borderBottomStyle: 'dotted',
         },
       },
-  })
+      '&.Mui-disabled:before': {
+        borderBottomStyle: 'dotted',
+      },
+    },
+  });
 });
 
+type LeafListProps = BaseProps<any []> & {
+  getEditorForViewElement:  (uiElement: ViewElement) => (null | React.ComponentType<BaseProps<any>>);  
+};
+
 export const UiElementLeafList = (props: LeafListProps) => {
   const { value: element, inputValue, onChange } = props;
 
   const classes = useStyles();
 
   const [open, setOpen] = React.useState(false);
-  const [editorValue, setEditorValue] = React.useState("");
+  const [editorValue, setEditorValue] = React.useState('');
   const [editorValueIndex, setEditorValueIndex] = React.useState(-1);
   
-
-  const handleClickOpen = () => {
-    setOpen(true);
-  };
-
   const handleClose = () => {
     setOpen(false);
   };
 
   const onApplyButton = () => { 
-     if (editorValue != null && editorValue != "" && editorValueIndex < 0) {
-       props.onChange([
-         ...inputValue,
-         editorValue,
-       ]);
-     } else if (editorValue != null && editorValue != "") {
-       props.onChange([
-         ...inputValue.slice(0, editorValueIndex),
-         editorValue,
-         ...inputValue.slice(editorValueIndex+1),
-       ]);
-     }
-     setOpen(false);
+    if (editorValue != null && editorValue != '' && editorValueIndex < 0) {
+      props.onChange([
+        ...inputValue,
+        editorValue,
+      ]);
+    } else if (editorValue != null && editorValue != '') {
+      props.onChange([
+        ...inputValue.slice(0, editorValueIndex),
+        editorValue,
+        ...inputValue.slice(editorValueIndex + 1),
+      ]);
+    }
+    setOpen(false);
   };
 
   const onDelete = (index : number) => {
     const newValue : any[] = [
       ...inputValue.slice(0, index),
-      ...inputValue.slice(index+1),
+      ...inputValue.slice(index + 1),
     ];
     onChange(newValue);
   };
@@ -151,15 +155,15 @@ export const UiElementLeafList = (props: LeafListProps) => {
         { !props.readOnly ? <li>
           <Chip
             icon={<AddIcon />}
-            label={"Add"}
+            label={'Add'}
             className={classes.chip}
             size="small"
             color="secondary"
             onClick={ () => { 
               setOpen(true); 
-              setEditorValue("");
+              setEditorValue('');
               setEditorValueIndex(-1);
-             } 
+            } 
             }
           />
         </li> : null }  
@@ -172,24 +176,24 @@ export const UiElementLeafList = (props: LeafListProps) => {
               label={String(val)}
               onDelete={ !props.readOnly ? () => { onDelete(ind); } : undefined }  
               onClick={ !props.readOnly ? () => { 
-                  setOpen(true); 
-                  setEditorValue(val);
-                  setEditorValueIndex(ind);
-                  } : undefined
+                setOpen(true); 
+                setEditorValue(val);
+                setEditorValueIndex(ind);
+              } : undefined
               }   
             />
             </li>
-          ))
+        ))
         }
         </ul>
         {/* <FormHelperText>{ "Value is mandetory"}</FormHelperText> */}
         </FormControl>
         <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
-          <DialogTitle id="form-dialog-title">{editorValueIndex < 0 ? "Add new value" : "Edit value" } </DialogTitle>
+          <DialogTitle id="form-dialog-title">{editorValueIndex < 0 ? 'Add new value' : 'Edit value' } </DialogTitle>
           <DialogContent>
             { ValueEditor && <ValueEditor 
                 inputValue={ editorValue }
-                value={{ ...element, isList: false}}
+                value={{ ...element, isList: false }}
                 disabled={false}
                 readOnly={props.readOnly}
                 onChange={ setEditorValue }
@@ -197,7 +201,7 @@ export const UiElementLeafList = (props: LeafListProps) => {
           </DialogContent>
           <DialogActions>
             <Button color="inherit" onClick={ handleClose }> Cancel </Button>
-            <Button disabled={editorValue == null || editorValue === "" } onClick={ onApplyButton } color="secondary"> {editorValueIndex < 0 ? "Add" : "Apply"} </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 76c11f6e5..b0342788f 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementNumber.tsx
+++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementNumber.tsx
@@ -16,14 +16,14 @@
  * ============LICENSE_END==========================================================================
  */
 
-import { ViewElementNumber } from "models/uiModels";
+import React from 'react';
+import { ViewElementNumber } from "../models/uiModels";
 import { Tooltip, InputAdornment } from "@mui/material";
-import * as React from 'react';
 import { BaseProps } from "./baseProps";
 import { IfWhenTextInput } from "./ifWhenTextInput";
-import { checkRange } from "./verifyer";
+import { checkRange } from "../utilities/verifyer";
 
-type numberInputProps = BaseProps<any>;
+type numberInputProps = BaseProps<number>;
 
 export const UiElementNumber = (props: numberInputProps) => {
 
@@ -49,12 +49,12 @@ export const UiElementNumber = (props: numberInputProps) => {
       setError(true);
       setHelperText("Input is not a number.");
     }
-    props.onChange(data);
+    props.onChange(num);
   }
 
   return (
     <Tooltip disableInteractive title={isTooltipVisible ? element.description || '' : ''}>
-      <IfWhenTextInput element={element} onChangeTooltipVisuability={setTooltipVisibility}
+      <IfWhenTextInput element={element} onChangeTooltipVisibility={setTooltipVisibility}
         spellCheck={false} autoFocus margin="dense"
         id={element.id} label={element.label} type="text" value={props.inputValue}
         style={{ width: 485, marginLeft: 20, marginRight: 20 }}
diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementReference.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementReference.tsx
index 9e863f0d0..e3bb8f048 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementReference.tsx
+++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementReference.tsx
@@ -17,16 +17,16 @@
  */
 
 import React, { useState } from 'react';
-import { Tooltip, Button, FormControl, Theme } from '@mui/material';
+import { Tooltip, Button, FormControl } from '@mui/material';
 
 import createStyles from '@mui/styles/createStyles';
 import makeStyles from '@mui/styles/makeStyles';
 
 import { ViewElement } from '../models/uiModels';
 
-const useStyles = makeStyles((theme: Theme) => createStyles({
+const useStyles = makeStyles(() => createStyles({
   button: {
-    "justifyContent": "left"
+    'justifyContent': 'left',
   },
 }));
 
@@ -37,16 +37,31 @@ type UIElementReferenceProps = {
 };
 
 export const UIElementReference: React.FC<UIElementReferenceProps> = (props) => {
-  const classes = useStyles();
-  const [disabled, setDisabled] = useState(true);
   const { element } = props;
+  const [disabled, setDisabled] = useState(true);
+  const classes = useStyles();
   return (
-    <FormControl variant="standard" key={element.id} style={{ width: 485, marginLeft: 20, marginRight: 20 }} onMouseDown={(ev) => { ev.preventDefault(); ev.stopPropagation(); ev.button === 1 && setDisabled(!disabled) }}>
+    <FormControl
+      variant="standard"
+      key={element.id}
+      style={{ width: 485, marginLeft: 20, marginRight: 20 }}
+      onMouseDown={(ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        if (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>
+        <Button
+          className={classes.button}
+          aria-label={element.label + '-button'}
+          color="secondary"
+          disabled={props.disabled && disabled}
+          onClick={() => {
+            props.onOpenReference(element);
+          }}  >{`${element.label}`}</Button>
       </Tooltip>
     </FormControl>
   );
-}
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementSelection.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementSelection.tsx
index fdf803419..ebd04dab4 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementSelection.tsx
+++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementSelection.tsx
@@ -16,45 +16,54 @@
  * ============LICENSE_END==========================================================================
  */
 
-import * as React from 'react';
+import React from 'react';
 import { BaseProps } from './baseProps';
-import { ViewElementSelection } from '../models/uiModels'
+import { ViewElementSelection } from '../models/uiModels';
 import { FormControl, InputLabel, Select, FormHelperText, MenuItem, Tooltip } from '@mui/material';
 
 type selectionProps = BaseProps;
 
 export const UiElementSelection = (props: selectionProps) => {
 
-    const element = props.value as ViewElementSelection;
+  const element = props.value as ViewElementSelection;
 
-    let error = "";
-    const value = String(props.inputValue);
-    if (element.mandatory && Boolean(!value)) {
-        error = "Error";
-    }
+  let error = '';
+  const value = String(props.inputValue);
+  if (element.mandatory && Boolean(!value)) {
+    error = 'Error';
+  }
 
-    return (props.readOnly || props.inputValue != null
-        ? (<FormControl variant="standard" style={{ width: 485, marginLeft: 20, marginRight: 20 }}>
-            <InputLabel htmlFor={`select-${element.id}`} >{element.label}</InputLabel>
+  return (props.readOnly || props.inputValue != null
+    ? (<FormControl variant="standard" style={{ width: 485, marginLeft: 20, marginRight: 20 }}>
+         <InputLabel htmlFor={`select-${element.id}`} >{element.label}</InputLabel>
             <Select variant="standard"
                 required={!!element.mandatory}
                 error={!!error}
-                onChange={(e) => { props.onChange(e.target.value as string) }}
+                onChange={(e) => { props.onChange(e.target.value as string); }}
                 readOnly={props.readOnly}
                 disabled={props.disabled}
                 value={value.toString()}
-                aria-label={element.label+'-selection'}
+                aria-label={element.label + '-selection'}
                 inputProps={{
-                    name: element.id,
-                    id: `select-${element.id}`,
+                  name: element.id,
+                  id: `select-${element.id}`,
                 }}
             >
-          {element.options.map(option => (
-            <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>
-          ))}
+                {element.options.map(option => (
+                    <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>
         </FormControl>)
-        : null
-    );
-}
\ No newline at end of file
+    : null
+  );
+};
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementString.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementString.tsx
index 4908c41aa..8381d99a4 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementString.tsx
+++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementString.tsx
@@ -21,7 +21,7 @@ import { Tooltip, TextField } from "@mui/material";
 import { ViewElementString } from "../models/uiModels";
 import { BaseProps } from "./baseProps";
 import { IfWhenTextInput } from "./ifWhenTextInput";
-import { checkRange, checkPattern } from "./verifyer";
+import { checkRange, checkPattern } from "../utilities/verifyer";
 
 type stringEntryProps = BaseProps ;
 
@@ -69,7 +69,7 @@ export const UiElementString = (props: stringEntryProps) => {
 
     return (
         <Tooltip disableInteractive title={isTooltipVisible ? element.description || '' : ''}>
-            <IfWhenTextInput element={element} onChangeTooltipVisuability={setTooltipVisibility}
+            <IfWhenTextInput element={element} onChangeTooltipVisibility={setTooltipVisibility}
                 spellCheck={false} autoFocus margin="dense"
                 id={element.id} label={props?.isKey ? "🔑 " + element.label : element.label} type="text" value={props.inputValue}
                 style={{ width: 485, marginLeft: 20, marginRight: 20 }}
diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementUnion.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementUnion.tsx
index 67cd998d7..8d232f5ee 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementUnion.tsx
+++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementUnion.tsx
@@ -21,7 +21,7 @@ import { BaseProps } from './baseProps';
 import { Tooltip } from '@mui/material';
 import { IfWhenTextInput } from './ifWhenTextInput';
 import { ViewElementUnion, isViewElementString, isViewElementNumber, isViewElementObject, ViewElementNumber } from '../models/uiModels';
-import { checkRange, checkPattern } from './verifyer';
+import { checkRange, checkPattern } from '../utilities/verifyer';
 
 type UiElementUnionProps = { isKey: boolean } & BaseProps;
 
@@ -77,7 +77,7 @@ export const UIElementUnion = (props: UiElementUnionProps) => {
   };
 
   return <Tooltip disableInteractive title={isTooltipVisible ? element.description || '' : ''}>
-    <IfWhenTextInput element={element} onChangeTooltipVisuability={setTooltipVisibility}
+    <IfWhenTextInput element={element} onChangeTooltipVisibility={setTooltipVisibility}
       spellCheck={false} autoFocus margin="dense"
       id={element.id} label={props.isKey ? "🔑 " + element.label : element.label} type="text" value={props.inputValue}
       onChange={(e: any) => { verifyValues(e.target.value) }}
diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/verifyer.ts b/sdnr/wt/odlux/apps/configurationApp/src/components/verifyer.ts
deleted file mode 100644
index 0a95cd8ca..000000000
--- a/sdnr/wt/odlux/apps/configurationApp/src/components/verifyer.ts
+++ /dev/null
@@ -1,280 +0,0 @@
-/**
- * ============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 { Expression, YangRange, Operator, ViewElementNumber, ViewElementString, isViewElementNumber, isViewElementString } from '../models/uiModels';
-
-export type validated = { isValid: boolean, error?: string }
-
-export type validatedRange = { isValid: boolean, error?: string };
-
-
-const rangeErrorStartNumber = "The entered number must be";
-const rangeErrorinnerMinTextNumber = "greater or equals than";
-const rangeErrorinnerMaxTextNumber = "less or equals than";
-const rangeErrorEndTextNumber = ".";
-
-const rangeErrorStartString = "The entered text must have";
-const rangeErrorinnerMinTextString = "no more than";
-const rangeErrorinnerMaxTextString = "less than";
-const rangeErrorEndTextString = " characters.";
-
-let errorMessageStart = "";
-let errorMessageMiddleMinPart = "";
-let errorMessageMiddleMaxPart = "";
-let errorMessageEnd = "";
-
-
-export function checkRange(element: ViewElementNumber | ViewElementString, data: number): string {
-
-    //let test1: Operator<YangRange> = { operation: "AND", arguments: [{ operation: "OR", arguments: [{ operation: "AND", arguments: [new RegExp("^z", "g"), new RegExp("z$", "g")] }, new RegExp("^abc", "g"), new RegExp("^123", "g")] }, new RegExp("^def", "g"), new RegExp("^ppp", "g"), new RegExp("^aaa", "g")] };
-    //let test1: Operator<YangRange> = { operation: "AND", arguments: [{ operation: "OR", arguments: [{ operation: "AND", arguments: [{ min: -5, max: 10 }, { min: -30, max: -20 }] }, { min: 8, max: 15 }] }] };
-    //let test1: Operator<YangRange> = { operation: "OR", arguments: [{ operation: "OR", arguments: [{ min: -50, max: -40 }] }, { min: -30, max: -20 }, { min: 8, max: 15 }] };
-    //let test1: Operator<YangRange> = { operation: "AND", arguments: [{ operation: "OR", arguments: [{ min: -5, max: 10 }, { min: 17, max: 23 }] }] };
-
-    const number = data;
-
-    var expression = undefined;
-
-    if (isViewElementString(element)) {
-        expression = element.length;
-
-        errorMessageStart = rangeErrorStartString;
-        errorMessageMiddleMaxPart = rangeErrorinnerMaxTextString;
-        errorMessageMiddleMinPart = rangeErrorinnerMinTextString;
-        errorMessageEnd = rangeErrorEndTextString;
-
-    } else if (isViewElementNumber(element)) {
-        expression = element.range;
-
-        errorMessageStart = rangeErrorStartNumber;
-        errorMessageMiddleMaxPart = rangeErrorinnerMaxTextNumber;
-        errorMessageMiddleMinPart = rangeErrorinnerMinTextNumber;
-        errorMessageEnd = rangeErrorEndTextNumber;
-    }
-
-    if (expression) {
-        if (isYangOperator(expression)) {
-
-            const errorMessage = getRangeErrorMessages(expression, data);
-            return errorMessage;
-
-        } else
-            if (isYangRange(expression)) {
-
-                if (!isNaN(expression.min)) {
-                    if (number < expression.min) {
-                        return `${errorMessageStart} ${errorMessageMiddleMinPart} ${expression.min}${errorMessageEnd}`;
-                    }
-                }
-
-                if (!isNaN(expression.max)) {
-                    if (number > expression.max) {
-                        return `${errorMessageStart} ${errorMessageMiddleMaxPart} ${expression.max}${errorMessageEnd}`;
-                    }
-                }
-            }
-    }
-
-
-    return "";
-}
-
-function isYangRange(val: YangRange | Operator<YangRange>): val is YangRange {
-    return (val as YangRange).min !== undefined;
-}
-
-function isYangOperator(val: YangRange | Operator<YangRange>): val is Operator<YangRange> {
-    return (val as Operator<YangRange>).operation !== undefined;
-}
-
-function getRangeErrorMessagesRecursively(value: Operator<YangRange>, data: number): string[] {
-    let currentItteration: string[] = [];
-    console.log(value);
-
-    // itterate over all elements
-    for (let i = 0; i < value.arguments.length; i++) {
-        const element = value.arguments[i];
-
-        let min = undefined;
-        let max = undefined;
-
-        let isNumberCorrect = false;
-
-        if (isYangRange(element)) {
-
-            //check found min values
-            if (!isNaN(element.min)) {
-                if (data < element.min) {
-                    min = element.min;
-                } else {
-                    isNumberCorrect = true;
-                }
-            }
-
-            // check found max values
-            if (!isNaN(element.max)) {
-                if (data > element.max) {
-                    max = element.max;
-                } else {
-                    isNumberCorrect = true;
-                }
-            }
-
-            // construct error messages
-            if (min != undefined) {
-                currentItteration.push(`${value.operation.toLocaleLowerCase()} ${errorMessageMiddleMinPart} ${min}`);
-            } else if (max != undefined) {
-                currentItteration.push(`${value.operation.toLocaleLowerCase()} ${errorMessageMiddleMaxPart} ${max}`);
-
-            }
-
-        } else if (isYangOperator(element)) {
-
-            //get errormessages from expression
-            const result = getRangeErrorMessagesRecursively(element, data);
-            if (result.length === 0) {
-                isNumberCorrect = true;
-            }
-            currentItteration = currentItteration.concat(result);
-        }
-
-        // if its an OR operation, the number has been checked and min/max are empty (thus not violated)
-        // delete everything found (because at least one found is correct, therefore all are correct) and break from loop
-        if (min === undefined && max === undefined && isNumberCorrect && value.operation === "OR") {
-
-            currentItteration.splice(0, currentItteration.length);
-            break;
-        }
-    }
-
-    return currentItteration;
-}
-
-function getRangeErrorMessages(value: Operator<YangRange>, data: number): string {
-
-    const currentItteration = getRangeErrorMessagesRecursively(value, data);
-
-    // build complete error message from found parts
-    let errormessage = "";
-    if (currentItteration.length > 1) {
-
-        currentItteration.forEach((element, index) => {
-            if (index === 0) {
-                errormessage = createStartMessage(element);
-            } else if (index === currentItteration.length - 1) {
-                errormessage += ` ${element}${errorMessageEnd}`;
-            } else {
-                errormessage += `, ${element}`
-            }
-        });
-    } else if (currentItteration.length == 1) {
-        errormessage = `${createStartMessage(currentItteration[0])}${errorMessageEnd}`;
-    }
-
-    return errormessage;
-}
-
-function createStartMessage(element: string) {
-
-    //remove leading or or and from text
-    if (element.startsWith("and"))
-        element = element.replace("and", "");
-    else if (element.startsWith("or"))
-        element = element.replace("or", "");
-
-    return `${errorMessageStart} ${element}`;
-}
-
-export const checkPattern = (expression: RegExp | Operator<RegExp> | undefined, data: string): validated => {
-
-    if (expression) {
-        if (isRegExp(expression)) {
-            const isValid = expression.test(data);
-            if (!isValid)
-                return { isValid: isValid, error: "The input is in a wrong format." };
-
-        } else if (isRegExpOperator(expression)) {
-            const result = isPatternValid(expression, data);
-
-            if (!result) {
-                return { isValid: false, error: "The input is in a wrong format." };
-            }
-        }
-    }
-
-    return { isValid: true }
-}
-
-function getRegexRecursively(value: Operator<RegExp>, data: string): boolean[] {
-    let currentItteration: boolean[] = [];
-    for (let i = 0; i < value.arguments.length; i++) {
-        const element = value.arguments[i];
-        if (isRegExp(element)) {
-            // if regex is found, add it to list
-            currentItteration.push(element.test(data))
-        } else if (isRegExpOperator(element)) {
-            //if RegexExpression is found, try to get regex from it
-            currentItteration = currentItteration.concat(getRegexRecursively(element, data));
-        }
-    }
-
-    if (value.operation === "OR") {
-        // if one is true, all are true, all found items can be discarded
-        let result = currentItteration.find(element => element);
-        if (result) {
-            return [];
-        }
-    }
-    return currentItteration;
-}
-
-function isPatternValid(value: Operator<RegExp>, data: string): boolean {
-
-
-    // get all regex
-    const result = getRegexRecursively(value, data);
-    console.log(value);
-
-
-    if (value.operation === "AND") {
-        // if AND operation is executed...
-        // no element can be false
-        const check = result.find(element => element !== true);
-        if (check)
-            return false;
-        else
-            return true;
-    } else {
-        // if OR operation is executed...
-        // ... just one element must be true
-        const check = result.find(element => element === true);
-        if (check)
-            return true;
-        else
-            return false;
-
-    }
-}
-
-function isRegExp(val: RegExp | Operator<RegExp>): val is RegExp {
-    return (val as RegExp).source !== undefined;
-}
-
-function isRegExpOperator(val: RegExp | Operator<RegExp>): val is Operator<RegExp> {
-    return (val as Operator<RegExp>).operation !== undefined;
-}
\ No newline at end of file