Let user create a new dashboard when adding a question to a dashboard (#3598)

* Let user create a new dashboard when adding a question

* Styling change for adding a question to a dashboard [skip ci]

Add missing icon import

* Align add new dashboard button

* Use link class instead of text-brand-hover

* Properly align "add to dashboard" element

frontend/src/metabase/components/AddToDashSelectDashModal.jsx

 import React, { Component, PropTypes } from "react";
 
 import CreateDashboardModal from 'metabase/components/CreateDashboardModal.jsx';
+import Icon from 'metabase/components/Icon.jsx';
 import ModalContent from "metabase/components/ModalContent.jsx";
 import SortableItemList from 'metabase/components/SortableItemList.jsx';
 
@@ -16,7 +17,8 @@ export default class AddToDashSelectDashModal extends Component {
         this.loadDashboardList();
 
         this.state = {
-            dashboards: null
+            dashboards: null,
+            shouldCreateDashboard: false
         };
     }
 
@@ -49,7 +51,7 @@ export default class AddToDashSelectDashModal extends Component {
     render() {
         if (!this.state.dashboards) {
             return null;
-        } else if (this.state.dashboards.length === 0) {
+        } else if (this.state.dashboards.length === 0 || this.state.shouldCreateDashboard === true) {
             return <CreateDashboardModal createDashboardFn={this.createDashboard} closeFn={this.props.closeFn} />
         } else {
             return (
@@ -58,10 +60,24 @@ export default class AddToDashSelectDashModal extends Component {
                     title="Add Question to Dashboard"
                     closeFn={this.props.closeFn}
                 >
+                <div className="flex flex-column">
+                    <div
+                        className="link flex-align-right px4 cursor-pointer"
+                        onClick={() => this.setState({ shouldCreateDashboard: true })}
+                    >
+                        <div
+                            className="flex align-center absolute"
+                            style={ { right: 40 } }
+                        >
+                            <Icon name="add" size={16} />
+                            <h3 className="ml1">Add to new dashboard</h3>
+                        </div>
+                    </div>
                     <SortableItemList
                         items={this.state.dashboards}
                         onClickItemFn={this.addToDashboard}
                     />
+                </div>
                 </ModalContent>
             );
         }