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 bd6933ac2..87d836e6d 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 @@ -32,22 +32,23 @@ function AdvancedMultiSelectHeader(props) { class AdvancedMultiSelect extends React.Component { constructor(props) { super(props); - - let selectedPluginNames = this.props.value.map(v => v.name); let allPluginNames = this.props.options.enumOptions.map(v => v.value); this.state = { infoPaneParams: getDefaultPaneParams( this.props.schema.items, - this.isUnsafeOptionSelected(selectedPluginNames) + this.isUnsafeOptionSelected(this.getSelectedPluginNames()) ), allPluginNames: allPluginNames, - masterCheckboxState: this.getMasterCheckboxState(selectedPluginNames), - pluginDefinitions: this.props.schema.items.pluginDefs, - selectedPluginNames: selectedPluginNames + masterCheckboxState: this.getMasterCheckboxState(this.getSelectedPluginNames()), + pluginDefinitions: this.props.schema.items.pluginDefs }; } + getSelectedPluginNames = () => { + return this.props.value.map(v => v.name); + } + getOptionList = () => { return this.props.options.enumOptions.sort(this.compareOptions); } @@ -55,7 +56,6 @@ class AdvancedMultiSelect extends React.Component { onChange = (strValues) => { let pluginArray = this.namesToPlugins(strValues, this.state.pluginDefinitions); this.props.onChange(pluginArray) - this.setState({selectedPluginNames: pluginArray.map(v => v.name)}); } namesToPlugins = (names, allPlugins) => { @@ -80,7 +80,7 @@ class AdvancedMultiSelect extends React.Component { } onMasterCheckboxClick = () => { - let checkboxState = this.getMasterCheckboxState(this.state.selectedPluginNames); + let checkboxState = this.getMasterCheckboxState(this.getSelectedPluginNames()); if (checkboxState === MasterCheckboxState.ALL) { var newValues = []; } else { @@ -96,7 +96,7 @@ class AdvancedMultiSelect extends React.Component { } getSelectValuesAfterClick(clickedValue) { - const valueArray = cloneDeep(this.state.selectedPluginNames); + const valueArray = cloneDeep(this.getSelectedPluginNames()); if (valueArray.includes(clickedValue)) { return valueArray.filter(e => e !== clickedValue); @@ -158,10 +158,10 @@ class AdvancedMultiSelect extends React.Component { setPaneInfoToSafe() { let safePluginNames = this.state.allPluginNames.filter(pluginName => this.isSafe(pluginName)); - this.setState({selectedPluginNames: safePluginNames}); this.onChange(safePluginNames); } + render() { const { autofocus, @@ -176,16 +176,16 @@ class AdvancedMultiSelect extends React.Component {