YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases 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
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> </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>

145
web/src/components/Settings/WebhookSection.tsx
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,80 +46,83 @@ 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-auto space-y-1">
<div className="flex justify-between items-center"> <p className="flex flex-row justify-start items-center font-medium text-gray-700 dark:text-gray-300">Webhooks</p>
<div className="flex-auto space-y-1"> </div>
<p className="flex flex-row justify-start items-center font-medium text-gray-700 dark:text-gray-300"> <div>
Webhooks <Button
<LearnMore className="ml-2" url="https://usememos.com/docs/advanced-settings/webhook" /> variant="outlined"
</p> color="neutral"
</div> onClick={() => {
<div> showCreateWebhookDialog(handleCreateAccessTokenDialogConfirm);
<Button }}
variant="outlined" >
color="neutral" {t("common.create")}
onClick={() => { </Button>
showCreateWebhookDialog(handleCreateAccessTokenDialogConfirm); </div>
}} </div>
> <div className="w-full mt-2 flow-root">
{t("common.create")} <div className="overflow-x-auto">
</Button> <div className="inline-block min-w-full border rounded-lg align-middle">
</div> <table className="min-w-full divide-y divide-gray-300 dark:divide-gray-400">
</div> <thead>
<div className="mt-2 flow-root"> <tr>
<div className="overflow-x-auto"> <th scope="col" className="px-3 py-2 text-left text-sm font-semibold text-gray-900 dark:text-gray-400">
<div className="inline-block min-w-full border rounded-lg align-middle"> Name
<table className="min-w-full divide-y divide-gray-300 dark:divide-gray-400"> </th>
<thead> <th scope="col" className="px-3 py-2 text-left text-sm font-semibold text-gray-900 dark:text-gray-400">
<tr> Url
<th scope="col" className="px-3 py-2 text-left text-sm font-semibold text-gray-900 dark:text-gray-400"> </th>
Name <th scope="col" className="relative px-3 py-2 pr-4">
</th> <span className="sr-only">{t("common.delete")}</span>
<th scope="col" className="px-3 py-2 text-left text-sm font-semibold text-gray-900 dark:text-gray-400"> </th>
Url </tr>
</th> </thead>
<th scope="col" className="relative px-3 py-2 pr-4"> <tbody className="divide-y divide-gray-200 dark:divide-gray-500">
<span className="sr-only">{t("common.delete")}</span> {webhooks.map((webhook) => (
</th> <tr key={webhook.id}>
</tr> <td className="whitespace-nowrap px-3 py-2 text-sm text-gray-900 dark:text-gray-400">{webhook.name}</td>
</thead> <td className="whitespace-nowrap px-3 py-2 text-sm text-gray-900 dark:text-gray-400">{webhook.url}</td>
<tbody className="divide-y divide-gray-200 dark:divide-gray-500"> <td className="relative whitespace-nowrap px-3 py-2 text-right text-sm">
{webhooks.map((webhook) => ( <IconButton
<tr key={webhook.id}> color="danger"
<td className="whitespace-nowrap px-3 py-2 text-sm text-gray-900 dark:text-gray-400">{webhook.name}</td> variant="plain"
<td className="whitespace-nowrap px-3 py-2 text-sm text-gray-900 dark:text-gray-400">{webhook.url}</td> size="sm"
<td className="relative whitespace-nowrap px-3 py-2 text-right text-sm"> onClick={() => {
<IconButton handleDeleteWebhook(webhook);
color="danger" }}
variant="plain" >
size="sm" <Icon.Trash className="w-4 h-auto" />
onClick={() => { </IconButton>
handleDeleteWebhook(webhook); </td>
}} </tr>
> ))}
<Icon.Trash className="w-4 h-auto" />
</IconButton>
</td>
</tr>
))}
{webhooks.length === 0 && ( {webhooks.length === 0 && (
<tr> <tr>
<td className="whitespace-nowrap px-3 py-2 text-sm text-gray-900 dark:text-gray-400" colSpan={3}> <td className="whitespace-nowrap px-3 py-2 text-sm text-gray-900 dark:text-gray-400" colSpan={3}>
No webhooks found. No webhooks found.
</td> </td>
</tr> </tr>
)} )}
</tbody> </tbody>
</table> </table>
</div>
</div>
</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>
); );
}; };