dashboard: improve import UX for non-editor users

validate folderId, import only into available folders

public/app/features/dashboard/dashboard_import_ctrl.ts

@@ -22,6 +22,7 @@ export class DashboardImportCtrl {
   autoGenerateUid: boolean;
   autoGenerateUid: boolean;
   autoGenerateUidValue: string;
   autoGenerateUidValue: string;
   folderId: number;
   folderId: number;
+  initialFolderTitle: string;
   isValidFolderSelection: boolean;
   isValidFolderSelection: boolean;
 
 
   /** @ngInject */
   /** @ngInject */
@@ -33,7 +34,8 @@ export class DashboardImportCtrl {
     this.uidExists = false;
     this.uidExists = false;
     this.autoGenerateUid = true;
     this.autoGenerateUid = true;
     this.autoGenerateUidValue = 'auto-generated';
     this.autoGenerateUidValue = 'auto-generated';
-    this.folderId = Number($routeParams.folderId) || 0;
+    this.folderId = $routeParams.folderId ? Number($routeParams.folderId) || 0 : null;
+    this.initialFolderTitle = 'Select a folder';
 
 
     // check gnetId in url
     // check gnetId in url
     if ($routeParams.gnetId) {
     if ($routeParams.gnetId) {
@@ -107,6 +109,7 @@ export class DashboardImportCtrl {
     this.validationSrv
     this.validationSrv
       .validateNewDashboardName(this.folderId, this.dash.title)
       .validateNewDashboardName(this.folderId, this.dash.title)
       .then(() => {
       .then(() => {
+        this.nameExists = false;
         this.hasNameValidationError = false;
         this.hasNameValidationError = false;
       })
       })
       .catch(err => {
       .catch(err => {
@@ -154,6 +157,10 @@ export class DashboardImportCtrl {
     this.inputsValid = true;
     this.inputsValid = true;
   }
   }
 
 
+  isValid() {
+    return this.inputsValid && !this.hasNameValidationError && this.folderId !== null;
+  }
+
   saveDashboard() {
   saveDashboard() {
     var inputs = this.inputs.map(input => {
     var inputs = this.inputs.map(input => {
       return {
       return {

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

@@ -132,23 +132,26 @@ export class FolderPickerCtrl {
   }
   }
 
 
   private loadInitialValue() {
   private loadInitialValue() {
-    if (this.initialFolderId && this.initialFolderId > 0) {
-      this.getOptions('').then(result => {
+    this.getOptions('').then(result => {
+      if (!_.isNil(this.initialFolderId)) {
+        // If initialFolderId is set, try to find it in result or return null
         this.folder = _.find(result, { value: this.initialFolderId });
         this.folder = _.find(result, { value: this.initialFolderId });
         if (!this.folder) {
         if (!this.folder) {
-          this.folder = { text: this.initialTitle, value: this.initialFolderId };
+          this.folder = { text: this.initialTitle, value: null };
         }
         }
-        this.onFolderLoad();
-      });
-    } else {
-      if (this.initialTitle && this.initialFolderId === null) {
-        this.folder = { text: this.initialTitle, value: null };
       } else {
       } else {
-        this.folder = { text: this.rootName, value: 0 };
+        // If initialFolderId isn't set, return General folder for Editor
+        // or first available for user, otherwise return null
+        if (this.isEditor) {
+          this.folder = { text: this.rootName, value: 0 };
+        } else if (result.length > 0) {
+          this.folder = result[0];
+        } else {
+          this.folder = { text: this.initialTitle, value: null };
+        }
       }
       }
-
       this.onFolderLoad();
       this.onFolderLoad();
-    }
+    });
   }
   }
 
 
   private onFolderLoad() {
   private onFolderLoad() {

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

@@ -83,7 +83,9 @@
       <div class="gf-form-inline">
       <div class="gf-form-inline">
         <div class="gf-form gf-form--grow">
         <div class="gf-form gf-form--grow">
           <folder-picker initial-folder-id="ctrl.folderId"
           <folder-picker initial-folder-id="ctrl.folderId"
+            initial-title="ctrl.initialFolderTitle"
             on-change="ctrl.onFolderChange($folder)"
             on-change="ctrl.onFolderChange($folder)"
+            on-load="ctrl.onFolderChange($folder)"
             enter-folder-creation="ctrl.onEnterFolderCreation()"
             enter-folder-creation="ctrl.onEnterFolderCreation()"
             exit-folder-creation="ctrl.onExitFolderCreation()"
             exit-folder-creation="ctrl.onExitFolderCreation()"
             enable-create-new="true"
             enable-create-new="true"
@@ -144,10 +146,10 @@
     </div>
     </div>
 
 
     <div class="gf-form-button-row">
     <div class="gf-form-button-row">
-      <button type="button" class="btn btn-success width-12" ng-click="ctrl.saveDashboard()" ng-hide="ctrl.nameExists || ctrl.uidExists" ng-disabled="!ctrl.inputsValid">
+      <button type="button" class="btn btn-success width-12" ng-click="ctrl.saveDashboard()" ng-hide="ctrl.nameExists || ctrl.uidExists" ng-disabled="!ctrl.isValid()">
         <i class="fa fa-save"></i> Import
         <i class="fa fa-save"></i> Import
       </button>
       </button>
-      <button type="button" class="btn btn-danger width-12" ng-click="ctrl.saveDashboard()" ng-show="ctrl.nameExists || ctrl.uidExists" ng-disabled="!ctrl.inputsValid">
+      <button type="button" class="btn btn-danger width-12" ng-click="ctrl.saveDashboard()" ng-show="ctrl.nameExists || ctrl.uidExists" ng-disabled="!ctrl.isValid()">
         <i class="fa fa-save"></i> Import (Overwrite)
         <i class="fa fa-save"></i> Import (Overwrite)
       </button>
       </button>
       <a class="btn btn-link" ng-click="ctrl.back()">Cancel</a>
       <a class="btn btn-link" ng-click="ctrl.back()">Cancel</a>