Merge pull request #2050 from Infisical/feat/native-slack-webhook

feat: added native slack webhook type

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

@@ -1,5 +1,11 @@
+export enum WebhookType {
+  GENERAL = "general",
+  SLACK = "slack"
+}
+
 export type TWebhook = {
   id: string;
+  type: WebhookType;
   projectId: string;
   environment: {
     slug: string;
@@ -22,6 +28,7 @@ export type TCreateWebhookDto = {
   webhookUrl: string;
   webhookSecretKey?: string;
   secretPath: string;
+  type: WebhookType;
 };
 
 export type TUpdateWebhookDto = {

frontend/src/views/Settings/ProjectSettingsPage/components/WebhooksTab/AddWebhookForm.tsx

@@ -1,9 +1,8 @@
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { yupResolver } from "@hookform/resolvers/yup";
-import * as yup from "yup";
+import { zodResolver } from "@hookform/resolvers/zod";
+import z from "zod";
 
-import GlobPatternExamples from "@app/components/basic/popups/GlobPatternExamples";
 import {
   Button,
   FormControl,
@@ -14,15 +13,28 @@ import {
   Select,
   SelectItem
 } from "@app/components/v2";
+import { SecretPathInput } from "@app/components/v2/SecretPathInput";
+import { WebhookType } from "@app/hooks/api/webhooks/types";
 
-const formSchema = yup.object({
-  environment: yup.string().required().trim().label("Environment"),
-  webhookUrl: yup.string().url().required().trim().label("Webhook URL"),
-  webhookSecretKey: yup.string().trim().label("Secret Key"),
-  secretPath: yup.string().required().trim().label("Secret Path")
-});
+const formSchema = z
+  .object({
+    environment: z.string().trim().describe("Environment"),
+    webhookUrl: z.string().url().trim().describe("Webhook URL"),
+    webhookSecretKey: z.string().trim().optional().describe("Secret Key"),
+    secretPath: z.string().trim().describe("Secret Path"),
+    type: z.nativeEnum(WebhookType).describe("Type").default(WebhookType.GENERAL)
+  })
+  .superRefine((data, ctx) => {
+    if (data.type === WebhookType.SLACK && !data.webhookUrl.includes("hooks.slack.com")) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "Incoming Webhook URL is invalid.",
+        path: ["webhookUrl"]
+      });
+    }
+  });
 
-export type TFormSchema = yup.InferType<typeof formSchema>;
+export type TFormSchema = z.infer<typeof formSchema>;
 
 type Props = {
   isOpen: boolean;
@@ -42,11 +54,50 @@ export const AddWebhookForm = ({
     handleSubmit,
     register,
     reset,
+    watch,
     formState: { errors, isSubmitting }
   } = useForm<TFormSchema>({
-    resolver: yupResolver(formSchema)
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      type: WebhookType.GENERAL
+    }
   });
 
+  const selectedWebhookType = watch("type");
+  const selectedEnvironment = watch("environment");
+
+  const generalFormFields = (
+    <>
+      <FormControl
+        label="Secret Key"
+        isError={Boolean(errors?.webhookSecretKey)}
+        errorText={errors?.webhookSecretKey?.message}
+        helperText="To generate webhook signature for verification"
+      >
+        <Input placeholder="Provided during webhook setup" {...register("webhookSecretKey")} />
+      </FormControl>
+      <FormControl
+        label="Webhook URL"
+        isRequired
+        isError={Boolean(errors?.webhookUrl)}
+        errorText={errors?.webhookUrl?.message}
+      >
+        <Input {...register("webhookUrl")} />
+      </FormControl>
+    </>
+  );
+
+  const slackFormFields = (
+    <FormControl
+      label="Incoming Webhook URL"
+      isRequired
+      isError={Boolean(errors?.webhookUrl)}
+      errorText={errors?.webhookUrl?.message}
+    >
+      <Input placeholder="https://hooks.slack.com/services/..." {...register("webhookUrl")} />
+    </FormControl>
+  );
+
   useEffect(() => {
     if (!isOpen) {
       reset();
@@ -58,6 +109,32 @@ export const AddWebhookForm = ({
       <ModalContent title="Create a new webhook">
         <form onSubmit={handleSubmit(onCreateWebhook)}>
           <div>
+            <Controller
+              control={control}
+              name="type"
+              render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                <FormControl
+                  label="Type"
+                  isRequired
+                  errorText={error?.message}
+                  isError={Boolean(error)}
+                >
+                  <Select
+                    defaultValue={field.value}
+                    {...field}
+                    onValueChange={(e) => onChange(e)}
+                    className="w-full"
+                  >
+                    <SelectItem value={WebhookType.GENERAL} key={WebhookType.GENERAL}>
+                      General
+                    </SelectItem>
+                    <SelectItem value={WebhookType.SLACK} key={WebhookType.SLACK}>
+                      Slack
+                    </SelectItem>
+                  </Select>
+                </FormControl>
+              )}
+            />
             <Controller
               control={control}
               name="environment"
@@ -84,38 +161,22 @@ export const AddWebhookForm = ({
                 </FormControl>
               )}
             />
-            <FormControl
-              label="Secret Path"
-              icon={<GlobPatternExamples />}
-              isRequired
-              isError={Boolean(errors?.secretPath)}
-              errorText={errors?.secretPath?.message}
-              helperText="Glob patterns are used to match multiple files or directories"
-            >
-              <Input
-                placeholder="glob pattern / or /**/* or /{dir1,dir2}"
-                {...register("secretPath")}
-              />
-            </FormControl>
-            <FormControl
-              label="Secret Key"
-              isError={Boolean(errors?.webhookSecretKey)}
-              errorText={errors?.webhookSecretKey?.message}
-              helperText="To generate webhook signature for verification"
-            >
-              <Input
-                placeholder="Provided during webhook setup"
-                {...register("webhookSecretKey")}
-              />
-            </FormControl>
-            <FormControl
-              label="Webhook URL"
-              isRequired
-              isError={Boolean(errors?.webhookUrl)}
-              errorText={errors?.webhookUrl?.message}
-            >
-              <Input {...register("webhookUrl")} />
-            </FormControl>
+            <Controller
+              control={control}
+              defaultValue=""
+              name="secretPath"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="Secret Path"
+                  isRequired
+                  isError={Boolean(error)}
+                  errorText={error?.message}
+                >
+                  <SecretPathInput {...field} environment={selectedEnvironment} placeholder="/" />
+                </FormControl>
+              )}
+            />
+            {selectedWebhookType === WebhookType.SLACK ? slackFormFields : generalFormFields}
           </div>
           <div className="mt-8 flex items-center">
             <Button