Specify a model while creating a VSP

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

15 files changed, 294 insertions, 34 deletions

diff --git a/openecomp-ui/resources/scss/components/_forms.scss b/openecomp-ui/resources/scss/components/_forms.scss
index 40c1aa16c4..1d806919d2 100644
--- a/openecomp-ui/resources/scss/components/_forms.scss
+++ b/openecomp-ui/resources/scss/components/_forms.scss
@@ -4,6 +4,10 @@
     &:first-child {
         padding-top: 0;
     }
+    span.required {
+        color: $red;
+        margin: 0 4px 0 0;
+    }
 }
 
 .validation-form-content {
diff --git a/openecomp-ui/resources/scss/components/_inputOptions.scss b/openecomp-ui/resources/scss/components/_inputOptions.scss
index eb0fe79ea6..7ac975203c 100644
--- a/openecomp-ui/resources/scss/components/_inputOptions.scss
+++ b/openecomp-ui/resources/scss/components/_inputOptions.scss
@@ -63,6 +63,20 @@
             border-color: $gray;
         }
     }
+    .select-multiple {
+        border: 1px solid $light-gray;
+        border-radius: 2px;
+        min-height: 60px;
+        float: left;
+        transition-property: width;
+        transition-duration: 300ms;
+        padding-top: 0;
+        padding-bottom: 0;
+        width: 100%;
+        &:hover {
+            border-color: $gray;
+        }
+    }
     .input-options-other {
         float: left;
         height: 30px;
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss
index a0620b3639..c1cf3cf778 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss
@@ -1,3 +1,25 @@
+/*!
+ * -
+ *  ============LICENSE_START=======================================================
+ *  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.
+ *  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.
+ *
+ *  SPDX-License-Identifier: Apache-2.0
+ *  ============LICENSE_END=========================================================
+ */
+
 .upload-modal-body-content {
     padding-left: 30px;
     padding-right: 30px;
@@ -132,7 +154,8 @@
                     }
                     border: 1px solid $light-gray;
                     padding: 20px 18px 0 18px;
-                    height: 225px;
+                    min-height: 285px;
+                    height: 100%;
                     display: flex;
                     justify-content: space-between;
                     background-color: $white;
diff --git a/openecomp-ui/src/nfvo-components/grid/GridSection.jsx b/openecomp-ui/src/nfvo-components/grid/GridSection.jsx
index f2e3588d9e..46063b2b98 100644
--- a/openecomp-ui/src/nfvo-components/grid/GridSection.jsx
+++ b/openecomp-ui/src/nfvo-components/grid/GridSection.jsx
@@ -22,7 +22,8 @@ const GridSection = ({
     children,
     className = '',
     titleClassName,
-    hasLastColSet = false
+    hasLastColSet = false,
+    required = false
 }) => {
     return (
         <div
@@ -32,6 +33,7 @@ const GridSection = ({
             {title && (
                 <div className={`section-title ${titleClassName || ''}`}>
                     {title}
+                    {required && <span className={'required'}>*</span>}
                 </div>
             )}
             <div className="grid-items">{children}</div>
diff --git a/openecomp-ui/src/nfvo-utils/i18n/en.json b/openecomp-ui/src/nfvo-utils/i18n/en.json
index 786fe16313..a5518efddd 100644
--- a/openecomp-ui/src/nfvo-utils/i18n/en.json
+++ b/openecomp-ui/src/nfvo-utils/i18n/en.json
@@ -284,6 +284,7 @@
   "Log Backup Frequency (days)": "Log Backup Frequency (days)",
   "Log File Location": "Log File Location",
   "Model": "Model",
+  "model.sdc.label": "SDC AID",
   "License Details": "License Details",
   "Feature Group": "Feature Group",
   "Please assign Feature Groups in VSP General": "Please assign Feature Groups in VSP General",
@@ -386,6 +387,7 @@
   "VendorSoftwareProduct/vendorName": "Vendor",
   "VendorSoftwareProduct/onboardingOrigin": "Onboarding Origin",
   "VendorSoftwareProduct/networkPackageName": "Network Package Name",
+  "vsp.model.select.label": "Other Models",
 
   "EntitlementPool" : "Entitlement Pool",
   "EntitlementPool/name" : "Name",
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js
index 38600a60b8..29e278f928 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js
@@ -1,6 +1,7 @@
 /*!
  * Copyright © 2016-2018 European Support Limited
  * Modifications copyright (c) 2021 Nokia
+ * 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.
@@ -100,11 +101,17 @@ function baseUrl() {
     const restPrefix = Configuration.get('restPrefix');
     return `${restPrefix}/v1.0/vendor-software-products/`;
 }
+
 function softwareProductCategoriesUrl() {
     const restCatalogPrefix = Configuration.get('restCatalogPrefix');
     return `${restCatalogPrefix}/v1/categories/resources/`;
 }
 
+function getModelUrl() {
+    const restCatalogPrefix = Configuration.get('restCatalogPrefix');
+    return `${restCatalogPrefix}/v1/catalog/model/`;
+}
+
 function uploadFile(vspId, formData, version) {
     return RestAPIUtil.post(
         `${baseUrl()}${vspId}/versions/${
@@ -135,6 +142,7 @@ function putSoftwareProduct({ softwareProduct, version }) {
                 : undefined,
             icon: softwareProduct.icon,
             licenseType: softwareProduct.licenseType,
+            selectedModelList: softwareProduct.selectedModelList,
             licensingData: getLicensingData(softwareProduct.licensingData)
         }
     );
@@ -264,6 +272,17 @@ function fetchSoftwareProductCategories(dispatch) {
         .catch(() => handleResponse(null));
 }
 
+function fetchModelList(dispatch) {
+    let handleResponse = response =>
+        dispatch({
+            type: actionTypes.SOFTWARE_PRODUCT_MODELS_LOADED,
+            modelList: response
+        });
+    RestAPIUtil.fetch(getModelUrl())
+        .then(handleResponse)
+        .catch(() => handleResponse(null));
+}
+
 function loadLicensingData(dispatch, { licenseModelId, licensingVersion }) {
     return ItemsHelper.fetchVersion({
         itemId: licenseModelId,
@@ -329,6 +348,7 @@ const SoftwareProductActionHelper = {
 
     loadSoftwareProductAssociatedData(dispatch) {
         fetchSoftwareProductCategories(dispatch);
+        fetchModelList(dispatch);
         LicenseModelActionHelper.fetchFinalizedLicenseModels(dispatch);
     },
 
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js
index e13225010f..22a11eab5e 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductConstants.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductConstants.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.
@@ -23,6 +24,7 @@ export const actionTypes = keyMirror(
         FINALIZED_SOFTWARE_PRODUCT_LIST_LOADED: null,
         SOFTWARE_PRODUCT_LIST_EDIT: null,
         SOFTWARE_PRODUCT_CATEGORIES_LOADED: null,
+        SOFTWARE_PRODUCT_MODELS_LOADED: null,
         SOFTWARE_PRODUCT_QUESTIONNAIRE_UPDATE: null,
         LOAD_LICENSING_VERSIONS_LIST: null,
         TOGGLE_NAVIGATION_ITEM: null,
@@ -43,6 +45,11 @@ export const onboardingMethod = {
     NETWORK_PACKAGE: 'NetworkPackage'
 };
 
+export const ModelOption = {
+    DEFAULT: 'default',
+    SELECTED: 'selected'
+};
+
 export const onboardingOriginTypes = {
     NONE: 'none',
     ZIP: 'zip',
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductReducer.js
index dcec5c683f..06e974c78f 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductReducer.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.
@@ -160,6 +161,12 @@ export default combineReducers({
         }
         return state;
     },
+    modelList: (state = [], action) => {
+        if (action.type === actionTypes.SOFTWARE_PRODUCT_MODELS_LOADED) {
+            return action.modelList;
+        }
+        return state;
+    },
     softwareProductQuestionnaire: createJSONSchemaReducer(
         PRODUCT_QUESTIONNAIRE
     ),
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;
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsView.jsx
index 7df610a3ec..d24916f663 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/details/SoftwareProductDetailsView.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.
@@ -51,6 +52,7 @@ class GeneralSection extends React.Component {
         name: PropTypes.string,
         description: PropTypes.string,
         subCategory: PropTypes.string,
+        selectedModelList: PropTypes.arrayOf(PropTypes.string),
         softwareProductCategories: PropTypes.array,
         finalizedLicenseModelList: PropTypes.array,
         onDataChanged: PropTypes.func.isRequired,
@@ -164,6 +166,22 @@ class GeneralSection extends React.Component {
                                         )
                                 )}
                             </Input>
+                            <div className="form-group">
+                                <label className="control-label">
+                                    {i18n('Model')}
+                                </label>
+                                <div>
+                                    {this.props.selectedModelList.length > 0 ? (
+                                        <ul>
+                                            {this.props.selectedModelList.map(
+                                                value => <li>{value}</li>
+                                            )}
+                                        </ul>
+                                    ) : (
+                                        i18n('model.sdc.label')
+                                    )}
+                                </div>
+                            </div>
                         </GridItem>
                         <GridItem colSpan={2} stretch>
                             <Input
@@ -509,7 +527,8 @@ class SoftwareProductDetails extends Component {
             description,
             vendorId,
             subCategory,
-            vendorName
+            vendorName,
+            selectedModelList = []
         } = currentSoftwareProduct;
         return {
             name,
@@ -523,6 +542,7 @@ class SoftwareProductDetails extends Component {
             onSelectSubCategory: args => this.onSelectSubCategory(args),
             genericFieldInfo,
             vendorName,
+            selectedModelList,
             isVendorArchived,
             onArchivedVendorRemove
         };
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx
index 0f18a44708..5f208345f7 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.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.
@@ -36,7 +37,8 @@ const SoftwareProductPropType = PropTypes.shape({
     licenseType: PropTypes.string,
     status: PropTypes.string,
     licensingData: PropTypes.object,
-    validationData: PropTypes.object
+    validationData: PropTypes.object,
+    selectedModelList: PropTypes.arrayOf(PropTypes.string)
 });
 
 const ComponentPropType = PropTypes.shape({
@@ -259,7 +261,8 @@ const ProductSummary = ({
         name = '',
         description = '',
         vendorName = '',
-        fullCategoryDisplayName = ''
+        fullCategoryDisplayName = '',
+        selectedModelList = []
     } = currentSoftwareProduct;
     return (
         <div className="details-panel">
@@ -286,6 +289,20 @@ const ProductSummary = ({
                                 </div>
                             </div>
                             <div className="detail-col">
+                                <div className="title">{i18n('Model')}</div>
+                                <div className="description">
+                                    {selectedModelList.length > 0 ? (
+                                        <ul>
+                                            {selectedModelList.map(value => (
+                                                <li>{value}</li>
+                                            ))}
+                                        </ul>
+                                    ) : (
+                                        i18n('model.sdc.label')
+                                    )}
+                                </div>
+                            </div>
+                            <div className="detail-col">
                                 <div className="title extra-large">
                                     {i18n('License Agreement')}
                                 </div>
diff --git a/openecomp-ui/test/softwareProduct/creation/SoftwareProductCreation.test.js b/openecomp-ui/test/softwareProduct/creation/SoftwareProductCreation.test.js
index 20ca17d3d0..2758e28f77 100644
--- a/openecomp-ui/test/softwareProduct/creation/SoftwareProductCreation.test.js
+++ b/openecomp-ui/test/softwareProduct/creation/SoftwareProductCreation.test.js
@@ -1,17 +1,23 @@
 /*
- * Copyright © 2016-2018 European Support Limited
+ * -
+ *  ============LICENSE_START=======================================================
+ *  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.
+ *  You may obtain a copy of the License at
  *
- * 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
  *
- *      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.
  *
- * 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.
+ *  SPDX-License-Identifier: Apache-2.0
+ *  ============LICENSE_END=========================================================
  */
 
 import React from 'react';
@@ -71,6 +77,22 @@ describe('Software Product Creation Module Tests', function() {
 		expect(props.VSPNames).toEqual({vsp1: 'vsp1_id', vsp2: 'vsp2_id'});
 	});
 
+	it ('should return model list', () => {
+		const modelList = ["model1", "model2", "model3"];
+		let state = {
+			finalizedSoftwareProductList: [],
+			archivedSoftwareProductList: [],
+			softwareProductList: [],
+			softwareProduct: {
+				modelList: modelList,
+				softwareProductCreation: {}
+			},
+			users: {}
+		};
+		let props = mapStateToProps(state);
+		expect(props.modelList).toEqual(modelList);
+	});
+
 	it('simple jsx test', () => {
 		const store = storeCreator();
 		let dispatch = store.dispatch;
diff --git a/openecomp-ui/test/softwareProduct/details/test.js b/openecomp-ui/test/softwareProduct/details/test.js
index 92390f61ef..0e0c9ecafd 100644
--- a/openecomp-ui/test/softwareProduct/details/test.js
+++ b/openecomp-ui/test/softwareProduct/details/test.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.
@@ -217,6 +218,13 @@ describe('Software Product Details Module Tests', function () {
 		});
 
 		mockRest.addHandler('fetch', ({options, data, baseUrl}) => {
+			expect(baseUrl).toEqual('/sdc1/feProxy/rest/v1/catalog/model/');
+			expect(data).toEqual(undefined);
+			expect(options).toEqual(undefined);
+			return [];
+		});
+
+		mockRest.addHandler('fetch', ({options, data, baseUrl}) => {
 			expect(baseUrl).toEqual('/onboarding-api/v1.0/vendor-license-models/?versionFilter=Certified');
 			expect(data).toEqual(undefined);
 			expect(options).toEqual(undefined);