refactor(webhooks): make admin webhooks view-only, remove write actions

web/apps/admin/configs.dev.json

@@ -3,9 +3,6 @@
   "app_url": "localhost:5173",
   "token_product_id": "token",
   "organization_types": [],
-  "webhooks": {
-    "enable_delete": false
-  },
   "terminology": {
     "organization": {
       "singular": "Organization",

web/apps/admin/src/pages/webhooks/WebhooksPage.tsx

@@ -1,26 +1,6 @@
-import { useContext } from "react";
-import { useMatch, useParams, useNavigate } from "react-router-dom";
 import { WebhooksView } from "@raystack/frontier/admin";
-import { AppContext } from "~/contexts/App";
 import WebhooksIcon from "~/assets/icons/webhooks.svg?react";
 
 export default function WebhooksPage() {
-  const { config } = useContext(AppContext);
-  const { webhookId } = useParams();
-  const navigate = useNavigate();
-  const isCreate = useMatch("/webhooks/create");
-
-  const enableDelete = config?.webhooks?.enable_delete ?? false;
-
-  return (
-    <WebhooksView
-      selectedWebhookId={webhookId}
-      createOpen={!!isCreate}
-      onCloseDetail={() => navigate("/webhooks")}
-      onSelectWebhook={(id: string) => navigate(`/webhooks/${encodeURIComponent(id)}`)}
-      onOpenCreate={() => navigate("/webhooks/create")}
-      enableDelete={enableDelete}
-      icon={<WebhooksIcon />}
-    />
-  );
+  return <WebhooksView icon={<WebhooksIcon />} />;
 }

web/apps/admin/src/routes.tsx

@@ -112,10 +112,7 @@ export default memo(function AppRoutes() {
 
         <Route path="invoices" element={<InvoicesPage />} />
         <Route path="super-admins" element={<AdminsPage />} />
-        <Route path="webhooks" element={<WebhooksPage />}>
-          <Route path="create" element={<WebhooksPage />} />
-          <Route path=":webhookId" element={<WebhooksPage />} />
-        </Route>
+        <Route path="webhooks" element={<WebhooksPage />} />
         <Route path="*" element={<Navigate to={`/${paths.organizations}`} />} />
       </Route>
     </Routes>

web/apps/admin/src/utils/constants.ts

@@ -13,10 +13,6 @@ export const SUBSCRIPTION_STATUSES = [
   { label: "Ended", value: "ended" },
 ];
 
-export interface WebhooksConfig {
-  enable_delete: boolean;
-}
-
 export interface EntityTerminologies {
   singular: string;
   plural: string;
@@ -37,7 +33,6 @@ export interface Config {
   app_url?: string;
   token_product_id?: string;
   organization_types?: string[];
-  webhooks?: WebhooksConfig;
   terminology?: AdminTerminologyConfig;
 }
 
@@ -55,9 +50,6 @@ export const defaultConfig: Config = {
   app_url: "example.com",
   token_product_id: DEFAULT_TOKEN_PRODUCT_NAME,
   organization_types: [],
-  webhooks: {
-    enable_delete: false,
-  },
   terminology: defaultTerminology,
 };
 

web/sdk/admin/views/webhooks/webhooks/columns.tsx

@@ -1,10 +1,4 @@
-import { DotsVerticalIcon, TrashIcon, UpdateIcon } from "@radix-ui/react-icons";
-import {
-  Menu,
-  Flex,
-  Text,
-  type DataTableColumnDef,
-} from "@raystack/apsara";
+import { Text, type DataTableColumnDef } from "@raystack/apsara";
 import styles from "./webhooks.module.css";
 import { type Webhook } from "@raystack/proton/frontier";
 import {
@@ -13,19 +7,8 @@ import {
   type TimeStamp,
 } from "../../../utils/connect-timestamp";
 import dayjs from "dayjs";
-import { useState } from "react";
-import type { useMutation } from "@connectrpc/connect-query";
-import { DeleteWebhookDialog } from "./delete";
-
-interface getColumnsOptions {
-  openEditPage: (id: string) => void;
-  deleteWebhookMutation: ReturnType<typeof useMutation>;
-  enableDelete: boolean;
-}
 
-export const getColumns: (
-  opt: getColumnsOptions,
-) => DataTableColumnDef<Webhook, unknown>[] = ({ openEditPage, deleteWebhookMutation, enableDelete }) => {
+export const getColumns: () => DataTableColumnDef<Webhook, unknown>[] = () => {
   return [
     {
       header: "Description",
@@ -61,64 +44,5 @@ export const getColumns: (
         return <Text>{date}</Text>;
       },
     },
-    {
-      header: "Action",
-      accessorKey: "id",
-      classNames: { cell: styles.actionColumn, header: styles.actionColumn },
-      cell: ({ getValue, row }) => {
-        const ActionCell = () => {
-          const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
-          const webhookId = getValue() as string;
-          const webhook = row.original;
-
-          return (
-            <>
-              {/* @ts-ignore */}
-              <Menu style={{ padding: "0 !important" }}>
-                <Menu.Trigger
-                  render={<DotsVerticalIcon style={{ cursor: "pointer" }} />}
-                />
-                <Menu.Content>
-                  <Menu.Group style={{ padding: 0 }}>
-                    <Menu.Item style={{ padding: 0 }}>
-                      <Flex
-                        style={{ padding: "12px" }}
-                        gap={3}
-                        data-test-id="admin-webhook-update-btn"
-                        onClick={() => openEditPage(webhookId)}
-                      >
-                        <UpdateIcon />
-                        Update
-                      </Flex>
-                    </Menu.Item>
-                    <Menu.Item style={{ padding: 0 }} disabled={!enableDelete}>
-                      <Flex
-                        className={styles.deleteMenuItem}
-                        gap={3}
-                        data-test-id="admin-webhook-delete-btn"
-                        onClick={() => enableDelete && setIsDeleteDialogOpen(true)}
-                      >
-                        <TrashIcon />
-                        Delete
-                      </Flex>
-                    </Menu.Item>
-                  </Menu.Group>
-                </Menu.Content>
-              </Menu>
-
-              <DeleteWebhookDialog
-                isOpen={isDeleteDialogOpen}
-                onOpenChange={setIsDeleteDialogOpen}
-                webhookId={webhookId}
-                webhookDescription={webhook.description}
-                deleteWebhookMutation={deleteWebhookMutation}
-              />
-            </>
-          );
-        };
-
-        return <ActionCell />;
-      },
-    },
   ];
 };