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

UI: Improve state contents in AdvancedMultiSelect.js

This commit is contained in:
vakarisz 2022-07-04 12:37:35 +03:00
parent 61eaa48988
commit ed46538137
1 changed files with 11 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -34,10 +34,11 @@ class AdvancedMultiSelect extends React.Component {
super(props); super(props);
this.state = { this.state = {
allPluginNames: this.props.value.map(v => v.name),
masterCheckboxState: this.getMasterCheckboxState(this.props.value.map(v => v.name)), masterCheckboxState: this.getMasterCheckboxState(this.props.value.map(v => v.name)),
pluginDefinitions: getObjectFromRegistryByRef(this.props.schema.items.$ref, pluginDefinitions: getObjectFromRegistryByRef(this.props.schema.items.$ref,
this.props.registry).pluginDefs, this.props.registry).pluginDefs,
pluginNames: this.props.value.map(v => v.name) selectedPluginNames: this.props.value.map(v => v.name)
}; };
} }
@ -62,7 +63,7 @@ class AdvancedMultiSelect extends React.Component {
} }
newValues = JSON.parse(JSON.stringify(newValues)); newValues = JSON.parse(JSON.stringify(newValues));
this.props.onChange(newValues) this.props.onChange(newValues)
this.setState({pluginNames: newValues.map(v => v.name)}); this.setState({selectedPluginNames: newValues.map(v => v.name)});
} }
// Sort options alphabetically. "Unsafe" options float to the top so that they // Sort options alphabetically. "Unsafe" options float to the top so that they
@ -79,7 +80,7 @@ class AdvancedMultiSelect extends React.Component {
} }
onMasterCheckboxClick = () => { onMasterCheckboxClick = () => {
let checkboxState = this.getMasterCheckboxState(this.state.pluginNames); let checkboxState = this.getMasterCheckboxState(this.state.selectedPluginNames);
if (checkboxState === MasterCheckboxState.ALL) { if (checkboxState === MasterCheckboxState.ALL) {
var newValues = []; var newValues = [];
} else { } else {
@ -97,7 +98,7 @@ class AdvancedMultiSelect extends React.Component {
} }
getSelectValuesAfterClick(clickedValue) { getSelectValuesAfterClick(clickedValue) {
const valueArray = cloneDeep(this.state.pluginNames); const valueArray = cloneDeep(this.state.selectedPluginNames);
if (valueArray.includes(clickedValue)) { if (valueArray.includes(clickedValue)) {
return valueArray.filter(e => e !== clickedValue); return valueArray.filter(e => e !== clickedValue);
@ -168,13 +169,8 @@ class AdvancedMultiSelect extends React.Component {
} }
setPaneInfoToSafe(isUnsafeOptionSelected) { setPaneInfoToSafe(isUnsafeOptionSelected) {
this.setState(() => ({ let safePluginNames = this.state.allPluginNames.filter(pluginName => this.isSafe(pluginName));
infoPaneParams: getDefaultPaneParams( this.setState({selectedPluginNames: safePluginNames});
this.props.schema.items.$ref,
this.props.registry,
isUnsafeOptionSelected
)
}));
} }
render() { render() {
@ -189,7 +185,7 @@ class AdvancedMultiSelect extends React.Component {
let paneParams = getDefaultPaneParams( let paneParams = getDefaultPaneParams(
this.props.schema.items.$ref, this.props.schema.items.$ref,
this.props.registry, this.props.registry,
this.isUnsafeOptionSelected(this.state.pluginNames) this.isUnsafeOptionSelected(this.state.selectedPluginNames)
); );
return ( return (
@ -197,16 +193,16 @@ class AdvancedMultiSelect extends React.Component {
<AdvancedMultiSelectHeader title={schema.title} <AdvancedMultiSelectHeader title={schema.title}
onCheckboxClick={this.onMasterCheckboxClick} onCheckboxClick={this.onMasterCheckboxClick}
checkboxState={this.getMasterCheckboxState( checkboxState={this.getMasterCheckboxState(
this.state.pluginNames)} this.state.selectedPluginNames)}
hideReset={this.getHideResetState( hideReset={this.getHideResetState(
this.props.value.map(v => v.name))} this.state.allPluginNames)}
onResetClick={this.onResetClick}/> onResetClick={this.onResetClick}/>
<ChildCheckboxContainer id={id} multiple={multiple} required={required} <ChildCheckboxContainer id={id} multiple={multiple} required={required}
autoFocus={autofocus} isSafe={this.isSafe} autoFocus={autofocus} isSafe={this.isSafe}
onPaneClick={this.setPaneInfo} onPaneClick={this.setPaneInfo}
onCheckboxClick={this.onChildCheckboxClick} onCheckboxClick={this.onChildCheckboxClick}
selectedValues={this.state.pluginNames} selectedValues={this.state.selectedPluginNames}
enumOptions={this.getOptionList()}/> enumOptions={this.getOptionList()}/>
<InfoPane title={paneParams.title} <InfoPane title={paneParams.title}