Merge pull request #682 from YoungHypo/issue-chaincode-apporve-frontend

Update Frontend for Chaincode Approval Process

Author: yeasy

src/dashboard/src/models/chaincode.js

@@ -1,4 +1,9 @@
-import { listChainCode, uploadChainCode, installChainCode } from '@/services/chaincode';
+import {
+  listChainCode,
+  uploadChainCode,
+  installChainCode,
+  approveChainCode,
+} from '@/services/chaincode';
 
 export default {
   namespace: 'chainCode',
@@ -42,6 +47,12 @@ export default {
         callback(response);
       }
     },
+    *approveChainCode({ payload, callback }, { call }) {
+      const response = yield call(approveChainCode, payload);
+      if (callback) {
+        callback(response);
+      }
+    },
   },
   reducers: {
     save(state, { payload }) {

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

@@ -123,6 +123,25 @@ class ChainCode extends PureComponent {
     });
   };
 
+  handleApprove = (values, callback) => {
+    const { dispatch } = this.props;
+
+    const payload = {
+      channel_name: values.channel,
+      chaincode_name: values.name,
+      chaincode_version: values.version,
+      sequence: parseInt(values.sequence, 10),
+      policy: values.policy,
+      init_flag: !!values.initFlag,
+    };
+
+    dispatch({
+      type: 'chainCode/approveChainCode',
+      payload,
+      callback,
+    });
+  };
+
   handleUpload = (values, callback) => {
     const { dispatch } = this.props;
     const formData = new FormData();
@@ -194,8 +213,13 @@ class ChainCode extends PureComponent {
       approveModalVisible,
       handleApproveModalVisible: this.handleApproveModalVisible,
       fetchChainCodes: this.fetchChainCodes,
+      handleApprove: this.handleApprove,
       approving,
       selectedRows: [],
+      initFlagChange: e => {
+        // this can be used to handle the initFlag change, currently only for demo
+        console.log('initFlag changed:', e.target.checked);
+      },
       intl,
     };
 

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

@@ -104,14 +104,22 @@ const ApproveForm = props => {
       onOk={onSubmit}
       onCancel={() => handleApproveModalVisible(false)}
     >
-      <Form onFinish={onFinish} form={form} preserve={false}>
+      <Form
+        onFinish={onFinish}
+        form={form}
+        preserve={false}
+        initialValues={{
+          policy: '',
+          initFlag: false,
+        }}
+      >
         <FormItem
           {...formItemLayout}
           label={intl.formatMessage({
             id: 'app.chainCode.form.approve.channel',
             defaultMessage: 'Please select channel',
           })}
-          name="channels"
+          name="channel"
           rules={[
             {
               required: true,
@@ -123,7 +131,6 @@ const ApproveForm = props => {
           ]}
         >
           <Select
-            mode="multiple"
             options={channels}
             tagRender={tagRender}
             dropdownClassName={styles.dropdownClassName}
@@ -153,6 +160,69 @@ const ApproveForm = props => {
             })}
           />
         </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label={intl.formatMessage({
+            id: 'app.chainCode.form.approve.version',
+            defaultMessage: 'Version',
+          })}
+          name="version"
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage({
+                id: 'app.chainCode.form.approve.version.required',
+                defaultMessage: 'Please input version',
+              }),
+            },
+          ]}
+        >
+          <Input
+            placeholder={intl.formatMessage({
+              id: 'app.chainCode.form.approve.version.placeholder',
+              defaultMessage: 'Version',
+            })}
+          />
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label={intl.formatMessage({
+            id: 'app.chainCode.form.approve.sequence',
+            defaultMessage: 'Sequence',
+          })}
+          name="sequence"
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage({
+                id: 'app.chainCode.form.approve.sequence.required',
+                defaultMessage: 'Please input sequence',
+              }),
+            },
+          ]}
+        >
+          <Input
+            placeholder={intl.formatMessage({
+              id: 'app.chainCode.form.approve.sequence.placeholder',
+              defaultMessage: 'Sequence',
+            })}
+          />
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label={intl.formatMessage({
+            id: 'app.chainCode.form.approve.endorsement_policy',
+            defaultMessage: 'Endorsement Policy',
+          })}
+          name="policy"
+        >
+          <Input
+            placeholder={intl.formatMessage({
+              id: 'app.chainCode.form.approve.policy.placeholder',
+              defaultMessage: 'Policy (optional)',
+            })}
+          />
+        </FormItem>
         <FormItem
           {...formItemLayout}
           label={intl.formatMessage({

src/dashboard/src/services/chaincode.js

@@ -20,10 +20,9 @@ export async function installChainCode(params) {
   });
 }
 
-// export async function listApprovedChaincode(params) {
-//   // const { channelName, orgName } = params;
-//   // return request(`/api/v1/approvedChaincodeDefinitions/${channel_name}/${org_name}`);
-//   return {
-//     chaincode_names: []
-//   };
-// }
+export async function approveChainCode(params) {
+  return request('/api/v1/chaincodes/approve_for_my_org', {
+    method: 'POST',
+    data: params,
+  });
+}