[NRRPLT-8276] CSS and fix names

src/App.js

@@ -4,7 +4,7 @@ import { HashRouter, Switch, Route } from 'react-router-dom';
 
 import EntryPage from './components/entry-page/entry-page.js';
 import ErrorDialog from './components/dialog/error-dialog.js';
-import ToastNotification from './components/dialog/toast-notification.js';
+import NotificationDialog from './components/dialog/notification-dialog.js';
 import ExperimentOverview from './components/experiment-overview/experiment-overview.js';
 
 class App extends React.Component {
@@ -12,7 +12,7 @@ class App extends React.Component {
     return(
       <div>
         <ErrorDialog />
-        <ToastNotification/>
+        <NotificationDialog/>
         <HashRouter>
           <Switch>
             <Route path='/experiments-overview'>

src/components/dialog/error-dialog.css

@@ -7,6 +7,6 @@
 }
 
 .modal-header{
-  background-color: rgb(241, 185, 185);
+  background-color: rgb(238, 173, 173);
   color: rgb(138, 41, 41);
 }
\ No newline at end of file

src/components/dialog/toast-notification.css → src/components/dialog/notification-dialog.css

@@ -2,9 +2,24 @@
   position: fixed;
   bottom: 0;
   right: 0;
-  z-index: 999;
+  z-index: 498;
 }
 
 .no-style{
   list-style-type: none;
-}
+}
\ No newline at end of file
+
+.toast-width{
+  max-width: none;
+  width: 350px;
+}
+
+.warning{
+  background-color:rgb(248, 248, 122);
+  color:rgb(126, 126, 45);
+}
+
+.info{
+  background-color: rgb(143, 143, 250);
+  color: rgb(48, 48, 134)
+}

src/components/dialog/toast-notification.js → src/components/dialog/notification-dialog.js

@@ -3,7 +3,7 @@ import { Toast } from 'react-bootstrap';
 
 import DialogService from '../../services/dialog-service.js';
 
-import './toast-notification.css';
+import './notification-dialog.css';
 
 class NotificationDialog extends React.Component{
   constructor(props){
@@ -27,9 +27,18 @@ class NotificationDialog extends React.Component{
   }
 
   onNotification(notification) {
-    this.setState({
-      notifications: [...this.state.notifications, notification]
+    // avoid duplicates
+    var isIn = false;
+    this.state.notifications.forEach((notif) =>{
+      if (notification.type===notif.type && notification.message===notif.message){
+        isIn = true;
+      }
     });
+    if (!isIn){
+      this.setState({
+        notifications: [...this.state.notifications, notification]
+      });
+    }
   }
 
   handleClose(index) {
@@ -44,14 +53,14 @@ class NotificationDialog extends React.Component{
     let notifications = this.state.notifications;
     return(
       <div className='toast-notification-wrapper'>
-        {!notifications.length==0?
+        {notifications.length!==0?
           <ol>
             {notifications.map((notification, index) => {
               return (
                 <li key={index} className='no-style'>
-                  <Toast onClose={(index) => this.handleClose(index)}>
-                    <Toast.Header>
-                      <h4>{notification.type}</h4>
+                  <Toast className='toast-width' onClose={(index) => this.handleClose(index)}>
+                    <Toast.Header className={notification.type==='Warning'? 'warning': 'info'} >
+                      <strong className='mr-auto'>{notification.type}</strong>
                     </Toast.Header>
                     <Toast.Body>
                       {notification.message}

src/components/experiment-list/experiment-list.js

@@ -13,7 +13,7 @@ export default class ExperimentList extends React.Component {
           <ol>
             {this.props.experiments.map(experiment => {
               return (
-                <li key={experiment.id || experiment.configuration.id} className='nostyle'>
+                <li key={experiment.id || experiment.configuration.id} className='no-style'>
                   <ExperimentListElement experiment={experiment}
                     availableServers={this.props.availableServers}
                     startingExperiment={this.props.startingExperiment}

src/services/experiments/execution/__tests__/running-simulation-service.test.js

@@ -8,7 +8,7 @@ import MockAvailableServers from '../../../../mocks/mock_available-servers.json'
 import MockSimulations from '../../../../mocks/mock_simulations.json';
 
 import RunningSimulationService from '../running-simulation-service.js';
-import DialogService from '../../../error-handler-service';
+import DialogService from '../../../dialog-service';
 import RoslibService from '../../../roslib-service';
 import { EXPERIMENT_STATE } from '../../experiment-constants.js';
 

src/services/experiments/execution/__tests__/server-resources-service.test.js

@@ -7,7 +7,7 @@ import 'jest-fetch-mock';
 import MockServerconfig from '../../../../mocks/mock_server-config.json';
 
 import ServerResourcesService from '../../../../services/experiments/execution/server-resources-service';
-import DialogService from '../../../error-handler-service';
+import DialogService from '../../../dialog-service';
 
 jest.setTimeout(10000);
 

src/services/experiments/files/remote-experiment-files-service.js

@@ -37,14 +37,14 @@ class RemoteExperimentFilesService extends HttpService {
     return _instance;
   }
 
-  isSupported (){
+  isSupported() {
     return window.showDirectoryPicker !== undefined && window.showDirectoryPicker !== null;
   }
 
   notifyNotSupported() {
     if (!this.isSupported()){
       DialogService.instance.warningNotification({
-        message : 'The remote experiment files is not supported on ' + browserName()
+        message : 'The remote experiment file system is not supported on ' + browserName()
       });
     }
   }