Collection badges (#8048)

* collection badges

* inline

* more specific selector for test

* only show collection if the question has been saved

frontend/src/metabase/components/Header.jsx

 import React, { Component } from "react";
 import ReactDOM from "react-dom";
 
+import CollectionBadge from "metabase/questions/components/CollectionBadge";
 import InputBlurChange from "metabase/components/InputBlurChange.jsx";
 import HeaderModal from "metabase/components/HeaderModal.jsx";
 import TitleAndDescription from "metabase/components/TitleAndDescription.jsx";
@@ -77,6 +78,7 @@ export default class Header extends Component {
   }
 
   render() {
+    const { item } = this.props;
     let titleAndDescription;
     if (this.props.isEditingInfo) {
       titleAndDescription = (
@@ -154,9 +156,12 @@ export default class Header extends Component {
           }
           ref="header"
         >
-          <div className="Entity py3">
+          <div className="Entity py3 mb1">
             {titleAndDescription}
             {attribution}
+            {!this.props.isEditingInfo && (
+              <CollectionBadge collectionId={item.collection_id} />
+            )}
           </div>
 
           <div className="flex align-center flex-align-right">

frontend/src/metabase/components/TitleAndDescription.jsx

@@ -13,7 +13,7 @@ type Attributes = {
 };
 const TitleAndDescription = ({ title, description, className }: Attributes) => (
   <div className={cx("flex align-center", className)}>
-    <h2 className="mr1">{title}</h2>
+    <h2 className="h2 mr1">{title}</h2>
     {description && (
       <Tooltip tooltip={description} maxWidth={"22em"}>
         <Icon name="info" style={{ marginTop: 3 }} />

frontend/src/metabase/query_builder/components/QueryHeader.jsx

 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import { Link } from "react-router";
 import { connect } from "react-redux";
 import { t } from "c-3po";
 import QueryModeButton from "./QueryModeButton.jsx";
@@ -17,6 +16,7 @@ import QuestionSavedModal from "metabase/components/QuestionSavedModal.jsx";
 import Tooltip from "metabase/components/Tooltip.jsx";
 import CollectionMoveModal from "metabase/containers/CollectionMoveModal.jsx";
 import ArchiveQuestionModal from "metabase/query_builder/containers/ArchiveQuestionModal";
+import CollectionBadge from "metabase/questions/components/CollectionBadge";
 
 import SaveQuestionModal from "metabase/containers/SaveQuestionModal.jsx";
 
@@ -25,7 +25,6 @@ import { clearRequestState } from "metabase/redux/requests";
 import { CardApi, RevisionApi } from "metabase/services";
 
 import MetabaseAnalytics from "metabase/lib/analytics";
-import * as Urls from "metabase/lib/urls";
 
 import cx from "classnames";
 import _ from "underscore";
@@ -547,22 +546,8 @@ export default class QueryHeader extends Component {
           buttons={this.getHeaderButtons()}
           setItemAttributeFn={this.props.onSetCardAttribute}
           badge={
-            this.props.card.collection && (
-              <Link
-                to={Urls.collection(this.props.card.collection.id)}
-                className="text-uppercase flex align-center no-decoration"
-                style={{
-                  color: this.props.card.collection.color,
-                  fontSize: 12,
-                }}
-              >
-                <Icon
-                  name="collection"
-                  size={12}
-                  style={{ marginRight: "0.5em" }}
-                />
-                {this.props.card.collection.name}
-              </Link>
+            this.props.card.id && (
+              <CollectionBadge collectionId={this.props.card.collection_id} />
             )
           }
         />

frontend/src/metabase/questions/components/CollectionBadge.jsx

 import React from "react";
+import { Flex } from "grid-styled";
 import { Link } from "react-router";
 
+import Icon from "metabase/components/Icon";
+
+import { entityObjectLoader } from "metabase/entities/containers/EntityObjectLoader";
 import * as Urls from "metabase/lib/urls";
 
-import Color from "color";
 import cx from "classnames";
 
-import colors from "metabase/lib/colors";
-
-const CollectionBadge = ({ className, collection }) => {
-  const color = Color(collection.color);
-  const darkened = color.darken(0.1);
-  const lightened = color.lighten(0.4);
-  return (
-    <Link
-      to={Urls.collection(collection.id)}
-      className={cx(className, "flex align-center px1 rounded mx1")}
-      style={{
-        fontSize: 14,
-        color: lightened.isDark() ? colors["text-white"] : darkened,
-        backgroundColor: lightened,
-      }}
-    >
-      {collection.name}
-    </Link>
-  );
-};
+@entityObjectLoader({
+  entityType: "collections",
+  entityId: (state, props) => props.collectionId || "root",
+  wrapped: true,
+})
+class CollectionBadge extends React.Component {
+  render() {
+    const { object } = this.props;
+    return (
+      <Link to={Urls.collection(object.id)} className={cx("inline-block link")}>
+        <Flex align="center">
+          <Icon name={object.getIcon()} mr={1} />
+          <h5 className="text-uppercase" style={{ fontWeight: 900 }}>
+            {object.name}
+          </h5>
+        </Flex>
+      </Link>
+    );
+  }
+}
 
 export default CollectionBadge;

frontend/test/parameters/parameters.integ.spec.js

@@ -314,7 +314,7 @@ describe("parameters", () => {
       app = mount(store.getAppContainer());
 
       await store.waitForActions([FETCH_DASHBOARD]);
-      expect(app.find(".DashboardHeader .Entity h2").text()).toEqual(
+      expect(app.find(".DashboardHeader .Entity .h2").text()).toEqual(
         "Test Dashboard",
       );