Implement dashboard list empty states.

client/app/components/BigMessage.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { react2angular } from 'react2angular';
+
+export function BigMessage({ message, icon, children }) {
+  return (
+    <div className="tiled bg-white p-15 text-center">
+      <h3 className="m-t-0 m-b-0">
+        <i className={'fa ' + icon} />
+      </h3>
+      <br />
+      {message}
+      {children}
+    </div>
+  );
+}
+
+BigMessage.propTypes = {
+  message: PropTypes.string,
+  icon: PropTypes.string.isRequired,
+  children: PropTypes.node,
+};
+
+BigMessage.defaultProps = {
+  message: '',
+  children: null,
+};
+
+export default function init(ngModule) {
+  ngModule.component('bigMessage', react2angular(BigMessage));
+}

client/app/components/NoTaggedObjectsFound.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { react2angular } from 'react2angular';
+import { BigMessage } from './BigMessage.jsx';
+
+function NoTaggedObjectsFound({ objectType, tags }) {
+  return (
+    <BigMessage icon="fa-tags">
+      No {objectType} found tagged with
+      {Array.from(tags).map(tag => (
+        <span className="label label-tag" key={tag}>
+          {tag}
+        </span>
+      ))}.
+    </BigMessage>
+  );
+}
+
+NoTaggedObjectsFound.propTypes = {
+  objectType: PropTypes.string.isRequired,
+  tags: PropTypes.objectOf(Set).isRequired,
+};
+
+export default function init(ngModule) {
+  ngModule.component('noTaggedObjectsFound', react2angular(NoTaggedObjectsFound));
+}

client/app/pages/dashboards/dashboard-list.html

@@ -3,6 +3,11 @@
 
   <div class="row">
     <div class="col-md-3 list-control-t">
+      <div class="m-b-5">
+        <input type='text' class='form-control' placeholder="Search Dashboards..." ng-change="$ctrl.update()" ng-model="$ctrl.searchText"
+          autofocus/>
+      </div>
+
       <div class="list-group m-b-10 tags-list tiled">
         <a href="dashboards" class="list-group-item" ng-class="{active: $ctrl.currentPage == 'all'}">
           All Dashboards
@@ -17,14 +22,12 @@
       </div>
 
       <div class="m-b-10">
-        <input type='text' class='form-control' placeholder="Search Dashboards..." ng-change="$ctrl.update()" ng-model="$ctrl.searchText"
-          autofocus/>
         <tags-list tags-url="api/dashboards/tags" on-tags-update="$ctrl.onTagsUpdate"></tags-list>
       </div>
     </div>
 
-    <div ng-if="!$ctrl.loaded" class="col-md-9 list-content text-center p-t-15 p-b-15">
-      <i class="fa fa-spinner fa-2x fa-pulse"></i>
+    <div ng-if="!$ctrl.loaded" class="col-md-9 list-content text-center">
+      <big-message icon="'fa-spinner fa-2x fa-pulse'" message="'Loading...'"></big-message>
     </div>
 
     <div ng-if="$ctrl.loaded && $ctrl.showEmptyState" class="col-md-9 list-content">
@@ -33,15 +36,16 @@
           help-link="http://help.redash.io/category/22-dashboards"></empty-state>
       </div>
 
-      <div class="tiled bg-white p-15" ng-if="($ctrl.currentPage == 'favorites') && ($ctrl.searchText === undefined || $ctrl.searchText.length == 0)">
+      <div class="tiled bg-white p-15" ng-if="($ctrl.currentPage == 'favorites') && ($ctrl.searchText === undefined || $ctrl.searchText.length == 0) && $ctrl.selectedTags.size === 0">
         Mark dashboards as favorite
         <span class="btn-favourite">
           <i class="fa fa-star" aria-hidden="true"></i>
         </span> to list them here.
       </div>
-      <div class="tiled bg-white p-15" ng-if="$ctrl.searchText.length > 0">
-        Sorry, we couldn't find anything.
-      </div>
+
+      <big-message message="'Sorry, we couldn\'t find anything.'" icon="'fa-search'" ng-if="$ctrl.searchText.length > 0"></big-message>
+
+      <no-tagged-objects-found object-type="'dashboards'" tags="$ctrl.selectedTags" ng-if="$ctrl.selectedTags.size > 0" />
     </div>
 
     <div ng-if="$ctrl.loaded && !$ctrl.showEmptyState" class="col-md-9 list-content">
@@ -81,6 +85,11 @@
     </div>
 
     <div class="col-md-3 list-control-r-b">
+      <div class="m-b-5">
+        <input type='text' class='form-control' placeholder="Search Dashboards..." ng-change="$ctrl.update()" ng-model="$ctrl.searchText"
+          autofocus/>
+      </div>
+
       <div class="list-group m-b-10 tags-list tiled">
         <a href="dashboards" class="list-group-item" ng-class="{active: $ctrl.currentPage == 'all'}">
           All Dashboards
@@ -94,9 +103,6 @@
         </a>
       </div>
 
-      <input type='text' class='form-control' placeholder="Search Dashboards..." ng-change="$ctrl.update()" ng-model="$ctrl.searchText"
-        autofocus/>
-
       <tags-list tags-url="api/dashboards/tags" on-tags-update="$ctrl.onTagsUpdate"></tags-list>
     </div>
   </div>

client/app/pages/dashboards/dashboard-list.js

@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import { isString, extend } from 'lodash';
 
 import { LivePaginator } from '@/lib/pagination';
 import template from './dashboard-list.html';
@@ -36,10 +36,11 @@ function DashboardListCtrl($scope, currentUser, $location, Dashboard) {
       tags: [...this.selectedTags], // convert Set to Array
     });
 
-    if (_.isString(this.searchText) && this.searchText !== '') {
+    if (isString(this.searchText) && this.searchText !== '') {
       request.q = this.searchText;
     }
 
+    this.loaded = false;
     return this.resource(request).$promise.then((data) => {
       this.loaded = true;
       const rows = data.results.map(d => new Dashboard(d));
@@ -77,7 +78,7 @@ export default function init(ngModule) {
   };
 
   return {
-    '/dashboards': _.extend(
+    '/dashboards': extend(
       {
         title: 'Dashboards',
         resolve: {
@@ -91,7 +92,7 @@ export default function init(ngModule) {
       },
       route,
     ),
-    '/dashboards/favorite': _.extend(
+    '/dashboards/favorite': extend(
       {
         title: 'Favorite Dashboards',
         resolve: {