Feat supporting webhhok tryou api

ui/src/features/components/SubmitBar/index.js

@@ -1,14 +1,43 @@
 import Button from "../../../components/Button";
 import React from "react";
 
-
-const SubmitBar = ({onSubmit, onCancel, loading, disabled}) => {
-
-    return (<div style={{display: 'flex', justifyContent: 'flex-end'}}>
-        {onCancel && <Button style={{marginRight: '10px'}} inverted onClick={onCancel}>Cancel</Button>}
-        <Button spinner={loading} hover disabled={disabled}
-                onClick={onSubmit}>Submit</Button>
-    </div>);
+const SubmitBar = ({
+  onSubmit,
+  onCancel,
+  loading,
+  disabled,
+  onTest,
+  testDisabled,
+  showTestWebhookSuccessMsg,
+}) => {
+  const buttonColor = showTestWebhookSuccessMsg && "green";
+  const buttonIsInverted = !showTestWebhookSuccessMsg;
+  const buttonText = !showTestWebhookSuccessMsg ? "Test" : "Great, It Works!";
+  return (
+    <div style={{ display: "flex", justifyContent: "flex-end" }}>
+      {onTest && (
+        <>
+          <Button
+            disabled={testDisabled}
+            style={{ marginRight: "10px" }}
+            inverted={buttonIsInverted}
+            onClick={onTest}
+            color={buttonColor}
+          >
+            {buttonText}
+          </Button>
+        </>
+      )}
+      {onCancel && (
+        <Button style={{ marginRight: "10px" }} inverted onClick={onCancel}>
+          Cancel
+        </Button>
+      )}
+      <Button spinner={loading} hover disabled={disabled} onClick={onSubmit}>
+        Submit
+      </Button>
+    </div>
+  );
 };
 
 export default SubmitBar;

ui/src/features/components/WebhooksList/CollapsibleWebhook.js

@@ -2,7 +2,7 @@ import React from 'react';
 import CollapsibleItem from '../../../components/CollapsibleItem/CollapsibleItem';
 import WebhookForm from './WebhookForm';
 import { buildStateFromWebhook, createWebhookRequest } from './utils'
-import { editWebhookSuccess, loading, webhookSuccess } from '../../redux/selectors/webhooksSelector';
+import { editWebhookSuccess, loading, webhookSuccess, testWebhookSuccess } from '../../redux/selectors/webhooksSelector';
 import * as Actions from '../../redux/action';
 import { connect } from 'react-redux';
 import DeleteDialog from '../DeleteDialog';
@@ -34,6 +34,15 @@ export class CollapsibleWebhook extends React.Component {
     onChangeWebhook = (webhook) => {
       this.setState({ webhook });
     };
+
+    hideTestWebhookSuccessMsg = () => {
+      this.props.setTestWebHookSuccess(false)
+    };
+
+    onTest = () => {
+      const { webhook } = this.state;
+      this.props.testWebhook(webhook.id);
+    };
 
     onSubmit = () => {
       const { createMode } = this.props;
@@ -57,6 +66,14 @@ export class CollapsibleWebhook extends React.Component {
       }
     }
 
+    toggleExpanded = () => {
+      const { createMode } = this.props;
+      if(!createMode) {
+        this.setState({ expanded: !this.state.expanded })
+        this.hideTestWebhookSuccessMsg()
+      }
+    }
+
     render () {
       const { expanded, showDeleteReportWarning, webhook } = this.state;
       const { createMode } = this.props;
@@ -72,9 +89,7 @@ export class CollapsibleWebhook extends React.Component {
       return (
         <div style={{ width: '756px' }}>
           <CollapsibleItem
-            onClick={(evt) => {
-              !createMode && this.setState({ expanded: !this.state.expanded })
-            }}
+            onClick={this.toggleExpanded}
             editable
             expanded={expanded}
             toggleable={!createMode}
@@ -136,8 +151,10 @@ export class CollapsibleWebhook extends React.Component {
     };
 
     generateBody = () => {
+      const { createMode, testWebHookSuccess } = this.props;
+      const showTestWebhookSuccessMsg = !createMode && testWebHookSuccess;
       return (
-        <WebhookForm onCancel={this.props.onClose} loading={this.props.loading} onSubmit={this.onSubmit}
+        <WebhookForm showTestWebhookSuccessMsg={showTestWebhookSuccessMsg} testDisabled={createMode} onTest={this.onTest} onCancel={this.props.onClose} loading={this.props.loading} onSubmit={this.onSubmit}
           onChangeWebhook={this.onChangeWebhook} webhook={this.state.webhook} />
       )
     }
@@ -147,17 +164,20 @@ function mapStateToProps (state) {
   return {
     loading: loading(state),
     webhookSuccess: webhookSuccess(state),
-    editWebhookSuccess: editWebhookSuccess(state)
+    editWebhookSuccess: editWebhookSuccess(state),
+    testWebHookSuccess: testWebhookSuccess(state)
   }
 }
 
 const mapDispatchToProps = {
   createWebhook: Actions.createWebhook,
   getWebhooks: Actions.getWebhooks,
+  testWebhook: Actions.testWebhook,
   editWebhook: Actions.editWebhook,
   deleteWebhook: Actions.deleteWebHook,
   setWebhookSuccess: Actions.createWebHookSuccess,
-  setEditWebhookSuccess: Actions.editWebHookSuccess
+  setEditWebhookSuccess: Actions.editWebHookSuccess,
+  setTestWebHookSuccess: Actions.testWebHookSuccess,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(CollapsibleWebhook);

ui/src/features/components/WebhooksList/WebhookForm.js

@@ -9,7 +9,7 @@ import UiSwitcher from "../../../components/UiSwitcher";
 import SubmitBar from '../SubmitBar'
 import InfoToolTip from '../InfoToolTip';
 
-const WebhookForm = ({loading, onSubmit, onCancel, onChangeWebhook, webhook}) => {
+const WebhookForm = ({loading, onSubmit, onCancel, onChangeWebhook, webhook, onTest, testDisabled, showTestWebhookSuccessMsg}) => {
 
     const onChangeProps = (props) => {
         const newWebhook = {...webhook, ...props};
@@ -78,7 +78,7 @@ const WebhookForm = ({loading, onSubmit, onCancel, onChangeWebhook, webhook}) =>
                             </div>
                         }
             />
-            <SubmitBar onCancel={onCancel} onSubmit={onSubmit} loading={loading}/>
+            <SubmitBar showTestWebhookSuccessMsg={showTestWebhookSuccessMsg} testDisabled={testDisabled} onTest={onTest} onCancel={onCancel} onSubmit={onSubmit} loading={loading}/>
         </div>
     )
 

ui/src/features/redux/action.js

@@ -28,9 +28,11 @@ import {
     createWebHookSuccess,
     cleanErrors,
     editWebhook,
+    testWebhook,
     deleteWebHook,
     deleteWebHookSuccess,
     editWebHookSuccess,
+    testWebHookSuccess,
 } from './actions/webhooksActions';
 import {
     clearStopJobSuccess,
@@ -198,9 +200,11 @@ export {
     createWebHookSuccess,
     cleanErrors,
     editWebhook,
+    testWebhook,
     deleteWebHook,
     deleteWebHookSuccess,
-    editWebHookSuccess
+    editWebHookSuccess,
+    testWebHookSuccess
 
 };
 //processors

ui/src/features/redux/actions/webhooksActions.js

@@ -23,11 +23,18 @@ export const createWebHookFailure = (value) => (
 export const editWebHookSuccess = (value) => (
     {type: Types.EDIT_WEBHOOK_SUCCESS, value}
 );
+export const testWebHookSuccess = (value) => (
+    {type: Types.TEST_WEBHOOK_SUCCESS, value}
+);
 
 export const editWebHookFailure = (value) => (
     {type: Types.EDIT_WEBHOOK_FAILURE, value}
 );
 
+export const testWebHookFailure = (value) => (
+    {type: Types.TEST_WEBHOOK_FAILURE, value}
+);
+
 export const deleteWebHook = (id) => (
     {type: Types.DELETE_WEBHOOK, id}
 );
@@ -55,3 +62,7 @@ export const cleanErrors = (value) => (
 export const editWebhook = (body, id) => (
     {type: Types.EDIT_WEBHOOK, body, id}
 );
+
+export const testWebhook = (id) => (
+    {type: Types.TEST_WEBHOOK, id}
+);

ui/src/features/redux/apis/webhooksApi.js

@@ -8,6 +8,12 @@ export const getWebhooksApi = () => {
     });
 };
 
+export const testWebhookApi = (id) => {
+    let url = `${env.PREDATOR_URL}/webhooks/${id}/test`;
+    return axios.post(url, {
+        headers: {}
+    });
+};
 
 export const createWebhookApi = (body) => {
     let url = `${env.PREDATOR_URL}/webhooks`;

ui/src/features/redux/reducers/webhooksReducer.js

@@ -5,6 +5,7 @@ const initialState = Immutable.Map({
     webhooks: [],
     create_webhook_success: false,
     edit_webhook_success: false,
+    test_webhook_success: false,
     webhook_error: undefined,
     get_webhooks_error: undefined,
     loading: false,
@@ -18,13 +19,16 @@ export default function reduce(state = initialState, action = {}) {
             return state.set('delete_webhook_success', action.value);
         case Types.EDIT_WEBHOOK_SUCCESS:
             return state.set('edit_webhook_success', action.value);
+        case Types.TEST_WEBHOOK_SUCCESS:
+            return state.set('test_webhook_success', action.value);
         case Types.GET_WEBHOOKS_SUCCESS:
             return state.set('webhooks', action.value);
         case Types.LOADING:
             return state.set('loading', action.value);
         case Types.GET_WEBHOOKS_FAILURE:
         case Types.CREATE_WEBHOOK_FAILUE:
         case Types.EDIT_WEBHOOK_FAILURE:
+        case Types.TEST_WEBHOOK_FAILURE:
             return state.set('webhook_error', action.value);
         case Types.CLEAN_ERRORS:
             return state.set('webhook_error', undefined);

ui/src/features/redux/saga/webhooksSagas.js

@@ -1,7 +1,7 @@
 import {put, takeLatest, call} from 'redux-saga/effects'
 import * as Actions from '../actions/webhooksActions'
 import * as Types from '../types/webhooks'
-import {getWebhooksApi, createWebhookApi, editWebhookApi, deleteWebhookApi} from '../apis/webhooksApi'
+import {getWebhooksApi, createWebhookApi, editWebhookApi, deleteWebhookApi, testWebhookApi} from '../apis/webhooksApi'
 
 export function* getWebhooks() {
     try {
@@ -52,9 +52,22 @@ export function* deleteWebhook({id}) {
     yield put(Actions.setLoading(false));
 }
 
+export function* testWebhook({id}) {
+    try {
+        yield put(Actions.setLoading(true));
+        const result = yield call(testWebhookApi, id);
+        yield put(Actions.testWebHookSuccess(true));
+    } catch (e) {
+        yield put(Actions.testWebHookFailure(e))
+
+    }
+    yield put(Actions.setLoading(false));
+}
+
 export function* webhooksRegister() {
     yield takeLatest(Types.GET_WEBHOOKS, getWebhooks);
     yield takeLatest(Types.CREATE_WEBHOOK, createWebhook);
     yield takeLatest(Types.EDIT_WEBHOOK, editWebhook);
     yield takeLatest(Types.DELETE_WEBHOOK, deleteWebhook);
+    yield takeLatest(Types.TEST_WEBHOOK, testWebhook);
 }

ui/src/features/redux/selectors/webhooksSelector.js

@@ -6,6 +6,7 @@ export const loading = (state) => state.WebhooksReducer.get('loading');
 export const webhookSuccess = (state) => state.WebhooksReducer.get('create_webhook_success');
 export const editWebhookSuccess = (state) => state.WebhooksReducer.get('edit_webhook_success');
 export const deleteWebhookSuccess = (state) => state.WebhooksReducer.get('delete_webhook_success');
+export const testWebhookSuccess = (state) => state.WebhooksReducer.get('test_webhook_success');
 export const webhookError = (state) => state.WebhooksReducer.get('webhook_error');
 
 export const sortedWebhooksWithSpacer = createSelector(webhooks, (webhooks) => {

ui/src/features/redux/types/webhooks.js

@@ -16,5 +16,9 @@ export const DELETE_WEBHOOK = 'DELETE_WEBHOOK';
 export const DELETE_WEBHOOK_SUCCESS = 'DELETE_WEBHOOK_SUCCESS';
 export const DELETE_WEBHOOK_FAILURE = 'DELETE_WEBHOOK_FAILURE';
 
+export const TEST_WEBHOOK = 'TEST_WEBHOOK';
+export const TEST_WEBHOOK_SUCCESS = 'TEST_WEBHOOK_SUCCESS';
+export const TEST_WEBHOOK_FAILURE = 'TEST_WEBHOOK_FAILURE';
+
 export const LOADING = 'LOADING';
 export const CLEAN_ERRORS = 'CLEAN_ERRORS';