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
2020-04-14 10:55:27 +02:00
parent 95e635f154
commit 16bc5c118d
4 changed files with 30 additions and 8 deletions
@@ -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 = {
@@ -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
@@ -37,8 +37,8 @@ export class NewDashboardsFolder extends PureComponent<Props> {
      .then(() => {
        return true;
      })
-      .catch(() => {
-        return 'Folder already exists.';
+      .catch(e => {
+        return e.message;
      });
  };

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