chore: add callback function to edit webhook button

Author: rsbh

Diff for: 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 for: 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