chore: tweak webhook section

web/src/components/CreateWebhookDialog.tsx

@@ -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>

web/src/components/Settings/WebhookSection.tsx

 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>
   );
 };