Added the approve form.

src/dashboard/src/pages/ChainCode/ChainCode.js

@@ -8,6 +8,7 @@ import { PlusOutlined, UploadOutlined, FunctionOutlined, DownOutlined } from '@a
 import PageHeaderWrapper from '@/components/PageHeaderWrapper';
 import StandardTable from '@/components/StandardTable';
 import { Form } from 'antd/lib/index';
+import ApproveForm from '@/pages/ChainCode/forms/ApproveForm';
 import styles from './styles.less';
 
 const FormItem = Form.Item;
@@ -156,13 +157,15 @@ const UploadChainCode = props => {
   chainCode,
   loadingChainCodes: loading.effects['chainCode/listChainCode'],
   uploading: loading.effects['chainCode/uploadChainCode'],
+  approving: loading.effects['chainCode/approveChainCode'],
 }))
 class ChainCode extends PureComponent {
   state = {
     selectedRows: [],
     formValues: {},
     newFile: '',
     modalVisible: false,
+    approveModalVisible: false,
   };
 
   componentDidMount() {
@@ -214,6 +217,12 @@ class ChainCode extends PureComponent {
     });
   };
 
+  handleApproveModalVisible = visible => {
+    this.setState({
+      approveModalVisible: !!visible,
+    });
+  };
+
   handleUpload = (values, callback) => {
     const { dispatch } = this.props;
     const formData = new FormData();
@@ -240,12 +249,13 @@ class ChainCode extends PureComponent {
   };
 
   render() {
-    const { selectedRows, modalVisible, newFile } = this.state;
+    const { selectedRows, modalVisible, newFile, approveModalVisible } = this.state;
     const {
       chainCode: { chainCodes, paginations },
       loadingChainCodes,
       intl,
       uploading,
+      approving,
     } = this.props;
 
     const formProps = {
@@ -259,6 +269,15 @@ class ChainCode extends PureComponent {
       intl,
     };
 
+    const approveFormProps = {
+      approveModalVisible,
+      handleApproveModalVisible: this.handleApproveModalVisible,
+      fetchChainCodes: this.fetchChainCodes,
+      approving,
+      selectedRows: [],
+      intl,
+    };
+
     const menu = record => (
       <Menu>
         <Menu.Item>
@@ -333,7 +352,7 @@ class ChainCode extends PureComponent {
               })}
             </a>
             <Divider type="vertical" />
-            <a>
+            <a onClick={() => this.handleApproveModalVisible(true)}>
               {intl.formatMessage({
                 id: 'app.chainCode.table.operate.approve',
                 defaultMessage: 'Approve',
@@ -402,6 +421,7 @@ class ChainCode extends PureComponent {
             />
           </div>
         </Card>
+        <ApproveForm {...approveFormProps} />
         <UploadChainCode {...formProps} />
       </PageHeaderWrapper>
     );

src/dashboard/src/pages/ChainCode/forms/ApproveForm.js

@@ -0,0 +1,168 @@
+import React, { useState, useEffect } from 'react';
+import { injectIntl, useIntl } from 'umi';
+import { Modal, message, Select, Form, Tag, Input, Checkbox } from 'antd';
+import { listChannel } from '@/services/channel';
+import styles from '../styles.less';
+
+const FormItem = Form.Item;
+
+const ApproveForm = props => {
+  const [form] = Form.useForm();
+  const intl = useIntl();
+  const [channels, setChannels] = useState();
+  const {
+    approveModalVisible,
+    handleApprove,
+    handleApproveModalVisible,
+    approving,
+    fetchChainCodes,
+    initFlagChange,
+  } = props;
+
+  useEffect(() => {
+    async function fecthData() {
+      const response = await listChannel();
+      setChannels(response.data.data);
+    }
+    fecthData();
+  }, []);
+
+  const approveCallback = response => {
+    if (response.status !== 'successful') {
+      message.error(
+        intl.formatMessage({
+          id: 'app.chainCode.form.approve.fail',
+          defaultMessage: 'Approve chaincode failed',
+        })
+      );
+    } else {
+      message.success(
+        intl.formatMessage({
+          id: 'app.chainCode.form.approve.success',
+          defaultMessage: 'Approve chaincode succeed',
+        })
+      );
+      form.resetFields();
+      handleApproveModalVisible();
+      fetchChainCodes();
+    }
+  };
+
+  const onSubmit = () => {
+    form.submit();
+  };
+
+  const onFinish = values => {
+    handleApprove(values, approveCallback);
+  };
+
+  const formItemLayout = {
+    labelCol: {
+      xs: { span: 24 },
+      sm: { span: 11 },
+    },
+    wrapperCol: {
+      xs: { span: 24 },
+      sm: { span: 12 },
+      md: { span: 10 },
+    },
+  };
+
+  // eslint-disable-next-line no-shadow
+  const tagRender = props => {
+    const { label, closable, onClose } = props;
+    const onPreventMouseDown = event => {
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    return (
+      <Tag
+        color="cyan"
+        onMouseDown={onPreventMouseDown}
+        closable={closable}
+        onClose={onClose}
+        style={{ marginRight: 3 }}
+      >
+        {label}
+      </Tag>
+    );
+  };
+
+  return (
+    <Modal
+      destroyOnClose
+      title={intl.formatMessage({
+        id: 'app.chainCode.form.approve.header.title',
+        defaultMessage: 'Approve Chaincode',
+      })}
+      confirmLoading={approving}
+      open={approveModalVisible}
+      onOk={onSubmit}
+      onCancel={() => handleApproveModalVisible(false)}
+    >
+      <Form onFinish={onFinish} form={form} preserve={false}>
+        <FormItem
+          {...formItemLayout}
+          label={intl.formatMessage({
+            id: 'app.chainCode.form.approve.channel',
+            defaultMessage: 'Please select channel',
+          })}
+          name="channel"
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage({
+                id: 'app.chainCode.form.approve.channel',
+                defaultMessage: 'Please select channel',
+              }),
+            },
+          ]}
+        >
+          <Select
+            mode="multiple"
+            options={channels} // dummyChannels changed
+            tagRender={tagRender}
+            defaultValue={[]}
+            dropdownClassName={styles.dropdownClassName}
+          />
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label={intl.formatMessage({
+            id: 'app.chainCode.form.approve.specifyName',
+            defaultMessage: 'Name for chaincode',
+          })}
+          name="name"
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage({
+                id: 'app.chainCode.form.approve.specifyName',
+                defaultMessage: 'Name for chaincode',
+              }),
+            },
+          ]}
+        >
+          <Input
+            placeholder={intl.formatMessage({
+              id: 'app.chainCode.form.approve.name',
+              defaultMessage: 'Name',
+            })}
+          />
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label={intl.formatMessage({
+            id: 'app.chainCode.form.initFlag',
+            defaultMessage: '--init-required flag',
+          })}
+          name="initFlag"
+        >
+          <Checkbox onChange={initFlagChange} />
+        </FormItem>
+      </Form>
+    </Modal>
+  );
+};
+
+export default injectIntl(ApproveForm);