chore(frontend): add webhooks section

2025-06-05 22:09:59 +02:00 · 2023-11-28 20:52:48 +08:00
parent f8f73d117b
commit 0026f9e54f
5 changed files with 288 additions and 4 deletions
--- a/web/src/components/Settings/WebhookSection.tsx
+++ b/web/src/components/Settings/WebhookSection.tsx
@ -0,0 +1,126 @@
+import { Button, IconButton } from "@mui/joy";
+import { useEffect, useState } from "react";
+import { webhookServiceClient } from "@/grpcweb";
+import useCurrentUser from "@/hooks/useCurrentUser";
+import { Webhook } from "@/types/proto/api/v2/webhook_service";
+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({
+    creatorId: userId,
+  });
+  return webhooks;
+};
+
+const WebhookSection = () => {
+  const t = useTranslate();
+  const currentUser = useCurrentUser();
+  const [webhooks, setWebhooks] = useState<Webhook[]>([]);
+
+  useEffect(() => {
+    listWebhooks(currentUser.id).then((webhooks) => {
+      setWebhooks(webhooks);
+    });
+  }, []);
+
+  const handleCreateAccessTokenDialogConfirm = async () => {
+    const webhooks = await listWebhooks(currentUser.id);
+    setWebhooks(webhooks);
+  };
+
+  const handleDeleteWebhook = async (webhook: Webhook) => {
+    showCommonDialog({
+      title: "Delete Webhook",
+      content: `Are you sure to delete webhook \`${webhook.name}\`? You cannot undo this action.`,
+      style: "danger",
+      dialogName: "delete-webhook-dialog",
+      onConfirm: async () => {
+        await webhookServiceClient.deleteWebhook({ id: webhook.id });
+        setWebhooks(webhooks.filter((item) => item.id !== webhook.id));
+      },
+    });
+  };
+
+  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>
+                    ))}
+
+                    {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>
+      </div>
+    </>
+  );
+};
+
+export default WebhookSection;