WIP: refactor folder-picker for dashlist

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

@@ -42,7 +42,7 @@ export class SearchCtrl {
     this.giveSearchFocus = 0;
     this.selectedIndex = -1;
     this.results = [];
-    this.query = { query: '', tag: [], starred: false };
+    this.query = { query: '', tag: [], starred: false, mode: 'tree' };
     this.currentSearchId = 0;
     this.ignoreClose = true;
 

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

@@ -135,6 +135,10 @@ export class DashNavCtrl {
       var uri = "data:application/json;charset=utf-8," + encodeURIComponent(html);
       var newWindow = window.open(uri);
     }
+
+    onFolderChange(parentId) {
+      this.dashboard.parentId = parentId;
+    }
 }
 
 export function dashNavDirective() {

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

@@ -5,32 +5,34 @@ import appEvents from 'app/core/app_events';
 import _ from 'lodash';
 
 export class FolderPickerCtrl {
-  dashboard: any;
   folders: Folder[];
   selectedFolder: number;
   selectedFolderSegment: any;
+  onChange: any;
+  rootFolderName: string;
 
   /** @ngInject */
   constructor(private backendSrv, private $scope, private $sce, private uiSegmentSrv) {
-    this.selectedFolderSegment = this.uiSegmentSrv.newSegment({value: 'Root', selectMode: true});
-
-    this.selectedFolder = this.dashboard.meta.parentId;
-    this.get(this.dashboard.id);
+    this.selectedFolderSegment = this.uiSegmentSrv.newSegment({value: this.rootFolderName || 'Root', selectMode: true});
+    this.get();
   }
 
-  get(dashboardId: number) {
+  get() {
     var params = {
       type: 'dash-folder',
     };
 
     return this.backendSrv.search(params).then(result => {
-      this.folders = [{id: 0, title: 'Root', type: 'dash-folder'}];
+      this.folders = [{id: 0, title: this.rootFolderName || 'Root', type: 'dash-folder'}];
       this.folders.push(...result);
-      const selected = _.find(this.folders, {id: this.selectedFolder});
 
-      this.selectedFolderSegment.value = selected.title;
-      this.selectedFolderSegment.text = selected.title;
-      this.selectedFolderSegment.html = this.$sce.trustAsHtml(selected.title);
+      if (this.selectedFolder) {
+        const selected = _.find(this.folders, {id: this.selectedFolder});
+
+        this.selectedFolderSegment.value = selected.title;
+        this.selectedFolderSegment.text = selected.title;
+        this.selectedFolderSegment.html = this.$sce.trustAsHtml(selected.title);
+      }
     });
   }
 
@@ -43,7 +45,7 @@ export class FolderPickerCtrl {
   folderChanged() {
     const selected = _.find(this.folders, {title: this.selectedFolderSegment.value});
     if (selected) {
-      this.dashboard.parentId = selected.id;
+      this.onChange(selected.id);
     }
   }
 }
@@ -66,7 +68,11 @@ export function folderPicker() {
     controller: FolderPickerCtrl,
     bindToController: true,
     controllerAs: 'ctrl',
-    scope: { dashboard: "=" }
+    scope: {
+      selectedFolder: "<",
+      onChange: "<",
+      rootFolderName: "@"
+    }
   };
 }
 

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

@@ -45,7 +45,7 @@
 				</div>
 			</div>
 
-      <folder-picker ng-if="!dashboardMeta.isFolder" dashboard="dashboard"></folder-picker>
+      <folder-picker ng-if="!dashboardMeta.isFolder" selected-folder="dashboard.meta.parentId" on-change="onFolderChange"></folder-picker>
 		</div>
 
     <div class="section">

public/app/features/dashboard/save_as_modal.ts

@@ -66,6 +66,10 @@ export class SaveDashboardAsModalCtrl {
       this.save();
     }
   }
+
+  onFolderChange(parentId) {
+    this.clone.parentId = parentId;
+  }
 }
 
 export function saveDashboardAsDirective() {

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

@@ -22,6 +22,11 @@
       <input type="text" class="gf-form-input" placeholder="title query" ng-model="ctrl.panel.query" ng-change="ctrl.refresh()" ng-model-onblur>
     </div>
 
+    <div class="gf-form">
+      <span class="gf-form-label width-6">Folder</span>
+      <folder-picker on-change="ctrl.onFolderChange" root-folder-name="All"></folder-picker>
+    </div>
+
     <div class="gf-form">
       <span class="gf-form-label width-6">Tags</span>
       <bootstrap-tagsinput ng-model="ctrl.panel.tags" tagclass="label label-tag" placeholder="add tags" on-tags-updated="ctrl.refresh()">

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

@@ -12,6 +12,7 @@ class DashListCtrl extends PanelCtrl {
   modes: any[];
 
   panelDefaults = {
+    folder: '',
     query: '',
     limit: 10,
     tags: [],
@@ -19,6 +20,7 @@ class DashListCtrl extends PanelCtrl {
     search: false,
     starred: true,
     headings: true,
+    folderId: 0
   };
 
   /** @ngInject */
@@ -87,6 +89,7 @@ class DashListCtrl extends PanelCtrl {
       limit: this.panel.limit,
       query: this.panel.query,
       tag: this.panel.tags,
+      folderId: this.panel.folderId
     };
 
     return this.backendSrv.search(params).then(result => {
@@ -123,6 +126,11 @@ class DashListCtrl extends PanelCtrl {
       });
     });
   }
+
+  onFolderChange(parentId) {
+    this.$scope.$parent.ctrl.panel.folderId = parentId;
+    this.$scope.$parent.ctrl.refresh();
+  }
 }
 
 export {DashListCtrl, DashListCtrl as PanelCtrl};