From 260fd1a7e37eb789fc8412926093d09f252e8d82 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Wed, 5 Feb 2025 12:11:45 +0530
Subject: [PATCH 1/5] refactor: move webhook events to utils folder

---
 ui/src/containers/webhooks/create/index.tsx               | 8 ++++++--
 .../webhooks/create/events.ts => utils/webhook_events.ts} | 0
 2 files changed, 6 insertions(+), 2 deletions(-)
 rename ui/src/{containers/webhooks/create/events.ts => utils/webhook_events.ts} (100%)

diff --git a/ui/src/containers/webhooks/create/index.tsx b/ui/src/containers/webhooks/create/index.tsx
index 8f7db4493..b16a2a1de 100644
--- a/ui/src/containers/webhooks/create/index.tsx
+++ b/ui/src/containers/webhooks/create/index.tsx
@@ -7,7 +7,7 @@ import { FormProvider, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Form, FormSubmit } from "@radix-ui/react-form";
 import { CustomFieldName } from "~/components/CustomField";
-import events from "./events";
+import events from "~/utils/webhook_events";
 import { SheetFooter } from "~/components/sheet/footer";
 import { useFrontier } from "@raystack/frontier/react";
 import { V1Beta1WebhookRequestBody } from "@raystack/frontier";
@@ -77,7 +77,11 @@ export default function CreateWebhooks() {
       >
         <FormProvider {...methods}>
           <Form onSubmit={methods.handleSubmit(onSubmit)}>
-            <SheetHeader title="Add new Webhook" onClick={onOpenChange} data-test-id="admin-ui-add-new-webhook-btn" />
+            <SheetHeader
+              title="Add new Webhook"
+              onClick={onOpenChange}
+              data-test-id="admin-ui-add-new-webhook-btn"
+            />
             <Flex direction="column" gap="large" style={styles.main}>
               <CustomFieldName
                 name="url"
diff --git a/ui/src/containers/webhooks/create/events.ts b/ui/src/utils/webhook_events.ts
similarity index 100%
rename from ui/src/containers/webhooks/create/events.ts
rename to ui/src/utils/webhook_events.ts

From 7199274f0620c7b5ad3f7dfda54ed76809cffcee Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Wed, 5 Feb 2025 12:45:21 +0530
Subject: [PATCH 2/5] feat: add action dropdown for service user

---
 ui/src/containers/webhooks/columns.tsx | 35 ++++++++++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/ui/src/containers/webhooks/columns.tsx b/ui/src/containers/webhooks/columns.tsx
index 5b0dbd2c3..2de6db90d 100644
--- a/ui/src/containers/webhooks/columns.tsx
+++ b/ui/src/containers/webhooks/columns.tsx
@@ -1,4 +1,5 @@
-import { ApsaraColumnDef } from "@raystack/apsara";
+import { DotsVerticalIcon, TrashIcon, UpdateIcon } from "@radix-ui/react-icons";
+import { ApsaraColumnDef, DropdownMenu, Flex } from "@raystack/apsara";
 import { V1Beta1Webhook } from "@raystack/frontier";
 
 export const getColumns: () => ApsaraColumnDef<V1Beta1Webhook>[] = () => {
@@ -33,7 +34,37 @@ export const getColumns: () => ApsaraColumnDef<V1Beta1Webhook>[] = () => {
     {
       header: "Action",
       accessorKey: "id",
-      cell: () => null,
+      cell: () => (
+        <DropdownMenu style={{ padding: "0 !important" }}>
+          <DropdownMenu.Trigger asChild style={{ cursor: "pointer" }}>
+            <DotsVerticalIcon />
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content align="end">
+            <DropdownMenu.Group style={{ padding: 0 }}>
+              <DropdownMenu.Item style={{ padding: 0 }}>
+                <Flex
+                  style={{ padding: "12px" }}
+                  gap={"small"}
+                  data-test-id="admin-ui-webhook-update-btn"
+                >
+                  <UpdateIcon />
+                  Update
+                </Flex>
+              </DropdownMenu.Item>
+              <DropdownMenu.Item style={{ padding: 0 }}>
+                <Flex
+                  style={{ padding: "12px" }}
+                  gap={"small"}
+                  data-test-id="admin-ui-webhook-delete-btn"
+                >
+                  <TrashIcon />
+                  Delete
+                </Flex>
+              </DropdownMenu.Item>
+            </DropdownMenu.Group>
+          </DropdownMenu.Content>
+        </DropdownMenu>
+      ),
     },
   ];
 };

From 71f594c8d849b824b3c39bd24c9aca5e162eb597 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Wed, 5 Feb 2025 13:53:02 +0530
Subject: [PATCH 3/5] chore: add callback function to edit webhook button

---
 ui/src/containers/webhooks/columns.tsx | 13 ++++++++++---
 ui/src/containers/webhooks/index.tsx   |  9 +++++++--
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/ui/src/containers/webhooks/columns.tsx b/ui/src/containers/webhooks/columns.tsx
index 2de6db90d..8e2cc9fae 100644
--- a/ui/src/containers/webhooks/columns.tsx
+++ b/ui/src/containers/webhooks/columns.tsx
@@ -2,7 +2,13 @@ import { DotsVerticalIcon, TrashIcon, UpdateIcon } from "@radix-ui/react-icons";
 import { ApsaraColumnDef, DropdownMenu, Flex } from "@raystack/apsara";
 import { V1Beta1Webhook } from "@raystack/frontier";
 
-export const getColumns: () => ApsaraColumnDef<V1Beta1Webhook>[] = () => {
+interface getColumnsOptions {
+  openEditPage: (id: string) => void;
+}
+
+export const getColumns: (
+  opt: getColumnsOptions
+) => ApsaraColumnDef<V1Beta1Webhook>[] = ({ openEditPage }) => {
   return [
     {
       header: "Description",
@@ -34,7 +40,7 @@ export const getColumns: () => ApsaraColumnDef<V1Beta1Webhook>[] = () => {
     {
       header: "Action",
       accessorKey: "id",
-      cell: () => (
+      cell: ({ getValue }) => (
         <DropdownMenu style={{ padding: "0 !important" }}>
           <DropdownMenu.Trigger asChild style={{ cursor: "pointer" }}>
             <DotsVerticalIcon />
@@ -46,12 +52,13 @@ export const getColumns: () => ApsaraColumnDef<V1Beta1Webhook>[] = () => {
                   style={{ padding: "12px" }}
                   gap={"small"}
                   data-test-id="admin-ui-webhook-update-btn"
+                  onClick={() => openEditPage(getValue())}
                 >
                   <UpdateIcon />
                   Update
                 </Flex>
               </DropdownMenu.Item>
-              <DropdownMenu.Item style={{ padding: 0 }}>
+              <DropdownMenu.Item style={{ padding: 0 }} disabled>
                 <Flex
                   style={{ padding: "12px" }}
                   gap={"small"}
diff --git a/ui/src/containers/webhooks/index.tsx b/ui/src/containers/webhooks/index.tsx
index 483f74850..4389d3d47 100644
--- a/ui/src/containers/webhooks/index.tsx
+++ b/ui/src/containers/webhooks/index.tsx
@@ -4,10 +4,11 @@ import { useFrontier } from "@raystack/frontier/react";
 import { useEffect, useState } from "react";
 import { getColumns } from "./columns";
 import { WebhooksHeader } from "./header";
-import { Outlet } from "react-router-dom";
+import { Outlet, useNavigate } from "react-router-dom";
 
 export default function WebhooksList() {
   const tableStyle = { width: "100%" };
+  const naviagte = useNavigate();
   const { client } = useFrontier();
   const [webhooks, setWebhooks] = useState<V1Beta1Webhook[]>([]);
   const [isLoading, setIsLoading] = useState(false);
@@ -28,7 +29,11 @@ export default function WebhooksList() {
     fetchWebhooks();
   }, [client]);
 
-  const columns = getColumns();
+  function openEditPage(id: string) {
+    naviagte(`/webhooks/${id}`);
+  }
+
+  const columns = getColumns({ openEditPage });
   return (
     <Flex direction="row" style={{ height: "100%", width: "100%" }}>
       <DataTable

From 14704decfa18f4202dc486397cecff82d053d5d1 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Wed, 5 Feb 2025 14:43:22 +0530
Subject: [PATCH 4/5] feat: add page to update webhook

---
 ui/src/components/CustomField.tsx           | 163 ++++++++--------
 ui/src/containers/webhooks/update/index.tsx | 198 ++++++++++++++++++++
 ui/src/routes.tsx                           |   2 +
 3 files changed, 286 insertions(+), 77 deletions(-)
 create mode 100644 ui/src/containers/webhooks/update/index.tsx

diff --git a/ui/src/components/CustomField.tsx b/ui/src/components/CustomField.tsx
index 1722d1d2c..2bf19d430 100644
--- a/ui/src/components/CustomField.tsx
+++ b/ui/src/components/CustomField.tsx
@@ -11,9 +11,11 @@ import React, { CSSProperties } from "react";
 import { Control, Controller, UseFormRegister } from "react-hook-form";
 import { capitalizeFirstLetter } from "~/utils/helper";
 import { MultiSelect } from "./multiselect";
+import Skeleton from "react-loading-skeleton";
 
 type CustomFieldNameProps = {
   name: string;
+  isLoading?: boolean;
   title?: string;
   disabled?: boolean;
   register: UseFormRegister<any>;
@@ -33,6 +35,7 @@ export const CustomFieldName = ({
   style = {},
   placeholder,
   options = [],
+  isLoading = false,
   ...props
 }: FormFieldProps &
   CustomFieldNameProps &
@@ -64,86 +67,92 @@ export const CustomFieldName = ({
           </FormMessage>
         </Flex>
         <FormControl asChild>
-          <Controller
-            defaultValue={props.defaultValue}
-            name={name}
-            control={control}
-            render={({ field }) => {
-              switch (variant) {
-                case "textarea": {
-                  return (
-                    <textarea
-                      {...field}
-                      placeholder={
-                        placeholder ||
-                        `Enter your ${title?.toLowerCase() || name}`
-                      }
-                      style={style}
-                    />
-                  );
-                }
-                case "select": {
-                  const { ref, ...rest } = field;
-                  return (
-                    <Select
-                      {...rest}
-                      onValueChange={(value: any) => field.onChange(value)}
-                    >
-                      <Select.Trigger
-                        ref={ref}
-                        style={{ height: "26px", width: "100%" }}
+          {isLoading ? (
+            <Skeleton />
+          ) : (
+            <Controller
+              defaultValue={props.defaultValue}
+              name={name}
+              control={control}
+              render={({ field }) => {
+                switch (variant) {
+                  case "textarea": {
+                    return (
+                      <textarea
+                        {...field}
+                        defaultValue={props?.defaultValue}
+                        placeholder={
+                          placeholder ||
+                          `Enter your ${title?.toLowerCase() || name}`
+                        }
+                        style={style}
+                      />
+                    );
+                  }
+                  case "select": {
+                    const { ref, ...rest } = field;
+                    return (
+                      <Select
+                        {...rest}
+                        onValueChange={(value: any) => field.onChange(value)}
                       >
-                        <Select.Value placeholder={`Select ${inputTitle}`} />
-                      </Select.Trigger>
-                      <Select.Content style={{ width: "320px" }}>
-                        <Select.Group>
-                          {options.map((opt) => (
-                            <Select.Item key={opt.value} value={opt.value}>
-                              {opt.label}
-                            </Select.Item>
-                          ))}
-                        </Select.Group>
-                      </Select.Content>
-                    </Select>
-                  );
-                }
-                case "multiselect": {
-                  const { onChange, value, ...rest } = field;
-                  return (
-                    <MultiSelect<string>
-                      {...rest}
-                      options={options}
-                      onSelect={onChange}
-                      selected={value}
-                    />
-                  );
-                }
-                case "switch": {
-                  const { onChange, value, ...rest } = field;
-                  return (
-                    <Switch
-                      {...rest}
-                      checked={value}
-                      onCheckedChange={onChange}
-                    />
-                  );
-                }
+                        <Select.Trigger
+                          ref={ref}
+                          style={{ height: "26px", width: "100%" }}
+                        >
+                          <Select.Value placeholder={`Select ${inputTitle}`} />
+                        </Select.Trigger>
+                        <Select.Content style={{ width: "320px" }}>
+                          <Select.Group>
+                            {options.map((opt) => (
+                              <Select.Item key={opt.value} value={opt.value}>
+                                {opt.label}
+                              </Select.Item>
+                            ))}
+                          </Select.Group>
+                        </Select.Content>
+                      </Select>
+                    );
+                  }
+                  case "multiselect": {
+                    const { onChange, value, ...rest } = field;
+                    return (
+                      <MultiSelect<string>
+                        {...rest}
+                        options={options}
+                        onSelect={onChange}
+                        selected={value || props?.defaultValue}
+                      />
+                    );
+                  }
+                  case "switch": {
+                    const { onChange, value, ...rest } = field;
+                    return (
+                      <Switch
+                        {...rest}
+                        defaultChecked={props?.defaultChecked}
+                        checked={value}
+                        onCheckedChange={onChange}
+                      />
+                    );
+                  }
 
-                default: {
-                  return (
-                    <TextField
-                      {...field}
-                      placeholder={
-                        placeholder ||
-                        `Enter your ${title?.toLowerCase() || name}`
-                      }
-                      disabled={disabled}
-                    />
-                  );
+                  default: {
+                    return (
+                      <TextField
+                        {...field}
+                        placeholder={
+                          placeholder ||
+                          `Enter your ${title?.toLowerCase() || name}`
+                        }
+                        disabled={disabled}
+                      />
+                    );
+                  }
                 }
-              }
-            }}
-          />
+              }}
+            />
+          )}
         </FormControl>
       </Flex>
     </FormField>
diff --git a/ui/src/containers/webhooks/update/index.tsx b/ui/src/containers/webhooks/update/index.tsx
new file mode 100644
index 000000000..814bfb877
--- /dev/null
+++ b/ui/src/containers/webhooks/update/index.tsx
@@ -0,0 +1,198 @@
+import { useCallback, useEffect, useState } from "react";
+import { Button, Flex, Sheet, Text } from "@raystack/apsara";
+import { useNavigate, useParams } from "react-router-dom";
+import { SheetHeader } from "~/components/sheet/header";
+import * as z from "zod";
+import { FormProvider, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Form, FormSubmit } from "@radix-ui/react-form";
+import { CustomFieldName } from "~/components/CustomField";
+import events from "~/utils/webhook_events";
+import { SheetFooter } from "~/components/sheet/footer";
+import { useFrontier } from "@raystack/frontier/react";
+import { V1Beta1Webhook, V1Beta1WebhookRequestBody } from "@raystack/frontier";
+import { toast } from "sonner";
+
+const UpdateWebhookSchema = z.object({
+  url: z.string().trim().url(),
+  description: z
+    .string()
+    .trim()
+    .min(3, { message: "Must be 10 or more characters long" }),
+  state: z.boolean().default(false),
+  subscribed_events: z.array(z.string()).default([]),
+});
+
+export type UpdateWebhook = z.infer<typeof UpdateWebhookSchema>;
+
+export default function UpdateWebhooks() {
+  const navigate = useNavigate();
+  const { client } = useFrontier();
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const [isWebhookLoading, setIsWebhookLoading] = useState(false);
+  const [webhook, setWebhook] = useState<V1Beta1Webhook>();
+
+  const { webhookId = "" } = useParams();
+
+  const onClose = useCallback(() => {
+    navigate("/webhooks");
+  }, [navigate]);
+
+  const methods = useForm<UpdateWebhook>({
+    resolver: zodResolver(UpdateWebhookSchema),
+    defaultValues: {},
+  });
+
+  const onSubmit = async (data: UpdateWebhook) => {
+    console.log("called");
+    try {
+      setIsSubmitting(true);
+      const body: V1Beta1WebhookRequestBody = {
+        ...data,
+        state: data.state ? "enabled" : "disabled",
+      };
+      const resp = await client?.adminServiceUpdateWebhook(webhookId, {
+        body,
+      });
+
+      if (resp?.data?.webhook) {
+        toast.success("Webhook updated");
+      }
+    } catch (err) {
+      toast.error("Something went wrong");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  useEffect(() => {
+    async function getWebhookDetails(id: string) {
+      try {
+        setIsWebhookLoading(true);
+        const resp = await client?.adminServiceListWebhooks();
+        const webhooks = resp?.data?.webhooks || [];
+        const webhookData = webhooks?.find((wb) => wb?.id === id);
+        setWebhook(webhookData);
+        methods?.reset({
+          ...webhookData,
+          state: webhookData?.state === "enabled",
+        });
+      } catch (err) {
+        console.error(err);
+      } finally {
+        setIsWebhookLoading(false);
+      }
+    }
+
+    if (webhookId) {
+      getWebhookDetails(webhookId);
+    }
+  }, [client, methods, webhookId]);
+
+  return (
+    <Sheet open={true}>
+      <Sheet.Content
+        side="right"
+        // @ts-ignore
+        style={{
+          width: "30vw",
+          padding: 0,
+          borderRadius: "var(--pd-8)",
+          boxShadow: "var(--shadow-sm)",
+        }}
+        close={false}
+      >
+        <FormProvider {...methods}>
+          <Form onSubmit={methods.handleSubmit(onSubmit)}>
+            <SheetHeader
+              title="Update Webhook"
+              onClick={onClose}
+              data-test-id="admin-ui-update-webhook-close-btn"
+            />
+            <Flex direction="column" gap="large" style={styles.main}>
+              <CustomFieldName
+                name="url"
+                defaultValue={webhook?.url}
+                register={methods.register}
+                control={methods.control}
+                variant="textarea"
+                style={{ width: "100%" }}
+                isLoading={isWebhookLoading}
+              />
+              <CustomFieldName
+                name="description"
+                defaultValue={webhook?.description}
+                register={methods.register}
+                control={methods.control}
+                variant="textarea"
+                style={{ width: "100%" }}
+                isLoading={isWebhookLoading}
+              />
+              <CustomFieldName
+                name="subscribed_events"
+                defaultValue={webhook?.subscribed_events}
+                register={methods.register}
+                control={methods.control}
+                variant="multiselect"
+                options={events.map((e) => ({ label: e, value: e }))}
+                isLoading={isWebhookLoading}
+              />
+              <CustomFieldName
+                name="state"
+                defaultChecked={webhook?.state === "enabled"}
+                register={methods.register}
+                control={methods.control}
+                variant="switch"
+                isLoading={isWebhookLoading}
+              />
+            </Flex>
+            <SheetFooter>
+              <FormSubmit asChild>
+                <Button
+                  variant="primary"
+                  style={{ height: "inherit" }}
+                  disabled={isSubmitting || isWebhookLoading}
+                  data-test-id="admin-ui-submit-btn"
+                >
+                  <Text
+                    size={4}
+                    style={{ color: "var(--foreground-inverted)" }}
+                  >
+                    {isSubmitting ? "Updating..." : "Update Webhook"}
+                  </Text>
+                </Button>
+              </FormSubmit>
+            </SheetFooter>
+          </Form>
+        </FormProvider>
+      </Sheet.Content>
+    </Sheet>
+  );
+}
+
+const styles = {
+  main: {
+    padding: "32px",
+    margin: 0,
+    height: "calc(100vh - 125px)",
+    overflow: "auto",
+  },
+  formfield: {
+    width: "80%",
+    marginBottom: "40px",
+  },
+  select: {
+    height: "32px",
+    borderRadius: "8px",
+    padding: "8px",
+    border: "none",
+    backgroundColor: "transparent",
+    "&:active,&:focus": {
+      border: "none",
+      outline: "none",
+      boxShadow: "none",
+    },
+  },
+};
diff --git a/ui/src/routes.tsx b/ui/src/routes.tsx
index ff30fbe82..c0608635c 100644
--- a/ui/src/routes.tsx
+++ b/ui/src/routes.tsx
@@ -55,6 +55,7 @@ import { SuperAdminList } from "./containers/super_admins/list";
 import InviteUsers from "./containers/organisations.list/users/invite";
 import WebhooksList from "./containers/webhooks";
 import CreateWebhooks from "./containers/webhooks/create";
+import UpdateWebhooks from "./containers/webhooks/update";
 
 export default memo(function AppRoutes() {
   const { isAdmin, isLoading } = useContext(AppContext);
@@ -172,6 +173,7 @@ export default memo(function AppRoutes() {
         <Route path="super-admins" element={<SuperAdminList />} />
         <Route path="webhooks" element={<WebhooksList />}>
           <Route path="create" element={<CreateWebhooks />} />
+          <Route path=":webhookId" element={<UpdateWebhooks />} />
         </Route>
         <Route path="*" element={<div>No match</div>} />
       </Route>

From fb207048f42b75d765ce1f48837d1677b9252b31 Mon Sep 17 00:00:00 2001
From: Rishabh <me@rsbh.dev>
Date: Wed, 5 Feb 2025 15:20:54 +0530
Subject: [PATCH 5/5] fix: typo

---
 ui/src/containers/webhooks/index.tsx        | 4 ++--
 ui/src/containers/webhooks/update/index.tsx | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/ui/src/containers/webhooks/index.tsx b/ui/src/containers/webhooks/index.tsx
index 4389d3d47..84f71028c 100644
--- a/ui/src/containers/webhooks/index.tsx
+++ b/ui/src/containers/webhooks/index.tsx
@@ -8,7 +8,7 @@ import { Outlet, useNavigate } from "react-router-dom";
 
 export default function WebhooksList() {
   const tableStyle = { width: "100%" };
-  const naviagte = useNavigate();
+  const navigate = useNavigate();
   const { client } = useFrontier();
   const [webhooks, setWebhooks] = useState<V1Beta1Webhook[]>([]);
   const [isLoading, setIsLoading] = useState(false);
@@ -30,7 +30,7 @@ export default function WebhooksList() {
   }, [client]);
 
   function openEditPage(id: string) {
-    naviagte(`/webhooks/${id}`);
+    navigate(`/webhooks/${id}`);
   }
 
   const columns = getColumns({ openEditPage });
diff --git a/ui/src/containers/webhooks/update/index.tsx b/ui/src/containers/webhooks/update/index.tsx
index 814bfb877..b1ee83b0f 100644
--- a/ui/src/containers/webhooks/update/index.tsx
+++ b/ui/src/containers/webhooks/update/index.tsx
@@ -46,7 +46,6 @@ export default function UpdateWebhooks() {
   });
 
   const onSubmit = async (data: UpdateWebhook) => {
-    console.log("called");
     try {
       setIsSubmitting(true);
       const body: V1Beta1WebhookRequestBody = {