dashfolders: show/hide create folder or dashboard buttons

depending on the user role and the permissions the user has for a
folder.

public/app/core/components/manage_dashboards/manage_dashboards.html

@@ -5,11 +5,11 @@
       <i class="gf-form-input-icon fa fa-search"></i>
     </label>
     <div class="page-action-bar__spacer"></div>
-    <a class="btn btn-success" ng-href="{{ctrl.createDashboardUrl()}}">
+    <a class="btn btn-success" ng-href="{{ctrl.createDashboardUrl()}}" ng-if="ctrl.isEditor || ctrl.canSaveFolder">
       <i class="fa fa-plus"></i>
       Dashboard
     </a>
-    <a class="btn btn-success" href="dashboards/folder/new" ng-if="!ctrl.folderId">
+    <a class="btn btn-success" href="dashboards/folder/new" ng-if="!ctrl.folderId && ctrl.isEditor">
       <i class="fa fa-plus"></i>
       Folder
     </a>
@@ -104,7 +104,7 @@
   </div>
 </div>
 
-<div ng-if="ctrl.folderId && !ctrl.hasFilters && ctrl.sections.length === 0">
+<div ng-if="ctrl.canSaveFolder && ctrl.folderId && !ctrl.hasFilters && ctrl.sections.length === 0">
   <empty-list-cta model="{
     title: 'This folder doesn\'t have any dashboards yet',
     buttonIcon: 'gicon gicon-dashboard-new',

public/app/core/components/manage_dashboards/manage_dashboards.ts

@@ -3,22 +3,49 @@ import coreModule from 'app/core/core_module';
 import appEvents from 'app/core/app_events';
 import { SearchSrv } from 'app/core/services/search_srv';
 
+class Query {
+  query: string;
+  mode: string;
+  tag: any[];
+  starred: boolean;
+  skipRecent: boolean;
+  skipStarred: boolean;
+  folderIds: number[];
+}
+
 export class ManageDashboardsCtrl {
   public sections: any[];
-  tagFilterOptions: any[];
-  selectedTagFilter: any;
-  query: any;
+
+  query: Query;
   navModel: any;
+
+  selectAllChecked = false;
+
+  // enable/disable actions depending on the folders or dashboards selected
   canDelete = false;
   canMove = false;
+
+  // filter variables
   hasFilters = false;
-  selectAllChecked = false;
+  tagFilterOptions: any[];
+  selectedTagFilter: any;
   starredFilterOptions = [{ text: 'Filter by Starred', disabled: true }, { text: 'Yes' }, { text: 'No' }];
   selectedStarredFilter: any;
+
+  // used when managing dashboards for a specific folder
   folderId?: number;
+  folderSlug?: string;
+
+  // if user can add new folders and/or add new dashboards
+  canSave: boolean;
+
+  // if user has editor role or higher
+  isEditor: boolean;
 
   /** @ngInject */
-  constructor(private backendSrv, navModelSrv, private searchSrv: SearchSrv) {
+  constructor(private backendSrv, navModelSrv, private searchSrv: SearchSrv, private contextSrv) {
+    this.isEditor = this.contextSrv.isEditor;
+
     this.query = {
       query: '',
       mode: 'tree',
@@ -26,6 +53,7 @@ export class ManageDashboardsCtrl {
       starred: false,
       skipRecent: true,
       skipStarred: true,
+      folderIds: [],
     };
 
     if (this.folderId) {
@@ -34,15 +62,26 @@ export class ManageDashboardsCtrl {
 
     this.selectedStarredFilter = this.starredFilterOptions[0];
 
-    this.getDashboards().then(() => {
-      this.getTags();
+    this.refreshList().then(() => {
+      this.initTagFilter();
     });
   }
 
-  getDashboards() {
-    return this.searchSrv.search(this.query).then(result => {
-      return this.initDashboardList(result);
-    });
+  refreshList() {
+    return this.searchSrv
+      .search(this.query)
+      .then(result => {
+        return this.initDashboardList(result);
+      })
+      .then(() => {
+        if (!this.folderSlug) {
+          return;
+        }
+
+        return this.backendSrv.getDashboard('db', this.folderSlug).then(dash => {
+          this.canSave = dash.meta.canSave;
+        });
+      });
   }
 
   initDashboardList(result: any) {
@@ -176,7 +215,7 @@ export class ManageDashboardsCtrl {
         appEvents.emit('alert-success', [header, msg]);
       }
 
-      this.getDashboards();
+      this.refreshList();
     });
   }
 
@@ -203,12 +242,12 @@ export class ManageDashboardsCtrl {
       modalClass: 'modal--narrow',
       model: {
         dashboards: selectedDashboards,
-        afterSave: this.getDashboards.bind(this),
+        afterSave: this.refreshList.bind(this),
       },
     });
   }
 
-  getTags() {
+  initTagFilter() {
     return this.searchSrv.getDashboardTags().then(results => {
       this.tagFilterOptions = [{ term: 'Filter By Tag', disabled: true }].concat(results);
       this.selectedTagFilter = this.tagFilterOptions[0];
@@ -220,11 +259,11 @@ export class ManageDashboardsCtrl {
       this.query.tag.push(tag);
     }
 
-    return this.getDashboards();
+    return this.refreshList();
   }
 
   onQueryChange() {
-    return this.getDashboards();
+    return this.refreshList();
   }
 
   onTagFilterChange() {
@@ -235,7 +274,7 @@ export class ManageDashboardsCtrl {
 
   removeTag(tag, evt) {
     this.query.tag = _.without(this.query.tag, tag);
-    this.getDashboards();
+    this.refreshList();
     if (evt) {
       evt.stopPropagation();
       evt.preventDefault();
@@ -244,13 +283,13 @@ export class ManageDashboardsCtrl {
 
   removeStarred() {
     this.query.starred = false;
-    return this.getDashboards();
+    return this.refreshList();
   }
 
   onStarredFilterChange() {
     this.query.starred = this.selectedStarredFilter.text === 'Yes';
     this.selectedStarredFilter = this.starredFilterOptions[0];
-    return this.getDashboards();
+    return this.refreshList();
   }
 
   onSelectAllChanged() {
@@ -272,7 +311,7 @@ export class ManageDashboardsCtrl {
     this.query.query = '';
     this.query.tag = [];
     this.query.starred = false;
-    this.getDashboards();
+    this.refreshList();
   }
 
   createDashboardUrl() {
@@ -295,6 +334,7 @@ export function manageDashboardsDirective() {
     controllerAs: 'ctrl',
     scope: {
       folderId: '=',
+      folderSlug: '=',
     },
   };
 }

public/app/core/specs/manage_dashboards.jest.ts

@@ -49,7 +49,7 @@ describe('ManageDashboards', () => {
         },
       ];
       ctrl = createCtrlWithStubs(response);
-      return ctrl.getDashboards();
+      return ctrl.refreshList();
     });
 
     it('should set checked to false on all sections and children', () => {
@@ -88,7 +88,7 @@ describe('ManageDashboards', () => {
       ];
       ctrl = createCtrlWithStubs(response);
       ctrl.folderId = 410;
-      return ctrl.getDashboards();
+      return ctrl.refreshList();
     });
 
     it('should set hide header to true on section', () => {
@@ -137,7 +137,7 @@ describe('ManageDashboards', () => {
         ctrl.canMove = true;
         ctrl.canDelete = true;
         ctrl.selectAllChecked = true;
-        return ctrl.getDashboards();
+        return ctrl.refreshList();
       });
 
       it('should set checked to false on all sections and children', () => {
@@ -567,5 +567,5 @@ function createCtrlWithStubs(searchResponse: any, tags?: any) {
     },
   };
 
-  return new ManageDashboardsCtrl({}, { getNav: () => {} }, <SearchSrv>searchSrvStub);
+  return new ManageDashboardsCtrl({}, { getNav: () => {} }, <SearchSrv>searchSrvStub, { isEditor: true });
 }

public/app/features/dashboard/folder_dashboards_ctrl.ts

@@ -3,6 +3,7 @@ import { FolderPageLoader } from './folder_page_loader';
 export class FolderDashboardsCtrl {
   navModel: any;
   folderId: number;
+  folderSlug: string;
 
   /** @ngInject */
   constructor(private backendSrv, navModelSrv, private $routeParams) {
@@ -11,7 +12,9 @@ export class FolderDashboardsCtrl {
 
       const loader = new FolderPageLoader(this.backendSrv, this.$routeParams);
 
-      loader.load(this, this.folderId, 'manage-folder-dashboards');
+      loader.load(this, this.folderId, 'manage-folder-dashboards').then(result => {
+        this.folderSlug = result.meta.slug;
+      });
     }
   }
 }

public/app/features/dashboard/partials/folder_dashboards.html

 <page-header ng-if="ctrl.navModel" model="ctrl.navModel"></page-header>
 
 <div class="page-container page-body">
-    <manage-dashboards ng-if="ctrl.folderId" folder-id="ctrl.folderId" />
+    <manage-dashboards ng-if="ctrl.folderId && ctrl.folderSlug" folder-id="ctrl.folderId" folder-slug="ctrl.folderSlug" />
 </div>