fix: update dashboard ui for webhooks

dashboard/src/components/UpdateWebhookModal.tsx

@@ -63,6 +63,7 @@ interface headersValidatorDataType {
 interface selecetdWebhookDataTypes {
 	[WebhookInputDataFields.ID]: string;
 	[WebhookInputDataFields.EVENT_NAME]: string;
+	[WebhookInputDataFields.EVENT_DESCRIPTION]?: string;
 	[WebhookInputDataFields.ENDPOINT]: string;
 	[WebhookInputDataFields.ENABLED]: boolean;
 	[WebhookInputDataFields.HEADERS]?: Record<string, string>;
@@ -86,6 +87,7 @@ const initHeadersValidatorData: headersValidatorDataType = {
 
 interface webhookDataType {
 	[WebhookInputDataFields.EVENT_NAME]: string;
+	[WebhookInputDataFields.EVENT_DESCRIPTION]?: string;
 	[WebhookInputDataFields.ENDPOINT]: string;
 	[WebhookInputDataFields.ENABLED]: boolean;
 	[WebhookInputDataFields.HEADERS]: headersDataType[];
@@ -98,6 +100,7 @@ interface validatorDataType {
 
 const initWebhookData: webhookDataType = {
 	[WebhookInputDataFields.EVENT_NAME]: webhookEventNames['User login'],
+	[WebhookInputDataFields.EVENT_DESCRIPTION]: '',
 	[WebhookInputDataFields.ENDPOINT]: '',
 	[WebhookInputDataFields.ENABLED]: true,
 	[WebhookInputDataFields.HEADERS]: [{ ...initHeadersData }],
@@ -144,6 +147,9 @@ const UpdateWebhookModal = ({
 			case WebhookInputDataFields.EVENT_NAME:
 				setWebhook({ ...webhook, [inputType]: value });
 				break;
+			case WebhookInputDataFields.EVENT_DESCRIPTION:
+				setWebhook({ ...webhook, [inputType]: value });
+				break;
 			case WebhookInputDataFields.ENDPOINT:
 				setWebhook({ ...webhook, [inputType]: value });
 				setValidator({
@@ -246,6 +252,8 @@ const UpdateWebhookModal = ({
 		let params: any = {
 			[WebhookInputDataFields.EVENT_NAME]:
 				webhook[WebhookInputDataFields.EVENT_NAME],
+			[WebhookInputDataFields.EVENT_DESCRIPTION]:
+				webhook[WebhookInputDataFields.EVENT_DESCRIPTION],
 			[WebhookInputDataFields.ENDPOINT]:
 				webhook[WebhookInputDataFields.ENDPOINT],
 			[WebhookInputDataFields.ENABLED]: webhook[WebhookInputDataFields.ENABLED],
@@ -402,7 +410,9 @@ const UpdateWebhookModal = ({
 								<Flex flex="3">
 									<Select
 										size="md"
-										value={webhook[WebhookInputDataFields.EVENT_NAME]}
+										value={
+											webhook[WebhookInputDataFields.EVENT_NAME].split('-')[0]
+										}
 										onChange={(e) =>
 											inputChangehandler(
 												WebhookInputDataFields.EVENT_NAME,
@@ -420,6 +430,30 @@ const UpdateWebhookModal = ({
 									</Select>
 								</Flex>
 							</Flex>
+							<Flex
+								width="100%"
+								justifyContent="start"
+								alignItems="center"
+								marginBottom="5%"
+							>
+								<Flex flex="1">Event Description</Flex>
+								<Flex flex="3">
+									<InputGroup size="md">
+										<Input
+											pr="4.5rem"
+											type="text"
+											placeholder="User event"
+											value={webhook[WebhookInputDataFields.EVENT_DESCRIPTION]}
+											onChange={(e) =>
+												inputChangehandler(
+													WebhookInputDataFields.EVENT_DESCRIPTION,
+													e.currentTarget.value,
+												)
+											}
+										/>
+									</InputGroup>
+								</Flex>
+							</Flex>
 							<Flex
 								width="100%"
 								justifyContent="start"

dashboard/src/graphql/queries/index.ts

@@ -118,7 +118,6 @@ export const WebhooksDataQuery = `
     _webhooks(params: $params){
       webhooks{
         id
-        event
         event_description
         event_name
         endpoint

dashboard/src/pages/Webhooks.tsx

@@ -56,7 +56,7 @@ interface paginationPropTypes {
 interface webhookDataTypes {
 	[WebhookInputDataFields.ID]: string;
 	[WebhookInputDataFields.EVENT_NAME]: string;
-	[WebhookInputDataFields.EVENT_DESCRIPTION]: string;
+	[WebhookInputDataFields.EVENT_DESCRIPTION]?: string;
 	[WebhookInputDataFields.ENDPOINT]: string;
 	[WebhookInputDataFields.ENABLED]: boolean;
 	[WebhookInputDataFields.HEADERS]?: Record<string, string>;
@@ -118,6 +118,7 @@ const Webhooks = () => {
 	useEffect(() => {
 		fetchWebookData();
 	}, [paginationProps.page, paginationProps.limit]);
+	console.log({ webhookData });
 	return (
 		<Box m="5" py="5" px="10" bg="white" rounded="md">
 			<Flex margin="2% 0" justifyContent="space-between" alignItems="center">

server/db/models/webhook.go

@@ -41,6 +41,7 @@ func (w *Webhook) AsAPIWebhook() *model.Webhook {
 	return &model.Webhook{
 		ID:               id,
 		EventName:        refs.NewStringRef(w.EventName),
+		EventDescription: refs.NewStringRef(w.EventDescription),
 		Endpoint:         refs.NewStringRef(w.EndPoint),
 		Headers:          headersMap,
 		Enabled:          refs.NewBoolRef(w.Enabled),