404 page (#135)

* 404 page

* add function signatures

frontend/src/components/Router.tsx

@@ -26,6 +26,7 @@ import ExperimentDetails from '../pages/ExperimentDetails';
 import ExperimentsAndRuns, { ExperimentsAndRunsTab } from '../pages/ExperimentsAndRuns';
 import NewExperiment from '../pages/NewExperiment';
 import NewRun from '../pages/NewRun';
+import Page404 from '../pages/404';
 import PipelineDetails from '../pages/PipelineDetails';
 import PipelineList from '../pages/PipelineList';
 import RecurringRunConfig from '../pages/RecurringRunDetails';
@@ -137,6 +138,9 @@ class Router extends React.Component<{}, RouteComponentState> {
                     <Component {...props} {...childProps} {...otherProps} />
                   )} />;
                 })}
+
+                {/* 404 */}
+                {<Route render={({ ...props }) => <Page404 {...props} {...childProps} />} />}
               </Switch>
 
               <Snackbar

frontend/src/components/Toolbar.test.tsx

@@ -57,7 +57,7 @@ const breadcrumbs = [
 const history = createBrowserHistory({});
 
 describe('Toolbar', () => {
-  it('renders without breadcrumbs or actions', () => {
+  it('renders nothing when there are no breadcrumbs or actions', () => {
     const tree = shallow(<Toolbar breadcrumbs={[]} actions={[]} history={history} />);
     expect(tree).toMatchSnapshot();
   });

frontend/src/components/Toolbar.tsx

@@ -106,11 +106,15 @@ export interface ToolbarProps {
 
 class Toolbar extends React.Component<ToolbarProps> {
 
-  public render(): JSX.Element {
+  public render(): JSX.Element | null {
     const currentPage = this.props.breadcrumbs.length ?
       this.props.breadcrumbs[this.props.breadcrumbs.length - 1].displayName : '';
     const breadcrumbs = this.props.breadcrumbs.slice(0, this.props.breadcrumbs.length - 1);
 
+    if (!this.props.actions.length && !this.props.breadcrumbs.length) {
+      return null;
+    }
+
     return (
       <div className={
         classes(css.root, (this.props.topLevelToolbar !== false) && css.topLevelToolbar)}>

frontend/src/components/__snapshots__/Router.test.tsx.snap

@@ -83,6 +83,9 @@ exports[`Router initial render 1`] = `
             path="/compare"
             render={[Function]}
           />
+          <Route
+            render={[Function]}
+          />
         </Switch>
         <WithStyles(Snackbar)
           autoHideDuration={5000}

frontend/src/components/__snapshots__/Toolbar.test.tsx.snap

@@ -1,5 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Toolbar renders nothing when there are no breadcrumbs or actions 1`] = `""`;
+
 exports[`Toolbar renders with two breadcrumbs and two actions 1`] = `
 <div
   className="root topLevelToolbar"
@@ -300,32 +302,3 @@ exports[`Toolbar renders without breadcrumbs and two actions 1`] = `
   </div>
 </div>
 `;
-
-exports[`Toolbar renders without breadcrumbs or actions 1`] = `
-<div
-  className="root topLevelToolbar"
->
-  <div
-    style={
-      Object {
-        "minWidth": 100,
-      }
-    }
-  >
-    <div
-      className="breadcrumbs flex"
-    />
-    <div
-      className="flex"
-    >
-      <span
-        className="pageName ellipsis"
-        title=""
-      />
-    </div>
-  </div>
-  <div
-    className="actions"
-  />
-</div>
-`;

frontend/src/pages/404.tsx

@@ -0,0 +1,38 @@
+/*
+ * Copyright 2018 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from 'react';
+import { Page } from './Page';
+import { ToolbarProps } from '../components/Toolbar';
+
+export default class Page404 extends Page<{}, {}> {
+  public getInitialToolbarState(): ToolbarProps {
+    return { actions: [], breadcrumbs: [] };
+  }
+
+  public async refresh(): Promise<void> {
+    return;
+  }
+
+  public render(): JSX.Element {
+    return (
+      <div style={{ margin: '100px auto', textAlign: 'center' }}>
+        <div style={{ color: '#aaa', fontSize: 50, fontWeight: 'bold' }}>404</div>
+        <div style={{ fontSize: 16 }}>Page Not Found: {this.props.location.pathname}</div>
+      </div>
+    );
+  }
+}