From 939ee185661e76e90ccf0db659cab12e4889e54b Mon Sep 17 00:00:00 2001
From: Taewoo Kim <taewoo.kim@grafana.com>
Date: Wed, 10 May 2023 09:01:47 -0400
Subject: [PATCH] datasource name validation

---
 .../components/EditDataSourceTitle.tsx        | 39 +++++++++++--------
 1 file changed, 23 insertions(+), 16 deletions(-)

diff --git a/public/app/features/datasources/components/EditDataSourceTitle.tsx b/public/app/features/datasources/components/EditDataSourceTitle.tsx
index 19572e213bf..ef9e368c965 100644
--- a/public/app/features/datasources/components/EditDataSourceTitle.tsx
+++ b/public/app/features/datasources/components/EditDataSourceTitle.tsx
@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 
 import { DataSourceSettings, GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { IconButton, useStyles2, Input, Tooltip } from '@grafana/ui';
+import { IconButton, useStyles2, Input, Tooltip, Field } from '@grafana/ui';
 
 interface Props {
   dataSource: DataSourceSettings;
@@ -23,13 +23,18 @@ export function EditDataSourceTitle({ dataSource, title, readOnly, onUpdate }: P
   };
 
   const handleNameChange = async (name: string) => {
-    setName(name);
     toggleEditMode();
-    try {
-      await onUpdate({ ...initialDataSource, name });
-    } catch (err) {
+    if (name === '') {
+      setName(title);
       return;
     }
+    if (name !== title) {
+      try {
+        await onUpdate({ ...initialDataSource, name });
+      } catch (err) {
+        return;
+      }
+    }
   };
 
   useEffect(() => {
@@ -62,17 +67,19 @@ export function EditDataSourceTitle({ dataSource, title, readOnly, onUpdate }: P
         </div>
       ) : (
         <div className={styles.datasourceNameInput}>
-          <Input
-            id="edit-data-source-name"
-            type="text"
-            value={name}
-            placeholder="Name"
-            onChange={(evt: React.FormEvent<HTMLInputElement>) => setName(evt.currentTarget.value)}
-            onBlur={(evt: React.FormEvent<HTMLInputElement>) => handleNameChange(evt.currentTarget.value)}
-            required
-            data-testid={selectors.pages.DataSource.name}
-            autoFocus={isNameEditable}
-          ></Input>
+          <Field invalid={name === ''} error={name === '' ? 'Please enter a data source name' : ''}>
+            <Input
+              id="edit-data-source-name"
+              type="text"
+              value={name}
+              placeholder="Name"
+              onChange={(evt: React.FormEvent<HTMLInputElement>) => setName(evt.currentTarget.value)}
+              onBlur={(evt: React.FormEvent<HTMLInputElement>) => handleNameChange(evt.currentTarget.value)}
+              required
+              data-testid={selectors.pages.DataSource.name}
+              autoFocus={isNameEditable}
+            />
+          </Field>
         </div>
       )}
     </div>