From 4035fa5bcaaf4e16e1c57f39e52e6df69303006e Mon Sep 17 00:00:00 2001 From: XiaoRui <52845048+snapre@users.noreply.github.com> Date: Mon, 1 Nov 2021 20:17:41 +0800 Subject: [PATCH] refactor: upgrade antd to v4 (#79) --- package.json | 2 +- view/package.json | 5 +- view/src/components/BuildsTable.js | 11 +- view/src/components/DingdingSetting.js | 224 ++++++++++++------------- view/src/components/Header.js | 36 ++-- view/src/components/PkgTable.js | 5 +- view/src/components/SiderBar.js | 16 +- view/src/components/SiteSetting.js | 91 ++++------ view/src/page/Insight.js | 18 +- view/src/page/Setting.js | 21 +-- view/src/page/SnsAuthorize.js | 6 +- 11 files changed, 209 insertions(+), 226 deletions(-) diff --git a/package.json b/package.json index 1edfd9f..484cb16 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "reliable-web", - "version": "1.0.0", + "version": "1.1.0", "description": "Testing management suite with continuous delivery support.", "private": true, "dependencies": { diff --git a/view/package.json b/view/package.json index 8704fab..776d991 100644 --- a/view/package.json +++ b/view/package.json @@ -1,6 +1,6 @@ { "name": "reliable-view", - "version": "1.0.8", + "version": "1.1.0", "description": "view layer for Reliable", "files": [ "public/*.js", @@ -26,6 +26,7 @@ "lint" ], "devDependencies": { + "@ant-design/icons": "^4.7.0", "@babel/core": "^7.0.0", "@babel/plugin-proposal-class-properties": "^7.0.0", "@babel/plugin-proposal-export-default-from": "^7.0.0", @@ -35,7 +36,7 @@ "@babel/preset-react": "^7.0.0", "@babel/register": "^7.0.0", "@babel/runtime": "^7.0.0", - "antd": "^3.21.1", + "antd": "^4.16.13", "autoprefixer": "^9.1.0", "awesome-clipboard": "^2.0.2", "babel-loader": "^8.0.0", diff --git a/view/src/components/BuildsTable.js b/view/src/components/BuildsTable.js index f2ed150..08d64b0 100644 --- a/view/src/components/BuildsTable.js +++ b/view/src/components/BuildsTable.js @@ -5,11 +5,12 @@ import dayjs from 'dayjs'; import { Link } from 'react-router-dom'; import Clipboard from 'awesome-clipboard'; import { - Icon, Table, - Popover, - message, } from 'antd'; +import { + SettingOutlined, + RightCircleOutlined, +} from '@ant-design/icons'; import { FormattedMessage } from 'react-intl'; import { @@ -56,7 +57,7 @@ export default class BuildsTable extends React.Component { href={record.configureUrl} target="_blank" > - + - + : '' ); diff --git a/view/src/components/DingdingSetting.js b/view/src/components/DingdingSetting.js index fc5db36..4003494 100644 --- a/view/src/components/DingdingSetting.js +++ b/view/src/components/DingdingSetting.js @@ -1,22 +1,24 @@ 'use strict'; -import React from 'react'; +import React, { useEffect, useState } from 'react'; import safeGet from 'lodash.get'; import uniqBy from 'lodash.uniqby'; import { FormattedMessage } from 'react-intl'; import { Form, - Icon, Spin, Input, Button, Select, message, } from 'antd'; +import { + DeleteOutlined, + PlusOutlined, +} from '@ant-design/icons'; import request from '../util/request'; -const FormItem = Form.Item; const Option = Select.Option; const webhookFormItemLayout = { @@ -32,148 +34,130 @@ const buttonFormItemLayout = { }, }; -class DingdingSetting extends React.Component { - state = { - webhooks: [], - loading: false, - } - - componentDidMount () { - this.fetchWebhooks(); - } +const DingdingSetting = () => { + const [form] = Form.useForm(); + const [loading, setLoading] = useState(false); - fetchWebhooks = async () => { - this.setState({ loading: true }); + const fetchWebhooks = async () => { + setLoading(true); const res = await request('getWebhooks', 'GET'); - this.setState({ loading: false }); + setLoading(false); if (!res.success) return; const webhooks = safeGet(res, 'data.webhooks'); if (!Array.isArray(webhooks) || !webhooks.length) { - this.setState({ + form.setFieldsValue({ webhooks: [{ url: '', - }], + }] }); return; } - this.setState({ - webhooks, - }); - } + form.setFieldsValue({ webhooks }) + }; + + useEffect(() => { + fetchWebhooks(); + }, []); - postWebhooks = async (webhooks) => { + const postWebhooks = async (webhooks) => { const res = await request('postWebhooks', 'POST', { webhooks, }); if (res.success) { - await this.fetchWebhooks(); + await fetchWebhooks(); message.success('Update webhooks successfully!'); } else { message.error('Update webhooks failed.'); console.error('postWebhooks', res); } - } - - removeOneNotification = index => { - const webhooks = [ - ...this.state.webhooks, - ]; - webhooks.splice(index, 1); - this.setState({ webhooks }); - } - - addMoreNotification = () => { - this.setState({ - webhooks: [ - ...this.state.webhooks, - { - url: '', - }, - ], - }); - } - - updateWebhooks = e => { - e.preventDefault(); - this.props.form.validateFields((err, values) => { - if (err) return; - const uniqWebhooks = uniqBy(values.webhooks, value => `${value.tag}${value.url}`); - this.postWebhooks(uniqWebhooks); - }); - } - - renderWebhookList = () => { - const { getFieldDecorator } = this.props.form; - return this.state.webhooks.map((webhook, index) => { - const notifyTypeSelector = getFieldDecorator(`webhooks[${index}].tag`, { - initialValue: webhook.tag || 'build', - })( - - ); - return ( { + const uniqWebhooks = uniqBy(values.webhooks, value => `${value.tag}${value.url}`); + postWebhooks(uniqWebhooks); + }; + + return ( + +
- {getFieldDecorator(`webhooks[${index}].url`, { - validateTrigger: ['onBlur'], - initialValue: webhook.url, - rules: [{ - required: true, - type: 'url', - whitespace: true, - message: 'Please input DingTalk webhook url.', - }], - })( - this.removeOneNotification(index)} - /> - ) : null - } - /> - )} - ); - }); - } - - render () { - return ( - - - {this.renderWebhookList()} - - - - - + + {(fields, { add, remove }) => ( + <> + {fields.map(field => ( +
+ + + + + } + placeholder="webhook" + addonAfter={ + remove(field.name)} + /> + } + /> + +
+ ))} + + + + + + )} + + - + > + + + - ); - } -} - -export default Form.create()(DingdingSetting); +
+ ); +}; +export default DingdingSetting; diff --git a/view/src/components/Header.js b/view/src/components/Header.js index 3a7b206..cbfbbf9 100644 --- a/view/src/components/Header.js +++ b/view/src/components/Header.js @@ -2,13 +2,21 @@ import React from 'react'; import { - Icon, Menu, Avatar, Layout, Tooltip, Dropdown, } from 'antd'; +import { + MenuUnfoldOutlined, + MenuFoldOutlined, + BookOutlined, + QuestionCircleOutlined, + GlobalOutlined, + UserOutlined, + LogoutOutlined, +} from '@ant-design/icons'; import safeGet from 'lodash.get'; import { FormattedMessage } from 'react-intl'; import GitHubButton from 'react-github-button'; @@ -54,11 +62,17 @@ function ContentHeader (props) { ); return (
- + {props.collapsed ? ( + + ) : ( + + )}
- + }> @@ -80,7 +94,7 @@ function ContentHeader (props) { target="_blank" href={ pkg.links.issues } > - + @@ -89,7 +103,7 @@ function ContentHeader (props) { target="_blank" href={ pkg.links.issues } > - + { @@ -97,7 +111,7 @@ function ContentHeader (props) { - + { nickName } @@ -106,7 +120,7 @@ function ContentHeader (props) { location.href = '/snsAuthorize/signout'; }}> - + {'Sign out'} diff --git a/view/src/components/PkgTable.js b/view/src/components/PkgTable.js index 795f861..38912a4 100644 --- a/view/src/components/PkgTable.js +++ b/view/src/components/PkgTable.js @@ -6,10 +6,10 @@ import { FormattedMessage } from 'react-intl'; import { Table, - Icon, Modal, Popover, } from 'antd'; +import { QrcodeOutlined } from '@ant-design/icons'; import safeGet from 'lodash.get'; @@ -48,8 +48,7 @@ export default class PkgTable extends React.Component { width: 160, render: (value, record) => ( - diff --git a/view/src/components/SiderBar.js b/view/src/components/SiderBar.js index d65f53e..1757eee 100644 --- a/view/src/components/SiderBar.js +++ b/view/src/components/SiderBar.js @@ -2,7 +2,15 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import { Layout, Menu, Icon } from 'antd'; +import { + Layout, + Menu, +} from 'antd'; +import { + FlagOutlined, + LineChartOutlined, + SettingOutlined, +} from '@ant-design/icons'; import { FormattedMessage } from 'react-intl'; const Sider = Layout.Sider; @@ -37,7 +45,7 @@ export default class SiderBar extends React.Component { > - + @@ -46,14 +54,14 @@ export default class SiderBar extends React.Component { - + - + diff --git a/view/src/components/SiteSetting.js b/view/src/components/SiteSetting.js index a1ae0ae..22436a7 100644 --- a/view/src/components/SiteSetting.js +++ b/view/src/components/SiteSetting.js @@ -1,23 +1,18 @@ 'use strict'; -import React from 'react'; +import React, { useEffect, useState } from 'react'; import safeGet from 'lodash.get'; import { FormattedMessage } from 'react-intl'; import { Form, - Icon, Spin, Input, Button, - Select, message, } from 'antd'; import request from '../util/request'; -const FormItem = Form.Item; -const Option = Select.Option; - const siteConfigFormItemLayout = { wrapperCol: { xs: { span: 24 }, @@ -31,84 +26,72 @@ const buttonFormItemLayout = { }, }; -class SiteSetting extends React.Component { - state = { - } - - componentDidMount () { - this.fetchSite(); - } +const SiteSetting = () => { + const [form] = Form.useForm(); + const [loading, setLoading] = useState(false); - fetchSite = async () => { - this.setState({ loading: true }); + const fetchSite = async () => { + setLoading(true); const res = await request('getSite', 'GET'); - this.setState({ loading: false }); + setLoading(false); if (!res.success) return; - const siteConfig = safeGet(res, 'data.site'); - this.setState({ - siteConfig, + const assetsUrl = safeGet(res, 'data.site.assetsUrl'); + form.setFieldsValue({ + assetsUrl }); - } + }; - postSite = async (siteConfig) => { + useEffect(() => { + fetchSite(); + }, []); + + const postSite = async (siteConfig) => { const res = await request('postSite', 'POST', { site: siteConfig, }); if (res.success) { - await this.fetchSite(); + await fetchSite(); message.success('Update siteConfig successfully!'); } else { message.error('Update siteConfig failed.'); console.error('postSite', res); } - } + }; - updateSite = () => { - this.props.form.validateFields((err, values) => { - if (err) return; - this.postSite(values); + const updateSite = () => { + form.validateFields().then(values => { + postSite(values); + }).catch(errorInfo => { + return; }); - } + }; - renderSiteConfig = () => { - const { getFieldDecorator } = this.props.form; - const assetsUrl = safeGet(this.state, 'siteConfig.assetsUrl'); - return ( -
+ return ( +
+ - {getFieldDecorator('assetsUrl', { - initialValue: assetsUrl, - })( - - )} + -
- ); - } - - render () { - return ( - - - {this.renderSiteConfig()} - - - ); - } + + + ); } -export default Form.create()(SiteSetting); +export default SiteSetting; diff --git a/view/src/page/Insight.js b/view/src/page/Insight.js index 14d0d32..409a33f 100644 --- a/view/src/page/Insight.js +++ b/view/src/page/Insight.js @@ -4,12 +4,17 @@ import { Row, Col, Spin, - Icon, Table, Popover, Breadcrumb, DatePicker, } from 'antd'; +import { + QuestionCircleOutlined, + CaretUpOutlined, + CaretDownOutlined, + BulbOutlined, +} from '@ant-design/icons'; import React from 'react'; import safeGet from 'lodash.get'; @@ -130,7 +135,7 @@ export default class Builds extends React.Component { title: }> - + , dataIndex: 'linePercent', @@ -181,7 +186,7 @@ export default class Builds extends React.Component { title: }> - + , dataIndex: 'passPercent', @@ -302,7 +307,7 @@ export default class Builds extends React.Component { return (
- + {first.jobName} @@ -311,7 +316,7 @@ export default class Builds extends React.Component {
- + {last.jobName} @@ -363,9 +368,10 @@ export default class Builds extends React.Component { - + } diff --git a/view/src/page/Setting.js b/view/src/page/Setting.js index 5e6f69d..4c5c917 100644 --- a/view/src/page/Setting.js +++ b/view/src/page/Setting.js @@ -33,28 +33,17 @@ export default class Setting extends React.Component { }> - - - - - +
+ +
}> - - - - - + }> - - - reliable-web: { window.pageConfig.version } - - + reliable-web: { window.pageConfig.version } ); } } - diff --git a/view/src/page/SnsAuthorize.js b/view/src/page/SnsAuthorize.js index 09030ba..6e428a8 100644 --- a/view/src/page/SnsAuthorize.js +++ b/view/src/page/SnsAuthorize.js @@ -2,9 +2,7 @@ import React from 'react'; import Script from 'react-load-script'; import queryString from 'query-string'; import safeGet from 'lodash.get'; -import { - Icon, -} from 'antd'; +import { DingdingOutlined } from '@ant-design/icons'; import ReliableLayout from '../components/ReliableLayout'; @@ -76,7 +74,7 @@ export default class Builds extends React.Component { textAlign: 'center', }}>
Sign in with Dingtalk - +