init new question flow

frontend/src/metabase/new_question/containers/Metrics.jsx

+import React, { Component } from "react";
+
+class Metrics extends Component {
+    render() {
+        return <div>Metrics</div>;
+    }
+}
+
+export default Metrics;

frontend/src/metabase/new_question/containers/Segments.jsx

+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { Link } from "react-router";
+
+import { serializeCardForUrl } from "metabase/lib/card";
+
+import { fetchSegments } from "metabase/redux/metadata";
+import { getSegments } from "metabase/selectors/metadata";
+
+const mapStateToProps = state => ({
+    segments: Object.values(getSegments(state))
+});
+
+const mapDispatchToProps = {
+    fetchSegments
+};
+
+@connect(mapStateToProps, mapDispatchToProps)
+class Segments extends Component {
+    componentWillMount() {
+        this.props.fetchSegments();
+    }
+    render() {
+        const { segments } = this.props;
+        return (
+            <div>
+                <div>
+                    <Link to="question/new">
+                        Back
+                    </Link>
+                    <h2>Which segment?</h2>
+                </div>
+                <ol>
+                    {segments.map(segment => (
+                        <li key={segment.id}>
+                            <Link to={serializeCardForUrl(segment.definition)}>
+                                {segment.name}
+                            </Link>
+                        </li>
+                    ))}
+                </ol>
+            </div>
+        );
+    }
+}
+
+export default Segments;

frontend/src/metabase/new_question/containers/Start.jsx

+import React, { Component } from "react";
+import { Link } from "react-router";
+import { connect } from "react-redux";
+
+import { fetchSegments, fetchMetrics } from "metabase/redux/metadata";
+import { getSegments, getMetrics } from "metabase/selectors/metadata";
+
+const mapStateToProps = state => ({
+    metrics: getMetrics(state),
+    segments: getSegments(state)
+});
+
+const mapDispatchToProps = {
+    fetchMetrics,
+    fetchSegments
+};
+
+@connect(mapStateToProps, mapDispatchToProps)
+class Start extends Component {
+    componentWillMount() {
+        this.props.fetchMetrics();
+        this.props.fetchSegments();
+    }
+    render() {
+        const { metrics, segments } = this.props;
+        return (
+            <div className="wrapper">
+                Start
+                <div className="Grid Grid--1of2 Grid--gutters">
+                    {metrics &&
+                        <div className="Grid-cell">
+                            <Link to="/question/new/metrics">
+                                <div className="bordered rounded shadowed p4">
+                                    <h2>Metrics</h2>
+                                </div>
+                            </Link>
+                        </div>}
+                    {segments &&
+                        <div className="Grid-cell">
+                            <Link to="/question/new/segments">
+                                <div className="bordered rounded shadowed p4">
+                                    <h2>Segments</h2>
+                                </div>
+                            </Link>
+                        </div>}
+                    <div className="Grid-cell">
+                        <Link to="/question">
+                            <div className="bordered rounded shadowed p4">
+                                <h2>Start fresh</h2>
+                            </div>
+                        </Link>
+                    </div>
+                    <div className="Grid-cell">
+                        <Link to="/question">
+                            <div className="bordered rounded shadowed p4">
+                                <h2>Start with SQL</h2>
+                            </div>
+                        </Link>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default Start;

frontend/src/metabase/routes.jsx

@@ -41,6 +41,11 @@ import QueryBuilder from "metabase/query_builder/containers/QueryBuilder.jsx";
 import SetupApp from "metabase/setup/containers/SetupApp.jsx";
 import UserSettingsApp from "metabase/user/containers/UserSettingsApp.jsx";
 
+// new question
+import NewQuestionStart from "metabase/new_question/containers/Start";
+import NewQuestionMetrics from "metabase/new_question/containers/Metrics";
+import NewQuestionSegments from "metabase/new_question/containers/Segments";
+
 // admin containers
 import DatabaseListApp from "metabase/admin/databases/containers/DatabaseListApp.jsx";
 import DatabaseEditApp from "metabase/admin/databases/containers/DatabaseEditApp.jsx";
@@ -193,7 +198,15 @@ export const getRoutes = (store) =>
                 <Route path="/dashboard/:dashboardId" title="Dashboard" component={DashboardApp} />
 
                 {/* QUERY BUILDER */}
-                <Route path="/question" component={QueryBuilder} />
+                <Route path="/question">
+                    <IndexRoute component={QueryBuilder} />
+                    { /* NEW QUESTION FLOW */ }
+                    <Route path="new">
+                        <IndexRoute component={NewQuestionStart} />
+                        <Route path="metrics" component={NewQuestionMetrics} />
+                        <Route path="segments" component={NewQuestionSegments} />
+                    </Route>
+                </Route>
                 <Route path="/question/:cardId" component={QueryBuilder} />
 
                 {/* QUESTIONS */}