Island UI: fix a bug in side navigation that causes the report side navigation button to go out of "active" mode on ransomware report tab

monkey/monkey_island/cc/ui/src/components/Main.tsx

@@ -33,12 +33,18 @@ import IslandHttpClient from "./IslandHttpClient";
 
 let notificationIcon = require('../images/notification-logo-512x512.png');
 
-const reportZeroTrustRoute = '/report/zeroTrust';
-
-
 const Routes = {
   LandingPage: '/landing-page',
-  GettingStartedPage: '/'
+  GettingStartedPage: '/',
+  Report: '/report',
+  AttackReport: '/report/attack',
+  ZeroTrustReport: '/report/zeroTrust',
+  SecurityReport: '/report/security',
+  RansomwareReport: '/report/ransomware',
+}
+
+export function isReportRoute(route){
+  return route.startsWith(Routes.Report);
 }
 
 class AppComponent extends AuthComponent {
@@ -237,7 +243,7 @@ class AppComponent extends AuthComponent {
       const hostname = window.location.hostname;
       const port = window.location.port;
       const protocol = window.location.protocol;
-      const url = `${protocol}//${hostname}:${port}${reportZeroTrustRoute}`;
+      const url = `${protocol}//${hostname}:${port}${Routes.ZeroTrustReport}`;
 
       Notifier.start(
         'Monkey Island',

monkey/monkey_island/cc/ui/src/components/SideNavComponent.tsx

@@ -7,6 +7,7 @@ import {faExternalLinkAlt} from '@fortawesome/free-solid-svg-icons';
 import VersionComponent from './side-menu/VersionComponent';
 import '../styles/components/SideNav.scss';
 import {CompletedSteps} from "./side-menu/CompletedSteps";
+import {isReportRoute} from "./Main";
 
 
 const guardicoreLogoImage = require('../images/guardicore-logo.png');
@@ -53,9 +54,7 @@ const SideNavComponent = ({disabled=false, completedSteps}: Props) => {
             <NavLink to='/report/security'
                      className={getNavLinkClass()}
                      isActive={(_match, location) => {
-                       return (location.pathname === '/report/attack'
-                         || location.pathname === '/report/zeroTrust'
-                         || location.pathname === '/report/security')
+                       return (isReportRoute(location.pathname))
                      }}>
               <span className='number'>3.</span>
               Security Reports