diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/inventoryApp')
6 files changed, 44 insertions, 33 deletions
diff --git a/sdnr/wt/odlux/apps/inventoryApp/package.json b/sdnr/wt/odlux/apps/inventoryApp/package.json index e78f3ac82..5e37c52bb 100644 --- a/sdnr/wt/odlux/apps/inventoryApp/package.json +++ b/sdnr/wt/odlux/apps/inventoryApp/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/inventoryApp/src/components/refreshInventoryDialog.tsx b/sdnr/wt/odlux/apps/inventoryApp/src/components/refreshInventoryDialog.tsx index d2efb4e97..04658a319 100644 --- a/sdnr/wt/odlux/apps/inventoryApp/src/components/refreshInventoryDialog.tsx +++ b/sdnr/wt/odlux/apps/inventoryApp/src/components/refreshInventoryDialog.tsx @@ -17,12 +17,12 @@ */ import * as React from 'react'; -import Button from '@material-ui/core/Button'; -import Dialog from '@material-ui/core/Dialog'; -import DialogActions from '@material-ui/core/DialogActions'; -import DialogContent from '@material-ui/core/DialogContent'; -import DialogContentText from '@material-ui/core/DialogContentText'; -import DialogTitle from '@material-ui/core/DialogTitle'; +import Button from '@mui/material/Button'; +import Dialog from '@mui/material/Dialog'; +import DialogActions from '@mui/material/DialogActions'; +import DialogContent from '@mui/material/DialogContent'; +import DialogContentText from '@mui/material/DialogContentText'; +import DialogTitle from '@mui/material/DialogTitle'; import { inventoryElementsReloadAction } from '../handlers/inventoryElementsHandler'; import { IDispatcher, connect, Connect } from '../../../../framework/src/flux/connect'; @@ -94,13 +94,13 @@ class RefreshInventoryDialogComponent extends React.Component<RefreshInventoryDi <DialogActions> <Button aria-label="dialog-confirm-button" onClick={(event) => { this.onRefresh(); - }} > {setting.applyButtonText} </Button> + }} color="inherit" > {setting.applyButtonText} </Button> <Button aria-label="dialog-cancel-button" onClick={(event) => { this.onCancel(); }} color="secondary"> {setting.cancelButtonText} </Button> </DialogActions> </Dialog> - ) + ); } private onRefresh = () => { 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(); diff --git a/sdnr/wt/odlux/apps/inventoryApp/webpack.config.js b/sdnr/wt/odlux/apps/inventoryApp/webpack.config.js index 3668cf03a..403cc53f5 100644 --- a/sdnr/wt/odlux/apps/inventoryApp/webpack.config.js +++ b/sdnr/wt/odlux/apps/inventoryApp/webpack.config.js @@ -86,7 +86,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'", @@ -104,7 +104,7 @@ module.exports = (env) => { from: 'index.html', to: distPath }]), - ] + ]) ], devServer: { |