Implement breadcrumbs for CollectionLanding

ShobanaReddy · Jun 13, 2018 · 862c990 · 862c990
1 parent 93efae6
commit 862c990
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 33 deletions.
diff --git a/frontend/src/metabase/components/Breadcrumbs.jsx b/frontend/src/metabase/components/Breadcrumbs.jsx
@@ -9,6 +9,8 @@ import Ellipsified from "metabase/components/Ellipsified.jsx";
 
 import cx from "classnames";
 
+// TODO: merge with BrowserCrumbs
+
 export default class Breadcrumbs extends Component {
   static propTypes = {
     className: PropTypes.string,

diff --git a/frontend/src/metabase/components/BrowserCrumbs.jsx b/frontend/src/metabase/components/BrowserCrumbs.jsx
@@ -4,6 +4,8 @@ import Icon from "metabase/components/Icon";
 import Link from "metabase/components/Link";
 import Subhead from "metabase/components/Subhead";
 
+// TODO: merge with Breadcrumbs
+
 const BrowseHeader = ({ children }) => (
   <Box my={3}>
     <Subhead>{children}</Subhead>

diff --git a/frontend/src/metabase/components/CollectionLanding.jsx b/frontend/src/metabase/components/CollectionLanding.jsx
@@ -22,6 +22,7 @@ import EntityMenu from "metabase/components/EntityMenu";
 import Subhead from "metabase/components/Subhead";
 import Ellipsified from "metabase/components/Ellipsified";
 import VirtualizedList from "metabase/components/VirtualizedList";
+import BrowserCrumbs from "metabase/components/BrowserCrumbs";
 
 import CollectionLoader from "metabase/containers/CollectionLoader";
 import CollectionMoveModal from "metabase/containers/CollectionMoveModal";
@@ -368,45 +369,51 @@ const SelectionControls = ({
   );
 
 // TODO - this should be a selector
-const mapStateToProps = (state, props) => ({
-  currentCollection:
-    Collections.selectors.getObject(state, {
-      entityId: props.params.collectionId,
-    }) || {},
-});
+const mapStateToProps = (state, props) => {
+  const collectionsById = Collections.selectors.expandedCollectionsById(
+    state,
+    props,
+  );
+  return {
+    collectionId: props.params.collectionId,
+    collectionsById,
+  };
+};
 
 @connect(mapStateToProps)
 class CollectionLanding extends React.Component {
   render() {
-    const { params: { collectionId }, currentCollection } = this.props;
+    const { collectionId, collectionsById } = this.props;
+    const currentCollection = collectionsById[collectionId];
     const isRoot = collectionId === "root";
 
     return (
       <Box mx={4}>
         <Box>
-          <Flex py={3} align="center">
-            <Subhead>
-              <Flex align="center">
-                {collectionId && (
-                  <Flex align="center">
-                    <Link
-                      to={`/collection/${collectionId}`}
-                      hover={{ color: normal.blue }}
-                    >
-                      {isRoot ? "Saved items" : currentCollection.name}
-                    </Link>
-                  </Flex>
-                )}
-              </Flex>
-            </Subhead>
+          <Flex align="center">
+            <BrowserCrumbs
+              crumbs={
+                currentCollection && currentCollection.path
+                  ? [
+                      ...currentCollection.path.map(id => ({
+                        title: collectionsById[id] && collectionsById[id].name,
+                        to: Urls.collection(id),
+                      })),
+                      { title: currentCollection.name },
+                    ]
+                  : []
+              }
+            />
 
             <Flex ml="auto">
-              {currentCollection.can_write && (
-                <Box ml={1}>
-                  <NewObjectMenu collectionId={collectionId} />
-                </Box>
-              )}
-              {currentCollection.can_write &&
+              {currentCollection &&
+                currentCollection.can_write && (
+                  <Box ml={1}>
+                    <NewObjectMenu collectionId={collectionId} />
+                  </Box>
+                )}
+              {currentCollection &&
+                currentCollection.can_write &&
                 !currentCollection.personal_owner_id && (
                   <Box ml={1}>
                     <CollectionEditMenu

diff --git a/frontend/src/metabase/entities/collections.js b/frontend/src/metabase/entities/collections.js
@@ -3,6 +3,7 @@
 import { createEntity, undo } from "metabase/lib/entities";
 import { normal, getRandomColor } from "metabase/lib/colors";
 import { CollectionSchema } from "metabase/schema";
+import { createSelector } from "reselect";
 
 import React from "react";
 import CollectionSelect from "metabase/containers/CollectionSelect";
@@ -31,6 +32,15 @@ const Collections = createEntity({
       ),
   },
 
+  selectors: {
+    expandedCollectionsById: createSelector(
+      [state => state.entities.collections],
+      collections =>
+        // HACK: only works if we've loaded the collections with `location`
+        getCollectionsById(Object.values(collections).filter(c => c.location)),
+    ),
+  },
+
   objectSelectors: {
     getName: collection => collection && collection.name,
     getUrl: collection =>
@@ -76,7 +86,7 @@ export default Collections;
 
 export const ROOT_COLLECTION = {
   id: "root",
-  name: "Saved Items",
+  name: "Saved items",
   location: "",
 };
 

diff --git a/frontend/src/metabase/entities/search.js b/frontend/src/metabase/entities/search.js
@@ -43,7 +43,11 @@ export default createEntity({
           );
         }
         const collection = await collectionList({ id: query.collection });
-        items = collection.items;
+        items = collection.items.map(item => ({
+          // archived false becaued this endpoint never returns archived items
+          archived: false,
+          ...item,
+        }));
       } else {
         items = await searchList(query);
       }

diff --git a/src/metabase/api/collection.clj b/src/metabase/api/collection.clj
@@ -53,14 +53,14 @@
 
 (defmethod fetch-collection-children :card
   [_ collection {:keys [archived?]}]
-  (-> (db/select [Card :id :name :description :collection_position :archived]
+  (-> (db/select [Card :id :name :description :collection_position]
         :collection_id (:id collection)
         :archived      archived?)
       (hydrate :favorite)))
 
 (defmethod fetch-collection-children :dashboard
   [_ collection {:keys [archived?]}]
-  (db/select [Dashboard :id :name :description :collection_position :archived]
+  (db/select [Dashboard :id :name :description :collection_position]
     :collection_id (:id collection)
     :archived      archived?))
 

diff --git a/src/metabase/models/collection.clj b/src/metabase/models/collection.clj
@@ -322,7 +322,7 @@
   [collection :- CollectionWithLocationAndIDOrRoot, & additional-honeysql-where-clauses]
   ;; first, fetch all the descendants of the `collection`, and build a map of location -> children. This will be used
   ;; so we can fetch the immediate children of each Collection
-  (let [location->children (group-by :location (db/select [Collection :name :id :location :description :archived]
+  (let [location->children (group-by :location (db/select [Collection :name :id :location :description]
                                                  {:where
                                                   (apply
                                                    vector