From df6e1a30a4cd5b2eba34bf674fcde2e4ca6ca4dc Mon Sep 17 00:00:00 2001
From: Ryan Hopper-Lowe <ryan@acorn.io>
Date: Thu, 21 Nov 2024 13:48:41 -0600
Subject: [PATCH] feat: add ability to remove secret from webhook

---
 .../app/components/webhooks/WebhookForm.tsx   | 58 ++++++++++++++-----
 .../webhooks/WebhookFormContext.tsx           |  3 +-
 ui/admin/app/lib/model/webhooks.ts            |  6 +-
 3 files changed, 46 insertions(+), 21 deletions(-)

diff --git a/ui/admin/app/components/webhooks/WebhookForm.tsx b/ui/admin/app/components/webhooks/WebhookForm.tsx
index 1596a59b..2011bf3b 100644
--- a/ui/admin/app/components/webhooks/WebhookForm.tsx
+++ b/ui/admin/app/components/webhooks/WebhookForm.tsx
@@ -1,4 +1,3 @@
-import { useEffect, useState } from "react";
 import useSWR from "swr";
 
 import { WorkflowService } from "~/lib/service/api/workflowService";
@@ -9,7 +8,8 @@ import {
     ControlledInput,
 } from "~/components/form/controlledInputs";
 import { Button } from "~/components/ui/button";
-import { FormItem, FormLabel } from "~/components/ui/form";
+import { Checkbox } from "~/components/ui/checkbox";
+import { FormControl, FormItem, FormLabel } from "~/components/ui/form";
 import { MultiSelect } from "~/components/ui/multi-select";
 import { ScrollArea } from "~/components/ui/scroll-area";
 import {
@@ -39,19 +39,25 @@ export function WebhookFormContent() {
     const { form, handleSubmit, isLoading, isEdit, hasToken, hasSecret } =
         useWebhookFormContext();
 
+    const { setValue, watch } = form;
+
     const getWorkflows = useSWR(WorkflowService.getWorkflows.key(), () =>
         WorkflowService.getWorkflows()
     );
 
     const workflows = getWorkflows.data;
 
-    // note(ryanhopperlowe): this will change depending on webhook type
-    const validationHeader = form.watch("validationHeader");
-    useEffect(() => {
-        if (!validationHeader) {
-            form.setValue("validationHeader", "X-Hub-Signature-256");
-        }
-    }, [form, validationHeader]);
+    const validationHeader = watch("validationHeader");
+    const secret = watch("secret");
+
+    const removeSecret = () => {
+        setValue("secret", "");
+        setValue("validationHeader", "");
+    };
+
+    const addSecret = () => setValue("validationHeader", "X-Hub-Signature-256");
+
+    const secretIsRemoved = hasSecret && !validationHeader && !secret;
 
     return (
         <ScrollArea className="h-full">
@@ -113,13 +119,33 @@ export function WebhookFormContent() {
                     )}
                 </ControlledCustomInput>
 
-                <ControlledInput
-                    control={form.control}
-                    name="secret"
-                    label="Secret"
-                    description="This secret should match the secret you provide to GitHub."
-                    placeholder={hasSecret ? "(unchanged)" : ""}
-                />
+                <div className="space-y-2">
+                    <ControlledInput
+                        control={form.control}
+                        name="secret"
+                        label="Secret"
+                        description="This secret should match the secret you provide to GitHub."
+                        placeholder={hasSecret ? "(unchanged)" : ""}
+                        disabled={secretIsRemoved}
+                        onChange={(e) => {
+                            if (!hasSecret && e.target.value) addSecret();
+                        }}
+                    />
+
+                    <FormItem className="flex items-center gap-2 space-y-0">
+                        <FormControl>
+                            <Checkbox
+                                checked={secretIsRemoved}
+                                onCheckedChange={(val) => {
+                                    if (val) removeSecret();
+                                    else addSecret();
+                                }}
+                            />
+                        </FormControl>
+
+                        <FormLabel>No Secret</FormLabel>
+                    </FormItem>
+                </div>
 
                 <TypographyH4>Advanced</TypographyH4>
 
diff --git a/ui/admin/app/components/webhooks/WebhookFormContext.tsx b/ui/admin/app/components/webhooks/WebhookFormContext.tsx
index e6297909..157d42c2 100644
--- a/ui/admin/app/components/webhooks/WebhookFormContext.tsx
+++ b/ui/admin/app/components/webhooks/WebhookFormContext.tsx
@@ -62,9 +62,10 @@ export function WebhookFormContextProvider({
             alias: webhook?.alias ?? "",
             workflow: webhook?.workflow ?? "",
             headers: webhook?.headers ?? [],
-            secret: "",
             validationHeader: webhook?.validationHeader ?? "",
+            secret: "",
             token: "",
+            type: "GitHub",
         }),
         [webhook]
     );
diff --git a/ui/admin/app/lib/model/webhooks.ts b/ui/admin/app/lib/model/webhooks.ts
index 6b6a7c65..16df7ed3 100644
--- a/ui/admin/app/lib/model/webhooks.ts
+++ b/ui/admin/app/lib/model/webhooks.ts
@@ -36,10 +36,8 @@ export const WebhookSchema = z.object({
     workflow: z.string().min(1, "Workflow is required").default(""),
     headers: z.array(z.string()).default([]),
     secret: z.string().default(""),
-    validationHeader: z
-        .string()
-        .min(1, "Validation header is required")
-        .default(""),
+    validationHeader: z.string().default(""),
     token: z.string().default(""),
+    type: z.enum(["GitHub"]),
 });
 export type WebhookFormType = z.infer<typeof WebhookSchema>;