From 6174833dc205711bbfb7f8675927d8b8a5d65c5f Mon Sep 17 00:00:00 2001
From: "Muhamade Sabith .T.U" <mstuzombi@gmail.com>
Date: Fri, 27 Oct 2023 19:54:21 +0530
Subject: [PATCH] feat/webhooks

---
 web/components/web-hooks/empty-webhooks.tsx   | 20 ++++
 web/components/web-hooks/index.js             |  4 +
 web/components/web-hooks/webhook-details.tsx  | 99 +++++++++++++++++++
 .../web-hooks/webhooks-list-item.tsx          | 19 ++++
 web/components/web-hooks/webhooks-list.tsx    | 25 +++++
 .../workspace-setting-layout/sidebar.tsx      |  4 +
 .../[workspaceSlug]/settings/webhooks.tsx     | 22 +++++
 7 files changed, 193 insertions(+)
 create mode 100644 web/components/web-hooks/empty-webhooks.tsx
 create mode 100644 web/components/web-hooks/index.js
 create mode 100644 web/components/web-hooks/webhook-details.tsx
 create mode 100644 web/components/web-hooks/webhooks-list-item.tsx
 create mode 100644 web/components/web-hooks/webhooks-list.tsx
 create mode 100644 web/pages/[workspaceSlug]/settings/webhooks.tsx

diff --git a/web/components/web-hooks/empty-webhooks.tsx b/web/components/web-hooks/empty-webhooks.tsx
new file mode 100644
index 000000000..95439c63c
--- /dev/null
+++ b/web/components/web-hooks/empty-webhooks.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { Button } from "@plane/ui";
+import Image from "next/image";
+import EmptyWebhookLogo from "public/empty-state/issue.svg";
+
+export const EmptyWebhooks = () => {
+  return (
+    <div className="flex items-start justify-center">
+      <div className="flex p-10 flex-col items-center justify-center rounded-[4px] border border-neutral-200 bg-neutral-50">
+        <Image width="178" height="116" src={EmptyWebhookLogo} alt="empty-webhook image" />
+
+        <h3 className="mt-4 text-base font-semibold">No Webhooks yet</h3>
+        <p className="text-sm text-neutral-600">Create labels to help organize and filter issues in your project</p>
+        <Button variant="primary" className="mt-2">
+          Add Webhook
+        </Button>
+      </div>
+    </div>
+  );
+};
diff --git a/web/components/web-hooks/index.js b/web/components/web-hooks/index.js
new file mode 100644
index 000000000..35ba2f597
--- /dev/null
+++ b/web/components/web-hooks/index.js
@@ -0,0 +1,4 @@
+export * from "./empty-webhooks";
+export * from "./webhooks-list";
+export * from "./webhooks-list-item";
+export * from "./webhook-details";
diff --git a/web/components/web-hooks/webhook-details.tsx b/web/components/web-hooks/webhook-details.tsx
new file mode 100644
index 000000000..c32d59d64
--- /dev/null
+++ b/web/components/web-hooks/webhook-details.tsx
@@ -0,0 +1,99 @@
+import React, { useState } from "react";
+import { Button, ToggleSwitch } from "@plane/ui";
+import { RefreshCw } from "lucide-react";
+
+export const WebhookDetails = () => {
+  const [isIndividualEventsSelected, setIndividualEventsSelected] = useState<boolean>(false);
+  const [isWebhookEnabled, setWebhookEnabled] = useState<boolean>(false);
+  const [isRegenarateKeyLoading, setRegenarateKeyLoading] = useState<boolean>(false);
+  const [showGenaratedKey, setShowGenaratedKey] = useState<boolean>(true);
+  return (
+    <>
+      <div className="px-32 pt-10">
+        <h3 className="font-medium text-2xl">Webhook Name</h3>
+        <p className="font-normal text-base my-1 text-neutral-700">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.
+        </p>
+        <div className="border-b my-6 border-custom-border-200 " />
+        <h4 className="font-medium text-sm">URL</h4>
+        <input
+          type="url"
+          placeholder="Enter URL"
+          className="border h-10 border-neutral-200 py-1 px-2 w-full rounded-s text-sm mt-2"
+        />
+        {/* WebHook toggle */}
+        <div className="flex gap-6 mt-6">
+          <h4 className="text-sm"> Enable webhook</h4>
+          <ToggleSwitch value={isWebhookEnabled} onChange={(value) => setWebhookEnabled(value)} />
+        </div>
+        <h4 className="mt-8 text-sm font-medium">Which event do you like to trigger this webhook</h4>
+
+        {/* Radio */}
+        <input
+          type="radio"
+          name="whatToSend"
+          value="everything"
+          defaultChecked={true}
+          className="w-3.5 mt-4"
+          onChange={(value) => setIndividualEventsSelected(value.target.value == "individual")}
+        />
+
+        <label className="text-xs"> Send everything </label>
+        <br />
+        <input
+          type="radio"
+          name="whatToSend"
+          value="individual"
+          defaultChecked={false}
+          onChange={(value) => setIndividualEventsSelected(value.target.value == "individual")}
+          className="w-3.5 mt-5 mb-2"
+        />
+        <label className="text-xs"> Select Individual events </label>
+
+        {/* Grid */}
+        {isIndividualEventsSelected && (
+          <div className="bg-custom-background-80 rounded-md grid grid-cols-2 p-7 gap-2 max-w-md mt-6 ">
+            <div>
+              <input type="checkbox" name="selectIndividualEvents" /> <label htmlFor="1"> Project </label>{" "}
+            </div>
+            <div>
+              <input type="checkbox" name="selectIndividualEvents" /> <label htmlFor="2"> Cycle </label>{" "}
+            </div>
+            <div>
+              <input type="checkbox" name="selectIndividualEvents" /> <label htmlFor="3"> Issues </label>
+            </div>
+            <div>
+              <input type="checkbox" name="selectIndividualEvents" /> <label htmlFor="4"> Modules </label>
+            </div>
+            <div>
+              <input type="checkbox" name="selectIndividualEvents" /> <label htmlFor="5"> IssueComment </label>
+            </div>
+          </div>
+        )}
+        <h4 className="text-sm font-medium mt-3.5"> Secret Key </h4>
+        <p className="text-sm text-neutral-400 mt-2.5"> Genarate a token to sign-in the webhook payload </p>
+      </div>
+      <div className="pl-32 ">
+        {showGenaratedKey && (
+          <div className="flex gap-5">
+            <div className="h-10 w-full border rounded-md shadow-sm mt-3.5">
+              <div className="flex justify-between items-center h-full">
+                <div className="border-dotted w-[60%] h-0 border-t-8 ml-4 border-neutral-300 "></div>
+                <div className="flex justify-end space-x-2 mr-2">
+                  <img className="h-5 w-5" src="" />
+                  <img className="h-5 w-5" src="" />
+                </div>
+              </div>
+            </div>
+            <Button className="mt-2.5 ">
+              <RefreshCw className={`h-3 w-3 ${isRegenarateKeyLoading ? "animate-spin" : ""}`} />
+              Re-genarate Key
+            </Button>
+          </div>
+        )}
+        <Button className="mt-2.5"> Genarate Key </Button>
+      </div>
+    </>
+  );
+};
diff --git a/web/components/web-hooks/webhooks-list-item.tsx b/web/components/web-hooks/webhooks-list-item.tsx
new file mode 100644
index 000000000..e5c61d9d2
--- /dev/null
+++ b/web/components/web-hooks/webhooks-list-item.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { ToggleSwitch } from "@plane/ui";
+
+export const WebhooksListItem = () => {
+  return (
+    <div>
+      {/* <div class="flex  items-center py-3.5 border-b border-custom-border-200"></div> */}
+      <div className="flex justify-between px-3.5 py-[18px]">
+        <div>
+          <h4 className="text-base font-medium">Webhook Name</h4>
+          <h5 className="text-base text-neutral-700">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+          </h5>
+        </div>
+        <ToggleSwitch value={true} onChange={(value) => console.log("change")} />
+      </div>
+    </div>
+  );
+};
diff --git a/web/components/web-hooks/webhooks-list.tsx b/web/components/web-hooks/webhooks-list.tsx
new file mode 100644
index 000000000..57206268a
--- /dev/null
+++ b/web/components/web-hooks/webhooks-list.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { Button } from "@plane/ui";
+import { WebhooksListItem } from "./webhooks-list-item";
+
+export const WebhookLists = () => {
+  return (
+    <div className="pr-9 py-8 w-full overflow-y-auto">
+      <div className="flex items-center justify-between gap-4 py-3.5 border-b border-custom-border-200">
+        <h4 className="text-xl font-medium">Webhooks</h4>
+        <Button variant="primary" size="sm">
+          Add webhook
+        </Button>
+      </div>
+      {/* List */}
+      <div className="divide-y divide-custom-border-200">
+        <WebhooksListItem />
+        <WebhooksListItem />
+        <WebhooksListItem />
+        <WebhooksListItem />
+        <WebhooksListItem />
+        <WebhooksListItem />
+      </div>
+    </div>
+  );
+};
diff --git a/web/layouts/setting-layout/workspace-setting-layout/sidebar.tsx b/web/layouts/setting-layout/workspace-setting-layout/sidebar.tsx
index caf4f8358..785951136 100644
--- a/web/layouts/setting-layout/workspace-setting-layout/sidebar.tsx
+++ b/web/layouts/setting-layout/workspace-setting-layout/sidebar.tsx
@@ -26,6 +26,10 @@ export const WorkspaceSettingsSidebar = () => {
       label: "Integrations",
       href: `/${workspaceSlug}/settings/integrations`,
     },
+    {
+      label: "Webhooks",
+      href: `/${workspaceSlug}/settings/webhooks`,
+    },
     {
       label: "Imports",
       href: `/${workspaceSlug}/settings/imports`,
diff --git a/web/pages/[workspaceSlug]/settings/webhooks.tsx b/web/pages/[workspaceSlug]/settings/webhooks.tsx
new file mode 100644
index 000000000..5b6509667
--- /dev/null
+++ b/web/pages/[workspaceSlug]/settings/webhooks.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import type { NextPage } from "next";
+import { AppLayout } from "layouts/app-layout";
+import { WorkspaceSettingHeader } from "components/headers";
+import { WorkspaceSettingLayout } from "layouts/setting-layout";
+import { EmptyWebhooks, WebhookLists, WebhookDetails } from "components/web-hooks";
+
+const Webhooks: NextPage = () => {
+  return (
+    <AppLayout header={<WorkspaceSettingHeader title="Webhook Settings" />}>
+      <WorkspaceSettingLayout>
+        <section className="pr-9 py-8 w-full overflow-y-auto">
+          {/* <EmptyWebhooks /> */}
+          {/* <WebhookLists /> */}
+          <WebhookDetails />
+        </section>
+      </WorkspaceSettingLayout>
+    </AppLayout>
+  );
+};
+
+export default Webhooks;