import React, { useEffect, useState } from "react"; import { useRouter } from "next/router"; import useSWR from "swr"; import { observer } from "mobx-react-lite"; import { useTheme } from "next-themes"; // 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, CreateWebhookModal } from "components/web-hooks"; import { EmptyState, getEmptyStateImagePath } from "components/empty-state"; // ui import { Button } from "@plane/ui"; import { WebhookSettingsLoader } from "components/ui"; // types import { NextPageWithLayout } from "lib/types"; // constants import { WORKSPACE_SETTINGS_EMPTY_STATE_DETAILS } from "constants/empty-state"; import { PageHead } from "components/core"; const WebhooksListPage: NextPageWithLayout = observer(() => { // states const [showCreateWebhookModal, setShowCreateWebhookModal] = useState(false); // router const router = useRouter(); const { workspaceSlug } = router.query; // theme const { resolvedTheme } = useTheme(); // mobx store const { membership: { currentWorkspaceRole }, currentUser, } = 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 ); const emptyStateDetail = WORKSPACE_SETTINGS_EMPTY_STATE_DETAILS["webhooks"]; const isLightMode = resolvedTheme ? resolvedTheme === "light" : currentUser?.theme.theme === "light"; const emptyStateImage = getEmptyStateImagePath("workspace-settings", "webhooks", isLightMode); const pageTitle = currentWorkspace?.name ? `${currentWorkspace.name} - Webhooks` : undefined; // 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
) : (
Webhooks
)}
); }); WebhooksListPage.getLayout = function getLayout(page: React.ReactElement) { return ( }> {page} ); }; export default WebhooksListPage;