WIP: use metric-segment for folder picker

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

 <div class="gf-form">
 <div class="gf-form">
   <label class="gf-form-label width-7">Folder</label>
   <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>
 </div>
 </div>

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

@@ -8,12 +8,14 @@ export class FolderPickerCtrl {
   dashboard: any;
   dashboard: any;
   folders: Folder[];
   folders: Folder[];
   selectedFolder: number;
   selectedFolder: number;
+  selectedFolderSegment: any;
 
 
   /** @ngInject */
   /** @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.selectedFolder = this.dashboard.meta.parentId;
-    this.folders = [{id: 0, title: 'Root', type: 'dash-folder'}];
+    this.get(this.dashboard.id);
   }
   }
 
 
   get(dashboardId: number) {
   get(dashboardId: number) {
@@ -22,12 +24,25 @@ export class FolderPickerCtrl {
     };
     };
 
 
     return this.backendSrv.search(params).then(result => {
     return this.backendSrv.search(params).then(result => {
+      this.folders = [{id: 0, title: 'Root', type: 'dash-folder'}];
       this.folders.push(...result);
       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() {
   folderChanged() {
-    this.dashboard.parentId = this.selectedFolder;
+    const selected = _.find(this.folders, {title: this.selectedFolderSegment.value});
+    this.dashboard.parentId = selected.id;
   }
   }
 }
 }