dashfolder: settings page for folder

with rename and delete. Fixes #10120

public/app/core/routes/routes.ts

@@ -83,6 +83,11 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
     controller : 'FolderPermissionsCtrl',
     controllerAs: 'ctrl',
   })
+  .when('/dashboards/folder/:folderId/:type/:slug/settings', {
+    templateUrl: 'public/app/features/dashboard/partials/folder_settings.html',
+    controller : 'FolderSettingsCtrl',
+    controllerAs: 'ctrl',
+  })
   .when('/dashboards/folder/:folderId/:type/:slug', {
     templateUrl: 'public/app/features/dashboard/partials/folder_dashboards.html',
     controller : 'FolderDashboardsCtrl',

public/app/features/dashboard/all.ts

@@ -32,11 +32,13 @@ import coreModule from 'app/core/core_module';
 import {DashboardListCtrl} from './dashboard_list_ctrl';
 import {FolderDashboardsCtrl} from './folder_dashboards_ctrl';
 import {FolderPermissionsCtrl} from './folder_permissions_ctrl';
+import {FolderSettingsCtrl} from './folder_settings_ctrl';
 import {DashboardImportCtrl} from './dashboard_import_ctrl';
 import {CreateFolderCtrl} from './create_folder_ctrl';
 
 coreModule.controller('DashboardListCtrl', DashboardListCtrl);
 coreModule.controller('FolderDashboardsCtrl', FolderDashboardsCtrl);
 coreModule.controller('FolderPermissionsCtrl', FolderPermissionsCtrl);
+coreModule.controller('FolderSettingsCtrl', FolderSettingsCtrl);
 coreModule.controller('DashboardImportCtrl', DashboardImportCtrl);
 coreModule.controller('CreateFolderCtrl', CreateFolderCtrl);

public/app/features/dashboard/folder_page_loader.ts

@@ -29,12 +29,19 @@ export class FolderPageLoader {
             id: 'manage-folder-permissions',
             text: 'Permissions',
             url: '/dashboards/permissions'
+          },
+          {
+            active: activeChildId === 'manage-folder-settings',
+            icon: 'fa fa-fw fa-cog',
+            id: 'manage-folder-settings',
+            text: 'Settings',
+            url: '/dashboards/settings'
           }
         ]
       }
     };
 
-    this.backendSrv.getDashboard(this.$routeParams.type, this.$routeParams.slug).then(result => {
+    return this.backendSrv.getDashboard(this.$routeParams.type, this.$routeParams.slug).then(result => {
       const folderTitle = result.dashboard.title;
       ctrl.navModel.main.text = '';
       ctrl.navModel.main.breadcrumbs = [
@@ -42,13 +49,22 @@ export class FolderPageLoader {
         { title: folderTitle }
       ];
 
-      const folderUrl = `/dashboards/folder/${folderId}/${result.meta.type}/${result.meta.slug}`;
+      const folderUrl = this.createFolderUrl(folderId, result.meta.type, result.meta.slug);
 
       const dashTab = _.find(ctrl.navModel.main.children, { id: 'manage-folder-dashboards' });
       dashTab.url = folderUrl;
 
       const permTab = _.find(ctrl.navModel.main.children, { id: 'manage-folder-permissions' });
       permTab.url = folderUrl + '/permissions';
+
+      const settingsTab = _.find(ctrl.navModel.main.children, { id: 'manage-folder-settings' });
+      settingsTab.url = folderUrl + '/settings';
+
+      return result;
     });
   }
+
+  createFolderUrl(folderId: number, type: string, slug: string) {
+    return `/dashboards/folder/${folderId}/${type}/${slug}`;
+  }
 }

public/app/features/dashboard/folder_settings_ctrl.ts

+import {FolderPageLoader} from './folder_page_loader';
+import appEvents from 'app/core/app_events';
+
+export class FolderSettingsCtrl {
+  folderPageLoader: FolderPageLoader;
+  navModel: any;
+  folderId: number;
+  canSave = false;
+  dashboard: any;
+  meta: any;
+
+  /** @ngInject */
+  constructor(private backendSrv, navModelSrv, private $routeParams, private $location) {
+    if (this.$routeParams.folderId && this.$routeParams.type && this.$routeParams.slug) {
+      this.folderId = $routeParams.folderId;
+
+      this.folderPageLoader = new FolderPageLoader(this.backendSrv, this.$routeParams);
+      this.folderPageLoader.load(this, this.folderId, 'manage-folder-settings')
+      .then(result => {
+        this.dashboard = result.dashboard;
+        this.meta = result.meta;
+        this.canSave = result.meta.canSave;
+      });
+    }
+  }
+
+  save() {
+    return this.backendSrv.saveDashboard(this.dashboard, {overwrite: false})
+      .then(result => {
+        var folderUrl = this.folderPageLoader.createFolderUrl(this.folderId, this.meta.type, result.slug);
+        if (folderUrl !== this.$location.path()) {
+          this.$location.url(folderUrl + '/settings');
+        }
+
+        appEvents.emit('dashboard-saved');
+        appEvents.emit('alert-success', ['Folder saved']);
+      })
+      .catch(this.handleSaveFolderError);
+  }
+
+  delete(evt) {
+    if (evt) {
+      evt.stopPropagation();
+      evt.preventDefault();
+    }
+
+    appEvents.emit('confirm-modal', {
+      title: 'Delete',
+      text: `Do you want to delete this folder and all its dashboards?`,
+      icon: 'fa-trash',
+      yesText: 'Delete',
+      onConfirm: () => {
+        return this.backendSrv.delete(`/api/dashboards/${this.meta.type}/${this.meta.slug}`).then(() => {
+          appEvents.emit('alert-success', ['Folder deleted']);
+          this.$location.url('/dashboards');
+        });
+      }
+    });
+  }
+
+  handleSaveFolderError(err) {
+    if (err.data && err.data.status === 'version-mismatch') {
+      err.isHandled = true;
+
+      appEvents.emit('confirm-modal', {
+        title: 'Conflict',
+        text: 'Someone else has updated this folder.',
+        text2: 'Would you still like to save this folder?',
+        yesText: 'Save & Overwrite',
+        icon: 'fa-warning',
+        onConfirm: () => {
+          this.backendSrv.saveDashboard(this.dashboard, {overwrite: true});
+        }
+      });
+    }
+
+    if (err.data && err.data.status === 'name-exists') {
+      err.isHandled = true;
+
+      appEvents.emit('alert-error', ['A folder or dashboard with this name exists already.']);
+    }
+  }
+}

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

+<page-header model="ctrl.navModel"></page-header>
+
+<div class="page-container page-body">
+
+    <div class="section gf-form-group">
+      <h1 class="section-heading">Folder Settings</h1>
+      <form name="folderSettingsForm" ng-submit="ctrl.save()">
+        <div class="gf-form">
+          <label class="gf-form-label width-7">Name</label>
+          <input type="text" class="gf-form-input width-30" ng-model='ctrl.dashboard.title'></input>
+        </div>
+        <div class="gf-form-button-row">
+          <button type="submit" class="btn btn-success" ng-disabled="!ctrl.canSave">
+            <i class="fa fa-trash"></i>
+            Save
+          </button>
+          <button class="btn btn-danger" ng-click="ctrl.delete($event)" ng-disabled="!ctrl.canSave">
+            <i class="fa fa-trash"></i>
+            Delete
+          </button>
+        </div>
+      </form>
+    </div>
+</div>