WIP: permissions moved to settings tab. Adds folder dropdown to general settings tab

public/app/core/services/backend_srv.ts

@@ -205,6 +205,7 @@ export class BackendSrv {
 
     return this.post('/api/dashboards/db/', {
       dashboard: dash,
+      parentId: dash.parentId,
       overwrite: options.overwrite === true,
       message: options.message || '',
     });

public/app/features/dashboard/acl/acl.html

-<div class="modal-body">
-	<div class="modal-header">
-		<h2 class="modal-header-title">
-			<i class="fa fa-share"></i>
-			<span class="p-l-1">Dashboard Permissions</span>
-		</h2>
-
-    <a class="modal-header-close" ng-click="ctrl.dismiss();">
-			<i class="fa fa-remove"></i>
-		</a>
-	</div>
-
-	<div class="modal-content acl-modal">
+<div class="editor-row">
   <div class="permissionlist">
     <div class="permissionlist__section">
       <div class="permissionlist__section-header">
@@ -53,5 +41,4 @@
       </div>
     </div>
   </div>
-  </div>
 </div>

public/app/features/dashboard/acl/acl.ts

@@ -6,7 +6,7 @@ import _ from 'lodash';
 
 export class AclCtrl {
   tabIndex: any;
-  dashboardId: number;
+  dashboard: any;
   userPermissions: Permission[];
   userGroupPermissions: Permission[];
 
@@ -15,7 +15,7 @@ export class AclCtrl {
     this.tabIndex = 0;
     this.userPermissions = [];
     this.userGroupPermissions = [];
-    this.get(this.$scope.dashboardId);
+    this.get(this.dashboard.id);
   }
 
   get(dashboardId: number) {
@@ -43,13 +43,14 @@ export class AclCtrl {
   }
 }
 
-export function aclModal() {
+export function aclSettings() {
   return {
     restrict: 'E',
     templateUrl: 'public/app/features/dashboard/acl/acl.html',
     controller: AclCtrl,
     bindToController: true,
-    controllerAs: 'ctrl'
+    controllerAs: 'ctrl',
+    scope: { dashboard: "=" }
   };
 }
 
@@ -67,4 +68,4 @@ export interface Permission {
   permissions: number[];
 }
 
-coreModule.directive('aclModal', aclModal);
+coreModule.directive('aclSettings', aclSettings);

public/app/features/dashboard/all.js

@@ -25,4 +25,5 @@ define([
   './row/row_ctrl',
   './repeat_option/repeat_option',
   './acl/acl',
+  './folder_picker/picker',
 ], function () {});

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

@@ -47,14 +47,14 @@ export class DashNavCtrl {
       appEvents.emit('show-modal', {templateHtml: '<help-modal></help-modal>'});
     }
 
-    showAclModal() {
-      var modalScope = this.$scope.$new();
-      modalScope.dashboardId = this.dashboard.id;
-      appEvents.emit('show-modal', {
-        templateHtml: '<acl-modal></acl-modal>',
-        scope: modalScope
-      });
-    }
+    // $scope.showAclModal = function() {
+    //   var modalScope = $scope.$new();
+    //   modalScope.dashboardId = $scope.dashboard.id;
+    //   $scope.appEvent('show-modal', {
+    //     templateHtml: '<acl-modal></acl-modal>',
+    //     scope: modalScope
+    //   });
+    // };
 
     starDashboard() {
       if (this.dashboard.meta.isStarred) {

public/app/features/dashboard/folder_picker/picker.html

+<div class="gf-form">
+  <label class="gf-form-label width-7">Folder</label>
+  <div class="gf-form-select-wrapper">
+    <select ng-model="ctrl.selectedFolder" class='gf-form-input' ng-options="f.id as f.title for f in ctrl.folders" ng-change="ctrl.folderChanged()"></select>
+  </div>
+</div>

public/app/features/dashboard/folder_picker/picker.ts

+///<reference path="../../../headers/common.d.ts" />
+
+import coreModule from 'app/core/core_module';
+import appEvents from 'app/core/app_events';
+import _ from 'lodash';
+
+export class FolderPickerCtrl {
+  dashboard: any;
+  folders: any[];
+  selectedFolder: number;
+
+  /** @ngInject */
+  constructor(private backendSrv, private $scope, $sce) {
+    this.get(this.dashboard.id);
+    this.selectedFolder = this.dashboard.meta.parentId;
+  }
+
+  get(dashboardId: number) {
+    var params = {
+      type: 'dash-folder',
+    };
+
+    return this.backendSrv.search(params).then(result => {
+      this.folders = result;
+    });
+  }
+
+  folderChanged() {
+    if (this.selectedFolder > 0) {
+      this.dashboard.parentId = this.selectedFolder;
+    }
+  }
+}
+
+export function folderPicker() {
+  return {
+    restrict: 'E',
+    templateUrl: 'public/app/features/dashboard/folder_picker/picker.html',
+    controller: FolderPickerCtrl,
+    bindToController: true,
+    controllerAs: 'ctrl',
+    scope: { dashboard: "=" }
+  };
+}
+
+coreModule.directive('folderPicker', folderPicker);

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

@@ -4,7 +4,7 @@
 	</h2>
 
 	<ul class="gf-tabs">
-		<li class="gf-tabs-item" ng-repeat="tab in ::['General', 'Rows', 'Links', 'Time picker', 'Metadata']">
+		<li class="gf-tabs-item" ng-repeat="tab in ::['General', 'Rows', 'Links', 'Time picker', 'Metadata', 'Permissions']">
 			<a class="gf-tabs-link" ng-click="editor.index = $index" ng-class="{active: editor.index === $index}">
 				{{::tab}}
 			</a>
@@ -44,6 +44,8 @@
 					<select ng-model="dashboard.timezone" class='gf-form-input' ng-options="f.value as f.text for f in [{value: '', text: 'Default'}, {value: 'browser', text: 'Local browser time'},{value: 'utc', text: 'UTC'}]" ng-change="timezoneChanged()"></select>
 				</div>
 			</div>
+
+      <folder-picker dashboard="dashboard"></folder-picker>
 		</div>
 
     <div class="section">
@@ -140,4 +142,8 @@
 			</div>
 		</div>
 	</div>
+
+  <div ng-if="editor.index == 5">
+		<acl-settings dashboard="dashboard"></acl-settings>
+	</div>
 </div>