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

* [explore] show validation error on control panel header

* Linting

superset/assets/javascripts/components/InfoTooltipWithTrigger.jsx

@@ -10,6 +10,7 @@ const propTypes = {
   className: PropTypes.string,
   onClick: PropTypes.func,
   placement: PropTypes.string,
+  bsStyle: PropTypes.string,
 };
 const defaultProps = {
   icon: 'info-circle',
@@ -18,14 +19,15 @@ const defaultProps = {
 };
 
 export default function InfoTooltipWithTrigger({
-    label, tooltip, icon, className, onClick, placement }) {
+    label, tooltip, icon, className, onClick, placement, bsStyle }) {
+  const iconClass = `fa fa-${icon} ${className} ${bsStyle ? 'text-' + bsStyle : ''}`;
   return (
     <OverlayTrigger
       placement={placement}
       overlay={<Tooltip id={`${slugify(label)}-tooltip`}>{tooltip}</Tooltip>}
     >
       <i
-        className={`fa fa-${icon} ${className}`}
+        className={iconClass}
         onClick={onClick}
         style={{ cursor: onClick ? 'pointer' : null }}
       />

superset/assets/javascripts/explore/components/ControlPanelSection.jsx

@@ -8,12 +8,14 @@ const propTypes = {
   description: PropTypes.string,
   children: PropTypes.node.isRequired,
   startExpanded: PropTypes.bool,
+  hasErrors: PropTypes.bool,
 };
 
 const defaultProps = {
   label: null,
   description: null,
   startExpanded: false,
+  hasErrors: false,
 };
 
 export default class ControlPanelSection extends React.Component {
@@ -25,10 +27,9 @@ export default class ControlPanelSection extends React.Component {
     this.setState({ expanded: !this.state.expanded });
   }
   renderHeader() {
-    const { label, description } = this.props;
-    let header;
-    if (label) {
-      header = (
+    const { label, description, hasErrors } = this.props;
+    return (
+      label &&
         <div>
           <i
             className={`text-primary expander fa fa-caret-${this.state.expanded ? 'down' : 'right'}`}
@@ -38,10 +39,14 @@ export default class ControlPanelSection extends React.Component {
           <span onClick={this.toggleExpand.bind(this)}>{label}</span>
           {' '}
           {description && <InfoTooltipWithTrigger label={label} tooltip={description} />}
-        </div>
-      );
-    }
-    return header;
+          {hasErrors &&
+            <InfoTooltipWithTrigger
+              label="validation-errors"
+              bsStyle="danger"
+              tooltip="This section contains validation errors"
+            />
+          }
+        </div>);
   }
 
   render() {

superset/assets/javascripts/explore/components/ControlPanelsContainer.jsx

@@ -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>
     );