Reconstructed the chaincode files

Signed-off-by: xiaor2 <xiaor2@illinois.edu>
hyperledger-cello · Apr 27, 2024 · bac2e02 · bac2e02
1 parent d313b5c
commit bac2e02
Show file tree

Hide file tree

Showing 2 changed files with 155 additions and 148 deletions.
diff --git a/src/dashboard/src/pages/ChainCode/ChainCode.js b/src/dashboard/src/pages/ChainCode/ChainCode.js
@@ -2,159 +2,17 @@
  SPDX-License-Identifier: Apache-2.0
 */
 import React, { PureComponent, Fragment } from 'react';
-import { connect, injectIntl, useIntl } from 'umi';
-import { Card, Button, Modal, Input, Upload, Divider, message, Dropdown, Menu } from 'antd';
-import { PlusOutlined, UploadOutlined, FunctionOutlined, DownOutlined } from '@ant-design/icons';
+import { connect, injectIntl } from 'umi';
+import { Card, Button, Divider, Dropdown, Menu } from 'antd';
+import { PlusOutlined, FunctionOutlined, DownOutlined } from '@ant-design/icons';
 import PageHeaderWrapper from '@/components/PageHeaderWrapper';
 import StandardTable from '@/components/StandardTable';
-import { Form } from 'antd/lib/index';
+import UploadForm from '@/pages/ChainCode/forms/UploadForm';
 import InstallForm from '@/pages/ChainCode/forms/InstallForm';
 import ApproveForm from '@/pages/ChainCode/forms/ApproveForm';
 import CommitForm from './forms/CommitForm';
 import styles from './styles.less';
 
-const FormItem = Form.Item;
-
-const UploadChainCode = props => {
-  const [form] = Form.useForm();
-  const intl = useIntl();
-  const {
-    modalVisible,
-    handleUpload,
-    handleModalVisible,
-    uploading,
-    fetchChainCodes,
-    newFile,
-    setFile,
-  } = props;
-
-  const uploadCallback = response => {
-    if (response.status !== 'successful') {
-      message.error(
-        intl.formatMessage({
-          id: 'app.chainCode.form.create.fail',
-          defaultMessage: 'Upload chaincode failed',
-        })
-      );
-    } else {
-      message.success(
-        intl.formatMessage({
-          id: 'app.chainCode.form.create.success',
-          defaultMessage: 'Upload chaincode succeed',
-        })
-      );
-      form.resetFields();
-      handleModalVisible();
-      fetchChainCodes();
-      setFile(null);
-    }
-  };
-
-  const onSubmit = () => {
-    form.submit();
-  };
-
-  const onFinish = values => {
-    handleUpload(values, uploadCallback);
-  };
-
-  const formItemLayout = {
-    labelCol: {
-      xs: { span: 24 },
-      sm: { span: 7 },
-    },
-    wrapperCol: {
-      xs: { span: 24 },
-      sm: { span: 14 },
-      md: { span: 12 },
-    },
-  };
-
-  const uploadProps = {
-    onRemove: () => {
-      setFile(null);
-    },
-    beforeUpload: file => {
-      setFile(file);
-      return false;
-    },
-  };
-
-  const normFile = e => {
-    if (Array.isArray(e)) {
-      return e;
-    }
-    return newFile;
-  };
-
-  return (
-    <Modal
-      destroyOnClose
-      title={intl.formatMessage({
-        id: 'app.chainCode.form.create.header.title',
-        defaultMessage: 'Upload chaincode',
-      })}
-      confirmLoading={uploading}
-      open={modalVisible}
-      onOk={onSubmit}
-      onCancel={() => handleModalVisible(false)}
-    >
-      <Form onFinish={onFinish} form={form} preserve={false}>
-        <FormItem
-          {...formItemLayout}
-          label={intl.formatMessage({
-            id: 'app.chainCode.form.create.file',
-            defaultMessage: 'Package',
-          })}
-          name="file"
-          getValueFromEvent={normFile}
-          rules={[
-            {
-              required: true,
-              message: intl.formatMessage({
-                id: 'app.chainCode.form.create.fileSelect',
-                defaultMessage: 'Please select the chaincode package',
-              }),
-            },
-          ]}
-          extra="Only tar.gz file is supported"
-        >
-          <Upload {...uploadProps}>
-            <Button disabled={!!newFile}>
-              <UploadOutlined />
-              {intl.formatMessage({
-                id: 'app.chainCode.form.create.fileSelect',
-                defaultMessage: 'Please select the chaincode package',
-              })}
-            </Button>
-          </Upload>
-        </FormItem>
-        <FormItem
-          {...formItemLayout}
-          label={intl.formatMessage({
-            id: 'app.chainCode.form.create.description',
-            defaultMessage: 'Description',
-          })}
-          name="description"
-          initialValue=""
-          rules={[
-            {
-              required: false,
-            },
-          ]}
-        >
-          <Input
-            placeholder={intl.formatMessage({
-              id: 'app.chainCode.form.create.description',
-              defaultMessage: 'Chaincode Description',
-            })}
-          />
-        </FormItem>
-      </Form>
-    </Modal>
-  );
-};
-
 @connect(({ chainCode, loading }) => ({
   chainCode,
   loadingChainCodes: loading.effects['chainCode/listChainCode'],
@@ -310,7 +168,7 @@ class ChainCode extends PureComponent {
       committing,
     } = this.props;
 
-    const formProps = {
+    const uploadFormProps = {
       modalVisible,
       handleUpload: this.handleUpload,
       handleModalVisible: this.handleModalVisible,
@@ -484,7 +342,7 @@ class ChainCode extends PureComponent {
             />
           </div>
         </Card>
-        <UploadChainCode {...formProps} />
+        <UploadForm {...uploadFormProps} />
         <InstallForm {...installFormProps} />
         <ApproveForm {...approveFormProps} />
         <CommitForm {...commitFormProps} />

diff --git a/src/dashboard/src/pages/ChainCode/forms/UploadForm.js b/src/dashboard/src/pages/ChainCode/forms/UploadForm.js
@@ -0,0 +1,149 @@
+import React from 'react';
+import { injectIntl, useIntl } from 'umi';
+import { Button, Modal, Input, Upload, message } from 'antd';
+import { UploadOutlined } from '@ant-design/icons';
+import { Form } from 'antd/lib/index';
+
+const FormItem = Form.Item;
+
+const UploadForm = props => {
+  const [form] = Form.useForm();
+  const intl = useIntl();
+  const {
+    modalVisible,
+    handleUpload,
+    handleModalVisible,
+    uploading,
+    fetchChainCodes,
+    newFile,
+    setFile,
+  } = props;
+
+  const uploadCallback = response => {
+    if (response.status !== 'successful') {
+      message.error(
+        intl.formatMessage({
+          id: 'app.chainCode.form.create.fail',
+          defaultMessage: 'Upload chaincode failed',
+        })
+      );
+    } else {
+      message.success(
+        intl.formatMessage({
+          id: 'app.chainCode.form.create.success',
+          defaultMessage: 'Upload chaincode succeed',
+        })
+      );
+      form.resetFields();
+      handleModalVisible();
+      fetchChainCodes();
+      setFile(null);
+    }
+  };
+
+  const onSubmit = () => {
+    form.submit();
+  };
+
+  const onFinish = values => {
+    handleUpload(values, uploadCallback);
+  };
+
+  const formItemLayout = {
+    labelCol: {
+      xs: { span: 24 },
+      sm: { span: 7 },
+    },
+    wrapperCol: {
+      xs: { span: 24 },
+      sm: { span: 14 },
+      md: { span: 12 },
+    },
+  };
+
+  const uploadProps = {
+    onRemove: () => {
+      setFile(null);
+    },
+    beforeUpload: file => {
+      setFile(file);
+      return false;
+    },
+  };
+
+  const normFile = e => {
+    if (Array.isArray(e)) {
+      return e;
+    }
+    return newFile;
+  };
+
+  return (
+    <Modal
+      destroyOnClose
+      title={intl.formatMessage({
+        id: 'app.chainCode.form.create.header.title',
+        defaultMessage: 'Upload chaincode',
+      })}
+      confirmLoading={uploading}
+      open={modalVisible}
+      onOk={onSubmit}
+      onCancel={() => handleModalVisible(false)}
+    >
+      <Form onFinish={onFinish} form={form} preserve={false}>
+        <FormItem
+          {...formItemLayout}
+          label={intl.formatMessage({
+            id: 'app.chainCode.form.create.file',
+            defaultMessage: 'Package',
+          })}
+          name="file"
+          getValueFromEvent={normFile}
+          rules={[
+            {
+              required: true,
+              message: intl.formatMessage({
+                id: 'app.chainCode.form.create.fileSelect',
+                defaultMessage: 'Please select the chaincode package',
+              }),
+            },
+          ]}
+          extra="Only tar.gz file is supported"
+        >
+          <Upload {...uploadProps}>
+            <Button disabled={!!newFile}>
+              <UploadOutlined />
+              {intl.formatMessage({
+                id: 'app.chainCode.form.create.fileSelect',
+                defaultMessage: 'Please select the chaincode package',
+              })}
+            </Button>
+          </Upload>
+        </FormItem>
+        <FormItem
+          {...formItemLayout}
+          label={intl.formatMessage({
+            id: 'app.chainCode.form.create.description',
+            defaultMessage: 'Description',
+          })}
+          name="description"
+          initialValue=""
+          rules={[
+            {
+              required: false,
+            },
+          ]}
+        >
+          <Input
+            placeholder={intl.formatMessage({
+              id: 'app.chainCode.form.create.description',
+              defaultMessage: 'Chaincode Description',
+            })}
+          />
+        </FormItem>
+      </Form>
+    </Modal>
+  );
+};
+
+export default injectIntl(UploadForm);