fixes: #1871 Dropdown starred (#9490)

adding the ability to star dashboard in search and dashboard-list

closes #1871 

public/app/core/components/search/search.html

@@ -63,7 +63,9 @@
 					<span ng-click="ctrl.filterByTag(tag, $event)" ng-repeat="tag in row.tags" tag-color-from-name="tag"  class="label label-tag">
 						{{tag}}
 					</span>
-					<i class="fa" ng-class="{'fa-star': row.isStarred, 'fa-star-o': !row.isStarred}"></i>
+					<span ng-click="ctrl.starDashboard(row, $event)">
+						<i class="fa" ng-class="{'fa-star': row.isStarred, 'fa-star-o': !row.isStarred}"></i>
+					</span>
 				</span>
 
 				<span class="search-result-link">

public/app/core/components/search/search.ts

@@ -19,7 +19,7 @@ export class SearchCtrl {
   openCompleted: boolean;
 
   /** @ngInject */
-  constructor($scope, private $location, private $timeout, private backendSrv, public contextSrv, $rootScope) {
+  constructor($scope, private $location, private $timeout, private backendSrv, private dashboardSrv, public contextSrv, $rootScope) {
     $rootScope.onAppEvent('show-dash-search', this.openSearch.bind(this), $scope);
     $rootScope.onAppEvent('hide-dash-search', this.closeSearch.bind(this), $scope);
   }
@@ -161,6 +161,15 @@ export class SearchCtrl {
     this.searchDashboards();
   }
 
+  starDashboard(row, evt) {
+    this.dashboardSrv.starDashboard(row.id, row.isStarred).then(newState => {
+      row.isStarred = newState;
+    });
+    if (evt) {
+      evt.stopPropagation();
+      evt.preventDefault();
+    }
+  }
 }
 
 export function searchDirective() {

public/app/features/dashboard/dashboard_srv.ts

@@ -131,6 +131,27 @@ export class DashboardSrv {
       modalClass: 'modal--narrow'
     });
   }
+
+  starDashboard(dashboardId, isStarred) {
+    let promise;
+
+    if (isStarred) {
+      promise = this.backendSrv.delete('/api/user/stars/dashboard/' + dashboardId).then(() =>  {
+        return false;
+      });
+    } else {
+      promise = this.backendSrv.post('/api/user/stars/dashboard/' + dashboardId).then(() => {
+        return true;
+      });
+    }
+
+    return promise.then(res => {
+      if (this.dash && this.dash.id === dashboardId) {
+        this.dash.meta.isStarred = res;
+      }
+      return res;
+    });
+  }
 }
 
 coreModule.service('dashboardSrv', DashboardSrv);

public/app/features/dashboard/dashnav/dashnav.ts

@@ -49,14 +49,9 @@ export class DashNavCtrl {
     }
 
     starDashboard() {
-      if (this.dashboard.meta.isStarred) {
-        return this.backendSrv.delete('/api/user/stars/dashboard/' + this.dashboard.id).then(() =>  {
-          this.dashboard.meta.isStarred = false;
-        });
-      }
-
-      this.backendSrv.post('/api/user/stars/dashboard/' + this.dashboard.id).then(() => {
-        this.dashboard.meta.isStarred = true;
+      this.dashboardSrv.starDashboard(this.dashboard.id, this.dashboard.meta.isStarred)
+        .then(newState => {
+          this.dashboard.meta.isStarred = newState;
       });
     }
 

public/app/plugins/panel/dashlist/module.html

@@ -8,7 +8,7 @@
         <span class="dashlist-title">
           {{dash.title}}
         </span>
-        <span class="dashlist-star">
+        <span class="dashlist-star" ng-click="ctrl.starDashboard(dash, $event)">
           <i class="fa" ng-class="{'fa-star': dash.isStarred, 'fa-star-o': dash.isStarred === false}"></i>
         </span>
       </a>

public/app/plugins/panel/dashlist/module.ts

@@ -21,7 +21,7 @@ class DashListCtrl extends PanelCtrl {
   };
 
   /** @ngInject */
-  constructor($scope, $injector, private backendSrv) {
+  constructor($scope, $injector, private backendSrv, private dashboardSrv) {
     super($scope, $injector);
     _.defaults(this.panel, this.panelDefaults);
 
@@ -105,6 +105,17 @@ class DashListCtrl extends PanelCtrl {
     });
   }
 
+  starDashboard(dash, evt) {
+    this.dashboardSrv.starDashboard(dash.id, dash.isStarred).then(newState => {
+      dash.isStarred = newState;
+    });
+
+    if (evt) {
+      evt.stopPropagation();
+      evt.preventDefault();
+    }
+  }
+
   getRecentDashboards() {
     this.groups[1].show = this.panel.recent;
     if (!this.panel.recent) {

public/sass/components/_panel_dashlist.scss

@@ -13,9 +13,11 @@
   padding: 7px;
   background-color: $tight-form-bg;
   .fa {
-    float: right;
     padding-top: 3px;
   }
+  .dashlist-star {
+    float: right;
+  }
   .fa-star {
     color: $orange;
   }