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
---
 .../wt/odlux/apps/inventoryApp/src/views/dashboard.tsx | 10 +++++-----
 sdnr/wt/odlux/apps/inventoryApp/src/views/detail.tsx   | 10 +++++++---
 sdnr/wt/odlux/apps/inventoryApp/src/views/treeview.tsx | 18 +++++++++++-------
 3 files changed, 23 insertions(+), 15 deletions(-)

(limited to 'sdnr/wt/odlux/apps/inventoryApp/src/views')

diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/views/dashboard.tsx b/sdnr/wt/odlux/apps/inventoryApp/src/views/dashboard.tsx
index 0a1bea0f1..284f70239 100644
--- a/sdnr/wt/odlux/apps/inventoryApp/src/views/dashboard.tsx
+++ b/sdnr/wt/odlux/apps/inventoryApp/src/views/dashboard.tsx
@@ -22,8 +22,8 @@ import { RouteComponentProps, withRouter } from 'react-router-dom';
 import connect, { IDispatcher, Connect } from "../../../../framework/src/flux/connect";
 import { IApplicationStoreState } from "../../../../framework/src/store/applicationStore";
 import { MaterialTable, MaterialTableCtorType, ColumnType } from "../../../../framework/src/components/material-table";
-import { AppBar, Tabs, Tab, MenuItem, Typography } from "@material-ui/core";
-import Refresh from '@material-ui/icons/Refresh';
+import { AppBar, Tabs, Tab, MenuItem, Typography } from "@mui/material";
+import Refresh from '@mui/icons-material/Refresh';
 import { PanelId } from "../models/panelId";
 import { setPanelAction } from "../actions/panelActions";
 
@@ -77,7 +77,7 @@ class DashboardSelectorComponent extends React.Component<DashboardComponentProps
     };
   }
 
-  private onHandleTabChange = (event: React.ChangeEvent<{}>, newValue: PanelId) => {
+  private onHandleTabChange = (event: React.SyntheticEvent, newValue: PanelId) => {
     this.onTogglePanel(newValue);
   }
 
@@ -133,8 +133,8 @@ class DashboardSelectorComponent extends React.Component<DashboardComponentProps
     const { panelId: activePanelId } = this.props;
     return (
       <>
-        <AppBar position="static">
-          <Tabs value={activePanelId} onChange={this.onHandleTabChange} aria-label="inventory-app-tabs">
+        <AppBar enableColorOnDark position="static">
+          <Tabs indicatorColor="secondary" textColor="inherit" value={activePanelId} onChange={this.onHandleTabChange} aria-label="inventory-app-tabs">
             <Tab label="Table View" value="InventoryElementsTable" aria-label="table-tab" />
             <Tab label="Tree view" value="TreeviewTable" aria-label="treeview-tab" />
           </Tabs>
diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/views/detail.tsx b/sdnr/wt/odlux/apps/inventoryApp/src/views/detail.tsx
index f03b30cdd..252663935 100644
--- a/sdnr/wt/odlux/apps/inventoryApp/src/views/detail.tsx
+++ b/sdnr/wt/odlux/apps/inventoryApp/src/views/detail.tsx
@@ -18,8 +18,12 @@
 import * as React from "react";
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 
-import Button from '@material-ui/core/Button';
-import { WithStyles, withStyles, createStyles, Theme } from '@material-ui/core/styles'; // infra for styling
+import Button from '@mui/material/Button';
+import { Theme } from '@mui/material/styles'; // infra for styling
+
+import { WithStyles } from '@mui/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
 
 const styles = (theme: Theme) => createStyles({
   warnButton: {
@@ -34,7 +38,7 @@ export const Detail = withStyles( styles )( withRouter( (props: DetailProps) =>
     <h1>Detail {props.match.params.id}</h1>
     <p>This are the information about {props.staticContext}.</p>
     <Button color={"secondary"} variant={"contained"}>Start</Button>
-    <Button className={ props.classes.warnButton } variant={"contained"}>Stop</Button>
+    <Button color="inherit" className={ props.classes.warnButton } variant={"contained"}>Stop</Button>
   </div>
 )));
 
diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/views/treeview.tsx b/sdnr/wt/odlux/apps/inventoryApp/src/views/treeview.tsx
index cfcfd3fec..b0e962daa 100644
--- a/sdnr/wt/odlux/apps/inventoryApp/src/views/treeview.tsx
+++ b/sdnr/wt/odlux/apps/inventoryApp/src/views/treeview.tsx
@@ -16,7 +16,11 @@
  * ============LICENSE_END==========================================================================
  */
 import * as React from "react";
-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 { renderObject } from '../../../../framework/src/components/objectDump';
 import { Connect, connect, IDispatcher } from '../../../../framework/src/flux/connect';
@@ -24,8 +28,8 @@ import { TreeView, TreeViewCtorType, SearchMode } from '../../../../framework/sr
 
 import { IApplicationStoreState } from "../../../../framework/src/store/applicationStore";
 
-import Breadcrumbs from '@material-ui/core/Breadcrumbs';
-import Link from '@material-ui/core/Link';
+import Breadcrumbs from '@mui/material/Breadcrumbs';
+import Link from '@mui/material/Link';
 
 import { updateInventoryTreeAsyncAction, selectInventoryNodeAsyncAction, UpdateSelectedNodeAction, UpdateExpandedNodesAction, setSearchTermAction } from "../actions/inventoryTreeActions";
 import { TreeDemoItem } from "../models/inventory";
@@ -41,11 +45,11 @@ const styles = (theme: Theme) => createStyles({
   tree: {
     flex: "1 0 0%",
     minWidth: "250px",
-    padding: `0px ${theme.spacing(1)}px`
+    padding: `0px ${theme.spacing(1)}`
   },
   details: {
     flex: "5 0 0%",
-    padding: `0px ${theme.spacing(1)}px`
+    padding: `0px ${theme.spacing(1)}`
   }
 });
 
@@ -108,12 +112,12 @@ class DashboardComponent extends React.Component<TreeviewComponentProps, Treevie
       <div style={scrollbar} >
         <div >
           <Breadcrumbs aria-label="breadcrumbs">
-            <Link color="inherit" href="#" aria-label="back-breadcrumb"
+            <Link underline="hover" color="inherit" href="#" aria-label="back-breadcrumb"
               onClick={(event: React.MouseEvent<HTMLElement>) => {
                 event.preventDefault();
                 this.props.history.push(filteredDashboardPath);
               }}>Back</Link>
-            <Link color="inherit" href="#"
+            <Link underline="hover" color="inherit" href="#"
               aria-label={this.props.match.params.mountId + '-breadcrumb'}
               onClick={(event: React.MouseEvent<HTMLElement>) => {
                 event.preventDefault();
-- 
cgit 1.2.3-korg