From d8a0a6d7a8ef99affe3c912f3e32f9c21eff349f Mon Sep 17 00:00:00 2001
From: VakarisZ <vakarisz@yahoo.com>
Date: Mon, 31 Aug 2020 10:35:39 +0300
Subject: [PATCH] More work on Run monkey page

---
 .../pages/RunMonkeyPage/CommandDisplay.js     |  8 ++---
 .../RunMonkeyPage/LocalManualRunOptions.js    |  6 ++--
 .../pages/RunMonkeyPage/ManualRunOptions.js   | 25 ++++++++++-----
 .../pages/RunMonkeyPage/RemoteRunOptions.js   | 30 ++++++++++++++++++
 .../ui-components/DropdownSelect.js           |  2 +-
 .../inline-selection/BackButton.js            |  2 +-
 .../inline-selection/InlineSelection.js       | 31 +++++++++++++------
 .../inline-selection/NextSelectionButton.js   |  4 +--
 .../monkey_island/cc/ui/src/styles/Main.scss  |  1 +
 .../inline-selection/CommandDisplay.scss      | 21 +++++++++++++
 .../inline-selection/InlineSelection.scss     | 21 ++++++++-----
 11 files changed, 114 insertions(+), 37 deletions(-)
 create mode 100644 monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/RemoteRunOptions.js
 create mode 100644 monkey/monkey_island/cc/ui/src/styles/components/inline-selection/CommandDisplay.scss

diff --git a/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/CommandDisplay.js b/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/CommandDisplay.js
index b237e25d2..ca312722a 100644
--- a/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/CommandDisplay.js
+++ b/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/CommandDisplay.js
@@ -28,7 +28,7 @@ export default function commandDisplay(props) {
 
   function renderNav() {
     return (
-      <Nav variant='pills' fill activeKey={selectedCommand.type} onSelect={setSelectedCommandByName}>
+      <Nav variant='tabs' activeKey={selectedCommand.type} onSelect={setSelectedCommandByName}>
         {props.commands.map(command => {
           return (
             <Nav.Item key={command.type}>
@@ -39,9 +39,9 @@ export default function commandDisplay(props) {
   }
 
   return (
-    <>
+    <div className={'command-display'}>
       {renderNav()}
-      <Card style={{'margin': '0.5em'}}>
+      <Card>
         <div style={{'overflow': 'auto', 'padding': '0.5em'}}>
           <CopyToClipboard text={selectedCommand.type} className="pull-right btn-sm">
             <Button style={{margin: '-0.5em'}} title="Copy to Clipboard">
@@ -51,7 +51,7 @@ export default function commandDisplay(props) {
           <code>{selectedCommand.command}</code>
         </div>
       </Card>
-    </>
+    </div>
   )
 }
 
diff --git a/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/LocalManualRunOptions.js b/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/LocalManualRunOptions.js
index 9b6783e1b..d5fe77558 100644
--- a/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/LocalManualRunOptions.js
+++ b/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/LocalManualRunOptions.js
@@ -11,7 +11,7 @@ import CommandDisplay from './CommandDisplay';
 
 
 const LocalManualRunOptions = (props) => {
-  return InlineSelection(getContents, props, ManualRunOptions)
+  return InlineSelection(getContents, props)
 }
 
 const getContents = (props) => {
@@ -47,8 +47,8 @@ const getContents = (props) => {
 
   return (
     <>
-      <DropdownSelect defaultKey={'win64'} options={osTypes} onClick={setOsType}/>
-      <DropdownSelect defaultKey={0} options={props.ips} onClick={setIp}/>
+      <DropdownSelect defaultKey={'win64'} options={osTypes} onClick={setOsType} variant={'outline-monkey'}/>
+      <DropdownSelect defaultKey={0} options={props.ips} onClick={setIp} variant={'outline-monkey'}/>
       <CommandDisplay commands={commands}/>
     </>
   )
diff --git a/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/ManualRunOptions.js b/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/ManualRunOptions.js
index c82fdbebd..3dbb97f60 100644
--- a/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/ManualRunOptions.js
+++ b/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/ManualRunOptions.js
@@ -2,11 +2,12 @@ import React, {useEffect, useState} from 'react';
 import NextSelectionButton from '../../ui-components/inline-selection/NextSelectionButton';
 import LocalManualRunOptions from './LocalManualRunOptions';
 import AuthComponent from '../../AuthComponent';
-import BackButton from '../../ui-components/inline-selection/BackButton';
 import {faLaptopCode} from '@fortawesome/free-solid-svg-icons/faLaptopCode';
 import {faNetworkWired} from '@fortawesome/free-solid-svg-icons/faNetworkWired';
 import {faCogs} from '@fortawesome/free-solid-svg-icons/faCogs';
 import {Container} from 'react-bootstrap';
+import InlineSelection from '../../ui-components/inline-selection/InlineSelection';
+import {cloneDeep} from 'lodash';
 
 function ManualRunOptions(props) {
 
@@ -44,23 +45,31 @@ function ManualRunOptions(props) {
   }
 
   function getDefaultContents() {
+    const newProps = cloneDeep({...props, onBackButtonClick: props.disableManualOptions});
+    return InlineSelection(defaultContents, newProps);
+  }
+
+  function defaultContents() {
     return (
-      <Container className={'inline-selection-component'}>
+      <>
         <NextSelectionButton text={'Local'}
                              description={'Run on a machine via command.'}
                              icon={faLaptopCode}
-                             onButtonClick={() => {setComponent(LocalManualRunOptions,
-                                                          {ips: ips, setComponent: setComponent})}}/>
+                             onButtonClick={() => {
+                               setComponent(LocalManualRunOptions,
+                                 {ips: ips, setComponent: setComponent})
+                             }}/>
         <NextSelectionButton text={'Remote'}
                              description={'Run using remote command execution.'}
                              icon={faNetworkWired}
-                             onButtonClick={() => {}}/>
+                             onButtonClick={() => {
+                             }}/>
         <NextSelectionButton text={'Automation'}
                              description={'Run using automation tools like ansible or chef.'}
                              icon={faCogs}
-                             onButtonClick={() => {}}/>
-        <BackButton onClick={props.disableManualOptions} />
-      </Container>
+                             onButtonClick={() => {
+                             }}/>
+      </>
     );
   }
 
diff --git a/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/RemoteRunOptions.js b/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/RemoteRunOptions.js
new file mode 100644
index 000000000..e1731aba4
--- /dev/null
+++ b/monkey/monkey_island/cc/ui/src/components/pages/RunMonkeyPage/RemoteRunOptions.js
@@ -0,0 +1,30 @@
+import React, {useEffect, useState} from 'react';
+import NextSelectionButton from '../../ui-components/inline-selection/NextSelectionButton';
+import LocalManualRunOptions from './LocalManualRunOptions';
+import {faLaptopCode} from '@fortawesome/free-solid-svg-icons/faLaptopCode';
+import {faNetworkWired} from '@fortawesome/free-solid-svg-icons/faNetworkWired';
+import {faCogs} from '@fortawesome/free-solid-svg-icons/faCogs';
+import InlineSelection from '../../ui-components/inline-selection/InlineSelection';
+import ManualRunOptions from './ManualRunOptions';
+
+
+const RemoteRunOptions = (props) => {
+  return InlineSelection(getContents, props)
+}
+
+function getContents() {
+  return (
+    <>
+      <NextSelectionButton text={'Local'}
+                           description={'Run on a machine via command.'}
+                           icon={faLaptopCode}
+                           onButtonClick={() => {
+                             setComponent(LocalManualRunOptions,
+                               {ips: ips, setComponent: setComponent})
+                           }}/>
+    </>
+  );
+}
+
+
+export default ManualRunOptions;
diff --git a/monkey/monkey_island/cc/ui/src/components/ui-components/DropdownSelect.js b/monkey/monkey_island/cc/ui/src/components/ui-components/DropdownSelect.js
index f7426fb4f..5585bbc1b 100644
--- a/monkey/monkey_island/cc/ui/src/components/ui-components/DropdownSelect.js
+++ b/monkey/monkey_island/cc/ui/src/components/ui-components/DropdownSelect.js
@@ -44,7 +44,7 @@ export default function DropdownSelect(props) {
   return (
     <>
       <Dropdown>
-        <Dropdown.Toggle variant="success" id="dropdown-basic">
+        <Dropdown.Toggle variant={props.variant !== undefined ? props.variant : 'success'} id='dropdown-basic'>
           {props.options[selectedOption]}
         </Dropdown.Toggle>
 
diff --git a/monkey/monkey_island/cc/ui/src/components/ui-components/inline-selection/BackButton.js b/monkey/monkey_island/cc/ui/src/components/ui-components/inline-selection/BackButton.js
index 6f2e07bfd..5799a39ea 100644
--- a/monkey/monkey_island/cc/ui/src/components/ui-components/inline-selection/BackButton.js
+++ b/monkey/monkey_island/cc/ui/src/components/ui-components/inline-selection/BackButton.js
@@ -7,7 +7,7 @@ import {faCaretLeft} from '@fortawesome/free-solid-svg-icons/faCaretLeft';
 export default function backButton(props) {
   return (
     <Row>
-      <Col lg={8} md={10} sm={12}>
+      <Col>
         <Button variant={'outline-dark'} onClick={props.onClick} className={'back-button'}>
           <FontAwesomeIcon icon={faCaretLeft} />
           <h1>Back</h1>
diff --git a/monkey/monkey_island/cc/ui/src/components/ui-components/inline-selection/InlineSelection.js b/monkey/monkey_island/cc/ui/src/components/ui-components/inline-selection/InlineSelection.js
index aa68d0b4e..c7a3d4169 100644
--- a/monkey/monkey_island/cc/ui/src/components/ui-components/inline-selection/InlineSelection.js
+++ b/monkey/monkey_island/cc/ui/src/components/ui-components/inline-selection/InlineSelection.js
@@ -2,28 +2,41 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import BackButton from './BackButton';
 import ManualRunOptions from '../../pages/RunMonkeyPage/ManualRunOptions';
-import Container from 'react-bootstrap';
+import {Col, Row, Container} from 'react-bootstrap';
 
 
-export default function InlineSelection(WrappedComponent, props, previousComponent){
+export default function InlineSelection(WrappedComponent, props) {
   return (
     <Container className={'inline-selection-component'}>
-      {previousComponent === undefined ? '' :
-        <BackButton onClick={() => {setPreviousComponent(props, previousComponent)}}/>}
-      <WrappedComponent {...props}/>
+      <Row>
+        <Col lg={8} md={10} sm={12}>
+          <WrappedComponent {...props}/>
+          {renderBackButton(props)}
+        </Col>
+      </Row>
     </Container>
   )
 }
 
-function setPreviousComponent(props, previousComponent) {
-  if(previousComponent === ManualRunOptions){
+function renderBackButton(props){
+  if(props.onBackButtonClick !== undefined){
+    return (<BackButton onClick={props.onBackButtonClick}/>);
+  } else if(props.previousComponent === undefined){
+    return (<BackButton onClick={() => {setPreviousComponent(props, props.previousComponent)}}/>);
+  }
+}
+
+function setPreviousComponent(props) {
+  if (props.previousComponent === ManualRunOptions) {
     return props.setComponent()
   } else {
-    return props.setComponent(previousComponent, props)
+    return props.setComponent(props.previousComponent, props)
   }
 }
 
 InlineSelection.propTypes = {
   setComponent: PropTypes.func,
-  ips: PropTypes.arrayOf(PropTypes.string)
+  ips: PropTypes.arrayOf(PropTypes.string),
+  previousComponent: PropTypes.object,
+  onBackButtonClick: PropTypes.func
 }
diff --git a/monkey/monkey_island/cc/ui/src/components/ui-components/inline-selection/NextSelectionButton.js b/monkey/monkey_island/cc/ui/src/components/ui-components/inline-selection/NextSelectionButton.js
index 93bbd712f..433fd076e 100644
--- a/monkey/monkey_island/cc/ui/src/components/ui-components/inline-selection/NextSelectionButton.js
+++ b/monkey/monkey_island/cc/ui/src/components/ui-components/inline-selection/NextSelectionButton.js
@@ -5,12 +5,11 @@ import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faAngleRight} from '@fortawesome/free-solid-svg-icons';
 
 export default function nextSelectionButton(props) {
-  console.log(props);
   let description = props.description !== undefined ? (<p>{props.description}</p>) : ''
   let icon = props.icon !== undefined ? (<FontAwesomeIcon icon={props.icon}/>) : ''
   return (
     <Row>
-      <Col lg={8} md={10} sm={12}>
+      <Col>
         <Button variant={'outline-monkey'} size='lg' className={'selection-button'}
                 onClick={props.onButtonClick}>
           {icon}
@@ -25,7 +24,6 @@ export default function nextSelectionButton(props) {
 
 nextSelectionButton.propTypes = {
   text: PropTypes.string,
-  description: PropTypes.string,
   icon: FontAwesomeIcon,
   onButtonClick: PropTypes.func
 }
diff --git a/monkey/monkey_island/cc/ui/src/styles/Main.scss b/monkey/monkey_island/cc/ui/src/styles/Main.scss
index a247b001f..9ac2d680e 100644
--- a/monkey/monkey_island/cc/ui/src/styles/Main.scss
+++ b/monkey/monkey_island/cc/ui/src/styles/Main.scss
@@ -14,6 +14,7 @@
 @import 'components/inline-selection/InlineSelection';
 @import 'components/inline-selection/NextSelectionButton';
 @import 'components/inline-selection/BackButton';
+@import 'components/inline-selection/CommandDisplay';
 
 
 // Define custom elements after bootstrap import
diff --git a/monkey/monkey_island/cc/ui/src/styles/components/inline-selection/CommandDisplay.scss b/monkey/monkey_island/cc/ui/src/styles/components/inline-selection/CommandDisplay.scss
new file mode 100644
index 000000000..ebec04e20
--- /dev/null
+++ b/monkey/monkey_island/cc/ui/src/styles/components/inline-selection/CommandDisplay.scss
@@ -0,0 +1,21 @@
+.command-display {
+  margin-top: 30px;
+}
+
+.command-display .nav-tabs .nav-item a{
+  font-size: 0.8em;
+  color: $monkey-black;
+}
+
+.command-display .nav-tabs .nav-item a.active{
+  color: $monkey-alt;
+}
+
+.command-display .nav-tabs{
+  border-bottom: none;
+}
+
+.command-display div.card{
+  margin: 0;
+  border-top-left-radius: 0;
+}
diff --git a/monkey/monkey_island/cc/ui/src/styles/components/inline-selection/InlineSelection.scss b/monkey/monkey_island/cc/ui/src/styles/components/inline-selection/InlineSelection.scss
index 0deda70db..c66ccbd6d 100644
--- a/monkey/monkey_island/cc/ui/src/styles/components/inline-selection/InlineSelection.scss
+++ b/monkey/monkey_island/cc/ui/src/styles/components/inline-selection/InlineSelection.scss
@@ -1,12 +1,17 @@
-//.inline-selection-component.container {
-//  display: flex;
-//  justify-content: center;
-//}
-//
-//.inline-selection-component.container .selection-button{
-//  margin: 0 5px 0 5px;
-//}
+.inline-selection-component.container{
+  padding: 0;
+  margin-left: 15px;
+}
 
 .inline-selection-component .selection-button {
   width: 100%;
 }
+
+.inline-selection-component .dropdown {
+  display: inline-block;
+  margin-right: 10px;
+}
+
+.inline-selection-component .command-display {
+  margin-bottom: 20px;
+}