Change Triggerable to inject onClose automagically

frontend/src/metabase/components/Triggerable.jsx

@@ -21,6 +21,7 @@ export default ComposedComponent => class extends Component {
 
         this._startCheckObscured = this._startCheckObscured.bind(this);
         this._stopCheckObscured = this._stopCheckObscured.bind(this);
+        this.onClose = this.onClose.bind(this);
     }
 
     static defaultProps = {
@@ -91,18 +92,27 @@ export default ComposedComponent => class extends Component {
     render() {
         const { triggerClasses, triggerClassesOpen } = this.props;
         const { isOpen } = this.state;
+
         let { triggerElement } = this.props;
         if (triggerElement && triggerElement.type === Tooltip) {
             // Disables tooltip when open:
             triggerElement = React.cloneElement(triggerElement, { isEnabled: triggerElement.props.isEnabled && !isOpen });
         }
+
+        // if we have a single child which doesn't have an onClose prop go ahead and inject it directly
+        let { children } = this.props;
+        if (React.Children.count(children) === 1 && React.Children.only(children).props.onClose === undefined) {
+            children = React.cloneElement(children, { onClose: this.onClose });
+        }
+
         return (
             <a ref="trigger" onClick={() => this.toggle()} className={cx("no-decoration", triggerClasses, isOpen ? triggerClassesOpen : null)}>
                 {triggerElement}
                 <ComposedComponent
                     {...this.props}
+                    children={children}
                     isOpen={isOpen}
-                    onClose={this.onClose.bind(this)}
+                    onClose={this.onClose}
                     target={() => this.target()}
                 />
             </a>

frontend/src/metabase/query_builder/VisualizationSettings.jsx

@@ -91,7 +91,6 @@ export default class VisualizationSettings extends React.Component {
                 <div className="VisualizationSettings flex align-center">
                     {this.renderChartTypePicker()}
                     <ModalWithTrigger
-                        ref="chartSettings"
                         className="Modal Modal--wide Modal--tall"
                         triggerElement={<Icon name="gear" />}
                     >
@@ -99,8 +98,6 @@ export default class VisualizationSettings extends React.Component {
                             card={this.props.card}
                             result={this.props.result}
                             onChange={this.props.onUpdateVisualizationSettings}
-                            onClose={() => this.refs.chartSettings.close()}
-
                         />
                     </ModalWithTrigger>
                     {this.renderVisualizationSettings()}