From af329d56d826a5092cb3a2535bf0de65bd14600f Mon Sep 17 00:00:00 2001
From: Mike Salvatore <mike.s.salvatore@gmail.com>
Date: Fri, 8 Jan 2021 16:18:24 -0500
Subject: [PATCH] ui: Factor MasterCheckbox() out of AdvancedMultiSelect

---
 .../ui-components/AdvancedMultiSelect.js      | 33 ++++++++++++++-----
 1 file changed, 25 insertions(+), 8 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 38e52271e..b875a6426 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
@@ -42,6 +42,27 @@ function getDefaultPaneParams(refString, registry) {
   return ({title: configSection.title, content: configSection.description});
 }
 
+function MasterCheckbox(props) {
+    const {
+        title,
+        value,
+        disabled,
+        onClick,
+        checkboxState
+    } = props;
+
+    return (
+        <Card.Header>
+            <Button key={`${title}-button`} value={value}
+                variant={'link'} disabled={disabled}
+                onClick={onClick}>
+                <FontAwesomeIcon icon={checkboxState ? faCheckSquare : faSquare} />
+            </Button>
+            <span className={'header-title'}>{title}</span>
+        </Card.Header>
+    );
+}
+
 class AdvancedMultiSelect extends React.Component {
     constructor(props) {
         super(props)
@@ -69,6 +90,7 @@ class AdvancedMultiSelect extends React.Component {
         let definitionObj = getFullDefinitionByKey(refString, registry, itemKey);
         this.setState({infoPaneParams: {title: definitionObj.title, content: definitionObj.info, link: definitionObj.link}});
     }
+
     render() {
         const {
             schema,
@@ -88,14 +110,9 @@ class AdvancedMultiSelect extends React.Component {
         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>
+                <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}