From e69ec6ca536af19e02cc6cf20e0b7a09abc43cbe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@grafana.com>
Date: Thu, 12 Dec 2019 11:52:03 +0100
Subject: [PATCH] Prometheus: Fixes so user can change HTTP Method in config
 (#21055)

Fixes #21004
---
 .../configuration/PromSettings.test.tsx       | 28 +++++++++++++++++++
 .../prometheus/configuration/PromSettings.tsx | 18 ++++++++++--
 2 files changed, 43 insertions(+), 3 deletions(-)
 create mode 100644 public/app/plugins/datasource/prometheus/configuration/PromSettings.test.tsx

diff --git a/public/app/plugins/datasource/prometheus/configuration/PromSettings.test.tsx b/public/app/plugins/datasource/prometheus/configuration/PromSettings.test.tsx
new file mode 100644
index 00000000000..21950b2a7fd
--- /dev/null
+++ b/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);
+      });
+    });
+  });
+});
diff --git a/public/app/plugins/datasource/prometheus/configuration/PromSettings.tsx b/public/app/plugins/datasource/prometheus/configuration/PromSettings.tsx
index 7c1b364d9d1..e03961c7148 100644
--- a/public/app/plugins/datasource/prometheus/configuration/PromSettings.tsx
+++ b/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),
     },
   });
 };