WIP: fix folder-picker for dashlist

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

@@ -5,11 +5,13 @@ import appEvents from 'app/core/app_events';
 import _ from 'lodash';
 import _ from 'lodash';
 
 
 export class FolderPickerCtrl {
 export class FolderPickerCtrl {
-  folders: Folder[];
-  selectedOption: any;
   initialTitle: string;
   initialTitle: string;
-  onChange: any;
+  initialFolderId: number;
   labelClass: string;
   labelClass: string;
+  onChange: any;
+  rootName = 'Root';
+
+  private folder: any;
 
 
   /** @ngInject */
   /** @ngInject */
   constructor(private backendSrv, private $scope, private $sce) {
   constructor(private backendSrv, private $scope, private $sce) {
@@ -17,7 +19,13 @@ export class FolderPickerCtrl {
       this.labelClass = "width-7";
       this.labelClass = "width-7";
     }
     }
 
 
-    this.selectedOption = {text: this.initialTitle, value: null};
+    if (this.initialFolderId > 0) {
+      this.getOptions('').then(result => {
+        this.folder = _.find(result, {value: this.initialFolderId});
+      });
+    } else {
+      this.folder = {text: this.initialTitle, value: null};
+    }
   }
   }
 
 
   getOptions(query) {
   getOptions(query) {
@@ -28,37 +36,28 @@ export class FolderPickerCtrl {
 
 
     return this.backendSrv.search(params).then(result => {
     return this.backendSrv.search(params).then(result => {
       if (query === "") {
       if (query === "") {
-        result.unshift({title: "Root", value: 0});
+        result.unshift({title: this.rootName, value: 0});
       }
       }
+
       return _.map(result, item => {
       return _.map(result, item => {
         return {text: item.title, value: item.id};
         return {text: item.title, value: item.id};
       });
       });
     });
     });
   }
   }
 
 
-  folderChanged(option) {
+  onFolderChange(option) {
     this.onChange({$folder: {id: option.value, title: option.text}});
     this.onChange({$folder: {id: option.value, title: option.text}});
   }
   }
-}
 
 
-export interface Folder {
-  id: number;
-  title: string;
-  uri?: string;
-  type: string;
-  tags?: string[];
-  isStarred?: boolean;
-  parentId?: number;
-  dashboards?: any;
 }
 }
 
 
 const template = `
 const template = `
 <div class="gf-form">
 <div class="gf-form">
   <label class="gf-form-label {{ctrl.labelClass}}">Folder</label>
   <label class="gf-form-label {{ctrl.labelClass}}">Folder</label>
   <div class="dropdown">
   <div class="dropdown">
-    <gf-form-dropdown model="ctrl.selectedOption"
+    <gf-form-dropdown model="ctrl.folder"
       get-options="ctrl.getOptions($query)"
       get-options="ctrl.getOptions($query)"
-      on-change="ctrl.folderChanged($option)">
+      on-change="ctrl.onFolderChange($option)">
     </gf-form-dropdown>
     </gf-form-dropdown>
   </div>
   </div>
 </div>
 </div>
@@ -73,8 +72,10 @@ export function folderPicker() {
     controllerAs: 'ctrl',
     controllerAs: 'ctrl',
     scope: {
     scope: {
       initialTitle: "<",
       initialTitle: "<",
-      onChange: "&",
-      labelClass: "@",
+      initialFolderId: '<',
+      labelClass: '@',
+      rootName: '@',
+      onChange: '&'
     }
     }
   };
   };
 }
 }

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

@@ -23,7 +23,8 @@
     </div>
     </div>
 
 
     <div class="gf-form">
     <div class="gf-form">
-      <folder-picker  initial-text="ctrl.folderTitle"
+      <folder-picker  root-name="All"
+                      initial-folder-id="ctrl.panel.folderId"
 											on-change="ctrl.onFolderChange($folder)"
 											on-change="ctrl.onFolderChange($folder)"
 											label-class="width-6">
 											label-class="width-6">
 			</folder-picker>
 			</folder-picker>

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

@@ -10,7 +10,6 @@ class DashListCtrl extends PanelCtrl {
 
 
   groups: any[];
   groups: any[];
   modes: any[];
   modes: any[];
-  folderTitle: any;
 
 
   panelDefaults = {
   panelDefaults = {
     query: '',
     query: '',
@@ -66,10 +65,6 @@ class DashListCtrl extends PanelCtrl {
     this.editorTabIndex = 1;
     this.editorTabIndex = 1;
     this.modes = ['starred', 'search', 'recently viewed'];
     this.modes = ['starred', 'search', 'recently viewed'];
     this.addEditorTab('Options', 'public/app/plugins/panel/dashlist/editor.html');
     this.addEditorTab('Options', 'public/app/plugins/panel/dashlist/editor.html');
-
-    if (!this.panel.folderId) {
-      this.folderTitle = "All";
-    }
   }
   }
 
 
   onRefresh() {
   onRefresh() {
@@ -131,9 +126,8 @@ class DashListCtrl extends PanelCtrl {
     });
     });
   }
   }
 
 
-  onFolderChange(folder) {
+  onFolderChange(folder: any) {
     this.panel.folderId = folder.id;
     this.panel.folderId = folder.id;
-    this.panel.folderTitle = folder.title;
     this.refresh();
     this.refresh();
   }
   }
 }
 }