summaryrefslogtreecommitdiffstats
path: root/sdnr/wt/odlux/framework/src/components
diff options
context:
space:
mode:
authorDan Timoney <dtimoney@att.com>2022-02-03 16:41:14 +0000
committerGerrit Code Review <gerrit@onap.org>2022-02-03 16:41:14 +0000
commit652d7ca972652ef437769cc2e88afddbb7f06ca2 (patch)
tree08da4fc171617be44aa95cf7d80a5cec1468de8d /sdnr/wt/odlux/framework/src/components
parentf23a3d5d957c4c510a7436c0acba57d95e4a13ce (diff)
parent1a868116614dd9996c78e69941b537e9da19460b (diff)
Merge "Update ODLUX"
Diffstat (limited to 'sdnr/wt/odlux/framework/src/components')
-rw-r--r--sdnr/wt/odlux/framework/src/components/errorDisplay.tsx20
-rw-r--r--sdnr/wt/odlux/framework/src/components/logo.tsx7
-rw-r--r--sdnr/wt/odlux/framework/src/components/material-table/columnModel.ts108
-rw-r--r--sdnr/wt/odlux/framework/src/components/material-table/index.tsx51
-rw-r--r--sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx35
-rw-r--r--sdnr/wt/odlux/framework/src/components/material-table/tableHead.tsx42
-rw-r--r--sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx62
-rw-r--r--sdnr/wt/odlux/framework/src/components/material-ui/listItemLink.tsx147
-rw-r--r--sdnr/wt/odlux/framework/src/components/material-ui/loader.tsx6
-rw-r--r--sdnr/wt/odlux/framework/src/components/material-ui/panel.tsx147
-rw-r--r--sdnr/wt/odlux/framework/src/components/material-ui/toggleButton.tsx358
-rw-r--r--sdnr/wt/odlux/framework/src/components/material-ui/toggleButtonGroup.tsx6
-rw-r--r--sdnr/wt/odlux/framework/src/components/material-ui/treeView.tsx89
-rw-r--r--sdnr/wt/odlux/framework/src/components/navigationMenu.tsx430
-rw-r--r--sdnr/wt/odlux/framework/src/components/objectDump/index.tsx2
-rw-r--r--sdnr/wt/odlux/framework/src/components/routing/appFrame.tsx108
-rw-r--r--sdnr/wt/odlux/framework/src/components/settings/general.tsx9
-rw-r--r--sdnr/wt/odlux/framework/src/components/titleBar.tsx442
18 files changed, 1094 insertions, 975 deletions
diff --git a/sdnr/wt/odlux/framework/src/components/errorDisplay.tsx b/sdnr/wt/odlux/framework/src/components/errorDisplay.tsx
index b2a1f1f20..a04ab16af 100644
--- a/sdnr/wt/odlux/framework/src/components/errorDisplay.tsx
+++ b/sdnr/wt/odlux/framework/src/components/errorDisplay.tsx
@@ -16,14 +16,18 @@
* ============LICENSE_END==========================================================================
*/
import * as React from 'react';
-import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';
+import { Theme } from '@mui/material/styles';
-import Modal from '@material-ui/core/Modal';
-import Button from '@material-ui/core/Button';
-import Card from '@material-ui/core/Card';
-import CardActions from '@material-ui/core/CardActions';
-import CardContent from '@material-ui/core/CardContent';
-import Typography from '@material-ui/core/Typography';
+import { WithStyles } from '@mui/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
+
+import Modal from '@mui/material/Modal';
+import Button from '@mui/material/Button';
+import Card from '@mui/material/Card';
+import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
import { ClearErrorInfoAction, RemoveErrorInfoAction } from '../actions/errorActions';
@@ -113,7 +117,7 @@ class ErrorDisplayComponent extends React.Component<ErrorDisplayProps> {
</Typography>
</CardContent>
<CardActions>
- <Button size="small" onClick={() => this.props.dispatch(new RemoveErrorInfoAction(errorInfo))} >Close</Button>
+ <Button color="inherit" size="small" onClick={() => this.props.dispatch(new RemoveErrorInfoAction(errorInfo))} >Close</Button>
</CardActions>
</Card>
</div> || <div></div>
diff --git a/sdnr/wt/odlux/framework/src/components/logo.tsx b/sdnr/wt/odlux/framework/src/components/logo.tsx
index 470eb9620..b10cc8ce1 100644
--- a/sdnr/wt/odlux/framework/src/components/logo.tsx
+++ b/sdnr/wt/odlux/framework/src/components/logo.tsx
@@ -34,7 +34,12 @@
import * as React from 'react';
import { withRouter, RouteComponentProps } from 'react-router-dom';
-import { WithStyles, withStyles, createStyles, Theme } from '@material-ui/core/styles'; // infra for styling
+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';
import defaultLogo from '../assets/images/defaultLogo.svg';
diff --git a/sdnr/wt/odlux/framework/src/components/material-table/columnModel.ts b/sdnr/wt/odlux/framework/src/components/material-table/columnModel.ts
index 8124e450d..ce5b2cd1e 100644
--- a/sdnr/wt/odlux/framework/src/components/material-table/columnModel.ts
+++ b/sdnr/wt/odlux/framework/src/components/material-table/columnModel.ts
@@ -1,55 +1,55 @@
-/**
- * ============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 * as React from 'react';
-
-export enum ColumnType {
- text,
- numeric,
- boolean,
- date,
- custom
-}
-
-type CustomControl<TData> = {
- className?: string;
- style?: React.CSSProperties;
- rowData: TData;
-}
-
-export type ColumnModel<TData> = {
- title?: string;
- disablePadding?: boolean;
- width?: string | number ;
- className?: string;
- style?: React.CSSProperties;
- align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
- disableSorting?: boolean;
- disableFilter?: boolean;
-} & ({
- property: string;
- type: ColumnType.custom;
- customControl: React.ComponentType<CustomControl<TData>>;
-} | {
- property: keyof TData;
- type: ColumnType.boolean;
- labels?: { "true": string, "false": string };
-} | {
- property: keyof TData;
- type?: ColumnType.numeric | ColumnType.text | ColumnType.date;
+/**
+ * ============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 * as React from 'react';
+
+export enum ColumnType {
+ text,
+ numeric,
+ boolean,
+ date,
+ custom
+}
+
+type CustomControl<TData> = {
+ className?: string;
+ style?: React.CSSProperties;
+ rowData: TData;
+}
+
+export type ColumnModel<TData> = {
+ title?: string;
+ disablePadding?: boolean;
+ width?: string | number ;
+ className?: string;
+ style?: React.CSSProperties;
+ align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
+ disableSorting?: boolean;
+ disableFilter?: boolean;
+} & ({
+ property: string;
+ type: ColumnType.custom;
+ customControl: React.ComponentType<CustomControl<TData>>;
+} | {
+ property: keyof TData;
+ type: ColumnType.boolean;
+ labels?: { "true": string, "false": string };
+} | {
+ property: keyof TData;
+ type?: ColumnType.numeric | ColumnType.text | ColumnType.date;
}); \ No newline at end of file
diff --git a/sdnr/wt/odlux/framework/src/components/material-table/index.tsx b/sdnr/wt/odlux/framework/src/components/material-table/index.tsx
index cb675218f..aac2a1252 100644
--- a/sdnr/wt/odlux/framework/src/components/material-table/index.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-table/index.tsx
@@ -16,29 +16,36 @@
* ============LICENSE_END==========================================================================
*/
import * as React from 'react';
-import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';
+import { Theme } from '@mui/material/styles';
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableContainer from '@material-ui/core/TableContainer';
-import TablePagination from '@material-ui/core/TablePagination';
-import TableRow from '@material-ui/core/TableRow';
-import Paper from '@material-ui/core/Paper';
-import Checkbox from '@material-ui/core/Checkbox';
+import { WithStyles } from '@mui/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
+
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TablePagination from '@mui/material/TablePagination';
+import TableRow from '@mui/material/TableRow';
+import Paper from '@mui/material/Paper';
+import Checkbox from '@mui/material/Checkbox';
import { TableToolbar } from './tableToolbar';
import { EnhancedTableHead } from './tableHead';
import { EnhancedTableFilter } from './tableFilter';
import { ColumnModel, ColumnType } from './columnModel';
-import { Omit, Menu, makeStyles } from '@material-ui/core';
+import { Menu } from '@mui/material';
+import { DistributiveOmit } from '@mui/types';
+
+import makeStyles from '@mui/styles/makeStyles';
-import { SvgIconProps } from '@material-ui/core/SvgIcon/SvgIcon';
+import { SvgIconProps } from '@mui/material/SvgIcon';
-import { DividerTypeMap } from '@material-ui/core/Divider';
-import { MenuItemProps } from '@material-ui/core/MenuItem';
-import { flexbox } from '@material-ui/system';
+import { DividerTypeMap } from '@mui/material/Divider';
+import { MenuItemProps } from '@mui/material/MenuItem';
+import { flexbox } from '@mui/system';
import { RowDisabled } from './utilities';
import { toAriaLabel } from '../../utilities/yangHelper';
export { ColumnModel, ColumnType } from './columnModel';
@@ -51,7 +58,7 @@ export type DataCallback<TData = dataType> = (page?: number, rowsPerPage?: numbe
function regExpEscape(s: string) {
return s.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');
-};
+}
function wildcardCheck(input: string, pattern: string) {
if (!pattern) return true;
@@ -61,7 +68,7 @@ function wildcardCheck(input: string, pattern: string) {
(!pattern.endsWith('*') ? '$' : '')
);
return input.match(regex) !== null && input.match(regex)!.length >= 1;
-};
+}
function desc(a: dataType, b: dataType, orderBy: string) {
if ((b[orderBy] || "") < (a[orderBy] || "")) {
@@ -240,7 +247,7 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate
<TableContainer className={classes.container}>
<TableToolbar tableId={this.props.tableId} numSelected={selected && selected.length} title={this.props.title} customActionButtons={this.props.customActionButtons} onExportToCsv={this.exportToCsv}
onToggleFilter={toggleFilter} />
- <Table aria-label={this.props.tableId ? this.props.tableId : 'tableTitle'} stickyHeader={this.props.stickyHeader || false} >
+ <Table padding="normal" aria-label={this.props.tableId ? this.props.tableId : 'tableTitle'} stickyHeader={this.props.stickyHeader || false} >
<EnhancedTableHead
columns={columns}
numSelected={selected && selected.length}
@@ -330,15 +337,15 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate
count={rowCount}
rowsPerPage={rowsPerPage}
page={page}
- aria-label={"table-pagination-footer" }
+ aria-label={this.props.isPopup ? "popup-table-pagination-footer" : "table-pagination-footer" }
backIconButtonProps={{
'aria-label': this.props.isPopup ? 'popup-previous-page' : 'previous-page',
}}
nextIconButtonProps={{
'aria-label': this.props.isPopup ? 'popup-next-page': 'next-page',
}}
- onChangePage={this.onHandleChangePage}
- onChangeRowsPerPage={this.onHandleChangeRowsPerPage}
+ onPageChange={this.onHandleChangePage}
+ onRowsPerPageChange={this.onHandleChangeRowsPerPage}
/>
</Paper>
);
@@ -371,7 +378,7 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate
private static updateRows(props: MaterialTableComponentPropsWithRows, state: MaterialTableComponentState): { rows: {}[], total: number, page: number } {
- let data = [...props.rows as dataType[] || []];
+ let data = [...(props.rows as dataType[] || [])];
const columns = props.columns;
const { page, rowsPerPage, order, orderBy, filter } = state;
@@ -661,7 +668,7 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate
}
}
-export type MaterialTableCtorType<TData extends {} = {}> = new () => React.Component<Omit<MaterialTableComponentProps<TData>, 'classes'>>;
+export type MaterialTableCtorType<TData extends {} = {}> = new () => React.Component<DistributiveOmit<MaterialTableComponentProps<TData>, 'classes'>>;
export const MaterialTable = withStyles(styles)(MaterialTableComponent);
export default MaterialTable; \ No newline at end of file
diff --git a/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx b/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx
index e4cc5ab7c..a46dd18d8 100644
--- a/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx
@@ -18,13 +18,18 @@
import * as React from 'react';
import { ColumnModel, ColumnType } from './columnModel';
-import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';
+import { Theme } from '@mui/material/styles';
-import TableCell from '@material-ui/core/TableCell';
-import TableRow from '@material-ui/core/TableRow';
-import Input from '@material-ui/core/Input';
-import { Select, FormControl, InputLabel, MenuItem } from '@material-ui/core';
+import { WithStyles } from '@mui/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
+
+
+import TableCell from '@mui/material/TableCell';
+import TableRow from '@mui/material/TableRow';
+import Input from '@mui/material/Input';
+import { Select, FormControl, InputLabel, MenuItem, SelectChangeEvent } from '@mui/material';
import { toAriaLabel } from '../../utilities/yangHelper';
@@ -49,9 +54,13 @@ interface IEnhancedTableFilterComponentProps extends WithStyles<typeof styles> {
}
class EnhancedTableFilterComponent extends React.Component<IEnhancedTableFilterComponentProps> {
- createFilterHandler = (property: string) => (event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
- this.props.onFilterChanged && this.props.onFilterChanged(property, event.target.value);
+ createSelectFilterHandler = (property: string) => (event: SelectChangeEvent<HTMLSelectElement | string>) => {
+ this.props.onFilterChanged && this.props.onFilterChanged(property, event.target.value as string);
};
+ createInputFilterHandler = (property: string) => (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
+ this.props.onFilterChanged && this.props.onFilterChanged(property, event.currentTarget.value);
+ };
+
render() {
const { columns, filter, classes } = this.props;
@@ -68,20 +77,26 @@ class EnhancedTableFilterComponent extends React.Component<IEnhancedTableFilterC
<TableCell
className={col.type === ColumnType.numeric ? classes.numberInput : ''}
key={col.property}
- padding={col.disablePadding ? 'none' : 'default'}
+ padding={col.disablePadding ? 'none' : 'normal'}
style={style}
>
{col.disableFilter || (col.type === ColumnType.custom)
? null
: (col.type === ColumnType.boolean)
- ? <Select className={classes.input} aria-label={col.title ? toAriaLabel(col.title as string) + '-filter' : `${ind + 1}-filter`} value={filter[col.property] !== undefined ? filter[col.property] : ''} onChange={this.createFilterHandler(col.property)} inputProps={{ name: `${col.property}-bool`, id: `${col.property}-bool` }} >
+ ? <Select variant="standard" className={classes.input} aria-label={col.title ? toAriaLabel(col.title as string) + '-filter' : `${ind + 1}-filter`}
+ value={filter[col.property] !== undefined ? filter[col.property] : ''}
+ onChange={this.createSelectFilterHandler(col.property)}
+ inputProps={{ name: `${col.property}-bool`, id: `${col.property}-bool` }} >
<MenuItem value={undefined} aria-label="none-value" >
<em>None</em>
</MenuItem>
<MenuItem aria-label="true-value" value={true as any as string}>{col.labels ? col.labels["true"] : "true"}</MenuItem>
<MenuItem aria-label="false-value" value={false as any as string}>{col.labels ? col.labels["false"] : "false"}</MenuItem>
</Select>
- : <Input className={classes.input} inputProps={{ 'aria-label': col.title ? toAriaLabel(col.title as string)+ '-filter' : `${ind + 1}-filter` }} value={filter[col.property] || ''} onChange={this.createFilterHandler(col.property)} />}
+ : <Input className={classes.input}
+ inputProps={{ 'aria-label': col.title ? toAriaLabel(col.title as string) + '-filter' : `${ind + 1}-filter` }}
+ value={filter[col.property] || ''}
+ onChange={this.createInputFilterHandler(col.property)} />}
</TableCell>
);
}, this)}
diff --git a/sdnr/wt/odlux/framework/src/components/material-table/tableHead.tsx b/sdnr/wt/odlux/framework/src/components/material-table/tableHead.tsx
index 428f4cf3f..c500f44ce 100644
--- a/sdnr/wt/odlux/framework/src/components/material-table/tableHead.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-table/tableHead.tsx
@@ -18,16 +18,31 @@
import * as React from 'react';
import { ColumnModel, ColumnType } from './columnModel';
-import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';
+import { Theme } from '@mui/material/styles';
-import TableSortLabel from '@material-ui/core/TableSortLabel';
-import TableCell from '@material-ui/core/TableCell';
-import TableHead from '@material-ui/core/TableHead';
-import TableRow from '@material-ui/core/TableRow';
-import Checkbox from '@material-ui/core/Checkbox';
-import Tooltip from '@material-ui/core/Tooltip';
+import { WithStyles } from '@mui/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
-interface IEnhancedTableHeadComponentProps {
+import TableSortLabel from '@mui/material/TableSortLabel';
+import TableCell from '@mui/material/TableCell';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Checkbox from '@mui/material/Checkbox';
+import Tooltip from '@mui/material/Tooltip';
+
+const styles = (theme: Theme) => createStyles({
+ header: {
+ backgroundColor: "#fafafa",
+ position: "sticky",
+ top: 0
+ }
+});
+
+
+type styles_header = WithStyles<typeof styles>;
+
+interface IEnhancedTableHeadComponentProps extends styles_header {
numSelected: number | null;
onRequestSort: (event: React.SyntheticEvent, property: string) => void;
onSelectAllClick: () => void;
@@ -45,12 +60,13 @@ class EnhancedTableHeadComponent extends React.Component<IEnhancedTableHeadCompo
render() {
const { onSelectAllClick, order, orderBy, numSelected, rowCount, columns } = this.props;
+ const {classes} = this.props;
return (
<TableHead>
<TableRow>
{ this.props.enableSelection
- ? <TableCell padding="checkbox" style={ { width: "50px" } }>
+ ? <TableCell padding="checkbox" style={ { width: "50px" } } className= {classes.header} >
<Checkbox
indeterminate={ numSelected && numSelected > 0 && numSelected < rowCount || undefined }
checked={ numSelected === rowCount }
@@ -62,10 +78,10 @@ class EnhancedTableHeadComponent extends React.Component<IEnhancedTableHeadCompo
{ columns.map(col => {
const style = col.width ? { width: col.width } : {};
return (
- <TableCell
+ <TableCell className= {classes.header}
key={ col.property }
align={ col.type === ColumnType.numeric ? 'right' : 'left' }
- padding={ col.disablePadding ? 'none' : 'default' }
+ padding={ col.disablePadding ? 'none' : 'normal' }
sortDirection={ orderBy === (col.property) ? order : false }
style={ style }
>
@@ -76,7 +92,7 @@ class EnhancedTableHeadComponent extends React.Component<IEnhancedTableHeadCompo
>
{ col.title || col.property }
</TableSortLabel>
- : <Tooltip
+ : <Tooltip disableInteractive
title="Sort"
placement={ col.type === ColumnType.numeric ? 'bottom-end' : 'bottom-start' }
enterDelay={ 300 }
@@ -98,4 +114,4 @@ class EnhancedTableHeadComponent extends React.Component<IEnhancedTableHeadCompo
}
}
-export const EnhancedTableHead = EnhancedTableHeadComponent; \ No newline at end of file
+export const EnhancedTableHead = withStyles(styles)(EnhancedTableHeadComponent); \ No newline at end of file
diff --git a/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx b/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx
index 4ad6422dc..426436d44 100644
--- a/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx
@@ -16,27 +16,30 @@
* ============LICENSE_END==========================================================================
*/
import * as React from 'react';
-import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';
+import { Theme, lighten } from '@mui/material/styles';
-import IconButton from '@material-ui/core/IconButton';
-import Tooltip from '@material-ui/core/Tooltip';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
-import DeleteIcon from '@material-ui/icons/Delete';
-import MoreIcon from '@material-ui/icons/MoreVert';
-import FilterListIcon from '@material-ui/icons/FilterList';
-import MenuItem from '@material-ui/core/MenuItem';
-import Menu from '@material-ui/core/Menu';
-import { lighten } from '@material-ui/core/styles/colorManipulator';
-import { SvgIconProps } from '@material-ui/core/SvgIcon/SvgIcon';
-import { Button } from '@material-ui/core';
+import { WithStyles } from '@mui/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
+
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import DeleteIcon from '@mui/icons-material/Delete';
+import MoreIcon from '@mui/icons-material/MoreVert';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import MenuItem from '@mui/material/MenuItem';
+import Menu from '@mui/material/Menu';
+import { SvgIconProps } from '@mui/material/SvgIcon';
+import { Button } from '@mui/material';
const styles = (theme: Theme) => createStyles({
root: {
paddingRight: theme.spacing(1),
},
highlight:
- theme.palette.type === 'light'
+ theme.palette.mode === 'light'
? {
color: theme.palette.secondary.main,
backgroundColor: lighten(theme.palette.secondary.light, 0.85),
@@ -109,32 +112,41 @@ class TableToolbarComponent extends React.Component<ITableToolbarComponentProps,
<div className={classes.actions}>
{this.props.customActionButtons
? this.props.customActionButtons.map((action, ind) => (
- <Tooltip key={`custom-action-${ind}`} title={action.tooltip || ''}>
- <IconButton disabled={action.disabled} aria-label={`${buttonPrefix}-${action.ariaLabel}-button`} onClick={() => action.onClick()}>
+ <Tooltip disableInteractive key={`custom-action-${ind}`} title={action.tooltip || ''}>
+ <IconButton
+ disabled={action.disabled}
+ aria-label={`${buttonPrefix}-${action.ariaLabel}-button`}
+ onClick={() => action.onClick()}
+ size="large">
<action.icon />
</IconButton>
</Tooltip>
))
: null}
{numSelected && numSelected > 0 ? (
- <Tooltip title="Delete">
- <IconButton aria-label={`${buttonPrefix}-delete-button`}>
+ <Tooltip disableInteractive title="Delete">
+ <IconButton aria-label={`${buttonPrefix}-delete-button`} size="large">
<DeleteIcon />
</IconButton>
</Tooltip>
) : (
- <Tooltip title="Filter list">
- <IconButton aria-label={`${buttonPrefix}-filter-list-button`} onClick={() => { this.props.onToggleFilter && this.props.onToggleFilter() }}>
+ <Tooltip disableInteractive title="Filter list">
+ <IconButton
+ aria-label={`${buttonPrefix}-filter-list-button`}
+ onClick={() => { this.props.onToggleFilter && this.props.onToggleFilter() }}
+ size="large">
<FilterListIcon />
</IconButton>
</Tooltip>
)}
- <Tooltip title="Actions">
- <IconButton color="inherit"
- aria-label={`${buttonPrefix}-additional-actions-button`}
+ <Tooltip disableInteractive title="Actions">
+ <IconButton
+ color="inherit"
+ aria-label={`${buttonPrefix}-additional-actions-button`}
aria-owns={open ? 'menu-appbar' : undefined}
aria-haspopup="true"
- onClick={this.handleMenu} >
+ onClick={this.handleMenu}
+ size="large">
<MoreIcon />
</IconButton>
</Tooltip>
@@ -146,6 +158,6 @@ class TableToolbarComponent extends React.Component<ITableToolbarComponentProps,
</Toolbar>
);
}
-};
+}
export const TableToolbar = withStyles(styles)(TableToolbarComponent); \ No newline at end of file
diff --git a/sdnr/wt/odlux/framework/src/components/material-ui/listItemLink.tsx b/sdnr/wt/odlux/framework/src/components/material-ui/listItemLink.tsx
index 49e7be514..744cb0d24 100644
--- a/sdnr/wt/odlux/framework/src/components/material-ui/listItemLink.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-ui/listItemLink.tsx
@@ -1,72 +1,75 @@
-/**
- * ============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 * as React from 'react';
-import { NavLink, Link, Route } from 'react-router-dom';
-
-import ListItem from '@material-ui/core/ListItem';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import ListItemText from '@material-ui/core/ListItemText';
-
-import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';
-import { toAriaLabel } from '../../utilities/yangHelper';
-
-const styles = (theme: Theme) => createStyles({
- active: {
- backgroundColor: theme.palette.action.selected
- }
-});
-
-export interface IListItemLinkProps extends WithStyles<typeof styles> {
- icon: JSX.Element | null;
- primary: string | React.ComponentType;
- secondary?: React.ComponentType;
- to: string;
- exact?: boolean;
- external?: boolean;
-}
-
-export const ListItemLink = withStyles(styles)((props: IListItemLinkProps) => {
- const { icon, primary: Primary, secondary: Secondary, classes, to, exact = false, external=false } = props;
- const renderLink = (itemProps: any): JSX.Element => (
- props.external ? <a target="_blank" href={to} { ...itemProps }></a> :
- <NavLink exact={ exact } to={ to } activeClassName={ classes.active } { ...itemProps } />);
-
- const ariaLabel = typeof Primary === 'string' ? toAriaLabel("link-to-"+Primary) : toAriaLabel("link-to-"+Primary.displayName);
- return (
- <>
- <ListItem button component={ renderLink } aria-label={ariaLabel}>
- { icon
- ? <ListItemIcon>{ icon }</ListItemIcon>
- : null
- }
- { typeof Primary === 'string'
- ? <ListItemText primary={ Primary } style={{ padding: 0 }} />
- : <Primary />
- }
- </ListItem>
- { Secondary
- ? <Route exact={ exact } path={ to } component={ Secondary } />
- : null
- }
- </>
- );
- }
-);
-
-export default ListItemLink;
-
+/**
+ * ============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 * as React from 'react';
+import { NavLink, Link, Route } from 'react-router-dom';
+
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+
+import { Theme } from '@mui/material/styles';
+import { WithStyles } from '@mui/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
+import { toAriaLabel } from '../../utilities/yangHelper';
+
+const styles = (theme: Theme) => createStyles({
+ active: {
+ backgroundColor: theme.palette.action.selected
+ }
+});
+
+export interface IListItemLinkProps extends WithStyles<typeof styles> {
+ icon: JSX.Element | null;
+ primary: string | React.ComponentType;
+ secondary?: React.ComponentType;
+ to: string;
+ exact?: boolean;
+ external?: boolean;
+}
+
+export const ListItemLink = withStyles(styles)((props: IListItemLinkProps) => {
+ const { icon, primary: Primary, secondary: Secondary, classes, to, exact = false, external=false } = props;
+ const renderLink = (itemProps: any): JSX.Element => (
+ props.external ? <a target="_blank" href={to} { ...itemProps }></a> :
+ <NavLink exact={ exact } to={ to } activeClassName={ classes.active } { ...itemProps } />);
+
+ const ariaLabel = typeof Primary === 'string' ? toAriaLabel("link-to-"+Primary) : toAriaLabel("link-to-"+Primary.displayName);
+ return (
+ <>
+ <ListItem button component={ renderLink } aria-label={ariaLabel}>
+ { icon
+ ? <ListItemIcon>{ icon }</ListItemIcon>
+ : null
+ }
+ { typeof Primary === 'string'
+ ? <ListItemText primary={ Primary } style={{ padding: 0 }} />
+ : <Primary />
+ }
+ </ListItem>
+ { Secondary
+ ? <Route exact={ exact } path={ to } component={ Secondary } />
+ : null
+ }
+ </>
+ );
+ }
+);
+
+export default ListItemLink;
+
diff --git a/sdnr/wt/odlux/framework/src/components/material-ui/loader.tsx b/sdnr/wt/odlux/framework/src/components/material-ui/loader.tsx
index 5ab2fd415..bd523e1f4 100644
--- a/sdnr/wt/odlux/framework/src/components/material-ui/loader.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-ui/loader.tsx
@@ -19,7 +19,11 @@
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';
const styles = (theme: Theme) => createStyles({
"@keyframes spin": {
diff --git a/sdnr/wt/odlux/framework/src/components/material-ui/panel.tsx b/sdnr/wt/odlux/framework/src/components/material-ui/panel.tsx
index 378d48592..6d192d2f0 100644
--- a/sdnr/wt/odlux/framework/src/components/material-ui/panel.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-ui/panel.tsx
@@ -1,73 +1,76 @@
-/**
- * ============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 * as React from 'react';
-
-import { withStyles, Theme, WithStyles, createStyles } from '@material-ui/core/styles';
-
-import { ExpansionPanel, ExpansionPanelSummary, ExpansionPanelDetails, Typography, ExpansionPanelActions } from '@material-ui/core';
-
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import { SvgIconProps } from '@material-ui/core/SvgIcon';
-
-const styles = (theme: Theme) => createStyles({
- accordion: {
- // background: theme.palette.secondary.dark,
- // color: theme.palette.primary.contrastText
- },
- detail: {
- // background: theme.palette.background.paper,
- // color: theme.palette.text.primary,
- position: "relative",
- display: 'flex',
- flexDirection: 'column'
- },
- text: {
- // color: theme.palette.common.white,
- // fontSize: "1rem"
- },
-});
-
-type PanalProps = WithStyles<typeof styles> & {
- activePanel: string | null,
- panelId: string,
- title: string,
- customActionButtons?: JSX.Element[];
- onToggle: (panelId: string | null) => void;
-}
-
-const PanelComponent: React.SFC<PanalProps> = (props) => {
- const { classes, activePanel, onToggle } = props;
- return (
- <ExpansionPanel className={classes.accordion} expanded={activePanel === props.panelId} onChange={() => onToggle(props.panelId)} >
- <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
- <Typography className={classes.text} >{props.title}</Typography>
- </ExpansionPanelSummary>
- <ExpansionPanelDetails className={classes.detail}>
- {props.children}
- </ExpansionPanelDetails>
- {props.customActionButtons
- ? <ExpansionPanelActions>
- {props.customActionButtons}
- </ExpansionPanelActions>
- : null}
- </ExpansionPanel>
- );
-};
-
-export const Panel = withStyles(styles)(PanelComponent);
+/**
+ * ============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 * as React from 'react';
+
+import { Theme } from '@mui/material/styles';
+
+import { WithStyles } from '@mui/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
+
+import { Accordion, AccordionSummary, AccordionDetails, Typography, AccordionActions } from '@mui/material';
+
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { SvgIconProps } from '@mui/material/SvgIcon';
+
+const styles = (theme: Theme) => createStyles({
+ accordion: {
+ // background: theme.palette.secondary.dark,
+ // color: theme.palette.primary.contrastText
+ },
+ detail: {
+ // background: theme.palette.background.paper,
+ // color: theme.palette.text.primary,
+ position: "relative",
+ flexDirection: 'column'
+ },
+ text: {
+ // color: theme.palette.common.white,
+ // fontSize: "1rem"
+ },
+});
+
+type PanalProps = WithStyles<typeof styles> & {
+ activePanel: string | null,
+ panelId: string,
+ title: string,
+ customActionButtons?: JSX.Element[];
+ onToggle: (panelId: string | null) => void;
+}
+
+const PanelComponent: React.SFC<PanalProps> = (props) => {
+ const { classes, activePanel, onToggle } = props;
+ return (
+ <Accordion className={classes.accordion} expanded={activePanel === props.panelId} onChange={() => onToggle(props.panelId)} >
+ <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+ <Typography className={classes.text} >{props.title}</Typography>
+ </AccordionSummary>
+ <AccordionDetails className={classes.detail}>
+ {props.children}
+ </AccordionDetails>
+ {props.customActionButtons
+ ? <AccordionActions>
+ {props.customActionButtons}
+ </AccordionActions>
+ : null}
+ </Accordion>
+ );
+};
+
+export const Panel = withStyles(styles)(PanelComponent);
export default Panel; \ No newline at end of file
diff --git a/sdnr/wt/odlux/framework/src/components/material-ui/toggleButton.tsx b/sdnr/wt/odlux/framework/src/components/material-ui/toggleButton.tsx
index 1a29d6970..54f14a7e0 100644
--- a/sdnr/wt/odlux/framework/src/components/material-ui/toggleButton.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-ui/toggleButton.tsx
@@ -1,179 +1,181 @@
-/**
- * ============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 * as React from 'react';
-import classNames from 'classnames';
-import { withStyles, WithStyles, Theme, createStyles } from '@material-ui/core/styles';
-import { fade } from '@material-ui/core/styles/colorManipulator';
-import ButtonBase from '@material-ui/core/ButtonBase';
-
-
-export const styles = (theme: Theme) => createStyles({
- /* Styles applied to the root element. */
- root: {
- ...theme.typography.button,
- height: 32,
- minWidth: 48,
- margin: 0,
- padding: `${theme.spacing(1 - 4)}px ${theme.spacing(1.5)}px`,
- borderRadius: 2,
- willChange: 'opacity',
- color: fade(theme.palette.action.active, 0.38),
- '&:hover': {
- textDecoration: 'none',
- // Reset on mouse devices
- backgroundColor: fade(theme.palette.text.primary, 0.12),
- '@media (hover: none)': {
- backgroundColor: 'transparent',
- },
- '&$disabled': {
- backgroundColor: 'transparent',
- },
- },
- '&:not(:first-child)': {
- borderTopLeftRadius: 0,
- borderBottomLeftRadius: 0,
- },
- '&:not(:last-child)': {
- borderTopRightRadius: 0,
- borderBottomRightRadius: 0,
- },
- },
- /* Styles applied to the root element if `disabled={true}`. */
- disabled: {
- color: fade(theme.palette.action.disabled, 0.12),
- },
- /* Styles applied to the root element if `selected={true}`. */
- selected: {
- color: theme.palette.action.active,
- '&:after': {
- content: '""',
- display: 'block',
- position: 'absolute',
- overflow: 'hidden',
- borderRadius: 'inherit',
- width: '100%',
- height: '100%',
- left: 0,
- top: 0,
- pointerEvents: 'none',
- zIndex: 0,
- backgroundColor: 'currentColor',
- opacity: 0.38,
- },
- '& + &:before': {
- content: '""',
- display: 'block',
- position: 'absolute',
- overflow: 'hidden',
- width: 1,
- height: '100%',
- left: 0,
- top: 0,
- pointerEvents: 'none',
- zIndex: 0,
- backgroundColor: 'currentColor',
- opacity: 0.12,
- },
- },
- /* Styles applied to the `label` wrapper element. */
- label: {
- width: '100%',
- display: 'inherit',
- alignItems: 'inherit',
- justifyContent: 'inherit',
- },
-});
-
-export type ToggleButtonClassKey = 'disabled' | 'root' | 'label' | 'selected';
-
-interface IToggleButtonProps extends WithStyles<typeof styles> {
- className?: string;
- component?: React.ReactType<IToggleButtonProps>;
- disabled?: boolean;
- disableFocusRipple?: boolean;
- disableRipple?: boolean;
- selected?: boolean;
- type?: string;
- value?: any;
- onClick?: (event: React.FormEvent<HTMLElement>, value?: any) => void;
- onChange?: (event: React.FormEvent<HTMLElement>, value?: any) => void;
-}
-
-class ToggleButtonComponent extends React.Component<IToggleButtonProps> {
- handleChange = (event: React.FormEvent<HTMLElement>) => {
- const { onChange, onClick, value } = this.props;
-
- event.stopPropagation();
- if (onClick) {
- onClick(event, value);
- if (event.isDefaultPrevented()) {
- return;
- }
- }
-
- if (onChange) {
- onChange(event, value);
- }
- event.preventDefault();
- };
-
- render() {
- const {
- children,
- className: classNameProp,
- classes,
- disableFocusRipple,
- disabled,
- selected,
- ...other
- } = this.props;
-
- const className = classNames(
- classes.root,
- {
- [classes.disabled]: disabled,
- [classes.selected]: selected,
- },
- classNameProp,
- );
-
- return (
- <ButtonBase
- className={className}
- disabled={disabled}
- focusRipple={!disableFocusRipple}
- onClick={this.handleChange}
- href="#"
- {...other}
- >
- <span className={classes.label}>{children}</span>
- </ButtonBase>
- );
- }
- public static defaultProps = {
- disabled: false,
- disableFocusRipple: false,
- disableRipple: false,
- };
-
- public static muiName = 'ToggleButton';
-}
-
-export const ToggleButton = withStyles(styles, { name: 'MuiToggleButton' })(ToggleButtonComponent);
+/**
+ * ============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 * as React from 'react';
+import classNames from 'classnames';
+import { Theme, alpha } from '@mui/material/styles';
+import { WithStyles } from '@mui/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
+import ButtonBase from '@mui/material/ButtonBase';
+
+
+export const styles = (theme: Theme) => createStyles({
+ /* Styles applied to the root element. */
+ root: {
+ ...theme.typography.button,
+ height: 32,
+ minWidth: 48,
+ margin: 0,
+ padding: `${theme.spacing(1 - 4)} ${theme.spacing(1.5)}`,
+ borderRadius: 2,
+ willChange: 'opacity',
+ color: alpha(theme.palette.action.active, 0.38),
+ '&:hover': {
+ textDecoration: 'none',
+ // Reset on mouse devices
+ backgroundColor: alpha(theme.palette.text.primary, 0.12),
+ '@media (hover: none)': {
+ backgroundColor: 'transparent',
+ },
+ '&.Mui-disabled': {
+ backgroundColor: 'transparent',
+ },
+ },
+ '&:not(:first-child)': {
+ borderTopLeftRadius: 0,
+ borderBottomLeftRadius: 0,
+ },
+ '&:not(:last-child)': {
+ borderTopRightRadius: 0,
+ borderBottomRightRadius: 0,
+ },
+ },
+ /* Styles applied to the root element if `disabled={true}`. */
+ disabled: {
+ color: alpha(theme.palette.action.disabled, 0.12),
+ },
+ /* Styles applied to the root element if `selected={true}`. */
+ selected: {
+ color: theme.palette.action.active,
+ '&:after': {
+ content: '""',
+ display: 'block',
+ position: 'absolute',
+ overflow: 'hidden',
+ borderRadius: 'inherit',
+ width: '100%',
+ height: '100%',
+ left: 0,
+ top: 0,
+ pointerEvents: 'none',
+ zIndex: 0,
+ backgroundColor: 'currentColor',
+ opacity: 0.38,
+ },
+ '& + &:before': {
+ content: '""',
+ display: 'block',
+ position: 'absolute',
+ overflow: 'hidden',
+ width: 1,
+ height: '100%',
+ left: 0,
+ top: 0,
+ pointerEvents: 'none',
+ zIndex: 0,
+ backgroundColor: 'currentColor',
+ opacity: 0.12,
+ },
+ },
+ /* Styles applied to the `label` wrapper element. */
+ label: {
+ width: '100%',
+ display: 'inherit',
+ alignItems: 'inherit',
+ justifyContent: 'inherit',
+ },
+});
+
+export type ToggleButtonClassKey = 'disabled' | 'root' | 'label' | 'selected';
+
+interface IToggleButtonProps extends WithStyles<typeof styles> {
+ className?: string;
+ component?: React.ReactType<IToggleButtonProps>;
+ disabled?: boolean;
+ disableFocusRipple?: boolean;
+ disableRipple?: boolean;
+ selected?: boolean;
+ type?: string;
+ value?: any;
+ onClick?: (event: React.FormEvent<HTMLElement>, value?: any) => void;
+ onChange?: (event: React.FormEvent<HTMLElement>, value?: any) => void;
+}
+
+class ToggleButtonComponent extends React.Component<IToggleButtonProps> {
+ handleChange = (event: React.FormEvent<HTMLElement>) => {
+ const { onChange, onClick, value } = this.props;
+
+ event.stopPropagation();
+ if (onClick) {
+ onClick(event, value);
+ if (event.isDefaultPrevented()) {
+ return;
+ }
+ }
+
+ if (onChange) {
+ onChange(event, value);
+ }
+ event.preventDefault();
+ };
+
+ render() {
+ const {
+ children,
+ className: classNameProp,
+ classes,
+ disableFocusRipple,
+ disabled,
+ selected,
+ ...other
+ } = this.props;
+
+ const className = classNames(
+ classes.root,
+ {
+ [classes.disabled]: disabled,
+ [classes.selected]: selected,
+ },
+ classNameProp,
+ );
+
+ return (
+ <ButtonBase
+ className={className}
+ disabled={disabled}
+ focusRipple={!disableFocusRipple}
+ onClick={this.handleChange}
+ href="#"
+ {...other}
+ >
+ <span className={classes.label}>{children}</span>
+ </ButtonBase>
+ );
+ }
+ public static defaultProps = {
+ disabled: false,
+ disableFocusRipple: false,
+ disableRipple: false,
+ };
+
+ public static muiName = 'ToggleButton';
+}
+
+export const ToggleButton = withStyles(styles, { name: 'MuiToggleButton' })(ToggleButtonComponent);
export default ToggleButton; \ No newline at end of file
diff --git a/sdnr/wt/odlux/framework/src/components/material-ui/toggleButtonGroup.tsx b/sdnr/wt/odlux/framework/src/components/material-ui/toggleButtonGroup.tsx
index 6460e8a3f..bdabe0d56 100644
--- a/sdnr/wt/odlux/framework/src/components/material-ui/toggleButtonGroup.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-ui/toggleButtonGroup.tsx
@@ -17,7 +17,11 @@
*/
import * as React from 'react';
import classNames from 'classnames';
-import { withStyles, WithStyles, Theme, createStyles } 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';
export const styles = (theme: Theme) => createStyles({
/* Styles applied to the root element. */
diff --git a/sdnr/wt/odlux/framework/src/components/material-ui/treeView.tsx b/sdnr/wt/odlux/framework/src/components/material-ui/treeView.tsx
index e62b42472..5c23909c4 100644
--- a/sdnr/wt/odlux/framework/src/components/material-ui/treeView.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-ui/treeView.tsx
@@ -16,15 +16,27 @@
* ============LICENSE_END==========================================================================
*/
import * as React from 'react';
-import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';
+import { Theme } from '@mui/material/styles';
-import { List, ListItem, TextField, ListItemText, ListItemIcon, WithTheme, withTheme, Omit, Typography } from '@material-ui/core';
+import { makeStyles, WithStyles, WithTheme } from '@mui/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
-import { SvgIconProps } from '@material-ui/core/SvgIcon';
-import FileIcon from '@material-ui/icons/InsertDriveFile';
-import CloseIcon from '@material-ui/icons/ExpandLess';
-import OpenIcon from '@material-ui/icons/ExpandMore';
-import FolderIcon from '@material-ui/icons/Folder';
+import { List, ListItem, TextField, ListItemText, ListItemIcon, Typography } from '@mui/material';
+import { DistributiveOmit } from '@mui/types';
+
+import withTheme from '@mui/styles/withTheme';
+
+import { SvgIconProps } from '@mui/material/SvgIcon';
+import FileIcon from '@mui/icons-material/InsertDriveFile';
+import CloseIcon from '@mui/icons-material/ExpandLess';
+import OpenIcon from '@mui/icons-material/ExpandMore';
+import FolderIcon from '@mui/icons-material/Folder';
+
+declare module '@mui/styles/defaultTheme' {
+ // eslint-disable-next-line @typescript-eslint/no-empty-interface (remove this line if you don't have the rule enabled)
+ interface DefaultTheme extends Theme {}
+}
const styles = (theme: Theme) => createStyles({
root: {
@@ -33,7 +45,7 @@ const styles = (theme: Theme) => createStyles({
paddingTop: 8,
},
search: {
- padding: `0px ${theme.spacing(1)}px`
+ padding: `0px ${theme.spacing(1)}`
}
});
@@ -153,7 +165,7 @@ class TreeViewComponent<TData = { }> extends React.Component<TreeViewComponentPr
return (
<div className={this.props.className ? `${this.props.classes.root} ${this.props.className}` : this.props.classes.root} style={this.props.style}>
{children}
- {enableSearchBar && <TextField label={"Search"} inputProps={{'aria-label': 'treeview-searchfield'}} fullWidth={true} className={this.props.classes.search} value={searchTermValue} onKeyDown={this.onSearchKeyDown} onChange={this.onChangeSearchText} /> || null}
+ {enableSearchBar && <TextField variant="standard" label={"Search"} inputProps={{'aria-label': 'treeview-searchfield'}} fullWidth={true} className={this.props.classes.search} value={searchTermValue} onKeyDown={this.onSearchKeyDown} onChange={this.onChangeSearchText} /> || null}
{enableSearchBar && (searchTerm === undefined || searchTerm.length===0 )&& <Typography style={{marginTop:'10px'}}>Please search for an inventory identifier or use *.</Typography>}
<List>
{this.renderItems(items, searchTerm && searchTerm.toLowerCase())}
@@ -187,10 +199,10 @@ class TreeViewComponent<TData = { }> extends React.Component<TreeViewComponentPr
}, [] as JSX.Element[]);
}
- private renderItem = (item: ExternalTreeItem<TData>, searchTerm: string | undefined, depth: number, isFolder: boolean, expanded: boolean, forceRender: boolean): JSX.Element | null => {
+ private renderItem = (item: ExternalTreeItem<TData> , searchTerm: string | undefined, depth: number, isFolder: boolean, expanded: boolean, forceRender: boolean): JSX.Element | null => {
const styles = {
item: {
- paddingLeft: (((this.props.depthOffset || 0) + depth) * this.props.theme.spacing(3)),
+ paddingLeft: (((this.props.depthOffset || 0) + depth) * Number(this.props.theme.spacing(3).replace("px", ''))),
backgroundColor: this.state.activeItem === item ? this.props.theme.palette.action.selected : undefined,
height: this.props.itemHeight || undefined,
cursor: item.disabled ? 'not-allowed' : 'pointer',
@@ -201,8 +213,17 @@ class TreeViewComponent<TData = { }> extends React.Component<TreeViewComponentPr
};
const text = item.content || ''; // need to keep track of search
- const matchIndex = searchTerm ? text.toLowerCase().indexOf(searchTerm) : -1;
- const searchTermLength = searchTerm && searchTerm.length || 0;
+ const search_array = searchTerm?.split("*");
+ const index = search_array?.findIndex(function (_str: String) {
+ return _str.length > 0;
+ }) || 0;
+ const firstSearchSubString = search_array ? search_array[index] : "";
+ const matchIndex = firstSearchSubString ? text.toLowerCase().indexOf(firstSearchSubString) : -1;
+
+ const hasStarInSearch = search_array ? search_array.length > 1 : false;
+ const isSearchStringWithStar = hasStarInSearch && firstSearchSubString?.length > 0 || false;
+
+ const searchTermLength = firstSearchSubString && firstSearchSubString.length || 0;
const handleClickCreator = (isIcon: boolean) => (event: React.SyntheticEvent) => {
if (item.disabled) return;
@@ -225,9 +246,8 @@ class TreeViewComponent<TData = { }> extends React.Component<TreeViewComponentPr
{ // highlight search result
- matchIndex > -1
- ? <ListItemText className={item.contentClass} primary={(<span>
- {text.substring(0, matchIndex)}
+ isSearchStringWithStar && matchIndex > -1
+ ? <ListItemText className={item.contentClass} primary={(
<span
style={{
display: 'inline-block',
@@ -235,18 +255,29 @@ class TreeViewComponent<TData = { }> extends React.Component<TreeViewComponentPr
padding: '3px',
}}
>
- {text.substring(matchIndex, matchIndex + searchTermLength)}
- </span>
- {text.substring(matchIndex + searchTermLength)}
- </span>)} />
- : <ListItemText className={item.contentClass} primary={(
- <span style={item.isMatch ? {
- display: 'inline-block',
- backgroundColor: 'rgba(255,235,59,0.5)',
- padding: '3px',
- } : undefined}>
- {text} </span>
- )} />
+ {text}
+ </span>)} />
+ : matchIndex > -1
+ ? <ListItemText className={item.contentClass} primary={(<span>
+ {text.substring(0, matchIndex)}
+ <span
+ style={{
+ display: 'inline-block',
+ backgroundColor: 'rgba(255,235,59,0.5)',
+ padding: '3px',
+ }}
+ >
+ {text.substring(matchIndex, matchIndex + searchTermLength)}
+ </span>
+ {text.substring(matchIndex + searchTermLength)}
+ </span>)} />
+ : <ListItemText className={item.contentClass} primary={(
+ <span style={item.isMatch ? {
+ display: 'inline-block',
+ padding: '3px',
+ } : undefined}>
+ {text} </span>
+ )} />
}
{ // display the right icon, depending on the state
@@ -343,7 +374,7 @@ class TreeViewComponent<TData = { }> extends React.Component<TreeViewComponentPr
}
}
-export type TreeViewCtorType<TData = { }> = new () => React.Component<Omit<TreeViewComponentProps<TData>, 'theme'|'classes'>>;
+export type TreeViewCtorType<TData = { }> = new () => React.Component<DistributiveOmit<TreeViewComponentProps<TData>, 'theme'|'classes'>>;
export const TreeView = withTheme(withStyles(styles)(TreeViewComponent));
export default TreeView; \ No newline at end of file
diff --git a/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx b/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx
index b50d68081..1134e230b 100644
--- a/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx
+++ b/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx
@@ -1,214 +1,218 @@
-/**
- * ============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 * as React from 'react';
-import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';
-
-import { faHome, faAddressBook } from '@fortawesome/free-solid-svg-icons';
-
-import Drawer from '@material-ui/core/Drawer';
-import List from '@material-ui/core/List';
-
-import Divider from '@material-ui/core/Divider';
-
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faProjectDiagram } from '@fortawesome/free-solid-svg-icons';
-
-import ListItemLink from '../components/material-ui/listItemLink';
-
-import connect, { Connect } from '../flux/connect';
-import { MenuAction } from '../actions/menuAction';
-import * as classNames from 'classnames';
-import { transportPCEUrl } from '../app';
-
-
-const drawerWidth = 240;
-
-const extraLinks = (window as any)._odluxExtraLinks as [string, string][];
-
-const styles = (theme: Theme) => createStyles({
- drawerPaper: {
- position: 'relative',
- width: drawerWidth,
- },
- toolbar: theme.mixins.toolbar as any,
-
- drawerOpen: {
- width: drawerWidth,
- transition: theme.transitions.create('width', {
- easing: theme.transitions.easing.sharp,
- duration: theme.transitions.duration.enteringScreen,
- }),
- },
- drawerClose: {
- transition: theme.transitions.create('width', {
- easing: theme.transitions.easing.sharp,
- duration: theme.transitions.duration.leavingScreen,
- }),
- overflowX: 'hidden',
- width: theme.spacing(7) + 1,
- [theme.breakpoints.up('sm')]: {
- width: theme.spacing(9) + 1,
- },
- },
- drawer: {
-
- },
- menu: {
- flex: "1 0 0%",
- },
- optLinks: {
- borderTop: "2px solid #cfcfcf",
- display: "flex",
- flexDirection: "row",
- flexWrap: "wrap",
- justifyContent: "space-around"
- },
- link: {
- margin: theme.spacing(1)+1,
- fontSize: theme.typography.fontSize-2,
- },
-});
-
-const tabletWidthBreakpoint = 768;
-
-export const NavigationMenu = withStyles(styles)(connect()(({ classes, state, dispatch }: WithStyles<typeof styles> & Connect & Connect) => {
- const { user } = state.framework.authenticationState;
- const isOpen = state.framework.applicationState.isMenuOpen;
- const closedByUser = state.framework.applicationState.isMenuClosedByUser;
- const transportUrl = state.framework.applicationState.transportpceUrl;
-
- const [responsive, setResponsive] = React.useState(false);
-
- //collapse menu on mount if necessary
- React.useEffect(()=>{
-
- if(isOpen && window.innerWidth < tabletWidthBreakpoint){
-
- setResponsive(true);
- dispatch(new MenuAction(false));
- }
-
- },[]);
-
- React.useEffect(() => {
-
- function handleResize() {
- if (user && user.isValid) {
- if (window.innerWidth < tabletWidthBreakpoint && !responsive) {
- setResponsive(true);
- if (!closedByUser) {
- console.log("responsive menu collapsed")
- dispatch(new MenuAction(false));
- }
-
- } else if (window.innerWidth > tabletWidthBreakpoint && responsive) {
- setResponsive(false);
- if (!closedByUser) {
- console.log("responsive menu restored")
- dispatch(new MenuAction(true));
- }
-
- }
- }
- }
- window.addEventListener("resize", handleResize);
-
-
- return () => {
- window.removeEventListener("resize", handleResize);
- }
- })
-
- React.useEffect(()=>{
- // trigger a resize if menu changed in case elements have to re-arrange
- window.dispatchEvent(new Event('menu-resized'));
- }, [isOpen])
-
- let menuItems = state.framework.applicationRegistraion && Object.keys(state.framework.applicationRegistraion).map(key => {
- const reg = state.framework.applicationRegistraion[key];
- return reg && (
- <ListItemLink
- key={reg.name}
- to={reg.path || `/${reg.name}`}
- primary={reg.menuEntry || reg.name}
- secondary={reg.subMenuEntry}
- icon={reg.icon && <FontAwesomeIcon icon={reg.icon} /> || null} />
- ) || null;
- }) || null;
-
- if(transportUrl.length>0){
-
- const transportPCELink = <ListItemLink
- key={"transportPCE"}
- to={transportUrl}
- primary={"TransportPCE"}
- icon={<FontAwesomeIcon icon={faProjectDiagram} />}
- external />;
-
- const linkFound = menuItems.find(obj => obj.key === "linkCalculation");
-
- if (linkFound) {
- const index = menuItems.indexOf(linkFound);
- menuItems.splice(index + 1, 0, transportPCELink);
- } else {
- menuItems.push(transportPCELink);
- }
- }
-
-
- return (
- <Drawer
- variant="permanent"
- className={
- classNames(classes.drawer, {
- [classes.drawerOpen]: isOpen,
- [classes.drawerClose]: !isOpen
- })
- }
- classes={{
- paper: classes.drawerPaper,
- }}
- >
- {user && user.isValid && <>
- <div className={classes.toolbar} />
- { /* https://fiffty.github.io/react-treeview-mui/ */}
- <List className={classes.menu} component="nav">
- <ListItemLink exact to="/" primary="Home" icon={<FontAwesomeIcon icon={faHome} />} />
- <Divider />
- {
- menuItems
- }
- <Divider />
- <ListItemLink to="/about" primary="About" icon={<FontAwesomeIcon icon={faAddressBook} />} />
- {(false && process.env.NODE_ENV === "development")
- ? <>
- <Divider />
- <ListItemLink to="/test" primary="Test" icon={<FontAwesomeIcon icon={faHome} />} />
- </>
- : null
- }
- </List>
- {isOpen && extraLinks && <div className={classes.optLinks}>
- {extraLinks.map(linkInfo => (<a className={classes.link} href={linkInfo[1]}>{linkInfo[0]}</a>))}
- </div> || null}
- </> || null
- }
- </Drawer>)
-}));
-
+/**
+ * ============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 * as React from 'react';
+import { Theme } from '@mui/material/styles';
+
+import { WithStyles } from '@mui/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
+
+import { faHome, faAddressBook } from '@fortawesome/free-solid-svg-icons';
+
+import Drawer from '@mui/material/Drawer';
+import List from '@mui/material/List';
+
+import Divider from '@mui/material/Divider';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faProjectDiagram } from '@fortawesome/free-solid-svg-icons';
+
+import ListItemLink from '../components/material-ui/listItemLink';
+
+import connect, { Connect } from '../flux/connect';
+import { MenuAction } from '../actions/menuAction';
+import * as classNames from 'classnames';
+import { transportPCEUrl } from '../app';
+
+
+const drawerWidth = 240;
+
+const extraLinks = (window as any)._odluxExtraLinks as [string, string][];
+
+const styles = (theme: Theme) => createStyles({
+ drawerPaper: {
+ position: 'relative',
+ width: drawerWidth,
+ },
+ toolbar: theme.mixins.toolbar as any,
+
+ drawerOpen: {
+ width: drawerWidth,
+ transition: theme.transitions.create('width', {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.enteringScreen,
+ }),
+ },
+ drawerClose: {
+ transition: theme.transitions.create('width', {
+ easing: theme.transitions.easing.sharp,
+ duration: theme.transitions.duration.leavingScreen,
+ }),
+ overflowX: 'hidden',
+ width: theme.spacing(7) + 1,
+ [theme.breakpoints.up('sm')]: {
+ width: theme.spacing(9) + 1,
+ },
+ },
+ drawer: {
+
+ },
+ menu: {
+ flex: "1 0 0%",
+ },
+ optLinks: {
+ borderTop: "2px solid #cfcfcf",
+ display: "flex",
+ flexDirection: "row",
+ flexWrap: "wrap",
+ justifyContent: "space-around"
+ },
+ link: {
+ margin: theme.spacing(1)+1,
+ fontSize: theme.typography.fontSize-2,
+ },
+});
+
+const tabletWidthBreakpoint = 768;
+
+export const NavigationMenu = withStyles(styles)(connect()(({ classes, state, dispatch }: WithStyles<typeof styles> & Connect & Connect) => {
+ const { user } = state.framework.authenticationState;
+ const isOpen = state.framework.applicationState.isMenuOpen;
+ const closedByUser = state.framework.applicationState.isMenuClosedByUser;
+ const transportUrl = state.framework.applicationState.transportpceUrl;
+
+ const [responsive, setResponsive] = React.useState(false);
+
+ //collapse menu on mount if necessary
+ React.useEffect(()=>{
+
+ if(isOpen && window.innerWidth < tabletWidthBreakpoint){
+
+ setResponsive(true);
+ dispatch(new MenuAction(false));
+ }
+
+ },[]);
+
+ React.useEffect(() => {
+
+ function handleResize() {
+ if (user && user.isValid) {
+ if (window.innerWidth < tabletWidthBreakpoint && !responsive) {
+ setResponsive(true);
+ if (!closedByUser) {
+ console.log("responsive menu collapsed")
+ dispatch(new MenuAction(false));
+ }
+
+ } else if (window.innerWidth > tabletWidthBreakpoint && responsive) {
+ setResponsive(false);
+ if (!closedByUser) {
+ console.log("responsive menu restored")
+ dispatch(new MenuAction(true));
+ }
+
+ }
+ }
+ }
+ window.addEventListener("resize", handleResize);
+
+
+ return () => {
+ window.removeEventListener("resize", handleResize);
+ }
+ })
+
+ React.useEffect(()=>{
+ // trigger a resize if menu changed in case elements have to re-arrange
+ window.dispatchEvent(new Event('menu-resized'));
+ }, [isOpen])
+
+ let menuItems = state.framework.applicationRegistraion && Object.keys(state.framework.applicationRegistraion).map(key => {
+ const reg = state.framework.applicationRegistraion[key];
+ return reg && (
+ <ListItemLink
+ key={reg.name}
+ to={reg.path || `/${reg.name}`}
+ primary={reg.menuEntry || reg.name}
+ secondary={reg.subMenuEntry}
+ icon={reg.icon && <FontAwesomeIcon icon={reg.icon} /> || null} />
+ ) || null;
+ }) || null;
+
+ if(transportUrl.length>0){
+
+ const transportPCELink = <ListItemLink
+ key={"transportPCE"}
+ to={transportUrl}
+ primary={"TransportPCE"}
+ icon={<FontAwesomeIcon icon={faProjectDiagram} />}
+ external />;
+
+ const linkFound = menuItems.find(obj => obj.key === "linkCalculation");
+
+ if (linkFound) {
+ const index = menuItems.indexOf(linkFound);
+ menuItems.splice(index + 1, 0, transportPCELink);
+ } else {
+ menuItems.push(transportPCELink);
+ }
+ }
+
+
+ return (
+ <Drawer
+ variant="permanent"
+ className={
+ classNames(classes.drawer, {
+ [classes.drawerOpen]: isOpen,
+ [classes.drawerClose]: !isOpen
+ })
+ }
+ classes={{
+ paper: classes.drawerPaper,
+ }}
+ >
+ {user && user.isValid && <>
+ <div className={classes.toolbar} />
+ { /* https://fiffty.github.io/react-treeview-mui/ */}
+ <List className={classes.menu} component="nav">
+ <ListItemLink exact to="/" primary="Home" icon={<FontAwesomeIcon icon={faHome} />} />
+ <Divider />
+ {
+ menuItems
+ }
+ <Divider />
+ <ListItemLink to="/about" primary="About" icon={<FontAwesomeIcon icon={faAddressBook} />} />
+ {(false && process.env.NODE_ENV === "development")
+ ? <>
+ <Divider />
+ <ListItemLink to="/test" primary="Test" icon={<FontAwesomeIcon icon={faHome} />} />
+ </>
+ : null
+ }
+ </List>
+ {isOpen && extraLinks && <div className={classes.optLinks}>
+ {extraLinks.map(linkInfo => (<a className={classes.link} href={linkInfo[1]}>{linkInfo[0]}</a>))}
+ </div> || null}
+ </> || null
+ }
+ </Drawer>)
+}));
+
export default NavigationMenu; \ No newline at end of file
diff --git a/sdnr/wt/odlux/framework/src/components/objectDump/index.tsx b/sdnr/wt/odlux/framework/src/components/objectDump/index.tsx
index d2de7cc02..10a0547be 100644
--- a/sdnr/wt/odlux/framework/src/components/objectDump/index.tsx
+++ b/sdnr/wt/odlux/framework/src/components/objectDump/index.tsx
@@ -17,7 +17,7 @@
*/
import * as React from "react";
-import { makeStyles } from '@material-ui/core/styles';
+import makeStyles from '@mui/styles/makeStyles';
export const getTypeName = (obj: any): string => {
if (obj == null) {
diff --git a/sdnr/wt/odlux/framework/src/components/routing/appFrame.tsx b/sdnr/wt/odlux/framework/src/components/routing/appFrame.tsx
index d212257c8..d055b8a87 100644
--- a/sdnr/wt/odlux/framework/src/components/routing/appFrame.tsx
+++ b/sdnr/wt/odlux/framework/src/components/routing/appFrame.tsx
@@ -1,55 +1,55 @@
-/**
- * ============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 * as React from 'react';
-
-import connect, { Connect } from '../../flux/connect';
-
-import { SetTitleAction } from '../../actions/titleActions';
-import { AddErrorInfoAction } from '../../actions/errorActions';
-
-import { IconType } from '../../models/iconDefinition';
-
-export interface IAppFrameProps {
- title: string;
- icon?: IconType;
- appId?: string
-}
-
-/**
- * Represents a component to wich will embed each single app providing the
- * functionality to update the title and implement an exeprion border.
- */
-export class AppFrame extends React.Component<IAppFrameProps & Connect> {
-
- public render(): JSX.Element {
- return (
- <div style={{ flex: "1", overflow: "hidden", display: "flex", flexDirection: "column" }}>
- { this.props.children }
- </div>
- )
- }
-
- public componentDidMount() {
- this.props.dispatch(new SetTitleAction(this.props.title, this.props.icon, this.props.appId));
- }
- public componentDidCatch(error: Error | null, info: object) {
- this.props.dispatch(new AddErrorInfoAction({ error, info }));
- }
-}
-
+/**
+ * ============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 * as React from 'react';
+
+import connect, { Connect } from '../../flux/connect';
+
+import { SetTitleAction } from '../../actions/titleActions';
+import { AddErrorInfoAction } from '../../actions/errorActions';
+
+import { IconType } from '../../models/iconDefinition';
+
+export interface IAppFrameProps {
+ title: string;
+ icon?: IconType;
+ appId?: string
+}
+
+/**
+ * Represents a component to wich will embed each single app providing the
+ * functionality to update the title and implement an exeprion border.
+ */
+export class AppFrame extends React.Component<IAppFrameProps & Connect> {
+
+ public render(): JSX.Element {
+ return (
+ <div style={{ flex: "1", overflow: "hidden", display: "flex", flexDirection: "column" }}>
+ { this.props.children }
+ </div>
+ )
+ }
+
+ public componentDidMount() {
+ this.props.dispatch(new SetTitleAction(this.props.title, this.props.icon, this.props.appId));
+ }
+ public componentDidCatch(error: Error | null, info: object) {
+ this.props.dispatch(new AddErrorInfoAction({ error, info }));
+ }
+}
+
export default connect()(AppFrame); \ No newline at end of file
diff --git a/sdnr/wt/odlux/framework/src/components/settings/general.tsx b/sdnr/wt/odlux/framework/src/components/settings/general.tsx
index ca1849049..90f15c1d2 100644
--- a/sdnr/wt/odlux/framework/src/components/settings/general.tsx
+++ b/sdnr/wt/odlux/framework/src/components/settings/general.tsx
@@ -16,7 +16,8 @@
* ============LICENSE_END==========================================================================
*/
-import { Button, FormControlLabel, makeStyles, Switch, Typography } from '@material-ui/core';
+import { Button, FormControlLabel, Switch, Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
import { SettingsComponentProps } from '../../models/settings';
import * as React from 'react';
import connect, { Connect, IDispatcher } from '../../flux/connect';
@@ -94,13 +95,13 @@ const onCancel = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) =>{
</Typography>
<FormControlLabel style={{ padding:5}}
value="end"
- control={<Switch color="secondary" checked={areWebsocketsEnabled} onChange={onWebsocketsChange} />}
+ control={<Switch color="secondary" aria-label="enable-notifications-button" aria-checked={areWebsocketsEnabled} checked={areWebsocketsEnabled} onChange={onWebsocketsChange} />}
label="Enable Notifications"
labelPlacement="end"
/>
<div className={classes.buttonPosition}>
- <Button className={classes.elementMargin} variant="contained" color="primary" onClick={onCancel}>Cancel</Button>
- <Button className={classes.elementMargin} variant="contained" color="secondary" onClick={onSave}>Save</Button>
+ <Button aria-label="cancel-button" className={classes.elementMargin} variant="contained" color="primary" onClick={onCancel}>Cancel</Button>
+ <Button aria-label="save-button" className={classes.elementMargin} variant="contained" color="secondary" onClick={onSave}>Save</Button>
</div>
</div>
}
diff --git a/sdnr/wt/odlux/framework/src/components/titleBar.tsx b/sdnr/wt/odlux/framework/src/components/titleBar.tsx
index 5d916e8c8..7872e51da 100644
--- a/sdnr/wt/odlux/framework/src/components/titleBar.tsx
+++ b/sdnr/wt/odlux/framework/src/components/titleBar.tsx
@@ -1,218 +1,226 @@
-/**
- * ============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 * as React from 'react';
-import { withRouter, RouteComponentProps } from 'react-router-dom';
-
-import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
-import Button from '@material-ui/core/Button';
-import IconButton from '@material-ui/core/IconButton';
-import Block from '@material-ui/icons/Block';
-import Adjust from '@material-ui/icons/Adjust';
-import MenuIcon from '@material-ui/icons/Menu';
-import AccountCircle from '@material-ui/icons/AccountCircle';
-import MenuItem from '@material-ui/core/MenuItem';
-import Menu from '@material-ui/core/Menu';
-
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faBan } from '@fortawesome/free-solid-svg-icons';
-import { faDotCircle } from '@fortawesome/free-solid-svg-icons';
-
-import { logoutUser } from '../actions/authentication';
-import { PushAction, ReplaceAction } from '../actions/navigationActions';
-
-import connect, { Connect, IDispatcher } from '../flux/connect';
-import Logo from './logo';
-import { MenuAction, MenuClosedByUser } from '../actions/menuAction';
-
-const styles = (theme: Theme) => createStyles({
- appBar: {
- zIndex: theme.zIndex.drawer + 1,
- },
- grow: {
- flexGrow: 1,
- },
- menuButton: {
- marginLeft: -12,
- marginRight: 20,
- },
- icon: {
- marginLeft: 16,
- marginRight: 8
- },
- connected: {
- color: "green"
- },
- notConnected: {
- color: "red"
- },
- notificationInfo: {
- marginLeft: 5
- }
-});
-
-const mapDispatch = (dispatcher: IDispatcher) => {
- return {
- logout: () => {
- dispatcher.dispatch(logoutUser());
- dispatcher.dispatch(new ReplaceAction("/login"));
- },
- openSettings : () =>{
- dispatcher.dispatch(new PushAction("/settings"));
- },
- toggleMainMenu: (value: boolean, value2: boolean) => {
- dispatcher.dispatch(new MenuAction(value));
- dispatcher.dispatch(new MenuClosedByUser(value2))
- }
- }
-};
-
-type TitleBarProps = RouteComponentProps<{}> & WithStyles<typeof styles> & Connect<undefined, typeof mapDispatch>
-
-class TitleBarComponent extends React.Component<TitleBarProps, { anchorEl: HTMLElement | null }> {
-
- constructor(props: TitleBarProps) {
- super(props);
- this.state = {
- anchorEl: null
- }
-
- }
- render(): JSX.Element {
- const { classes, state, history, location } = this.props;
- const open = !!this.state.anchorEl;
- let toolbarElements: Array<JSX.Element>;
- toolbarElements = [];
-
- // create notificationInfo element
- const notificationInfo = state.framework.applicationState.isWebsocketAvailable != undefined ?
- (state.framework.applicationState.isWebsocketAvailable ?
- <Typography aria-label="notifications-are-active" variant="body1" className={classes.notificationInfo}>Notifications <FontAwesomeIcon className={classes.connected} icon={faDotCircle} /> |</Typography> : <Typography aria-label="notifications-are-inactive" variant="body1" className={classes.notificationInfo}>Notifications <FontAwesomeIcon className={classes.notConnected} icon={faBan} /> |</Typography>)
- : <Typography variant="body1" aria-label="notifications-are-not-available" className={classes.notificationInfo}>Notifications N/A |</Typography>;
-
-
- // add notificationInfo element before help
- if (state.framework.applicationRegistraion) {
- let isNotificationInfoAdded = false;
- Object.keys(state.framework.applicationRegistraion).map(key => {
- const reg = state.framework.applicationRegistraion[key];
- if (reg && reg.statusBarElement) {
- if (key === "help") {
- isNotificationInfoAdded = true;
- toolbarElements.push(notificationInfo);
- }
- toolbarElements.push(<reg.statusBarElement key={key} />);
- }
- });
-
- // add notificationInfo in case help wasn't found
- if (!isNotificationInfoAdded) {
- toolbarElements.push(notificationInfo);
- }
- }
-
- return (
- <AppBar position="absolute" className={classes.appBar}>
- <Toolbar>
- <IconButton className={classes.menuButton} color="inherit" aria-label="Menu" onClick={this.toggleMainMenu}>
- <MenuIcon />
- </IconButton>
- <Logo />
- <Typography variant="h6" color="inherit" >
- {state.framework.applicationState.icon
- ? (<FontAwesomeIcon className={classes.icon} icon={state.framework.applicationState.icon} />)
- : null}
- {state.framework.applicationState.title}
- </Typography>
- <div className={classes.grow}></div>
- {
- // render toolbar
- toolbarElements.map((item) => {
- return item
- })
- }
-
- {state.framework.authenticationState.user
- ? (<div>
- <Button aria-label="current user menu button"
- aria-owns={open ? 'menu-appbar' : undefined}
- aria-haspopup="true"
- onClick={this.openMenu}
- color="inherit"
- >
- <AccountCircle />
- {state.framework.authenticationState.user.user}
- </Button>
- <Menu
- id="menu-appbar"
- anchorEl={this.state.anchorEl}
- anchorOrigin={{
- vertical: 'top',
- horizontal: 'right',
- }}
- transformOrigin={{
- vertical: 'top',
- horizontal: 'right',
- }}
- open={open}
- onClose={this.closeMenu}
- >
- {/* <MenuItem onClick={ this.closeMenu }>Profile</MenuItem> */}
- <MenuItem
- aria-label="settings-button"
- onClick={ () =>{
- this.props.openSettings();
- this.closeMenu(); }}>Settings</MenuItem>
- <MenuItem
- aria-label="logout-button"
- onClick={() => {
- this.props.logout();
- this.closeMenu();
- }}>Logout</MenuItem>
- </Menu>
- </div>)
- : (<Button onClick={() => { history.push('/login') }} color="inherit" disabled={location.pathname == "/login"}>Login</Button>)}
- </Toolbar>
- </AppBar>
- );
- };
-
- private toggleMainMenu = (event: React.MouseEvent<HTMLElement>) => {
- console.log(this.props);
- if (this.props.state.framework.authenticationState.user && this.props.state.framework.authenticationState.user.isValid) {
- const isMainMenuOpen = this.props.state.framework.applicationState.isMenuOpen
- const isClosedByUser = this.props.state.framework.applicationState.isMenuClosedByUser
- this.props.toggleMainMenu(!isMainMenuOpen, !isClosedByUser);
- }
- }
-
- private openMenu = (event: React.MouseEvent<HTMLElement>) => {
- this.setState({ anchorEl: event.currentTarget });
- };
-
- private closeMenu = () => {
- this.setState({ anchorEl: null });
- };
-}
-
-//todo: ggf. https://github.com/acdlite/recompose verwenden zur Vereinfachung
-
-export const TitleBar = withStyles(styles)(withRouter(connect(undefined, mapDispatch)(TitleBarComponent)));
+/**
+ * ============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 * as React from 'react';
+import { withRouter, RouteComponentProps } from 'react-router-dom';
+
+import { Theme } from '@mui/material/styles';
+import { WithStyles } from '@mui/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import Block from '@mui/icons-material/Block';
+import Adjust from '@mui/icons-material/Adjust';
+import MenuIcon from '@mui/icons-material/Menu';
+import AccountCircle from '@mui/icons-material/AccountCircle';
+import MenuItem from '@mui/material/MenuItem';
+import Menu from '@mui/material/Menu';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faBan } from '@fortawesome/free-solid-svg-icons';
+import { faDotCircle } from '@fortawesome/free-solid-svg-icons';
+
+import { logoutUser } from '../actions/authentication';
+import { PushAction, ReplaceAction } from '../actions/navigationActions';
+
+import connect, { Connect, IDispatcher } from '../flux/connect';
+import Logo from './logo';
+import { MenuAction, MenuClosedByUser } from '../actions/menuAction';
+
+const styles = (theme: Theme) => createStyles({
+ appBar: {
+ zIndex: theme.zIndex.drawer + 1,
+ },
+ grow: {
+ flexGrow: 1,
+ },
+ menuButton: {
+ marginLeft: -12,
+ marginRight: 20,
+ },
+ icon: {
+ marginLeft: 16,
+ marginRight: 8
+ },
+ connected: {
+ color: "green"
+ },
+ notConnected: {
+ color: "red"
+ },
+ notificationInfo: {
+ marginLeft: 5
+ }
+});
+
+const mapDispatch = (dispatcher: IDispatcher) => {
+ return {
+ logout: () => {
+ dispatcher.dispatch(logoutUser());
+ dispatcher.dispatch(new ReplaceAction("/login"));
+ },
+ openSettings : () =>{
+ dispatcher.dispatch(new PushAction("/settings"));
+ },
+ toggleMainMenu: (value: boolean, value2: boolean) => {
+ dispatcher.dispatch(new MenuAction(value));
+ dispatcher.dispatch(new MenuClosedByUser(value2))
+ }
+ }
+};
+
+type TitleBarProps = RouteComponentProps<{}> & WithStyles<typeof styles> & Connect<undefined, typeof mapDispatch>
+
+class TitleBarComponent extends React.Component<TitleBarProps, { anchorEl: HTMLElement | null }> {
+
+ constructor(props: TitleBarProps) {
+ super(props);
+ this.state = {
+ anchorEl: null
+ }
+
+ }
+ render(): JSX.Element {
+ const { classes, state, history, location } = this.props;
+ const open = !!this.state.anchorEl;
+ let toolbarElements: Array<JSX.Element>;
+ toolbarElements = [];
+
+ // create notificationInfo element
+ const notificationInfo = state.framework.applicationState.isWebsocketAvailable != undefined ?
+ (state.framework.applicationState.isWebsocketAvailable ?
+ <Typography aria-label="notifications-are-active" variant="body1" className={classes.notificationInfo}>Notifications <FontAwesomeIcon className={classes.connected} icon={faDotCircle} /> |</Typography> : <Typography aria-label="notifications-are-inactive" variant="body1" className={classes.notificationInfo}>Notifications <FontAwesomeIcon className={classes.notConnected} icon={faBan} /> |</Typography>)
+ : <Typography variant="body1" aria-label="notifications-are-not-available" className={classes.notificationInfo}>Notifications N/A |</Typography>;
+
+
+ // add notificationInfo element before help
+ if (state.framework.applicationRegistraion) {
+ let isNotificationInfoAdded = false;
+ Object.keys(state.framework.applicationRegistraion).map(key => {
+ const reg = state.framework.applicationRegistraion[key];
+ if (reg && reg.statusBarElement) {
+ if (key === "help") {
+ isNotificationInfoAdded = true;
+ toolbarElements.push(notificationInfo);
+ }
+ toolbarElements.push(<reg.statusBarElement key={key} />);
+ }
+ });
+
+ // add notificationInfo in case help wasn't found
+ if (!isNotificationInfoAdded) {
+ toolbarElements.push(notificationInfo);
+ }
+ }
+
+ return (
+ <AppBar enableColorOnDark position="absolute" className={classes.appBar}>
+ <Toolbar>
+ <IconButton
+ className={classes.menuButton}
+ color="inherit"
+ aria-label="Menu"
+ onClick={this.toggleMainMenu}
+ size="large">
+ <MenuIcon />
+ </IconButton>
+ <Logo />
+ <Typography variant="h6" color="inherit" >
+ {state.framework.applicationState.icon
+ ? (<FontAwesomeIcon className={classes.icon} icon={state.framework.applicationState.icon} />)
+ : null}
+ {state.framework.applicationState.title}
+ </Typography>
+ <div className={classes.grow}></div>
+ {
+ // render toolbar
+ toolbarElements.map((item) => {
+ return item
+ })
+ }
+
+ {state.framework.authenticationState.user
+ ? (<div>
+ <Button aria-label="current user menu button"
+ aria-owns={open ? 'menu-appbar' : undefined}
+ aria-haspopup="true"
+ onClick={this.openMenu}
+ color="inherit"
+ >
+ <AccountCircle />
+ {state.framework.authenticationState.user.user}
+ </Button>
+ <Menu
+ id="menu-appbar"
+ anchorEl={this.state.anchorEl}
+ anchorOrigin={{
+ vertical: 'top',
+ horizontal: 'right',
+ }}
+ transformOrigin={{
+ vertical: 'top',
+ horizontal: 'right',
+ }}
+ open={open}
+ onClose={this.closeMenu}
+ >
+ {/* <MenuItem onClick={ this.closeMenu }>Profile</MenuItem> */}
+ <MenuItem
+ aria-label="settings-button"
+ onClick={ () =>{
+ this.props.openSettings();
+ this.closeMenu(); }}>Settings</MenuItem>
+ <MenuItem
+ aria-label="logout-button"
+ onClick={() => {
+ this.props.logout();
+ this.closeMenu();
+ }}>Logout</MenuItem>
+ </Menu>
+ </div>)
+ : (<Button onClick={() => { history.push('/login') }} color="inherit" disabled={location.pathname == "/login"}>Login</Button>)}
+ </Toolbar>
+ </AppBar>
+ );
+ };
+
+ private toggleMainMenu = (event: React.MouseEvent<HTMLElement>) => {
+ console.log(this.props);
+ if (this.props.state.framework.authenticationState.user && this.props.state.framework.authenticationState.user.isValid) {
+ const isMainMenuOpen = this.props.state.framework.applicationState.isMenuOpen
+ const isClosedByUser = this.props.state.framework.applicationState.isMenuClosedByUser
+ this.props.toggleMainMenu(!isMainMenuOpen, !isClosedByUser);
+ }
+ }
+
+ private openMenu = (event: React.MouseEvent<HTMLElement>) => {
+ this.setState({ anchorEl: event.currentTarget });
+ };
+
+ private closeMenu = () => {
+ this.setState({ anchorEl: null });
+ };
+}
+
+//todo: ggf. https://github.com/acdlite/recompose verwenden zur Vereinfachung
+
+export const TitleBar = withStyles(styles)(withRouter(connect(undefined, mapDispatch)(TitleBarComponent)));
export default TitleBar; \ No newline at end of file