forked from github/plane
feat/webhooks
This commit is contained in:
Muhamade Sabith .T.U
parent
fc82d6fc23
commit
6174833dc2
20
web/components/web-hooks/empty-webhooks.tsx
Normal file
20
web/components/web-hooks/empty-webhooks.tsx
Normal file
@ -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>
|
||||
);
|
||||
};
|
||||
4
web/components/web-hooks/index.js
Normal file
4
web/components/web-hooks/index.js
Normal file
@ -0,0 +1,4 @@
|
||||
export * from "./empty-webhooks";
|
||||
export * from "./webhooks-list";
|
||||
export * from "./webhooks-list-item";
|
||||
export * from "./webhook-details";
|
||||
99
web/components/web-hooks/webhook-details.tsx
Normal file
99
web/components/web-hooks/webhook-details.tsx
Normal file
@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
19
web/components/web-hooks/webhooks-list-item.tsx
Normal file
19
web/components/web-hooks/webhooks-list-item.tsx
Normal file
@ -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>
|
||||
);
|
||||
};
|
||||
25
web/components/web-hooks/webhooks-list.tsx
Normal file
25
web/components/web-hooks/webhooks-list.tsx
Normal file
@ -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>
|
||||
);
|
||||
};
|
||||
@ -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`,
|
||||
|
||||
22
web/pages/[workspaceSlug]/settings/webhooks.tsx
Normal file
22
web/pages/[workspaceSlug]/settings/webhooks.tsx
Normal file
@ -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;
|
||||
Loading…
Reference in New Issue
Block a user