From a208c87c290df1e6b5a09b726500d0b3f0ec892b Mon Sep 17 00:00:00 2001
From: anik-ghosh-au7 <tech.anikghosh@gmail.com>
Date: Sun, 17 Jul 2022 16:50:58 +0530
Subject: [PATCH] update: webhooks

---
 .../src/components/UpdateWebhookModal.tsx     | 41 ++++++++++++++++---
 dashboard/src/graphql/mutation/index.ts       |  9 ++++
 2 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/dashboard/src/components/UpdateWebhookModal.tsx b/dashboard/src/components/UpdateWebhookModal.tsx
index c2d0dc0..532a2e3 100644
--- a/dashboard/src/components/UpdateWebhookModal.tsx
+++ b/dashboard/src/components/UpdateWebhookModal.tsx
@@ -31,7 +31,7 @@ import {
 	webhookVerifiedStatus,
 } from '../constants';
 import { capitalizeFirstLetter, validateURI } from '../utils';
-import { AddWebhook, EditWebhook } from '../graphql/mutation';
+import { AddWebhook, EditWebhook, TestEndpoint } from '../graphql/mutation';
 import { rest } from 'lodash';
 import { BiCheckCircle, BiError, BiErrorCircle } from 'react-icons/bi';
 
@@ -118,6 +118,12 @@ const UpdateWebhookModal = ({
 		headerInputType: string = WebhookInputHeaderFields.KEY,
 		headerIndex: number = 0
 	) => {
+		if (
+			verifiedStatus !== webhookVerifiedStatus.PENDING &&
+			inputType !== WebhookInputDataFields.ENABLED
+		) {
+			setVerifiedStatus(webhookVerifiedStatus.PENDING);
+		}
 		switch (inputType) {
 			case WebhookInputDataFields.EVENT_NAME:
 				setWebhook({ ...webhook, [inputType]: value });
@@ -163,6 +169,9 @@ const UpdateWebhookModal = ({
 		}
 	};
 	const updateHeaders = (operation: string, index: number = 0) => {
+		if (verifiedStatus !== webhookVerifiedStatus.PENDING) {
+			setVerifiedStatus(webhookVerifiedStatus.PENDING);
+		}
 		switch (operation) {
 			case ArrayInputOperations.APPEND:
 				setWebhook({
@@ -217,9 +226,7 @@ const UpdateWebhookModal = ({
 			)
 		);
 	};
-	const saveData = async () => {
-		if (!validateData()) return;
-		setLoading(true);
+	const getParams = () => {
 		let params: any = {
 			[WebhookInputDataFields.EVENT_NAME]:
 				webhook[WebhookInputDataFields.EVENT_NAME],
@@ -239,6 +246,12 @@ const UpdateWebhookModal = ({
 				params[WebhookInputDataFields.HEADERS] = headers;
 			}
 		}
+		return params;
+	};
+	const saveData = async () => {
+		if (!validateData()) return;
+		setLoading(true);
+		const params = getParams();
 		let res: any = {};
 		if (
 			view === UpdateWebhookModalViews.Edit &&
@@ -317,6 +330,18 @@ const UpdateWebhookModal = ({
 			}
 		}
 	}, [isOpen]);
+	const verifyEndpoint = async () => {
+		if (!validateData()) return;
+		setVerifyingEndpoint(true);
+		const { [WebhookInputDataFields.ENABLED]: _, ...params } = getParams();
+		const res = await client.mutation(TestEndpoint, { params }).toPromise();
+		if (res.data?._test_endpoint?.response?.success) {
+			setVerifiedStatus(webhookVerifiedStatus.VERIFIED);
+		} else {
+			setVerifiedStatus(webhookVerifiedStatus.NOT_VERIFIED);
+		}
+		setVerifyingEndpoint(false);
+	};
 	return (
 		<>
 			{view === UpdateWebhookModalViews.ADD ? (
@@ -531,7 +556,7 @@ const UpdateWebhookModal = ({
 									: 'red'
 							}
 							variant="outline"
-							onClick={saveData}
+							onClick={verifyEndpoint}
 							isLoading={verifyingEndpoint}
 							isDisabled={!validateData()}
 							marginRight="5"
@@ -545,7 +570,11 @@ const UpdateWebhookModal = ({
 								)
 							}
 						>
-							Test Endpoint
+							{verifiedStatus === webhookVerifiedStatus.VERIFIED
+								? 'Endpoint Verified'
+								: verifiedStatus === webhookVerifiedStatus.PENDING
+								? 'Test Endpoint'
+								: 'Endpoint Not Verified'}
 						</Button>
 						<Button
 							colorScheme="blue"
diff --git a/dashboard/src/graphql/mutation/index.ts b/dashboard/src/graphql/mutation/index.ts
index ee7ade3..83c857e 100644
--- a/dashboard/src/graphql/mutation/index.ts
+++ b/dashboard/src/graphql/mutation/index.ts
@@ -103,3 +103,12 @@ export const DeleteWebhook = `
     }
   }
 `;
+
+export const TestEndpoint = `
+  mutation testEndpoint($params: TestEndpointRequest!) {
+    _test_endpoint(params: $params) {
+      http_status
+      response
+    }
+  }
+`;