Various dashboard folders improvements (#10309)

* dashfolders: fix url for create dashboard from manage dashboards

Don't include folderId querystring if you don't manage a folder and
creating a new dashboard from there.

* dashfolders: don't store folderId in dashboard model

Use folderId from meta instead
#10307

* dashfolders: minor ux fix

* dashfolders: minor fix for edit folder title

public/app/core/components/manage_dashboards/manage_dashboards.html

@@ -5,7 +5,7 @@
       <i class="gf-form-input-icon fa fa-search"></i>
     </label>
     <div class="page-action-bar__spacer"></div>
-    <a class="btn btn-success" href="/dashboard/new?folderId={{ctrl.folderId}}">
+    <a class="btn btn-success" ng-href="{{ctrl.createDashboardUrl()}}">
       <i class="fa fa-plus"></i>
       Dashboard
     </a>
@@ -60,22 +60,20 @@
         switch-class="gf-form-switch--transparent gf-form-switch--search-result-filter-row__checkbox"
       />
       <div class="search-results-filter-row__filters">
-        <div class="gf-form-select-wrapper">
+        <div class="gf-form-select-wrapper" ng-show="!(ctrl.canMove || ctrl.canDelete)">
           <select
             class="search-results-filter-row__filters-item gf-form-input"
             ng-model="ctrl.selectedStarredFilter"
             ng-options="t.text disable when t.disabled for t in ctrl.starredFilterOptions"
             ng-change="ctrl.onStarredFilterChange()"
-            ng-show="!(ctrl.canMove || ctrl.canDelete)"
           />
         </div>
-        <div class="gf-form-select-wrapper">
+        <div class="gf-form-select-wrapper" ng-show="!(ctrl.canMove || ctrl.canDelete)">
           <select
             class="search-results-filter-row__filters-item gf-form-input"
             ng-model="ctrl.selectedTagFilter"
             ng-options="t.term disable when t.disabled for t in ctrl.tagFilterOptions"
             ng-change="ctrl.onTagFilterChange()"
-            ng-show="!(ctrl.canMove || ctrl.canDelete)"
           />
         </div>
         <div class="gf-form-button-row" ng-show="ctrl.canMove || ctrl.canDelete">

public/app/core/components/manage_dashboards/manage_dashboards.ts

@@ -297,6 +297,16 @@ export class ManageDashboardsCtrl {
     this.query.starred = false;
     this.getDashboards();
   }
+
+  createDashboardUrl() {
+    let url = '/dashboard/new';
+
+    if (this.folderId) {
+      url += `?folderId=${this.folderId}`;
+    }
+
+    return url;
+  }
 }
 
 export function manageDashboardsDirective() {

public/app/core/routes/dashboard_loaders.ts

@@ -34,7 +34,12 @@ export class NewDashboardCtrl {
   constructor($scope, $routeParams) {
     $scope.initDashboard(
       {
-        meta: { canStar: false, canShare: false, isNew: true },
+        meta: {
+          canStar: false,
+          canShare: false,
+          isNew: true,
+          folderId: Number($routeParams.folderId),
+        },
         dashboard: {
           title: 'New dashboard',
           panels: [
@@ -44,7 +49,6 @@ export class NewDashboardCtrl {
               title: 'Panel Title',
             },
           ],
-          folderId: Number($routeParams.folderId),
         },
       },
       $scope

public/app/core/services/backend_srv.ts

@@ -242,7 +242,7 @@ export class BackendSrv {
 
     return this.post('/api/dashboards/db/', {
       dashboard: dash,
-      folderId: dash.folderId,
+      folderId: options.folderId,
       overwrite: options.overwrite === true,
       message: options.message || '',
     });
@@ -324,20 +324,22 @@ export class BackendSrv {
         return;
       }
 
-      model.folderId = toFolder.id;
-      model.meta.folderId = toFolder.id;
-      model.meta.folderTitle = toFolder.title;
       const clone = model.getSaveModelClone();
+      let options = {
+        folderId: toFolder.id,
+        overwrite: false,
+      };
 
-      this.saveDashboard(clone, {})
+      this.saveDashboard(clone, options)
         .then(() => {
           deferred.resolve({ succeeded: true });
         })
         .catch(err => {
           if (err.data && err.data.status === 'plugin-dashboard') {
             err.isHandled = true;
+            options.overwrite = true;
 
-            this.saveDashboard(clone, { overwrite: true })
+            this.saveDashboard(clone, options)
               .then(() => {
                 deferred.resolve({ succeeded: true });
               })

public/app/features/dashboard/dashboard_model.ts

@@ -31,7 +31,6 @@ export class DashboardModel {
   revision: number;
   links: any;
   gnetId: any;
-  folderId: number;
   panels: PanelModel[];
 
   // ------------------
@@ -76,7 +75,6 @@ export class DashboardModel {
     this.version = data.version || 0;
     this.links = data.links || [];
     this.gnetId = data.gnetId || null;
-    this.folderId = data.folderId || null;
     this.panels = _.map(
       data.panels || [],
       panelData => new PanelModel(panelData)

public/app/features/dashboard/dashboard_srv.ts

@@ -84,6 +84,9 @@ export class DashboardSrv {
   }
 
   save(clone, options) {
+    options = options || {};
+    options.folderId = this.dash.meta.folderId;
+
     return this.backendSrv
       .saveDashboard(clone, options)
       .then(this.postSave.bind(this, clone))

public/app/features/dashboard/folder_settings_ctrl.ts

@@ -8,6 +8,8 @@ export class FolderSettingsCtrl {
   canSave = false;
   dashboard: any;
   meta: any;
+  title: string;
+  hasChanged: boolean;
 
   /** @ngInject */
   constructor(
@@ -29,11 +31,20 @@ export class FolderSettingsCtrl {
           this.dashboard = result.dashboard;
           this.meta = result.meta;
           this.canSave = result.meta.canSave;
+          this.title = this.dashboard.title;
         });
     }
   }
 
   save() {
+    this.titleChanged();
+
+    if (!this.hasChanged) {
+      return;
+    }
+
+    this.dashboard.title = this.title.trim();
+
     return this.backendSrv
       .saveDashboard(this.dashboard, { overwrite: false })
       .then(result => {
@@ -52,6 +63,11 @@ export class FolderSettingsCtrl {
       .catch(this.handleSaveFolderError);
   }
 
+  titleChanged() {
+    this.hasChanged =
+      this.dashboard.title.toLowerCase() !== this.title.trim().toLowerCase();
+  }
+
   delete(evt) {
     if (evt) {
       evt.stopPropagation();

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

@@ -7,10 +7,10 @@
 		<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>
+				<input type="text" class="gf-form-input width-30" ng-model='ctrl.title' ng-change="ctrl.titleChanged()"></input>
 			</div>
 			<div class="gf-form-button-row">
-				<button type="submit" class="btn btn-success" ng-disabled="!ctrl.canSave">
+				<button type="submit" class="btn btn-success" ng-disabled="!ctrl.canSave || !ctrl.hasChanged">
 					<i class="fa fa-trash"></i>
 					Save
 				</button>

public/app/features/dashboard/save_as_modal.ts

@@ -52,7 +52,7 @@ export class SaveDashboardAsModalCtrl {
     this.clone.title += ' Copy';
     this.clone.editable = true;
     this.clone.hideControls = false;
-    this.folderId = dashboard.folderId;
+    this.folderId = dashboard.meta.folderId;
 
     // remove alerts if source dashboard is already persisted
     // do not want to create alert dupes

public/app/features/dashboard/settings/settings.ts

@@ -185,7 +185,6 @@ export class SettingsCtrl {
   }
 
   onFolderChange(folder) {
-    this.dashboard.folderId = folder.id;
     this.dashboard.meta.folderId = folder.id;
     this.dashboard.meta.folderTitle = folder.title;
   }