usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-03-03 16:53:30 +08:00
Code Issues Projects Releases Packages Wiki Activity

chore: tweak webhook section

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/src/components/CreateWebhookDialog.tsx
View file

@ -133,7 +133,7 @@ const CreateWebhookDialog: React.FC<Props> = (props: Props) => {
/>
</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}>
{t("common.cancel")}
</Button>

145
web/src/components/Settings/WebhookSection.tsx
View file

@ -1,5 +1,6 @@
import { Button, IconButton } from "@mui/joy";
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { webhookServiceClient } from "@/grpcweb";
import useCurrentUser from "@/hooks/useCurrentUser";
import { Webhook } from "@/types/proto/api/v2/webhook_service";
@ -7,7 +8,6 @@ import { useTranslate } from "@/utils/i18n";
import showCreateWebhookDialog from "../CreateWebhookDialog";
import { showCommonDialog } from "../Dialog/CommonDialog";
import Icon from "../Icon";
import LearnMore from "../LearnMore";
const listWebhooks = async (userId: number) => {
const { webhooks } = await webhookServiceClient.listWebhooks({
@ -46,80 +46,83 @@ const WebhookSection = () => {
};
return (
<>
<div className="w-full flex flex-col justify-start items-start space-y-4">
<div className="w-full">
<div className="flex justify-between items-center">
<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">
Webhooks
<LearnMore className="ml-2" url="https://usememos.com/docs/advanced-settings/webhook" />
</p>
</div>
<div>
<Button
variant="outlined"
color="neutral"
onClick={() => {
showCreateWebhookDialog(handleCreateAccessTokenDialogConfirm);
}}
>
{t("common.create")}
</Button>
</div>
</div>
<div className="mt-2 flow-root">
<div className="overflow-x-auto">
<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">
<thead>
<tr>
<th scope="col" className="px-3 py-2 text-left text-sm font-semibold text-gray-900 dark:text-gray-400">
Name
</th>
<th scope="col" className="px-3 py-2 text-left text-sm font-semibold text-gray-900 dark:text-gray-400">
Url
</th>
<th scope="col" className="relative px-3 py-2 pr-4">
<span className="sr-only">{t("common.delete")}</span>
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200 dark:divide-gray-500">
{webhooks.map((webhook) => (
<tr key={webhook.id}>
<td className="whitespace-nowrap px-3 py-2 text-sm text-gray-900 dark:text-gray-400">{webhook.name}</td>
<td className="whitespace-nowrap px-3 py-2 text-sm text-gray-900 dark:text-gray-400">{webhook.url}</td>
<td className="relative whitespace-nowrap px-3 py-2 text-right text-sm">
<IconButton
color="danger"
variant="plain"
size="sm"
onClick={() => {
handleDeleteWebhook(webhook);
}}
>
<Icon.Trash className="w-4 h-auto" />
</IconButton>
</td>
</tr>
))}
<div className="w-full flex flex-col justify-start items-start">
<div className="w-full flex justify-between items-center">
<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">Webhooks</p>
</div>
<div>
<Button
variant="outlined"
color="neutral"
onClick={() => {
showCreateWebhookDialog(handleCreateAccessTokenDialogConfirm);
}}
>
{t("common.create")}
</Button>
</div>
</div>
<div className="w-full mt-2 flow-root">
<div className="overflow-x-auto">
<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">
<thead>
<tr>
<th scope="col" className="px-3 py-2 text-left text-sm font-semibold text-gray-900 dark:text-gray-400">
Name
</th>
<th scope="col" className="px-3 py-2 text-left text-sm font-semibold text-gray-900 dark:text-gray-400">
Url
</th>
<th scope="col" className="relative px-3 py-2 pr-4">
<span className="sr-only">{t("common.delete")}</span>
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200 dark:divide-gray-500">
{webhooks.map((webhook) => (
<tr key={webhook.id}>
<td className="whitespace-nowrap px-3 py-2 text-sm text-gray-900 dark:text-gray-400">{webhook.name}</td>
<td className="whitespace-nowrap px-3 py-2 text-sm text-gray-900 dark:text-gray-400">{webhook.url}</td>
<td className="relative whitespace-nowrap px-3 py-2 text-right text-sm">
<IconButton
color="danger"
variant="plain"
size="sm"
onClick={() => {
handleDeleteWebhook(webhook);
}}
>
<Icon.Trash className="w-4 h-auto" />
</IconButton>
</td>
</tr>
))}
{webhooks.length === 0 && (
<tr>
<td className="whitespace-nowrap px-3 py-2 text-sm text-gray-900 dark:text-gray-400" colSpan={3}>
No webhooks found.
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
{webhooks.length === 0 && (
<tr>
<td className="whitespace-nowrap px-3 py-2 text-sm text-gray-900 dark:text-gray-400" colSpan={3}>
No webhooks found.
</td>
</tr>
)}
</tbody>
</table>
</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>
);
};