forgeplus-react/src/forge/Server/reposyncer/component/setting.jsx

81 lines
3.8 KiB
JavaScript

import React, { Fragment, useState } from "react";
import '../index.scss';
import { Breadcrumb, Button, Input, Table, Tag, message } from "antd";
import { Link } from "react-router-dom";
import gitHub1 from '../../img/github1.png';
import gitee1 from '../../img/gitee1.png';
import axios from "axios";
function RecordList(props){
const { owner , projectsId, platform } = props.match.params;
const {storeDetail, reflushRepos} = props;
const {sync_repositories_unique=[]} = storeDetail || {};
const [token, setToken] = useState({});
function inviteClick(idName) {
console.log('idName', idName);
const copyEle = document.querySelector(idName); // 获取要复制的节点
if (!copyEle) {
console.error("您的CopyTool未设置正确的inputId");
return;
}
copyEle.select(); // 执行选中元素
if (document.execCommand('copy')) {
document.execCommand('copy');
document.getSelection().removeAllRanges();
message.success("复制成功");
}
}
// 同步状态errorBox
// const columns = [
// { title: `${platform}分支`, dataIndex: platform === 'github' ? 'github_branch': 'gitee_branch'},
// { title: "GitLink分支", dataIndex: "gitlink_branch"}
// ]
return <div className="storeListBox storeSetting">
<Breadcrumb separator=">">
<Breadcrumb.Item className="font-15"><Link to={`/${owner}/${projectsId}/service/reposyncer`} className="primaryColor">同步分支列表</Link></Breadcrumb.Item>
<Breadcrumb.Item className="font-15">同步配置</Breadcrumb.Item>
</Breadcrumb>
{sync_repositories_unique.map((item, index) => {
const {type, external_repo_address, sync_repository_ids} = item
return <Fragment>
<div className="font-15 mt20 mb7">同步仓库平台</div>
<div className="infoBox">{<img src={type === "SyncRepositories::Github" ? gitHub1 : gitee1} alt="" style={{width: '75px'}}/>}</div>
<div className="font-15 mt20 mb7">同步仓库地址</div>
<div className="infoBox"><a href={external_repo_address} target="_blank">{external_repo_address}</a></div>
<div className="font-15 mt20 mb7">Webhook接受请求地址</div>
<Input
id={`webhook${index}`}
className="webhookCopyBox copyWebhookInput"
value={`${window.location.origin}/api/v1/${owner}/${projectsId}/sync_repositories/sync?sync_direction=2&repo_type=${type}`}
readOnly
addonAfter={<a className="primaryColor" onClick={()=>{inviteClick(`#webhook${index}`)}}>复制链接</a>}
/>
<div className="font-15 mt20 mb7">同步仓库授权</div>
<Input.Password addonBefore="token" placeholder={`请输入${type.split("::")[1]}的授权token`} style={{width: '60%'}} defaultValue={item.external_token} maxLength={300} onChange={(e)=>{
const objs = {...token}
objs[external_repo_address] = e.target.value
setToken(objs);
}}/>
<Button type="primary" className="ml30" onClick={()=>{
const external_token = token[external_repo_address]
axios.post(`/v1/${owner}/${projectsId}/sync_repositories/update_info.json?sync_repository_ids=${sync_repository_ids.toString()}`, {
external_repo_address,
external_token: external_token || item.external_token
}).then(res=>{
if(res && res.data && !res.data.status){
message.success("更新成功");
reflushRepos();
}
})
}}>更新</Button>
</Fragment>
})}
{/* <div className="font-15 mt20 mb7">同步分支配置</div>
<Table className="branchTable" columns={columns} bordered/> */}
<br/>
<Button className="mt20"><Link to={`/${owner}/${projectsId}/service/reposyncer`}>返回</Link></Button>
</div>
}
export default RecordList;