import { useState } from "react"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import useSWR from "swr"; // hooks import { useUser, useWebhook } from "hooks/store"; // layouts import { AppLayout } from "layouts/app-layout"; import { WorkspaceSettingLayout } from "layouts/settings-layout"; // hooks import useToast from "hooks/use-toast"; // components import { WorkspaceSettingHeader } from "components/headers"; import { DeleteWebhookModal, WebhookDeleteSection, WebhookForm } from "components/web-hooks"; // ui import { Spinner } from "@plane/ui"; // types import { NextPageWithLayout } from "lib/types"; import { IWebhook } from "@plane/types"; const WebhookDetailsPage: NextPageWithLayout = observer(() => { // states const [deleteWebhookModal, setDeleteWebhookModal] = useState(false); // router const router = useRouter(); const { workspaceSlug, webhookId } = router.query; // mobx store const { membership: { currentWorkspaceRole }, } = useUser(); const { currentWebhook, fetchWebhookById, updateWebhook } = useWebhook(); // toast const { setToastAlert } = useToast(); // TODO: fix this error // useEffect(() => { // if (isCreated !== "true") clearSecretKey(); // }, [clearSecretKey, isCreated]); const isAdmin = currentWorkspaceRole === 20; useSWR( workspaceSlug && webhookId && isAdmin ? `WEBHOOK_DETAILS_${workspaceSlug}_${webhookId}` : null, workspaceSlug && webhookId && isAdmin ? () => fetchWebhookById(workspaceSlug.toString(), webhookId.toString()) : null ); const handleUpdateWebhook = async (formData: IWebhook) => { if (!workspaceSlug || !formData || !formData.id) return; const payload = { url: formData?.url, is_active: formData?.is_active, project: formData?.project, cycle: formData?.cycle, module: formData?.module, issue: formData?.issue, issue_comment: formData?.issue_comment, }; await updateWebhook(workspaceSlug.toString(), formData.id, payload) .then(() => { setToastAlert({ type: "success", title: "Success!", message: "Webhook updated successfully.", }); }) .catch((error) => { setToastAlert({ type: "error", title: "Error!", message: error?.error ?? "Something went wrong. Please try again.", }); }); }; if (!isAdmin) return (

You are not authorized to access this page.

); if (!currentWebhook) return (
); return ( <> setDeleteWebhookModal(false)} />
await handleUpdateWebhook(data)} data={currentWebhook} /> {currentWebhook && setDeleteWebhookModal(true)} />}
); }); WebhookDetailsPage.getLayout = function getLayout(page: React.ReactElement) { return ( }> {page} ); }; export default WebhookDetailsPage;