Update ODLUX

Update login view, add logout after user session ends, add user settings, several bugfixes
Issue-ID: CCSDK-3540

Signed-off-by: Aijana Schumann <aijana.schumann@highstreet-technologies.com>
Change-Id: I21137756b204287e25766a9646bf2faf7bad9d35

6 files changed, 147 insertions, 12 deletions

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 9155f38ec..cb675218f 100644
--- a/sdnr/wt/odlux/framework/src/components/material-table/index.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-table/index.tsx
@@ -40,6 +40,7 @@ import { DividerTypeMap } from '@material-ui/core/Divider';
 import { MenuItemProps } from '@material-ui/core/MenuItem';
 import { flexbox } from '@material-ui/system';
 import { RowDisabled } from './utilities';
+import { toAriaLabel } from '../../utilities/yangHelper';
 export { ColumnModel, ColumnType } from './columnModel';
 
 type propType = string | number | null | undefined | (string | number)[];
@@ -100,7 +101,8 @@ const styles = (theme: Theme) => createStyles({
     flex: "1 1 100%"
   },
   pagination: {
-    overflow: "hidden"
+    overflow: "hidden",
+    minHeight: "52px"
   }
 });
 
@@ -152,6 +154,7 @@ type MaterialTableComponentBaseProps<TData> = WithStyles<typeof styles> & {
   columns: ColumnModel<TData>[];
   idProperty: keyof TData | ((data: TData) => React.Key);
   tableId?: string;
+  isPopup?: boolean;
   title?: string;
   stickyHeader?: boolean;
   defaultSortOrder?: 'asc' | 'desc';
@@ -294,7 +297,7 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate
                           col => {
                             const style = col.width ? { width: col.width } : {};
                             return (
-                              <TableCell style={ entry[RowDisabled] || false ? { ...style, color: "inherit"  } : style } aria-label={col.title? col.title.toLowerCase().replace(/\s/g, "-") : col.property.toLowerCase().replace(/\s/g, "-")} key={col.property} align={col.type === ColumnType.numeric && !col.align ? "right" : col.align} >
+                              <TableCell style={ entry[RowDisabled] || false ? { ...style, color: "inherit"  } : style } aria-label={col.title? toAriaLabel(col.title) : toAriaLabel(col.property)} key={col.property} align={col.type === ColumnType.numeric && !col.align ? "right" : col.align} >
                                 {col.type === ColumnType.custom && col.customControl
                                   ? <col.customControl className={col.className} style={col.style} rowData={entry} />
                                   : col.type === ColumnType.boolean
@@ -327,12 +330,12 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate
           count={rowCount}
           rowsPerPage={rowsPerPage}
           page={page}
-          aria-label="table-pagination-footer"
+          aria-label={"table-pagination-footer" }
           backIconButtonProps={{
-            'aria-label': 'previous-page',
+            'aria-label': this.props.isPopup ? 'popup-previous-page' : 'previous-page',
           }}
           nextIconButtonProps={{
-            'aria-label': 'next-page',
+            'aria-label': this.props.isPopup ? 'popup-next-page': 'next-page',
           }}
           onChangePage={this.onHandleChangePage}
           onChangeRowsPerPage={this.onHandleChangeRowsPerPage}
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 5aefac445..e4cc5ab7c 100644
--- a/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx
@@ -25,6 +25,7 @@ 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 { toAriaLabel } from '../../utilities/yangHelper';
 
 
 const styles = (theme: Theme) => createStyles({
@@ -73,14 +74,14 @@ class EnhancedTableFilterComponent extends React.Component<IEnhancedTableFilterC
               {col.disableFilter || (col.type === ColumnType.custom)
                 ? null
                 : (col.type === ColumnType.boolean)
-                  ? <Select className={classes.input} aria-label={col.title ? (col.title as string).toLowerCase().replace(/\s/g, "-") + '-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 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` }} >
                     <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 ? (col.title as string).toLowerCase().replace(/\s/g, "-") + '-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.createFilterHandler(col.property)} />}
             </TableCell>
           );
         }, this)}
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 8828ac3fc..49e7be514 100644
--- a/sdnr/wt/odlux/framework/src/components/material-ui/listItemLink.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-ui/listItemLink.tsx
@@ -23,6 +23,7 @@ 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: {

@@ -45,7 +46,7 @@ export const ListItemLink = withStyles(styles)((props: IListItemLinkProps) => {
     props.external ? <a target="_blank" href={to} { ...itemProps }></a> :

   <NavLink exact={ exact } to={ to } activeClassName={ classes.active } { ...itemProps } />);

 

-  const ariaLabel = typeof Primary === 'string' ? "link-to-"+Primary.toLowerCase().replace(/\s/g, "-") : "link-to-"+Primary.displayName?.toLowerCase();

+  const ariaLabel = typeof Primary === 'string' ? toAriaLabel("link-to-"+Primary) : toAriaLabel("link-to-"+Primary.displayName);

   return (

        <>

         <ListItem button component={ renderLink } aria-label={ariaLabel}>

diff --git a/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx b/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx
index b65eb29e2..b50d68081 100644
--- a/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx
+++ b/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx
@@ -94,6 +94,17 @@ export const NavigationMenu = withStyles(styles)(connect()(({ classes, state, di
 

   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() {

diff --git a/sdnr/wt/odlux/framework/src/components/settings/general.tsx b/sdnr/wt/odlux/framework/src/components/settings/general.tsx
new file mode 100644
index 000000000..ca1849049
--- /dev/null
+++ b/sdnr/wt/odlux/framework/src/components/settings/general.tsx
@@ -0,0 +1,109 @@
+/**
+ * ============LICENSE_START========================================================================
+ * ONAP : ccsdk feature sdnr wt odlux
+ * =================================================================================================
+ * Copyright (C) 2021 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 { Button, FormControlLabel, makeStyles, Switch, Typography } from '@material-ui/core';
+import { SettingsComponentProps } from '../../models/settings';
+import * as React from 'react';
+import connect, { Connect, IDispatcher } from '../../flux/connect';
+import { IApplicationStoreState } from '../../store/applicationStore';
+import { getGeneralSettingsAction, SetGeneralSettingsAction, updateGeneralSettingsAction } from '../../actions/settingsAction';
+import { sendMessage, SettingsMessage } from '../../services/broadcastService';
+
+
+type props = Connect<typeof mapProps, typeof mapDispatch> & SettingsComponentProps;
+
+const mapProps = (state: IApplicationStoreState) => ({
+    settings: state.framework.applicationState.settings,
+    user: state.framework.authenticationState.user?.user
+    
+});
+
+const mapDispatch = (dispatcher: IDispatcher) => ({
+
+    updateSettings :(activateNotifications: boolean) => dispatcher.dispatch(updateGeneralSettingsAction(activateNotifications)),
+    getSettings: () =>dispatcher.dispatch(getGeneralSettingsAction()),
+  });
+
+const styles = makeStyles({
+    sectionMargin: {
+      marginTop: "30px",
+      marginBottom: "15px"
+    },
+    elementMargin: {
+      marginLeft: "10px"
+    },
+    buttonPosition:{
+      position: "absolute",
+      right: "32%"
+    }
+  });
+
+const General : React.FunctionComponent<props> = (props) =>{
+
+const classes = styles();
+
+const [areWebsocketsEnabled, setWebsocketsEnabled] = React.useState(props.settings.general.areNotificationsEnabled || false);
+
+React.useEffect(()=>{
+  props.getSettings();
+},[]);
+
+React.useEffect(()=>{
+  if(props.settings.general.areNotificationsEnabled!==null)
+    setWebsocketsEnabled(props.settings.general.areNotificationsEnabled)
+},[props.settings]);
+
+const onWebsocketsChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, newValue: boolean) =>{
+    setWebsocketsEnabled(newValue);
+  }
+
+const onSave = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) =>{
+
+    e.preventDefault();
+    const message: SettingsMessage = {key: 'general', enableNotifications: areWebsocketsEnabled, user: props.user!};
+    sendMessage(message, "odlux_settings");
+    props.updateSettings(areWebsocketsEnabled);
+    props.onClose();
+}
+
+const onCancel = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) =>{
+  e.preventDefault();
+  props.onClose();
+
+}
+
+
+    return <div>
+        <Typography className={classes.sectionMargin} variant="body1" style={{ fontWeight: "bold" }} gutterBottom>
+          Enable Notifications
+        </Typography>
+        <FormControlLabel style={{ padding:5}}
+        value="end"
+        control={<Switch color="secondary" 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>
+    </div>
+    </div>
+}
+
+export const GeneralUserSettings = connect(mapProps, mapDispatch)(General);
+export default GeneralUserSettings;
\ No newline at end of file
diff --git a/sdnr/wt/odlux/framework/src/components/titleBar.tsx b/sdnr/wt/odlux/framework/src/components/titleBar.tsx
index 62db1de40..5d916e8c8 100644
--- a/sdnr/wt/odlux/framework/src/components/titleBar.tsx
+++ b/sdnr/wt/odlux/framework/src/components/titleBar.tsx
@@ -35,8 +35,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faBan } from '@fortawesome/free-solid-svg-icons';

 import { faDotCircle } from '@fortawesome/free-solid-svg-icons';

 

-import { UpdateUser } from '../actions/authentication';

-import { ReplaceAction } from '../actions/navigationActions';

+import { logoutUser } from '../actions/authentication';

+import { PushAction, ReplaceAction } from '../actions/navigationActions';

 

 import connect, { Connect, IDispatcher } from '../flux/connect';

 import Logo from './logo';

@@ -71,9 +71,12 @@ const styles = (theme: Theme) => createStyles({
 const mapDispatch = (dispatcher: IDispatcher) => {

   return {

     logout: () => {

-      dispatcher.dispatch(new UpdateUser(undefined));

+      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))

@@ -172,7 +175,14 @@ class TitleBarComponent extends React.Component<TitleBarProps, { anchorEl: HTMLE
                 onClose={this.closeMenu}

               >

                 {/* <MenuItem onClick={ this.closeMenu }>Profile</MenuItem> */}

-                <MenuItem onClick={() => {

+                <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>