Resolve TMSS-2819 "System events table in workflow bugs"

SAS/TMSS/frontend/tmss_webapp/src/layout/components/AppBreadcrumb.js

 import React,{ Component } from 'react';
 import PropTypes from 'prop-types';
-import {Link, matchPath} from 'react-router-dom';
+import { matchPath} from 'react-router-dom';
 import { routes } from '../../routes';
 import { withRouter } from 'react-router-dom/cjs/react-router-dom.min';
 export class AppBreadcrumb extends Component {
     
     static propTypes = {
-        match: PropTypes.object,
+        section: PropTypes.object,
+        location:PropTypes.object,
+        setPageTitle: PropTypes.func,
+        history :PropTypes.object
     }
 
     constructor(props) {

SAS/TMSS/frontend/tmss_webapp/src/routes/SystemEvent/system.event.list.js

@@ -499,9 +499,9 @@ export class SystemEventList extends Component {
         await Promise.all(promises).then(responses => {
             let systemEvent = {};
             this.setState({ userrole: responses[0] });
-            this.totalPage = responses[1] && responses[1].data ? responses[1].data.count : 1;
+            this.totalPage = responses[1]?.data ? responses[1].data.count : 1;
             this.systemEvents = [];
-            if (responses[1] && responses[1].data) {
+            if (responses[1]?.data) {
                 for (const response of responses[1].data.results) {
                     systemEvent = response;
                     if (response.affected_hardware_doc.stations) {
@@ -526,9 +526,10 @@ export class SystemEventList extends Component {
                 }
             }
             this.pageUpdated = true;
+
             this.setState({
                 isLoading: false,
-                systemEventList: this.systemEvents,
+                systemEventList:[...this.systemEvents],
             });
 
 

SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/WeekView.js

@@ -292,10 +292,10 @@ export default function WeekView() {
                 isLoading: true,
             }))
             setShowSummary(true)
-            if (summaryItem.type === "RESERVATION") {
-                fetchReservationSummaryInformation(summaryItem.id, setSummarySettings).catch(e => console.error("Couldn't retrieve reservations details for id: ", summaryItem.id, e))
+            if (summaryItem?.type === "RESERVATION") {
+                fetchReservationSummaryInformation(summaryItem?.id, setSummarySettings).catch(e => console.error("Couldn't retrieve reservations details for id: ", summaryItem?.id, e))
             } else { //a Scheduling Unit summary is selected
-                fetchSUSummaryInformation(summaryItem.id, setSummarySettings,summaryItem.item).catch(e => console.error("Couldn't retrieve summary details for id: ", summaryItem.id, e))
+                fetchSUSummaryInformation(summaryItem?.id, setSummarySettings,summaryItem?.item).catch(e => console.error("Couldn't retrieve summary details for id: ", summaryItem?.id, e))
             }
         }
     }, [summaryItem]);

SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/components/toolbar/Filters.js

-import { InputSwitch } from "primereact/inputswitch";
+import Toggle from './Toggle'
 import { MultiSelect } from "primereact/multiselect";
 import { useEffect, useState } from "react";
 import { updateStore } from "../../../../services/store.helper";
@@ -15,26 +15,7 @@ import { ProgressSpinner } from 'primereact/progressspinner';
 
 import { fetchAllOptionsForMultiSelects } from "../../data/filters.data";
 const isDebugLoggingOn = false
-function Toggle(props) { //TODO: extract to separate class
-    const {
-        labelName,
-        tooltipText,
-        checkedValue,
-        onChangeCallback,
-    } = props
-
-    if (checkedValue === undefined || onChangeCallback === undefined) {
-        return null
-    }
 
-    return <div className={`toggle-container ${checkedValue ? "" : "disabled"}`}>
-        <label>{labelName}</label>
-        <InputSwitch checked={checkedValue}
-            tooltip={tooltipText}
-            onChange={(e) => onChangeCallback(e.value)
-            } />
-    </div>
-}
 
 function filterReservations(reservations, visibleStartTime, reservationFilter, projectFilter,endTime,startTime) {
     

SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/components/toolbar/Toggle.js

+import { InputSwitch } from "primereact/inputswitch"
+import PropTypes from 'prop-types';
+export default  function Toggle(props) { 
+    const {
+        labelName,
+        tooltipText,
+        checkedValue,
+        onChangeCallback,
+    } = props
+
+    if (checkedValue === undefined || onChangeCallback === undefined) {
+        return null
+    }
+
+    return <div className={`toggle-container ${checkedValue ? "" : "disabled"}`}>
+        <label>{labelName}</label>
+        <InputSwitch checked={checkedValue}
+            tooltip={tooltipText}
+            onChange={(e) => onChangeCallback(e.value)
+            } />
+    </div>
+}
+
+Toggle.propTypes = {
+    labelName: PropTypes.string,
+    tooltipText: PropTypes.string,
+    checkedValue: PropTypes.bool,
+    onChangeCallback: PropTypes.func.isRequired,
+  };
\ No newline at end of file

SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/helpers/timeline.renderer.helper.js

@@ -9,10 +9,13 @@ function getItemDivStyle(itemContext, item, hasItemColors = false) {
     };
     if (hasItemColors) {
         style.color = item.color
-        style.background = itemContext.selected ? 'none' : item.bgColor
+        style.background =  item.bgColor
         style.opacity = item.opacity ? item.opacity : 100
     }
-    return style;
+    if (item.type=="SUNTIME") {
+        style.cursor='default';
+    }
+     return style;
 }
 
 function getItemContentStyle(itemContext,