superset-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From maximebeauche...@apache.org
Subject [incubator-superset] branch master updated: [explore] show validation error on control panel header (#3453)
Date Tue, 12 Sep 2017 16:06:31 GMT
This is an automated email from the ASF dual-hosted git repository.

maximebeauchemin pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git


The following commit(s) were added to refs/heads/master by this push:
     new 3e9f797  [explore] show validation error on control panel header (#3453)
3e9f797 is described below

commit 3e9f797949728decb6fa817be3ec3722d0046fe7
Author: Maxime Beauchemin <maximebeauchemin@gmail.com>
AuthorDate: Tue Sep 12 09:06:29 2017 -0700

    [explore] show validation error on control panel header (#3453)
    
    * [explore] show validation error on control panel header
    
    * Linting
---
 .../components/InfoTooltipWithTrigger.jsx          |  6 ++-
 .../explore/components/ControlPanelSection.jsx     | 21 +++++---
 .../explore/components/ControlPanelsContainer.jsx  | 61 ++++++++++++----------
 3 files changed, 51 insertions(+), 37 deletions(-)

diff --git a/superset/assets/javascripts/components/InfoTooltipWithTrigger.jsx b/superset/assets/javascripts/components/InfoTooltipWithTrigger.jsx
index 709a216..3a097a8 100644
--- a/superset/assets/javascripts/components/InfoTooltipWithTrigger.jsx
+++ b/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 }}
       />
diff --git a/superset/assets/javascripts/explore/components/ControlPanelSection.jsx b/superset/assets/javascripts/explore/components/ControlPanelSection.jsx
index c3fa9dd..7992fa6 100644
--- a/superset/assets/javascripts/explore/components/ControlPanelSection.jsx
+++ b/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() {
diff --git a/superset/assets/javascripts/explore/components/ControlPanelsContainer.jsx b/superset/assets/javascripts/explore/components/ControlPanelsContainer.jsx
index d9e9d6c..dfa958c 100644
--- a/superset/assets/javascripts/explore/components/ControlPanelsContainer.jsx
+++ b/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>
     );

-- 
To stop receiving notification emails like this one, please contact
['"commits@superset.apache.org" <commits@superset.apache.org>'].

Mime
View raw message