From 278a09e039ace3114e92e10cfaf6b8b225191ea0 Mon Sep 17 00:00:00 2001
From: Shreya <shreya.malviya@gmail.com>
Date: Tue, 13 Jul 2021 14:23:51 +0530
Subject: [PATCH 1/2] cc: Add ransomware report tab to reports page depending
 on mode

---
 .../cc/ui/src/components/pages/ReportPage.js  | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/monkey/monkey_island/cc/ui/src/components/pages/ReportPage.js b/monkey/monkey_island/cc/ui/src/components/pages/ReportPage.js
index 86b73dbb4..df3fd1137 100644
--- a/monkey/monkey_island/cc/ui/src/components/pages/ReportPage.js
+++ b/monkey/monkey_island/cc/ui/src/components/pages/ReportPage.js
@@ -68,7 +68,7 @@ class ReportPageComponent extends AuthComponent {
       //     });
       //   });
       if (this.shouldShowRansomwareReport(this.state.ransomwareReport)) {
-        this.state.sections.push({key: 'ransomware', title: 'Ransomware report'})
+        this.addRansomwareReportTab();
       }
     }
   }
@@ -104,6 +104,26 @@ class ReportPageComponent extends AuthComponent {
     }
   }
 
+  addRansomwareReportTab() { // TODO: Fetch mode from API endpoint
+    let ransomwareTab = {key: 'ransomware', title: 'Ransomware report'};
+
+    // let mode = "";
+    // this.authFetch('/api/mode')
+    //   .then(res => res.json())
+    //     .then(res => {
+    //       mode = res.mode
+    //     }
+    //   );
+
+    let mode = 'ransomware';
+    if (mode === 'ransomware') {
+      this.state.sections.splice(0, 0, ransomwareTab);
+    }
+    else {
+      this.state.sections.push(ransomwareTab);
+    }
+  }
+
   componentWillUnmount() {
     clearInterval(this.state.ztReportRefreshInterval);
   }

From 8efd5629359060c4f135b54a33c6f6409d7bcf49 Mon Sep 17 00:00:00 2001
From: Shreya <shreya.malviya@gmail.com>
Date: Tue, 13 Jul 2021 14:25:41 +0530
Subject: [PATCH 2/2] cc: Rename "sections" -> "orderedSections", and
 "sectionsOrder" -> "sections" in `ReportPage.js`

`sectionsOrder` was not handling the order of the sections.
It was only being used to render the selected section.
`sections` is what was actually handling the order of the sections,
which is now `orderedSections`.
---
 .../cc/ui/src/components/pages/ReportPage.js         | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/monkey/monkey_island/cc/ui/src/components/pages/ReportPage.js b/monkey/monkey_island/cc/ui/src/components/pages/ReportPage.js
index df3fd1137..a8fb0a0d2 100644
--- a/monkey/monkey_island/cc/ui/src/components/pages/ReportPage.js
+++ b/monkey/monkey_island/cc/ui/src/components/pages/ReportPage.js
@@ -15,7 +15,7 @@ class ReportPageComponent extends AuthComponent {
 
   constructor(props) {
     super(props);
-    this.sectionsOrder = ['security', 'zeroTrust', 'attack', 'ransomware'];
+    this.sections = ['security', 'zeroTrust', 'attack', 'ransomware'];
     this.state = {
       securityReport: {},
       attackReport: {},
@@ -23,8 +23,8 @@ class ReportPageComponent extends AuthComponent {
       ransomwareReport: {},
       allMonkeysAreDead: false,
       runStarted: true,
-      selectedSection: ReportPageComponent.selectReport(this.sectionsOrder),
-      sections: [{key: 'security', title: 'Security report'},
+      selectedSection: ReportPageComponent.selectReport(this.sections),
+      orderedSections: [{key: 'security', title: 'Security report'},
         {key: 'zeroTrust', title: 'Zero trust report'},
         {key: 'attack', title: 'ATT&CK report'}]
     };
@@ -117,10 +117,10 @@ class ReportPageComponent extends AuthComponent {
 
     let mode = 'ransomware';
     if (mode === 'ransomware') {
-      this.state.sections.splice(0, 0, ransomwareTab);
+      this.state.orderedSections.splice(0, 0, ransomwareTab);
     }
     else {
-      this.state.sections.push(ransomwareTab);
+      this.state.orderedSections.push(ransomwareTab);
     }
   }
 
@@ -160,7 +160,7 @@ class ReportPageComponent extends AuthComponent {
                history.push(key)
              }}
              className={'report-nav'}>
-          {this.state.sections.map(section => this.renderNavButton(section))}
+          {this.state.orderedSections.map(section => this.renderNavButton(section))}
         </Nav>)}/>)
   };