import React, { useEffect, useState } from "react"; import { useRouter } from "next/router"; import useSWR from "swr"; import { observer } from "mobx-react-lite"; // hooks import { useUser, useWebhook, useWorkspace } from "hooks/store"; // layouts import { AppLayout } from "layouts/app-layout"; import { WorkspaceSettingLayout } from "layouts/settings-layout"; // components import { WorkspaceSettingHeader } from "components/headers"; import { WebhooksList, WebhooksEmptyState, CreateWebhookModal } from "components/web-hooks"; // ui import { Button, Spinner } from "@plane/ui"; // types import { NextPageWithLayout } from "lib/types"; const WebhooksListPage: NextPageWithLayout = observer(() => { // states const [showCreateWebhookModal, setShowCreateWebhookModal] = useState(false); // router const router = useRouter(); const { workspaceSlug } = router.query; // mobx store const { membership: { currentWorkspaceRole }, } = useUser(); const { fetchWebhooks, webhooks, clearSecretKey, webhookSecretKey, createWebhook } = useWebhook(); const { currentWorkspace } = useWorkspace(); const isAdmin = currentWorkspaceRole === 20; useSWR( workspaceSlug && isAdmin ? `WEBHOOKS_LIST_${workspaceSlug}` : null, workspaceSlug && isAdmin ? () => fetchWebhooks(workspaceSlug.toString()) : null ); // clear secret key when modal is closed. useEffect(() => { if (!showCreateWebhookModal && webhookSecretKey) clearSecretKey(); }, [showCreateWebhookModal, webhookSecretKey, clearSecretKey]); if (!isAdmin) return (

You are not authorized to access this page.

); if (!webhooks) return (
); return (
{ setShowCreateWebhookModal(false); }} /> {Object.keys(webhooks).length > 0 ? (
Webhooks
) : (
setShowCreateWebhookModal(true)} />
)}
); }); WebhooksListPage.getLayout = function getLayout(page: React.ReactElement) { return ( }> {page} ); }; export default WebhooksListPage;