ui: code readability improvements

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>
   );
 }

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}