p15693087
/
monkey
forked from p15670423/monkey
1
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity

UI: Don't use derived state for selected plugin names

This commit is contained in:
vakarisz 2022-09-22 12:16:11 +03:00
parent 320364a7a2
commit 56af6fd2c4
1 changed files with 12 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
monkey/monkey_island/cc/ui/src/components/ui-components/AdvancedMultiSelect.js
View File

@ -32,21 +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);
}
@ -54,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) => {
@ -79,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 {
@ -95,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);
@ -157,19 +158,9 @@ class AdvancedMultiSelect extends React.Component {
setPaneInfoToSafe() {
let safePluginNames = this.state.allPluginNames.filter(pluginName => this.isSafe(pluginName));
this.setState({selectedPluginNames: safePluginNames});
this.onChange(safePluginNames);
}
static getDerivedStateFromProps(props, current_state) {
let propsPluginNames = props.value.map(v => v.name);
if (current_state.selectedPluginNames !== propsPluginNames) {
return {
selectedPluginNames: propsPluginNames
}
}
return null
}
render() {
const {
@ -185,16 +176,16 @@ class AdvancedMultiSelect extends React.Component {
<AdvancedMultiSelectHeader title={schema.title}
onCheckboxClick={this.onMasterCheckboxClick}
checkboxState={this.getMasterCheckboxState(
this.state.selectedPluginNames)}
this.getSelectedPluginNames())}
hideReset={this.getHideResetState(
this.state.selectedPluginNames)}
this.getSelectedPluginNames())}
onResetClick={this.onResetClick}/>
<ChildCheckboxContainer id={id} multiple={multiple} required={required}
autoFocus={autofocus} isSafe={this.isSafe}
onPaneClick={this.setPaneInfo}
onCheckboxClick={this.onChildCheckboxClick}
selectedValues={this.state.selectedPluginNames}
selectedValues={this.getSelectedPluginNames()}
enumOptions={this.getOptionList()}/>
<InfoPane title={this.state.infoPaneParams.title}