From 9f12702c3e835f90171a0d474d760015fb71ca53 Mon Sep 17 00:00:00 2001
From: Mike Salvatore <mike.s.salvatore@gmail.com>
Date: Mon, 1 Feb 2021 06:57:04 -0500
Subject: [PATCH] ui: code readability improvements

---
 .../components/ui-components/ChildCheckbox.js |  9 +---
 .../src/components/ui-components/InfoPane.js  | 41 ++++++++++---------
 2 files changed, 23 insertions(+), 27 deletions(-)

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 47a86dab6..6ebe69985 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
@@ -52,18 +52,13 @@ function ChildCheckbox(props) {
     safe
   } = props;
 
-  let displayLabel = [<span key={'label'} className={'option-text'}>{label}</span>];
-
-  if (!safe) {
-    displayLabel.push(<WarningIcon key="warning-icon"/>)
-  }
-
   return (
     <Form.Group onClick={() => onPaneClick(value)}>
       <Button value={value} variant={'link'} disabled={disabled} onClick={() => onClick(value)}>
         <FontAwesomeIcon icon={checkboxState ? faCheckSquare : faSquare}/>
       </Button>
-      {displayLabel}
+      <span key={'label'} className={'option-text'}>{label}</span>
+      {!safe && <WarningIcon key="warning-icon"/>}
     </Form.Group>
   );
 }
diff --git a/monkey/monkey_island/cc/ui/src/components/ui-components/InfoPane.js b/monkey/monkey_island/cc/ui/src/components/ui-components/InfoPane.js
index e6476d3a2..21e71e29f 100644
--- a/monkey/monkey_island/cc/ui/src/components/ui-components/InfoPane.js
+++ b/monkey/monkey_island/cc/ui/src/components/ui-components/InfoPane.js
@@ -60,37 +60,38 @@ function getSubtitle(props) {
 }
 
 function getBody(props) {
-  let body = [<span key={'body'}>{props.body}</span>];
-
-  if (props.warningType !== WarningType.NONE) {
-    body.push(getWarning(props.warningType));
-  }
-
   return (
     <Card.Body className={'pane-body'}>
-      {body}
+      <span key={'body'}>{props.body}</span>
+      {props.warningType !== WarningType.NONE && getWarning(props.warningType)}
     </Card.Body>
   )
 }
 
 function getWarning(warningType) {
-  if (warningType === WarningType.SINGLE) {
-    var warning = <span>This option may cause a system to become unstable or
-      may change a system's state in undesirable ways. Therefore, this option
-      is not recommended for use in production or other sensitive
-      environments.</span>;
-  } else {
-    warning = <span>Some options have been selected that may cause a system
-      to become unstable or may change a system's state in undesirable ways.
-      Running Infection Monkey in a production or other sensitive environment
-      with this configuration is not recommended.</span>;
-  }
-
   return (
     <div className={'info-pane-warning'} key={'warning'}>
-      <WarningIcon/>{warning}
+      <WarningIcon/>{warningType === WarningType.SINGLE ? getSingleOptionWarning() : getMultipleOptionsWarning()}
     </div>
   );
 }
 
+function getSingleOptionWarning() {
+  return (
+    <span>This option may cause a system to become unstable or
+    may change a system's state in undesirable ways. Therefore, this option
+    is not recommended for use in production or other sensitive
+    environments.</span>
+  );
+}
+
+function getMultipleOptionsWarning() {
+  return (
+    <span>Some options have been selected that may cause a system
+    to become unstable or may change a system's state in undesirable ways.
+    Running Infection Monkey in a production or other sensitive environment
+    with this configuration is not recommended.</span>
+  );
+}
+
 export {getDefaultPaneParams, InfoPane, WarningType}