feat(webhook): implemented ui for webhooks

frontend/src/hooks/api/index.tsx

@@ -13,4 +13,5 @@ export * from "./serviceTokens";
 export * from "./subscriptions";
 export * from "./tags";
 export * from "./users";
+export * from "./webhooks";
 export * from "./workspace";

frontend/src/hooks/api/types.ts

@@ -8,6 +8,7 @@ export type { CreateServiceTokenDTO, ServiceToken } from "./serviceTokens/types"
 export type { SubscriptionPlan } from "./subscriptions/types";
 export type { WsTag } from "./tags/types";
 export type { AddUserToWsDTO, AddUserToWsRes, OrgUser, User } from "./users/types";
+export type { TWebhook } from "./webhooks/types";
 export type {
   CreateEnvironmentDTO,
   CreateWorkspaceDTO,

frontend/src/hooks/api/webhooks/index.tsx

@@ -0,0 +1,2 @@
+export { useCreateWebhook, useDeleteWebhook, useTestWebhook, useUpdateWebhook } from "./mutation";
+export { useGetWebhooks } from "./query";

frontend/src/hooks/api/webhooks/mutation.tsx

@@ -0,0 +1,67 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { queryKeys } from "./query";
+import { TCreateWebhookDto, TDeleteWebhookDto, TTestWebhookDTO, TUpdateWebhookDto } from "./types";
+
+export const useCreateWebhook = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, TCreateWebhookDto>({
+    mutationFn: async (dto) => {
+      const { data } = await apiRequest.post("/api/v1/webhooks", dto);
+      return data;
+    },
+    onSuccess: (_, { workspaceId }) => {
+      queryClient.invalidateQueries(queryKeys.getWebhooks(workspaceId));
+    }
+  });
+};
+
+export const useTestWebhook = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, TTestWebhookDTO>({
+    mutationFn: async ({ webhookId }) => {
+      const { data } = await apiRequest.post(`/api/v1/webhooks/${webhookId}/test`);
+      return data;
+    },
+    onSuccess: (_, { workspaceId }) => {
+      queryClient.invalidateQueries(queryKeys.getWebhooks(workspaceId));
+    },
+    onError: (_, { workspaceId }) => {
+      queryClient.invalidateQueries(queryKeys.getWebhooks(workspaceId));
+    }
+  });
+};
+
+export const useUpdateWebhook = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, TUpdateWebhookDto>({
+    mutationFn: async (dto) => {
+      const { data } = await apiRequest.patch(`/api/v1/webhooks/${dto.webhookId}`, {
+        isDisabled: dto.isDisabled
+      });
+      return data;
+    },
+    onSuccess: (_, { workspaceId }) => {
+      queryClient.invalidateQueries(queryKeys.getWebhooks(workspaceId));
+    }
+  });
+};
+
+export const useDeleteWebhook = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, TDeleteWebhookDto>({
+    mutationFn: async (dto) => {
+      const { data } = await apiRequest.delete(`/api/v1/webhooks/${dto.webhookId}`);
+      return data;
+    },
+    onSuccess: (_, { workspaceId }) => {
+      queryClient.invalidateQueries(queryKeys.getWebhooks(workspaceId));
+    }
+  });
+};

frontend/src/hooks/api/webhooks/query.tsx

@@ -0,0 +1,26 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { TWebhook } from "./types";
+
+export const queryKeys = {
+  getWebhooks: (workspaceId: string) => ["webhooks", { workspaceId }]
+};
+
+const fetchWebhooks = async (workspaceId: string) => {
+  const { data } = await apiRequest.get<{ webhooks: TWebhook[] }>("/api/v1/webhooks", {
+    params: {
+      workspaceId
+    }
+  });
+
+  return data.webhooks;
+};
+
+export const useGetWebhooks = (workspaceId: string) =>
+  useQuery({
+    queryKey: queryKeys.getWebhooks(workspaceId),
+    queryFn: () => fetchWebhooks(workspaceId),
+    enabled: Boolean(workspaceId)
+  });

frontend/src/hooks/api/webhooks/types.ts

@@ -0,0 +1,36 @@
+export type TWebhook = {
+  _id: string;
+  workspace: string;
+  environment: string;
+  secretPath: string;
+  url: string;
+  lastStatus: "success" | "failed";
+  lastRunErrorMessage?: string;
+  isDisabled: boolean;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type TCreateWebhookDto = {
+  workspaceId: string;
+  environment: string;
+  webhookUrl: string;
+  webhookSecretKey?: string;
+  secretPath: string;
+};
+
+export type TUpdateWebhookDto = {
+  webhookId: string;
+  workspaceId: string;
+  isDisabled?: boolean;
+};
+
+export type TDeleteWebhookDto = {
+  webhookId: string;
+  workspaceId: string;
+};
+
+export type TTestWebhookDTO = {
+  webhookId: string;
+  workspaceId: string;
+};