datasource name validation

2023-05-10 09:01:47 -04:00
parent 1d16126382
commit 939ee18566
1 changed files with 23 additions and 16 deletions
@@ -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>