refactor: upgrade antd to v4 (#79)

macacajs · Nov 1, 2021 · 4035fa5 · 4035fa5
1 parent 09fb9b5
commit 4035fa5
Show file tree

Hide file tree

Showing 11 changed files with 209 additions and 226 deletions.
diff --git 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
@@ -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
@@ -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"
         >
-          <Icon type="setting" />
+          <SettingOutlined />
         </a>
         <a
           style={{
@@ -110,7 +111,7 @@ export default class BuildsTable extends React.Component {
               search: `?jobName=${record.jobName}&buildNumber=${record.buildNumber}`,
             }}
           >
-            <Icon type="right-circle" theme="outlined" />
+            <RightCircleOutlined />
           </Link>
           : ''
       );

diff --git 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',
-      })(
-        <Select style={{ width: 88 }}>
-          <Option value="build"><FormattedMessage id="setting.notification.build" /></Option>
-        </Select>
-      );
-      return (<FormItem
-        key={index}
-        {...webhookFormItemLayout}
+  };
+
+  const updateWebhooks = values => {
+    const uniqWebhooks = uniqBy(values.webhooks, value => `${value.tag}${value.url}`);
+    postWebhooks(uniqWebhooks);
+  };
+
+  return (
+    <Spin spinning={loading}>
+      <Form
+        form={form}
+        onFinish={updateWebhooks}
+        autoComplete="off"
       >
-        {getFieldDecorator(`webhooks[${index}].url`, {
-          validateTrigger: ['onBlur'],
-          initialValue: webhook.url,
-          rules: [{
-            required: true,
-            type: 'url',
-            whitespace: true,
-            message: 'Please input DingTalk webhook url.',
-          }],
-        })(
-          <Input
-            addonBefore={notifyTypeSelector}
-            placeholder="webhook"
-            addonAfter={
-              (
-                webhook.url || // committed webhook
-                (index === this.state.webhooks.length - 1) // new webhook input
-              ) ? (
-                  <Icon
-                    style={{
-                      cursor: 'pointer',
-                    }}
-                    type="delete"
-                    onClick={() => this.removeOneNotification(index)}
-                  />
-                ) : null
-            }
-          />
-        )}
-      </FormItem>);
-    });
-  }
-
-  render () {
-    return (
-      <Form>
-        <Spin spinning={this.state.loading}>
-          {this.renderWebhookList()}
-        </Spin>
-        <FormItem {...webhookFormItemLayout}>
-          <Button data-accessibilityid="add-notification" type="dashed" onClick={this.addMoreNotification}
-            style={{ width: '100%' }}>
-            <Icon type="plus" /> <FormattedMessage id='setting.addDingMessage' />
-          </Button>
-        </FormItem>
-        <FormItem {...buttonFormItemLayout}>
+        <Form.List name="webhooks">
+          {(fields, { add, remove }) => (
+            <>
+              {fields.map(field => (
+                <div key={field.key}>
+                  <Form.Item
+                    {...field}
+                    {...webhookFormItemLayout}
+                    name={[field.name, 'url']}
+                    fieldKey={[field.fieldKey, 'url']}
+                    validateTrigger={['onBlur']}
+                    rules={[{
+                      required: true,
+                      type: 'url',
+                      whitespace: true,
+                      message: 'Please input DingTalk webhook url.',
+                    }]}
+                  >
+                    <Input
+                      addonBefore={
+                        <Form.Item
+                          name={[field.name, 'tag']}
+                          initialValue="build"
+                          noStyle
+                        >
+                          <Select style={{ width: 88 }}>
+                            <Option value="build"><FormattedMessage id="setting.notification.build" /></Option>
+                          </Select>
+                        </Form.Item>
+                      }
+                      placeholder="webhook"
+                      addonAfter={
+                        <DeleteOutlined
+                          style={{
+                            cursor: 'pointer',
+                          }}
+                          onClick={() => remove(field.name)}
+                        />
+                      }
+                    />
+                  </Form.Item>
+                </div>
+              ))}
+
+              <Form.Item
+                {...webhookFormItemLayout}
+              >
+                <Button
+                  type="dashed"
+                  data-accessibilityid="add-notification"
+                  onClick={() => add()}
+                  block
+                  icon={<PlusOutlined />}
+                >
+                  <FormattedMessage id='setting.addDingMessage' />
+                </Button>
+              </Form.Item>
+            </>
+          )}
+        </Form.List>
+        <Form.Item {...buttonFormItemLayout}>
           <Button
-            onClick={this.updateWebhooks}
+            htmlType="submit"
             type="primary"
             style={{ width: '100%' }}
-          ><FormattedMessage id='setting.submit' /></Button>
-        </FormItem>
+          >
+            <FormattedMessage id='setting.submit' />
+          </Button>
+        </Form.Item>
       </Form>
-    );
-  }
-}
-
-export default Form.create()(DingdingSetting);
+    </Spin>
+  );
+};
 
+export default DingdingSetting;