forked from Gitlink/forgeplus-react
337 lines
12 KiB
JavaScript
337 lines
12 KiB
JavaScript
import React , { forwardRef, useEffect, useState } from 'react';
|
||
import { Form , Input , Button , Select , Radio , Checkbox } from 'antd';
|
||
import { Banner } from '../../Component/layout';
|
||
import { Link } from 'react-router-dom';
|
||
import axios from 'axios';
|
||
import PushHistory from './sub/PushHistory';
|
||
import DeleteBox from '../../Component/DeleteModal/Index';
|
||
import './Index.scss';
|
||
|
||
// ,"issue_assign","issue_label","issue_milestone","issue_comment","issue_only","fork",
|
||
//"pull_request_milestone","pull_request_sync","pull_request_comment","repository","pull_request_label"
|
||
const eventArray = [
|
||
"create","delete","push","pull_request_assign","pull_request_review","pull_request_only"
|
||
]
|
||
function New({ form , match , showNotification , history }) {
|
||
const [ httpValue , setHttpValue ] = useState("POST");
|
||
const [ posthttpValue , setPostHttpValue ] = useState("json");
|
||
const [ condition , setCondition ] = useState("push");
|
||
const [ event , setEvent ] = useState(["push"]);
|
||
const [ visible , setVisible ] = useState(false);
|
||
const [ data , setData ] = useState(undefined);
|
||
const [ eventFlag , setEventFlag ] = useState(false);
|
||
|
||
const { getFieldDecorator, validateFields , setFieldsValue } = form;
|
||
const { id , owner , projectsId } = match.params;
|
||
|
||
function compareArray(params) {
|
||
if(params && params.length > 0){
|
||
if(params.length === 1 && params[0] === "push"){
|
||
setEvent(['push']);
|
||
return "push";
|
||
}else if(params.length === eventArray.length){
|
||
setEvent(eventArray);
|
||
return "all";
|
||
}else{
|
||
setEvent([]);
|
||
return "forevent";
|
||
}
|
||
}
|
||
}
|
||
|
||
useEffect(()=>{
|
||
if(id){
|
||
Init();
|
||
}else{
|
||
let e = compareArray(event);
|
||
setCondition(e);
|
||
setFieldsValue({
|
||
url:"",
|
||
secret:"",
|
||
http_method:httpValue,
|
||
content_type:posthttpValue,
|
||
eventCondition:condition,
|
||
event:event,
|
||
branch_filter:"*",
|
||
active:true
|
||
})
|
||
}
|
||
},[id])
|
||
|
||
function Init() {
|
||
const url = `/${owner}/${projectsId}/webhooks/${id}/edit.json`;
|
||
axios.get(url).then(result=>{
|
||
if(result){
|
||
let e = compareArray(result.data.events);
|
||
setFieldsValue({
|
||
...result.data,
|
||
eventCondition:e,
|
||
active:result.data.is_active
|
||
})
|
||
setData(result.data);
|
||
setHttpValue(result.data.http_method);
|
||
setCondition(e);
|
||
setEvent(result.data.events);
|
||
}
|
||
}).catch(error=>{})
|
||
}
|
||
|
||
function changeHTTP(value) {
|
||
setHttpValue(value);
|
||
}
|
||
|
||
function changeCondition(e) {
|
||
setCondition(e.target.value);
|
||
if(e.target.value === "push"){
|
||
setEvent(["push"])
|
||
}else if(e.target.value === "all"){
|
||
setEvent(eventArray)
|
||
}else{
|
||
setEvent([])
|
||
}
|
||
}
|
||
|
||
function submit() {
|
||
validateFields((error,values)=>{
|
||
if(!error){
|
||
if(values.eventCondition === "forevent" && event.length === 0){
|
||
setEventFlag(true);
|
||
return;
|
||
}
|
||
let e = values.eventCondition === "push" ? ['push'] : values.eventCondition === "all" ? eventArray : event;
|
||
|
||
if(id){
|
||
// 编辑
|
||
const url = `/${owner}/${projectsId}/webhooks/${id}.json`;
|
||
axios.patch(url,{
|
||
webhook:{
|
||
...values,
|
||
events:e
|
||
}
|
||
}).then(result=>{
|
||
if(result){
|
||
showNotification("webhook更新成功！");
|
||
history.push(`/projects/${owner}/${projectsId}/setting/webhooks`);
|
||
}
|
||
}).catch(error=>{})
|
||
}else{
|
||
// 保存
|
||
const url = `/${owner}/${projectsId}/webhooks.json`;
|
||
axios.post(url,{
|
||
webhook:{
|
||
...values,
|
||
events:e
|
||
}
|
||
}).then(result=>{
|
||
if(result && result.data && result.data.id){
|
||
showNotification("webhook新建成功！");
|
||
history.push(`/projects/${owner}/${projectsId}/setting/webhooks`);
|
||
}
|
||
}).catch(error=>{})
|
||
}
|
||
|
||
}
|
||
})
|
||
}
|
||
|
||
function checkAddr(rule, value, callback) {
|
||
let reg = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;
|
||
if(!value){
|
||
callback();
|
||
}
|
||
if (!reg.test(value)){
|
||
callback("请输入有效的URL");
|
||
}
|
||
callback();
|
||
}
|
||
|
||
function deleteFunc() {
|
||
if(id){
|
||
setVisible(true);
|
||
}
|
||
}
|
||
|
||
function onSuccess() {
|
||
if(id){
|
||
const url = `/${owner}/${projectsId}/webhooks/${id}.json`;
|
||
axios.delete(url).then(result=>{
|
||
if(result){
|
||
showNotification("webhook删除成功！");
|
||
history.push(`/projects/${owner}/${projectsId}/setting/webhooks`);
|
||
}
|
||
}).catch(error=>{})
|
||
}
|
||
}
|
||
|
||
const radioStyle = {
|
||
display: 'block',
|
||
height: '30px',
|
||
lineHeight: '30px',
|
||
};
|
||
|
||
return(
|
||
<div className="newPanel">
|
||
<DeleteBox
|
||
visible={visible}
|
||
onCancel={()=>setVisible(false)}
|
||
onSuccess={onSuccess}
|
||
title="删除Webhook"
|
||
content="您确定要删除此Webhook吗？"
|
||
subTitle={`删除后未来事件将不会推送至此Webhook地址：${data && data.url}`}
|
||
/>
|
||
<Banner>
|
||
<Link to={`/projects/${owner}/${projectsId}/setting/webhooks`} className="color-blue">Webhooks</Link>
|
||
<i className="iconfont icon-youjiantou ml5 mr5 font-12"></i>
|
||
<span>{id ? "更新" : "添加"}Webhook</span>
|
||
</Banner>
|
||
<div>
|
||
<p className="deschead mg"><span>当webhook被触发时，我们将向以下URL发送通知，包括已选择事件的详细信息。更多信息可查阅<a className="color-blue hoverLine" target="_blank" href="https://forum.trustie.net/forums/3408/detail">webhooks指南</a>。</span></p>
|
||
<Form>
|
||
<input type="password" style={{display:"none"}} />
|
||
<Form.Item label="目标URL" colon={false}>
|
||
{getFieldDecorator("url",{
|
||
rules:[
|
||
{required:true,message:"请输入目标URL"},
|
||
{
|
||
validator:checkAddr
|
||
}
|
||
]
|
||
})(
|
||
<Input placeholder="请输入目标URL" size="large" autocomplete='off'/>
|
||
)}
|
||
</Form.Item>
|
||
<Form.Item label="Webhook密钥" colon={false}>
|
||
{getFieldDecorator("secret",{
|
||
rules:[]
|
||
})(
|
||
<Input.Password placeholder="请输入Webhook密钥" autocomplete='new-password' size="large" maxLength={"50"}/>
|
||
)}
|
||
</Form.Item>
|
||
<Form.Item label="Http请求方法" colon={false}>
|
||
{getFieldDecorator("http_method",{
|
||
rules:[]
|
||
})(
|
||
<Select onSelect={changeHTTP} size="large">
|
||
<Select.Option value="GET">GET</Select.Option>
|
||
<Select.Option value="POST">POST</Select.Option>
|
||
</Select>
|
||
)}
|
||
</Form.Item>
|
||
<Form.Item
|
||
label="POST请求类型"
|
||
colon={false}
|
||
style={{display:httpValue === "POST" ?"block":"none"}}
|
||
>
|
||
{getFieldDecorator("content_type",{
|
||
rules:[]
|
||
})(
|
||
<Select size="large">
|
||
<Select.Option value="json">application/json</Select.Option>
|
||
<Select.Option value="form">application/x-www-form-urlencoded</Select.Option>
|
||
</Select>
|
||
)}
|
||
</Form.Item>
|
||
<Form.Item label="您希望哪些事件触发此webhook？" colon={false} className="topLine">
|
||
{getFieldDecorator("eventCondition",{
|
||
rules:[]
|
||
})(
|
||
<Radio.Group onChange={changeCondition}>
|
||
<Radio style={radioStyle} value="push">只是push事件</Radio>
|
||
<Radio style={radioStyle} value="all">所有事件</Radio>
|
||
<Radio style={radioStyle} value="forevent">自定义事件</Radio>
|
||
</Radio.Group>
|
||
)}
|
||
</Form.Item>
|
||
<div className="eventCb"
|
||
style={{display:condition === "forevent" ?"block":"none"}}
|
||
>
|
||
<Checkbox.Group value={event} onChange={(e)=>{setEvent(e)}}>
|
||
<p className="color-grey-3 mb10">代码库事件</p>
|
||
<div className="colSpan">
|
||
<span>
|
||
<Checkbox value="push">推送</Checkbox>
|
||
<span>git推送到存储库</span>
|
||
</span>
|
||
{/* <span>
|
||
<Checkbox value="repository">代码库</Checkbox>
|
||
<span>创建或删除代码库</span>
|
||
</span> */}
|
||
<span>
|
||
<Checkbox value="create">创建</Checkbox>
|
||
<span>创建分支或标签</span>
|
||
</span>
|
||
<span>
|
||
<Checkbox value="delete">删除</Checkbox>
|
||
<span>删除分支或标签</span>
|
||
</span>
|
||
</div>
|
||
<p className="color-grey-3 mt10 mb10">合并请求事件</p>
|
||
<div className="colSpan">
|
||
<span>
|
||
<Checkbox value="pull_request_only">合并请求</Checkbox>
|
||
<span>合并请求被打开、被关闭、被重新打开或被编辑</span>
|
||
</span>
|
||
<span>
|
||
<Checkbox value="pull_request_assign">合并请求分配</Checkbox>
|
||
<span>合并请求被分配或取消分配</span>
|
||
</span>
|
||
{/* <span>
|
||
<Checkbox value="pull_request_milestone">合并请求收入里程碑</Checkbox>
|
||
<span>合并请求被记录或取消记录于里程碑中</span>
|
||
</span> */}
|
||
{/* <span>
|
||
<Checkbox value="pull_request_comment">合并请求被评论</Checkbox>
|
||
<span>合并请求评论被创建、编辑或删除</span>
|
||
</span> */}
|
||
{/* <span>
|
||
<Checkbox value="pull_request_label">合并请求标签</Checkbox>
|
||
<span>合并请求的标签被更新或清除</span>
|
||
</span> */}
|
||
<span>
|
||
<Checkbox value="pull_request_review">合并请求审查</Checkbox>
|
||
<span>合并请求被批准、拒绝或提出审查意见，审查人员的修改，审查线程已解决或未解决</span>
|
||
</span>
|
||
{/* <span>
|
||
<Checkbox value="pull_request_sync">合并请求被同步</Checkbox>
|
||
<span>合并请求被同步</span>
|
||
</span> */}
|
||
</div>
|
||
</Checkbox.Group>
|
||
{ eventFlag && <span style={{color:"#DF0002"}}>请选择自定义事件！</span>}
|
||
</div>
|
||
<Form.Item
|
||
label="分支过滤"
|
||
className="topLine"
|
||
help={'推送、创建，删除分支事件的分支白名单，使用 glob 模式匹配指定。若为空或 *，则将报告所有分支的事件。语法文档见github.com/gobwas/glob。示例：master,{master,release*}。'}
|
||
colon={false}
|
||
style={{marginTop:'15px'}}
|
||
>
|
||
{getFieldDecorator("branch_filter",{
|
||
rules:[]
|
||
})(
|
||
<Input size="large"/>
|
||
)}
|
||
</Form.Item>
|
||
<Form.Item
|
||
className="topLine bottomLine"
|
||
colon={false}
|
||
style={{height:"110px",paddingBottom:"0px"}}
|
||
>
|
||
{getFieldDecorator("active",{
|
||
valuePropName:"checked"
|
||
})(
|
||
<Checkbox>激活<span className="subCbDesc">激活后触发事件的信息将发送到此Webhook地址</span></Checkbox>
|
||
)}
|
||
</Form.Item>
|
||
|
||
<Button type="primary" onClick={submit} className="ml20" style={{width:id?"":"100px"}}>{id ? "更新Webhook":"添加"}</Button>
|
||
{
|
||
id && <Button type="danger" className="ml20" onClick={deleteFunc}>删除</Button>
|
||
}
|
||
</Form>
|
||
</div>
|
||
{ id && <PushHistory id={id} owner={owner} projectsId={projectsId} showNotification={showNotification}/> }
|
||
</div>
|
||
)
|
||
}
|
||
export default Form.create()(forwardRef(New)); |