Add aria-labels to odlux tables

Add aria-labels to all table action buttons

Issue-ID: CCSDK-3396
Signed-off-by: Aijana Schumann <aijana.schumann@highstreet-technologies.com>
Change-Id: I1c3922c1d195727265882d3e3362607ab558d603

9 files changed, 50 insertions, 28 deletions

diff --git a/sdnr/wt/odlux/framework/pom.xml b/sdnr/wt/odlux/framework/pom.xml
index 3e947539f..0e6b3cf7f 100644
--- a/sdnr/wt/odlux/framework/pom.xml
+++ b/sdnr/wt/odlux/framework/pom.xml
@@ -46,7 +46,7 @@
     <properties>
         <buildtime>${maven.build.timestamp}</buildtime>
         <distversion>ONAP Frankfurt (Neon, mdsal ${odl.mdsal.version})</distversion>
-        <buildno>110.0d5d064(21/07/05)</buildno>
+        <buildno>115.f8b3b3c(21/07/30)</buildno>
         <odlux.version>ONAP SDN-R | ONF Wireless for ${distversion} - Build: ${buildtime} ${buildno} ${project.version}</odlux.version>
     </properties>
 
diff --git a/sdnr/wt/odlux/framework/src/app.tsx b/sdnr/wt/odlux/framework/src/app.tsx
index 7e162cd51..ada78b90f 100644
--- a/sdnr/wt/odlux/framework/src/app.tsx
+++ b/sdnr/wt/odlux/framework/src/app.tsx
@@ -105,4 +105,3 @@ export const runApplication = () => {
   

 

 };

-

diff --git a/sdnr/wt/odlux/framework/src/components/errorDisplay.tsx b/sdnr/wt/odlux/framework/src/components/errorDisplay.tsx
index 1060d4b6d..b2a1f1f20 100644
--- a/sdnr/wt/odlux/framework/src/components/errorDisplay.tsx
+++ b/sdnr/wt/odlux/framework/src/components/errorDisplay.tsx
@@ -82,6 +82,7 @@ class ErrorDisplayComponent extends React.Component<ErrorDisplayProps> {
   render(): JSX.Element {
     const { classes, state } = this.props;
     const errorInfo = state.framework.applicationState.errors.length && state.framework.applicationState.errors[state.framework.applicationState.errors.length - 1];
+    
     return (
       <Modal className={classes.modal}
         aria-labelledby="simple-modal-title"
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 c74fd1a38..9155f38ec 100644
--- a/sdnr/wt/odlux/framework/src/components/material-table/index.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-table/index.tsx
@@ -159,7 +159,7 @@ type MaterialTableComponentBaseProps<TData> = WithStyles<typeof styles> & {
   enableSelection?: boolean;
   disableSorting?: boolean;
   disableFilter?: boolean;
-  customActionButtons?: { icon: React.ComponentType<SvgIconProps>, tooltip?: string, onClick: () => void, disabled?: boolean }[];
+  customActionButtons?: { icon: React.ComponentType<SvgIconProps>, tooltip?: string, ariaLabel: string, onClick: () => void, disabled?: boolean }[];
   onHandleClick?(event: React.MouseEvent<HTMLTableRowElement>, rowData: TData): void;
   createContextMenu?: (row: TData) => React.ReactElement<MenuItemProps | DividerTypeMap<{}, "hr">, React.ComponentType<MenuItemProps | DividerTypeMap<{}, "hr">>>[];
 };
@@ -253,8 +253,8 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate
               {rows // may need ordering here
                 .map((entry: TData & { [RowDisabled]?: boolean, [kex: string]: any }, index) => {
                   const entryId = getId(entry);
-                  const isSelected = this.isSelected(entryId);
                   const contextMenu = (this.props.createContextMenu && this.state.contextMenuInfo.index === index && this.props.createContextMenu(entry)) || null;
+                  const isSelected = this.isSelected(entryId) || this.state.contextMenuInfo.index === index;
                   return (
                     <TableRowExt
                       hover
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 f7de0a062..4ad6422dc 100644
--- a/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx
@@ -67,7 +67,7 @@ interface ITableToolbarComponentProps extends WithStyles<typeof styles> {
   numSelected: number | null;
   title?: string;
   tableId?: string;
-  customActionButtons?: { icon: React.ComponentType<SvgIconProps>, tooltip?: string, onClick: () => void, disabled?: boolean }[];
+  customActionButtons?: { icon: React.ComponentType<SvgIconProps>, tooltip?: string, ariaLabel: string, onClick: () => void, disabled?: boolean }[];
   onToggleFilter: () => void;
   onExportToCsv: () => void;
 }
@@ -91,7 +91,7 @@ class TableToolbarComponent extends React.Component<ITableToolbarComponentProps,
   render() {
     const { numSelected, classes } = this.props;
     const open = !!this.state.anchorEl;
-    const buttonPrefix = this.props.tableId !== undefined ? this.props.tableId + '-' : '';
+    const buttonPrefix = this.props.tableId !== undefined ? this.props.tableId : 'table';
     return (
       <Toolbar className={`${classes.root} ${numSelected && numSelected > 0 ? classes.highlight : ''} `} >
         <div className={classes.title}>
@@ -110,7 +110,7 @@ class TableToolbarComponent extends React.Component<ITableToolbarComponentProps,
           {this.props.customActionButtons
             ? this.props.customActionButtons.map((action, ind) => (
               <Tooltip key={`custom-action-${ind}`} title={action.tooltip || ''}>
-                <IconButton disabled={action.disabled} aria-label={buttonPrefix + `custom-action-${ind}`} onClick={() => action.onClick()}>
+                <IconButton disabled={action.disabled} aria-label={`${buttonPrefix}-${action.ariaLabel}-button`} onClick={() => action.onClick()}>
                   <action.icon />
                 </IconButton>
               </Tooltip>
@@ -118,20 +118,20 @@ class TableToolbarComponent extends React.Component<ITableToolbarComponentProps,
             : null}
           {numSelected && numSelected > 0 ? (
             <Tooltip title="Delete">
-              <IconButton aria-label={buttonPrefix + "delete"}>
+              <IconButton aria-label={`${buttonPrefix}-delete-button`}>
                 <DeleteIcon />
               </IconButton>
             </Tooltip>
           ) : (
               <Tooltip title="Filter list">
-                <IconButton aria-label={buttonPrefix + "filter-list"} onClick={() => { this.props.onToggleFilter && this.props.onToggleFilter() }}>
+                <IconButton aria-label={`${buttonPrefix}-filter-list-button`} onClick={() => { this.props.onToggleFilter && this.props.onToggleFilter() }}>
                   <FilterListIcon />
                 </IconButton>
               </Tooltip>
             )}
           <Tooltip title="Actions">
             <IconButton color="inherit"
-            aria-label={buttonPrefix +"additional-actions-button"}
+            aria-label={`${buttonPrefix}-additional-actions-button`}
               aria-owns={open ? 'menu-appbar' : undefined}
               aria-haspopup="true"
               onClick={this.handleMenu} >
diff --git a/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx b/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx
index 437ba1b3a..b65eb29e2 100644
--- a/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx
+++ b/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx
@@ -87,9 +87,10 @@ const styles = (theme: Theme) => createStyles({
 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 { 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);

 

@@ -139,20 +140,25 @@ export const NavigationMenu = withStyles(styles)(connect()(({ classes, state, di
     ) || null;

   }) || null;

 

-  const transportPCELink = <ListItemLink

-    key={"transportPCE"}

-    to={window.localStorage.getItem(transportPCEUrl)!}

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

+  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

diff --git a/sdnr/wt/odlux/framework/src/handlers/applicationStateHandler.ts b/sdnr/wt/odlux/framework/src/handlers/applicationStateHandler.ts
index 6426066f6..61e1334e7 100644
--- a/sdnr/wt/odlux/framework/src/handlers/applicationStateHandler.ts
+++ b/sdnr/wt/odlux/framework/src/handlers/applicationStateHandler.ts
@@ -50,7 +50,8 @@ export interface IApplicationState {
   isWebsocketAvailable: boolean | undefined;
   externalLoginProviders: ExternalLoginProvider[] | null;
   authentication: "basic"|"oauth",  // basic 
-  enablePolicy: boolean             // false 
+  enablePolicy: boolean,             // false 
+  transportpceUrl : string
 }
 
 const applicationStateInit: IApplicationState = {
@@ -63,11 +64,13 @@ const applicationStateInit: IApplicationState = {
   externalLoginProviders: null,
   authentication: "basic",
   enablePolicy: false,
+  transportpceUrl: ""
 };
 
 export const configureApplication = (config: ApplicationConfig) => {
   applicationStateInit.authentication = config.authentication === "oauth" ? "oauth" : "basic";
   applicationStateInit.enablePolicy = config.enablePolicy ? true : false;
+  applicationStateInit.transportpceUrl=config.transportpceUrl == undefined ? "" : config.transportpceUrl;
 }
 
 export const applicationStateHandler: IActionHandler<IApplicationState> = (state = applicationStateInit, action) => {
diff --git a/sdnr/wt/odlux/framework/src/models/applicationConfig.ts b/sdnr/wt/odlux/framework/src/models/applicationConfig.ts
index 5224840eb..0ae9c266b 100644
--- a/sdnr/wt/odlux/framework/src/models/applicationConfig.ts
+++ b/sdnr/wt/odlux/framework/src/models/applicationConfig.ts
@@ -1,4 +1,5 @@
 export type ApplicationConfig = { 
     authentication: "basic"|"oauth",  // basic 
-    enablePolicy: false               // false 
+    enablePolicy: false,               // false 
+    transportpceUrl? : string
 };
\ No newline at end of file
diff --git a/sdnr/wt/odlux/framework/src/views/home.tsx b/sdnr/wt/odlux/framework/src/views/home.tsx
index b5df0526f..0e1d487e3 100644
--- a/sdnr/wt/odlux/framework/src/views/home.tsx
+++ b/sdnr/wt/odlux/framework/src/views/home.tsx
@@ -91,6 +91,9 @@ class Home extends React.Component<HomeComponentProps>  {
     const connectionStatusOptions = {
       responsive: true,
       maintainAspectRatio: false,
+      animation: {
+        duration: 0
+      },
       plugins: {
         legend: {
           display: true,
@@ -109,6 +112,9 @@ class Home extends React.Component<HomeComponentProps>  {
     const connectionStatusUnavailableOptions = {
       responsive: true,
       maintainAspectRatio: false,
+      animation: {
+        duration: 0
+      },
       plugins: {
         legend: {
           display: true,
@@ -178,6 +184,9 @@ class Home extends React.Component<HomeComponentProps>  {
     const alarmStatusOptions = {
       responsive: true,
       maintainAspectRatio: false,
+      animation: {
+        duration: 0
+      },
       plugins: {
         legend: {
           display: true,
@@ -196,6 +205,9 @@ class Home extends React.Component<HomeComponentProps>  {
     const alarmStatusUnavailableOptions = {
       responsive: true,
       maintainAspectRatio: false,
+      animation: {
+        duration: 0
+      },
       plugins: {
         legend: {
           display: true,