From 5f9470d17c408e3a8087efb6716d9c68b59f985b Mon Sep 17 00:00:00 2001
From: Mike Salvatore <mike.s.salvatore@gmail.com>
Date: Thu, 28 Jan 2021 09:00:55 -0500
Subject: [PATCH] ui: extract WarningIcon component from ChildCheckbox.js

---
 .../ui/src/components/ui-components/ChildCheckbox.js  |  5 +++--
 .../cc/ui/src/components/ui-components/WarningIcon.js | 11 +++++++++++
 2 files changed, 14 insertions(+), 2 deletions(-)
 create mode 100644 monkey/monkey_island/cc/ui/src/components/ui-components/WarningIcon.js

diff --git a/monkey/monkey_island/cc/ui/src/components/ui-components/ChildCheckbox.js b/monkey/monkey_island/cc/ui/src/components/ui-components/ChildCheckbox.js
index e740734d5..57088f0c2 100644
--- a/monkey/monkey_island/cc/ui/src/components/ui-components/ChildCheckbox.js
+++ b/monkey/monkey_island/cc/ui/src/components/ui-components/ChildCheckbox.js
@@ -2,10 +2,11 @@ import React from 'react';
 import {Button, Form} from 'react-bootstrap';
 
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {faCheckSquare, faExclamationTriangle} from '@fortawesome/free-solid-svg-icons';
+import {faCheckSquare} from '@fortawesome/free-solid-svg-icons';
 import {faSquare} from '@fortawesome/free-regular-svg-icons';
 
 import {getComponentHeight} from './utils/HeightCalculator';
+import WarningIcon from './WarningIcon';
 
 function ChildCheckboxContainer(props) {
   const {
@@ -54,7 +55,7 @@ function ChildCheckbox(props) {
   let displayLabel = [<span key={'label'} className={'option-text'}>{label}</span>];
 
   if (!safe) {
-    displayLabel.push(<FontAwesomeIcon key="unsafe-indicator" className="unsafe-indicator" icon={faExclamationTriangle}/>)
+    displayLabel.push(<WarningIcon key="unsafe-indicator"/>)
   }
 
   return (
diff --git a/monkey/monkey_island/cc/ui/src/components/ui-components/WarningIcon.js b/monkey/monkey_island/cc/ui/src/components/ui-components/WarningIcon.js
new file mode 100644
index 000000000..2e759ccb6
--- /dev/null
+++ b/monkey/monkey_island/cc/ui/src/components/ui-components/WarningIcon.js
@@ -0,0 +1,11 @@
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faExclamationTriangle} from '@fortawesome/free-solid-svg-icons';
+import React from 'react';
+
+function WarningIcon() {
+  return (
+    <FontAwesomeIcon className="unsafe-indicator" icon={faExclamationTriangle}/>
+  );
+}
+
+export default WarningIcon;