WIP: Create new dashboard button in dash search

public/app/core/components/search/search.html

@@ -94,9 +94,15 @@
 				<i class="fa fa-plus"></i>&nbsp; New Dashboard
 				<i class="fa fa-plus"></i>&nbsp; New Dashboard
 			</a>
 			</a>
 
 
-			<a class="btn btn-inverse" href="dashboard/new/?editview=import" ng-show="ctrl.contextSrv.isEditor" ng-click="ctrl.isOpen = false;">
-				<i class="fa fa-upload"></i>&nbsp; Import Dashboard
-			</a>
+    <a class="btn btn-inverse" ng-click="ctrl.showNewFolderModal()" ng-show="ctrl.contextSrv.isEditor" ng-click="ctrl.isOpen = false;">
+			<i class="fa fa-plus"></i>
+			Create New Folder
+		</a>
+
+		<a class="btn btn-inverse" href="dashboard/new/?editview=import" ng-show="ctrl.contextSrv.isEditor" ng-click="ctrl.isOpen = false;">
+			<i class="fa fa-upload"></i>
+			>&nbsp; Import Dashboard
+		</a>
 
 
 			<a class="search-button-row-explore-link" target="_blank" href="https://grafana.com/dashboards?utm_source=grafana_search">
 			<a class="search-button-row-explore-link" target="_blank" href="https://grafana.com/dashboards?utm_source=grafana_search">
 				Find <img src="public/img/icn-dashboard-tiny.svg" width="14" /> dashboards on Grafana.com
 				Find <img src="public/img/icn-dashboard-tiny.svg" width="14" /> dashboards on Grafana.com

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

@@ -158,6 +158,13 @@ export class SearchCtrl {
     this.search();
     this.search();
   }
   }
 
 
+  showNewFolderModal() {
+    this.$scope.appEvent('show-modal', {
+      templateHtml: '<folder-modal></folder-modal>',
+      modalClass: 'modal--narrow'
+    });
+  }
+
   search() {
   search() {
     this.showImport = false;
     this.showImport = false;
     this.selectedIndex = 0;
     this.selectedIndex = 0;

public/app/core/services/backend_srv.ts

@@ -210,6 +210,14 @@ export class BackendSrv {
       message: options.message || '',
       message: options.message || '',
     });
     });
   }
   }
+
+  saveDashboardFolder(name) {
+    const dash = {
+      title: name
+    };
+
+    return this.post('/api/dashboards/db/', {dashboard: dash, isFolder: true, overwrite: false});
+  }
 }
 }
 
 
 coreModule.service('backendSrv', BackendSrv);
 coreModule.service('backendSrv', BackendSrv);

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

@@ -37,10 +37,6 @@ export class AclCtrl {
       this.get(permission.dashboardId);
       this.get(permission.dashboardId);
     });
     });
   }
   }
-
-  dismiss() {
-    appEvents.emit('hide-modal');
-  }
 }
 }
 
 
 export function aclSettings() {
 export function aclSettings() {

public/app/features/dashboard/all.js

@@ -26,4 +26,5 @@ define([
   './repeat_option/repeat_option',
   './repeat_option/repeat_option',
   './acl/acl',
   './acl/acl',
   './folder_picker/picker',
   './folder_picker/picker',
+  './folder_modal/folder'
 ], function () {});
 ], function () {});

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

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

public/app/features/dashboard/folder_modal/folder.html

+<div class="modal-body">
+  <div class="modal-header">
+    <h2 class="modal-header-title">
+      <span class="p-l-1">Create Folder</span>
+    </h2>
+
+    <a class="modal-header-close" ng-click="ctrl.dismiss();">
+      <i class="fa fa-remove"></i>
+    </a>
+  </div>
+
+  <div class="modal-content folder-modal">
+    <div class="p-t-2">
+      <div class="gf-form">
+        <span class="gf-form-label width-10">Folder Name</span>
+        <input type="text" ng-model="ctrl.title" required give-focus="true" class="gf-form-input max-width-14" placeholder="Enter folder name" />
+      </div>
+    </div>
+    <div class="gf-form-button-row text-center">
+      <a type="submit" class="btn btn-success" ng-click="ctrl.create()">Create</a>
+      <a class="btn-text" ng-click="dismiss();">Cancel</a>
+    </div>
+  </div>
+</div>

public/app/features/dashboard/folder_modal/folder.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 FolderCtrl {
+  title: string;
+
+  /** @ngInject */
+  constructor(private backendSrv, private $scope, $sce) {
+  }
+
+  create() {
+    if (!this.title || this.title.trim().length === 0) {
+      return;
+    }
+
+    const title = this.title.trim();
+
+
+    return this.backendSrv.saveDashboardFolder(title).then((result) => {
+      appEvents.emit('alert-success', ['Dashboard saved', 'Saved as ' + title]);
+
+      appEvents.emit('dashboard-saved', result);
+      this.dismiss();
+    });
+  }
+
+  dismiss() {
+    appEvents.emit('hide-modal');
+  }
+}
+
+export function folderModal() {
+  return {
+    restrict: 'E',
+    templateUrl: 'public/app/features/dashboard/folder_modal/folder.html',
+    controller: FolderCtrl,
+    bindToController: true,
+    controllerAs: 'ctrl',
+  };
+}
+
+coreModule.directive('folderModal', folderModal);