dashfolders: use validation service for folder creation and dashboard import. #10197

public/app/core/routes/routes.ts

@@ -65,7 +65,7 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
     })
     .when("/dashboard/import", {
       templateUrl:
-        "public/app/features/dashboard/partials/dashboardImport.html",
+        "public/app/features/dashboard/partials/dashboard_import.html",
       controller: "DashboardImportCtrl",
       controllerAs: "ctrl"
     })

public/app/features/dashboard/create_folder_ctrl.ts

@@ -3,23 +3,22 @@ import appEvents from "app/core/app_events";
 export class CreateFolderCtrl {
   title = "";
   navModel: any;
-  nameExists = false;
   titleTouched = false;
+  hasValidationError: boolean;
+  validationError: any;
 
   /** @ngInject **/
-  constructor(private backendSrv, private $location, navModelSrv) {
-    this.navModel = navModelSrv.getNav("dashboards", "manage-dashboards", 0);
+  constructor(private backendSrv, private $location, private validationSrv, navModelSrv) {
+    this.navModel = navModelSrv.getNav('dashboards', 'manage-dashboards', 0);
   }
 
   create() {
-    if (!this.title || this.title.trim().length === 0) {
+    if (this.hasValidationError) {
       return;
     }
 
-    const title = this.title.trim();
-
-    return this.backendSrv.createDashboardFolder(title).then(result => {
-      appEvents.emit("alert-success", ["Folder Created", "OK"]);
+    return this.backendSrv.createDashboardFolder(this.title).then(result => {
+      appEvents.emit('alert-success', ['Folder Created', 'OK']);
 
       var folderUrl = `/dashboards/folder/${result.dashboard.id}/${
         result.meta.slug
@@ -31,14 +30,13 @@ export class CreateFolderCtrl {
   titleChanged() {
     this.titleTouched = true;
 
-    this.backendSrv.search({ query: this.title }).then(res => {
-      this.nameExists = false;
-      for (let hit of res) {
-        if (this.title === hit.title) {
-          this.nameExists = true;
-          break;
-        }
-      }
-    });
+    this.validationSrv.validateNewDashboardOrFolderName(this.title)
+      .then(() => {
+        this.hasValidationError = false;
+      })
+      .catch(err => {
+        this.hasValidationError = true;
+        this.validationError = err.message;
+      });
   }
 }

public/app/features/dashboard/dashboard_import_ctrl.ts

@@ -13,16 +13,13 @@ export class DashboardImportCtrl {
   gnetUrl: string;
   gnetError: string;
   gnetInfo: any;
+  titleTouched: boolean;
+  hasNameValidationError: boolean;
+  nameValidationError: any;
 
   /** @ngInject */
-  constructor(
-    private backendSrv,
-    navModelSrv,
-    private $location,
-    private $scope,
-    $routeParams
-  ) {
-    this.navModel = navModelSrv.getNav("create", "import");
+  constructor(private backendSrv, private validationSrv, navModelSrv, private $location, private $scope, $routeParams) {
+    this.navModel = navModelSrv.getNav('create', 'import');
 
     this.step = 1;
     this.nameExists = false;
@@ -93,15 +90,21 @@ export class DashboardImportCtrl {
   }
 
   titleChanged() {
-    this.backendSrv.search({ query: this.dash.title }).then(res => {
-      this.nameExists = false;
-      for (let hit of res) {
-        if (this.dash.title === hit.title) {
+    this.titleTouched = true;
+    this.nameExists = false;
+
+    this.validationSrv.validateNewDashboardOrFolderName(this.dash.title)
+      .then(() => {
+        this.hasNameValidationError = false;
+      })
+      .catch(err => {
+        if (err.type === 'EXISTING') {
           this.nameExists = true;
-          break;
         }
-      }
-    });
+
+        this.hasNameValidationError = true;
+        this.nameValidationError = err.message;
+      });
   }
 
   saveDashboard() {

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

@@ -7,34 +7,25 @@
   <form name="ctrl.saveForm" ng-submit="ctrl.create()" novalidate>
 		<div class="gf-form-inline">
 			<div class="gf-form gf-form--grow">
-				<label class="gf-form-label width-10">Folder name</label>
-				<input type="text" class="gf-form-input max-width-25" ng-model="ctrl.title" give-focus="true" ng-change="ctrl.titleChanged()" ng-model-options="{ debounce: 400 }" ng-class="{'validation-error': ctrl.nameExists || !ctrl.dash.title}">
-				<label class="gf-form-label text-success" ng-if="!ctrl.nameExists && ctrl.title">
+				<label class="gf-form-label width-10">Name</label>
+				<input type="text" class="gf-form-input" ng-model="ctrl.title" give-focus="true" ng-change="ctrl.titleChanged()" ng-model-options="{ debounce: 400 }" ng-class="{'validation-error': ctrl.nameExists || !ctrl.dash.title}">
+				<label class="gf-form-label text-success" ng-if="ctrl.titleTouched && !ctrl.hasValidationError">
 					<i class="fa fa-check"></i>
 				</label>
 			</div>
 		</div>
 
-		<div class="gf-form-inline" ng-if="ctrl.nameExists">
+		<div class="gf-form-inline" ng-if="ctrl.hasValidationError">
 			<div class="gf-form offset-width-10 gf-form--grow">
 				<label class="gf-form-label text-warning gf-form-label--grow">
 					<i class="fa fa-warning"></i>
-					A Folder or Dashboard with the same name already exists
-				</label>
-			</div>
-		</div>
-
-		<div class="gf-form-inline" ng-if="!ctrl.title && ctrl.titleTouched">
-			<div class="gf-form offset-width-10 gf-form--grow">
-				<label class="gf-form-label text-warning gf-form-label--grow">
-					<i class="fa fa-warning"></i>
-					A Folder should have a name
+					{{ctrl.validationError}}
 				</label>
 			</div>
 		</div>
 
 		<div class="gf-form-button-row">
-			<button type="submit" class="btn btn-success width-12" ng-disabled="ctrl.nameExists || ctrl.title.length === 0">
+			<button type="submit" class="btn btn-success width-12" ng-disabled="!ctrl.titleTouched || ctrl.hasValidationError">
 				<i class="fa fa-save"></i> Create
 			</button>
 		</div>

public/app/features/dashboard/partials/dashboardImport.html → public/app/features/dashboard/partials/dashboard_import.html

@@ -65,26 +65,17 @@
         <div class="gf-form gf-form--grow">
           <label class="gf-form-label width-15">Name</label>
           <input type="text" class="gf-form-input" ng-model="ctrl.dash.title" give-focus="true" ng-change="ctrl.titleChanged()" ng-class="{'validation-error': ctrl.nameExists || !ctrl.dash.title}">
-          <label class="gf-form-label text-success" ng-if="!ctrl.nameExists && ctrl.dash.title">
+          <label class="gf-form-label text-success" ng-if="ctrl.titleTouched && !ctrl.hasNameValidationError">
             <i class="fa fa-check"></i>
           </label>
         </div>
       </div>
 
-      <div class="gf-form-inline" ng-if="ctrl.nameExists">
+      <div class="gf-form-inline" ng-if="ctrl.hasNameValidationError">
         <div class="gf-form offset-width-15 gf-form--grow">
           <label class="gf-form-label text-warning gf-form-label--grow">
             <i class="fa fa-warning"></i>
-            A Dashboard with the same name already exists
-          </label>
-        </div>
-      </div>
-
-      <div class="gf-form-inline" ng-if="!ctrl.dash.title">
-        <div class="gf-form offset-width-15 gf-form--grow">
-          <label class="gf-form-label text-warning gf-form-label--grow">
-            <i class="fa fa-warning"></i>
-            A Dashboard should have a name
+            {{ctrl.nameValidationError}}
           </label>
         </div>
       </div>

public/app/features/dashboard/specs/dashboard_import_ctrl.jest.ts

@@ -6,6 +6,7 @@ describe("DashboardImportCtrl", function() {
 
   let navModelSrv;
   let backendSrv;
+  let validationSrv;
 
   beforeEach(() => {
     navModelSrv = {
@@ -17,7 +18,11 @@ describe("DashboardImportCtrl", function() {
       get: jest.fn()
     };
 
-    ctx.ctrl = new DashboardImportCtrl(backendSrv, navModelSrv, {}, {}, {});
+    validationSrv = {
+      validateNewDashboardOrFolderName: jest.fn().mockReturnValue(Promise.resolve())
+    };
+
+    ctx.ctrl = new DashboardImportCtrl(backendSrv, validationSrv, navModelSrv, {}, {}, {});
   });
 
   describe("when uploading json", function() {