Merge pull request #2328 from guardicore/2290-import-config-bug

UI: Get derived state from props in AdvancedMultiSelect
This commit is contained in:
Mike Salvatore 2022-09-22 08:03:28 -04:00 committed by GitHub
commit 444bf99e41
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 13 deletions

View File

@ -32,22 +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);
}
@ -55,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) => {
@ -80,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 {
@ -96,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);
@ -158,10 +158,10 @@ class AdvancedMultiSelect extends React.Component {
setPaneInfoToSafe() {
let safePluginNames = this.state.allPluginNames.filter(pluginName => this.isSafe(pluginName));
this.setState({selectedPluginNames: safePluginNames});
this.onChange(safePluginNames);
}
render() {
const {
autofocus,
@ -176,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}