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,13 +239,14 @@ const WebhooksTable = () => {
                   </Table.Cell>
                   <Table.Cell>
                     <div>
+                      <Popup content={webhookUrl} hoverable trigger={
                         <Button
                           size={'small'}
                           positive
                           onClick={async () => {
                             if (
                               await copy(
-                              `${window.location.origin}/webhook/${webhook.link}`
+                                webhookUrl
                               )
                             ) {
                               showSuccess('已复制到剪贴板！');
@@ -255,6 +257,7 @@ const WebhooksTable = () => {
                         >
                           复制 Webhook 链接
                         </Button>
+                      } />
                       <Button
                         size={'small'}
                         negative