misc: addressed review comments

.github/workflows/build-staging-and-deploy-aws.yml

@@ -105,13 +105,6 @@ jobs:
     environment:
       name: Production
     steps:
-      - uses: twingate/github-action@v1
-        with:
-        # The Twingate Service Key used to connect Twingate to the proper service
-        # Learn more about [Twingate Services](https://docs.twingate.com/docs/services)
-        #
-        # Required
-          service-key: ${{ secrets.TWINGATE_SERVICE_KEY }}
       - name: Checkout code
         uses: actions/checkout@v2
       - name: Setup Node.js environment

.github/workflows/check-migration-file-edited.yml

@@ -1,25 +0,0 @@
-name: Check migration file edited
-
-on:
-  pull_request:
-    types: [opened, synchronize]
-    paths:
-      - 'backend/src/db/migrations/**'
-
-jobs:
-  rename:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out repository
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Check any migration files are modified, renamed or duplicated.
-        run: |
-          git diff --name-status HEAD^ HEAD backend/src/db/migrations | grep '^M\|^R\|^C' || true | cut -f2 | xargs -r -n1 basename > edited_files.txt
-          if [ -s edited_files.txt ]; then
-            echo "Exiting migration files cannot be modified."
-            cat edited_files.txt
-            exit 1
-          fi

.github/workflows/update-be-new-migration-latest-timestamp.yml

@@ -19,16 +19,18 @@ jobs:
 
       - name: Get list of newly added files in migration folder
         run: |
-          git diff --name-status HEAD^ HEAD backend/src/db/migrations | grep '^A' || true | cut -f2 | xargs -r -n1 basename > added_files.txt
+          git diff --name-status HEAD^ HEAD backend/src/db/migrations | grep '^A' | cut -f2 | xargs -n1 basename > added_files.txt
           if [ ! -s added_files.txt ]; then
             echo "No new files added. Skipping"
-            exit 0
+            echo "SKIP_RENAME=true" >> $GITHUB_ENV
           fi
 
       - name: Script to rename migrations
+        if: env.SKIP_RENAME != 'true'
         run: python .github/resources/rename_migration_files.py
 
       - name: Commit and push changes
+        if: env.SKIP_RENAME != 'true'
         run: |
           git config user.name github-actions
           git config user.email github-actions@github.com

backend/scripts/create-migration.ts

@@ -2,14 +2,13 @@
 import { execSync } from "child_process";
 import path from "path";
 import promptSync from "prompt-sync";
-import slugify from "@sindresorhus/slugify"
 
 const prompt = promptSync({ sigint: true });
 
 const migrationName = prompt("Enter name for migration: ");
 
 // Remove spaces from migration name and replace with hyphens
-const formattedMigrationName = slugify(migrationName);
+const formattedMigrationName = migrationName.replace(/\s+/g, "-");
 
 execSync(
   `npx knex migrate:make --knexfile ${path.join(__dirname, "../src/db/knexfile.ts")} -x ts ${formattedMigrationName}`,

backend/src/db/migrations/20240702055253_add-encrypted-webhook-url.ts

@@ -0,0 +1,53 @@
+import { Knex } from "knex";
+
+import { WebhookType } from "@app/services/webhook/webhook-types";
+
+import { TableName } from "../schemas";
+
+export async function up(knex: Knex): Promise<void> {
+  const hasUrlCipherText = await knex.schema.hasColumn(TableName.Webhook, "urlCipherText");
+  const hasUrlIV = await knex.schema.hasColumn(TableName.Webhook, "urlIV");
+  const hasUrlTag = await knex.schema.hasColumn(TableName.Webhook, "urlTag");
+  const hasType = await knex.schema.hasColumn(TableName.Webhook, "type");
+
+  if (await knex.schema.hasTable(TableName.Webhook)) {
+    await knex.schema.alterTable(TableName.Webhook, (tb) => {
+      if (!hasUrlCipherText) {
+        tb.text("urlCipherText");
+      }
+      if (!hasUrlIV) {
+        tb.string("urlIV");
+      }
+      if (!hasUrlTag) {
+        tb.string("urlTag");
+      }
+      if (!hasType) {
+        tb.string("type").defaultTo(WebhookType.GENERAL);
+      }
+    });
+  }
+}
+
+export async function down(knex: Knex): Promise<void> {
+  const hasUrlCipherText = await knex.schema.hasColumn(TableName.Webhook, "urlCipherText");
+  const hasUrlIV = await knex.schema.hasColumn(TableName.Webhook, "urlIV");
+  const hasUrlTag = await knex.schema.hasColumn(TableName.Webhook, "urlTag");
+  const hasType = await knex.schema.hasColumn(TableName.Webhook, "type");
+
+  if (await knex.schema.hasTable(TableName.Webhook)) {
+    await knex.schema.alterTable(TableName.Webhook, (t) => {
+      if (hasUrlCipherText) {
+        t.dropColumn("urlCipherText");
+      }
+      if (hasUrlIV) {
+        t.dropColumn("urlIV");
+      }
+      if (hasUrlTag) {
+        t.dropColumn("urlTag");
+      }
+      if (hasType) {
+        t.dropColumn("type");
+      }
+    });
+  }
+}

backend/src/db/schemas/webhooks.ts

@@ -21,7 +21,11 @@ export const WebhooksSchema = z.object({
   keyEncoding: z.string().nullable().optional(),
   createdAt: z.date(),
   updatedAt: z.date(),
-  envId: z.string().uuid()
+  envId: z.string().uuid(),
+  urlCipherText: z.string().nullable().optional(),
+  urlIV: z.string().nullable().optional(),
+  urlTag: z.string().nullable().optional(),
+  type: z.string().default("general").nullable().optional()
 });
 
 export type TWebhooks = z.infer<typeof WebhooksSchema>;

backend/src/ee/services/ldap-config/ldap-config-service.ts

@@ -53,7 +53,7 @@ import {
   TTestLdapConnectionDTO,
   TUpdateLdapCfgDTO
 } from "./ldap-config-types";
-import { searchGroups, testLDAPConfig } from "./ldap-fns";
+import { testLDAPConfig } from "./ldap-fns";
 import { TLdapGroupMapDALFactory } from "./ldap-group-map-dal";
 
 type TLdapConfigServiceFactoryDep = {
@@ -286,7 +286,7 @@ export const ldapConfigServiceFactory = ({
     return ldapConfig;
   };
 
-  const getLdapCfg = async (filter: { orgId: string; isActive?: boolean; id?: string }) => {
+  const getLdapCfg = async (filter: { orgId: string; isActive?: boolean }) => {
     const ldapConfig = await ldapConfigDAL.findOne(filter);
     if (!ldapConfig) throw new BadRequestError({ message: "Failed to find organization LDAP data" });
 
@@ -716,25 +716,11 @@ export const ldapConfigServiceFactory = ({
         message: "Failed to create LDAP group map due to plan restriction. Upgrade plan to create LDAP group map."
       });
 
-    const ldapConfig = await getLdapCfg({
-      orgId,
-      id: ldapConfigId
+    const ldapConfig = await ldapConfigDAL.findOne({
+      id: ldapConfigId,
+      orgId
     });
-
-    if (!ldapConfig.groupSearchBase) {
-      throw new BadRequestError({
-        message: "Configure a group search base in your LDAP configuration in order to proceed."
-      });
-    }
-
-    const groupSearchFilter = `(cn=${ldapGroupCN})`;
-    const groups = await searchGroups(ldapConfig, groupSearchFilter, ldapConfig.groupSearchBase);
-
-    if (!groups.some((g) => g.cn === ldapGroupCN)) {
-      throw new BadRequestError({
-        message: "Failed to find LDAP Group CN"
-      });
-    }
+    if (!ldapConfig) throw new BadRequestError({ message: "Failed to find organization LDAP data" });
 
     const group = await groupDAL.findOne({ slug: groupSlug, orgId });
     if (!group) throw new BadRequestError({ message: "Failed to find group" });

backend/src/lib/logger/logger.ts

@@ -58,8 +58,7 @@ const redactedKeys = [
   "decryptedSecret",
   "secrets",
   "key",
-  "password",
-  "config"
+  "password"
 ];
 
 export const initLogger = async () => {

backend/src/server/routes/v1/webhook-router.ts

@@ -6,13 +6,17 @@ import { removeTrailingSlash } from "@app/lib/fn";
 import { readLimit, writeLimit } from "@app/server/config/rateLimiter";
 import { verifyAuth } from "@app/server/plugins/auth/verify-auth";
 import { AuthMode } from "@app/services/auth/auth-type";
+import { WebhookType } from "@app/services/webhook/webhook-types";
 
 export const sanitizedWebhookSchema = WebhooksSchema.omit({
   encryptedSecretKey: true,
   iv: true,
   tag: true,
   algorithm: true,
-  keyEncoding: true
+  keyEncoding: true,
+  urlCipherText: true,
+  urlIV: true,
+  urlTag: true
 }).merge(
   z.object({
     projectId: z.string(),
@@ -33,13 +37,24 @@ export const registerWebhookRouter = async (server: FastifyZodProvider) => {
     },
     onRequest: verifyAuth([AuthMode.JWT]),
     schema: {
-      body: z.object({
-        workspaceId: z.string().trim(),
-        environment: z.string().trim(),
-        webhookUrl: z.string().url().trim(),
-        webhookSecretKey: z.string().trim().optional(),
-        secretPath: z.string().trim().default("/").transform(removeTrailingSlash)
-      }),
+      body: z
+        .object({
+          type: z.nativeEnum(WebhookType).default(WebhookType.GENERAL),
+          workspaceId: z.string().trim(),
+          environment: z.string().trim(),
+          webhookUrl: z.string().url().trim(),
+          webhookSecretKey: z.string().trim().optional(),
+          secretPath: z.string().trim().default("/").transform(removeTrailingSlash)
+        })
+        .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"]
+            });
+          }
+        }),
       response: {
         200: z.object({
           message: z.string(),

backend/src/services/webhook/webhook-fns.ts

@@ -4,55 +4,63 @@ import { AxiosError } from "axios";
 import picomatch from "picomatch";
 
 import { SecretKeyEncoding, TWebhooks } from "@app/db/schemas";
-import { getConfig } from "@app/lib/config/env";
 import { request } from "@app/lib/config/request";
-import { decryptSymmetric, decryptSymmetric128BitHexKeyUTF8 } from "@app/lib/crypto";
+import { infisicalSymmetricDecrypt } from "@app/lib/crypto/encryption";
 import { BadRequestError } from "@app/lib/errors";
 import { logger } from "@app/lib/logger";
 
 import { TProjectEnvDALFactory } from "../project-env/project-env-dal";
 import { TWebhookDALFactory } from "./webhook-dal";
+import { WebhookType } from "./webhook-types";
 
 const WEBHOOK_TRIGGER_TIMEOUT = 15 * 1000;
-export const triggerWebhookRequest = async (
-  { url, encryptedSecretKey, iv, tag, keyEncoding }: TWebhooks,
-  data: Record<string, unknown>
-) => {
-  const headers: Record<string, string> = {};
-  const payload = { ...data, timestamp: Date.now() };
-  const appCfg = getConfig();
+
+export const decryptWebhookDetails = (webhook: TWebhooks) => {
+  const { keyEncoding, iv, encryptedSecretKey, tag, urlCipherText, urlIV, urlTag, url } = webhook;
+
+  let decryptedSecretKey = "";
+  let decryptedUrl = url;
 
   if (encryptedSecretKey) {
-    const encryptionKey = appCfg.ENCRYPTION_KEY;
-    const rootEncryptionKey = appCfg.ROOT_ENCRYPTION_KEY;
-    let secretKey;
-    if (rootEncryptionKey && keyEncoding === SecretKeyEncoding.BASE64) {
-      // case: encoding scheme is base64
-      secretKey = decryptSymmetric({
-        ciphertext: encryptedSecretKey,
-        iv: iv as string,
-        tag: tag as string,
-        key: rootEncryptionKey
-      });
-    } else if (encryptionKey && keyEncoding === SecretKeyEncoding.UTF8) {
-      // case: encoding scheme is utf8
-      secretKey = decryptSymmetric128BitHexKeyUTF8({
-        ciphertext: encryptedSecretKey,
-        iv: iv as string,
-        tag: tag as string,
-        key: encryptionKey
-      });
-    }
-    if (secretKey) {
-      const webhookSign = crypto.createHmac("sha256", secretKey).update(JSON.stringify(payload)).digest("hex");
-      headers["x-infisical-signature"] = `t=${payload.timestamp};${webhookSign}`;
-    }
+    decryptedSecretKey = infisicalSymmetricDecrypt({
+      keyEncoding: keyEncoding as SecretKeyEncoding,
+      ciphertext: encryptedSecretKey,
+      iv: iv as string,
+      tag: tag as string
+    });
   }
+
+  if (urlCipherText) {
+    decryptedUrl = infisicalSymmetricDecrypt({
+      keyEncoding: keyEncoding as SecretKeyEncoding,
+      ciphertext: urlCipherText,
+      iv: urlIV as string,
+      tag: urlTag as string
+    });
+  }
+
+  return {
+    secretKey: decryptedSecretKey,
+    url: decryptedUrl
+  };
+};
+
+export const triggerWebhookRequest = async (webhook: TWebhooks, data: Record<string, unknown>) => {
+  const headers: Record<string, string> = {};
+  const payload = { ...data, timestamp: Date.now() };
+  const { secretKey, url } = decryptWebhookDetails(webhook);
+
+  if (secretKey) {
+    const webhookSign = crypto.createHmac("sha256", secretKey).update(JSON.stringify(payload)).digest("hex");
+    headers["x-infisical-signature"] = `t=${payload.timestamp};${webhookSign}`;
+  }
+
   const req = await request.post(url, payload, {
     headers,
     timeout: WEBHOOK_TRIGGER_TIMEOUT,
     signal: AbortSignal.timeout(WEBHOOK_TRIGGER_TIMEOUT)
   });
+
   return req;
 };
 
@@ -60,15 +68,48 @@ export const getWebhookPayload = (
   eventName: string,
   workspaceId: string,
   environment: string,
-  secretPath?: string
-) => ({
-  event: eventName,
-  project: {
-    workspaceId,
-    environment,
-    secretPath
+  secretPath?: string,
+  type?: string | null
+) => {
+  switch (type) {
+    case WebhookType.SLACK:
+      return {
+        text: "A secret value has been added or modified.",
+        attachments: [
+          {
+            color: "#E7F256",
+            fields: [
+              {
+                title: "Workspace ID",
+                value: workspaceId,
+                short: false
+              },
+              {
+                title: "Environment",
+                value: environment,
+                short: false
+              },
+              {
+                title: "Secret Path",
+                value: secretPath,
+                short: false
+              }
+            ]
+          }
+        ]
+      };
+    case WebhookType.GENERAL:
+    default:
+      return {
+        event: eventName,
+        project: {
+          workspaceId,
+          environment,
+          secretPath
+        }
+      };
   }
-});
+};
 
 export type TFnTriggerWebhookDTO = {
   projectId: string;
@@ -95,9 +136,10 @@ export const fnTriggerWebhook = async ({
   logger.info("Secret webhook job started", { environment, secretPath, projectId });
   const webhooksTriggered = await Promise.allSettled(
     toBeTriggeredHooks.map((hook) =>
-      triggerWebhookRequest(hook, getWebhookPayload("secrets.modified", projectId, environment, secretPath))
+      triggerWebhookRequest(hook, getWebhookPayload("secrets.modified", projectId, environment, secretPath, hook.type))
     )
   );
+
   // filter hooks by status
   const successWebhooks = webhooksTriggered
     .filter(({ status }) => status === "fulfilled")

backend/src/services/webhook/webhook-service.ts

@@ -1,15 +1,14 @@
 import { ForbiddenError } from "@casl/ability";
 
-import { SecretEncryptionAlgo, SecretKeyEncoding, TWebhooksInsert } from "@app/db/schemas";
+import { TWebhooksInsert } from "@app/db/schemas";
 import { TPermissionServiceFactory } from "@app/ee/services/permission/permission-service";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/ee/services/permission/project-permission";
-import { getConfig } from "@app/lib/config/env";
-import { encryptSymmetric, encryptSymmetric128BitHexKeyUTF8 } from "@app/lib/crypto";
+import { infisicalSymmetricEncypt } from "@app/lib/crypto/encryption";
 import { BadRequestError } from "@app/lib/errors";
 
 import { TProjectEnvDALFactory } from "../project-env/project-env-dal";
 import { TWebhookDALFactory } from "./webhook-dal";
-import { getWebhookPayload, triggerWebhookRequest } from "./webhook-fns";
+import { decryptWebhookDetails, getWebhookPayload, triggerWebhookRequest } from "./webhook-fns";
 import {
   TCreateWebhookDTO,
   TDeleteWebhookDTO,
@@ -36,7 +35,8 @@ export const webhookServiceFactory = ({ webhookDAL, projectEnvDAL, permissionSer
     webhookUrl,
     environment,
     secretPath,
-    webhookSecretKey
+    webhookSecretKey,
+    type
   }: TCreateWebhookDTO) => {
     const { permission } = await permissionService.getProjectPermission(
       actor,
@@ -50,30 +50,29 @@ export const webhookServiceFactory = ({ webhookDAL, projectEnvDAL, permissionSer
     if (!env) throw new BadRequestError({ message: "Env not found" });
 
     const insertDoc: TWebhooksInsert = {
-      url: webhookUrl,
+      url: "", // deprecated - we are moving away from plaintext URLs
       envId: env.id,
       isDisabled: false,
-      secretPath: secretPath || "/"
+      secretPath: secretPath || "/",
+      type
     };
+
     if (webhookSecretKey) {
-      const appCfg = getConfig();
-      const encryptionKey = appCfg.ENCRYPTION_KEY;
-      const rootEncryptionKey = appCfg.ROOT_ENCRYPTION_KEY;
-      if (rootEncryptionKey) {
-        const { ciphertext, iv, tag } = encryptSymmetric(webhookSecretKey, rootEncryptionKey);
-        insertDoc.encryptedSecretKey = ciphertext;
-        insertDoc.iv = iv;
-        insertDoc.tag = tag;
-        insertDoc.algorithm = SecretEncryptionAlgo.AES_256_GCM;
-        insertDoc.keyEncoding = SecretKeyEncoding.BASE64;
-      } else if (encryptionKey) {
-        const { ciphertext, iv, tag } = encryptSymmetric128BitHexKeyUTF8(webhookSecretKey, encryptionKey);
-        insertDoc.encryptedSecretKey = ciphertext;
-        insertDoc.iv = iv;
-        insertDoc.tag = tag;
-        insertDoc.algorithm = SecretEncryptionAlgo.AES_256_GCM;
-        insertDoc.keyEncoding = SecretKeyEncoding.UTF8;
-      }
+      const { ciphertext, iv, tag, algorithm, encoding } = infisicalSymmetricEncypt(webhookSecretKey);
+      insertDoc.encryptedSecretKey = ciphertext;
+      insertDoc.iv = iv;
+      insertDoc.tag = tag;
+      insertDoc.algorithm = algorithm;
+      insertDoc.keyEncoding = encoding;
+    }
+
+    if (webhookUrl) {
+      const { ciphertext, iv, tag, algorithm, encoding } = infisicalSymmetricEncypt(webhookUrl);
+      insertDoc.urlCipherText = ciphertext;
+      insertDoc.urlIV = iv;
+      insertDoc.urlTag = tag;
+      insertDoc.algorithm = algorithm;
+      insertDoc.keyEncoding = encoding;
     }
 
     const webhook = await webhookDAL.create(insertDoc);
@@ -131,7 +130,7 @@ export const webhookServiceFactory = ({ webhookDAL, projectEnvDAL, permissionSer
     try {
       await triggerWebhookRequest(
         webhook,
-        getWebhookPayload("test", webhook.projectId, webhook.environment.slug, webhook.secretPath)
+        getWebhookPayload("test", webhook.projectId, webhook.environment.slug, webhook.secretPath, webhook.type)
       );
     } catch (err) {
       webhookError = (err as Error).message;
@@ -162,7 +161,14 @@ export const webhookServiceFactory = ({ webhookDAL, projectEnvDAL, permissionSer
     );
     ForbiddenError.from(permission).throwUnlessCan(ProjectPermissionActions.Read, ProjectPermissionSub.Webhooks);
 
-    return webhookDAL.findAllWebhooks(projectId, environment, secretPath);
+    const webhooks = await webhookDAL.findAllWebhooks(projectId, environment, secretPath);
+    return webhooks.map((w) => {
+      const { url } = decryptWebhookDetails(w);
+      return {
+        ...w,
+        url
+      };
+    });
   };
 
   return {

backend/src/services/webhook/webhook-types.ts

@@ -5,6 +5,7 @@ export type TCreateWebhookDTO = {
   secretPath?: string;
   webhookUrl: string;
   webhookSecretKey?: string;
+  type: string;
 } & TProjectPermission;
 
 export type TUpdateWebhookDTO = {
@@ -24,3 +25,8 @@ export type TListWebhookDTO = {
   environment?: string;
   secretPath?: string;
 } & TProjectPermission;
+
+export enum WebhookType {
+  GENERAL = "general",
+  SLACK = "slack"
+}

docs/documentation/platform/webhooks.mdx

@@ -9,7 +9,9 @@ Webhooks can be used to trigger changes to your integrations when secrets are mo
 
 To create a webhook for a particular project, go to `Project Settings > Webhooks`.
 
-When creating a webhook, you can specify an environment and folder path (using glob patterns) to trigger only specific integrations. 
+Infisical supports two webhook types - General and Slack. If you need to integrate with Slack, use the Slack type with an [Incoming Webhook](https://api.slack.com/messaging/webhooks). When creating a webhook, you can specify an environment and folder path to trigger only specific integrations.
+
+![webhook-create](../../images/webhook-create.png)
 
 ## Secret Key Verification
 
@@ -27,7 +29,7 @@ If the signature in the header matches the signature that you generated, then yo
 {
   "event": "secret.modified",
   "project": {
-    "workspaceId":"the workspace id",
+    "workspaceId": "the workspace id",
     "environment": "project environment",
     "secretPath": "project folder path"
   },

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/OrgSettingsPage/components/OrgAuthTab/LDAPGroupMapModal.tsx

@@ -1,6 +1,4 @@
-import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
-import { useRouter } from "next/router";
 import { faUsers, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -68,9 +66,8 @@ export const LDAPGroupMapModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }:
   const { mutateAsync: createLDAPGroupMapping, isLoading: createIsLoading } =
     useCreateLDAPGroupMapping();
   const { mutateAsync: deleteLDAPGroupMapping } = useDeleteLDAPGroupMapping();
-  const router = useRouter();
 
-  const { control, handleSubmit, reset, setValue } = useForm<TFormData>({
+  const { control, handleSubmit, reset } = useForm<TFormData>({
     resolver: zodResolver(schema),
     defaultValues: {
       ldapGroupCN: "",
@@ -133,12 +130,6 @@ export const LDAPGroupMapModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }:
     }
   };
 
-  useEffect(() => {
-    if (groups && groups.length > 0) {
-      setValue("groupSlug", groups[0].slug);
-    }
-  }, [groups, popUp.ldapGroupMap.isOpen]);
-
   return (
     <Modal
       isOpen={popUp?.ldapGroupMap?.isOpen}
@@ -148,141 +139,117 @@ export const LDAPGroupMapModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }:
       }}
     >
       <ModalContent title="Manage LDAP Group Mappings">
-        {groups && groups.length > 0 && (
-          <>
-            <h2 className="mb-4">New Group Mapping</h2>
-            <form onSubmit={handleSubmit(onFormSubmit)} className="mb-8">
-              <div className="flex">
-                <Controller
-                  control={control}
-                  name="ldapGroupCN"
-                  render={({ field, fieldState: { error } }) => (
-                    <FormControl
-                      label="LDAP Group CN"
-                      errorText={error?.message}
-                      isError={Boolean(error)}
-                    >
-                      <Input {...field} placeholder="Engineering" />
-                    </FormControl>
-                  )}
-                />
-                <Controller
-                  control={control}
-                  name="groupSlug"
-                  defaultValue=""
-                  render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                    <FormControl
-                      label="Infisical Group"
-                      errorText={error?.message}
-                      isError={Boolean(error)}
-                      className="ml-4 w-full"
-                    >
-                      <div className="flex">
-                        <Select
-                          defaultValue={field.value}
-                          {...field}
-                          onValueChange={(e) => onChange(e)}
-                          className="w-full"
-                        >
-                          {(groups || []).map(({ name, id, slug }) => (
-                            <SelectItem value={slug} key={`internal-group-${id}`}>
-                              {name}
-                            </SelectItem>
-                          ))}
-                        </Select>
-                        <Button
-                          className="ml-4"
-                          size="sm"
-                          type="submit"
-                          isLoading={createIsLoading}
-                        >
-                          Add mapping
-                        </Button>
-                      </div>
-                    </FormControl>
-                  )}
-                />
-              </div>
-            </form>
-            <h2 className="mb-4">Group Mappings</h2>
-            <TableContainer>
-              <Table>
-                <THead>
-                  <Tr>
-                    <Th>LDAP Group CN</Th>
-                    <Th>Infisical Group</Th>
-                    <Th className="w-5" />
-                  </Tr>
-                </THead>
-                <TBody>
-                  {isLoading && <TableSkeleton columns={3} innerKey="ldap-group-maps" />}
-                  {!isLoading &&
-                    groupMaps?.map(({ id, ldapGroupCN, group }) => {
-                      return (
-                        <Tr className="h-10 items-center" key={`ldap-group-map-${id}`}>
-                          <Td>{ldapGroupCN}</Td>
-                          <Td>{group.name}</Td>
-                          <Td>
-                            <IconButton
-                              onClick={() => {
-                                handlePopUpOpen("deleteLdapGroupMap", {
-                                  ldapGroupMapId: id,
-                                  ldapGroupCN
-                                });
-                              }}
-                              size="lg"
-                              colorSchema="danger"
-                              variant="plain"
-                              ariaLabel="update"
-                            >
-                              <FontAwesomeIcon icon={faXmark} />
-                            </IconButton>
-                          </Td>
-                        </Tr>
-                      );
-                    })}
-                </TBody>
-              </Table>
-              {groupMaps?.length === 0 && (
-                <EmptyState title="No LDAP group mappings found" icon={faUsers} />
+        <h2 className="mb-4">New Group Mapping</h2>
+        <form onSubmit={handleSubmit(onFormSubmit)} className="mb-8">
+          <div className="flex">
+            <Controller
+              control={control}
+              name="ldapGroupCN"
+              render={({ field, fieldState: { error } }) => (
+                <FormControl
+                  label="LDAP Group CN"
+                  errorText={error?.message}
+                  isError={Boolean(error)}
+                >
+                  <Input {...field} placeholder="Engineering" />
+                </FormControl>
+              )}
+            />
+            <Controller
+              control={control}
+              name="groupSlug"
+              defaultValue=""
+              render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+                <FormControl
+                  label="Infisical Group"
+                  errorText={error?.message}
+                  isError={Boolean(error)}
+                  className="ml-4 w-full"
+                >
+                  <div className="flex">
+                    <Select
+                      defaultValue={field.value}
+                      {...field}
+                      onValueChange={(e) => onChange(e)}
+                      className="w-full"
+                    >
+                      {(groups || []).map(({ name, id, slug }) => (
+                        <SelectItem value={slug} key={`internal-group-${id}`}>
+                          {name}
+                        </SelectItem>
+                      ))}
+                    </Select>
+                    <Button className="ml-4" size="sm" type="submit" isLoading={createIsLoading}>
+                      Add mapping
+                    </Button>
+                  </div>
+                </FormControl>
               )}
-            </TableContainer>
-            <DeleteActionModal
-              isOpen={popUp.deleteLdapGroupMap.isOpen}
-              title={`Are you sure want to delete the group mapping for ${
-                (popUp?.deleteLdapGroupMap?.data as { ldapGroupCN: string })?.ldapGroupCN || ""
-              }?`}
-              onChange={(isOpen) => handlePopUpToggle("deleteLdapGroupMap", isOpen)}
-              deleteKey="confirm"
-              onDeleteApproved={() => {
-                const deleteLdapGroupMapData = popUp?.deleteLdapGroupMap?.data as {
-                  ldapGroupMapId: string;
-                  ldapGroupCN: string;
-                };
-                return onDeleteGroupMapSubmit({
-                  ldapConfigId: ldapConfig?.id ?? "",
-                  ldapGroupMapId: deleteLdapGroupMapData.ldapGroupMapId,
-                  ldapGroupCN: deleteLdapGroupMapData.ldapGroupCN
-                });
-              }}
             />
-          </>
-        )}
-        {groups && groups.length === 0 && (
-          <div>
-            <div>
-              You do not have any Infisical groups in your organization. Create one in order to
-              proceed.
-            </div>
-            <Button
-              className="mt-4"
-              size="sm"
-              onClick={() => router.push(`/org/${currentOrg?.id}/members`)}
-            >
-              Create
-            </Button>
           </div>
-        )}
+        </form>
+        <h2 className="mb-4">Group Mappings</h2>
+        <TableContainer>
+          <Table>
+            <THead>
+              <Tr>
+                <Th>LDAP Group CN</Th>
+                <Th>Infisical Group</Th>
+                <Th className="w-5" />
+              </Tr>
+            </THead>
+            <TBody>
+              {isLoading && <TableSkeleton columns={3} innerKey="ldap-group-maps" />}
+              {!isLoading &&
+                groupMaps?.map(({ id, ldapGroupCN, group }) => {
+                  return (
+                    <Tr className="h-10 items-center" key={`ldap-group-map-${id}`}>
+                      <Td>{ldapGroupCN}</Td>
+                      <Td>{group.name}</Td>
+                      <Td>
+                        <IconButton
+                          onClick={() => {
+                            handlePopUpOpen("deleteLdapGroupMap", {
+                              ldapGroupMapId: id,
+                              ldapGroupCN
+                            });
+                          }}
+                          size="lg"
+                          colorSchema="danger"
+                          variant="plain"
+                          ariaLabel="update"
+                        >
+                          <FontAwesomeIcon icon={faXmark} />
+                        </IconButton>
+                      </Td>
+                    </Tr>
+                  );
+                })}
+            </TBody>
+          </Table>
+          {groupMaps?.length === 0 && (
+            <EmptyState title="No LDAP group mappings found" icon={faUsers} />
+          )}
+        </TableContainer>
+        <DeleteActionModal
+          isOpen={popUp.deleteLdapGroupMap.isOpen}
+          title={`Are you sure want to delete the group mapping for ${
+            (popUp?.deleteLdapGroupMap?.data as { ldapGroupCN: string })?.ldapGroupCN || ""
+          }?`}
+          onChange={(isOpen) => handlePopUpToggle("deleteLdapGroupMap", isOpen)}
+          deleteKey="confirm"
+          onDeleteApproved={() => {
+            const deleteLdapGroupMapData = popUp?.deleteLdapGroupMap?.data as {
+              ldapGroupMapId: string;
+              ldapGroupCN: string;
+            };
+            return onDeleteGroupMapSubmit({
+              ldapConfigId: ldapConfig?.id ?? "",
+              ldapGroupMapId: deleteLdapGroupMapData.ldapGroupMapId,
+              ldapGroupCN: deleteLdapGroupMapData.ldapGroupCN
+            });
+          }}
+        />
       </ModalContent>
     </Modal>
   );

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