fix: fix webhook ui

web/src/components/WebhooksTable.js

@@ -1,5 +1,12 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Form, Label, Pagination, Table, Popup } from 'semantic-ui-react';
+import {
+  Button,
+  Form,
+  Label,
+  Pagination,
+  Popup,
+  Table,
+} from 'semantic-ui-react';
 import { Link } from 'react-router-dom';
 import { API, copy, showError, showSuccess, showWarning } from '../helpers';
 
@@ -239,36 +246,28 @@ const WebhooksTable = () => {
                   </Table.Cell>
                   <Table.Cell>
                     <div>
-                      <Popup content={webhookUrl} hoverable trigger={
-                        <Button
-                          size={'small'}
-                          positive
-                          onClick={async () => {
-                            if (
-                              await copy(
-                                webhookUrl
-                              )
-                            ) {
-                              showSuccess('已复制到剪贴板！');
-                            } else {
-                              showWarning('无法复制到剪贴板！');
-                            }
-                          }}
-                        >
-                          复制 Webhook 链接
-                        </Button>
-                      } />
-                      <Button
-                        size={'small'}
-                        negative
-                        onClick={() => {
-                          manageWebhook(webhook.id, 'delete', idx).then();
-                        }}
-                      >
-                        删除
-                      </Button>
+                      <Popup
+                        content={webhookUrl}
+                        hoverable
+                        trigger={
+                          <Button
+                            size={'small'}
+                            positive
+                            onClick={async () => {
+                              if (await copy(webhookUrl)) {
+                                showSuccess('已复制到剪贴板！');
+                              } else {
+                                showWarning('无法复制到剪贴板！');
+                              }
+                            }}
+                          >
+                            复制 Webhook 链接
+                          </Button>
+                        }
+                      />
                       <Button
                         size={'small'}
+                        color={'yellow'}
                         onClick={() => {
                           manageWebhook(
                             webhook.id,
@@ -281,11 +280,32 @@ const WebhooksTable = () => {
                       </Button>
                       <Button
                         size={'small'}
+                        primary
                         as={Link}
                         to={'/webhook/edit/' + webhook.id}
                       >
                         编辑
                       </Button>
+                      <Popup
+                        trigger={
+                          <Button size='small' negative>
+                            删除
+                          </Button>
+                        }
+                        on='click'
+                        flowing
+                        hoverable
+                      >
+                        <Button
+                          size={'small'}
+                          negative
+                          onClick={() => {
+                            manageWebhook(webhook.id, 'delete', idx).then();
+                          }}
+                        >
+                          删除 {webhook.name}
+                        </Button>
+                      </Popup>
                     </div>
                   </Table.Cell>
                 </Table.Row>