From d081f852890a1f4b9beab8486496fc7bb843b2c6 Mon Sep 17 00:00:00 2001
From: Daniel Lee <dan.limerick@gmail.com>
Date: Wed, 31 May 2017 23:25:07 +0200
Subject: [PATCH] WIP: use metric-segment for folder picker

---
 .../dashboard/folder_picker/picker.html       |  6 +++--
 .../dashboard/folder_picker/picker.ts         | 23 +++++++++++++++----
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/public/app/features/dashboard/folder_picker/picker.html b/public/app/features/dashboard/folder_picker/picker.html
index cb0c68ae884..0659fcd5700 100644
--- a/public/app/features/dashboard/folder_picker/picker.html
+++ b/public/app/features/dashboard/folder_picker/picker.html
@@ -1,6 +1,8 @@
 <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 class="dropdown">
+    <metric-segment segment="ctrl.selectedFolderSegment"
+                    get-options="ctrl.getOptions()"
+                    on-change="ctrl.folderChanged()"></metric-segment>
   </div>
 </div>
diff --git a/public/app/features/dashboard/folder_picker/picker.ts b/public/app/features/dashboard/folder_picker/picker.ts
index 6d718d75011..41892c81b31 100644
--- a/public/app/features/dashboard/folder_picker/picker.ts
+++ b/public/app/features/dashboard/folder_picker/picker.ts
@@ -8,12 +8,14 @@ export class FolderPickerCtrl {
   dashboard: any;
   folders: Folder[];
   selectedFolder: number;
+  selectedFolderSegment: any;
 
   /** @ngInject */
-  constructor(private backendSrv, private $scope, $sce) {
-    this.get(this.dashboard.id);
+  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.folders = [{id: 0, title: 'Root', type: 'dash-folder'}];
+    this.get(this.dashboard.id);
   }
 
   get(dashboardId: number) {
@@ -22,12 +24,25 @@ export class FolderPickerCtrl {
     };
 
     return this.backendSrv.search(params).then(result => {
+      this.folders = [{id: 0, title: '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);
     });
   }
 
+  getOptions() {
+    return Promise.resolve(this.folders.map(folder => {
+      return this.uiSegmentSrv.newSegment(folder.title);
+    }));
+  }
+
   folderChanged() {
-    this.dashboard.parentId = this.selectedFolder;
+    const selected = _.find(this.folders, {title: this.selectedFolderSegment.value});
+    this.dashboard.parentId = selected.id;
   }
 }