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

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 = {

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

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;
       });
   };
 

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) {