对建木创建的webhook特殊处理

2022-08-04 09:07:48 +08:00 · 2022-08-04 09:07:48 +08:00 · 48c4b64b2b
parent 09e3ecc67d
commit 48c4b64b2b
4 changed files with 63 additions and 32 deletions
--- a/src/forge/Component/DeleteModal/Index.jsx
+++ b/src/forge/Component/DeleteModal/Index.jsx
@ -3,29 +3,22 @@ import { AlignCenter } from '../layout';
 import { Button } from 'antd';
 import Modals from '../PublicModal/Index';

-function DeleteBox({ 
-  visible , 
-  onCancel ,
-  onSuccess ,
-  title ,
-  subTitle,
-  content
-}) {
+function DeleteBox({visible, onCancel, onSuccess, title, subTitle, content}) {
  return(
-    <Modals 
-      title={title} 
+    <Modals
+      title={title}
      btn={
        <div>
          <Button size={'large'} onClick={onCancel}>取消</Button>
          <Button type={"danger"} size={"large"} onClick={onSuccess}>确认删除</Button>
        </div>
-      } 
-      onCancel={onCancel} 
+      }
+      onCancel={onCancel}
      visible={visible}
    >
      <div className="desc">
-        <AlignCenter className="descMain"><i className="iconfont icon-shanchu_tc_icon mr10"></i>{content}</AlignCenter>
-        <p className="task-hide-2" style={{WebkitLineClamp:5}}>删除后未来事件将不会推送至此Webhook地址：<span title={subTitle}>{subTitle}</span></p>
+        <AlignCenter className="descMain"><i className="iconfont icon-shanchu_tc_icon mr10 font-36" style={{color: '#ca0002'}}></i>{content}</AlignCenter>
+        <p className="task-hide-2" style={{WebkitLineClamp:5}}><span title={subTitle}>{subTitle}</span></p>
      </div>
    </Modals>
  )
--- a/src/forge/Settings/Webhooks/Index.jsx
+++ b/src/forge/Settings/Webhooks/Index.jsx
@ -1,9 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import { Banner , FlexAJ } from '../../Component/layout';
+import { Banner , AlignCenter } from '../../Component/layout';
 import DeleteBox from '../../Component/DeleteModal/Index';
 import './Index.scss';
-import { Button , List, Pagination } from 'antd';
-import { Link } from 'react-router-dom';
+import { Button , List, Pagination, Modal, Tooltip } from 'antd';
 import axios from 'axios';

 const limit = 15;
@ -13,7 +12,10 @@ function Index(props) {
  const [ total , setTotal ] = useState(1);
  const [ deleteId , setDeleteId ] = useState(undefined);
  const [ visible , setVisible ] = useState(false);
-  const [ url , setUrl ] = useState(undefined);
+  const [ editVisible , setEditVisible ] = useState(false);
+  const [ editId , setEditId ] = useState(undefined);
+  const [ deleteWebHookModTitle, setDeleteWebHookModTitle] = useState(undefined);
+  const [ deleteWebHookModSubTitle, setDeleteWebHookModSubTitle] = useState(undefined);

  const { owner , projectsId } = props.match.params;

@ -29,15 +31,21 @@ function Index(props) {
      params:{page,limit}
    }).then(result=>{
      if(result && result.data){
+        const reg1 = new RegExp("https://(.*?)jianmuhub.com(.*?)");
+        const reg2 = new RegExp("https://jianmu.gitlink.org.cn(.*?)");
+        result.data.webhooks.map(item=>{
+          item.isJianMu = reg1.test(item.url) || reg2.test(item.url);
+        })
        setData(result.data.webhooks);
        setTotal(result.data.total_count);
      }
    }).catch(error=>{})
  }

-  function deleteFunc(id,url) {
-    setDeleteId(id);
-    setUrl(url);
+  function deleteFunc(webhook) {
+    setDeleteWebHookModTitle(webhook.isJianMu ? '请谨慎删除此Webhook' : '删除Webhook');
+    setDeleteWebHookModSubTitle(webhook.isJianMu ? '该Webhook由流水线创建, 删除此Webhook后, 将导致本仓库相关流水线失效。确定要删除此Webhook?' :  `删除后未来事件将不会推送至此Webhook地址: ${webhook.url}`);
+    setDeleteId(webhook.id);
    setVisible(true);
  }

@ -65,16 +73,37 @@ function Index(props) {
    props.history.push(`/${owner}/${projectsId}/settings/webhooks/new`)
  }

+  function gotoEditWebhook(webhook){
+    if(webhook.isJianMu){
+      setEditId(webhook.id);
+      setEditVisible(true);
+    }else{
+      props.history.push(`/${owner}/${projectsId}/settings/webhooks/${webhook.id}`);
+    }
+  }
+
  return(
    <div>
-      <DeleteBox 
-        visible={visible} 
+      <DeleteBox
+        visible={visible}
        onCancel={()=>setVisible(false)}
        onSuccess={onSuccess}
-        title="删除Webhook"
+        title={deleteWebHookModTitle}
        content="您确定要删除此Webhook吗？"
-        subTitle={`删除后未来事件将不会推送至此Webhook地址：${url}`}
+        subTitle={deleteWebHookModSubTitle}
      />
+      <Modal
+        visible={editVisible}
+        onCancel={()=>{setEditVisible(false)}}
+        title="请谨慎编辑此Webhook"
+        width={"520px"}
+        wrapClassName={"deleteBox"}
+        centered={true}
+        onOk={()=>{props.history.push(`/${owner}/${projectsId}/settings/webhooks/${editId}`)}}
+      >
+        <AlignCenter className="editWebhookModalTitle font-20 mb10"><i className="iconfont icon-shanchu_tc_icon mr10 font-36" style={{color: '#ca0002'}}></i>您确定要编辑此Webhook吗？</AlignCenter>
+        <p className="task-hide-2" style={{WebkitLineClamp:5}}>该Webhook由流水线创建, 编辑此Webhook后, 将大概率导致本仓库相关流水线失效。确定要修改此Webhook?</p>
+      </Modal>
      <Banner>
        <span>Webhooks(网络钩子)</span>
        <Button type="primary" size="large" onClick={addFunc}>添加Webhook</Button>
@ -87,11 +116,11 @@ function Index(props) {
            {data.map((i,k)=>{
              return(
                <List.Item key={k}>
-                  <i className="iconfont icon-a-xuanzhongwebhookicon color-grey-d mr12 font-17"></i>
-                  <Link to={`/${owner}/${projectsId}/settings/webhooks/${i.id}`} className="webName">{i.url}</Link>
+                  <i className={`iconfont mr12 font-17 ${i.isJianMu ? 'icon-gongzuoliuicon color-grey-6' : 'icon-a-xuanzhongwebhookicon color-grey-d'}`}></i>
+                  <span className="webName">{i.isJianMu ? <Tooltip title="该Webhook由流水线创建，请勿编辑或删除以防流水线失效"><span className="webName spanBox">{i.url}</span></Tooltip> : i.url}</span>
                  <span>
-                    <Button ghost type={"primary"} onClick={()=>{props.history.push(`/${owner}/${projectsId}/settings/webhooks/${i.id}`)}}>编辑</Button>
-                    <Button ghost className="ml20" type="danger" onClick={()=>{deleteFunc(i.id,i.url)}}>删除</Button>
+                    <Button ghost type={"primary"} onClick={()=>{gotoEditWebhook(i)}}>编辑</Button>
+                    <Button ghost className="ml20" type="danger" onClick={()=>{deleteFunc(i)}}>删除</Button>
                  </span>
                </List.Item>
              )
--- a/src/forge/Settings/Webhooks/Index.scss
+++ b/src/forge/Settings/Webhooks/Index.scss
@ -15,6 +15,12 @@
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
+        cursor: default;
+        &.spanBox{
+          display: inline-block;
+          max-width: 100%;
+          overflow: hidden;
+        }
      }
    }
  }
@ -168,4 +174,7 @@
      }
    }
  }
+}
+.editWebhookModalTitle{
+  justify-content: center;
 }
--- a/src/forge/users/InfosUser.js
+++ b/src/forge/users/InfosUser.js
@ -196,15 +196,15 @@ class InfosUser extends Component {
              >
                <a className="ant-dropdown-link">
                  <span className="color-blue font-16">
-                    <img src={img_new} alt="" width="13px" /> 新建
+                    <i className="iconfont icon-xinjian1 font-14"></i> 新建
                  </span>
                </a>
              </Popover>
            )}
            <Popover content={this.menu()} trigger={["click"]} placement="bottom">
              <a className="ant-dropdown-link">
-                <span className="color-blue font-16">
-                  排序 <img src={img_array} alt="" width="10px" />
+                <span className="color-blue font-16" style={{display: 'inline-flex'}}>
+                  <span>排序</span> <i className="iconfont icon-sanjiaoxing-down"></i>
                </span>
              </a>
            </Popover>