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 { class AdvancedMultiSelect extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
let selectedPluginNames = this.props.value.map(v => v.name);
let allPluginNames = this.props.options.enumOptions.map(v => v.value); let allPluginNames = this.props.options.enumOptions.map(v => v.value);
this.state = { this.state = {
infoPaneParams: getDefaultPaneParams( infoPaneParams: getDefaultPaneParams(
this.props.schema.items, this.props.schema.items,
this.isUnsafeOptionSelected(selectedPluginNames) this.isUnsafeOptionSelected(this.getSelectedPluginNames())
), ),
allPluginNames: allPluginNames, allPluginNames: allPluginNames,
masterCheckboxState: this.getMasterCheckboxState(selectedPluginNames), masterCheckboxState: this.getMasterCheckboxState(this.getSelectedPluginNames()),
pluginDefinitions: this.props.schema.items.pluginDefs, pluginDefinitions: this.props.schema.items.pluginDefs
selectedPluginNames: selectedPluginNames
}; };
} }
getSelectedPluginNames = () => {
return this.props.value.map(v => v.name);
}
getOptionList = () => { getOptionList = () => {
return this.props.options.enumOptions.sort(this.compareOptions); return this.props.options.enumOptions.sort(this.compareOptions);
} }
@ -55,7 +56,6 @@ class AdvancedMultiSelect extends React.Component {
onChange = (strValues) => { onChange = (strValues) => {
let pluginArray = this.namesToPlugins(strValues, this.state.pluginDefinitions); let pluginArray = this.namesToPlugins(strValues, this.state.pluginDefinitions);
this.props.onChange(pluginArray) this.props.onChange(pluginArray)
this.setState({selectedPluginNames: pluginArray.map(v => v.name)});
} }
namesToPlugins = (names, allPlugins) => { namesToPlugins = (names, allPlugins) => {
@ -80,7 +80,7 @@ class AdvancedMultiSelect extends React.Component {
} }
onMasterCheckboxClick = () => { onMasterCheckboxClick = () => {
let checkboxState = this.getMasterCheckboxState(this.state.selectedPluginNames); let checkboxState = this.getMasterCheckboxState(this.getSelectedPluginNames());
if (checkboxState === MasterCheckboxState.ALL) { if (checkboxState === MasterCheckboxState.ALL) {
var newValues = []; var newValues = [];
} else { } else {
@ -96,7 +96,7 @@ class AdvancedMultiSelect extends React.Component {
} }
getSelectValuesAfterClick(clickedValue) { getSelectValuesAfterClick(clickedValue) {
const valueArray = cloneDeep(this.state.selectedPluginNames); const valueArray = cloneDeep(this.getSelectedPluginNames());
if (valueArray.includes(clickedValue)) { if (valueArray.includes(clickedValue)) {
return valueArray.filter(e => e !== clickedValue); return valueArray.filter(e => e !== clickedValue);
@ -158,10 +158,10 @@ class AdvancedMultiSelect extends React.Component {
setPaneInfoToSafe() { setPaneInfoToSafe() {
let safePluginNames = this.state.allPluginNames.filter(pluginName => this.isSafe(pluginName)); let safePluginNames = this.state.allPluginNames.filter(pluginName => this.isSafe(pluginName));
this.setState({selectedPluginNames: safePluginNames});
this.onChange(safePluginNames); this.onChange(safePluginNames);
} }
render() { render() {
const { const {
autofocus, autofocus,
@ -176,16 +176,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.selectedPluginNames)} this.getSelectedPluginNames())}
hideReset={this.getHideResetState( hideReset={this.getHideResetState(
this.state.selectedPluginNames)} this.getSelectedPluginNames())}
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.selectedPluginNames} selectedValues={this.getSelectedPluginNames()}
enumOptions={this.getOptionList()}/> enumOptions={this.getOptionList()}/>
<InfoPane title={this.state.infoPaneParams.title} <InfoPane title={this.state.infoPaneParams.title}