fix(#2310): change UI to insert normalized lower case request headers to align with TTK

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ml-testing-toolkit-ui",
-  "version": "12.2.4",
+  "version": "12.2.5",
   "description": "Mojaloop Testing Toolkit Web User Interface",
   "main": "index.js",
   "repository": {

src/views/outbound/RequestBuilder.jsx

@@ -79,7 +79,7 @@ class ConfigurableParameter extends React.Component {
       )
     })
   }
-  
+
   // handleParamTypeChange = async (paramType) => {
   //   var factData = null
   //   switch(paramType) {
@@ -280,15 +280,15 @@ class ConfigurableParameter extends React.Component {
         finalValue = '{$request.body.' + this.inputValue + '}'
         break
       case 2:
-        finalValue = '{$request.header.' + this.inputValue + '}'
+        finalValue = '{$request.header.' + this.inputValue.toLowerCase() + '}'
         break
       case 3:
         finalValue = '{$session.negotiatedContentType}'
         break
       default:
         finalValue = this.inputValue
     }
-    
+
 
     this.props.onChange(finalValue)
   }
@@ -347,7 +347,7 @@ class PathBuilder extends React.Component {
   updatePath = () => {
     let operationPath = this.props.request.operationPath
     for (let k in this.state.params) {
-      operationPath = operationPath.replace('{'+k+'}', this.state.params[k])      
+      operationPath = operationPath.replace('{'+k+'}', this.state.params[k])
     }
     this.props.request.path = operationPath
     this.props.onChange()
@@ -497,7 +497,7 @@ class OptionsBuilder extends React.Component {
         )
       }
     }
-  
+
     return (
       <>
       <Row className="mb-2">
@@ -668,7 +668,7 @@ class QueryParamsBuilder extends React.Component {
 
     const addQueryParamDialogContent = (
       <>
-      <Input 
+      <Input
         placeholder="Enter name"
         type="text"
         value={this.state.newQueryParamName}
@@ -751,7 +751,7 @@ class QueryParamsBuilder extends React.Component {
                       {this.getQueryParamItems()}
                       </>
                     )
-                  }                  
+                  }
                 </Col>
               </Row>
             </Card>
@@ -814,7 +814,7 @@ class QueryParamsInputComponent extends React.Component {
     this.props.onDelete(this.props.itemKey)
   }
 
-  
+
   render() {
     return (
       <>
@@ -833,7 +833,7 @@ class QueryParamsInputComponent extends React.Component {
             />
           </Tooltip>
         </Col>
-        
+
         <Col span={14}>
           <Input
             className="form-control-alternative"
@@ -1067,7 +1067,7 @@ class HeaderBodyBuilder extends React.Component {
       <>
       <Row>
         <Col span={24}>
-          <Input 
+          <Input
             placeholder="Enter name"
             type="text"
             value={this.state.newCustomHeaderName}
@@ -1194,7 +1194,7 @@ class HeaderBodyBuilder extends React.Component {
                       </Row>
                       </>
                     )
-                  }                  
+                  }
                 </Col>
               </Row>
             </Card>
@@ -1291,7 +1291,7 @@ class HeaderInputComponent extends React.Component {
     this.props.onDelete(this.props.itemKey)
   }
 
-  
+
   render() {
     return (
       <>
@@ -1310,7 +1310,7 @@ class HeaderInputComponent extends React.Component {
             />
           </Tooltip>
         </Col>
-        
+
         <Col span={14}>
           <Input
             className="form-control-alternative"
@@ -1404,7 +1404,7 @@ class CurlImporter extends React.Component {
       </Row>
       </>
     )
-  
+
     return (
       <Popover
         content={importCurlCommandDialogContent}
@@ -1442,7 +1442,7 @@ class RequestBuilder extends React.Component {
   //       this.setState({overrideChecked: true})
   //     }
   //   }
-    
+
   // }
 
   handleRequestChange = () => {
@@ -1470,7 +1470,7 @@ class RequestBuilder extends React.Component {
                 onChange={this.handleRequestChange}
                 resourceDefinition={this.props.resourceDefinition}
               />
-              <OptionsBuilder 
+              <OptionsBuilder
                 request={this.props.request}
                 inputValues={this.props.inputValues}
                 onChange={this.handleRequestChange}

src/views/rules/EventBuilder.jsx

@@ -68,7 +68,7 @@ class ConfigurableParameter extends React.Component {
       )
     })
   }
-  
+
   handleModeChange = async (mode) => {
     var factData = null
     switch(mode) {
@@ -131,15 +131,15 @@ class ConfigurableParameter extends React.Component {
         finalValue = '{$request.body.' + this.inputValue + '}'
         break
       case 2:
-        finalValue = '{$request.header.' + this.inputValue + '}'
+        finalValue = '{$request.header.' + this.inputValue.toLowerCase() + '}'
         break
       case 3:
         finalValue = '{$session.negotiatedContentType}'
         break
       default:
         finalValue = this.inputValue
     }
-    
+
 
     this.props.onChange(finalValue)
   }
@@ -211,7 +211,7 @@ class FixedCallbackBuilder extends React.Component {
   //   // console.log(this.props.callbackRootParameters)
   //   // console.log(this.props.resourceDefinition.parameters)
   //   // console.log(this.props.callbackDefinition)
-    
+
 
 
   // }
@@ -260,7 +260,7 @@ class FixedCallbackBuilder extends React.Component {
     this.addHeaderItem(event.item.props.children);
   };
 
-  headerItemsMenu = () => {    
+  headerItemsMenu = () => {
     const headerParams = this.state.allParamsFromDefinition.filter(item => {
       return item.in === 'header'
     })
@@ -487,7 +487,7 @@ class HeaderInputComponent extends React.Component {
     this.props.onDelete(this.props.itemKey)
   }
 
-  
+
   render() {
 
     const content = (
@@ -500,7 +500,7 @@ class HeaderInputComponent extends React.Component {
       />
     )
 
-    
+
     return (
       <>
       <Row>
@@ -516,7 +516,7 @@ class HeaderInputComponent extends React.Component {
             />
           </Tooltip>
         </Col>
-        
+
         <Col span={12} className="pl-2">
           <Input
             placeholder="Name"
@@ -562,7 +562,7 @@ class MockCallbackBuilder extends React.Component {
         this.setState({overrideChecked: true})
       }
     }
-    
+
   }
 
   handleOverrideChecked = (event) => {
@@ -576,7 +576,7 @@ class MockCallbackBuilder extends React.Component {
     // const paramsObject = {}
     // paramsObject.header = this.getHeaderObject()
     // paramsObject.body = this.state.body
-  
+
     this.props.onChange(paramsObject)
   }
 
@@ -611,7 +611,7 @@ class MockCallbackBuilder extends React.Component {
 }
 
 class ParamsBuilder extends React.Component {
-  
+
   render() {
     if (this.props.eventType === 'FIXED_CALLBACK' || this.props.eventType === 'FIXED_ERROR_CALLBACK') {
       return (

src/views/rules/EventResponseBuilder.jsx

@@ -69,7 +69,7 @@ class ConfigurableParameter extends React.Component {
       )
     })
   }
-  
+
   handleModeChange = async (mode) => {
     var factData = null
     let allParameters = []
@@ -146,15 +146,15 @@ class ConfigurableParameter extends React.Component {
         finalValue = '{$request.body.' + this.inputValue + '}'
         break
       case 2:
-        finalValue = '{$request.header.' + this.inputValue + '}'
+        finalValue = '{$request.header.' + this.inputValue.toLowerCase() + '}'
         break
       case 3:
         finalValue = '{$session.negotiatedContentType}'
         break
       default:
         finalValue = this.inputValue
     }
-    
+
 
     this.props.onChange(finalValue)
   }
@@ -273,7 +273,7 @@ class FixedCallbackBuilder extends React.Component {
     this.addHeaderItem(event.item.props.children);
   };
 
-  headerItemsMenu = () => {    
+  headerItemsMenu = () => {
     const menuItems = this.allHeadersArray.map((item, key) => {
       return (
         <Menu.Item key={key}>{item.name}</Menu.Item>
@@ -499,7 +499,7 @@ class HeaderInputComponent extends React.Component {
     this.props.onDelete(this.props.itemKey)
   }
 
-  
+
   render() {
 
     const content = (
@@ -512,7 +512,7 @@ class HeaderInputComponent extends React.Component {
       />
     )
 
-    
+
     return (
       <>
       <Row>
@@ -528,7 +528,7 @@ class HeaderInputComponent extends React.Component {
             />
           </Tooltip>
         </Col>
-        
+
         <Col span={12} className="pl-2">
           <Input
             placeholder="Name"
@@ -574,7 +574,7 @@ class MockCallbackBuilder extends React.Component {
         this.setState({overrideChecked: true})
       }
     }
-    
+
   }
 
   handleOverrideChecked = (event) => {
@@ -588,7 +588,7 @@ class MockCallbackBuilder extends React.Component {
     // const paramsObject = {}
     // paramsObject.header = this.getHeaderObject()
     // paramsObject.body = this.state.body
-  
+
     this.props.onChange(paramsObject)
   }
 
@@ -623,7 +623,7 @@ class MockCallbackBuilder extends React.Component {
 }
 
 class ParamsBuilder extends React.Component {
-  
+
   componentDidMount = () => {
     if (this.props.eventParams && !this.props.eventParams.statusCode) {
       this.props.eventParams.statusCode = (new FactDataGenerator()).pickSuccessCodeFromResponsesObject(this.props.responses)
@@ -653,7 +653,7 @@ class ParamsBuilder extends React.Component {
         <Row className="mt-2">
           <Col span={24}>
             <Row>
-              <Col><Text>Response Code</Text></Col>            
+              <Col><Text>Response Code</Text></Col>
               <Col className="pl-2">
                 <Select
                   value={this.props.eventParams.statusCode}