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] 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={() => {