Merge pull request #1804 from metabase/fix-qb-404-handling

show a simple 404 page on the QB if someone tries to load a card that doesn't exist

frontend/src/card/card.controllers.js

@@ -20,6 +20,7 @@ import DataGrid from "metabase/lib/data_grid";
 import Query from "metabase/lib/query";
 import { serializeCardForUrl, deserializeCardFromUrl, cleanCopyCard, urlForCardState } from "metabase/lib/card";
 import { loadTable } from "metabase/lib/table";
+import NotFound from "metabase/components/NotFound.jsx";
 
 import * as reducers from './reducers';
 
@@ -386,6 +387,11 @@ CardControllers.controller('CardDetail', [
             , document.getElementById('react_qb_tutorial'));
         }
 
+        function renderNotFound() {
+            tutorialModel.isShowingTutorial = isShowingTutorial;
+            React.render(<NotFound></NotFound>, document.getElementById('react_qb_viz'));
+        }
+
         var renderAll = _.debounce(function() {
             renderHeader();
             renderEditor();
@@ -775,9 +781,8 @@ CardControllers.controller('CardDetail', [
                 delete card.isDirty;
                 return setCard(card, { setDirty: isDirty, resetDirty: !isDirty, replaceState: true });
             } catch (error) {
-                if (error.status == 404) {
-                    // TODO() - we should redirect to the card builder with no query instead of /
-                    $location.path('/');
+                if (error.status === 404) {
+                    renderNotFound();
                 }
             }
         }

frontend/src/components/NotFound.jsx

+import React, { Component, PropTypes } from "react";
+
+
+export default class NotFound extends Component {
+    render() {
+        return (
+            <div className="layout-centered flex full">
+                <div className="p4 text-bold">
+                    <h1 className="text-brand text-light mb3">We're a little lost...</h1>
+                    <p className="h4 mb1">The page you asked for couldn't be found.</p>
+                    <p className="h4">You might've been tricked by a ninja, but in all likelihood, you were just given a bad link.</p>
+                    <p className="h4 my4">You can always:</p>
+                    <div className="flex align-center">
+                        <a className="Button Button--primary" href="/q">
+                            <div className="p1">Ask a new question.</div>
+                        </a>
+                        <span className="mx2">or</span>
+                        <a className="Button Button--withIcon" target="_blank" href="http://tv.giphy.com/kitten">
+                            <div className="p1 flex align-center relative">
+                                <span className="h2">😸</span>
+                                <span className="ml1">Take a kitten break.</span>
+                            </div>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
\ No newline at end of file