Merge pull request #3758 from metabase/edit-settings-button

Add 'Edit Settings' button when chart requires user picking settings

frontend/src/metabase/query_builder/components/QueryVisualization.jsx

@@ -84,7 +84,7 @@ export default class QueryVisualization extends Component {
         return (
             <div className="relative flex flex-no-shrink mt3 mb1" style={{ minHeight: "2em" }}>
                 <span className="relative z4">
-                  { !isObjectDetail && <VisualizationSettings {...this.props}/> }
+                  { !isObjectDetail && <VisualizationSettings ref="settings" {...this.props} /> }
                 </span>
                 <div className="absolute flex layout-centered left right z3">
                     <RunButton
@@ -219,7 +219,7 @@ export default class QueryVisualization extends Component {
             if (error) {
                 viz = <VisualizationError error={error} card={card} duration={result.duration} />
             } else if (result.data) {
-                viz = <VisualizationResult lastRunDatasetQuery={this.state.lastRunDatasetQuery} {...this.props} />
+                viz = <VisualizationResult lastRunDatasetQuery={this.state.lastRunDatasetQuery} onOpenChartSettings={() => this.refs.settings.open()} {...this.props}/>
             }
         }
 

frontend/src/metabase/query_builder/components/VisualizationSettings.jsx

@@ -73,6 +73,10 @@ export default class VisualizationSettings extends React.Component {
         );
     }
 
+    open = () => {
+        this.refs.popover.open();
+    }
+
     render() {
         if (this.props.result && this.props.result.error === undefined) {
             return (
@@ -82,6 +86,7 @@ export default class VisualizationSettings extends React.Component {
                         className="Modal Modal--wide Modal--tall"
                         triggerElement={<span data-metabase-event="Query Builder;Chart Settings"><Icon name="gear"/></span>}
                         triggerClasses="text-brand-hover"
+                        ref="popover"
                     >
                         <ChartSettings
                             series={[{ card: this.props.card, data: this.props.result.data }]}

frontend/src/metabase/visualizations/components/LineAreaBarChart.jsx

@@ -35,7 +35,7 @@ export default class LineAreaBarChart extends Component {
         const dimensions = (settings["graph.dimensions"] || []).filter(name => name);
         const metrics = (settings["graph.metrics"] || []).filter(name => name);
         if (dimensions.length < 1 || metrics.length < 1) {
-            throw new ChartSettingsError("Please select columns for the X and Y axis in the chart settings.", "Data");
+            throw new ChartSettingsError("Please select columns for the X and Y axis in the visualization settings.", "Data");
         }
     }
 

frontend/src/metabase/visualizations/components/Visualization.jsx

@@ -14,6 +14,8 @@ import { getVisualizationTransformed } from "metabase/visualizations";
 import { getSettings } from "metabase/lib/visualization_settings";
 import { isSameSeries } from "metabase/visualizations/lib/utils";
 
+import { MinRowsError, ChartSettingsError } from "metabase/visualizations/lib/errors";
+
 import { assoc, getIn, setIn } from "icepick";
 import _ from "underscore";
 import cx from "classnames";
@@ -66,7 +68,9 @@ export default class Visualization extends Component {
         // used by TableInteractive
         setSortFn: PropTypes.func,
         cellIsClickableFn: PropTypes.func,
-        cellClickedFn: PropTypes.func
+        cellClickedFn: PropTypes.func,
+
+        onOpenChartSettings: PropTypes.func,
     };
 
     static defaultProps = {
@@ -137,11 +141,21 @@ export default class Visualization extends Component {
                         CardVisualization.checkRenderable(series[0].data.cols, series[0].data.rows, settings);
                     }
                 } catch (e) {
-                    // MinRowsError
-                    if (e.actualRows === 0) {
+                    error = e.message || "Could not display this chart with this data.";
+                    if (e instanceof ChartSettingsError && this.props.onOpenChartSettings) {
+                        error = (
+                            <div>
+                                <div>{error}</div>
+                                <div className="mt2">
+                                    <button className="Button Button--primary Button--small" onClick={this.props.onOpenChartSettings}>
+                                        Edit Settings
+                                    </button>
+                                </div>
+                            </div>
+                        );
+                    } else if (e instanceof MinRowsError) {
                         noResults = true;
                     }
-                    error = e.message || "Could not display this chart with this data.";
                 }
             }
         }