Prometheus: Fixes so user can change HTTP Method in config (#21055)

Fixes #21004

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

@@ -0,0 +1,28 @@
+import { getValueFromEventItem } from './PromSettings';
+
+describe('PromSettings', () => {
+  describe('getValueFromEventItem', () => {
+    describe('when called with undefined', () => {
+      it('then it should return empty string', () => {
+        const result = getValueFromEventItem(undefined);
+        expect(result).toEqual('');
+      });
+    });
+
+    describe('when called with an input event', () => {
+      it('then it should return value from currentTarget', () => {
+        const value = 'An input value';
+        const result = getValueFromEventItem({ currentTarget: { value } });
+        expect(result).toEqual(value);
+      });
+    });
+
+    describe('when called with a select event', () => {
+      it('then it should return value', () => {
+        const value = 'A select value';
+        const result = getValueFromEventItem({ value });
+        expect(result).toEqual(value);
+      });
+    });
+  });
+});

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

@@ -1,6 +1,6 @@
 import React, { SyntheticEvent } from 'react';
 import { EventsWithValidation, FormField, FormLabel, Input, regexValidation, Select } from '@grafana/ui';
-import { DataSourceSettings } from '@grafana/data';
+import { DataSourceSettings, SelectableValue } from '@grafana/data';
 import { PromOptions } from '../types';
 
 const httpOptions = [
@@ -112,14 +112,26 @@ export const PromSettings = (props: Props) => {
   );
 };
 
+export const getValueFromEventItem = (eventItem: SyntheticEvent<HTMLInputElement> | SelectableValue<string>) => {
+  if (!eventItem) {
+    return '';
+  }
+
+  if (eventItem.hasOwnProperty('currentTarget')) {
+    return eventItem.currentTarget.value;
+  }
+
+  return (eventItem as SelectableValue<string>).value;
+};
+
 const onChangeHandler = (key: keyof PromOptions, value: Props['value'], onChange: Props['onChange']) => (
-  event: SyntheticEvent<HTMLInputElement | HTMLSelectElement>
+  eventItem: SyntheticEvent<HTMLInputElement> | SelectableValue<string>
 ) => {
   onChange({
     ...value,
     jsonData: {
       ...value.jsonData,
-      [key]: event.currentTarget.value,
+      [key]: getValueFromEventItem(eventItem),
     },
   });
 };