From 8584217e3bbb16ef637aaf354f5e39a1aa878163 Mon Sep 17 00:00:00 2001
From: VakarisZ <vakarisz@yahoo.com>
Date: Mon, 19 Jul 2021 13:53:28 +0300
Subject: [PATCH 1/3] Island UI: add island scenario/mode to the top of the
 side navigation if it's chosen

---
 .../monkey_island/cc/ui/src/components/Main.tsx  | 11 ++++++++++-
 .../cc/ui/src/components/SideNavComponent.tsx    | 16 ++++++++++++++--
 .../layouts/SidebarLayoutComponent.tsx           |  4 +++-
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/monkey/monkey_island/cc/ui/src/components/Main.tsx b/monkey/monkey_island/cc/ui/src/components/Main.tsx
index 7635f3e4c..eab409e25 100644
--- a/monkey/monkey_island/cc/ui/src/components/Main.tsx
+++ b/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>
diff --git a/monkey/monkey_island/cc/ui/src/components/SideNavComponent.tsx b/monkey/monkey_island/cc/ui/src/components/SideNavComponent.tsx
index 450103bb9..450daddf7 100644
--- a/monkey/monkey_island/cc/ui/src/components/SideNavComponent.tsx
+++ b/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>
diff --git a/monkey/monkey_island/cc/ui/src/components/layouts/SidebarLayoutComponent.tsx b/monkey/monkey_island/cc/ui/src/components/layouts/SidebarLayoutComponent.tsx
index 746641958..f807d8e33 100644
--- a/monkey/monkey_island/cc/ui/src/components/layouts/SidebarLayoutComponent.tsx
+++ b/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>)

From ff9d649b761485b9c279bc9b1a7fef8d2b99cd4e Mon Sep 17 00:00:00 2001
From: VakarisZ <vakarisz@yahoo.com>
Date: Tue, 20 Jul 2021 08:58:21 +0300
Subject: [PATCH 2/3] Island UI: rename a method in Main.tsx to be more
 specific: getSideNavHeader -> getIslandModeTitle

---
 monkey/monkey_island/cc/ui/src/components/Main.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/monkey/monkey_island/cc/ui/src/components/Main.tsx b/monkey/monkey_island/cc/ui/src/components/Main.tsx
index eab409e25..ccd18645c 100644
--- a/monkey/monkey_island/cc/ui/src/components/Main.tsx
+++ b/monkey/monkey_island/cc/ui/src/components/Main.tsx
@@ -186,7 +186,7 @@ class AppComponent extends AuthComponent {
     }
   }
 
-  getSideNavHeader() {
+  getIslandModeTitle() {
     if(this.state.islandMode === 'ransomware'){
       return "Ransomware"
     } else {
@@ -200,7 +200,7 @@ class AppComponent extends AuthComponent {
                                onStatusChange: this.updateStatus,
                                islandMode: this.state.islandMode,
                                defaultReport: this.getDefaultReport(),
-                               sideNavHeader: this.getSideNavHeader()}
+                               sideNavHeader: this.getIslandModeTitle()}
 
     return (
       <Router>

From e3921ed45444ab814f606dcedded3064155de607 Mon Sep 17 00:00:00 2001
From: VakarisZ <vakarisz@yahoo.com>
Date: Tue, 20 Jul 2021 17:10:16 +0300
Subject: [PATCH 3/3] Island UI: improve the side navigation with an icon of
 the chosen scenario

---
 .../cc/ui/src/components/Main.tsx             | 20 ++++++++++++++-----
 .../cc/ui/src/components/SideNavComponent.tsx | 10 +++++-----
 .../layouts/SidebarLayoutComponent.tsx        |  2 +-
 3 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/monkey/monkey_island/cc/ui/src/components/Main.tsx b/monkey/monkey_island/cc/ui/src/components/Main.tsx
index ccd18645c..5216245d7 100644
--- a/monkey/monkey_island/cc/ui/src/components/Main.tsx
+++ b/monkey/monkey_island/cc/ui/src/components/Main.tsx
@@ -29,6 +29,8 @@ import {CompletedSteps} from "./side-menu/CompletedSteps";
 import Timeout = NodeJS.Timeout;
 import IslandHttpClient from "./IslandHttpClient";
 import _ from "lodash";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faFileCode, faLightbulb} from "@fortawesome/free-solid-svg-icons";
 
 
 let notificationIcon = require('../images/notification-logo-512x512.png');
@@ -180,20 +182,28 @@ class AppComponent extends AuthComponent {
 
   getDefaultReport() {
     if(this.state.islandMode === 'ransomware'){
-      return Routes.RansomwareReport
+      return Routes.RansomwareReport;
     } else {
-      return Routes.SecurityReport
+      return Routes.SecurityReport;
     }
   }
 
-  getIslandModeTitle() {
+  getIslandModeTitle(){
     if(this.state.islandMode === 'ransomware'){
-      return "Ransomware"
+      return this.formIslandModeTitle("Ransomware", faFileCode);
     } else {
-      return "Custom"
+      return this.formIslandModeTitle("Custom", faLightbulb);
     }
   }
 
+  formIslandModeTitle(title, icon){
+    return (<>
+      <h5 className={'text-muted'}>
+        <FontAwesomeIcon icon={icon} /> {title}
+      </h5>
+    </>)
+  }
+
   render() {
 
     let defaultSideNavProps = {completedSteps: this.state.completedSteps,
diff --git a/monkey/monkey_island/cc/ui/src/components/SideNavComponent.tsx b/monkey/monkey_island/cc/ui/src/components/SideNavComponent.tsx
index 450daddf7..f4f1aef20 100644
--- a/monkey/monkey_island/cc/ui/src/components/SideNavComponent.tsx
+++ b/monkey/monkey_island/cc/ui/src/components/SideNavComponent.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {ReactFragment} from 'react';
 import {NavLink} from 'react-router-dom';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faCheck} from '@fortawesome/free-solid-svg-icons/faCheck';
@@ -19,14 +19,14 @@ type Props = {
   disabled?: boolean,
   completedSteps: CompletedSteps,
   defaultReport: string,
-  header?: string
+  header?: ReactFragment
 }
 
 
 const SideNavComponent = ({disabled,
                            completedSteps,
                            defaultReport,
-                           header=''}: Props) => {
+                           header=null}: Props) => {
 
   return (
     <>
@@ -38,10 +38,10 @@ const SideNavComponent = ({disabled,
       </NavLink>
 
       <ul className='navigation'>
-        {(header !== '') &&
+        {(header !== null) &&
         <>
           <li>
-            <h4 className={'text-muted'}>{header}</h4>
+            {header}
           </li>
           <hr/>
         </>}
diff --git a/monkey/monkey_island/cc/ui/src/components/layouts/SidebarLayoutComponent.tsx b/monkey/monkey_island/cc/ui/src/components/layouts/SidebarLayoutComponent.tsx
index f807d8e33..28bdda439 100644
--- a/monkey/monkey_island/cc/ui/src/components/layouts/SidebarLayoutComponent.tsx
+++ b/monkey/monkey_island/cc/ui/src/components/layouts/SidebarLayoutComponent.tsx
@@ -7,7 +7,7 @@ const SidebarLayoutComponent = ({component: Component,
                                   sideNavDisabled = false,
                                   completedSteps = null,
                                   defaultReport = '',
-                                  sideNavHeader = '',
+                                  sideNavHeader = (<></>),
                                   ...other
                                 }) => (
   <Route {...other} render={() => {