chore: tweak webhook section

This commit is contained in:
Steven
2023-12-10 10:21:36 +08:00
parent 0127e08a28
commit 82009d3147
2 changed files with 75 additions and 72 deletions

View File

@ -133,7 +133,7 @@ const CreateWebhookDialog: React.FC<Props> = (props: Props) => {
/> />
</div> </div>
</div> </div>
<div className="w-full flex flex-row justify-end items-center mt-4 space-x-2"> <div className="w-full flex flex-row justify-end items-center mt-2 space-x-2">
<Button color="neutral" variant="plain" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={destroy}> <Button color="neutral" variant="plain" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={destroy}>
{t("common.cancel")} {t("common.cancel")}
</Button> </Button>

View File

@ -1,5 +1,6 @@
import { Button, IconButton } from "@mui/joy"; import { Button, IconButton } from "@mui/joy";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { webhookServiceClient } from "@/grpcweb"; import { webhookServiceClient } from "@/grpcweb";
import useCurrentUser from "@/hooks/useCurrentUser"; import useCurrentUser from "@/hooks/useCurrentUser";
import { Webhook } from "@/types/proto/api/v2/webhook_service"; import { Webhook } from "@/types/proto/api/v2/webhook_service";
@ -7,7 +8,6 @@ import { useTranslate } from "@/utils/i18n";
import showCreateWebhookDialog from "../CreateWebhookDialog"; import showCreateWebhookDialog from "../CreateWebhookDialog";
import { showCommonDialog } from "../Dialog/CommonDialog"; import { showCommonDialog } from "../Dialog/CommonDialog";
import Icon from "../Icon"; import Icon from "../Icon";
import LearnMore from "../LearnMore";
const listWebhooks = async (userId: number) => { const listWebhooks = async (userId: number) => {
const { webhooks } = await webhookServiceClient.listWebhooks({ const { webhooks } = await webhookServiceClient.listWebhooks({
@ -46,15 +46,10 @@ const WebhookSection = () => {
}; };
return ( return (
<> <div className="w-full flex flex-col justify-start items-start">
<div className="w-full flex flex-col justify-start items-start space-y-4"> <div className="w-full flex justify-between items-center">
<div className="w-full">
<div className="flex justify-between items-center">
<div className="flex-auto space-y-1"> <div className="flex-auto space-y-1">
<p className="flex flex-row justify-start items-center font-medium text-gray-700 dark:text-gray-300"> <p className="flex flex-row justify-start items-center font-medium text-gray-700 dark:text-gray-300">Webhooks</p>
Webhooks
<LearnMore className="ml-2" url="https://usememos.com/docs/advanced-settings/webhook" />
</p>
</div> </div>
<div> <div>
<Button <Button
@ -68,7 +63,7 @@ const WebhookSection = () => {
</Button> </Button>
</div> </div>
</div> </div>
<div className="mt-2 flow-root"> <div className="w-full mt-2 flow-root">
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<div className="inline-block min-w-full border rounded-lg align-middle"> <div className="inline-block min-w-full border rounded-lg align-middle">
<table className="min-w-full divide-y divide-gray-300 dark:divide-gray-400"> <table className="min-w-full divide-y divide-gray-300 dark:divide-gray-400">
@ -117,9 +112,17 @@ const WebhookSection = () => {
</div> </div>
</div> </div>
</div> </div>
<div className="w-full mt-2">
<Link
className="text-gray-500 text-sm inline-flex flex-row justify-start items-center hover:underline hover:text-blue-600"
to="https://usememos.com/docs/advanced-settings/webhook"
target="_blank"
>
{t("common.learn-more")}
<Icon.ExternalLink className="inline w-4 h-auto ml-1" />
</Link>
</div> </div>
</div> </div>
</>
); );
}; };