ui: separate MasterCheckbox and ChildCheckbox into their own files

monkey/monkey_island/cc/ui/src/components/ui-components/AdvancedMultiSelect.js

@@ -1,20 +1,13 @@
-import React from "react";
+import React from 'react';
-import {Card, Button, Form} from 'react-bootstrap';
+import {Form} from 'react-bootstrap';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+
-import {faCheckSquare} from '@fortawesome/free-solid-svg-icons';
-import {faMinusSquare} from '@fortawesome/free-solid-svg-icons';
-import {faSquare} from '@fortawesome/free-regular-svg-icons';
 import {cloneDeep} from 'lodash';
 
 import {getComponentHeight} from './utils/HeightCalculator';
 import {resolveObjectPath} from './utils/ObjectPathResolver';
 import InfoPane from './InfoPane';
-
+import {MasterCheckbox, MasterCheckboxState} from './MasterCheckbox';
-const MasterCheckboxState = {
+import ChildCheckbox from './ChildCheckbox';
-  NONE: 0,
-  MIXED: 1,
-  ALL: 2
-}
 
 function getFullDefinitionByKey(refString, registry, itemKey) {
   let fullArray = getFullDefinitionsFromRegistry(refString, registry);
@@ -143,52 +136,4 @@ class AdvancedMultiSelect extends React.Component {
   }
 }
 
-function MasterCheckbox(props) {
-    const {
-        title,
-        disabled,
-        onClick,
-        checkboxState
-    } = props;
-
-    let newCheckboxIcon = faCheckSquare;
-
-    if (checkboxState === MasterCheckboxState.NONE) {
-      newCheckboxIcon = faSquare;
-    } else if (checkboxState === MasterCheckboxState.MIXED) {
-      newCheckboxIcon = faMinusSquare;
-    }
-
-    return (
-        <Card.Header>
-            <Button key={`${title}-button`} variant={'link'} disabled={disabled} onClick={onClick}>
-                <FontAwesomeIcon icon={newCheckboxIcon}/>
-            </Button>
-            <span className={'header-title'}>{title}</span>
-        </Card.Header>
-    );
-}
-
-function ChildCheckbox(props) {
-    const {
-        onPaneClick,
-        onClick,
-        value,
-        disabled,
-        label,
-        checkboxState
-    } = props;
-
-    return (
-        <Form.Group onClick={() => onPaneClick(value)}>
-            <Button value={value} variant={'link'} disabled={disabled} onClick={() => onClick(value)}>
-                <FontAwesomeIcon icon={checkboxState ? faCheckSquare : faSquare}/>
-            </Button>
-            <span className={'option-text'}>
-                {label}
-            </span>
-        </Form.Group>
-    );
-}
-
 export default AdvancedMultiSelect;

monkey/monkey_island/cc/ui/src/components/ui-components/ChildCheckbox.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import {Button, Form} from 'react-bootstrap';
+
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faCheckSquare} from '@fortawesome/free-solid-svg-icons';
+import {faSquare} from '@fortawesome/free-regular-svg-icons';
+
+function ChildCheckbox(props) {
+    const {
+        onPaneClick,
+        onClick,
+        value,
+        disabled,
+        label,
+        checkboxState
+    } = props;
+
+    return (
+        <Form.Group onClick={() => onPaneClick(value)}>
+            <Button value={value} variant={'link'} disabled={disabled} onClick={() => onClick(value)}>
+                <FontAwesomeIcon icon={checkboxState ? faCheckSquare : faSquare}/>
+            </Button>
+            <span className={'option-text'}>
+                {label}
+            </span>
+        </Form.Group>
+    );
+}
+
+export default ChildCheckbox;

monkey/monkey_island/cc/ui/src/components/ui-components/MasterCheckbox.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import {Card, Button} from 'react-bootstrap';
+
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faCheckSquare} from '@fortawesome/free-solid-svg-icons';
+import {faMinusSquare} from '@fortawesome/free-solid-svg-icons';
+import {faSquare} from '@fortawesome/free-regular-svg-icons';
+
+const MasterCheckboxState = {
+  NONE: 0,
+  MIXED: 1,
+  ALL: 2
+}
+
+function MasterCheckbox(props) {
+  const {
+    title,
+    disabled,
+    onClick,
+    checkboxState
+  } = props;
+
+  let newCheckboxIcon = faCheckSquare;
+
+  if (checkboxState === MasterCheckboxState.NONE) {
+    newCheckboxIcon = faSquare;
+  } else if (checkboxState === MasterCheckboxState.MIXED) {
+    newCheckboxIcon = faMinusSquare;
+  }
+
+  return (
+    <Card.Header>
+      <Button key={`${title}-button`} variant={'link'} disabled={disabled} onClick={onClick}>
+        <FontAwesomeIcon icon={newCheckboxIcon}/>
+      </Button>
+      <span className={'header-title'}>{title}</span>
+    </Card.Header>
+  );
+}
+
+export {MasterCheckboxState, MasterCheckbox};