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 b92ff3f1a..90d8cf818 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,12 +1,11 @@ import React from 'react'; -import {Button, Card, Form} from 'react-bootstrap'; +import {Button, Card} from 'react-bootstrap'; import {cloneDeep} from 'lodash'; -import {getComponentHeight} from './utils/HeightCalculator'; import {getDefaultPaneParams, InfoPane} from './InfoPane'; import {MasterCheckbox, MasterCheckboxState} from './MasterCheckbox'; -import ChildCheckbox from './ChildCheckbox'; +import ChildCheckboxContainer from './ChildCheckbox'; import {getFullDefinitionByKey} from './JsonSchemaHelpers'; function AdvancedMultiSelectHeader(props) { @@ -123,7 +122,7 @@ class AdvancedMultiSelect extends React.Component { })); } - isSafe(itemKey) { + isSafe = (itemKey) => { return getFullDefinitionByKey(this.infoPaneRefString, this.registry, itemKey).safe; } @@ -144,21 +143,12 @@ class AdvancedMultiSelect extends React.Component { disabled={disabled} onCheckboxClick={this.onMasterCheckboxClick} checkboxState={this.state.masterCheckboxState} hideReset={this.state.hideReset} onResetClick={this.onResetClick}/> - <Form.Group - style={{height: `${getComponentHeight(this.enumOptions.length)}px`}} - id={id} multiple={multiple} className='choice-block form-control' - required={required} disabled={disabled || readonly} autoFocus={autofocus}> - { - this.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)} - safe={this.isSafe(value)}/> - ); - } - )} - </Form.Group> + + <ChildCheckboxContainer id={id} multiple={multiple} required={required} + disabled={disabled || readonly} autoFocus={autofocus} isSafe={this.isSafe} + onPaneClick={this.setPaneInfo} onCheckboxClick={this.onChildCheckboxClick} + selectedValues={this.props.value} enumOptions={this.enumOptions}/> + <InfoPane title={this.state.infoPaneParams.title} body={this.state.infoPaneParams.content} link={this.state.infoPaneParams.link}/> diff --git a/monkey/monkey_island/cc/ui/src/components/ui-components/ChildCheckbox.js b/monkey/monkey_island/cc/ui/src/components/ui-components/ChildCheckbox.js index 1cd3caa8c..e740734d5 100644 --- a/monkey/monkey_island/cc/ui/src/components/ui-components/ChildCheckbox.js +++ b/monkey/monkey_island/cc/ui/src/components/ui-components/ChildCheckbox.js @@ -5,6 +5,41 @@ import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; import {faCheckSquare, faExclamationTriangle} from '@fortawesome/free-solid-svg-icons'; import {faSquare} from '@fortawesome/free-regular-svg-icons'; +import {getComponentHeight} from './utils/HeightCalculator'; + +function ChildCheckboxContainer(props) { + const { + enumOptions, + id, + multiple, + required, + disabled, + autofocus, + onPaneClick, + onCheckboxClick, + selectedValues, + isSafe + } = props; + + return( + <Form.Group + style={{height: `${getComponentHeight(enumOptions.length)}px`}} + id={id} multiple={multiple} className='choice-block form-control' + required={required} disabled={disabled} autoFocus={autofocus}> + { + enumOptions.map(({value, label}, i) => { + return ( + <ChildCheckbox key={i} onPaneClick={onPaneClick} + onClick={onCheckboxClick} value={value} + disabled={disabled} label={label} checkboxState={selectedValues.includes(value)} + safe={isSafe(value)}/> + ); + } + )} + </Form.Group> + ); +} + function ChildCheckbox(props) { const { onPaneClick, @@ -32,4 +67,4 @@ function ChildCheckbox(props) { ); } -export default ChildCheckbox; +export default ChildCheckboxContainer;