feat: add a popup on Copy webhook Button to display the webhook url (#117)

web/src/components/WebhooksTable.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Form, Label, Pagination, Table } from 'semantic-ui-react';
+import { Button, Form, Label, Pagination, Table, Popup } from 'semantic-ui-react';
 import { Link } from 'react-router-dom';
 import { API, copy, showError, showSuccess, showWarning } from '../helpers';
 
@@ -223,6 +223,7 @@ const WebhooksTable = () => {
             )
             .map((webhook, idx) => {
               if (webhook.deleted) return <></>;
+              const webhookUrl = `${window.location.origin}/webhook/${webhook.link}`;
               return (
                 <Table.Row key={webhook.id}>
                   <Table.Cell>{webhook.id}</Table.Cell>
@@ -238,23 +239,25 @@ const WebhooksTable = () => {
                   </Table.Cell>
                   <Table.Cell>
                     <div>
-                      <Button
-                        size={'small'}
-                        positive
-                        onClick={async () => {
-                          if (
-                            await copy(
-                              `${window.location.origin}/webhook/${webhook.link}`
-                            )
-                          ) {
-                            showSuccess('已复制到剪贴板！');
-                          } else {
-                            showWarning('无法复制到剪贴板！');
-                          }
-                        }}
-                      >
-                        复制 Webhook 链接
-                      </Button>
+                      <Popup content={webhookUrl} hoverable trigger={
+                        <Button
+                          size={'small'}
+                          positive
+                          onClick={async () => {
+                            if (
+                              await copy(
+                                webhookUrl
+                              )
+                            ) {
+                              showSuccess('已复制到剪贴板！');
+                            } else {
+                              showWarning('无法复制到剪贴板！');
+                            }
+                          }}
+                        >
+                          复制 Webhook 链接
+                        </Button>
+                      } />
                       <Button
                         size={'small'}
                         negative