style: create webhook page to modal (#3223)

* style: create webhook page to modal

* fix: create page removed

* fix: auto modal close on empty state

* fix: secret key heading removed from generated modal

web/pages/[workspaceSlug]/settings/webhooks/[webhookId].tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 import useSWR from "swr";
@@ -7,6 +7,8 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // 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";
@@ -14,22 +16,21 @@ import { DeleteWebhookModal, WebhookDeleteSection, WebhookForm } from "component
 import { Spinner } from "@plane/ui";
 // types
 import { NextPageWithLayout } from "types/app";
+import { IWebhook } from "types";
 
 const WebhookDetailsPage: NextPageWithLayout = observer(() => {
   // states
   const [deleteWebhookModal, setDeleteWebhookModal] = useState(false);
   // router
   const router = useRouter();
-  const { workspaceSlug, webhookId, isCreated } = router.query;
+  const { workspaceSlug, webhookId } = router.query;
   // mobx store
   const {
-    webhook: { currentWebhook, clearSecretKey, fetchWebhookById },
+    webhook: { currentWebhook, fetchWebhookById, updateWebhook },
     user: { currentWorkspaceRole },
   } = useMobxStore();
-
-  useEffect(() => {
-    if (isCreated !== "true") clearSecretKey();
-  }, [clearSecretKey, isCreated]);
+  // toast
+  const { setToastAlert } = useToast();
 
   const isAdmin = currentWorkspaceRole === 20;
 
@@ -40,6 +41,34 @@ const WebhookDetailsPage: NextPageWithLayout = observer(() => {
       : 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 (
       <div className="mt-10 flex h-full w-full justify-center p-4">
@@ -58,7 +87,7 @@ const WebhookDetailsPage: NextPageWithLayout = observer(() => {
     <>
       <DeleteWebhookModal isOpen={deleteWebhookModal} onClose={() => setDeleteWebhookModal(false)} />
       <div className="w-full space-y-8 overflow-y-auto py-8 pr-9">
-        <WebhookForm data={currentWebhook} />
+        <WebhookForm onSubmit={async (data) => await handleUpdateWebhook(data)} data={currentWebhook} />
         {currentWebhook && <WebhookDeleteSection openDeleteModal={() => setDeleteWebhookModal(true)} />}
       </div>
     </>

web/pages/[workspaceSlug]/settings/webhooks/create.tsx

@@ -1,43 +0,0 @@
-import React from "react";
-import { observer } from "mobx-react-lite";
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
-// layouts
-import { AppLayout } from "layouts/app-layout";
-import { WorkspaceSettingLayout } from "layouts/settings-layout";
-// components
-import { WorkspaceSettingHeader } from "components/headers";
-import { WebhookForm } from "components/web-hooks";
-// types
-import { NextPageWithLayout } from "types/app";
-
-const CreateWebhookPage: NextPageWithLayout = observer(() => {
-  const {
-    user: { currentWorkspaceRole },
-  } = useMobxStore();
-
-  const isAdmin = currentWorkspaceRole === 20;
-
-  if (!isAdmin)
-    return (
-      <div className="mt-10 flex h-full w-full justify-center p-4">
-        <p className="text-sm text-custom-text-300">You are not authorized to access this page.</p>
-      </div>
-    );
-
-  return (
-    <div className="w-full overflow-y-auto py-8 pl-1 pr-9">
-      <WebhookForm />
-    </div>
-  );
-});
-
-CreateWebhookPage.getLayout = function getLayout(page: React.ReactElement) {
-  return (
-    <AppLayout header={<WorkspaceSettingHeader title="Webhook settings" />}>
-      <WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
-    </AppLayout>
-  );
-};
-
-export default CreateWebhookPage;

web/pages/[workspaceSlug]/settings/webhooks/index.tsx

@@ -1,5 +1,4 @@
-import React from "react";
-import Link from "next/link";
+import React, { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
 import { observer } from "mobx-react-lite";
@@ -10,18 +9,22 @@ import { AppLayout } from "layouts/app-layout";
 import { WorkspaceSettingLayout } from "layouts/settings-layout";
 // components
 import { WorkspaceSettingHeader } from "components/headers";
-import { WebhooksList, WebhooksEmptyState } from "components/web-hooks";
+import { WebhooksList, WebhooksEmptyState, CreateWebhookModal } from "components/web-hooks";
 // ui
 import { Button, Spinner } from "@plane/ui";
 // types
 import { NextPageWithLayout } from "types/app";
 
 const WebhooksListPage: NextPageWithLayout = observer(() => {
+  // states
+  const [showCreateWebhookModal, setShowCreateWebhookModal] = useState(false);
+  // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
   const {
-    webhook: { fetchWebhooks, webhooks },
+    webhook: { fetchWebhooks, createWebhook, clearSecretKey, webhooks, webhookSecretKey },
+    workspace: { currentWorkspace },
     user: { currentWorkspaceRole },
   } = useMobxStore();
 
@@ -32,6 +35,11 @@ const WebhooksListPage: NextPageWithLayout = observer(() => {
     workspaceSlug && isAdmin ? () => fetchWebhooks(workspaceSlug.toString()) : null
   );
 
+  // clear secret key when modal is closed.
+  useEffect(() => {
+    if (!showCreateWebhookModal && webhookSecretKey) clearSecretKey();
+  }, [showCreateWebhookModal, webhookSecretKey, clearSecretKey]);
+
   if (!isAdmin)
     return (
       <div className="mt-10 flex h-full w-full justify-center p-4">
@@ -48,21 +56,28 @@ const WebhooksListPage: NextPageWithLayout = observer(() => {
 
   return (
     <div className="h-full w-full overflow-hidden py-8 pr-9">
+      <CreateWebhookModal
+        createWebhook={createWebhook}
+        clearSecretKey={clearSecretKey}
+        currentWorkspace={currentWorkspace}
+        isOpen={showCreateWebhookModal}
+        onClose={() => {
+          setShowCreateWebhookModal(false);
+        }}
+      />
       {Object.keys(webhooks).length > 0 ? (
         <div className="flex h-full w-full flex-col">
           <div className="flex items-center justify-between gap-4 border-b border-custom-border-200 pb-3.5">
             <div className="text-xl font-medium">Webhooks</div>
-            <Link href={`/${workspaceSlug}/settings/webhooks/create`}>
-              <Button variant="primary" size="sm">
-                Add webhook
-              </Button>
-            </Link>
+            <Button variant="primary" size="sm" onClick={() => setShowCreateWebhookModal(true)}>
+              Add webhook
+            </Button>
           </div>
           <WebhooksList />
         </div>
       ) : (
         <div className="mx-auto">
-          <WebhooksEmptyState />
+          <WebhooksEmptyState onClick={() => setShowCreateWebhookModal(true)} />
         </div>
       )}
     </div>