binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: api webhooks (#2543)

Browse source 
* dev: initiate external apis

* dev: external api

* dev: external public api implementation

* dev: add prefix to all api tokens

* dev: flag to enable disable api token api access

* dev: webhook model create and apis

* dev: webhook settings

* fix: webhook logs

* chore: removed drf spectacular

* dev: remove retry_count and fix api logging for get requests

* dev: refactor webhook logic

* fix: celery retry mechanism

* chore: event and action change

* chore: migrations changes

* dev: proxy setup for apis

* chore: changed retry time and cleanup

* chore: added issue comment and inbox issue api endpoints

* fix: migration files

* fix: added env variables

* fix: removed issue attachment from proxy

* fix: added new migration file

* fix: restricted wehbook access

* chore: changed urls

* chore: fixed porject serializer

* fix: set expire for api token

* fix: retrive endpoint for api token

* feat: Api Token screens & api integration

* dev: webhook endpoint changes

* dev: add fields for webhook updates

* feat: Download Api secret key

* chore: removed BASE API URL

* feat: revoke token access

* dev: migration fixes

* feat: workspace webhooks (#2748)

* feat: workspace webhook store, services integeration and rendered webhook list and create

* chore: handled webhook update and rengenerate token in workspace webhooks

* feat: regenerate key and delete functionality

---------

Co-authored-by: Ramesh Kumar <rameshkumar@rameshs-MacBook-Pro.local>
Co-authored-by: gurusainath <gurusainath007@gmail.com>
Co-authored-by: Ramesh Kumar Chandra <rameshkumar2299@gmail.com>

* fix: url validation added

* fix: seperated env for webhook and api

* Web hooks refactoring

* add show option for generated hook key

* Api token restructure

* webhook minor fixes

* fix build errors

* chore: improvements in file structring

* dev: rate limiting the open apis

---------

Co-authored-by: pablohashescobar <nikhilschacko@gmail.com>
Co-authored-by: LAKHAN BAHETI <lakhanbaheti9@gmail.com>
Co-authored-by: rahulramesha <71900764+rahulramesha@users.noreply.github.com>
Co-authored-by: Ramesh Kumar <rameshkumar@rameshs-MacBook-Pro.local>
Co-authored-by: gurusainath <gurusainath007@gmail.com>
Co-authored-by: Ramesh Kumar Chandra <rameshkumar2299@gmail.com>
Co-authored-by: Nikhil <118773738+pablohashescobar@users.noreply.github.com>
Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>
Co-authored-by: rahulramesha <rahulramesham@gmail.com>
This commit is contained in:
Bavisetti Narayan 2023-11-15 15:56:57 +05:30 • committed by sriram veeraghanta
parent 20fd57b793
commit 870c4403e4
94 changed files with 3743 additions and 163 deletions
Download patch file Download diff file Expand all files Collapse all files

70
web/pages/[workspaceSlug]/settings/api-tokens/[tokenId].tsx Normal file
View file

@ -0,0 +1,70 @@
// react
import { useState } from "react";
// next
import { NextPage } from "next";
import { useRouter } from "next/router";
// layouts
import { AppLayout } from "layouts/app-layout";
import { WorkspaceSettingLayout } from "layouts/settings-layout";
// components
import DeleteTokenModal from "components/api-token/delete-token-modal";
import { WorkspaceSettingHeader } from "components/headers";
// ui
import { Spinner } from "@plane/ui";
// mobx
import { useMobxStore } from "lib/mobx/store-provider";
// services
import { ApiTokenService } from "services/api_token.service";
// helpers
import { renderDateFormat } from "helpers/date-time.helper";
// constants
import { API_TOKEN_DETAILS } from "constants/fetch-keys";
// swr
import useSWR from "swr";
const apiTokenService = new ApiTokenService();
const ApiTokenDetail: NextPage = () => {
const { theme: themStore } = useMobxStore();
const [deleteTokenModal, setDeleteTokenModal] = useState<boolean>(false);
const router = useRouter();
const { workspaceSlug, tokenId } = router.query;
const { data: token } = useSWR(
workspaceSlug && tokenId ? API_TOKEN_DETAILS(workspaceSlug.toString(), tokenId.toString()) : null,
() =>
workspaceSlug && tokenId ? apiTokenService.retrieveApiToken(workspaceSlug.toString(), tokenId.toString()) : null
);
return (
<AppLayout header={<WorkspaceSettingHeader title="Api Tokens" />}>
<WorkspaceSettingLayout>
<DeleteTokenModal isOpen={deleteTokenModal} handleClose={() => setDeleteTokenModal(false)} />
{token ? (
<div className={`${themStore.sidebarCollapsed ? "xl:w-[50%] lg:w-[60%] " : "w-[60%]"} mx-auto py-8`}>
<p className={"font-medium text-[24px]"}>{token.label}</p>
<p className={"text-custom-text-300 text-lg pt-2"}>{token.description}</p>
<div className="bg-custom-border-100 h-[1px] w-full mt-4" />
<p className="mt-2 text-sm text-custom-text-400/60">
{token.expired_at ? "Expires on " + renderDateFormat(token.expired_at, true) : "Never Expires"}
</p>
<button
className="border py-3 px-5 text-custom-primary-100 text-sm mt-6 rounded-md border-custom-primary-100 w-fit font-medium"
onClick={() => {
setDeleteTokenModal(true);
}}
>
Revoke
</button>
</div>
) : (
<div className="flex justify-center pr-9 py-8 w-full min-h-full items-center">
<Spinner />
</div>
)}
</WorkspaceSettingLayout>
</AppLayout>
);
};
export default ApiTokenDetail;

40
web/pages/[workspaceSlug]/settings/api-tokens/create.tsx Normal file
View file

@ -0,0 +1,40 @@
// react
import { useState } from "react";
// next
import { NextPage } from "next";
// layouts
import { AppLayout } from "layouts/app-layout/layout";
import { WorkspaceSettingLayout } from "layouts/settings-layout";
//types
import { IApiToken } from "types/api_token";
//Mobx
import { observer } from "mobx-react-lite";
// components
import { WorkspaceSettingHeader } from "components/headers";
import DeleteTokenModal from "components/api-token/delete-token-modal";
import { ApiTokenForm } from "components/api-token/ApiTokenForm";
const CreateApiToken: NextPage = () => {
const [generatedToken, setGeneratedToken] = useState<IApiToken | null>();
const [deleteTokenModal, setDeleteTokenModal] = useState<boolean>(false);
return (
<AppLayout header={<WorkspaceSettingHeader title="Api Tokens" />}>
<WorkspaceSettingLayout>
<DeleteTokenModal
isOpen={deleteTokenModal}
handleClose={() => setDeleteTokenModal(false)}
tokenId={generatedToken?.id}
/>
<ApiTokenForm
generatedToken={generatedToken}
setGeneratedToken={setGeneratedToken}
setDeleteTokenModal={setDeleteTokenModal}
/>
</WorkspaceSettingLayout>
</AppLayout>
);
};
export default observer(CreateApiToken);

68
web/pages/[workspaceSlug]/settings/api-tokens/index.tsx Normal file
View file

@ -0,0 +1,68 @@
// react
import React from "react";
// next
import type { NextPage } from "next";
import { useRouter } from "next/router";
// layouts
import { AppLayout } from "layouts/app-layout";
import { WorkspaceSettingLayout } from "layouts/settings-layout";
// component
import { WorkspaceSettingHeader } from "components/headers";
import ApiTokenEmptyState from "components/api-token/empty-state";
// ui
import { Spinner, Button } from "@plane/ui";
// services
import { ApiTokenService } from "services/api_token.service";
// constants
import { API_TOKENS_LIST } from "constants/fetch-keys";
// swr
import useSWR from "swr";
import { ApiTokenListItem } from "components/api-token/ApiTokenListItem";
const apiTokenService = new ApiTokenService();
const Api: NextPage = () => {
const router = useRouter();
const { workspaceSlug } = router.query;
const { data: tokens, isLoading } = useSWR(workspaceSlug ? API_TOKENS_LIST(workspaceSlug.toString()) : null, () =>
workspaceSlug ? apiTokenService.getApiTokens(workspaceSlug.toString()) : null
);
return (
<AppLayout header={<WorkspaceSettingHeader title="Api Tokens" />}>
<WorkspaceSettingLayout>
{!isLoading ? (
tokens && tokens.length > 0 ? (
<section className="pr-9 py-8 w-full overflow-y-auto">
<div className="flex items-center justify-between py-3.5 border-b border-custom-border-200 mb-2">
<h3 className="text-xl font-medium">Api Tokens</h3>
<Button
variant="primary"
onClick={() => {
router.push(`${router.asPath}/create/`);
}}
>
Add Api Token
</Button>
</div>
<div>
{tokens?.map((token) => (
<ApiTokenListItem token={token} workspaceSlug={workspaceSlug} />
))}
</div>
</section>
) : (
<div className="mx-auto py-8">
<ApiTokenEmptyState />
</div>
)
) : (
<div className="flex justify-center pr-9 py-8 w-full min-h-full items-center">
<Spinner />
</div>
)}
</WorkspaceSettingLayout>
</AppLayout>
);
};
export default Api;

77
web/pages/[workspaceSlug]/settings/webhooks/[webhookId].tsx Normal file
View file

@ -0,0 +1,77 @@
import type { NextPage } from "next";
import { useRouter } from "next/router";
import useSWR from "swr";
import { observer } from "mobx-react-lite";
// layout
import { AppLayout } from "layouts/app-layout";
import { WorkspaceSettingLayout } from "layouts/settings-layout";
// components
import { WorkspaceSettingHeader } from "components/headers";
import { WebHookForm } from "components/web-hooks";
// hooks
import { useMobxStore } from "lib/mobx/store-provider";
// types
import { RootStore } from "store/root";
import { IExtendedWebhook, IWebhook } from "types";
import { Spinner } from "@plane/ui";
import { useEffect } from "react";
import { WebHookFormTypes } from "components/web-hooks/form";
const Webhooks: NextPage = observer(() => {
const router = useRouter();
const { workspaceSlug, webhookId, isCreated } = router.query as {
workspaceSlug: string;
webhookId: string;
isCreated: string;
};
const { webhook: webhookStore }: RootStore = useMobxStore();
useEffect(() => {
if (isCreated !== "true") {
webhookStore.clearSecretKey();
}
}, []);
const { isLoading } = useSWR(
workspaceSlug && webhookId ? `WEBHOOKS_DETAIL_${workspaceSlug}_${webhookId}` : null,
workspaceSlug && webhookId
? async () => {
await webhookStore.fetchById(workspaceSlug, webhookId);
}
: null
);
const onSubmit = (data: IExtendedWebhook): Promise<IWebhook> => {
const payload = {
url: data?.url,
is_active: data?.is_active,
project: data?.project,
cycle: data?.cycle,
module: data?.module,
issue: data?.issue,
issue_comment: data?.issue_comment,
};
return webhookStore.update(workspaceSlug, webhookId, payload);
};
const initialPayload = webhookStore.currentWebhook as IWebhook;
return (
<AppLayout header={<WorkspaceSettingHeader title="Webhook Settings" />}>
<WorkspaceSettingLayout>
<div className="w-full overflow-y-auto py-3 pr-4">
{isLoading ? (
<div className="flex w-full h-full items-center justify-center">
<Spinner />
</div>
) : (
<WebHookForm type={WebHookFormTypes.EDIT} initialData={initialPayload} onSubmit={onSubmit} />
)}
</div>
</WorkspaceSettingLayout>
</AppLayout>
);
});
export default Webhooks;

89
web/pages/[workspaceSlug]/settings/webhooks/create.tsx Normal file
View file

@ -0,0 +1,89 @@
import React, { useEffect } from "react";
import { useRouter } from "next/router";
import type { NextPage } from "next";
import { AppLayout } from "layouts/app-layout";
import { WorkspaceSettingHeader } from "components/headers";
import { WorkspaceSettingLayout } from "layouts/settings-layout";
import { WebHookForm } from "components/web-hooks";
import { IWebhook, IExtendedWebhook } from "types";
import { RootStore } from "store/root";
import { useMobxStore } from "lib/mobx/store-provider";
import { csvDownload } from "helpers/download.helper";
import useToast from "hooks/use-toast";
import { WebHookFormTypes } from "components/web-hooks/form";
import { getCurrentHookAsCSV } from "components/web-hooks/utils";
const Webhooks: NextPage = () => {
const router = useRouter();
const { workspaceSlug } = router.query as { workspaceSlug: string };
const initialWebhookPayload: IWebhook = {
url: "",
is_active: true,
created_at: "",
updated_at: "",
secret_key: "",
project: true,
issue_comment: true,
cycle: true,
module: true,
issue: true,
workspace: "",
};
const { webhook: webhookStore, workspace: workspaceStore }: RootStore = useMobxStore();
const { setToastAlert } = useToast();
const onSubmit = async (data: IExtendedWebhook) => {
const payload = {
url: data?.url,
is_active: data?.is_active,
project: data?.project,
cycle: data?.cycle,
module: data?.module,
issue: data?.issue,
issue_comment: data?.issue_comment,
};
return webhookStore
.create(workspaceSlug, payload)
.then(({ webHook, secretKey }) => {
setToastAlert({
title: "Success",
type: "success",
message: "Successfully created",
});
const csvData = getCurrentHookAsCSV(workspaceStore.currentWorkspace, webHook, secretKey);
csvDownload(csvData, `Secret-key-${Date.now()}`);
if (webHook && webHook.id) {
router.push({ pathname: `/${workspaceSlug}/settings/webhooks/${webHook.id}`, query: { isCreated: true } });
}
})
.catch((error) => {
setToastAlert({
title: "Oops!",
type: "error",
message: error?.error ?? "Something went wrong!",
});
});
};
useEffect(() => {
webhookStore.clearSecretKey();
}, []);
return (
<AppLayout header={<WorkspaceSettingHeader title="Webhook Settings" />}>
<WorkspaceSettingLayout>
<div className="w-full overflow-y-auto py-3 pr-4">
<WebHookForm type={WebHookFormTypes.CREATE} initialData={initialWebhookPayload} onSubmit={onSubmit} />
</div>
</WorkspaceSettingLayout>
</AppLayout>
);
};
export default Webhooks;

58
web/pages/[workspaceSlug]/settings/webhooks/index.tsx Normal file
View file

@ -0,0 +1,58 @@
import React from "react";
import type { NextPage } from "next";
import { useRouter } from "next/router";
import useSWR from "swr";
import { observer } from "mobx-react-lite";
// layout
import { AppLayout } from "layouts/app-layout";
import { WorkspaceSettingLayout } from "layouts/settings-layout";
// components
import { WorkspaceSettingHeader } from "components/headers";
import { WebhookLists, EmptyWebhooks } from "components/web-hooks";
// hooks
import { useMobxStore } from "lib/mobx/store-provider";
// types
import { RootStore } from "store/root";
import { Spinner } from "@plane/ui";
const WebhooksPage: NextPage = observer(() => {
const router = useRouter();
const { workspaceSlug } = router.query as { workspaceSlug: string };
const {
webhook: { fetchWebhooks, webhooks, loader },
}: RootStore = useMobxStore();
useSWR(
workspaceSlug ? `WEBHOOKS_LIST_${workspaceSlug}` : null,
workspaceSlug ? () => fetchWebhooks(workspaceSlug) : null
);
return (
<AppLayout header={<WorkspaceSettingHeader title="Webhook Settings" />}>
<WorkspaceSettingLayout>
<div className="w-full overflow-y-auto py-3 pr-4">
{loader ? (
<div className="flex h-full w-ful items-center justify-center">
<Spinner />
</div>
) : (
<>
{Object.keys(webhooks).length > 0 ? (
<WebhookLists workspaceSlug={workspaceSlug} />
) : (
<div className="flex justify-center w-full h-full items-center">
<div className="w-auto h-fit">
<EmptyWebhooks workspaceSlug={workspaceSlug} />
</div>
</div>
)}
</>
)}
</div>
</WorkspaceSettingLayout>
</AppLayout>
);
});
export default WebhooksPage;