From 10dff6b7eb87e9da1e3c5c9192c8c0c526e06628 Mon Sep 17 00:00:00 2001
From: VakarisZ <vakarisz@yahoo.com>
Date: Wed, 27 Nov 2019 12:58:01 +0200
Subject: [PATCH] Finished adding link to the attack technique in attack report

---
 .../report-components/attack/SelectedTechnique.js    | 11 ++++++++++-
 .../report-components/attack/TechniqueDropdowns.js   |  2 +-
 .../cc/ui/src/styles/report/AttackReport.scss        | 12 ++++++++----
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/attack/SelectedTechnique.js b/monkey/monkey_island/cc/ui/src/components/report-components/attack/SelectedTechnique.js
index d6dc29d6f..8e7ae74b0 100644
--- a/monkey/monkey_island/cc/ui/src/components/report-components/attack/SelectedTechnique.js
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/attack/SelectedTechnique.js
@@ -2,6 +2,8 @@ import React from "react";
 import Collapse from '@kunukn/react-collapse';
 
 import AttackReport from '../AttackReport';
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faQuestionCircle} from "@fortawesome/free-solid-svg-icons";
 
 const classNames = require('classnames');
 
@@ -27,8 +29,15 @@ class SelectedTechnique extends React.Component {
     const TechniqueComponent = this.state.techComponents[tech_id];
     return (
       <div key={tech_id} className={classNames('collapse-item', {'item--active': true})}>
-        <button className={classNames('btn-collapse', AttackReport.getComponentClass(tech_id, this.state.techniques))}>
+        <button className={classNames('btn-collapse',
+                                      'selected-technique',
+                                      AttackReport.getComponentClass(tech_id, this.state.techniques))}>
           <span>{this.state.techniques[tech_id].title}</span>
+          <span>
+            <a href={this.state.techniques[tech_id].link} target="_blank" className={"link-to-technique"}>
+              <FontAwesomeIcon icon={faQuestionCircle}/>
+            </a>
+          </span>
         </button>
         <Collapse
           className="collapse-comp"
diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/attack/TechniqueDropdowns.js b/monkey/monkey_island/cc/ui/src/components/report-components/attack/TechniqueDropdowns.js
index b3c5136c5..6c26fce40 100644
--- a/monkey/monkey_island/cc/ui/src/components/report-components/attack/TechniqueDropdowns.js
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/attack/TechniqueDropdowns.js
@@ -36,7 +36,7 @@ class TechniqueDropdowns extends React.Component{
                 onClick={() => this.onToggle(tech_id)}>
           <span>{this.state.techniques[tech_id].title}</span>
           <span>
-            <a href={this.state.techniques[tech_id].link} target="_blank">
+            <a href={this.state.techniques[tech_id].link} target="_blank" className={"link-to-technique"}>
               <FontAwesomeIcon icon={faQuestionCircle}/>
             </a>
               <FontAwesomeIcon icon={this.state.collapseOpen === tech_id ? faChevronDown : faChevronUp}/>
diff --git a/monkey/monkey_island/cc/ui/src/styles/report/AttackReport.scss b/monkey/monkey_island/cc/ui/src/styles/report/AttackReport.scss
index 652ab4a22..953cc627d 100644
--- a/monkey/monkey_island/cc/ui/src/styles/report/AttackReport.scss
+++ b/monkey/monkey_island/cc/ui/src/styles/report/AttackReport.scss
@@ -4,10 +4,6 @@
   margin-top: 20px;
 }
 
-.attack-report .btn-collapse span:nth-of-type(2) {
-  flex: 0;
-}
-
 .attack-report div.attack-legend {
   margin-top: 30px;
 }
@@ -21,3 +17,11 @@
   margin-bottom: 20px;
   padding: 0;
 }
+
+.attack-report .link-to-technique {
+  margin-right: 10px;
+}
+
+.attack-report .selected-technique {
+  cursor: default;
+}