List of Input Parameters for VSP: FE

Change-Id: I17697b5646c1a201678dbab11fef28a7483fbf8c
Issue-ID: SDC-2049
Co-authored-by: rahul.ghugikar@vodafone.com, soumyarup.paul@vodafone.com
Signed-off-by: Vodafone <onap@vodafone.com>

9 files changed, 1415 insertions, 0 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/validation/SoftwareProductValidation.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/validation/SoftwareProductValidation.js
new file mode 100644
index 0000000000..a6237e878a
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/validation/SoftwareProductValidation.js
@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) 2019 Vodafone Group
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file 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, software
+ * distributed under the License is 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.
+ */
+import { connect } from 'react-redux';
+import SoftwareProductValidationView from './SoftwareProductValidationView.jsx';
+import SoftwareProductValidationActionHelper from './SoftwareProductValidationActionHelper.js';
+
+export const mapStateToProps = ({ softwareProduct }) => {
+    let { softwareProductValidation } = softwareProduct;
+    return {
+        softwareProductValidation
+    };
+};
+
+export const mapActionsToProps = dispatch => {
+    return {
+        onErrorThrown: msg => {
+            SoftwareProductValidationActionHelper.onErrorThrown(dispatch, msg);
+        },
+
+        onTestSubmit: (softwareProductId, version, status, tests) => {
+            SoftwareProductValidationActionHelper.navigateToSoftwareProductValidationResults(
+                dispatch,
+                {
+                    softwareProductId,
+                    version,
+                    status,
+                    tests
+                }
+            );
+        },
+
+        setVspTestsMap: map => {
+            SoftwareProductValidationActionHelper.setVspTestsMap(dispatch, map);
+        },
+
+        setActiveTab: activeTab => {
+            SoftwareProductValidationActionHelper.setActiveTab(
+                dispatch,
+                activeTab
+            );
+        },
+
+        setComplianceChecked: ({ checked }) => {
+            SoftwareProductValidationActionHelper.setComplianceChecked(
+                dispatch,
+                checked
+            );
+        },
+
+        setCertificationChecked: ({ checked }) => {
+            SoftwareProductValidationActionHelper.setCertificationChecked(
+                dispatch,
+                checked
+            );
+        },
+
+        setTestsRequest: (request, info) => {
+            SoftwareProductValidationActionHelper.setTestsRequest(
+                dispatch,
+                request,
+                info
+            );
+        },
+
+        setGeneralInfo: info => {
+            SoftwareProductValidationActionHelper.setGeneralInfo(
+                dispatch,
+                info
+            );
+        }
+    };
+};
+
+export default connect(mapStateToProps, mapActionsToProps, null, {
+    withRef: true
+})(SoftwareProductValidationView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/validation/SoftwareProductValidationActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/validation/SoftwareProductValidationActionHelper.js
new file mode 100644
index 0000000000..d19416a2aa
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/validation/SoftwareProductValidationActionHelper.js
@@ -0,0 +1,160 @@
+/**
+ * Copyright (c) 2019 Vodafone Group
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file 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, software
+ * distributed under the License is 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.
+ */
+import RestAPIUtil from 'nfvo-utils/RestAPIUtil.js';
+import Configuration from 'sdc-app/config/Configuration.js';
+import getValue from 'nfvo-utils/getValue.js';
+import { actionTypes } from './SoftwareProductValidationConstants.js';
+import ScreensHelper from 'sdc-app/common/helpers/ScreensHelper.js';
+import { enums, screenTypes } from 'sdc-app/onboarding/OnboardingConstants.js';
+import { actionTypes as modalActionTypes } from 'nfvo-components/modal/GlobalModalConstants.js';
+import i18n from 'nfvo-utils/i18n/i18n.js';
+
+function postVSPCertificationChecks(tests) {
+    const restPrefix = Configuration.get('restPrefix');
+    return RestAPIUtil.post(
+        `${restPrefix}/v1.0/externaltesting/executions`,
+        getValue(tests)
+    );
+}
+
+function fetchVspChecks() {
+    const restPrefix = Configuration.get('restPrefix');
+    return RestAPIUtil.get(`${restPrefix}/v1.0/externaltesting/testcasetree`);
+}
+
+const SoftwareProductValidationActionHelper = {
+    navigateToSoftwareProductValidationResults(
+        dispatch,
+        { softwareProductId, version, status, tests }
+    ) {
+        postVSPCertificationChecks(tests)
+            .then(response => {
+                dispatch({
+                    type: actionTypes.POST_VSP_TESTS,
+                    vspTestResults: response
+                });
+                ScreensHelper.loadScreen(dispatch, {
+                    screen: enums.SCREEN.SOFTWARE_PRODUCT_VALIDATION_RESULTS,
+                    screenType: screenTypes.SOFTWARE_PRODUCT,
+                    props: {
+                        softwareProductId,
+                        version,
+                        status
+                    }
+                });
+            })
+            .catch(error => {
+                let errMessage = error.message || error.responseJSON.message;
+                let title = error.responseJSON
+                    ? error.responseJSON.status
+                    : i18n('Error');
+                dispatch({
+                    type: modalActionTypes.GLOBAL_MODAL_ERROR,
+                    data: {
+                        title: title,
+                        msg: errMessage,
+                        cancelButtonText: i18n('OK')
+                    }
+                });
+            });
+    },
+
+    fetchVspChecks(dispatch) {
+        return new Promise((resolve, reject) => {
+            fetchVspChecks()
+                .then(response => {
+                    dispatch({
+                        type: actionTypes.FETCH_VSP_CHECKS,
+                        vspChecks: response
+                    });
+                    resolve(response);
+                })
+                .catch(error => {
+                    reject(error);
+                });
+        });
+    },
+
+    setActiveTab(dispatch, { activeTab }) {
+        dispatch({
+            type: actionTypes.SET_ACTIVE_TAB,
+            activeTab
+        });
+    },
+
+    onErrorThrown(dispatch, msg) {
+        dispatch({
+            type: modalActionTypes.GLOBAL_MODAL_ERROR,
+            data: {
+                title: i18n('Error'),
+                modalComponentName: i18n('Error'),
+                modalComponentProps: {
+                    onClose: () =>
+                        dispatch({
+                            type: modalActionTypes.GLOBAL_MODAL_CLOSE
+                        })
+                },
+                msg: msg,
+                cancelButtonText: i18n('OK')
+            }
+        });
+    },
+
+    setVspTestsMap(dispatch, map) {
+        dispatch({
+            type: actionTypes.SET_VSP_TESTS_MAP,
+            vspTestsMap: map
+        });
+    },
+
+    setComplianceChecked(dispatch, checked) {
+        dispatch({
+            type: actionTypes.SET_COMPLIANCE_CHECKED,
+            complianceChecked: checked
+        });
+    },
+
+    setCertificationChecked(dispatch, checked) {
+        dispatch({
+            type: actionTypes.SET_CERTIFICATION_CHECKED,
+            certificationChecked: checked
+        });
+    },
+
+    setTestsRequest(dispatch, request, info) {
+        dispatch({
+            type: actionTypes.SET_TESTS_REQUEST,
+            testsRequest: request,
+            generalInfo: info
+        });
+    },
+
+    setGeneralInfo(dispatch, info) {
+        dispatch({
+            type: actionTypes.SET_GENERAL_INFO,
+            generalInfo: info
+        });
+    },
+
+    setIsVspValidationDisabled(dispatch, { isValidationDisabled }) {
+        dispatch({
+            type: actionTypes.SET_VSP_VALIDATION_DISABLED,
+            isValidationDisabled: isValidationDisabled
+        });
+    }
+};
+
+export default SoftwareProductValidationActionHelper;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/validation/SoftwareProductValidationConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/validation/SoftwareProductValidationConstants.js
new file mode 100644
index 0000000000..2dc5a1cc43
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/validation/SoftwareProductValidationConstants.js
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2019 Vodafone Group
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file 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, software
+ * distributed under the License is 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.
+ */
+import keyMirror from 'nfvo-utils/KeyMirror.js';
+
+export const tabsMapping = {
+    SETUP: 1,
+    INPUTS: 2
+};
+
+export const actionTypes = keyMirror(
+    {
+        POST_VSP_TESTS: null,
+        FETCH_VSP_CHECKS: null,
+        SET_ACTIVE_TAB: null,
+        SET_VSP_TESTS_MAP: null,
+        SET_COMPLIANCE_CHECKED: null,
+        SET_CERTIFICATION_CHECKED: null,
+        SET_TESTS_REQUEST: null,
+        SET_GENERAL_INFO: null,
+        SET_VSP_VALIDATION_DISABLED: null
+    },
+    'SoftwareProductValidation'
+);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/validation/SoftwareProductValidationReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/validation/SoftwareProductValidationReducer.js
new file mode 100644
index 0000000000..4513e23205
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/validation/SoftwareProductValidationReducer.js
@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2019 Vodafone Group
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file 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, software
+ * distributed under the License is 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.
+ */
+import { actionTypes } from './SoftwareProductValidationConstants.js';
+
+export default (state = {}, action) => {
+    switch (action.type) {
+        case actionTypes.POST_VSP_TESTS:
+            return {
+                ...state,
+                vspTestResults: action.vspTestResults
+            };
+        case actionTypes.FETCH_VSP_CHECKS:
+            return {
+                ...state,
+                vspChecks: action.vspChecks
+            };
+        case actionTypes.SET_ACTIVE_TAB:
+            return { ...state, activeTab: action.activeTab };
+        case actionTypes.SET_VSP_TESTS_MAP:
+            return {
+                ...state,
+                vspTestsMap: action.vspTestsMap
+            };
+        case actionTypes.SET_COMPLIANCE_CHECKED:
+            return {
+                ...state,
+                complianceChecked: action.complianceChecked
+            };
+        case actionTypes.SET_CERTIFICATION_CHECKED:
+            return {
+                ...state,
+                certificationChecked: action.certificationChecked
+            };
+        case actionTypes.SET_TESTS_REQUEST:
+            return {
+                ...state,
+                testsRequest: action.testsRequest,
+                generalInfo: action.generalInfo
+            };
+        case actionTypes.SET_GENERAL_INFO:
+            return {
+                ...state,
+                generalInfo: action.generalInfo
+            };
+        case actionTypes.SET_VSP_VALIDATION_DISABLED:
+            return {
+                ...state,
+                isValidationDisabled: action.isValidationDisabled
+            };
+        default:
+            return state;
+    }
+};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/validation/SoftwareProductValidationView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/validation/SoftwareProductValidationView.jsx
new file mode 100644
index 0000000000..8611c41937
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/validation/SoftwareProductValidationView.jsx
@@ -0,0 +1,387 @@
+/**
+ * Copyright (c) 2019 Vodafone Group
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file 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, software
+ * distributed under the License is 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.
+ */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import i18n from 'nfvo-utils/i18n/i18n.js';
+import Button from 'sdc-ui/lib/react/Button.js';
+import { Tab, Tabs } from 'sdc-ui/lib/react';
+import { tabsMapping } from './SoftwareProductValidationConstants.js';
+import VspValidationInputs from './inputs/VspValidationInputs.js';
+import VspValidationSetup from './setup/VspValidationSetup.js';
+
+class SoftwareProductValidation extends Component {
+    static propTypes = {
+        onErrorThrown: PropTypes.func,
+        softwareProductValidation: PropTypes.object,
+        onTestSubmit: PropTypes.func,
+        setVspTestsMap: PropTypes.func,
+        setActiveTab: PropTypes.func,
+        setComplianceChecked: PropTypes.func,
+        setCertificationChecked: PropTypes.func
+    };
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            complianceCheckList: null,
+            certificationCheckList: null,
+            flatTestsMap: {},
+            generalInfo: {},
+            activeTab: tabsMapping.SETUP,
+            goToValidationInput: false
+        };
+    }
+
+    setMapAndGeneralData(element, testScenario) {
+        let flatTestMap = this.state.flatTestsMap;
+        let generalInputData = this.state.generalInfo;
+        flatTestMap[element.testCaseName] = {
+            title: element.description,
+            parameters: element.inputs,
+            endpoint: element.endpoint,
+            testCaseName: element.testCaseName,
+            testSuiteName: element.testSuiteName,
+            scenario: testScenario
+        };
+        generalInputData[element.testCaseName] = {};
+        element.inputs.forEach(key => {
+            generalInputData[element.testCaseName][key.name] = {
+                isValid: true,
+                errorText: ''
+            };
+        });
+
+        this.setState({
+            flatTestsMap: flatTestMap,
+            generalInfo: generalInputData
+        });
+    }
+
+    buildChildElements(setItem, testScenario) {
+        let parentElement = {};
+        parentElement.value = setItem.name;
+        parentElement.label = setItem.description;
+        parentElement.children = [];
+        if (setItem.children !== undefined) {
+            setItem.children.forEach(element => {
+                let childElement = this.buildChildElements(
+                    element,
+                    testScenario
+                );
+                if (childElement.children.length !== 0) {
+                    parentElement.children.push(childElement);
+                }
+            });
+        }
+        if (setItem.tests !== undefined) {
+            setItem.tests.forEach(element => {
+                parentElement.children.push({
+                    value: element.testCaseName,
+                    label: element.description
+                });
+                this.setMapAndGeneralData(element, testScenario);
+            });
+        }
+        return parentElement;
+    }
+
+    buildCheckboxParentNode(parentNode, data) {
+        parentNode.value = data.description;
+        parentNode.label = 'All';
+        parentNode.children = [];
+        let scenario = data.name;
+        data.children.forEach(element => {
+            let childElement = this.buildChildElements(element, scenario);
+            if (childElement.children.length !== 0) {
+                parentNode.children.push(childElement);
+            }
+        });
+        if (data.tests !== undefined) {
+            data.tests.forEach(element => {
+                parentNode.children.push({
+                    value: element.testCaseName,
+                    label: element.description
+                });
+                this.setMapAndGeneralData(element, scenario);
+            });
+        }
+        return parentNode;
+    }
+
+    prepareDataForCheckboxes(res) {
+        let complianceData = {};
+        let certificationData = {};
+        let complianceList = [];
+        let certificationList = [];
+        let { setVspTestsMap } = this.props;
+        if (Object.keys(res).length !== 0 && res.children) {
+            res.children.forEach(element => {
+                if (element.name === 'certification') {
+                    certificationData = element;
+                } else if (element.name === 'compliance') {
+                    complianceData = element;
+                }
+            });
+
+            let complianceParentNode = {};
+            if (
+                Object.keys(complianceData).length !== 0 &&
+                complianceData.children !== undefined
+            ) {
+                complianceParentNode = this.buildCheckboxParentNode(
+                    complianceParentNode,
+                    complianceData
+                );
+                if (complianceParentNode.children.length !== 0) {
+                    complianceList.push(complianceParentNode);
+                }
+            }
+
+            let certificationParentNode = {};
+            if (
+                Object.keys(certificationData).length !== 0 &&
+                certificationData.children !== undefined
+            ) {
+                certificationParentNode = this.buildCheckboxParentNode(
+                    certificationParentNode,
+                    certificationData
+                );
+                if (certificationParentNode.children.length !== 0) {
+                    certificationList.push(certificationParentNode);
+                }
+            }
+        }
+        this.setState({
+            certificationCheckList: certificationList,
+            complianceCheckList: complianceList
+        });
+        setVspTestsMap(this.state.flatTestsMap);
+    }
+
+    resetState() {
+        this.setState({
+            complianceCheckList: [],
+            certificationCheckList: [],
+            flatTestsMap: {},
+            activeTab: tabsMapping.SETUP,
+            goToValidationInput: false
+        });
+    }
+
+    componentWillMount() {}
+
+    shouldComponentUpdate() {
+        return true;
+    }
+
+    componentDidMount() {
+        let { softwareProductValidation } = this.props;
+        if (softwareProductValidation.vspChecks !== undefined) {
+            this.prepareDataForCheckboxes(softwareProductValidation.vspChecks);
+        }
+    }
+
+    componentWillUnmount() {
+        this.resetState();
+    }
+
+    componentWillReceiveProps(nextProps) {
+        if (
+            nextProps.softwareProductValidation.vspChecks !==
+            this.props.softwareProductValidation.vspChecks
+        ) {
+            let { softwareProductValidation, setActiveTab } = nextProps;
+            if (softwareProductValidation.vspChecks !== undefined) {
+                this.prepareDataForCheckboxes(
+                    softwareProductValidation.vspChecks
+                );
+            }
+            this.setState({ activeTab: tabsMapping.SETUP });
+            setActiveTab({ activeTab: tabsMapping.SETUP });
+        }
+    }
+
+    prepareDataForValidationInputsSection() {
+        let {
+            softwareProductId,
+            version,
+            onTestSubmit,
+            onErrorThrown,
+            setTestsRequest,
+            setGeneralInfo
+        } = this.props;
+        return {
+            softwareProductId,
+            version,
+            onTestSubmit,
+            onErrorThrown,
+            setTestsRequest,
+            setGeneralInfo
+        };
+    }
+
+    prepareDataForCheckboxTreeSection() {
+        let {
+            softwareProductValidation,
+            setComplianceChecked,
+            setCertificationChecked
+        } = this.props;
+        let complianceCheckList = this.state.complianceCheckList;
+        let certificationCheckList = this.state.certificationCheckList;
+        return {
+            softwareProductValidation,
+            setComplianceChecked,
+            setCertificationChecked,
+            complianceCheckList,
+            certificationCheckList
+        };
+    }
+
+    handleTabPress(key) {
+        let { setActiveTab } = this.props;
+        switch (key) {
+            case tabsMapping.SETUP:
+                this.setState({ activeTab: tabsMapping.SETUP });
+                setActiveTab({ activeTab: tabsMapping.SETUP });
+                return;
+            case tabsMapping.INPUTS:
+            default:
+                setActiveTab({ activeTab: tabsMapping.INPUTS });
+                this.setState({
+                    goToValidationInput: true,
+                    activeTab: tabsMapping.INPUTS
+                });
+                return;
+        }
+    }
+
+    formTestsRequest(item, testsRequest) {
+        let { vspTestsMap } = this.props.softwareProductValidation;
+        testsRequest[item] = {
+            parameters: {},
+            scenario: vspTestsMap[item]['scenario'],
+            testCaseName: vspTestsMap[item]['testCaseName'],
+            testSuiteName: vspTestsMap[item]['testSuiteName'],
+            endpoint: vspTestsMap[item]['endpoint']
+        };
+        vspTestsMap[item].parameters.forEach(parameter => {
+            testsRequest[item].parameters[parameter.name] =
+                parameter.defaultValue || '';
+        });
+        return testsRequest;
+    }
+
+    onGoToInputs() {
+        let {
+            setActiveTab,
+            softwareProductValidation,
+            setTestsRequest
+        } = this.props;
+        setActiveTab({ activeTab: tabsMapping.INPUTS });
+        let testsRequest = {};
+        if (softwareProductValidation.complianceChecked) {
+            softwareProductValidation.complianceChecked.forEach(item => {
+                testsRequest = this.formTestsRequest(item, testsRequest);
+            });
+        }
+        if (softwareProductValidation.certificationChecked) {
+            softwareProductValidation.certificationChecked.forEach(item => {
+                testsRequest = this.formTestsRequest(item, testsRequest);
+            });
+        }
+        setTestsRequest(testsRequest, this.state.generalInfo);
+        this.setState({
+            goToValidationInput: true,
+            activeTab: tabsMapping.INPUTS
+        });
+    }
+
+    onGoToSetup() {
+        let { setActiveTab } = this.props;
+        setActiveTab({ activeTab: tabsMapping.SETUP });
+        this.setState({
+            goToValidationInput: false,
+            activeTab: tabsMapping.SETUP
+        });
+    }
+
+    render() {
+        let { softwareProductValidation } = this.props;
+        let isNextDisabled =
+            (softwareProductValidation.certificationChecked === undefined ||
+                softwareProductValidation.certificationChecked.length === 0) &&
+            (softwareProductValidation.complianceChecked === undefined ||
+                softwareProductValidation.complianceChecked.length === 0);
+
+        return (
+            <div className="vsp-validation-view">
+                <div className="validation-view-controllers">
+                    {this.state.activeTab === tabsMapping.SETUP && (
+                        <Button
+                            btnType="secondary"
+                            data-test-id="go-to-vsp-validation-inputs"
+                            disabled={isNextDisabled}
+                            className="change-tabs-btn"
+                            onClick={() => this.onGoToInputs()}>
+                            {i18n('NEXT')}
+                        </Button>
+                    )}
+                    {this.state.activeTab === tabsMapping.INPUTS && (
+                        <Button
+                            btnType="secondary"
+                            data-test-id="go-to-vsp-validation-setup"
+                            className="change-tabs-btn"
+                            onClick={() => this.onGoToSetup()}>
+                            {i18n('BACK')}
+                        </Button>
+                    )}
+                </div>
+                <Tabs
+                    className="validation-tabs"
+                    type="header"
+                    activeTab={this.state.activeTab}
+                    onTabClick={key => this.handleTabPress(key)}>
+                    <Tab
+                        tabId={tabsMapping.SETUP}
+                        title={i18n('Setup')}
+                        disabled={this.state.goToValidationInput}>
+                        <div className="validation-view-tab">
+                            {this.state.complianceCheckList &&
+                                this.state.certificationCheckList && (
+                                    <VspValidationSetup
+                                        {...this.prepareDataForCheckboxTreeSection()}
+                                    />
+                                )}
+                        </div>
+                    </Tab>
+                    <Tab
+                        tabId={tabsMapping.INPUTS}
+                        title={i18n('Inputs')}
+                        disabled={!this.state.goToValidationInput}>
+                        <div className="validation-view-tab">
+                            <VspValidationInputs
+                                {...this.prepareDataForValidationInputsSection()}
+                            />
+                        </div>
+                    </Tab>
+                </Tabs>
+            </div>
+        );
+    }
+}
+
+export default SoftwareProductValidation;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/validation/inputs/VspValidationInputs.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/validation/inputs/VspValidationInputs.js
new file mode 100644
index 0000000000..375cd456b6
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/validation/inputs/VspValidationInputs.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2019 Vodafone Group
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file 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, software
+ * distributed under the License is 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.
+ */
+import { connect } from 'react-redux';
+import VspValidationInputs from './VspValidationInputsView.jsx';
+
+export const mapStateToProps = ({ softwareProduct }) => {
+    let { softwareProductValidation } = softwareProduct;
+    return {
+        softwareProductValidation
+    };
+};
+
+export default connect(mapStateToProps, null, null, {
+    withRef: true
+})(VspValidationInputs);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/validation/inputs/VspValidationInputsView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/validation/inputs/VspValidationInputsView.jsx
new file mode 100644
index 0000000000..c2990a2058
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/validation/inputs/VspValidationInputsView.jsx
@@ -0,0 +1,297 @@
+/**
+ * Copyright (c) 2019 Vodafone Group
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file 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, software
+ * distributed under the License is 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.
+ */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import i18n from 'nfvo-utils/i18n/i18n.js';
+import Button from 'sdc-ui/lib/react/Button.js';
+import GridSection from 'nfvo-components/grid/GridSection.jsx';
+import GridItem from 'nfvo-components/grid/GridItem.jsx';
+import Input from 'nfvo-components/input/validation/Input.jsx';
+import Form from 'nfvo-components/input/validation/Form.jsx';
+
+class VspInputs extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {};
+    }
+
+    shouldComponentUpdate() {
+        return true;
+    }
+
+    changeInputs(e, check, parameterName) {
+        let { testsRequest, generalInfo, setTestsRequest } = this.props;
+        testsRequest[check].parameters[parameterName] = e;
+        generalInfo[check][parameterName] = { isValid: true, errorText: '' };
+        setTestsRequest(testsRequest, generalInfo);
+    }
+
+    renderInputs(check) {
+        let { vspTestsMap, testsRequest, generalInfo } = this.props;
+        return (
+            <div className="div-clear-both">
+                <GridSection
+                    title={i18n('{title} Inputs :', {
+                        title: vspTestsMap[check].title
+                    })}>
+                    {vspTestsMap[check].parameters.map((parameter, index) => {
+                        if (
+                            parameter.type === 'text' &&
+                            !parameter.metadata.hidden
+                        ) {
+                            return (
+                                <GridItem key={index}>
+                                    <Input
+                                        data-test-id={
+                                            check +
+                                            '_' +
+                                            parameter.name +
+                                            '_input'
+                                        }
+                                        isRequired={!parameter.isOptional}
+                                        label={parameter.description}
+                                        isValid={
+                                            generalInfo[check][parameter.name]
+                                                .isValid
+                                        }
+                                        errorText={
+                                            generalInfo[check][parameter.name]
+                                                .errorText
+                                        }
+                                        type={
+                                            parameter.metadata.choices
+                                                ? 'select'
+                                                : 'text'
+                                        }
+                                        value={
+                                            testsRequest[check].parameters[
+                                                parameter.name
+                                            ] || ''
+                                        }
+                                        onChange={e => {
+                                            this.changeInputs(
+                                                e.target ? e.target.value : e,
+                                                check,
+                                                parameter.name
+                                            );
+                                        }}
+                                        disabled={
+                                            parameter.metadata.disabled || false
+                                        }>
+                                        {parameter.metadata.choices && (
+                                            <option key="placeholder" value="">
+                                                {i18n('Select...')}
+                                            </option>
+                                        )}
+                                        {parameter.metadata.choices &&
+                                            parameter.metadata.choices.map(
+                                                selectOption => (
+                                                    <option
+                                                        key={selectOption.key}
+                                                        value={
+                                                            selectOption.key
+                                                        }>
+                                                        {selectOption.label}
+                                                    </option>
+                                                )
+                                            )}
+                                    </Input>
+                                </GridItem>
+                            );
+                        }
+                    })}
+                </GridSection>
+            </div>
+        );
+    }
+
+    render() {
+        let {
+            complianceChecked,
+            vspTestsMap,
+            certificationChecked
+        } = this.props;
+        return (
+            <div>
+                {complianceChecked.map(complianceCheck => {
+                    if (vspTestsMap[complianceCheck].parameters.length === 0) {
+                        return <div />;
+                    } else {
+                        return this.renderInputs(complianceCheck);
+                    }
+                })}
+                {certificationChecked.map(certificateCheck => {
+                    if (vspTestsMap[certificateCheck].parameters.length === 0) {
+                        return <div />;
+                    } else {
+                        return this.renderInputs(certificateCheck);
+                    }
+                })}
+            </div>
+        );
+    }
+}
+
+class VspValidationInputs extends Component {
+    static propTypes = {
+        softwareProductValidation: PropTypes.object
+    };
+
+    constructor(props) {
+        super(props);
+        this.state = {};
+    }
+
+    shouldComponentUpdate() {
+        return true;
+    }
+
+    validateInputs() {
+        let areInputsValid = true;
+        let { softwareProductValidation, setGeneralInfo } = this.props;
+        let generalInfo = softwareProductValidation.generalInfo;
+        Object.keys(softwareProductValidation.testsRequest).forEach(
+            testCaseName => {
+                let requestParameters =
+                    softwareProductValidation.testsRequest[testCaseName]
+                        .parameters;
+                let validationParameters =
+                    softwareProductValidation.vspTestsMap[testCaseName]
+                        .parameters;
+                Object.keys(requestParameters).forEach(parameterName => {
+                    let parameter = validationParameters.find(
+                        o => o.name === parameterName
+                    );
+                    let isParameterValid = true;
+                    let errorText = '';
+                    if (
+                        parameter.type === 'text' &&
+                        parameter.metadata.choices
+                    ) {
+                        if (
+                            !parameter.isOptional &&
+                            !requestParameters[parameterName]
+                        ) {
+                            isParameterValid = false;
+                            errorText = i18n('Field is required');
+                        }
+                    } else if (parameter.type === 'text') {
+                        if (
+                            !parameter.isOptional &&
+                            !requestParameters[parameterName]
+                        ) {
+                            isParameterValid = false;
+                            errorText = i18n('Field is required');
+                        } else if (
+                            (!parameter.isOptional &&
+                                !requestParameters[parameterName]) ||
+                            (parameter.metadata.maxLength &&
+                                requestParameters[parameterName].length >
+                                    parseInt(parameter.metadata.maxLength)) ||
+                            (parameter.metadata.minLength &&
+                                requestParameters[parameterName].length <
+                                    parseInt(parameter.metadata.minLength) &&
+                                requestParameters[parameterName].length > 0)
+                        ) {
+                            isParameterValid = false;
+                            errorText = i18n(
+                                'Value Should Be Minimum of {minLength} characters and a Maximum of {maxLength} characters',
+                                {
+                                    minLength: parameter.metadata.minLength,
+                                    maxLength: parameter.metadata.maxLength
+                                }
+                            );
+                        }
+                    }
+                    generalInfo[testCaseName][
+                        parameterName
+                    ].isValid = isParameterValid;
+                    generalInfo[testCaseName][
+                        parameterName
+                    ].errorText = errorText;
+                    areInputsValid = areInputsValid && isParameterValid;
+                });
+            }
+        );
+        if (!areInputsValid) {
+            setGeneralInfo(generalInfo);
+        }
+        return areInputsValid;
+    }
+
+    performVSPTests() {
+        let tests = [];
+        let {
+            version,
+            onTestSubmit,
+            status,
+            softwareProductId,
+            softwareProductValidation
+        } = this.props;
+
+        Object.keys(softwareProductValidation.testsRequest).forEach(key => {
+            tests.push(softwareProductValidation.testsRequest[key]);
+        });
+        if (this.validateInputs()) {
+            onTestSubmit(softwareProductId, version, status, tests);
+        }
+    }
+
+    prepareDataForVspInputs() {
+        let { setTestsRequest } = this.props;
+        let {
+            complianceChecked,
+            certificationChecked,
+            vspTestsMap,
+            testsRequest,
+            generalInfo
+        } = this.props.softwareProductValidation;
+        return {
+            setTestsRequest,
+            complianceChecked,
+            certificationChecked,
+            vspTestsMap,
+            testsRequest,
+            generalInfo
+        };
+    }
+
+    render() {
+        return (
+            <div className="vsp-validation-view">
+                <Form
+                    hasButtons={false}
+                    formReady={null}
+                    isValid={true}
+                    onSubmit={() => this.performVSPTests()}
+                    isReadOnlyMode={false}>
+                    <VspInputs {...this.prepareDataForVspInputs()} />
+                    <Button
+                        size="default"
+                        data-test-id="proceed-to-validation-results-btn"
+                        disabled={false}
+                        className="proceed-to-validation-monitor-btn"
+                        onClick={() => this.performVSPTests()}>
+                        {i18n('Submit')}
+                    </Button>
+                </Form>
+            </div>
+        );
+    }
+}
+
+export default VspValidationInputs;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/validation/setup/VspValidationSetup.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/validation/setup/VspValidationSetup.js
new file mode 100644
index 0000000000..875639e86a
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/validation/setup/VspValidationSetup.js
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2019 Vodafone Group
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file 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, software
+ * distributed under the License is 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.
+ */
+import { connect } from 'react-redux';
+import VspValidationSetupView from './VspValidationSetupView.jsx';
+
+export const mapStateToProps = ({ softwareProduct }) => {
+    let { softwareProductValidation } = softwareProduct;
+    return {
+        softwareProductValidation
+    };
+};
+
+export const mapActionsToProps = () => {
+    return {};
+};
+
+export default connect(mapStateToProps, mapActionsToProps, null, {
+    withRef: true
+})(VspValidationSetupView);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/validation/setup/VspValidationSetupView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/validation/setup/VspValidationSetupView.jsx
new file mode 100644
index 0000000000..012d50ac93
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/validation/setup/VspValidationSetupView.jsx
@@ -0,0 +1,320 @@
+/**
+ * Copyright (c) 2019 Vodafone Group
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file 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, software
+ * distributed under the License is 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.
+ */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import i18n from 'nfvo-utils/i18n/i18n.js';
+import GridSection from 'nfvo-components/grid/GridSection.jsx';
+import GridItem from 'nfvo-components/grid/GridItem.jsx';
+import CheckboxTree from 'react-checkbox-tree';
+
+const icons = {
+    check: <span className="glyphicon glyphicon-check" />,
+    uncheck: <span className="glyphicon glyphicon-unchecked" />,
+    halfCheck: <span className="glyphicon glyphicon-stop" />,
+    expandClose: <span className="glyphicon glyphicon-plus" />,
+    expandOpen: <span className="glyphicon glyphicon-minus" />,
+    expandAll: <span className="glyphicon glyphicon-collapse-down" />,
+    collapseAll: <span className="glyphicon glyphicon-collapse-up" />,
+    parentClose: <span className="glyphicon glyphicon-folder-close" />,
+    parentOpen: <span className="glyphicon glyphicon-folder-open" />,
+    leaf: <span className="glyphicon glyphicon-bookmark" />
+};
+
+class CertificationQuery extends React.Component {
+    constructor(props) {
+        super(props);
+        let { certificationChecked, certificationNodes } = this.props;
+        this.state = {
+            checked:
+                certificationChecked === undefined ? [] : certificationChecked,
+            expanded: certificationNodes[0] ? [certificationNodes[0].value] : []
+        };
+    }
+
+    expandFirstNode() {
+        let { certificationNodes } = this.props;
+        this.setState({
+            expanded: certificationNodes[0] ? [certificationNodes[0].value] : []
+        });
+    }
+
+    componentDidMount() {
+        this.expandFirstNode();
+    }
+
+    shouldComponentUpdate() {
+        return true;
+    }
+
+    componentWillReceiveProps(nextProps) {
+        if (
+            nextProps.certificationChecked !== this.props.certificationChecked
+        ) {
+            let expand = this.state.expanded;
+            this.setState({
+                checked: nextProps.certificationChecked || [],
+                expanded: expand
+            });
+        }
+    }
+
+    populateOptions(checkedCertificationQuery) {
+        let { flatTestsMap } = this.props;
+        return (
+            <option>
+                {flatTestsMap[checkedCertificationQuery].title +
+                    ' (' +
+                    checkedCertificationQuery +
+                    ')'}
+            </option>
+        );
+    }
+
+    render() {
+        let { certificationNodes, setCertificationChecked } = this.props;
+        return (
+            <div className="validation-setup-checkbox-tree-section">
+                <GridSection title={i18n('Certifications Query')}>
+                    <GridItem colSpan={2}>
+                        <div className="validation-view-title">
+                            {certificationNodes[0]
+                                ? certificationNodes[0].value
+                                : ''}
+                        </div>
+                        <div
+                            className="validation-setup-available-tests-section"
+                            data-test-id={
+                                'vsp-validation-certifications-query-checkbox-tree'
+                            }>
+                            {certificationNodes.length > 0 && (
+                                <CheckboxTree
+                                    nodes={certificationNodes}
+                                    checked={this.state.checked}
+                                    expanded={this.state.expanded}
+                                    onCheck={checked => {
+                                        this.setState(
+                                            { checked },
+                                            setCertificationChecked({
+                                                checked
+                                            })
+                                        );
+                                    }}
+                                    onExpand={expanded =>
+                                        this.setState({ expanded })
+                                    }
+                                    icons={icons}
+                                    className="field-section"
+                                />
+                            )}
+                            {certificationNodes.length === 0 && (
+                                <div>
+                                    {i18n(
+                                        'No Certifications Query are Available'
+                                    )}
+                                </div>
+                            )}
+                        </div>
+                    </GridItem>
+                    <GridItem colSpan={2}>
+                        {certificationNodes.length > 0 && (
+                            <div>
+                                <div className="validation-view-title">
+                                    {i18n('Selected Certifications Query')}
+                                </div>
+                                <div>
+                                    <select
+                                        className="validation-setup-selected-tests"
+                                        multiple>
+                                        {this.state.checked.map(row =>
+                                            this.populateOptions(row)
+                                        )}
+                                    </select>
+                                </div>
+                            </div>
+                        )}
+                    </GridItem>
+                </GridSection>
+            </div>
+        );
+    }
+}
+
+class ComplianceTests extends React.Component {
+    constructor(props) {
+        super(props);
+        let { complianceChecked, complianceNodes } = this.props;
+        this.state = {
+            checked: complianceChecked === undefined ? [] : complianceChecked,
+            expanded: complianceNodes[0] ? [complianceNodes[0].value] : []
+        };
+    }
+
+    shouldComponentUpdate() {
+        return true;
+    }
+
+    expandFirstNode() {
+        let { complianceNodes } = this.props;
+        this.setState({
+            expanded: complianceNodes[0] ? [complianceNodes[0].value] : []
+        });
+    }
+
+    componentDidMount() {
+        this.expandFirstNode();
+    }
+
+    componentWillUnmount() {}
+
+    componentWillReceiveProps(nextProps) {
+        let expand = this.state.expanded;
+
+        if (nextProps.complianceChecked !== this.props.complianceChecked) {
+            this.setState({
+                checked: nextProps.complianceChecked || [],
+                expanded: expand
+            });
+        }
+    }
+
+    populateOptions(checkedComplianceTests) {
+        let { flatTestsMap } = this.props;
+        return (
+            <option>
+                {flatTestsMap[checkedComplianceTests].title +
+                    ' (' +
+                    checkedComplianceTests +
+                    ')'}
+            </option>
+        );
+    }
+    render() {
+        let { complianceNodes, setComplianceChecked } = this.props;
+        return (
+            <div className="validation-setup-checkbox-tree-section">
+                <GridSection title={i18n('Compliance Checks')}>
+                    <GridItem colSpan={2}>
+                        <div className="validation-view-title">
+                            {complianceNodes[0] ? complianceNodes[0].value : ''}
+                        </div>
+                        <div
+                            className="validation-setup-available-tests-section"
+                            data-test-id={
+                                'vsp-validation-compliance-checks-checkbox-tree'
+                            }>
+                            {complianceNodes.length > 0 && (
+                                <CheckboxTree
+                                    nodes={complianceNodes}
+                                    checked={this.state.checked}
+                                    expanded={this.state.expanded}
+                                    onCheck={checked => {
+                                        this.setState(
+                                            { checked },
+                                            setComplianceChecked({
+                                                checked
+                                            })
+                                        );
+                                    }}
+                                    onExpand={expanded =>
+                                        this.setState({ expanded })
+                                    }
+                                    icons={icons}
+                                    className="field-section"
+                                />
+                            )}
+                            {complianceNodes.length === 0 && (
+                                <div>
+                                    {i18n('No Compliance Checks are Available')}
+                                </div>
+                            )}
+                        </div>
+                    </GridItem>
+                    <GridItem colSpan={2}>
+                        {complianceNodes.length > 0 && (
+                            <div>
+                                <div className="validation-view-title">
+                                    {i18n('Selected Compliance Tests')}
+                                </div>
+                                <div>
+                                    <select
+                                        className="validation-setup-selected-tests"
+                                        multiple>
+                                        {this.state.checked.map(row =>
+                                            this.populateOptions(row)
+                                        )}
+                                    </select>
+                                </div>
+                            </div>
+                        )}
+                    </GridItem>
+                </GridSection>
+            </div>
+        );
+    }
+}
+
+class VspValidationSetup extends Component {
+    static propTypes = {
+        softwareProductValidation: PropTypes.object,
+        setComplianceChecked: PropTypes.func,
+        setCertificationChecked: PropTypes.func
+    };
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            complianceCheckList: [],
+            certificationCheckList: []
+        };
+    }
+
+    shouldComponentUpdate() {
+        return true;
+    }
+
+    render() {
+        let {
+            softwareProductValidation,
+            setComplianceChecked,
+            setCertificationChecked,
+            complianceCheckList,
+            certificationCheckList
+        } = this.props;
+        return (
+            <div className="vsp-validation-view">
+                <CertificationQuery
+                    certificationNodes={certificationCheckList}
+                    flatTestsMap={softwareProductValidation.vspTestsMap}
+                    setCertificationChecked={setCertificationChecked}
+                    certificationChecked={
+                        softwareProductValidation.certificationChecked
+                    }
+                />
+                <ComplianceTests
+                    complianceNodes={complianceCheckList}
+                    flatTestsMap={softwareProductValidation.vspTestsMap}
+                    setComplianceChecked={setComplianceChecked}
+                    complianceChecked={
+                        softwareProductValidation.complianceChecked
+                    }
+                />
+            </div>
+        );
+    }
+}
+
+export default VspValidationSetup;