From 79afb9bc07ef0c96d904d46fa1e074eb39db7722 Mon Sep 17 00:00:00 2001 From: vakarisz Date: Fri, 1 Jul 2022 16:57:05 +0300 Subject: [PATCH] UI: Fix master checkbox in AdvancedMultiSelect.js --- .../ui-components/AdvancedMultiSelect.js | 80 ++++++++----------- 1 file changed, 34 insertions(+), 46 deletions(-) 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 bcafbc035..a00f7c9d9 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 @@ -22,8 +22,8 @@ function AdvancedMultiSelectHeader(props) { ); @@ -32,48 +32,42 @@ 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++){ + for (let j = 0; j < strValues.length; j++) { let found = false; - for (let i = 0; i < this.props.value.length; i++){ - if(strValues[j] === this.props.value[i]['name']){ + for (let i = 0; i < this.props.value.length; i++) { + if (strValues[j] === this.props.value[i]['name']) { newValues.push(JSON.parse(JSON.stringify(this.props.value[i]))) found = true; break; } } - if(! found){ + if (!found) { newValues.push(this.state.pluginDefinitions[strValues[j]]); } } 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) { @@ -166,7 +155,7 @@ class AdvancedMultiSelect extends React.Component { return getFullDefinitionByKey(this.infoPaneRefString, this.registry, itemKey).safe; } - setPaneInfo = (itemKey) => { + setPaneInfo = (itemKey) => { let definitionObj = getFullDefinitionByKey(this.infoPaneRefString, this.registry, itemKey); this.setState( { @@ -180,7 +169,7 @@ class AdvancedMultiSelect extends React.Component { ); } - setPaneInfoToDefault(isUnsafeOptionSelected) { + setPaneInfoToSafe(isUnsafeOptionSelected) { this.setState(() => ({ infoPaneParams: getDefaultPaneParams( this.props.schema.items.$ref, @@ -202,26 +191,25 @@ class AdvancedMultiSelect extends React.Component { return (
+ onCheckboxClick={this.onMasterCheckboxClick} + checkboxState={this.getMasterCheckboxState(this.state.pluginNames)} + hideReset={this.getHideResetState(this.pluginNames)} + onResetClick={this.onResetClick}/> + autoFocus={autofocus} isSafe={this.isSafe} + onPaneClick={this.setPaneInfo} + onCheckboxClick={this.onChildCheckboxClick} + selectedValues={this.state.pluginNames} + enumOptions={this.enumOptions}/> + body={this.state.infoPaneParams.content} + link={this.state.infoPaneParams.link} + warningType={this.state.infoPaneParams.warningType}/>
); } - - componentDidUpdate(_prevProps) { - this.setMasterCheckboxState(this.value); - } } export default AdvancedMultiSelect;