ui: Factor ChildCheckbox out of AdvancedMultiSelect

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

@@ -10,17 +10,6 @@ import {resolveObjectPath} from './utils/ObjectPathResolver';
 import InfoPane from './InfoPane';
 
 
-function getSelectValuesAfterClick(valueArray, clickedValue) {
-  if (valueArray.includes(clickedValue)) {
-    return valueArray.filter((e) => {
-      return e !== clickedValue;
-    });
-  } else {
-    valueArray.push(clickedValue);
-    return valueArray;
-  }
-}
-
 // Definitions passed to components only contains value and label,
 // custom fields like "info" or "links" must be pulled from registry object using this function
 function getFullDefinitionsFromRegistry(refString, registry) {
@@ -56,18 +45,42 @@ function MasterCheckbox(props) {
             <Button key={`${title}-button`} value={value}
                 variant={'link'} disabled={disabled}
                 onClick={onClick}>
-                <FontAwesomeIcon icon={checkboxState ? faCheckSquare : faSquare} />
+                <FontAwesomeIcon icon={checkboxState ? faCheckSquare : faSquare}/>
             </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>
+    );
+}
+
 class AdvancedMultiSelect extends React.Component {
   constructor(props) {
     super(props)
     this.state = {masterCheckbox: true, infoPaneParams: getDefaultPaneParams(props.schema.items.$ref, props.registry)};
     this.onMasterCheckboxClick = this.onMasterCheckboxClick.bind(this);
+    this.onChildCheckboxClick = this.onChildCheckboxClick.bind(this);
+    this.setPaneInfo = this.setPaneInfo.bind(this, props.schema.items.$ref, props.registry);
   }
 
   onMasterCheckboxClick() {
@@ -80,6 +93,23 @@ class AdvancedMultiSelect extends React.Component {
     this.toggleMasterCheckbox();
   }
 
+  onChildCheckboxClick(value) {
+    this.props.onChange(this.getSelectValuesAfterClick(value));
+  }
+
+  getSelectValuesAfterClick(clickedValue) {
+    const valueArray = cloneDeep(this.props.value);
+
+    if (valueArray.includes(clickedValue)) {
+      return valueArray.filter((e) => {
+        return e !== clickedValue;
+      });
+    } else {
+      valueArray.push(clickedValue);
+      return valueArray;
+    }
+  }
+
   toggleMasterCheckbox() {
     this.setState((state) => ({
       masterCheckbox: !state.masterCheckbox
@@ -105,14 +135,15 @@ class AdvancedMultiSelect extends React.Component {
       onChange,
       registry
     } = this.props;
+
     const {enumOptions} = options;
     getDefaultPaneParams(schema.items.$ref, registry);
-        const selectValue = cloneDeep(value);
+
     return (
       <div className={'advanced-multi-select'}>
         <MasterCheckbox title={schema.title} value={value}
           disabled={disabled} onClick={this.onMasterCheckboxClick}
-                    checkboxState={this.state.masterCheckbox} />
+          checkboxState={this.state.masterCheckbox}/>
         <Form.Group
           style={{height: `${getComponentHeight(enumOptions.length)}px`}}
           id={id}
@@ -124,24 +155,16 @@ class AdvancedMultiSelect extends React.Component {
           {
             enumOptions.map(({value, label}, i) => {
               return (
-                                <Form.Group
+                <ChildCheckbox key={i} onPaneClick={this.setPaneInfo}
-                                    key={i}
+                onClick={this.onChildCheckboxClick} value={value}
-                                    onClick={() => this.setPaneInfo(schema.items.$ref, registry, value)}>
+                disabled={disabled} label={label} checkboxState={this.props.value.includes(value)}/>
-
-                                    <Button value={value} variant={'link'} disabled={disabled}
-                                        onClick={() => onChange(getSelectValuesAfterClick(selectValue, value))}>
-
-                                        <FontAwesomeIcon icon={selectValue.includes(value) ? faCheckSquare : faSquare}/>
-                                    </Button>
-                                    <span className={'option-text'}>
-                                        {label}
-                                    </span>
-                                </Form.Group>
               );
             }
           )}
         </Form.Group>
-                <InfoPane title={this.state.infoPaneParams.title} body={this.state.infoPaneParams.content} link={this.state.infoPaneParams.link}/>
+        <InfoPane title={this.state.infoPaneParams.title}
+          body={this.state.infoPaneParams.content}
+          link={this.state.infoPaneParams.link}/>
       </div>
     );
   }