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

UI: Fix master checkbox in AdvancedMultiSelect.js

This commit is contained in:
vakarisz 2022-07-01 16:57:05 +03:00
parent e28cb30366
commit 79afb9bc07
1 changed files with 34 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,7 +23,7 @@ function AdvancedMultiSelectHeader(props) {
<MasterCheckbox title={title} onClick={onCheckboxClick} checkboxState={checkboxState}/>
<Button className={'reset-safe-defaults'} type={'reset'} variant={'warning'}
hidden={hideReset} onClick={onResetClick}>
Reset to safe defaults
Reset to safe options
</Button>
</Card.Header>
);
@ -32,30 +32,25 @@ function AdvancedMultiSelectHeader(props) {
class AdvancedMultiSelect extends React.Component {
constructor(props) {
super(props);
this.defaultValues = props.schema.default;
this.infoPaneRefString = props.schema.items.$ref;
this.registry = props.registry;
this.enumOptions = props.options.enumOptions.sort(this.compareOptions);
this.value = JSON.parse(JSON.stringify(props.value)).map(v => v.name);
this.pluginNames = props.value.map(v => v.name);
this.state = {
masterCheckboxState: this.getMasterCheckboxState(this.value),
hideReset: this.getHideResetState(this.value),
masterCheckboxState: this.getMasterCheckboxState(this.pluginNames),
infoPaneParams: getDefaultPaneParams(
this.infoPaneRefString,
this.registry,
this.isUnsafeOptionSelected(this.value)
this.isUnsafeOptionSelected(this.pluginNames)
),
pluginDefinitions: getObjectFromRegistryByRef(this.infoPaneRefString, this.registry).pluginDefs,
value: JSON.parse(JSON.stringify(props.value)).map(v => v.name)
pluginDefinitions: getObjectFromRegistryByRef(this.infoPaneRefString,
this.registry).pluginDefs,
pluginNames: props.value.map(v => v.name)
};
}
onChange = (strValues) => {
console.log('Values');
console.log(this.props);
console.log(this.state);
console.log(strValues);
let newValues = [];
for (let j = 0; j < strValues.length; j++) {
let found = false;
@ -71,9 +66,8 @@ class AdvancedMultiSelect extends React.Component {
}
}
newValues = JSON.parse(JSON.stringify(newValues));
console.log(newValues);
this.props.onChange(newValues)
this.setState({value: newValues.map(v => v.name)});
this.setState({pluginNames: newValues.map(v => v.name)});
}
// Sort options alphabetically. "Unsafe" options float to the top so that they
@ -90,28 +84,25 @@ class AdvancedMultiSelect extends React.Component {
}
onMasterCheckboxClick = () => {
if (this.state.masterCheckboxState === MasterCheckboxState.ALL) {
let checkboxState = this.getMasterCheckboxState(this.state.pluginNames);
if (checkboxState === MasterCheckboxState.ALL) {
var newValues = [];
} else {
newValues = this.enumOptions.map(({value}) => value);
}
this.props.onChange(newValues);
this.setMasterCheckboxState(newValues);
this.setHideResetState(newValues);
this.setPaneInfoToDefault(this.isUnsafeOptionSelected(newValues));
this.onChange(newValues);
}
onChildCheckboxClick = (value) => {
let selectValues = this.getSelectValuesAfterClick(value);
this.onChange(selectValues);
this.setMasterCheckboxState(selectValues);
this.setHideResetState(selectValues);
}
getSelectValuesAfterClick(clickedValue) {
const valueArray = cloneDeep(this.state.value);
const valueArray = cloneDeep(this.state.pluginNames);
if (valueArray.includes(clickedValue)) {
return valueArray.filter(e => e !== clickedValue);
@ -123,8 +114,7 @@ class AdvancedMultiSelect extends React.Component {
setMasterCheckboxState(selectValues) {
let newState = this.getMasterCheckboxState(selectValues);
if (newState != this.state.masterCheckboxState) {
if (newState !== this.state.masterCheckboxState) {
this.setState({masterCheckboxState: newState});
}
}
@ -142,10 +132,9 @@ class AdvancedMultiSelect extends React.Component {
}
onResetClick = () => {
this.props.onChange(this.defaultValues);
this.onChange(this.defaultValues);
this.setHideResetState(this.defaultValues);
this.setMasterCheckboxState(this.defaultValues);
this.setPaneInfoToDefault(this.isUnsafeOptionSelected(this.defaultValues));
this.setPaneInfoToSafe(this.isUnsafeOptionSelected(this.defaultValues));
}
setHideResetState(selectValues) {
@ -180,7 +169,7 @@ class AdvancedMultiSelect extends React.Component {
);
}
setPaneInfoToDefault(isUnsafeOptionSelected) {
setPaneInfoToSafe(isUnsafeOptionSelected) {
this.setState(() => ({
infoPaneParams: getDefaultPaneParams(
this.props.schema.items.$ref,
@ -203,13 +192,16 @@ class AdvancedMultiSelect extends React.Component {
<div className={'advanced-multi-select'}>
<AdvancedMultiSelectHeader title={schema.title}
onCheckboxClick={this.onMasterCheckboxClick}
checkboxState={this.state.masterCheckboxState}
hideReset={this.state.hideReset} onResetClick={this.onResetClick}/>
checkboxState={this.getMasterCheckboxState(this.state.pluginNames)}
hideReset={this.getHideResetState(this.pluginNames)}
onResetClick={this.onResetClick}/>
<ChildCheckboxContainer id={id} multiple={multiple} required={required}
autoFocus={autofocus} isSafe={this.isSafe}
onPaneClick={this.setPaneInfo} onCheckboxClick={this.onChildCheckboxClick}
selectedValues={this.state.value} enumOptions={this.enumOptions}/>
onPaneClick={this.setPaneInfo}
onCheckboxClick={this.onChildCheckboxClick}
selectedValues={this.state.pluginNames}
enumOptions={this.enumOptions}/>
<InfoPane title={this.state.infoPaneParams.title}
body={this.state.infoPaneParams.content}
@ -218,10 +210,6 @@ class AdvancedMultiSelect extends React.Component {
</div>
);
}
componentDidUpdate(_prevProps) {
this.setMasterCheckboxState(this.value);
}
}
export default AdvancedMultiSelect;