Island UI: add island scenario/mode to the top of the side navigation if it's chosen

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

@@ -186,12 +186,21 @@ class AppComponent extends AuthComponent {
     }
   }
 
+  getSideNavHeader() {
+    if(this.state.islandMode === 'ransomware'){
+      return "Ransomware"
+    } else {
+      return "Custom"
+    }
+  }
+
   render() {
 
     let defaultSideNavProps = {completedSteps: this.state.completedSteps,
                                onStatusChange: this.updateStatus,
                                islandMode: this.state.islandMode,
-                               defaultReport: this.getDefaultReport()}
+                               defaultReport: this.getDefaultReport(),
+                               sideNavHeader: this.getSideNavHeader()}
 
     return (
       <Router>

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

@@ -18,11 +18,15 @@ const infectionMonkeyImage = require('../images/infection-monkey.svg');
 type Props = {
   disabled?: boolean,
   completedSteps: CompletedSteps,
-  defaultReport: string
+  defaultReport: string,
+  header?: string
 }
 
 
-const SideNavComponent = ({disabled, completedSteps, defaultReport}: Props) => {
+const SideNavComponent = ({disabled,
+                           completedSteps,
+                           defaultReport,
+                           header=''}: Props) => {
 
   return (
     <>
@@ -34,6 +38,14 @@ const SideNavComponent = ({disabled, completedSteps, defaultReport}: Props) => {
       </NavLink>
 
       <ul className='navigation'>
+        {(header !== '') &&
+        <>
+          <li>
+            <h4 className={'text-muted'}>{header}</h4>
+          </li>
+          <hr/>
+        </>}
+
         <li>
           <NavLink to={Routes.RunMonkeyPage} className={getNavLinkClass()}>
             <span className='number'>1.</span>

monkey/monkey_island/cc/ui/src/components/layouts/SidebarLayoutComponent.tsx

@@ -7,6 +7,7 @@ const SidebarLayoutComponent = ({component: Component,
                                   sideNavDisabled = false,
                                   completedSteps = null,
                                   defaultReport = '',
+                                  sideNavHeader = '',
                                   ...other
                                 }) => (
   <Route {...other} render={() => {
@@ -15,7 +16,8 @@ const SidebarLayoutComponent = ({component: Component,
         <Col sm={3} md={3} lg={3} xl={2} className='sidebar'>
           <SideNavComponent disabled={sideNavDisabled}
                             completedSteps={completedSteps}
-                            defaultReport={defaultReport}/>
+                            defaultReport={defaultReport}
+                            header={sideNavHeader}/>
         </Col>
         <Component {...other} />
       </Row>)