From 5b4fefa97e09b3ffe621d313257b0ee1dc34ec0a Mon Sep 17 00:00:00 2001
From: vijayg10 <33152110+vijayg10@users.noreply.github.com>
Date: Wed, 21 Jul 2021 22:17:33 +0530
Subject: [PATCH] Added download testcase definition button (#108)

* Added download testcase definition button

* Added metadata editor

* Added editable metadata for all test cases and requests in test runner

* Bumped up the version and postponed audits
---
 audit-resolve.json                     |   2 +-
 package-lock.json                      |   2 +-
 package.json                           |   2 +-
 src/views/outbound/MetadataEditor.jsx  | 156 ++++++++++++++++++
 src/views/outbound/OutboundRequest.jsx | 211 ++++++++++++++++---------
 src/views/outbound/TestCaseEditor.jsx  |  85 ++++++----
 src/views/outbound/TestCaseViewer.jsx  |   9 ++
 7 files changed, 353 insertions(+), 114 deletions(-)
 create mode 100644 src/views/outbound/MetadataEditor.jsx

diff --git a/audit-resolve.json b/audit-resolve.json
index d8ad8419..527fb552 100644
--- a/audit-resolve.json
+++ b/audit-resolve.json
@@ -30114,7 +30114,7 @@
     },
     "1763|socket.io-client>socket.io-parser": {
       "decision": "postpone",
-      "madeAt": 1626796239617
+      "madeAt": 1626884473999
     }
   },
   "rules": {},
diff --git a/package-lock.json b/package-lock.json
index 903935d6..7db280d5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "ml-testing-toolkit-ui",
-  "version": "13.1.1",
+  "version": "13.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 848ef4d0..ad0a6ce1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ml-testing-toolkit-ui",
-  "version": "13.1.1",
+  "version": "13.2.0",
   "description": "Mojaloop Testing Toolkit Web User Interface",
   "main": "index.js",
   "repository": {
diff --git a/src/views/outbound/MetadataEditor.jsx b/src/views/outbound/MetadataEditor.jsx
new file mode 100644
index 00000000..53e7d85d
--- /dev/null
+++ b/src/views/outbound/MetadataEditor.jsx
@@ -0,0 +1,156 @@
+/*****
+ License
+ --------------
+ Copyright © 2017 Bill & Melinda Gates Foundation
+ The Mojaloop files are made available by the Bill & Melinda Gates Foundation under the Apache License, Version 2.0 (the "License") and you may not use these files except in compliance with the License. You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0
+ Unless required by applicable law or agreed to in writing, the Mojaloop files are distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ Contributors
+ --------------
+ This is the official list of the Mojaloop project contributors for this file.
+ Names of the original copyright holders (individuals or organizations)
+ should be listed with a '*' in the first column. People who have
+ contributed from an organization can be listed under the organization
+ that actually holds the copyright for their contributions (see the
+ Gates Foundation organization for an example). Those individuals should have
+ their names indented and be marked with a '-'. Email address can be added
+ optionally within square brackets <email>.
+ * Gates Foundation
+
+ * ModusBox
+ * Vijaya Kumar Guthi <vijaya.guthi@modusbox.com> (Original Author)
+ --------------
+ ******/
+
+import React from "react";
+import { Input, Row, Col, Descriptions, message, Popover, Button, Card, Checkbox, Radio, Typography } from 'antd';
+import { EditTwoTone, SaveTwoTone, CloseSquareTwoTone } from '@ant-design/icons';
+import 'antd/dist/antd.css';
+
+const {Text, Title} = Typography
+
+const { TextArea } = Input;
+
+class MetadataItem extends React.Component {
+  state = {
+    editMode: false,
+    itemValue: null
+  };
+
+  componentDidMount = () => {
+    this.setState({itemValue: this.props.value})
+  }
+
+  handleValueChange = () => {
+    this.props.onChange(this.props.name, this.state.itemValue)
+  }
+
+  getMetadataItemType = () => {
+    if(this.state.editMode) {
+      if (typeof this.props.value === 'boolean') {
+        return (
+          <Checkbox
+            checked={this.state.itemValue}
+            onChange={(e) => this.setState({itemValue: e.target.check})}
+          />
+        )
+      } else if (typeof this.props.value === 'number') {
+        return (
+          <Input
+            value={this.state.itemValue}
+            onChange={(e) => this.setState({itemValue: +e.target.value})}
+          />
+        )
+      } else {
+        return (
+          <TextArea
+            rows={5}
+            value={this.state.itemValue}
+            onChange={(e) => this.setState({itemValue: e.target.value})}
+          />
+        )
+      }
+    } else {
+      return (
+        <Text type='secondary'>{this.props.value}</Text>
+      )
+    }
+  }
+
+  render() {
+    return (
+      <>
+      <Row>
+        <Col span={24}>
+          <Text className='mr-2' strong>{this.props.name}</Text>
+          {
+            this.state.editMode
+            ? (
+              <>
+              <SaveTwoTone
+                style={{ fontSize: '20px' }}
+                onClick={() => {
+                  this.setState({editMode: false})
+                  this.handleValueChange()
+                }}
+              />
+              <CloseSquareTwoTone
+                style={{ fontSize: '20px' }}
+                className='mr-1'
+                onClick={() => {
+                  this.setState({editMode: false})
+                }}
+              />
+              </>
+            )
+            : (
+              <EditTwoTone
+                style={{ fontSize: '20px' }}
+                onClick={() => {
+                  this.setState({editMode: true, itemValue: this.props.value})
+                }}
+              />
+            )
+          }
+
+        </Col>
+      </Row>
+      <Row className='mt-2 mb-2'>
+        <Col span={24}>
+          {this.getMetadataItemType()}
+        </Col>
+      </Row>
+      </>
+    )
+  }
+
+}
+
+class MetadataEditor extends React.Component {
+
+  handleItemValueChange = (name, newValue) => {
+    this.props.values[name] = newValue
+    this.props.onChange()
+  }
+
+  getMetadataItems = () => {
+    let inputItems = []
+    let i = 0
+    for (let inputValueName in this.props.values) {
+      inputItems.push(
+        <MetadataItem name={inputValueName} value={this.props.values[inputValueName]} onChange={this.handleItemValueChange} />
+      )
+    }
+    return inputItems
+  }
+
+  render() {
+    return (
+      <>
+        {this.getMetadataItems()}
+      </>
+    )
+  }
+}
+
+export default MetadataEditor;
\ No newline at end of file
diff --git a/src/views/outbound/OutboundRequest.jsx b/src/views/outbound/OutboundRequest.jsx
index 8511d0b7..7e5f0812 100644
--- a/src/views/outbound/OutboundRequest.jsx
+++ b/src/views/outbound/OutboundRequest.jsx
@@ -495,6 +495,32 @@ class OutboundRequest extends React.Component {
 
   }
 
+  handleDownloadDefinition = async (event) => {
+    switch (event.key) {
+      case 'printhtml':
+      case 'html':
+      default:
+        message.loading({ content: 'Generating the report...', key: 'downloadReportProgress', duration: 10 });
+        const { apiBaseUrl } = getConfig()
+        const reportFormat = event.key
+        const response = await axios.post(apiBaseUrl + "/api/reports/testcase_definition/" + reportFormat, this.state.template, { headers: { 'Content-Type': 'application/json' }, responseType: 'blob' })
+        let downloadFilename = "test." + reportFormat
+        if (response.headers['content-disposition']) {
+          const disposition = response.headers['content-disposition']
+          if (disposition && disposition.indexOf('attachment') !== -1) {
+            var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
+            var matches = filenameRegex.exec(disposition);
+            if (matches != null && matches[1]) {
+              downloadFilename = matches[1].replace(/['"]/g, '');
+            }
+          }
+        }
+        FileDownload(response.data, downloadFilename)
+        message.success({ content: 'Report Generated', key: 'downloadReportProgress', duration: 2 });
+    }
+
+  }
+
   handleTestCaseChange = () => {
     this.autoSave = true
     this.forceUpdate()
@@ -572,6 +598,14 @@ class OutboundRequest extends React.Component {
     )
   }
 
+  downloadDefinitionMenu = () => {
+    return (
+      <Menu onClick={(event) => this.handleDownloadDefinition(event)}>
+        <Menu.Item key='html'>HTML format</Menu.Item>
+      </Menu>
+    )
+  }
+
   handleShowSequenceDiagram = async (testCase) => {
     await this.setState({ sequenceDiagramVisible: true })
     this.seqDiagContainer.removeAttribute('data-processed')
@@ -862,7 +896,7 @@ class OutboundRequest extends React.Component {
           bodyStyle={{ height: '85vh', 'overflow-y': 'auto' }}
           destroyOnClose
           forceRender
-          title="Test Case Editor"
+          title={ this.state.showTestCaseIndex != null ? this.state.template.test_cases[this.state.showTestCaseIndex].name : '' }
           width='90%'
           visible={this.state.showTestCaseIndex != null ? true : false}
           footer={null}
@@ -945,83 +979,91 @@ class OutboundRequest extends React.Component {
                       }
                       </Col>
                       <Col span={10}>
-                        <Button
-                          className="float-right"
-                          type="primary"
-                          danger
-                          onClick={this.handleSendStopClick}
-                        >
-                          {this.state.sendingOutboundRequestID ? 'Stop' : 'Run'}
-                        </Button>
-                        <Button
-                          className="float-right mr-2"
-                          type="dashed"
-                          danger
-                          onClick={() => { this.setState({ showIterationRunner: true }) }}
-                        >
-                          Iteration Runner
-                        </Button>
-                        <Button
-                          className="float-right mr-2"
-                          type="dashed"
-                          onClick={() => { this.setState({ showTemplate: true }) }}
-                        >
-                          Show Current Template
-                        </Button>
-                        {
-                          getConfig().isAuthEnabled ?
-                            <>
-                              <Button className="float-right" type="primary" danger onClick={async (e) => {
-                                this.setState({ historyReportsLocal: await this.historyReportsLocal() })
-                                this.setState({ historyReportsVisible: true })
-                              }}>
-                                Reports History
+                        <Row>
+                          <Col span='24'>
+                            <Button
+                              className="float-right"
+                              type="primary"
+                              danger
+                              onClick={this.handleSendStopClick}
+                            >
+                              {this.state.sendingOutboundRequestID ? 'Stop' : 'Run'}
                             </Button>
-                              {
-                                this.state.historyReportsVisible
-                                  ?
-                                  <Modal
-                                    title="Reports History"
-                                    visible={this.state.historyReportsVisible}
-                                    width='70%'
-                                    onOk={() => {
-                                      this.setState({ historyReportsVisible: false })
-                                    }}
-                                    onCancel={() => {
-                                      this.setState({ historyReportsVisible: false })
-                                    }}
-                                  >
-                                    <Row>
-                                      <Col>
-                                        <Table
-                                          columns={this.state.historyReportsColumns}
-                                          dataSource={this.historyReportsDataSource()}
-                                        />
-                                      </Col>
-                                    </Row>
-                                  </Modal>
-                                  :
-                                  null
-                              }
-                            </>
-                            :
-                            null
-                        }
-                        {
-                          this.state.testReport
-                            ?
-                            <Dropdown overlay={this.downloadReportMenu()}>
-                              <Button
-                                className="float-right mr-2"
-                                type="primary"
-                                danger
-                                onClick={e => e.preventDefault()}
-                              >
-                                Download Report
+                            <Button
+                              className="float-right mr-2"
+                              type="dashed"
+                              danger
+                              onClick={() => { this.setState({ showIterationRunner: true }) }}
+                            >
+                              Iteration Runner
                             </Button>
-                            </Dropdown>
-                            : null
-                        }
+                            <Button
+                              className="float-right mr-2"
+                              type="dashed"
+                              onClick={() => { this.setState({ showTemplate: true }) }}
+                            >
+                              Show Current Template
+                            </Button>
+                            {
+                              getConfig().isAuthEnabled ?
+                                <>
+                                  <Button className="float-right" type="primary" danger onClick={async (e) => {
+                                    this.setState({ historyReportsLocal: await this.historyReportsLocal() })
+                                    this.setState({ historyReportsVisible: true })
+                                  }}>
+                                    Reports History
+                                </Button>
+                                  {
+                                    this.state.historyReportsVisible
+                                      ?
+                                      <Modal
+                                        title="Reports History"
+                                        visible={this.state.historyReportsVisible}
+                                        width='70%'
+                                        onOk={() => {
+                                          this.setState({ historyReportsVisible: false })
+                                        }}
+                                        onCancel={() => {
+                                          this.setState({ historyReportsVisible: false })
+                                        }}
+                                      >
+                                        <Row>
+                                          <Col>
+                                            <Table
+                                              columns={this.state.historyReportsColumns}
+                                              dataSource={this.historyReportsDataSource()}
+                                            />
+                                          </Col>
+                                        </Row>
+                                      </Modal>
+                                      :
+                                      null
+                                  }
+                                </>
+                                :
+                                null
+                            }
+                          </Col>
+                        </Row>
+                        <Row className='mt-2'>
+                          <Col span='24'>
+                            {
+                              this.state.testReport
+                                ?
+                                <Dropdown overlay={this.downloadReportMenu()}>
+                                  <Button
+                                    className="float-right"
+                                    type='primary'
+                                    shape='round'
+                                    onClick={e => e.preventDefault()}
+                                  >
+                                    Download Report
+                                </Button>
+                                </Dropdown>
+                                : null
+                            }
+                          </Col>
+                        </Row>
                       </Col>
                     </Row>
                   </Card>
@@ -1043,8 +1085,23 @@ class OutboundRequest extends React.Component {
                   <TabPane tab="Test Cases" key="1">
                     <Row className="mb-2">
                       <Col span={24}>
+                        {
+                          this.state.template.test_cases && this.state.template.test_cases.length > 0
+                            ?
+                            <Dropdown overlay={this.downloadDefinitionMenu()}>
+                              <Button
+                                className="float-right"
+                                type='primary'
+                                shape='round'
+                                onClick={e => e.preventDefault()}
+                              >
+                                Download Definition
+                            </Button>
+                            </Dropdown>
+                            : null
+                        }
                         <Popover
-                          className="float-right"
+                          className="float-right mr-2"
                           content={getSaveTemplateDialogContent(1)}
                           title="Enter filename to save"
                           trigger="click"
diff --git a/src/views/outbound/TestCaseEditor.jsx b/src/views/outbound/TestCaseEditor.jsx
index 70ff6ad2..efb9730e 100644
--- a/src/views/outbound/TestCaseEditor.jsx
+++ b/src/views/outbound/TestCaseEditor.jsx
@@ -49,6 +49,7 @@ import AceEditor from "react-ace";
 import "ace-builds/src-noconflict/mode-javascript";
 import "ace-builds/src-noconflict/theme-terminal";
 import "ace-builds/src-noconflict/theme-dracula";
+import MetadataEditor from "./MetadataEditor";
 
 const { Option } = Select;
 const { Step } = Steps;
@@ -635,6 +636,12 @@ class TestCaseEditor extends React.Component {
             <Tabs defaultActiveKey='1'>
               <TabPane tab={'Request'} key="1">
                 <>
+                  <Card size="small" title={'Meta Data'} className="mb-2">
+                    <MetadataEditor
+                      values={item.meta}
+                      onChange={this.props.onChange}
+                    />
+                  </Card>
                   {
                     item.status && item.status.progressStatus == 'SKIPPED'
                       ? (
@@ -1062,43 +1069,53 @@ class TestCaseEditor extends React.Component {
         <Row>
           <Col span={24}>
             <Affix target={() => this.containerRef}>
-              <Row align="top">
-                <Col span={24}>       
-                  <Button type='primary' className='mt-2 float-right' style={ {height: '40px', backgroundColor: '#718ebc'} } onClick={() => {
-                      this.props.onOpenEnvironmentManager()
-                    }}>
-                    <CaretLeftFilled style={ {fontSize: '18px'} }/> <Text style={{color: 'white', fontWeight: 'bold'}}>Environment Manager</Text>
-                  </Button>            
-                </Col>
-              </Row>
               <Row>
                 <Col span={24}>
                   <Card size="small">
-                    <div className="float-right">
-                      <Button
-                        className='ml-2'
-                        type="primary"
-                        danger
-                        onClick={() => {
-                          this.props.onSend()
-                        }}
-                      >
-                            Send
-                      </Button>
-                    </div>
-                    <Popover
-                      content={addNewRequestDialogContent}
-                      title="Enter a description for the request"
-                      trigger="click"
-                      visible={this.state.addNewRequestDialogVisible}
-                      onVisibleChange={(visible) => this.setState({ addNewRequestDialogVisible: visible })}
-                    >
-                      <Button
-                        type="primary"
-                      >
-                        Add New Request
-                  </Button>
-                    </Popover>
+                    <Row align="top">
+                      <Col span={18}>
+                        <MetadataEditor
+                          values={this.props.testCase.meta}
+                          onChange={this.props.onChange}
+                        />
+                      </Col>
+                      <Col span={6}>
+                        <Button type='primary' className='mt-2 float-right' style={ {height: '40px', backgroundColor: '#718ebc'} } onClick={() => {
+                            this.props.onOpenEnvironmentManager()
+                          }}>
+                          <CaretLeftFilled style={ {fontSize: '18px'} }/> <Text style={{color: 'white', fontWeight: 'bold'}}>Environment Manager</Text>
+                        </Button>            
+                      </Col>
+                    </Row>
+                    <Row align="top">
+                      <Col span={24}>
+                        <div className="float-right">
+                          <Button
+                            className='ml-2'
+                            type="primary"
+                            danger
+                            onClick={() => {
+                              this.props.onSend()
+                            }}
+                          >
+                                Send
+                          </Button>
+                        </div>
+                        <Popover
+                          content={addNewRequestDialogContent}
+                          title="Enter a description for the request"
+                          trigger="click"
+                          visible={this.state.addNewRequestDialogVisible}
+                          onVisibleChange={(visible) => this.setState({ addNewRequestDialogVisible: visible })}
+                        >
+                          <Button
+                            type="primary"
+                          >
+                            Add New Request
+                          </Button>
+                        </Popover>
+                      </Col>
+                    </Row>
                   </Card>          
                 </Col>
               </Row>
diff --git a/src/views/outbound/TestCaseViewer.jsx b/src/views/outbound/TestCaseViewer.jsx
index 649dd401..81aa0dbf 100644
--- a/src/views/outbound/TestCaseViewer.jsx
+++ b/src/views/outbound/TestCaseViewer.jsx
@@ -26,6 +26,7 @@ import _ from 'lodash';
 
 import { Row, Col, Steps, Tag, Dropdown, Menu, message, Input, Collapse, Card, Button , Typography } from 'antd';
 import { MoreOutlined, DoubleRightOutlined } from '@ant-design/icons';
+import MetadataEditor from "./MetadataEditor";
 
 import {SortableContainer, SortableElement} from 'react-sortable-hoc'
 import arrayMove from 'array-move'
@@ -271,6 +272,14 @@ class TestCaseViewer extends React.Component {
                 }
               </Col>
             </Row>
+            <Row>
+              <Col span={24}>
+                <MetadataEditor
+                  values={this.props.testCase.meta}
+                  onChange={this.props.onChange}
+                />
+              </Col>
+            </Row>
             <Row>
             {
               this.state.testCaseRequestsReorderingEnabled