wip - the wip continues, long live the wip [ci skip]

frontend/src/metabase/questions/containers/CollectionPage.jsx

+import React, { Component, PropTypes } from "react";
+import { connect } from "react-redux";
+
+import HeaderWithBack from "metabase/components/HeaderWithBack";
+import Icon from "metabase/components/Icon";
+import Tooltip from "metabase/components/Tooltip";
+
+import NewEntityList from "./NewEntityList";
+import { selectSection } from "../questions";
+
+const mapStateToProps = (state, props) => ({})
+
+const mapDispatchToProps = ({
+    selectSection
+})
+
+const CollectionActions = ({ actions }) =>
+    <div>
+        {actions.map(({ action, icon, name }, index) =>
+            <Tooltip tooltip={name} key={index}>
+                <Icon
+                    className="cursor-pointer text-brand-hover ml3"
+                    name={icon}
+                    onClick={ () => action() }
+                />
+            </Tooltip>
+        )}
+    </div>
+
+@connect(mapStateToProps, mapDispatchToProps)
+class CollectionPage extends Component {
+    componentWillMount () {
+        this.props.selectSection('all');
+    }
+    render () {
+        return (
+            <div className="mx4 mt4">
+                <div className="flex align-center">
+                    <HeaderWithBack name="Collection" />
+                    <div className="ml-auto">
+                        <CollectionActions
+                            actions={[
+                                { name: 'Archive collection', icon: 'archive',  action: () => console.log('archive!') },
+                                { name: 'Edit collection', icon: 'pencil',  action: () => console.log('edit!!') },
+                                { name: 'Set permissions', icon: 'lock',  action: () => console.log('set perms!') },
+                                { name: 'Info', icon: 'info', action: () => console.log('info!') },
+                            ]}
+                        />
+                    </div>
+                </div>
+                <div className="mt4">
+                    <NewEntityList />
+                </div>
+            </div>
+        );
+    }
+}
+
+export default CollectionPage;

frontend/src/metabase/questions/containers/QuestionIndex.jsx

 import React, { Component, PropTypes } from "react";
 import { connect } from "react-redux";
 import { Link } from "react-router";
+import cx from "classnames";
 
 import Icon from "metabase/components/Icon";
 import Tooltip from "metabase/components/Tooltip";
@@ -21,15 +22,48 @@ const mapDispatchToProps = ({
     selectSection
 })
 
+const SEARCH_TRIGGER_KEYCODE = 191;
+const SEARCH_ESCAPE_KEYCODE = 27;
+
 class Search extends Component {
     constructor () {
         super();
+        this.state = { active: false }
+    }
+
+    componentDidMount () {
+        this.listenToSearchKeyDown();
+    }
+
+    componentWillUnMount () {
+        this.stopListenToSearchKeyDown();
+    }
+
+    handleSearchKeyDown (event) {
+        console.log('ey?', event);
+        if(event.keyCode === SEARCH_TRIGGER_KEYCODE) {
+            this.setState({ active: true });
+        } else if (event.keyKode === SEARCH_ESCAPE_KEYCODE) {
+            this.setState({ active: false });
+        }
+    }
+
+    listenToSearchKeyDown () {
+        window.addEventListener('keydown', this.handleSearchKeydown)
+    }
+
+    stopListenToSearchKeyDown() {
+        window.removeEventListener('keydown', this.handleSearchKeydown)
     }
 
     render () {
+        const { active } = this.state;
         return (
             <div
-                className="bordered border-dark flex align-center pr2"
+                className={cx(
+                    'bordered border-dark flex align-center pr2 transition-border',
+                    { 'border-brand' : active }
+                )}
                 style={{
                     borderRadius: 99,
                 }}
@@ -102,7 +136,7 @@ const Collection = ({ color, name, slug }) =>
             minWidth: 240,
             textDecoration: 'none',
         }}
-        to={`/questions/collections/${slug}`}i
+        to={`/questions/collections/1`}i
     >
         <div className="absolute top right mt2 mr2 hover-child">
             <CollectionActions />
@@ -130,7 +164,7 @@ const QuestionCollections = ({
 }) =>
     <ol className="flex">
         {
-            collections.map(collection => <li><Collection {...collection} /></li>)
+            collections.map((collection, index) => <li key={index}><Collection {...collection} /></li>)
         }
         <li><NewCollection /></li>
     </ol>

frontend/src/metabase/routes.jsx

@@ -19,11 +19,9 @@ import GoogleNoAccount from "metabase/auth/components/GoogleNoAccount.jsx";
 // main app containers
 import DashboardApp from "metabase/dashboard/containers/DashboardApp.jsx";
 import HomepageApp from "metabase/home/containers/HomepageApp.jsx";
-import EntityBrowser from "metabase/questions/containers/EntityBrowser.jsx";
-import Archive from "metabase/questions/containers/Archive.jsx";
 import QuestionIndex from "metabase/questions/containers/QuestionIndex.jsx";
-import EntityList from "metabase/questions/containers/EntityList.jsx";
-import EditLabels from "metabase/questions/containers/EditLabels.jsx";
+import Archive from "metabase/questions/containers/Archive.jsx";
+import CollectionPage from "metabase/questions/containers/CollectionPage.jsx";
 import PulseEditApp from "metabase/pulse/containers/PulseEditApp.jsx";
 import PulseListApp from "metabase/pulse/containers/PulseListApp.jsx";
 import QueryBuilder from "metabase/query_builder/containers/QueryBuilder.jsx";
@@ -136,7 +134,7 @@ export const getRoutes = (store) =>
                 <Route path="/questions" component={QuestionIndex} />
                 <Route path="/questions/archive" component={Archive} />
                 <Route path="/questions/permissions" component={QuestionPermissions} />
-                <Route path="/questions/collection/:collectionName" component={CollectionPage} />
+                <Route path="/questions/collections/:collectionName" component={CollectionPage} />
 
                 {/* REFERENCE */}
                 <Route path="/reference" component={ReferenceApp}>
@@ -218,12 +216,6 @@ export const getRoutes = (store) =>
     </Route>
 
 
-
-const CollectionPage = ({ params }) =>
-    <div>
-        { name }
-    </div>
-
 const QuestionPermissions = () =>
     <div>
         Question permissions

package.json

@@ -38,6 +38,7 @@
     "react-ansi-style": "^1.0.0",
     "react-dom": "^15.2.1",
     "react-draggable": "^1.1.3",
+    "react-motion": "^0.4.5",
     "react-redux": "^4.4.5",
     "react-resizable": "^1.0.1",
     "react-retina-image": "^2.0.0",

yarn.lock

@@ -4891,6 +4891,10 @@ pbkdf2-compat@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/pbkdf2-compat/-/pbkdf2-compat-2.0.1.tgz#b6e0c8fa99494d94e0511575802a59a5c142f288"
 
+performance-now@^0.2.0, performance-now@~0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
+
 pify@^2.0.0, pify@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -5516,6 +5520,12 @@ querystringify@0.0.x:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-0.0.4.tgz#0cf7f84f9463ff0ae51c4c4b142d95be37724d9c"
 
+raf@^3.1.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/raf/-/raf-3.3.0.tgz#93845eeffc773f8129039f677f80a36044eee2c3"
+  dependencies:
+    performance-now "~0.2.0"
+
 randomatic@^1.1.3:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.5.tgz#5e9ef5f2d573c67bd2b8124ae90b5156e457840b"
@@ -5632,6 +5642,13 @@ react-modal@^1.2.1:
     exenv "1.2.0"
     lodash.assign "^3.2.0"
 
+react-motion:
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/react-motion/-/react-motion-0.4.5.tgz#ecc42f692fec9b2de4c92f85e26375071f779b76"
+  dependencies:
+    performance-now "^0.2.0"
+    raf "^3.1.0"
+
 react-redux@^4.4.5:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-4.4.5.tgz#f509a2981be2252d10c629ef7c559347a4aec457"