Add archived queries section to queries list.

client/app/assets/less/redash/redash-newstyle.less

@@ -181,7 +181,7 @@ body {
     cursor: pointer;
   }
 
-  .btn-favourite {
+  .btn-favourite, .btn-archive {
     font-size: 15px;
   }
 }
@@ -194,7 +194,7 @@ body {
   }
 }
 
-.btn-favourite {
+.btn-favourite, .btn-archive {
   color: #d4d4d4;
   transition: all .25s ease-in-out;
 
@@ -207,7 +207,20 @@ body {
   }
 }
 
-.page-header--new .btn-favourite {
+.btn-archive {
+  color: #d4d4d4;
+  transition: all .25s ease-in-out;
+
+  &:hover, &:focus {
+    color: @gray-light;
+  }
+
+  .fa-archive {
+    color: @gray-light;
+  }
+}
+
+.page-header--new .btn-favourite, .page-header--new .btn-archive {
   font-size: 19px;
 }
 
@@ -243,7 +256,7 @@ body {
   }
 }
 
-.navbar li a .btn-favourite .fa {
+.navbar li a .btn-favourite .fa, .navbar li a .btn-archive .fa {
   font-size: 100%;
 }
 

client/app/lib/list-ctrl.js

@@ -1,9 +1,37 @@
-import { bind } from 'lodash';
+import { bind, each } from 'lodash';
 import $ from 'jquery';
 import { LivePaginator } from '@/lib/pagination';
+import { Query } from '@/services/query';
+import { Dashboard } from '@/services/dashboard';
+import { User } from '@/services/user';
+
+export function buildListRoutes(name, routes, template) {
+  const listRoutes = {};
+  each(routes, (route) => {
+    listRoutes[route.path] = {
+      template,
+      reloadOnSearch: false,
+      title: route.title,
+      resolve: {
+        currentPage: () => route.page,
+        resource: () => {
+          // services that are using the ListCtrl class
+          const listServices = {
+            query: Query,
+            dashboard: Dashboard,
+            user: User,
+          };
+          return listServices[name].query.bind(listServices[name]);
+        },
+      },
+    };
+  });
+  return listRoutes;
+}
 
-export default class ListCtrl {
-  constructor($scope, $location, currentUser, clientConfig, defaultOrder = '-created_at') {
+export class ListCtrl {
+  constructor($scope, $location, $route, currentUser, clientConfig, defaultOrder = '-created_at') {
+    this.title = $route.current.title; // will make it available as $ctrl.title
     this.searchTerm = $location.search().q || '';
 
     this.page = parseInt($location.search().page || 1, 10);

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

@@ -1,6 +1,5 @@
 <div class="container">
-  <page-header title="'Dashboards'"></page-header>
-
+  <page-header title="$ctrl.title"></page-header>
   <div class="row">
     <div class="col-md-3 list-control-t">
       <div class="m-b-10">
@@ -37,22 +36,22 @@
     </div>
 
     <div ng-if="$ctrl.loaded && $ctrl.showEmptyState" class="col-md-9 list-content">
-      <div ng-if="($ctrl.currentPage == 'all') && ($ctrl.searchText.length == 0 || $ctrl.searchText === undefined)">
-        <empty-state
-          icon="'zmdi zmdi-view-quilt'"
-          description="'See the big picture'"
-          illustration="'dashboard'"
-          help-link="'https://help.redash.io/category/22-dashboards'"
-          show-dashboard-step="true"
-        ></empty-state>
+      <div ng-switch="$ctrl.emptyType">
+        <div ng-switch-when="default">
+          <empty-state
+            icon="'zmdi zmdi-view-quilt'"
+            description="'See the big picture'"
+            illustration="'dashboard'"
+            help-link="'https://help.redash.io/category/22-dashboards'"
+            show-dashboard-step="true"
+          ></empty-state>
+        </div>
+
+        <big-message ng-switch-when="favorites" message="'Mark dashboards as Favorite to list them here.'" icon="'fa-star'" />
+        <big-message ng-switch-when="search" message="'Sorry, we couldn\'t find anything.'" icon="'fa-search'"></big-message>
+        <no-tagged-objects-found ng-switch-when="tags" object-type="'dashboards'" tags="$ctrl.selectedTags" />
       </div>
 
-      <big-message ng-if="($ctrl.currentPage == 'favorites') && ($ctrl.searchTerm === undefined || $ctrl.searchTerm.length == 0) && $ctrl.selectedTags.size === 0"
-        message="'Mark dashboards as Favorite to list them here.'" icon="'fa-star'" />
-
-      <big-message message="'Sorry, we couldn\'t find anything.'" icon="'fa-search'" ng-if="$ctrl.searchTerm.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">

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

@@ -1,19 +1,29 @@
-import { extend } from 'lodash';
-
-import ListCtrl from '@/lib/list-ctrl';
+import { buildListRoutes, ListCtrl } from '@/lib/list-ctrl';
 import template from './dashboard-list.html';
 import './dashboard-list.css';
 
 class DashboardListCtrl extends ListCtrl {
-  constructor($scope, $location, currentUser, clientConfig, Dashboard) {
-    super($scope, $location, currentUser, clientConfig);
+  constructor($scope, $location, $route, currentUser, clientConfig, Dashboard) {
+    super($scope, $location, $route, currentUser, clientConfig);
     this.Type = Dashboard;
   }
 
   processResponse(data) {
     super.processResponse(data);
     const rows = data.results.map(d => new this.Type(d));
     this.paginator.updateRows(rows, data.count);
+
+    if (data.count === 0) {
+      if (this.isInSearchMode()) {
+        this.emptyType = 'search';
+      } else if (this.selectedTags.size > 0) {
+        this.emptyType = 'tags';
+      } else if (this.currentPage === 'favorites') {
+        this.emptyType = 'favorites';
+      } else {
+        this.emptyType = 'default';
+      }
+    }
     this.showEmptyState = data.count === 0;
   }
 }
@@ -23,42 +33,20 @@ export default function init(ngModule) {
     template,
     controller: DashboardListCtrl,
   });
-
-  const route = {
-    template: '<page-dashboard-list></page-dashboard-list>',
-    reloadOnSearch: false,
-  };
-
-  return {
-    '/dashboards': extend(
-      {
-        title: 'Dashboards',
-        resolve: {
-          currentPage: () => 'all',
-          resource(Dashboard) {
-            'ngInject';
-
-            return Dashboard.query.bind(Dashboard);
-          },
-        },
-      },
-      route,
-    ),
-    '/dashboards/favorites': extend(
-      {
-        title: 'Favorite Dashboards',
-        resolve: {
-          currentPage: () => 'favorites',
-          resource(Dashboard) {
-            'ngInject';
-
-            return Dashboard.favorites.bind(Dashboard);
-          },
-        },
-      },
-      route,
-    ),
-  };
+  const routes = [
+    {
+      page: 'all',
+      title: 'All Dashboards',
+      path: '/dashboards',
+    },
+    {
+      page: 'favorites',
+      title: 'Favorite Dashboards',
+      path: '/dashboards/favorites',
+    },
+  ];
+
+  return buildListRoutes('dashboard', routes, '<page-dashboard-list></page-dashboard-list>');
 }
 
 init.init = true;

client/app/pages/queries-list/index.js

@@ -1,14 +1,13 @@
 import moment from 'moment';
-import { extend } from 'lodash';
 
-import ListCtrl from '@/lib/list-ctrl';
+import { buildListRoutes, ListCtrl } from '@/lib/list-ctrl';
 import template from './queries-list.html';
 import './queries-list.css';
 
 
 class QueriesListCtrl extends ListCtrl {
-  constructor($scope, $location, currentUser, clientConfig, Query) {
-    super($scope, $location, currentUser, clientConfig);
+  constructor($scope, $location, $route, currentUser, clientConfig, Query) {
+    super($scope, $location, $route, currentUser, clientConfig);
     this.Type = Query;
     this.showMyQueries = currentUser.hasPermission('create_query');
   }
@@ -32,6 +31,8 @@ class QueriesListCtrl extends ListCtrl {
         this.emptyType = 'favorites';
       } else if (this.currentPage === 'my') {
         this.emptyType = 'my';
+      } else if (this.currentPage === 'archive') {
+        this.emptyType = 'archive';
       } else {
         this.emptyType = 'default';
       }
@@ -46,57 +47,29 @@ export default function init(ngModule) {
     controller: QueriesListCtrl,
   });
 
-  const route = {
-    template: '<page-queries-list></page-queries-list>',
-    reloadOnSearch: false,
-  };
-
-  return {
-    '/queries': extend(
-      {
-        title: 'Queries',
-        resolve: {
-          currentPage: () => 'all',
-          resource(Query) {
-            'ngInject';
-
-            return Query.query.bind(Query);
-          },
-        },
-      },
-      route,
-    ),
-    '/queries/my': extend(
-      {
-        title: 'My Queries',
-        resolve: {
-          currentPage: () => 'my',
-          resource: (Query) => {
-            'ngInject';
-
-            return Query.myQueries.bind(Query);
-          },
-        },
-      },
-      route,
-    ),
-    '/queries/favorites': extend(
-      {
-        title: 'Favorite Queries',
-        resolve: {
-          currentPage: () => 'favorites',
-          resource: (Query) => {
-            'ngInject';
-
-            return Query.favorites.bind(Query);
-          },
-        },
-      },
-      route,
-    ),
-    // TODO: setup redirect?
-    // '/queries/search': _.extend(
-  };
+  const routes = [
+    {
+      page: 'all',
+      title: 'All Queries',
+      path: '/queries',
+    },
+    {
+      page: 'my',
+      title: 'My Queries',
+      path: '/queries/my',
+    },
+    {
+      page: 'favorites',
+      title: 'Favorite Queries',
+      path: '/queries/favorites',
+    },
+    {
+      page: 'archive',
+      title: 'Archived Queries',
+      path: '/queries/archive',
+    },
+  ];
+  return buildListRoutes('query', routes, '<page-queries-list></page-queries-list>');
 }
 
 init.init = true;

client/app/pages/queries-list/queries-list.html

@@ -1,6 +1,5 @@
 <div class="container">
-  <page-header title="'Queries'"></page-header>
-
+  <page-header title="$ctrl.title"></page-header>
   <div class="row">
     <div class="col-md-3 list-control-t">
       <div class="m-b-10">
@@ -17,10 +16,19 @@
           </span>
           Favorites
         </a>
+
+        <a href="queries/archive" class="list-group-item" ng-class="{active: $ctrl.currentPage == 'archive'}">
+          <span class="btn-archive">
+            <i class="fa fa-archive" aria-hidden="true"></i>
+          </span>
+          Archive
+        </a>
+
         <a href="queries/my" class="list-group-item" ng-if="$ctrl.showMyQueries" ng-class="{active: $ctrl.currentPage == 'my'}">
           <img ng-src="{{$ctrl.currentUser.profile_image_url}}" class="profile__image--navbar" width="13" style="margin-right: 0;"
           /> My Queries
         </a>
+
       </div>
 
       <div ng-if="$ctrl.currentPage != 'my'">
@@ -56,6 +64,7 @@
           <a href="https://redash.io/help/user-guide/querying/writing-queries">query writing documentation</a>.
         </div>
 
+        <big-message ng-switch-when="archive" message="'Archived queries will be listed here.'" icon="'fa-archive'" />
         <big-message ng-switch-when="favorites" message="'Mark queries as Favorite to list them here.'" icon="'fa-star'" />
         <big-message ng-switch-when="search" message="'Sorry, we couldn\'t find anything.'" icon="'fa-search'"></big-message>
         <no-tagged-objects-found ng-switch-when="tags" object-type="'queries'" tags="$ctrl.selectedTags" />
@@ -132,10 +141,19 @@
           </span>
           Favorites
         </a>
+
+        <a href="queries/archive" class="list-group-item" ng-class="{active: $ctrl.currentPage == 'archive'}">
+          <span class="btn-archive">
+            <i class="fa fa-archive" aria-hidden="true"></i>
+          </span>
+          Archive
+        </a>
+
         <a href="queries/my" class="list-group-item" ng-if="$ctrl.showMyQueries" ng-class="{active: $ctrl.currentPage == 'my'}">
           <img ng-src="{{$ctrl.currentUser.profile_image_url}}" class="profile__image--navbar" width="13" style="margin-right: 0;"
           /> My Queries
         </a>
+
       </div>
 
       <div ng-if="$ctrl.currentPage != 'my'" class="m-b-10">