From 320364a7a2fdcbef076017ad7a33b57ea31557b4 Mon Sep 17 00:00:00 2001 From: Ilija Lazoroski Date: Wed, 21 Sep 2022 16:48:47 +0200 Subject: [PATCH 1/2] UI: Get derived state from props in AdvancedMultiSelect --- .../components/ui-components/AdvancedMultiSelect.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) 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..cb5ef1594 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,7 +32,6 @@ 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); @@ -162,6 +161,16 @@ class AdvancedMultiSelect extends React.Component { 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 { autofocus, From 56af6fd2c49c656ef0d303c6ebb272fdf4eabb7e Mon Sep 17 00:00:00 2001 From: vakarisz Date: Thu, 22 Sep 2022 12:16:11 +0300 Subject: [PATCH 2/2] UI: Don't use derived state for selected plugin names --- .../ui-components/AdvancedMultiSelect.js | 33 +++++++------------ 1 file changed, 12 insertions(+), 21 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 cb5ef1594..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,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 {