Allow for http method selection in custom webhook

public/pages/Destinations/components/createDestinations/CustomWebhook/CustomWebhook.js

@@ -17,6 +17,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { EuiSpacer } from '@elastic/eui';
 import HeaderParamsEditor from './HeaderParamsEditor';
+import MethodEditor from './MethodEditor';
 import URLInfo from './URLInfo';
 
 const propTypes = {
@@ -26,6 +27,8 @@ const CustomWebhook = ({ type, values }) => (
   <div>
     <URLInfo type={type} values={values} />
     <EuiSpacer size="m" />
+    <MethodEditor type={type} />
+    <EuiSpacer size="m" />
     <HeaderParamsEditor type={type} headerParams={values[type].headerParams} />
   </div>
 );

public/pages/Destinations/components/createDestinations/CustomWebhook/HeaderParamsEditor.js

@@ -34,7 +34,7 @@ const handleRenderKeyField = (fieldName, index) => (
     }}
     inputProps={{
       isInvalid,
-      disabled: index === 0, //Content-Type should be provided
+      disabled: false,
     }}
     name={fieldName}
   />

public/pages/Destinations/components/createDestinations/CustomWebhook/MethodEditor.js

@@ -0,0 +1,33 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { FieldArray } from 'formik';
+import SubHeader from '../../../../../components/SubHeader';
+import { FormikSelect } from '../../../../../components/FormControls';
+
+
+const methodOptions = [{ value: 'POST', text: 'POST' }, { value: 'PUT', text: 'PUT' }, { value: 'PATCH', text: 'PATCH' }, { value: 'GET', text: 'GET' }, { value: 'DELETE', text: 'DELETE' }];
+
+
+
+const propTypes = {
+    type: PropTypes.string.isRequired,
+};
+const MethodEditor = ({ type }) => (
+<Fragment>
+    <SubHeader title={<h6>Method Selection</h6>} description={''} />
+    <FormikSelect
+        name={`${type}.method`}
+        formRow
+        rowProps={{
+            label: 'Method',
+            style: { paddingLeft: '10px' },
+        }}
+        inputProps={{
+            disabled: false,
+            options: methodOptions,
+        }}
+    />
+</Fragment>
+);
+
+export default MethodEditor;

public/pages/Destinations/containers/CreateDestination/utils/__tests__/destinationToFormik.test.js

@@ -49,6 +49,7 @@ describe('destinationToFormik', () => {
         [DESTINATION_TYPE.CUSTOM_HOOK]: {
           url: 'https://custom.webhook',
           port: -1,
+          method: 'PUT',     
           query_params: { key1: 'value1', key2: 'Value2' },
           header_params: {
             'Content-Type': 'application/json',
@@ -67,6 +68,7 @@ describe('destinationToFormik', () => {
         [DESTINATION_TYPE.CUSTOM_HOOK]: {
           url: 'https://custom.webhook',
           port: 8888,
+          method: 'PUT',
           query_params: { key1: 'value1', key2: 'Value2' },
           header_params: {
             'Content-Type': 'application/json',
@@ -86,6 +88,7 @@ describe('destinationToFormik', () => {
           host: 'https://custom.webhook',
           port: 80,
           path: '/my_custom_path',
+          method: 'PUT',
           query_params: { key1: 'value1', key2: 'Value2' },
           header_params: {
             'Content-Type': 'application/json',

public/pages/Destinations/containers/CreateDestination/utils/__tests__/formikToDestination.test.js

@@ -45,6 +45,7 @@ describe('formikToDestination', () => {
         type: DESTINATION_TYPE.CUSTOM_HOOK,
         [DESTINATION_TYPE.CUSTOM_HOOK]: {
           url: 'https://custom.webhook',
+          method: 'PUT',
           queryParams: [
             {
               key: 'key1',

public/pages/Destinations/containers/CreateDestination/utils/constants.js

@@ -37,6 +37,7 @@ export const formikInitialValues = {
   [DESTINATION_TYPE.CUSTOM_HOOK]: {
     urlType: URL_TYPE.FULL_URL,
     scheme: 'HTTPS',
+    method: 'POST',
     headerParams: [
       {
         key: CONTENT_TYPE_KEY,