From b319bc8e5f150514e3a472788b00d77ddf40473b Mon Sep 17 00:00:00 2001
From: VakarisZ <vakarisz@yahoo.com>
Date: Wed, 20 Mar 2019 16:45:43 +0200
Subject: [PATCH] Toolbar with technique description added to checkboxes

---
 .../src/components/attck/MatrixComponent.js   |  9 ++-
 .../src/components/ui-components/checkbox.js  | 61 +++++++++++++++++++
 .../styles/{CheckBox.scss => Checkbox.scss}   | 16 +----
 .../cc/ui/src/styles/Tooltip.scss             |  8 +++
 4 files changed, 78 insertions(+), 16 deletions(-)
 create mode 100644 monkey/monkey_island/cc/ui/src/components/ui-components/checkbox.js
 rename monkey/monkey_island/cc/ui/src/styles/{CheckBox.scss => Checkbox.scss} (84%)
 create mode 100644 monkey/monkey_island/cc/ui/src/styles/Tooltip.scss

diff --git a/monkey/monkey_island/cc/ui/src/components/attck/MatrixComponent.js b/monkey/monkey_island/cc/ui/src/components/attck/MatrixComponent.js
index ff674fbc1..98ce1604d 100644
--- a/monkey/monkey_island/cc/ui/src/components/attck/MatrixComponent.js
+++ b/monkey/monkey_island/cc/ui/src/components/attck/MatrixComponent.js
@@ -1,10 +1,12 @@
 import React from 'react';
 import Form from 'react-jsonschema-form';
 import {Col, Nav, NavItem} from 'react-bootstrap';
-import CheckBox from '../ui-components/checkBox'
+import Checkbox from '../ui-components/checkbox'
+import Tooltip from 'react-tooltip-lite'
 import AuthComponent from '../AuthComponent';
-import 'filepond/dist/filepond.min.css';
 import ReactTable from "react-table";
+import 'filepond/dist/filepond.min.css';
+import '../../styles/Tooltip.scss';
 
 
 let renderTechnique = function (technique) {
@@ -12,7 +14,8 @@ let renderTechnique = function (technique) {
   if (technique == null){
     return (<div></div>)
   } else {
-    return (<CheckBox>{technique.title}</CheckBox>)
+    return (<Tooltip content={technique.description} direction="down"><Checkbox>
+      {technique.title}</Checkbox> </Tooltip>)
   }
 };
 
diff --git a/monkey/monkey_island/cc/ui/src/components/ui-components/checkbox.js b/monkey/monkey_island/cc/ui/src/components/ui-components/checkbox.js
new file mode 100644
index 000000000..1d3754036
--- /dev/null
+++ b/monkey/monkey_island/cc/ui/src/components/ui-components/checkbox.js
@@ -0,0 +1,61 @@
+import '../../styles/Checkbox.scss'
+import React from 'react';
+
+class Checkbox extends React.PureComponent {
+
+	constructor() {
+		super();
+
+		this.state = {
+			checked: false,
+			isAnimating: false,
+		};
+
+		this.toggleChecked = this.toggleChecked.bind(this);
+		this.ping = this.ping.bind(this);
+		this.composeStateClasses = this.composeStateClasses.bind(this);
+	}
+
+	//
+	toggleChecked() {
+		if (this.state.isAnimating) return false;
+		this.setState({
+			checked: !this.state.checked,
+			isAnimating: true,
+		});
+	}
+
+	//
+	ping() {
+		this.setState({ isAnimating: false })
+	}
+
+	//
+	composeStateClasses(core) {
+		let result = core;
+
+		if (this.state.checked) { result += ' is-checked'; }
+		else { result += ' is-unchecked' }
+
+		if (this.state.isAnimating) { result += ' do-ping'; }
+		return result;
+	}
+
+	//
+	render() {
+
+		const cl = this.composeStateClasses('ui-checkbox-btn');
+
+		return (
+			<div
+				className={ cl }
+				onClick={ this.toggleChecked }>
+					<input className="ui ui-checkbox" type="checkbox" checked={this.state.checked} />
+					<label className="text">{ this.props.children }</label>
+				<div className="ui-btn-ping" onTransitionEnd={this.ping}></div>
+			</div>
+		)
+	}
+}
+
+export default Checkbox;
diff --git a/monkey/monkey_island/cc/ui/src/styles/CheckBox.scss b/monkey/monkey_island/cc/ui/src/styles/Checkbox.scss
similarity index 84%
rename from monkey/monkey_island/cc/ui/src/styles/CheckBox.scss
rename to monkey/monkey_island/cc/ui/src/styles/Checkbox.scss
index fc325edf2..cb24563f7 100644
--- a/monkey/monkey_island/cc/ui/src/styles/CheckBox.scss
+++ b/monkey/monkey_island/cc/ui/src/styles/Checkbox.scss
@@ -1,14 +1,4 @@
-// readable
-$desired-line-height: 100%;
-$desired-height: 100%;
-$text-offset: 2px;
-
-// usable
-$dlh: $desired-line-height;
-$dh: $desired-height;
-$to: $text-offset;
-
-// coooolors
+// colors
 $light-grey: #EAF4F4;
 $medium-grey: #7B9EA8;
 $dark-grey: #7B9EA8;
@@ -23,16 +13,16 @@ $black: #000000;
   width: 100%;
   height: 100%;
 
-	input { display: none; } // turn off, but not forgotten
+	input { display: none; }
 
 	.icon,
 	.text {
 		display: inline-block;
-		vertical-align: top;
 		color: inherit;
 	}
 
 	.text {
+    padding-top: 4px;
 		font-size: 14px;
 	}
 
diff --git a/monkey/monkey_island/cc/ui/src/styles/Tooltip.scss b/monkey/monkey_island/cc/ui/src/styles/Tooltip.scss
new file mode 100644
index 000000000..7d2ff9d35
--- /dev/null
+++ b/monkey/monkey_island/cc/ui/src/styles/Tooltip.scss
@@ -0,0 +1,8 @@
+$background: #000000;
+$font: #fff;
+
+.react-tooltip-lite {
+  background: $background;
+  color: $font;
+  max-width: 400px !important;
+}