You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@apisix.apache.org by GitBox <gi...@apache.org> on 2020/05/14 08:50:01 UTC
[GitHub] [incubator-apisix-dashboard] juzhiyuan commented on a change in pull request #185: update SSL Certificate Page
juzhiyuan commented on a change in pull request #185:
URL: https://github.com/apache/incubator-apisix-dashboard/pull/185#discussion_r424944641
##########
File path: src/pages/SSLModule/create/components/CertificateForm/index.tsx
##########
@@ -0,0 +1,67 @@
+import React from 'react';
Review comment:
use `Create`
##########
File path: src/pages/SSLModule/create/components/CertificateForm/index.tsx
##########
@@ -0,0 +1,67 @@
+import React from 'react';
+import { Form, Input } from 'antd';
+import { formatMessage } from 'umi-plugin-react/locale';
+
+interface detailList {
+ mode: string;
+ data?: any;
+ form: any;
Review comment:
##########
File path: src/pages/SSLModule/create/components/CertificateForm/index.tsx
##########
@@ -0,0 +1,67 @@
+import React from 'react';
+import { Form, Input } from 'antd';
+import { formatMessage } from 'umi-plugin-react/locale';
+
+interface detailList {
+ mode: string;
+ data?: any;
+ form: any;
+}
+
+const ListDetail: React.FC<detailList> = props => {
Review comment:
`Index` or `CertificateForm`
##########
File path: src/pages/SSLModule/create/components/CertificateForm/index.tsx
##########
@@ -0,0 +1,67 @@
+import React from 'react';
+import { Form, Input } from 'antd';
+import { formatMessage } from 'umi-plugin-react/locale';
Review comment:
```ts
import { useIntl } from 'umi';
const { formatMessage } = useIntl();
```
##########
File path: src/pages/SSLModule/create/components/Step3/index.tsx
##########
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Form, Button } from 'antd';
+import CertificateForm from '../CertificateForm/index';
+import { StepProps } from '../..';
+
+const Step3: React.FC<StepProps> = props => {
+ const [form] = Form.useForm();
+ const { data, setStep } = props;
+ const onValidateForm = async () => {
+ setStep(3);
+ };
+ const preStep = () => {
Review comment:
onStepChange
##########
File path: src/pages/SSLModule/create/index.tsx
##########
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { Card, Steps } from 'antd';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import Step1 from './components/Step1';
+import Step2 from './components/Step2';
+import Step3 from './components/Step3';
+import Step4 from './components/Step4';
+import styles from './style.less';
+
+const { Step } = Steps;
+interface FormStepFormProps {
+ current?: string;
+}
+
+export interface FormData {
+ createType: 'INPUT' | 'UPLOAD';
+}
+
+export interface StepProps {
+ data: any;
+ setStep: any;
+ setData: any;
+}
+
+const Create: React.FC<FormStepFormProps> = () => {
+ const [currentStep, setCurrentStep] = useState<number>(0);
+ const [formData, setFormData] = useState<FormData>({
+ createType: 'INPUT',
+ });
+ let step;
+ const setStep = (params: React.SetStateAction<number>) => {
+ setCurrentStep(params);
+ };
+ const setData = (params: React.SetStateAction<FormData>) => {
+ setFormData(params);
+ };
+ const setpProps = {
+ data: formData,
+ setStep,
+ setData,
+ };
+ if (currentStep === 0) {
+ step = <Step1 {...setpProps} />;
Review comment:
```tsx
<Step1 onStepChange={step => setCurrentStep(step)} />
```
##########
File path: src/pages/SSLModule/create/index.tsx
##########
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { Card, Steps } from 'antd';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import Step1 from './components/Step1';
+import Step2 from './components/Step2';
+import Step3 from './components/Step3';
+import Step4 from './components/Step4';
+import styles from './style.less';
+
+const { Step } = Steps;
+interface FormStepFormProps {
+ current?: string;
+}
+
+export interface FormData {
+ createType: 'INPUT' | 'UPLOAD';
+}
+
+export interface StepProps {
+ data: any;
+ setStep: any;
+ setData: any;
+}
+
+const Create: React.FC<FormStepFormProps> = () => {
+ const [currentStep, setCurrentStep] = useState<number>(0);
+ const [formData, setFormData] = useState<FormData>({
+ createType: 'INPUT',
+ });
+ let step;
+ const setStep = (params: React.SetStateAction<number>) => {
+ setCurrentStep(params);
+ };
+ const setData = (params: React.SetStateAction<FormData>) => {
+ setFormData(params);
+ };
+ const setpProps = {
+ data: formData,
+ setStep,
+ setData,
+ };
+ if (currentStep === 0) {
+ step = <Step1 {...setpProps} />;
+ } else if (currentStep === 1) {
+ step = <Step2 {...setpProps} />;
+ } else if (currentStep === 2) {
+ step = <Step3 {...setpProps} />;
+ } else {
+ step = <Step4 {...setpProps} />;
+ }
Review comment:
```ts
const renderStepComponent = () => {
return (<XXX />)
}
```
##########
File path: src/pages/SSLModule/create/components/CertificateForm/index.tsx
##########
@@ -0,0 +1,67 @@
+import React from 'react';
+import { Form, Input } from 'antd';
+import { formatMessage } from 'umi-plugin-react/locale';
+
+interface detailList {
Review comment:
1. should be `DetailList`;
2. Please use a meaningful Interface;
##########
File path: config/config.ts
##########
@@ -82,9 +82,10 @@ export default defineConfig({
hideInMenu: true,
},
{
- path: '/ssl/create',
name: 'create',
- component: './SSLModule/detail',
+ icon: 'smile',
Review comment:
remove this key when using hideInMenu
##########
File path: src/pages/SSLModule/create/components/Step1/index.tsx
##########
@@ -0,0 +1,56 @@
+import React from 'react';
+import { Form, Button, Select } from 'antd';
+import styles from './index.less';
+import { StepProps } from '../..';
+
+const { Option } = Select;
+
+const formItemLayout = {
+ labelCol: {
+ span: 5,
+ },
+ wrapperCol: {
+ span: 19,
+ },
+};
+
+const Step1: React.FC<StepProps> = props => {
+ const { data, setStep, setData } = props;
Review comment:
`({})`
##########
File path: src/pages/SSLModule/create/components/CertificateForm/index.tsx
##########
@@ -0,0 +1,67 @@
+import React from 'react';
+import { Form, Input } from 'antd';
+import { formatMessage } from 'umi-plugin-react/locale';
+
+interface detailList {
+ mode: string;
Review comment:
`mode: 'EDIT' | 'CREATE'`
##########
File path: src/pages/SSLModule/create/components/Step1/index.tsx
##########
@@ -0,0 +1,56 @@
+import React from 'react';
+import { Form, Button, Select } from 'antd';
+import styles from './index.less';
+import { StepProps } from '../..';
+
+const { Option } = Select;
+
+const formItemLayout = {
+ labelCol: {
+ span: 5,
+ },
+ wrapperCol: {
+ span: 19,
+ },
+};
+
+const Step1: React.FC<StepProps> = props => {
+ const { data, setStep, setData } = props;
+ const [form] = Form.useForm();
+
+ const { validateFields } = form;
+ const onValidateForm = async () => {
+ const values = await validateFields();
Review comment:
`try catch` or use `.then`
##########
File path: src/pages/SSLModule/create/components/Step2/index.tsx
##########
@@ -0,0 +1,92 @@
+import React from 'react';
+import { Form, Button, Upload } from 'antd';
+import { UploadOutlined } from '@ant-design/icons';
+import { UploadChangeParam } from 'antd/lib/upload';
+import { UploadFile } from 'antd/lib/upload/interface';
+import styles from './index.less';
+import CertificateForm from '../CertificateForm/index';
+import { StepProps } from '../..';
+
+const Step2: React.FC<StepProps> = props => {
+ const [form] = Form.useForm();
+ const { data, setStep, setData } = props;
+ const { validateFields } = form;
+
+ const onValidateForm = async () => {
+ const values = await validateFields();
+ setData({
+ createType: data.createType,
+ ...values,
+ });
+ setStep(2);
+ };
+ const preStep = () => {
+ setStep(0);
+ };
+ let renderView;
+ const buttonArea = (
+ <div style={{ width: '100%', textAlign: 'center' }}>
+ <Button type="primary" onClick={preStep} style={{ marginRight: '8px' }}>
+ 上一步
+ </Button>
+ <Button type="primary" onClick={onValidateForm}>
+ 下一步
+ </Button>
+ </div>
+ );
+ if (data.createType === 'INPUT') {
+ renderView = (
+ <div className="step2-container">
+ <CertificateForm mode="EDIT" form={form} data={data} />
+ {buttonArea}
+ </div>
+ );
+ } else {
+ type UploadType = 'PUBLIC_KEY' | 'PRIVATE_KEY';
+ const handleChange = (info: UploadChangeParam<UploadFile<any>>, type: UploadType) => {
+ console.log('type: ', type);
Review comment:
,
##########
File path: src/pages/SSLModule/create/components/CertificateForm/index.tsx
##########
@@ -0,0 +1,67 @@
+import React from 'react';
+import { Form, Input } from 'antd';
+import { formatMessage } from 'umi-plugin-react/locale';
+
+interface detailList {
+ mode: string;
Review comment:
or import the Type from `Create/index.tsx`, like `ProcessMode`
##########
File path: src/pages/SSLModule/create/components/Step3/index.tsx
##########
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Form, Button } from 'antd';
+import CertificateForm from '../CertificateForm/index';
Review comment:
,
##########
File path: src/pages/SSLModule/create/components/CertificateForm/index.tsx
##########
@@ -0,0 +1,67 @@
+import React from 'react';
+import { Form, Input } from 'antd';
+import { formatMessage } from 'umi-plugin-react/locale';
+
+interface detailList {
+ mode: string;
+ data?: any;
+ form: any;
+}
+
+const ListDetail: React.FC<detailList> = props => {
+ const { mode, data, form } = props;
+ const sni =
Review comment:
```tsx
return (
<>
{
Boolean(xxx) && (<Component />)
}
</>
)
```
##########
File path: src/pages/SSLModule/create/components/CertificateForm/index.tsx
##########
@@ -0,0 +1,67 @@
+import React from 'react';
+import { Form, Input } from 'antd';
+import { formatMessage } from 'umi-plugin-react/locale';
+
+interface detailList {
+ mode: string;
+ data?: any;
+ form: any;
+}
+
+const ListDetail: React.FC<detailList> = props => {
Review comment:
```ts
const X = ({mode, data, form}) => {}
```
##########
File path: src/pages/SSLModule/list/index.tsx
##########
@@ -43,18 +43,29 @@ const List: React.FC = () => {
title: 'SNI',
dataIndex: ['value', 'sni'],
},
+ // TODO: need to check api response
+ {
+ title: '关联路由',
+ dataIndex: [],
+ },
+ {
+ title: '过期时间',
+ dataIndex: [],
+ },
+ {
+ title: '是否启用',
+ valueType: 'option',
+ render: (_, record) => (
+ <>
+ <Switch defaultChecked onClick={() => console.log(record)} />
Review comment:
Please be careful with the defaultChecked, it should be checked by API response.
##########
File path: src/pages/SSLModule/create/components/Step2/index.tsx
##########
@@ -0,0 +1,92 @@
+import React from 'react';
+import { Form, Button, Upload } from 'antd';
+import { UploadOutlined } from '@ant-design/icons';
+import { UploadChangeParam } from 'antd/lib/upload';
+import { UploadFile } from 'antd/lib/upload/interface';
+import styles from './index.less';
+import CertificateForm from '../CertificateForm/index';
+import { StepProps } from '../..';
+
+const Step2: React.FC<StepProps> = props => {
Review comment:
,
##########
File path: src/pages/SSLModule/create/components/CertificateForm/index.tsx
##########
@@ -0,0 +1,67 @@
+import React from 'react';
+import { Form, Input } from 'antd';
+import { formatMessage } from 'umi-plugin-react/locale';
+
+interface detailList {
+ mode: string;
+ data?: any;
Review comment:
`FormData`?
##########
File path: src/pages/SSLModule/create/components/CertificateForm/index.tsx
##########
@@ -0,0 +1,67 @@
+import React from 'react';
+import { Form, Input } from 'antd';
+import { formatMessage } from 'umi-plugin-react/locale';
+
+interface detailList {
+ mode: string;
+ data?: any;
+ form: any;
+}
+
+const ListDetail: React.FC<detailList> = props => {
+ const { mode, data, form } = props;
+ const sni =
Review comment:
consider putting this component inside render function, or change the name to `renderSNI`
##########
File path: src/pages/SSLModule/create/components/CertificateForm/index.tsx
##########
@@ -0,0 +1,67 @@
+import React from 'react';
+import { Form, Input } from 'antd';
+import { formatMessage } from 'umi-plugin-react/locale';
+
+interface detailList {
+ mode: string;
+ data?: any;
+ form: any;
+}
+
+const ListDetail: React.FC<detailList> = props => {
+ const { mode, data, form } = props;
+ const sni =
+ mode === 'EDIT' ? null : (
+ <Form.Item
+ label="SNI"
+ name="sni"
+ rules={[
+ { required: true, message: formatMessage({ id: 'component.ssl.fieldSNIInvalid' }) },
+ ]}
+ >
+ <Input disabled={mode !== 'EDIT'} />
+ </Form.Item>
+ );
+ const expireTime =
Review comment:
same as SNI
##########
File path: src/pages/SSLModule/create/components/Step1/index.tsx
##########
@@ -0,0 +1,56 @@
+import React from 'react';
+import { Form, Button, Select } from 'antd';
+import styles from './index.less';
Review comment:
?
##########
File path: src/pages/SSLModule/create/components/CertificateForm/index.tsx
##########
@@ -0,0 +1,67 @@
+import React from 'react';
+import { Form, Input } from 'antd';
+import { formatMessage } from 'umi-plugin-react/locale';
+
+interface detailList {
+ mode: string;
+ data?: any;
+ form: any;
+}
+
+const ListDetail: React.FC<detailList> = props => {
+ const { mode, data, form } = props;
+ const sni =
+ mode === 'EDIT' ? null : (
+ <Form.Item
+ label="SNI"
+ name="sni"
+ rules={[
+ { required: true, message: formatMessage({ id: 'component.ssl.fieldSNIInvalid' }) },
+ ]}
+ >
+ <Input disabled={mode !== 'EDIT'} />
+ </Form.Item>
+ );
+ const expireTime =
+ mode === 'EDIT' ? null : (
+ <Form.Item
+ label="ExpireTime"
+ name="ExpireTime"
+ rules={[{ required: true, message: 'ExpireTime' }]}
+ >
+ <Input disabled={mode !== 'EDIT'} />
+ </Form.Item>
+ );
+
+ return (
+ <>
Review comment:
Please remove the extra Fragment.
##########
File path: src/pages/SSLModule/create/components/Step4/index.tsx
##########
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Result, Button } from 'antd';
+import { router } from 'umi';
Review comment:
history
##########
File path: src/pages/SSLModule/create/components/Step2/index.less
##########
@@ -0,0 +1,6 @@
+@import '~antd/es/style/themes/default.less';
Review comment:
duplicate styles
##########
File path: src/pages/SSLModule/create/components/Step1/index.tsx
##########
@@ -0,0 +1,56 @@
+import React from 'react';
+import { Form, Button, Select } from 'antd';
+import styles from './index.less';
+import { StepProps } from '../..';
+
+const { Option } = Select;
+
+const formItemLayout = {
+ labelCol: {
+ span: 5,
+ },
+ wrapperCol: {
+ span: 19,
+ },
+};
+
+const Step1: React.FC<StepProps> = props => {
+ const { data, setStep, setData } = props;
+ const [form] = Form.useForm();
+
+ const { validateFields } = form;
+ const onValidateForm = async () => {
+ const values = await validateFields();
Review comment:
recommend using `form.validateFields().then()`
##########
File path: src/pages/SSLModule/create/components/Step2/index.tsx
##########
@@ -0,0 +1,92 @@
+import React from 'react';
+import { Form, Button, Upload } from 'antd';
+import { UploadOutlined } from '@ant-design/icons';
+import { UploadChangeParam } from 'antd/lib/upload';
+import { UploadFile } from 'antd/lib/upload/interface';
+import styles from './index.less';
+import CertificateForm from '../CertificateForm/index';
Review comment:
remove index
##########
File path: src/pages/SSLModule/create/components/Step2/index.tsx
##########
@@ -0,0 +1,92 @@
+import React from 'react';
+import { Form, Button, Upload } from 'antd';
+import { UploadOutlined } from '@ant-design/icons';
+import { UploadChangeParam } from 'antd/lib/upload';
+import { UploadFile } from 'antd/lib/upload/interface';
+import styles from './index.less';
+import CertificateForm from '../CertificateForm/index';
+import { StepProps } from '../..';
+
+const Step2: React.FC<StepProps> = props => {
+ const [form] = Form.useForm();
+ const { data, setStep, setData } = props;
+ const { validateFields } = form;
Review comment:
,
##########
File path: src/pages/SSLModule/create/components/Step3/index.tsx
##########
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Form, Button } from 'antd';
+import CertificateForm from '../CertificateForm/index';
+import { StepProps } from '../..';
+
+const Step3: React.FC<StepProps> = props => {
+ const [form] = Form.useForm();
+ const { data, setStep } = props;
+ const onValidateForm = async () => {
+ setStep(3);
+ };
+ const preStep = () => {
+ setStep(1);
+ };
+ return (
+ <div className="container">
+ <CertificateForm mode="VIEW" form={form} data={data} />
+ <div style={{ width: '100%', textAlign: 'center' }}>
+ <Button type="primary" onClick={preStep} style={{ marginRight: '8px' }}>
+ 上一步
+ </Button>
+ <Button type="primary" onClick={onValidateForm}>
Review comment:
,
##########
File path: src/pages/SSLModule/create/components/Step2/index.tsx
##########
@@ -0,0 +1,92 @@
+import React from 'react';
+import { Form, Button, Upload } from 'antd';
+import { UploadOutlined } from '@ant-design/icons';
+import { UploadChangeParam } from 'antd/lib/upload';
+import { UploadFile } from 'antd/lib/upload/interface';
+import styles from './index.less';
+import CertificateForm from '../CertificateForm/index';
+import { StepProps } from '../..';
+
+const Step2: React.FC<StepProps> = props => {
+ const [form] = Form.useForm();
+ const { data, setStep, setData } = props;
+ const { validateFields } = form;
+
+ const onValidateForm = async () => {
+ const values = await validateFields();
+ setData({
+ createType: data.createType,
+ ...values,
+ });
+ setStep(2);
+ };
+ const preStep = () => {
Review comment:
,
##########
File path: src/pages/SSLModule/create/components/Step3/index.tsx
##########
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Form, Button } from 'antd';
+import CertificateForm from '../CertificateForm/index';
+import { StepProps } from '../..';
+
+const Step3: React.FC<StepProps> = props => {
Review comment:
,
##########
File path: src/pages/SSLModule/create/components/Step1/index.tsx
##########
@@ -0,0 +1,56 @@
+import React from 'react';
+import { Form, Button, Select } from 'antd';
+import styles from './index.less';
+import { StepProps } from '../..';
+
+const { Option } = Select;
+
+const formItemLayout = {
+ labelCol: {
+ span: 5,
+ },
+ wrapperCol: {
+ span: 19,
+ },
+};
+
+const Step1: React.FC<StepProps> = props => {
+ const { data, setStep, setData } = props;
+ const [form] = Form.useForm();
+
+ const { validateFields } = form;
+ const onValidateForm = async () => {
+ const values = await validateFields();
+ setStep(1);
+ setData({ createType: values.createType });
+ };
+ return (
+ <>
+ <Form
+ {...formItemLayout}
+ form={form}
+ layout="horizontal"
+ className={styles.stepForm}
Review comment:
check
##########
File path: src/pages/SSLModule/create/components/Step3/index.tsx
##########
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Form, Button } from 'antd';
+import CertificateForm from '../CertificateForm/index';
+import { StepProps } from '../..';
+
+const Step3: React.FC<StepProps> = props => {
+ const [form] = Form.useForm();
+ const { data, setStep } = props;
+ const onValidateForm = async () => {
Review comment:
where is Form...
##########
File path: src/pages/SSLModule/create/components/Step3/index.tsx
##########
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Form, Button } from 'antd';
+import CertificateForm from '../CertificateForm/index';
+import { StepProps } from '../..';
+
+const Step3: React.FC<StepProps> = props => {
+ const [form] = Form.useForm();
+ const { data, setStep } = props;
+ const onValidateForm = async () => {
+ setStep(3);
+ };
+ const preStep = () => {
+ setStep(1);
+ };
+ return (
+ <div className="container">
+ <CertificateForm mode="VIEW" form={form} data={data} />
+ <div style={{ width: '100%', textAlign: 'center' }}>
+ <Button type="primary" onClick={preStep} style={{ marginRight: '8px' }}>
Review comment:
`onClick={() => onStepChange(xx)} `
##########
File path: src/pages/SSLModule/create/components/Step4/index.tsx
##########
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Result, Button } from 'antd';
+import { router } from 'umi';
+import { StepProps } from '../..';
+
+const Step4: React.FC<StepProps> = props => {
+ const { setStep, setData } = props;
+ const continueUpload = () => {
Review comment:
`reset`
##########
File path: src/pages/SSLModule/create/components/Step4/index.tsx
##########
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Result, Button } from 'antd';
+import { router } from 'umi';
+import { StepProps } from '../..';
+
+const Step4: React.FC<StepProps> = props => {
+ const { setStep, setData } = props;
+ const continueUpload = () => {
+ setData({ createType: null });
+ setStep(0);
+ };
+ const backTo = () => {
+ router.push('/ssl');
Review comment:
replace
##########
File path: src/pages/SSLModule/create/components/Step2/index.tsx
##########
@@ -0,0 +1,92 @@
+import React from 'react';
+import { Form, Button, Upload } from 'antd';
+import { UploadOutlined } from '@ant-design/icons';
+import { UploadChangeParam } from 'antd/lib/upload';
+import { UploadFile } from 'antd/lib/upload/interface';
+import styles from './index.less';
+import CertificateForm from '../CertificateForm/index';
+import { StepProps } from '../..';
+
+const Step2: React.FC<StepProps> = props => {
+ const [form] = Form.useForm();
+ const { data, setStep, setData } = props;
+ const { validateFields } = form;
+
+ const onValidateForm = async () => {
+ const values = await validateFields();
+ setData({
+ createType: data.createType,
+ ...values,
+ });
+ setStep(2);
+ };
+ const preStep = () => {
+ setStep(0);
+ };
+ let renderView;
+ const buttonArea = (
+ <div style={{ width: '100%', textAlign: 'center' }}>
+ <Button type="primary" onClick={preStep} style={{ marginRight: '8px' }}>
+ 上一步
+ </Button>
+ <Button type="primary" onClick={onValidateForm}>
+ 下一步
+ </Button>
+ </div>
+ );
+ if (data.createType === 'INPUT') {
+ renderView = (
+ <div className="step2-container">
+ <CertificateForm mode="EDIT" form={form} data={data} />
+ {buttonArea}
+ </div>
+ );
+ } else {
+ type UploadType = 'PUBLIC_KEY' | 'PRIVATE_KEY';
+ const handleChange = (info: UploadChangeParam<UploadFile<any>>, type: UploadType) => {
+ console.log('type: ', type);
+ console.log('info: ', info);
+ // const fr = new FileReader();
+ // fr.readAsText(info.file.originFileObj)
+ // fr.onload(function(){ // 文件读取成功回调
+ // console.log(this.result)
+ // });
+ };
+ const uploadProps = {
+ action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
+ // onChange: handleChange,
+ multiple: false,
+ };
+ renderView = (
Review comment:
,
##########
File path: src/pages/SSLModule/create/index.tsx
##########
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { Card, Steps } from 'antd';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import Step1 from './components/Step1';
+import Step2 from './components/Step2';
+import Step3 from './components/Step3';
+import Step4 from './components/Step4';
+import styles from './style.less';
+
+const { Step } = Steps;
+interface FormStepFormProps {
+ current?: string;
+}
+
+export interface FormData {
+ createType: 'INPUT' | 'UPLOAD';
+}
+
+export interface StepProps {
+ data: any;
+ setStep: any;
+ setData: any;
+}
+
+const Create: React.FC<FormStepFormProps> = () => {
+ const [currentStep, setCurrentStep] = useState<number>(0);
+ const [formData, setFormData] = useState<FormData>({
+ createType: 'INPUT',
+ });
+ let step;
+ const setStep = (params: React.SetStateAction<number>) => {
+ setCurrentStep(params);
+ };
+ const setData = (params: React.SetStateAction<FormData>) => {
Review comment:
,
##########
File path: src/pages/SSLModule/create/components/Step4/index.tsx
##########
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Result, Button } from 'antd';
+import { router } from 'umi';
+import { StepProps } from '../..';
+
+const Step4: React.FC<StepProps> = props => {
+ const { setStep, setData } = props;
+ const continueUpload = () => {
+ setData({ createType: null });
+ setStep(0);
+ };
+ const backTo = () => {
+ router.push('/ssl');
+ };
+
+ return (
+ <>
Review comment:
,
##########
File path: src/pages/SSLModule/create/index.tsx
##########
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { Card, Steps } from 'antd';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import Step1 from './components/Step1';
+import Step2 from './components/Step2';
+import Step3 from './components/Step3';
+import Step4 from './components/Step4';
+import styles from './style.less';
+
+const { Step } = Steps;
+interface FormStepFormProps {
+ current?: string;
+}
+
+export interface FormData {
+ createType: 'INPUT' | 'UPLOAD';
+}
+
+export interface StepProps {
Review comment:
Typing!
##########
File path: src/pages/SSLModule/create/components/Step4/index.tsx
##########
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Result, Button } from 'antd';
+import { router } from 'umi';
+import { StepProps } from '../..';
+
+const Step4: React.FC<StepProps> = props => {
+ const { setStep, setData } = props;
+ const continueUpload = () => {
+ setData({ createType: null });
Review comment:
Type
##########
File path: src/pages/SSLModule/create/components/Step2/index.tsx
##########
@@ -0,0 +1,92 @@
+import React from 'react';
+import { Form, Button, Upload } from 'antd';
+import { UploadOutlined } from '@ant-design/icons';
+import { UploadChangeParam } from 'antd/lib/upload';
+import { UploadFile } from 'antd/lib/upload/interface';
+import styles from './index.less';
+import CertificateForm from '../CertificateForm/index';
+import { StepProps } from '../..';
+
+const Step2: React.FC<StepProps> = props => {
+ const [form] = Form.useForm();
+ const { data, setStep, setData } = props;
+ const { validateFields } = form;
+
+ const onValidateForm = async () => {
+ const values = await validateFields();
Review comment:
,
##########
File path: src/pages/SSLModule/create/index.tsx
##########
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { Card, Steps } from 'antd';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import Step1 from './components/Step1';
+import Step2 from './components/Step2';
+import Step3 from './components/Step3';
+import Step4 from './components/Step4';
+import styles from './style.less';
+
+const { Step } = Steps;
+interface FormStepFormProps {
+ current?: string;
+}
+
+export interface FormData {
+ createType: 'INPUT' | 'UPLOAD';
+}
+
+export interface StepProps {
+ data: any;
+ setStep: any;
+ setData: any;
+}
+
+const Create: React.FC<FormStepFormProps> = () => {
+ const [currentStep, setCurrentStep] = useState<number>(0);
+ const [formData, setFormData] = useState<FormData>({
+ createType: 'INPUT',
+ });
+ let step;
+ const setStep = (params: React.SetStateAction<number>) => {
Review comment:
,
##########
File path: src/pages/SSLModule/create/index.tsx
##########
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { Card, Steps } from 'antd';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import Step1 from './components/Step1';
+import Step2 from './components/Step2';
+import Step3 from './components/Step3';
+import Step4 from './components/Step4';
+import styles from './style.less';
+
+const { Step } = Steps;
+interface FormStepFormProps {
+ current?: string;
+}
+
+export interface FormData {
+ createType: 'INPUT' | 'UPLOAD';
+}
+
+export interface StepProps {
+ data: any;
+ setStep: any;
+ setData: any;
+}
+
+const Create: React.FC<FormStepFormProps> = () => {
+ const [currentStep, setCurrentStep] = useState<number>(0);
Review comment:
remove number
##########
File path: src/pages/SSLModule/create/index.tsx
##########
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { Card, Steps } from 'antd';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import Step1 from './components/Step1';
+import Step2 from './components/Step2';
+import Step3 from './components/Step3';
+import Step4 from './components/Step4';
+import styles from './style.less';
+
+const { Step } = Steps;
+interface FormStepFormProps {
+ current?: string;
+}
+
+export interface FormData {
+ createType: 'INPUT' | 'UPLOAD';
+}
+
+export interface StepProps {
+ data: any;
+ setStep: any;
+ setData: any;
+}
+
+const Create: React.FC<FormStepFormProps> = () => {
+ const [currentStep, setCurrentStep] = useState<number>(0);
+ const [formData, setFormData] = useState<FormData>({
+ createType: 'INPUT',
+ });
+ let step;
+ const setStep = (params: React.SetStateAction<number>) => {
+ setCurrentStep(params);
+ };
+ const setData = (params: React.SetStateAction<FormData>) => {
+ setFormData(params);
+ };
+ const setpProps = {
+ data: formData,
+ setStep,
+ setData,
Review comment:
,
##########
File path: src/pages/SSLModule/create/index.tsx
##########
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { Card, Steps } from 'antd';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import Step1 from './components/Step1';
+import Step2 from './components/Step2';
+import Step3 from './components/Step3';
+import Step4 from './components/Step4';
+import styles from './style.less';
+
+const { Step } = Steps;
+interface FormStepFormProps {
+ current?: string;
Review comment:
,
##########
File path: src/pages/SSLModule/create/index.tsx
##########
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { Card, Steps } from 'antd';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import Step1 from './components/Step1';
+import Step2 from './components/Step2';
+import Step3 from './components/Step3';
+import Step4 from './components/Step4';
+import styles from './style.less';
+
+const { Step } = Steps;
+interface FormStepFormProps {
+ current?: string;
+}
+
+export interface FormData {
+ createType: 'INPUT' | 'UPLOAD';
+}
+
+export interface StepProps {
+ data: any;
+ setStep: any;
+ setData: any;
+}
+
+const Create: React.FC<FormStepFormProps> = () => {
+ const [currentStep, setCurrentStep] = useState<number>(0);
+ const [formData, setFormData] = useState<FormData>({
+ createType: 'INPUT',
+ });
+ let step;
+ const setStep = (params: React.SetStateAction<number>) => {
+ setCurrentStep(params);
+ };
+ const setData = (params: React.SetStateAction<FormData>) => {
+ setFormData(params);
+ };
+ const setpProps = {
+ data: formData,
+ setStep,
+ setData,
+ };
+ if (currentStep === 0) {
+ step = <Step1 {...setpProps} />;
+ } else if (currentStep === 1) {
+ step = <Step2 {...setpProps} />;
+ } else if (currentStep === 2) {
+ step = <Step3 {...setpProps} />;
+ } else {
+ step = <Step4 {...setpProps} />;
+ }
+
+ return (
+ <PageHeaderWrapper content="">
+ <Card bordered={false}>
+ <>
+ <Steps current={currentStep} className={styles.steps}>
+ <Step title="选择创建类型" />
Review comment:
["A", "B"].map(stepName => (<Step title={stepName} />))
##########
File path: src/pages/SSLModule/list/index.tsx
##########
@@ -1,7 +1,7 @@
import React, { useRef } from 'react';
Review comment:
List
##########
File path: src/pages/SSLModule/create/index.tsx
##########
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { Card, Steps } from 'antd';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import Step1 from './components/Step1';
+import Step2 from './components/Step2';
+import Step3 from './components/Step3';
+import Step4 from './components/Step4';
+import styles from './style.less';
+
+const { Step } = Steps;
+interface FormStepFormProps {
+ current?: string;
+}
+
+export interface FormData {
+ createType: 'INPUT' | 'UPLOAD';
+}
+
+export interface StepProps {
+ data: any;
+ setStep: any;
+ setData: any;
+}
+
+const Create: React.FC<FormStepFormProps> = () => {
+ const [currentStep, setCurrentStep] = useState<number>(0);
+ const [formData, setFormData] = useState<FormData>({
+ createType: 'INPUT',
+ });
+ let step;
+ const setStep = (params: React.SetStateAction<number>) => {
+ setCurrentStep(params);
+ };
+ const setData = (params: React.SetStateAction<FormData>) => {
+ setFormData(params);
+ };
+ const setpProps = {
+ data: formData,
+ setStep,
+ setData,
+ };
+ if (currentStep === 0) {
+ step = <Step1 {...setpProps} />;
+ } else if (currentStep === 1) {
+ step = <Step2 {...setpProps} />;
+ } else if (currentStep === 2) {
+ step = <Step3 {...setpProps} />;
+ } else {
+ step = <Step4 {...setpProps} />;
+ }
+
+ return (
+ <PageHeaderWrapper content="">
+ <Card bordered={false}>
+ <>
+ <Steps current={currentStep} className={styles.steps}>
+ <Step title="选择创建类型" />
+ <Step title="编辑上传信息" />
+ <Step title="预览" />
+ <Step title="完成" />
+ </Steps>
+ <div className="step-container">{step}</div>
Review comment:
`renderStepComponent()`
##########
File path: src/pages/SSLModule/create/style.less
##########
@@ -0,0 +1,101 @@
+@import '~antd/es/style/themes/default.less';
Review comment:
codes clean
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org