Added empty states for metrics and databases

frontend/src/metabase/components/EmptyState.css

+:local(.emptyState) {
+    composes: text-centered text-brand-light from "style";
+}
+
+:local(.emptyStateTitle) {
+    composes: text-brand mb4 from "style";
+}
+
+:local(.emptyStateMessage) {
+    composes: text-grey-2 mt4 from "style";
+}
+
+:local(.emptyStateAction) {
+    composes: button-primary from "style";
+}

frontend/src/metabase/components/EmptyState.jsx

 import React, { PropTypes } from "react";
+import { Link } from "react-router";
+
 import Icon from "metabase/components/Icon.jsx";
 
-const EmptyState = ({ message, icon }) =>
-  <div className="text-centered mt4 text-brand-light">
-    <Icon name={icon} width={40} height={40} />
-    <h2 className="text-brand-light mt4">{message}</h2>
-  </div>
+import S from "./EmptyState.css"
+
+const EmptyState = ({ title, message, icon, image, action, link }) =>
+    <div className={S.emptyState}>
+        { title &&
+            <h2 className={S.emptyStateTitle}>{title}</h2>
+        }
+        { icon &&
+            <Icon name={icon} width={40} height={40} />
+        }
+        { image &&
+            <img src={`${image}.png`} height="300px" alt={message} srcSet={`${image}@2x.png 2x`} />
+        }
+        <h3 className={S.emptyStateMessage}>{message}</h3>
+        { action &&
+            <Link className="Button Button--primary Button--large mt2" to={link}>{action}</Link>
+        }
+    </div>
 
 EmptyState.propTypes = {
+    title:      PropTypes.string,
     message:    PropTypes.string.isRequired,
-    icon:       PropTypes.string.isRequired,
+    icon:       PropTypes.string,
+    image:      PropTypes.string,
+    action:     PropTypes.string,
+    link:       PropTypes.string,
 };
 
 export default EmptyState;

frontend/src/metabase/css/components/buttons.css

@@ -54,6 +54,11 @@
     font-size: 0.8rem;
 }
 
+.Button--large {
+    padding: 0.75rem 1rem;
+    font-size: 1rem;
+}
+
 .Button-normal {
     font-weight: normal;
 }

frontend/src/metabase/css/core/colors.css

@@ -32,8 +32,8 @@
 }
 
 /* brand */
-.text-brand,
-.text-brand-hover:hover {
+.text-brand, :local(.text-brand),
+.text-brand-hover:hover, :local(.text-brand-hover):hover {
     color: var(--brand-color);
 }
 
@@ -136,7 +136,7 @@
 .text-grey-1, :local(.text-grey-1),
 .text-grey-1-hover:hover { color: var(--grey-1) }
 
-.text-grey-2,
+.text-grey-2, :local(.text-grey-2),
 .text-grey-2-hover:hover { color: var(--grey-2) }
 
 .text-grey-3, :local(.text-grey-3),

frontend/src/metabase/reference/containers/ReferenceEntityList.jsx

@@ -17,6 +17,7 @@ import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper.j
 import {
     getSection,
     getData,
+    getUser,
     getError,
     getLoading
 } from "../selectors";
@@ -25,7 +26,8 @@ import * as metadataActions from "metabase/redux/metadata";
 
 const mapStateToProps = (state, props) => ({
     section: getSection(state),
-    entities: getData(state),
+    entities: {},
+    user: getUser(state),
     loading: getLoading(state),
     loadingError: getError(state)
 });
@@ -39,6 +41,7 @@ export default class ReferenceEntityList extends Component {
     static propTypes = {
         style: PropTypes.object.isRequired,
         entities: PropTypes.object.isRequired,
+        user: PropTypes.object.isRequired,
         section: PropTypes.object.isRequired,
         loading: PropTypes.bool,
         loadingError: PropTypes.object
@@ -47,6 +50,7 @@ export default class ReferenceEntityList extends Component {
     render() {
         const {
             entities,
+            user,
             style,
             section,
             loadingError,
@@ -103,7 +107,18 @@ export default class ReferenceEntityList extends Component {
                     </div>
                     :
                     <div className={S.empty}>
-                      <EmptyState message={empty.message} icon={empty.icon} />
+                        { section.empty &&
+                            <EmptyState
+                                title={section.empty.title}
+                                message={user.is_superuser ?
+                                    section.empty.adminMessage :
+                                    section.empty.message
+                                }
+                                image={section.empty.image}
+                                action={user.is_superuser && section.empty.action}
+                                link={user.is_superuser && section.empty.link}
+                            />
+                        }
                     </div>
                 }
                 </LoadingAndErrorWrapper>

frontend/src/metabase/reference/selectors.js

@@ -18,6 +18,14 @@ const referenceSections = {
     [`/reference/metrics`]: {
         id: `/reference/metrics`,
         name: "Metrics",
+        empty: {
+            title: "Metrics are the official numbers that your team cares about",
+            adminMessage: "Defining common metrics for your team makes it even easier to ask questions",
+            message: "Metrics will appear here once your admins have created some",
+            image: "/app/img/metrics-list",
+            action: "Create a metric",
+            link: "/admin/datamodel/database"
+        },
         breadcrumb: "Metrics",
         // mapping of propname to args of dispatch function
         fetch: {fetchMetrics: []},
@@ -28,6 +36,14 @@ const referenceSections = {
     [`/reference/lists`]: {
         id: `/reference/lists`,
         name: "Lists",
+        empty: {
+            title: "Metrics are the official numbers that your team cares about",
+            adminMessage: "Defining common metrics for your team makes it even easier to ask questions",
+            message: "Metrics will appear here once your admins have created some",
+            image: "/app/img/metrics-list",
+            action: "Create a metric",
+            link: "/admin/datamodel/database"
+        },
         breadcrumb: "Lists",
         fetch: {fetchLists: []},
         get: 'getLists',
@@ -37,6 +53,14 @@ const referenceSections = {
     [`/reference/databases`]: {
         id: `/reference/databases`,
         name: "Databases and tables",
+        empty: {
+            title: "Metabase is no fun without any data",
+            adminMessage: "Your databses will appear here once you connect one",
+            message: "Databases will appear here once your admins have added some",
+            image: "/app/img/databases-list",
+            action: "Connect a database",
+            link: "/admin/databases/create"
+        },
         breadcrumb: "Databases",
         fetch: {fetchDatabases: []},
         get: 'getDatabases',