From 84b422a120e769f39cbd665d7583967db274ba1e Mon Sep 17 00:00:00 2001
From: Mike Salvatore <mike.s.salvatore@gmail.com>
Date: Fri, 8 Jan 2021 11:42:04 -0500
Subject: [PATCH] ui: Refactor AdvancedMultiSelect as a class

AdvancedMultiSelect can be broken up and composed of smaller, more
focused components. This commit refactors AdvancedMultiSelect from a
functional component to a class component.
---
 .../ui-components/AdvancedMultiSelect.js      | 162 ++++++++++--------
 1 file changed, 87 insertions(+), 75 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 9c1468d8d..38e52271e 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
@@ -1,5 +1,4 @@
-import React, {useState} from 'react';
-
+import React from "react";
 import {Card, Button, Form} from 'react-bootstrap';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faCheckSquare} from '@fortawesome/free-solid-svg-icons';
@@ -22,14 +21,6 @@ function getSelectValuesAfterClick(valueArray, clickedValue) {
   }
 }
 
-function onMasterCheckboxClick(checkboxValue, defaultArray, onChangeFnc) {
-  if (checkboxValue) {
-    onChangeFnc([]);
-  } else {
-    onChangeFnc(defaultArray);
-  }
-}
-
 // 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) {
@@ -46,76 +37,97 @@ function getFullDefinitionByKey(refString, registry, itemKey) {
   return fullArray.filter(e => (e.enum[0] === itemKey))[0];
 }
 
-function setPaneInfo(refString, registry, itemKey, setPaneInfoFnc) {
-  let definitionObj = getFullDefinitionByKey(refString, registry, itemKey);
-  setPaneInfoFnc({title: definitionObj.title, content: definitionObj.info, link: definitionObj.link});
-}
-
 function getDefaultPaneParams(refString, registry) {
   let configSection = getObjectFromRegistryByRef(refString, registry);
   return ({title: configSection.title, content: configSection.description});
 }
 
-function AdvancedMultiSelect(props) {
-  const [masterCheckbox, setMasterCheckbox] = useState(true);
-  const {
-    schema,
-    id,
-    options,
-    value,
-    required,
-    disabled,
-    readonly,
-    multiple,
-    autofocus,
-    onChange,
-    registry
-  } = props;
-  const {enumOptions} = options;
-  const [infoPaneParams, setInfoPaneParams] = useState(getDefaultPaneParams(schema.items.$ref, registry));
-  getDefaultPaneParams(schema.items.$ref, registry);
-  const selectValue = cloneDeep(value);
-  return (
-    <div className={'advanced-multi-select'}>
-      <Card.Header>
-        <Button key={`${props.schema.title}-button`} value={value}
-                variant={'link'} disabled={disabled}
-                onClick={() => {
-                  onMasterCheckboxClick(masterCheckbox, schema.default, onChange);
-                  setMasterCheckbox(!masterCheckbox);
-                }}
-        >
-          <FontAwesomeIcon icon={masterCheckbox ? faCheckSquare : faSquare}/>
-        </Button>
-        <span className={'header-title'}>{props.schema.title}</span>
-      </Card.Header>
-      <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={() => setPaneInfo(schema.items.$ref, registry, value, setInfoPaneParams)}>
-              <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={infoPaneParams.title} body={infoPaneParams.content} link={infoPaneParams.link}/>
-    </div>
-  );
+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);
+    }
+
+    onMasterCheckboxClick() {
+        if (this.state.masterCheckbox) {
+            this.props.onChange([]);
+        } else {
+            this.props.onChange(this.props.schema.default);
+        }
+
+        this.toggleMasterCheckbox();
+    }
+
+    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}});
+    }
+    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'}>
+                <Card.Header>
+                    <Button key={`${schema.title}-button`} value={value}
+                        variant={'link'} disabled={disabled}
+                        onClick={this.onMasterCheckboxClick}>
+                        <FontAwesomeIcon icon={this.state.masterCheckbox ? faCheckSquare : faSquare}/>
+                    </Button>
+                    <span className={'header-title'}>{schema.title}</span>
+                </Card.Header>
+                <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)}>
+
+                                    <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}/>
+            </div>
+        );
+    }
 }
 
 export default AdvancedMultiSelect;