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] 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>