Prometheus: Prevents validation of inputs when clicking in them without changing the value (#21059)

Fixes #21056

public/app/plugins/datasource/prometheus/configuration/PromSettings.test.tsx

-import { getValueFromEventItem } from './PromSettings';
+import { getValueFromEventItem, promSettingsValidationEvents } from './PromSettings';
+import { EventsWithValidation } from '@grafana/ui';
 
 describe('PromSettings', () => {
   describe('getValueFromEventItem', () => {
@@ -25,4 +26,57 @@ describe('PromSettings', () => {
       });
     });
   });
+
+  describe('promSettingsValidationEvents', () => {
+    const validationEvents = promSettingsValidationEvents;
+
+    it('should have one event handlers', () => {
+      expect(Object.keys(validationEvents).length).toEqual(1);
+    });
+
+    it('should have an onBlur handler', () => {
+      expect(validationEvents.hasOwnProperty(EventsWithValidation.onBlur)).toBe(true);
+    });
+
+    it('should have one rule', () => {
+      expect(validationEvents[EventsWithValidation.onBlur].length).toEqual(1);
+    });
+
+    describe('when calling the rule with an empty string', () => {
+      it('then it should return true', () => {
+        expect(validationEvents[EventsWithValidation.onBlur][0].rule('')).toBe(true);
+      });
+    });
+
+    it.each`
+      value    | expected
+      ${'1ms'} | ${true}
+      ${'1M'}  | ${true}
+      ${'1w'}  | ${true}
+      ${'1d'}  | ${true}
+      ${'1h'}  | ${true}
+      ${'1m'}  | ${true}
+      ${'1s'}  | ${true}
+      ${'1y'}  | ${true}
+    `(
+      "when calling the rule with correct formatted value: '$value' then result should be '$expected'",
+      ({ value, expected }) => {
+        expect(validationEvents[EventsWithValidation.onBlur][0].rule(value)).toBe(expected);
+      }
+    );
+
+    it.each`
+      value     | expected
+      ${'1 ms'} | ${false}
+      ${'1x'}   | ${false}
+      ${' '}    | ${false}
+      ${'w'}    | ${false}
+      ${'1.0s'} | ${false}
+    `(
+      "when calling the rule with incorrect formatted value: '$value' then result should be '$expected'",
+      ({ value, expected }) => {
+        expect(validationEvents[EventsWithValidation.onBlur][0].rule(value)).toBe(expected);
+      }
+    );
+  });
 });

public/app/plugins/datasource/prometheus/configuration/PromSettings.tsx

@@ -31,14 +31,7 @@ export const PromSettings = (props: Props) => {
                   value={value.jsonData.timeInterval}
                   spellCheck={false}
                   onChange={onChangeHandler('timeInterval', value, onChange)}
-                  validationEvents={{
-                    [EventsWithValidation.onBlur]: [
-                      regexValidation(
-                        /^\d+(ms|[Mwdhmsy])$/,
-                        'Value is not valid, you can use number with time unit specifier: y, M, w, d, h, m, s'
-                      ),
-                    ],
-                  }}
+                  validationEvents={promSettingsValidationEvents}
                 />
               }
               tooltip="Set this to your global scrape interval defined in your Prometheus config file. This will be used as a lower limit for the
@@ -58,14 +51,7 @@ export const PromSettings = (props: Props) => {
                   onChange={onChangeHandler('queryTimeout', value, onChange)}
                   spellCheck={false}
                   placeholder="60s"
-                  validationEvents={{
-                    [EventsWithValidation.onBlur]: [
-                      regexValidation(
-                        /^\d+(ms|[Mwdhmsy])$/,
-                        'Value is not valid, you can use number with time unit specifier: y, M, w, d, h, m, s'
-                      ),
-                    ],
-                  }}
+                  validationEvents={promSettingsValidationEvents}
                 />
               }
               tooltip="Set the Prometheus query timeout."
@@ -112,6 +98,15 @@ export const PromSettings = (props: Props) => {
   );
 };
 
+export const promSettingsValidationEvents = {
+  [EventsWithValidation.onBlur]: [
+    regexValidation(
+      /^$|^\d+(ms|[Mwdhmsy])$/,
+      'Value is not valid, you can use number with time unit specifier: y, M, w, d, h, m, s'
+    ),
+  ],
+};
+
 export const getValueFromEventItem = (eventItem: SyntheticEvent<HTMLInputElement> | SelectableValue<string>) => {
   if (!eventItem) {
     return '';