crowd-service-frontend/src/pages/edit/components/Step2/index.jsx

import React, { useEffect, useRef, useState } from 'react';
import { Form, Row, Col, Card, Modal, Input, Select, Upload, Button, message, Tag, Badge, Image } from 'antd';
import { connect } from 'umi';
import styles from './index.less';
import {
  ForkOutlined,
  PlusOutlined,
  ExclamationCircleFilled,
  UploadOutlined,
  EditOutlined,
  EyeOutlined,
  ShareAltOutlined,
  LeftOutlined,
  RightOutlined,
} from '@ant-design/icons';
const { Search } = Input;
import * as echarts from 'echarts';
import { recurrent, severity, bug_categories } from './const';
import { timeToString, getBase64 } from '@/utils/common';

import BugGuideTree from '../BugGuideTree';

const formItemLayout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 19,
  },
};
const modalFormItemLayout = {
  labelCol: {
    span: 5,
  },
  wrapperCol: {
    span: 19,
  },
};
const uploadButton = (
  <div>
    <PlusOutlined />
    <div style={{ marginTop: 8 }}>点击上传</div>
  </div>
);

const Step2 = (props) => {
  const [reportForm] = Form.useForm();
  const [addCaseForm] = Form.useForm();
  const [addBugForm] = Form.useForm();
  const [editReportForm] = Form.useForm();

  const {
    dispatch, reportCommonInfo, osType,
    testCaseList, caseBugList, categories, pathInfo,commonId
  } = props;
  const [showTaskRecommendModal, setTaskRecommendModal] = useState(false);
  const [showAddTestCaseModal, setAddTestCaseModal] = useState(false);
  const [showAddBugModal, setAddTestBugModal] = useState(false);
  const [showEditReportModal, setEditReportModal] = useState(false);
  const currentTestCaseRef = useRef({});
  const [currBugDetail,setCurrBugDetail] = useState({});
  const [isAddCaseStatus, setIsAddCaseStatus] = useState(true);
  // const [currActiveTestCase, setCurrActiveTestCase] = useState({});

  //上传图片廊需要的字段
  const [fileList, setFileList] = useState([]);
  const [previewTitle, setPreviewTitle] = useState('');
  const [previewImage, setPreviewImage] = useState('');
  const [previewVisible, setPreviewVisible] = useState(false);

  const [page2List, setPage2List] = useState([]);
  const [page3List, setPage3List] = useState([]);
  const [bugList, setBugList] = useState([]);

  const handleEditReportInfo = () => {
    editReportForm.validateFields().then((res) => {
      let formData = new FormData();
      formData.append('name', res.name);
      formData.append('report_id', reportCommonInfo.id);
      formData.append('worker_id', commonId.userId);
      formData.append('case_take_id', commonId.case_take_id);
      formData.append('device_model', res.device_model);
      formData.append('device_brand', res.device_brand);
      formData.append('device_os', res.device_os);
      dispatch({
        type: 'editReport/updateReportCommonDetail',
        payload: { formData },
      });
    });
    setEditReportModal(false);
  };

  const handleAddOrEditTestCase = () => {
    addCaseForm.validateFields().then((res) => {
      let formData = new FormData();
      // formData.append("id", values.reportName);
      formData.append('report_id', reportCommonInfo.id);
      formData.append('name', res.name);
      formData.append('front', res.front);
      formData.append('behind', res.behind);
      formData.append('description', res.description);
      if (!isAddCaseStatus) {
        //处理编辑用例
        formData.append('id', currentTestCaseRef.current.id);
        dispatch({
          type: 'editReport/updateTestCase',
          payload: {
            formData,
            report_id: reportCommonInfo.id,
          },
        }).then((res) => {
          if (res && res.status === 200) {
            message.success('修改成功！');
          }
        });
      } else {
        //处理添加用例
        dispatch({
          type: 'editReport/createTestCase',
          payload: {
            formData,
            report_id: reportCommonInfo.id,
          },
        }).then(({ res, testCaseList }) => {
          if (res && res.id) {
            message.success('添加成功！');
            //添加成功后要把currCase指向新的
            const currCase = testCaseList.filter(item =>
              item.id === res.id,
            );
            handleClickTestCase(currCase[0]);
          }
        });
      }
      setAddTestCaseModal(false);
    });
  };

  const handleAddBug = () => {
    addBugForm.validateFields().then((res) => {
      let formData = new FormData();
      formData.append('report_id', reportCommonInfo.id);
      formData.append('title', res.title);
      formData.append('description', res.description);
      formData.append('bug_category', res.bug_category);
      formData.append('severity', res.severity);
      formData.append('recurrent', res.recurrent);
      formData.append('parent', null);
      formData.append('useCase', currentTestCaseRef.current.id);
      formData.append('case_id', commonId.caseId);
      formData.append('case_take_id', commonId.case_take_id);
      formData.append('worker_id', commonId.userId);
      formData.append('page', `${res.page1}-${res.page2}-${res.page3}`);
      if (fileList.length) {
        let str = '';
        fileList.map(item => {
          str += (item.response + ',');
        });
        str = str.substring(0, str.length - 1);
        formData.append('img_url', str);
      }
      //新建bug
      dispatch({
        type: 'editReport/createCaseBug',
        payload: {
          formData,
          useCase: currentTestCaseRef.current.id,
        },
      }).then(res => {
        setAddTestBugModal(false);
      });
    });
  };

  const handleClickTestCase = (caseItem) => {
    // setCurrActiveTestCase(caseItem);
    currentTestCaseRef.current = caseItem;
    dispatch({
      type: 'editReport/getCaseBugList',
      payload: caseItem.id,
    });
  };

  const handleEditTestCase = (item) => {
    setIsAddCaseStatus(false);
    currentTestCaseRef.current = item;
    addCaseForm.setFieldsValue(currentTestCaseRef.current);
    setAddTestCaseModal(true);
  };

  const handleClickAddCase = () => {
    addCaseForm.resetFields();
    setAddTestCaseModal(true);
  };

  const handleClickAddBug = () => {
    //current目前只在点击edit cease的时候会有用
    addBugForm.resetFields();
    setAddTestBugModal(true);
  };

  const handleClickRecommendBtn = () => {
    dispatch({
      type: 'editReport/getPathInfo',
      payload: {
        case_take_id: commonId.case_take_id,
        report_id: reportCommonInfo.id,
      },
    });
    dispatch({
      type: 'editReport/getBugRecommendPath',
      payload: {
        case_take_id: commonId.case_take_id,
        report_id: reportCommonInfo.id,
      },
    });
    dispatch({
      type: 'editReport/getBugRecommendList',
      payload: {
        case_take_id: commonId.case_take_id,
        report_id: reportCommonInfo.id,
      },
    });
    setTaskRecommendModal(true);
  };

  const handleSelectPage1 = (val) => {
    let item = categories.find(x => x.item === val);
    setPage2List(item.children);
  };

  const handleSelectPage2 = (val) => {
    let item = page2List.find(x => x.item === val);
    setPage3List(item.children);
  };

  const handlePreview = async file => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj);
    }
    setPreviewImage(file.url || file.preview);
    setPreviewVisible(true);
    setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1));
  };

  const handleCancel = () => setPreviewVisible(false);

  const handleChange = ({ fileList }) => {
    setFileList(fileList);
  };

  const handleChangeImgToLeft = (item) => {
    item.left--;
    item.right--;
    item['imgArr'] = item['originArr'].slice(item['left'], item['right']);
    let newList = [...bugList];
    let index = newList.findIndex(i => i.id === item.id);
    newList.splice(index, 1, item);
    setBugList(newList);
  };

  const handleChangeImgToRight = (item) => {
    item.left++;
    item.right++;
    item['imgArr'] = item['originArr'].slice(item['left'], item['right']);
    let newList = [...bugList];
    let index = newList.findIndex(i => i.id === item.id);
    newList.splice(index, 1, item);
    setBugList(newList);
  };

  const searchBugToFork = value=>{
    dispatch({
      type: 'editReport/getBugDetail',
      payload: { id: value},
    }).then(res=>{
      setCurrBugDetail(res.detail);
      const {bug_page, bug_category, severity, recurrent}  = res.detail;
      const pages = bug_page.split("-");
      const page1 = pages[0];
      const page2 = pages[1];
      const page3 = pages[2];
      dispatch({
        type: 'editReport/forkReport',
        payload: {
          page1, page2, page3, bug_category, severity, recurrent
        },
      })
    })
  }

  const handleInitThreePages = ()=>{
    let detail = { ...currBugDetail };
    detail['recurrent'] = recurrent[currBugDetail.recurrent];
    detail['severity'] = severity[currBugDetail.severity];
    if(JSON.stringify(detail)!=='{}') {
      let pages = detail.bug_page.split("-");
      detail.page1 = pages[0];
      detail.page2 = pages[1];
      detail.page3 = pages[2];
      if (page2List && page2List.length) {
        handleSelectPage2(pages[1]);
        console.log(detail)
        addBugForm.setFieldsValue(detail)
        console.log(addBugForm.getFieldsValue())
      }else{
        handleSelectPage1(pages[0]);
      }
    }
  }

  useEffect(()=>{
    handleInitThreePages();
  },[currBugDetail,page2List])

  useEffect(() => {
      //能到第二步，说明是有报告信息的
      //有报告，获取对应信息。没有就直接转去了第一步
      dispatch({
        type: 'editReport/getTestCaseList',
        payload: { report_id: reportCommonInfo.id },
      }).then((res) => {
        if (res && res.length && commonId) {
          currentTestCaseRef.current = res[0];
          dispatch({
            type: 'editReport/getCaseBugList',
            payload: currentTestCaseRef.current.id,
          });
        }
      });
      dispatch({
        type: 'editReport/getCategories',
        payload: { examId: commonId.examId },
      });
  }, [reportCommonInfo,commonId.userId,commonId.examId,commonId.case_take_id]);

  useEffect(() => {
    let bugs = caseBugList.map(item => item.detail);
    bugs.map(item => {
      item['originArr'] = item.img_url ? item.img_url.split(',') : [];
      if (item['originArr'].length >= 3) {
        //通过更改左右的标记值来更改显示的图片
        item['left'] = 0;
        item['right'] = 3;
        item['imgArr'] = item['originArr'].slice(item['left'], item['right']);
      } else if (item['originArr'].length > 0 && item['originArr'].length < 3) {
        item['imgArr'] = item['originArr'];
        item['left'] = 0;
        item['right'] = item['originArr'].length;
      }
    });
    setBugList(bugs);
  }, [caseBugList]);

  return (
    <div id="main">
      <Row gutter={10} className={styles.reportInfoContainer}>
        <Col span={23}>
          <Form
            {...formItemLayout}
            form={reportForm}
            className={styles.stepForm}
            hideRequiredMark
          >
            <Row gutter={10}>
              <Col span={5}>
                <Form.Item label="创建日期" rules={[{ required: true, message: '请输入报告名称' }]}>
                  {timeToString(reportCommonInfo.create_time_millis)}
                </Form.Item>
              </Col>
              <Col span={5}>
                <Form.Item label="报告名称" rules={[{ required: true, message: '请输入报告名称' }]}>
                  {reportCommonInfo.name}
                </Form.Item>
              </Col>
              <Col span={5}>
                <Form.Item label="设备名称" required>
                  {reportCommonInfo.device_brand}
                </Form.Item>
              </Col>
              <Col span={5}>
                <Form.Item label="设备品牌" required>
                  {reportCommonInfo.device_model}
                </Form.Item>
              </Col>
              <Col span={4}>
                <Form.Item label="操作系统" required>
                  {reportCommonInfo.device_os}
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Col>
        <Col span={1}>
          <EditOutlined className={styles.editReportInfoIcon}
                        onClick={() => setEditReportModal(true)}
          />
        </Col>
      </Row>

      <Card>
        <div className={styles.reportContainer}>
          <Row gutter={10}>
            <Col span={8}>

              <div gutter={10} className={styles.testCaseTitle}>
                <h3>测试用例列表</h3>

                <Button size="small" type="primary"
                        onClick={() => {
                          handleClickAddCase();
                        }}>
                  <PlusOutlined className={styles.addIcon} />
                  用例
                </Button>
              </div>


              <div className={styles.testCaseList}>
                {testCaseList && testCaseList.length ? testCaseList.map((item) => {
                  return (
                    <div
                      className={`${styles.testCaseItem} ${currentTestCaseRef.current.id === item.id ? styles.activeCase : ''}`}
                      key={item.id}
                      onClick={() => {
                        handleClickTestCase(item);
                      }}>
                      <Row gutter={10}>
                        <Col span={6}>
                          {<span
                            className={styles.testCaseItemNo}>{`编号.${((item.id).substring((item.id.length) - 6)).toUpperCase()}`}</span>}
                        </Col>
                        <Col span={15}>
                          <span>{item.name}</span>
                        </Col>
                        <Col span={3}>
                          <EditOutlined className={styles.editTestBug}
                                        onClick={() => handleEditTestCase(item)} />
                        </Col>
                      </Row>
                    </div>);
                }) : <div>快来创建你的第一个测试用例吧~</div>}
              </div>
            </Col>

            <Col span={16}>
              <div gutter={10} className={styles.testBugTitle}>
                <h3>缺陷列表</h3>
                <div>
                  <Button size="small" type="primary"
                          disabled={JSON.stringify(currentTestCaseRef.current) === '{}'}
                          onClick={() => handleClickAddBug()}>
                    <PlusOutlined className={styles.addIcon} />
                    缺陷
                  </Button>

                  <Button size="small"
                          className={styles.recommendBtn}
                          disabled={JSON.stringify(currentTestCaseRef.current) === '{}'}
                          onClick={() => handleClickRecommendBtn()}>
                    <ShareAltOutlined className={styles.addIcon}/>
                    推荐
                  </Button>
                </div>

              </div>
              <div className={styles.testBugList}>
                {bugList && bugList.length ? bugList.map((item) => {
                  return (
                    <div className={styles.testBugItem} key={item.id}>
                      <Row gutter={10}>
                        <Col span={12}>
                          <div>
                            <div className={styles.testBugItemTitleBlock}>
                              <span className={styles.testBugItemTitle}>标题：</span>
                              <span className={styles.testBugItemTitleDetail}>{item.title}</span>
                            </div>
                            <div className={styles.testBugItemTitleBlock}>
                              <span className={styles.testBugItemTitle}>特征：</span>
                              <Tag color="cyan">{recurrent[item.recurrent - 1]}</Tag>
                              <Tag color="red">{severity[item.severity - 1]}</Tag>
                              <Tag color="geekblue">{item.bug_category}</Tag>
                            </div>
                            <div className={styles.testBugItemTitleBlock}>
                              <span className={styles.testBugItemTitle}>标识：</span>
                              {item.id}
                            </div>
                            <div className={styles.testBugItemTitleBlock}>
                              <span className={styles.testBugItemTitle}>路径：</span>
                              {item.bug_page}
                            </div>
                            <div className={styles.testBugItemTitleBlock}>
                              <span className={styles.testBugItemTitle}>描述：</span>
                              {item.description}
                            </div>
                          </div>
                        </Col>
                        {
                          item.img_url ? (
                              <Col span={12} className={styles.bugImgList}>
                                {item.left > 0 ? <LeftOutlined
                                  onClick={() => {
                                    handleChangeImgToLeft(item);
                                  }} /> : <div className={styles.switchImgBtn}></div>}

                                {item.imgArr.map(img => {
                                  return <Image src={img} key={img} />;
                                })}

                                {item.right < (item.originArr.length - 1) ? <RightOutlined onClick={() => {
                                  handleChangeImgToRight(item);
                                }} /> : <div className={styles.switchImgBtn}></div>}

                              </Col>)
                            : null}
                      </Row>

                    </div>
                  );
                }) : <div>当前用例暂无提交记录，快去创建第一个BUG吧~</div>}
              </div>
            </Col>
          </Row>
        </div>
      </Card>
      <Modal title={isAddCaseStatus ? '添加测试用例' : '编辑测试用例'} width={720}
             visible={showAddTestCaseModal}
             forceRender={true}
             className="addModal"
             footer={[
               <Button key='submit' type="primary" htmlType="submit" onClick={handleAddOrEditTestCase}>确定</Button>,
               <Button key='cancel' htmlType="button" style={{ marginLeft: '10px' }}
                       onClick={() => {
                         setAddTestCaseModal(false);
                       }}>取消</Button>]}
             onCancel={() => {
               setAddTestCaseModal(false);
             }}
      >
        <ExclamationCircleFilled className={styles.addModalInfo} />为了评分准确,请勿提交重复测试用例
        <Form
          {...modalFormItemLayout}
          form={addCaseForm}
          layout="horizontal"
          className={styles.stepForm}
        >
          <Form.Item
            label="用例名称"
            name="name"
            rules={[
              {
                required: true,
                message: '请输入用例名称！',
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="前置条件"
            name="front"
            rules={[
              {
                required: true,
                message: '请输入前置条件！',
              },
            ]}
          >
            <Input.TextArea autoSize={{ minRows: 3, maxRows: 999 }} />
          </Form.Item>
          <Form.Item
            label="测试步骤"
            name="behind"
            rules={[
              {
                required: true,
                message: '请输入测试步骤！',
              },
            ]}
          >
            <Input.TextArea autoSize={{ minRows: 3, maxRows: 999 }} />
          </Form.Item>
          <Form.Item
            label="预期结果"
            name="description"
            rules={[
              {
                required: true,
                message: '请输入预期结果！',
              },
            ]}
          >
            <Input.TextArea autoSize={{ minRows: 3, maxRows: 999 }} />
          </Form.Item>
        </Form>
      </Modal>

      <Modal visible={showAddBugModal} width={720}
             forceRender={true}
             title={[
               <span className={styles.modalTitle} key="title">添加用例缺陷</span>,
               <Search
                 placeholder="输入Bug标识进行fork"
                 allowClear
                 enterButton="fork"
                 onSearch={searchBugToFork}
                 className={styles.forkBtn}
                 key="search"
               />
             ]}
             footer={[
               <Button key='submit' type="primary" htmlType="submit" onClick={handleAddBug}>确定</Button>,
               <Button key='cancel' htmlType="button" style={{ marginLeft: '10px' }}
                       onClick={() => {
                         setAddTestBugModal(false);
                       }}>取消</Button>]}
             onCancel={() => {
               setAddTestBugModal(false);
             }}
             className={styles.bugForm}
      >
        <ExclamationCircleFilled className={styles.addModalInfo} />为了评分准确,请勿提交重复Bug
        <Form
          form={addBugForm}
          {...modalFormItemLayout}
          layout="horizontal"
          className={styles.stepForm}
        >
          <Form.Item
            label="测试标题"
            name="title"
            rules={[
              {
                required: true,
                message: '请输入测试标题！',
              },
            ]}
          >
            <Input.TextArea autoSize={{ minRows: 1, maxRows: 999 }} />
          </Form.Item>
          <Form.Item
            label="题目描述"
            name="description"
            rules={[
              {
                required: true,
                message: '请输入题目描述！',
              },
            ]}
          >
            <Input.TextArea autoSize={{ minRows: 2, maxRows: 999 }} />
          </Form.Item>
          <Form.Item
            label="三级页面"
            required={true}
          >
            <Row gutter={5} className={styles.pageSelect}>
              <Col span={8}>
                <Form.Item
                  name="page1"
                  rules={[
                    {
                      required: true,
                      message: '请输入一级页面',
                    },
                  ]}
                >
                  <Select onSelect={(val) => {
                    handleSelectPage1(val);
                  }}>
                    {categories.map((item) => {
                      return <Select.Option value={item.item} key={item.item}>{item.item}
                      </Select.Option>;
                    })}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item
                  name="page2"
                  rules={[
                    {
                      required: true,
                      message: '请输入二级页面',
                    },
                  ]}
                >
                    <Select
                      disabled={!page2List.length&& !addBugForm.getFieldValue('page2')}
                          onSelect={(val) => {
                            handleSelectPage2(val);
                          }}>
                    {page2List.map((item) => {
                      return <Select.Option value={item.item} key={item.item}>{item.item}</Select.Option>;
                    })}
                  </Select>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item
                  name="page3"
                  rules={[
                    {
                      required: true,
                      message: '请输入三级页面',
                    },
                  ]}
                  >
                  <Select disabled={!page3List.length&& !addBugForm.getFieldValue('page3')}>
                    {page3List.map((item) => {
                      return <Select.Option value={item.item} key={item.item}>{item.item}</Select.Option>;
                    })}
                  </Select>
                </Form.Item>
              </Col>
            </Row>
          </Form.Item>
          <Form.Item
            label="漏洞分类"
            name="bug_category"
            rules={[
              {
                required: true,
                message: '请选择漏洞分类！',
              },
            ]}
          >
            <Select>
              {bug_categories.map((item) => {
                return <Select.Option value={item} key={item}>{item}</Select.Option>;
              })}
            </Select>
          </Form.Item>
          <Form.Item
            label="严重等级"
            name="severity"
            rules={[
              {
                required: true,
                message: '请选择严重等级！',
              },
            ]}
          >
            <Select>
              {severity.map((item) => {
                return <Select.Option value={item} key={item}>{item}</Select.Option>;
              })}
            </Select>
          </Form.Item>
          <Form.Item
            label="复现程度"
            name="recurrent"
            rules={[
              {
                required: true,
                message: '请选择复现程度！',
              },
            ]}
          >
            <Select>
              {recurrent.map((item) => {
                return <Select.Option value={item} key={item}>{item}</Select.Option>;
              })}
            </Select>
          </Form.Item>
          <Form.Item
            label="上传截图"
            name="testName"
          >
            <Upload
              action='/Bug/api/upload/image'
              data={file => ({ // data里存放的是接口的请求参数
                file,
                caseId: currentTestCaseRef.current.id,
                work_id: '2',
              })}
              listType="picture-card"
              fileList={fileList}
              onPreview={handlePreview}
              onChange={handleChange}
            >
              {uploadButton}
            </Upload>
            <Modal
              visible={previewVisible}
              title={previewTitle}
              footer={null}
              onCancel={() => handleCancel()}
            >
              <img alt="example" style={{ width: '100%' }} src={previewImage} />
            </Modal>
          </Form.Item>
        </Form>
      </Modal>
      <Modal title="修改报告基础信息" visible={showEditReportModal}
             footer={[
               <Button key='submit' type="primary" htmlType="submit"
                       onClick={handleEditReportInfo}>确定</Button>,
               <Button key='cancel' htmlType="button" style={{ marginLeft: '10px' }}
                       onClick={() => {
                         setEditReportModal(false);
                       }}>取消</Button>]}
             onCancel={() => {
               setEditReportModal(false);
             }}>
        <div>
          <Form
            {...modalFormItemLayout}
            form={editReportForm}
            layout="horizontal"
            initialValues={reportCommonInfo}
          >
            <Form.Item label="报告名称" name="name" rules={[{ required: true, message: '请输入报告名称' }]}>
              <Input placeholder="请输入报告名称" />
            </Form.Item>
            <Form.Item label="设备名称" name="device_model" rules={[{ required: true, message: '请输入设备品牌' }]}>
              <Input placeholder="请输入设备名称" />
            </Form.Item>
            <Form.Item label="设备品牌" name="device_brand" rules={[{ required: true, message: '请输入设备品牌' }]}>
              <Input placeholder="请输入设备品牌" />
            </Form.Item>
            <Form.Item label="操作系统" name="device_os" rules={[{ required: true, message: '请输入操作系统' }]}>
              <Select placeholder="请选择操作系统">
                {osType.map((option) => {
                  return <Select.Option value={option} key={option}>{option}</Select.Option>;
                })}
              </Select>
            </Form.Item>
          </Form>
        </div>
      </Modal>
      <Modal title="任务推荐"
             visible={showTaskRecommendModal}
             destroyOnClose width={1000}
             onOk={() => setTaskRecommendModal(false)}
             onCancel={() => {
               setTaskRecommendModal(false);
             }
             }
             className={styles.recommendModal}>
        <div>
          <BugGuideTree />
        </div>
      </Modal>
    </div>
  );
};

export default connect(({ editReport, loading }) => ({
  submitting: loading.effects['editReport/submitStepForm'],
  reportCommonInfo: editReport.reportCommonInfo,
  testCaseList: editReport.testCaseList,
  caseBugList: editReport.caseBugList,
  categories: editReport.categories,
  pathInfo: editReport.pathInfo,
  osType: editReport.osType,
  commonId: editReport.commonId,
}))(Step2);