From 878f959a8f697b05fa35e48221692278f1b8250d Mon Sep 17 00:00:00 2001
From: Mike Salvatore <mike.s.salvatore@gmail.com>
Date: Mon, 11 Jan 2021 19:11:27 -0500
Subject: [PATCH] ui: Factor ChildCheckbox out of AdvancedMultiSelect

---
 .../ui-components/AdvancedMultiSelect.js      | 191 ++++++++++--------
 1 file changed, 107 insertions(+), 84 deletions(-)

diff --git a/monkey/monkey_island/cc/ui/src/components/ui-components/AdvancedMultiSelect.js b/monkey/monkey_island/cc/ui/src/components/ui-components/AdvancedMultiSelect.js
index b875a6426..7507f234f 100644
--- a/monkey/monkey_island/cc/ui/src/components/ui-components/AdvancedMultiSelect.js
+++ b/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,95 +45,129 @@ 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);
+  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() {
+    if (this.state.masterCheckbox) {
+      this.props.onChange([]);
+    } else {
+      this.props.onChange(this.props.schema.default);
     }
 
-    onMasterCheckboxClick() {
-        if (this.state.masterCheckbox) {
-            this.props.onChange([]);
-        } else {
-            this.props.onChange(this.props.schema.default);
-        }
+    this.toggleMasterCheckbox();
+  }
 
-        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
-        }));
-    }
+  toggleMasterCheckbox() {
+    this.setState((state) => ({
+      masterCheckbox: !state.masterCheckbox
+    }));
+  }
 
-    setPaneInfo(refString, registry, itemKey) {
-        let definitionObj = getFullDefinitionByKey(refString, registry, itemKey);
-        this.setState({infoPaneParams: {title: definitionObj.title, content: definitionObj.info, link: definitionObj.link}});
-    }
+  setPaneInfo(refString, registry, itemKey) {
+    let definitionObj = getFullDefinitionByKey(refString, registry, itemKey);
+    this.setState({infoPaneParams: {title: definitionObj.title, content: definitionObj.info, link: definitionObj.link}});
+  }
 
-    render() {
-        const {
-            schema,
-            id,
-            options,
-            value,
-            required,
-            disabled,
-            readonly,
-            multiple,
-            autofocus,
-            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} />
-                <Form.Group
-                    style={{height: `${getComponentHeight(enumOptions.length)}px`}}
-                    id={id}
-                    multiple={multiple}
-                    className='choice-block form-control'
-                    required={required}
-                    disabled={disabled || readonly}
-                    autoFocus={autofocus}>
-                    {
-                        enumOptions.map(({value, label}, i) => {
-                            return (
-                                <Form.Group
-                                    key={i}
-                                    onClick={() => this.setPaneInfo(schema.items.$ref, registry, value)}>
+  render() {
+    const {
+      schema,
+      id,
+      options,
+      value,
+      required,
+      disabled,
+      readonly,
+      multiple,
+      autofocus,
+      onChange,
+      registry
+    } = this.props;
 
-                                    <Button value={value} variant={'link'} disabled={disabled}
-                                        onClick={() => onChange(getSelectValuesAfterClick(selectValue, value))}>
+    const {enumOptions} = options;
+    getDefaultPaneParams(schema.items.$ref, registry);
 
-                                        <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}/>
-            </div>
-        );
-    }
+    return (
+      <div className={'advanced-multi-select'}>
+        <MasterCheckbox title={schema.title} value={value}
+          disabled={disabled} onClick={this.onMasterCheckboxClick}
+          checkboxState={this.state.masterCheckbox}/>
+        <Form.Group
+          style={{height: `${getComponentHeight(enumOptions.length)}px`}}
+          id={id}
+          multiple={multiple}
+          className='choice-block form-control'
+          required={required}
+          disabled={disabled || readonly}
+          autoFocus={autofocus}>
+          {
+            enumOptions.map(({value, label}, i) => {
+              return (
+                <ChildCheckbox key={i} onPaneClick={this.setPaneInfo}
+                onClick={this.onChildCheckboxClick} value={value}
+                disabled={disabled} label={label} checkboxState={this.props.value.includes(value)}/>
+              );
+            }
+          )}
+        </Form.Group>
+        <InfoPane title={this.state.infoPaneParams.title}
+          body={this.state.infoPaneParams.content}
+          link={this.state.infoPaneParams.link}/>
+      </div>
+    );
+  }
 }
 
 export default AdvancedMultiSelect;