From 16bc5c118d4f9711d11f86cbc292e5fb30b7d0c0 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Tue, 14 Apr 2020 10:55:27 +0200
Subject: [PATCH] DashboardSave: Display error message when folder/dashboard
 name validation fails (#23416)

* Display error message when folder/dashboard name validation fails

* Fix test

* Better error handling

* Fix tests
---
 .../forms/SaveDashboardAsForm.test.tsx        |  3 ++
 .../forms/SaveDashboardAsForm.tsx             | 29 +++++++++++++++----
 .../components/NewDashboardsFolder.tsx        |  4 +--
 .../services/ValidationSrv.ts                 |  2 +-
 4 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.test.tsx b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.test.tsx
index e97551a69c9..6609c77241f 100644
--- a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.test.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.test.tsx
@@ -16,6 +16,9 @@ jest.mock('app/core/services/context_srv', () => ({
 
 jest.mock('app/features/plugins/datasource_srv', () => ({}));
 jest.mock('app/features/expressions/ExpressionDatasource', () => ({}));
+jest.mock('app/features/manage-dashboards/services/ValidationSrv', () => ({
+  validateNewDashboardName: () => true,
+}));
 
 const prepareDashboardMock = (panel: any) => {
   const json = {
diff --git a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx
index c3dfd68e8de..7b85576fc1b 100644
--- a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.tsx
@@ -3,8 +3,7 @@ import { Button, Forms, HorizontalGroup, Input, Switch } from '@grafana/ui';
 import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
 import { FolderPicker } from 'app/core/components/Select/FolderPicker';
 import { SaveDashboardFormProps } from '../types';
-
-export const NEW_DASHBOARD_DEFAULT_TITLE = 'New dashboard';
+import validationSrv from 'app/features/manage-dashboards/services/ValidationSrv';
 
 interface SaveDashboardAsFormDTO {
   title: string;
@@ -50,6 +49,18 @@ export const SaveDashboardAsForm: React.FC<SaveDashboardFormProps & { isNew?: bo
     copyTags: false,
   };
 
+  const validateDashboardName = (getFormValues: () => SaveDashboardAsFormDTO) => async (dashboardName: string) => {
+    if (dashboardName && dashboardName === getFormValues().$folder.title?.trim()) {
+      return 'Dashboard name cannot be the same as folder';
+    }
+    try {
+      await validationSrv.validateNewDashboardName(getFormValues().$folder.id, dashboardName);
+      return true;
+    } catch (e) {
+      return e.message;
+    }
+  };
+
   return (
     <Forms.Form
       defaultValues={defaultValues}
@@ -67,15 +78,23 @@ export const SaveDashboardAsForm: React.FC<SaveDashboardFormProps & { isNew?: bo
           },
           dashboard
         );
+
         if (result.status === 'success') {
           onSuccess();
         }
       }}
     >
-      {({ register, control, errors }) => (
+      {({ register, control, errors, getValues }) => (
         <>
-          <Forms.Field label="Dashboard name" invalid={!!errors.title} error="Dashboard name is required">
-            <Input name="title" ref={register({ required: true })} aria-label="Save dashboard title field" autoFocus />
+          <Forms.Field label="Dashboard name" invalid={!!errors.title} error={errors.title?.message}>
+            <Input
+              name="title"
+              ref={register({
+                validate: validateDashboardName(getValues),
+              })}
+              aria-label="Save dashboard title field"
+              autoFocus
+            />
           </Forms.Field>
           <Forms.Field label="Folder">
             <Forms.InputControl
diff --git a/public/app/features/folders/components/NewDashboardsFolder.tsx b/public/app/features/folders/components/NewDashboardsFolder.tsx
index 287361a0ddc..27d642e21ca 100644
--- a/public/app/features/folders/components/NewDashboardsFolder.tsx
+++ b/public/app/features/folders/components/NewDashboardsFolder.tsx
@@ -37,8 +37,8 @@ export class NewDashboardsFolder extends PureComponent<Props> {
       .then(() => {
         return true;
       })
-      .catch(() => {
-        return 'Folder already exists.';
+      .catch(e => {
+        return e.message;
       });
   };
 
diff --git a/public/app/features/manage-dashboards/services/ValidationSrv.ts b/public/app/features/manage-dashboards/services/ValidationSrv.ts
index 89e866f455c..060a9b99729 100644
--- a/public/app/features/manage-dashboards/services/ValidationSrv.ts
+++ b/public/app/features/manage-dashboards/services/ValidationSrv.ts
@@ -10,7 +10,7 @@ export class ValidationSrv {
   rootName = 'general';
 
   validateNewDashboardName(folderId: any, name: string) {
-    return this.validate(folderId, name, 'A dashboard in this folder with the same name already exists');
+    return this.validate(folderId, name, 'A dashboard or a folder with the same name already exists');
   }
 
   validateNewFolderName(name: string) {