forgeplus-react/src/forge/Settings/Webhooks/New.jsx

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>
          <Form.Item label="目标URL" colon={false}>
            {getFieldDecorator("url",{
              rules:[
                {required:true,message:"请输入目标URL"},
                {
                  validator:checkAddr
                }
              ]
            })(
              <Input placeholder="请输入目标URL" size="large"/>
            )}
          </Form.Item>
          <Form.Item label="Webhook密钥" colon={false}>
            {getFieldDecorator("secret",{
              rules:[]
            })(
              <Input placeholder="请输入Webhook密钥" 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));