From 8fd3015e5263e2547a9338f14cf7187b3067cd2b Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Wed, 6 Jun 2018 13:58:20 +0300
Subject: [PATCH] dashboard: improve import UX for non-editor users

validate folderId, import only into available folders
---
 .../dashboard/dashboard_import_ctrl.ts        |  9 ++++++-
 .../dashboard/folder_picker/folder_picker.ts  | 25 +++++++++++--------
 .../dashboard/partials/dashboard_import.html  |  6 +++--
 3 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/public/app/features/dashboard/dashboard_import_ctrl.ts b/public/app/features/dashboard/dashboard_import_ctrl.ts
index 444bf642fcc..599019fb78e 100644
--- a/public/app/features/dashboard/dashboard_import_ctrl.ts
+++ b/public/app/features/dashboard/dashboard_import_ctrl.ts
@@ -22,6 +22,7 @@ export class DashboardImportCtrl {
   autoGenerateUid: boolean;
   autoGenerateUidValue: string;
   folderId: number;
+  initialFolderTitle: string;
   isValidFolderSelection: boolean;
 
   /** @ngInject */
@@ -33,7 +34,8 @@ export class DashboardImportCtrl {
     this.uidExists = false;
     this.autoGenerateUid = true;
     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
     if ($routeParams.gnetId) {
@@ -107,6 +109,7 @@ export class DashboardImportCtrl {
     this.validationSrv
       .validateNewDashboardName(this.folderId, this.dash.title)
       .then(() => {
+        this.nameExists = false;
         this.hasNameValidationError = false;
       })
       .catch(err => {
@@ -154,6 +157,10 @@ export class DashboardImportCtrl {
     this.inputsValid = true;
   }
 
+  isValid() {
+    return this.inputsValid && !this.hasNameValidationError && this.folderId !== null;
+  }
+
   saveDashboard() {
     var inputs = this.inputs.map(input => {
       return {
diff --git a/public/app/features/dashboard/folder_picker/folder_picker.ts b/public/app/features/dashboard/folder_picker/folder_picker.ts
index 69a09455c4d..e04fcb9042f 100644
--- a/public/app/features/dashboard/folder_picker/folder_picker.ts
+++ b/public/app/features/dashboard/folder_picker/folder_picker.ts
@@ -132,23 +132,26 @@ export class FolderPickerCtrl {
   }
 
   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 });
         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 {
-        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();
-    }
+    });
   }
 
   private onFolderLoad() {
diff --git a/public/app/features/dashboard/partials/dashboard_import.html b/public/app/features/dashboard/partials/dashboard_import.html
index b0f3568148d..1cb8cdccd4f 100644
--- a/public/app/features/dashboard/partials/dashboard_import.html
+++ b/public/app/features/dashboard/partials/dashboard_import.html
@@ -83,7 +83,9 @@
       <div class="gf-form-inline">
         <div class="gf-form gf-form--grow">
           <folder-picker initial-folder-id="ctrl.folderId"
+            initial-title="ctrl.initialFolderTitle"
             on-change="ctrl.onFolderChange($folder)"
+            on-load="ctrl.onFolderChange($folder)"
             enter-folder-creation="ctrl.onEnterFolderCreation()"
             exit-folder-creation="ctrl.onExitFolderCreation()"
             enable-create-new="true"
@@ -144,10 +146,10 @@
     </div>
 
     <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
       </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)
       </button>
       <a class="btn btn-link" ng-click="ctrl.back()">Cancel</a>