[explore] show validation error on control panel header (#3453)

* [explore] show validation error on control panel header

* Linting
This commit is contained in:
Maxime Beauchemin
2017-09-12 09:06:29 -07:00
committed by GitHub
parent f3de758363
commit 3e9f797949
3 changed files with 51 additions and 37 deletions

View File

@@ -50,6 +50,7 @@ class ControlPanelsContainer extends React.Component {
this.props.actions.removeControlPanelAlert();
}
render() {
const ctrls = this.props.controls;
return (
<div className="scrollbar-container">
<div className="scrollbar-content">
@@ -63,33 +64,39 @@ class ControlPanelsContainer extends React.Component {
/>
</Alert>
}
{this.sectionsToRender().map(section => (
<ControlPanelSection
key={section.label}
label={section.label}
startExpanded={section.expanded}
description={section.description}
>
{section.controlSetRows.map((controlSets, i) => (
<ControlRow
key={`controlsetrow-${i}`}
className="control-row"
controls={controlSets.map(controlName => (
controlName &&
this.props.controls[controlName] &&
<Control
name={controlName}
key={`control-${controlName}`}
value={this.props.form_data[controlName]}
validationErrors={this.props.controls[controlName].validationErrors}
actions={this.props.actions}
{...this.getControlData(controlName)}
/>
))}
/>
))}
</ControlPanelSection>
))}
{this.sectionsToRender().map((section) => {
const hasErrors = section.controlSetRows.some(rows => rows.some((s) => {
const errors = ctrls[s].validationErrors;
return errors && (errors.length > 0);
}));
return (
<ControlPanelSection
key={section.label}
label={section.label}
startExpanded={section.expanded}
hasErrors={hasErrors}
description={section.description}
>
{section.controlSetRows.map((controlSets, i) => (
<ControlRow
key={`controlsetrow-${i}`}
className="control-row"
controls={controlSets.map(controlName => (
controlName &&
ctrls[controlName] &&
<Control
name={controlName}
key={`control-${controlName}`}
value={this.props.form_data[controlName]}
validationErrors={ctrls[controlName].validationErrors}
actions={this.props.actions}
{...this.getControlData(controlName)}
/>
))}
/>
))}
</ControlPanelSection>);
})}
</div>
</div>
);