From 63f885e3db7849ac29d518771e5441f8321d48a2 Mon Sep 17 00:00:00 2001
From: VakarisZ <vakarisz@yahoo.com>
Date: Fri, 16 Jul 2021 08:52:49 +0300
Subject: [PATCH] Island UI: merge StandardLayoutComponent.js and
 DisabledSidebarLayoutComponent.tsx into one component to remove duplication

---
 .../cc/ui/src/components/Main.tsx             | 32 +++++++++----------
 .../DisabledSidebarLayoutComponent.tsx        | 15 ---------
 .../layouts/SidebarLayoutComponent.tsx        | 22 +++++++++++++
 .../layouts/StandardLayoutComponent.js        | 15 ---------
 4 files changed, 38 insertions(+), 46 deletions(-)
 delete mode 100644 monkey/monkey_island/cc/ui/src/components/layouts/DisabledSidebarLayoutComponent.tsx
 create mode 100644 monkey/monkey_island/cc/ui/src/components/layouts/SidebarLayoutComponent.tsx
 delete mode 100644 monkey/monkey_island/cc/ui/src/components/layouts/StandardLayoutComponent.js

diff --git a/monkey/monkey_island/cc/ui/src/components/Main.tsx b/monkey/monkey_island/cc/ui/src/components/Main.tsx
index ae9a46534..a8d78cdc9 100644
--- a/monkey/monkey_island/cc/ui/src/components/Main.tsx
+++ b/monkey/monkey_island/cc/ui/src/components/Main.tsx
@@ -23,9 +23,8 @@ import 'react-data-components/css/table-twbs.css';
 import 'styles/App.css';
 import 'react-toggle/style.css';
 import 'react-table/react-table.css';
-import {StandardLayoutComponent} from './layouts/StandardLayoutComponent';
 import LoadingScreen from './ui-components/LoadingScreen';
-import {DisabledSidebarLayoutComponent} from "./layouts/DisabledSidebarLayoutComponent";
+import SidebarLayoutComponent from "./layouts/SidebarLayoutComponent";
 import {CompletedSteps} from "./side-menu/CompletedSteps";
 import Timeout = NodeJS.Timeout;
 import IslandHttpClient from "./IslandHttpClient";
@@ -179,52 +178,53 @@ class AppComponent extends AuthComponent {
             <Route path='/login' render={() => (<LoginPageComponent onStatusChange={this.updateStatus}/>)}/>
             <Route path='/register' render={() => (<RegisterPageComponent onStatusChange={this.updateStatus}/>)}/>
             {this.renderRoute(Routes.LandingPage,
-              <DisabledSidebarLayoutComponent component={LandingPage}
-                                              completedSteps={new CompletedSteps()}
-                                              onStatusChange={this.updateStatus}/>)}
+              <SidebarLayoutComponent component={LandingPage}
+                                      sideNavDisabled={true}
+                                      completedSteps={new CompletedSteps()}
+                                      onStatusChange={this.updateStatus}/>)}
             {this.renderRoute(Routes.GettingStartedPage,
-              <StandardLayoutComponent component={GettingStartedPage}
+              <SidebarLayoutComponent component={GettingStartedPage}
                                        completedSteps={this.state.completedSteps}
                                        onStatusChange={this.updateStatus}
               />,
               true)}
             {this.renderRoute('/configure',
-              <StandardLayoutComponent component={ConfigurePage}
+              <SidebarLayoutComponent component={ConfigurePage}
                                        islandMode={this.state.islandMode}
                                        onStatusChange={this.updateStatus}
                                        completedSteps={this.state.completedSteps}/>)}
             {this.renderRoute('/run-monkey',
-              <StandardLayoutComponent component={RunMonkeyPage}
+              <SidebarLayoutComponent component={RunMonkeyPage}
                                        islandMode={this.state.islandMode}
                                        onStatusChange={this.updateStatus}
                                        completedSteps={this.state.completedSteps}/>)}
             {this.renderRoute('/infection/map',
-              <StandardLayoutComponent component={MapPage}
+              <SidebarLayoutComponent component={MapPage}
                                        onStatusChange={this.updateStatus}
                                        completedSteps={this.state.completedSteps}/>)}
             {this.renderRoute('/infection/telemetry',
-              <StandardLayoutComponent component={TelemetryPage}
+              <SidebarLayoutComponent component={TelemetryPage}
                                        onStatusChange={this.updateStatus}
                                        completedSteps={this.state.completedSteps}/>)}
             {this.renderRoute('/start-over',
-              <StandardLayoutComponent component={StartOverPage}
+              <SidebarLayoutComponent component={StartOverPage}
                                        onStatusChange={this.updateStatus}
                                        completedSteps={this.state.completedSteps}/>)}
             {this.redirectTo('/report', '/report/security')}
             {this.renderRoute('/report/security',
-              <StandardLayoutComponent component={ReportPage}
+              <SidebarLayoutComponent component={ReportPage}
                                        completedSteps={this.state.completedSteps}/>)}
             {this.renderRoute('/report/attack',
-              <StandardLayoutComponent component={ReportPage}
+              <SidebarLayoutComponent component={ReportPage}
                                        completedSteps={this.state.completedSteps}/>)}
             {this.renderRoute('/report/zeroTrust',
-              <StandardLayoutComponent component={ReportPage}
+              <SidebarLayoutComponent component={ReportPage}
                                        completedSteps={this.state.completedSteps}/>)}
             {this.renderRoute('/report/ransomware',
-              <StandardLayoutComponent component={ReportPage}
+              <SidebarLayoutComponent component={ReportPage}
                                        completedSteps={this.state.completedSteps}/>)}
             {this.renderRoute('/license',
-              <StandardLayoutComponent component={LicensePage}
+              <SidebarLayoutComponent component={LicensePage}
                                        onStatusChange={this.updateStatus}
                                        completedSteps={this.state.completedSteps}/>)}
             <Route component={NotFoundPage}/>
diff --git a/monkey/monkey_island/cc/ui/src/components/layouts/DisabledSidebarLayoutComponent.tsx b/monkey/monkey_island/cc/ui/src/components/layouts/DisabledSidebarLayoutComponent.tsx
deleted file mode 100644
index cbda44206..000000000
--- a/monkey/monkey_island/cc/ui/src/components/layouts/DisabledSidebarLayoutComponent.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import {Route} from 'react-router-dom';
-import SideNavComponent from '../SideNavComponent.tsx';
-import {Col, Row} from 'react-bootstrap';
-
-export const DisabledSidebarLayoutComponent = ({component: Component, ...rest}) => (
-  <Route {...rest} render={() => (
-    <Row>
-      <Col sm={3} md={3} lg={3} xl={2} className='sidebar'>
-        <SideNavComponent disabled={true} completedSteps={rest['completedSteps']}/>
-      </Col>
-      <Component {...rest} />
-    </Row>
-    )}/>
-)
diff --git a/monkey/monkey_island/cc/ui/src/components/layouts/SidebarLayoutComponent.tsx b/monkey/monkey_island/cc/ui/src/components/layouts/SidebarLayoutComponent.tsx
new file mode 100644
index 000000000..45e82e60c
--- /dev/null
+++ b/monkey/monkey_island/cc/ui/src/components/layouts/SidebarLayoutComponent.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import {Route} from 'react-router-dom';
+import SideNavComponent from '../SideNavComponent.tsx';
+import {Col, Row} from 'react-bootstrap';
+
+const SidebarLayoutComponent = ({component: Component,
+                                  sideNavDisabled = false,
+                                  completedSteps = null,
+                                  ...other
+                                }) => (
+  <Route {...other} render={() => {
+    return (
+      <Row>
+        <Col sm={3} md={3} lg={3} xl={2} className='sidebar'>
+          <SideNavComponent disabled={sideNavDisabled} completedSteps={completedSteps}/>
+        </Col>
+        <Component {...other} />
+      </Row>)
+  }}/>
+)
+
+export default SidebarLayoutComponent;
diff --git a/monkey/monkey_island/cc/ui/src/components/layouts/StandardLayoutComponent.js b/monkey/monkey_island/cc/ui/src/components/layouts/StandardLayoutComponent.js
deleted file mode 100644
index 5d66166d5..000000000
--- a/monkey/monkey_island/cc/ui/src/components/layouts/StandardLayoutComponent.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react'
-import {Route} from 'react-router-dom'
-import SideNavComponent from '../SideNavComponent.tsx'
-import {Col, Row} from 'react-bootstrap';
-
-export const StandardLayoutComponent = ({component: Component, ...rest}) => (
-  <Route {...rest} render={() => (
-    <Row>
-      <Col sm={3} md={3} lg={3} xl={2} className='sidebar'>
-        <SideNavComponent completedSteps={rest['completedSteps']}/>
-      </Col>
-      <Component {...rest} />
-    </Row>
-    )}/>
-)