Specify a model while creating a VSP

Change-Id: I6ed0a3c979e14c62ecd6488dfd70589df40636e9
Issue-ID: SDC-3656
Signed-off-by: André Schmid <andre.schmid@est.tech>

3 files changed, 133 insertions, 19 deletions

diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreation.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreation.js
index 539bc12ca7..cccde7883e 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreation.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreation.js
@@ -1,5 +1,6 @@
 /*!
  * Copyright © 2016-2018 European Support Limited
+ * Modifications Copyright (C) 2021 Nordix Foundation.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -33,7 +34,11 @@ export const mapStateToProps = ({
     archivedSoftwareProductList,
     softwareProductList,
     finalizedSoftwareProductList,
-    softwareProduct: { softwareProductCreation, softwareProductCategories }
+    softwareProduct: {
+        softwareProductCreation,
+        softwareProductCategories,
+        modelList
+    }
 }) => {
     let { genericFieldInfo, vendorList = [] } = softwareProductCreation;
     let isFormValid = ValidationHelper.checkFormValid(genericFieldInfo);
@@ -55,6 +60,7 @@ export const mapStateToProps = ({
         softwareProductCategories,
         finalizedLicenseModelList,
         vendorList,
+        modelList: modelList,
         isFormValid,
         formReady: softwareProductCreation.formReady,
         genericFieldInfo,
@@ -65,12 +71,13 @@ export const mapStateToProps = ({
 
 export const mapActionsToProps = dispatch => {
     return {
-        onDataChanged: (deltaData, formName, customValidations) =>
+        onDataChanged: (deltaData, formName, customValidations) => {
             ValidationHelper.dataChanged(dispatch, {
                 deltaData,
                 formName,
                 customValidations
-            }),
+            });
+        },
         onCancel: () => SoftwareProductCreationActionHelper.resetData(dispatch),
         onSubmit: (softwareProduct, usersList) => {
             SoftwareProductCreationActionHelper.resetData(dispatch);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationReducer.js
index 886037406f..496a251105 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationReducer.js
@@ -1,5 +1,6 @@
 /*!
  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * Modifications Copyright (C) 2021 Nordix Foundation.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -70,6 +71,18 @@ export default (state = {}, action) => {
                         validations: [
                             { type: 'requiredChooseOption', data: true }
                         ]
+                    },
+                    modelOption: {
+                        isValid: true,
+                        errorText: '',
+                        validations: [
+                            { type: 'requiredChooseOption', data: true }
+                        ]
+                    },
+                    selectedModelList: {
+                        isValid: true,
+                        errorText: '',
+                        validations: []
                     }
                 },
                 showModal: true
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationView.jsx
index e4a9893f61..51e883427a 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/creation/SoftwareProductCreationView.jsx
@@ -1,5 +1,6 @@
 /*!
  * Copyright © 2016-2018 European Support Limited
+ * Modifications Copyright (C) 2021 Nordix Foundation.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -14,7 +15,7 @@
  * permissions and limitations under the License.
  */
 import React from 'react';
-import PropTypes from 'prop-types';
+import PropTypes, { string } from 'prop-types';
 import i18n from 'nfvo-utils/i18n/i18n.js';
 import Validator from 'nfvo-utils/Validator.js';
 import Input from 'nfvo-components/input/validation/Input.jsx';
@@ -26,7 +27,11 @@ import { SP_CREATION_FORM_NAME } from './SoftwareProductCreationConstants.js';
 import sortByStringProperty from 'nfvo-utils/sortByStringProperty.js';
 
 import SoftwareProductCategoriesHelper from 'sdc-app/onboarding/softwareProduct/SoftwareProductCategoriesHelper.js';
-import { onboardingMethod as onboardingMethodConst } from '../SoftwareProductConstants.js';
+import {
+    ModelOption,
+    onboardingMethod as onboardingMethodConst
+} from '../SoftwareProductConstants.js';
+import SelectInput from 'nfvo-components/input/SelectInput.jsx';
 
 const SoftwareProductPropType = PropTypes.shape({
     id: PropTypes.string,
@@ -34,7 +39,8 @@ const SoftwareProductPropType = PropTypes.shape({
     description: PropTypes.string,
     category: PropTypes.string,
     subCategory: PropTypes.string,
-    vendorId: PropTypes.string
+    vendorId: PropTypes.string,
+    selectedModelList: PropTypes.arrayOf(string)
 });
 
 class SoftwareProductCreationView extends React.Component {
@@ -44,6 +50,7 @@ class SoftwareProductCreationView extends React.Component {
         softwareProductCategories: PropTypes.array,
         VSPNames: PropTypes.object,
         usersList: PropTypes.array,
+        modelList: PropTypes.array,
         onDataChanged: PropTypes.func.isRequired,
         onSubmit: PropTypes.func.isRequired,
         onCancel: PropTypes.func.isRequired
@@ -56,14 +63,17 @@ class SoftwareProductCreationView extends React.Component {
             onDataChanged,
             onCancel,
             genericFieldInfo,
-            disableVendor
+            disableVendor,
+            modelList
         } = this.props;
         let {
             name,
             description,
             vendorId,
             subCategory,
-            onboardingMethod
+            onboardingMethod,
+            modelOption,
+            selectedModelList
         } = data;
 
         const vendorList = this.getVendorList();
@@ -193,11 +203,24 @@ class SoftwareProductCreationView extends React.Component {
                                 />
                             </GridItem>
                         </GridSection>
-                        <OnboardingProcedure
-                            genericFieldInfo={genericFieldInfo}
-                            onboardingMethod={onboardingMethod}
-                            onDataChanged={onDataChanged}
-                        />
+                        <GridSection>
+                            <GridItem colSpan={2}>
+                                <OnboardingProcedure
+                                    genericFieldInfo={genericFieldInfo}
+                                    onboardingMethod={onboardingMethod}
+                                    onDataChanged={onDataChanged}
+                                />
+                            </GridItem>
+                            <GridItem colSpan={2}>
+                                <ModelSelection
+                                    genericFieldInfo={genericFieldInfo}
+                                    modelOption={modelOption}
+                                    modelList={modelList}
+                                    selectedModelList={selectedModelList}
+                                    onDataChanged={onDataChanged}
+                                />
+                            </GridItem>
+                        </GridSection>
                     </Form>
                 )}
             </div>
@@ -235,14 +258,12 @@ class SoftwareProductCreationView extends React.Component {
     }
 
     submit() {
-        let {
-            data: softwareProduct,
-            finalizedLicenseModelList,
-            usersList
-        } = this.props;
+        let { finalizedLicenseModelList, usersList } = this.props;
+        const softwareProduct = { ...this.props.data };
         softwareProduct.vendorName = finalizedLicenseModelList.find(
             vendor => vendor.id === softwareProduct.vendorId
         ).name;
+        delete softwareProduct.modelOption;
         this.props.onSubmit(softwareProduct, usersList);
     }
 
@@ -284,7 +305,7 @@ const OnboardingProcedure = ({
     genericFieldInfo
 }) => {
     return (
-        <GridSection title={i18n('Onboarding procedure')}>
+        <GridSection title={i18n('Onboarding procedure')} required={true}>
             <GridItem colSpan={4}>
                 <Input
                     label={i18n('Network Package')}
@@ -329,4 +350,77 @@ const OnboardingProcedure = ({
     );
 };
 
+const ModelSelection = ({
+    modelOption,
+    onDataChanged,
+    genericFieldInfo,
+    modelList = [],
+    selectedModelList = []
+}) => {
+    function onSelectChanged(selectedValueList) {
+        let modelList1 = [];
+        if (selectedValueList) {
+            modelList1 = selectedValueList.map(item => item.value);
+        }
+        onDataChanged({ selectedModelList: modelList1 }, SP_CREATION_FORM_NAME);
+    }
+
+    function selectDefaultModel() {
+        return () => {
+            onDataChanged(
+                { modelOption: ModelOption.DEFAULT },
+                SP_CREATION_FORM_NAME
+            );
+            onDataChanged({ selectedModelList: [] }, SP_CREATION_FORM_NAME);
+        };
+    }
+
+    return (
+        <GridSection title={i18n('Model')} required={true}>
+            <GridItem colSpan={4}>
+                <Input
+                    label={i18n('model.sdc.label')}
+                    checked={modelOption === ModelOption.DEFAULT}
+                    errorText={genericFieldInfo.modelOption.errorText}
+                    onChange={selectDefaultModel()}
+                    type="radio"
+                    data-test-id="model-option-default"
+                />
+                <Input
+                    label={i18n('vsp.model.select.label')}
+                    checked={modelOption === ModelOption.SELECTED}
+                    isValid={genericFieldInfo.modelOption.isValid}
+                    errorText={genericFieldInfo.modelOption.errorText}
+                    onChange={() =>
+                        onDataChanged(
+                            { modelOption: ModelOption.SELECTED },
+                            SP_CREATION_FORM_NAME
+                        )
+                    }
+                    type="radio"
+                    data-test-id="model-option-selected"
+                    groupClassName="no-bottom-margin"
+                />
+            </GridItem>
+            <GridItem colSpan={4}>
+                {modelOption === ModelOption.SELECTED && <br />}
+                {modelOption === ModelOption.SELECTED && (
+                    <SelectInput
+                        options={modelList.map(model => ({
+                            label: model.name,
+                            value: model.name
+                        }))}
+                        onMultiSelectChanged={onSelectChanged}
+                        value={selectedModelList}
+                        clearable={true}
+                        placeholder={i18n('vsp.model.select.label')}
+                        multi
+                    />
+                )}
+                {modelOption === ModelOption.SELECTED && <br />}
+            </GridItem>
+        </GridSection>
+    );
+};
+
 export default SoftwareProductCreationView;