[SDC] rebase 1710 code

Change-Id: I532ed68979fee7840ea8a5395e7e965b155fb9f9
Signed-off-by: Michael Lando <ml636r@att.com>

3 files changed, 415 insertions, 266 deletions

diff --git a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts
index 05b3324bbb..1dc326a7c0 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts
@@ -22,14 +22,16 @@
 import {ModalsHandler, ValidationUtils, EVENTS, CHANGE_COMPONENT_CSAR_VERSION_FLAG, ComponentType, DEFAULT_ICON,
     ResourceType} from "app/utils";
 import {CacheService, EventListenerService, ProgressService} from "app/services";
-import {IAppConfigurtaion, Product, IValidate, IMainCategory, Resource, ISubCategory,Service} from "app/models";
+import {IAppConfigurtaion, IValidate, IMainCategory, Resource, ISubCategory,Service} from "app/models";
 import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model";
 
 export class Validation {
     componentNameValidationPattern:RegExp;
     contactIdValidationPattern:RegExp;
     tagValidationPattern:RegExp;
-    vendorValidationPattern:RegExp;
+    VendorReleaseValidationPattern:RegExp;
+    VendorNameValidationPattern:RegExp;
+    VendorModelNumberValidationPattern:RegExp;
     commentValidationPattern:RegExp;
     projectCodeValidationPattern:RegExp;
 }
@@ -63,6 +65,8 @@ export interface IGeneralScope extends IWorkspaceViewModelScope {
     onEcompGeneratedNamingChange():void;
     openOnBoardingModal():void;
     initCategoreis():void;
+    updateIcon():void;
+    possibleToUpdateIcon():boolean;
 }
 
 export class GeneralViewModel {
@@ -73,7 +77,9 @@ export class GeneralViewModel {
         'ComponentNameValidationPattern',
         'ContactIdValidationPattern',
         'TagValidationPattern',
-        'VendorValidationPattern',
+        'VendorReleaseValidationPattern',
+        'VendorNameValidationPattern',
+        'VendorModelNumberValidationPattern',
         'CommentValidationPattern',
         'ValidationUtils',
         'sdcConfig',
@@ -93,7 +99,9 @@ export class GeneralViewModel {
                 private ComponentNameValidationPattern:RegExp,
                 private ContactIdValidationPattern:RegExp,
                 private TagValidationPattern:RegExp,
-                private VendorValidationPattern:RegExp,
+                private VendorReleaseValidationPattern:RegExp,
+                private VendorNameValidationPattern:RegExp,
+                private VendorModelNumberValidationPattern:RegExp,
                 private CommentValidationPattern:RegExp,
                 private ValidationUtils:ValidationUtils,
                 private sdcConfig:IAppConfigurtaion,
@@ -121,7 +129,9 @@ export class GeneralViewModel {
         this.$scope.validation.componentNameValidationPattern = this.ComponentNameValidationPattern;
         this.$scope.validation.contactIdValidationPattern = this.ContactIdValidationPattern;
         this.$scope.validation.tagValidationPattern = this.TagValidationPattern;
-        this.$scope.validation.vendorValidationPattern = this.VendorValidationPattern;
+        this.$scope.validation.VendorReleaseValidationPattern = this.VendorReleaseValidationPattern;
+        this.$scope.validation.VendorNameValidationPattern = this.VendorNameValidationPattern;
+        this.$scope.validation.VendorModelNumberValidationPattern = this.VendorModelNumberValidationPattern;
         this.$scope.validation.commentValidationPattern = this.CommentValidationPattern;
         this.$scope.validation.projectCodeValidationPattern = this.ProjectCodeValidationPattern;
     };
@@ -140,12 +150,6 @@ export class GeneralViewModel {
         this.$scope.componentCategories = new componentCategories();
         this.$scope.componentCategories.selectedCategory = this.$scope.component.selectedCategory;
 
-        // Workaround to short vendor name to 25 chars
-        // Amdocs send 27 chars, and the validation pattern is 25 chars.
-        if (this.$scope.component.vendorName) {
-            this.$scope.component.vendorName = this.$scope.component.vendorName.substr(0, 25);
-        }
-
         // Init UIModel
         this.$scope.component.tags = _.without(this.$scope.component.tags, this.$scope.component.name);
 
@@ -202,10 +206,7 @@ export class GeneralViewModel {
         };
 
         //TODO remove this after handling contact in UI
-        if (this.$scope.component.isProduct() && this.$scope.isCreateMode()) {
-            (<Product>this.$scope.component).contacts = [];
-            (<Product>this.$scope.component).contacts.push(this.cacheService.get("user").userId);
-        } else if (this.$scope.isCreateMode()) {
+        if (this.$scope.isCreateMode()) {
             this.$scope.component.contactId = this.cacheService.get("user").userId;
         }
 
@@ -273,6 +274,24 @@ export class GeneralViewModel {
             });
         };
 
+        this.$scope.updateIcon = ():void => {
+            this.ModalsHandler.openUpdateIconModal(this.$scope.component).then((isDirty:boolean)=> {
+                if(!this.$scope.isCreateMode()){
+                    this.$state.current.data.unsavedChanges = this.$state.current.data.unsavedChanges || isDirty;
+                }
+            }, ()=> {
+                // ERROR
+            });
+        };
+
+        this.$scope.possibleToUpdateIcon = ():boolean => {
+            if(this.$scope.componentCategories.selectedCategory && (!this.$scope.component.isResource() || this.$scope.component.vendorName)){
+                return true;
+            }else{
+                return false;
+            }
+        }
+
         this.$scope.validateName = (isInit:boolean):void => {
             if (isInit === undefined) {
                 isInit = false;
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html
index 2ad0cbacd6..d3626803e9 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html
+++ b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html
@@ -4,122 +4,121 @@
 
         <div class="w-sdc-form-section-container">
 
-            <!--------------------- IMPORT TOSCA FILE USING BROWSE (ALSO VFC) -------------------->
-            <div class="i-sdc-form-item" ng-if="isShowFileBrowse">
-                <label class="i-sdc-form-label" data-ng-class="{'required':isCreateMode()}">{{browseFileLabel}}</label>
-                <file-upload id="fileUploadElement"
-                             class="i-sdc-form-input"
-                             element-name="fileElement"
-                             element-disabled="{{!isCreateMode()&&!(isEditMode()&&component.resourceType=='VF')}} || {{isViewMode()}}"
-                             form-element="editForm"
-                             file-model="component.importedFile"
-                             on-file-changed-in-directive="uploadFileChangedInGeneralTab"
-                             extensions="{{importedFileExtension}}"
-                             default-text="'Browse to select file'"
-                             data-ng-class="{'error':!(isEditMode()&&component.resourceType=='VF') && (!editForm.fileElement.$valid || !component.importedFile.filename)}"></file-upload>
-            </div>
-
-            <!--------------------- IMPORT TOSCA FILE USING ONBOARDING -------------------->
-            <div class="i-sdc-form-item" ng-if="isShowOnboardingSelectionBrowse">
-                <label class="i-sdc-form-label required">Select VSP</label>
-                <div class="i-sdc-form-file-upload i-sdc-form-input">
-                    <span class="i-sdc-form-file-name" data-tests-id="filename">{{(fileModel && fileModel.filename) || importedToscaBrowseFileText}}</span>
-                    <div class="i-sdc-form-file-upload-x-btn" ng-click="cancel()" data-ng-show="fileModel.filename && fileModel.filename!=='' && elementDisabled!=='true'"></div>
-                    <input type="button" name="fileElement"/>
-                    <div class="file-upload-browse-btn" data-ng-click="openOnBoardingModal()" data-tests-id="browseButton">Browse</div>
-                </div>
-            </div>
-
-            <div class="input-error-file-upload" data-ng-show="component.importedFile && (!editForm.fileElement.$valid || !component.importedFile.filename)">
-                <!-- editForm.fileElement.$error.required <== Can not use this, because the browse is done from outside for the first time -->
-                <span ng-show="!(isEditMode()&&component.resourceType=='VF')&&!component.importedFile.filename" translate="NEW_SERVICE_RESOURCE_ERROR_TOSCA_FILE_REQUIRED"></span><!-- Required -->
-                <span ng-show="editForm.fileElement.$error.maxsize" translate="VALIDATION_ERROR_MAX_FILE_SIZE"></span>
-                <span ng-show="editForm.fileElement.$error.filetype" translate="NEW_SERVICE_RESOURCE_ERROR_VALID_TOSCA_EXTENSIONS" translate-values="{'extensions': '{{importedFileExtension}}' }"></span>
-                <span ng-show="editForm.fileElement.$error.emptyFile" translate="VALIDATION_ERROR_EMPTY_FILE"></span>
-            </div>
-            <!--------------------- IMPORT TOSCA FILE -------------------->
-
             <div class="w-sdc-form-columns-wrapper">
 
                 <div class="w-sdc-form-column">
-
-                <!--------------------- NAME -------------------->
-                <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.componentName)}">
-                    <label class="i-sdc-form-label required">Name</label>
-                    <input class="i-sdc-form-input"
-                           data-ng-class="{'view-mode': isViewMode()}"
-                           name="componentName"
-                           data-ng-init="isCreateMode() && validateName(true)"
-                           data-ng-maxlength="{{component.isProduct()?'25':'50'}}"
-                           maxlength="{{component.isProduct()?'25':'50'}}"
-                           data-ng-minlength="{{component.isProduct()?'4':'0'}}"
-                           minlength="{{component.isProduct()?'4':'0'}}"
-                           data-ng-model="component.name"
-                           type="text"
-                           data-required
-                           data-ng-model-options="{ debounce: 500 }"
-                           data-ng-pattern="validation.componentNameValidationPattern"
-                           data-ng-disabled="component.isAlreadyCertified()"
-                           data-tests-id="name"
-                           autofocus
-                           ng-readonly="isViewMode()"
-                        />
-
-                    <div class="input-error" data-ng-show="validateField(editForm.componentName)">
-                        <span ng-show="editForm.componentName.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_NAME_REQUIRED"></span>
-                        <span ng-show="editForm.componentName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span>
-                        <span ng-show="editForm.componentName.$error.minlength" translate="VALIDATION_ERROR_MIN_LENGTH" translate-values="{'min': '4' }"></span>
-                        <span ng-show="editForm.componentName.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_NAME_EXISTS"></span>
-                        <span ng-show="editForm.componentName.$error.pattern" translate="VALIDATION_ERROR_INVALID_NAME"></span>
+                    <div class="upper-general-fields">
+                        <div class="selected-icon-container" data-ng-class="{'show-only-on-over':'defaulticon'!=component.icon && !isViewMode()}">
+                            <div class="selected-icon-inner-container">
+                                <div class="sprite-new update-component-icon" data-ng-click="updateIcon()" data-ng-if="!isViewMode() && possibleToUpdateIcon()"></div>
+                                <div class="i-sdc-form-item-suggested-icon large selected-icon {{component.iconSprite}} {{component.icon}}"
+                                     data-ng-class="{ 'disable': isViewMode() || !possibleToUpdateIcon() }"
+                                     ng-model="component.icon"
+                                     tooltips tooltip-content='{{component.icon | translate}}'
+                                >
+                                </div>
+                            </div>
+                        </div>
+                        <div class="name-and-category-fields">
+                            <!--------------------- NAME -------------------->
+                            <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.componentName)}">
+                                <label class="i-sdc-form-label required">Name</label>
+                                <input class="i-sdc-form-input"
+                                       data-ng-class="{'view-mode': isViewMode()}"
+                                       name="componentName"
+                                       data-ng-init="isCreateMode() && validateName(true)"
+	                               data-ng-maxlength="50"
+                                       maxlength="50"
+                                       data-ng-model="component.name"
+                                       type="text"
+                                       data-required
+                                       data-ng-model-options="{ debounce: 500 }"
+                                       data-ng-pattern="validation.componentNameValidationPattern"
+                                       data-ng-disabled="component.isAlreadyCertified()"
+                                       data-tests-id="name"
+                                       autofocus
+                                       ng-readonly="isViewMode()"
+                                />
+
+                                <div class="input-error" data-ng-show="validateField(editForm.componentName)">
+                                    <span ng-show="editForm.componentName.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_NAME_REQUIRED"></span>
+                                    <span ng-show="editForm.componentName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span>
+                                    <span ng-show="editForm.componentName.$error.minlength" translate="VALIDATION_ERROR_MIN_LENGTH" translate-values="{'min': '4' }"></span>
+                                    <span ng-show="editForm.componentName.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_NAME_EXISTS"></span>
+                                    <span ng-show="editForm.componentName.$error.pattern" translate="VALIDATION_ERROR_INVALID_NAME"></span>
+                                </div>
+                            </div>
+                            <!--------------------- NAME -------------------->
+
+
+
+                            <!--------------------- CATEGORIES -------------------->
+                            <div class="i-sdc-form-item"
+                     data-ng-class="{'error': validateField(editForm.category)}">
+                                <loader data-display="!categories && !initCategoreis()" relative="true"></loader>
+                                <label class="i-sdc-form-label required">Category</label>
+                                <select class="i-sdc-form-select"
+                                        data-required
+                                        name="category"
+                                        data-ng-class="{'view-mode': isViewMode()}"
+                                        data-ng-change="onCategoryChange()"
+                                        data-ng-disabled="component.isAlreadyCertified() || (component.isCsarComponent() && component.selectedCategory && component.selectedCategory!=='')"
+                                        data-ng-model="componentCategories.selectedCategory"
+                                        data-tests-id="selectGeneralCategory"
+                                >
+                                    <option value="">Select category</option>
+                                    <optgroup ng-if="component.isResource()" data-ng-repeat="mainCategory in categories | orderBy:['name']" label="{{mainCategory.name}}" data-tests-id="{{mainCategory.name}}">
+                                        <option data-ng-repeat="subCategory in mainCategory.subcategories track by $index"
+                                                data-ng-selected="componentCategories.selectedCategory === calculateUnique(mainCategory.name,subCategory.name)"
+                                                data-tests-id="{{subCategory.name}}"
+                                                value="{{calculateUnique(mainCategory.name, subCategory.name)}}">{{subCategory.name}}
+
+                                        </option>
+                                    </optgroup>
+                                    <option ng-if="component.isService()" data-ng-repeat="mainCategory in categories | orderBy:['name']"
+                                            data-ng-selected="component.selectedCategory===mainCategory.name"
+                                            value="{{mainCategory.name}}"
+                                            data-tests-id="{{mainCategory.name}}">{{mainCategory.name}}</option>
+                                </select>
+
+                                <div class="input-error" data-ng-show="validateField(editForm.category)">
+                                    <span ng-show="editForm.category.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_CATEGORY_REQUIRED"></span>
+                                </div>
+                            </div>
+                            <!--------------------- CATEGORIES -------------------->
+                        </div>
                     </div>
-                </div>
-                <!--------------------- NAME -------------------->
+                <!--------------------- RESOURCE TAGS -------------------->
+                <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.tags)}">
+                    <label class="i-sdc-form-label">Tags</label>
 
-                <!--------------------- FULL NAME -------------------->
-                <div ng-if="component.isProduct()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.fullName)}">
-                    <label class="i-sdc-form-label required">Full Name</label>
-                    <input class="i-sdc-form-input"
-                           name="fullName"
-                           data-ng-class="{'view-mode': isViewMode()}"
-                           data-ng-change="validateName()"
-                           data-ng-maxlength="100"
-                           maxlength="100"
-                           data-ng-minlength="4"
-                           minlength="4"
-                           data-ng-model="component.fullName"
-                           type="text"
-                           data-required
-                           data-ng-model-options="{ debounce: 500 }"
-                           data-ng-pattern="validation.commentValidationPattern"
-                           data-tests-id="fullName"
-                           autofocus
-                           ng-readonly="isViewMode()"
-                        />
+                    <sdc-tags form-element="editForm" element-name="tags" max-tags="20" class="i-sdc-form-item-tags"
+                              sdc-disabled="isViewMode()"
+                              tags="component.tags"
+                              pattern="validation.tagValidationPattern"
+                              special-tag="component.name"></sdc-tags>
 
-                    <div class="input-error" data-ng-show="validateField(editForm.fullName)">
-                        <span ng-show="editForm.fullName.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_RESOURCE_NAME_REQUIRED"></span>
-                        <span ng-show="editForm.fullName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span>
-                        <span ng-show="editForm.fullName.$error.minlength" translate="VALIDATION_ERROR_MIN_LENGTH" translate-values="{'min': '4' }"></span>
-                        <span ng-show="editForm.fullName.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_NAME_EXISTS"></span>
-                        <span ng-show="editForm.fullName.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+                    <div class="input-error" data-ng-show="validateField(editForm.tags)">
+                        <span ng-show="editForm.tags.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+                        <span ng-show="editForm.tags.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_TAG_NAME_EXIST"></span>
                     </div>
                 </div>
-                <!--------------------- NAME -------------------->
+                <!--------------------- RESOURCE TAGS -------------------->
 
                 <!--------------------- DESCRIPTION -------------------->
-                <div class="i-sdc-form-item"
+                <div class="i-sdc-form-item description-field"
                      data-ng-class="{'error': validateField(editForm.description)}">
                     <label class="i-sdc-form-label required">Description</label>
-                    <textarea class="description"
-                              name="description"
-                              data-ng-class="{'view-mode': isViewMode()}"
-                              data-ng-maxlength="1024"
-                              data-required
-                              data-ng-model="component.description"
-                              data-ng-model-options="{ debounce: 500 }"
-                              data-ng-pattern="validation.commentValidationPattern"
-                              maxlength="1024"
-                              data-tests-id="description"></textarea>
+                <textarea class="description"
+                          name="description"
+                          data-ng-class="{'view-mode': isViewMode()}"
+                          data-ng-maxlength="1024"
+                          data-required
+                          data-ng-model="component.description"
+                          data-ng-model-options="{ debounce: 500 }"
+                          data-ng-pattern="validation.commentValidationPattern"
+                          maxlength="1024"
+                          data-tests-id="description"></textarea>
                     <!-- placeholder="Description here..." -->
 
                     <div class="input-error" data-ng-show="validateField(editForm.description)">
@@ -130,110 +129,85 @@
                 </div>
                 <!--------------------- DESCRIPTION -------------------->
 
-                <!--------------------- CATEGORIES -------------------->
-                <div class="i-sdc-form-item"
-                     data-ng-class="{'error': validateField(editForm.category)}"
-                     data-ng-if="!component.isProduct()">
-                    <loader data-display="!categories && !initCategoreis()" relative="true"></loader>
-                    <label class="i-sdc-form-label required">Category</label>
-                    <select class="i-sdc-form-select"
-                            data-required
-                            name="category"
-                            data-ng-class="{'view-mode': isViewMode()}"
-                            data-ng-change="onCategoryChange()"
-                            data-ng-disabled="component.isAlreadyCertified() || (component.isCsarComponent() && component.selectedCategory && component.selectedCategory!=='')"
-                            data-ng-model="componentCategories.selectedCategory"
-                            data-tests-id="selectGeneralCategory"
-                        >
-                        <option value="">Select category</option>
-                        <optgroup ng-if="component.isResource()" data-ng-repeat="mainCategory in categories | orderBy:['name']" label="{{mainCategory.name}}" data-tests-id="{{mainCategory.name}}">
-                            <option data-ng-repeat="subCategory in mainCategory.subcategories track by $index"
-                                    data-ng-selected="componentCategories.selectedCategory === calculateUnique(mainCategory.name,subCategory.name)"
-                                    data-tests-id="{{subCategory.name}}"
-                                    value="{{calculateUnique(mainCategory.name, subCategory.name)}}">{{subCategory.name}}
-
-                            </option>
-                        </optgroup>
-                        <option ng-if="component.isService()" data-ng-repeat="mainCategory in categories | orderBy:['name']"
-                                data-ng-selected="component.selectedCategory===mainCategory.name"
-                                value="{{mainCategory.name}}"
-                                data-tests-id="{{mainCategory.name}}">{{mainCategory.name}}</option>
-                    </select>
-
-                    <div class="input-error" data-ng-show="validateField(editForm.category)">
-                        <span ng-show="editForm.category.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_CATEGORY_REQUIRED"></span>
-                    </div>
-                </div>
-                <!--------------------- CATEGORIES -------------------->
-
-                <!--------------------- PROJECT CODE -------------------->
-                <div class="i-sdc-form-item"  data-ng-if="!component.isResource()"
-                     data-ng-class="{'error': validateField(editForm.projectCode)}">
-                    <label class="i-sdc-form-label required" translate="GENERAL_LABEL_PROJECT_CODE"></label>
-                    <input class="i-sdc-form-input" type="text"
-                           data-ng-model="component.projectCode"
-                           data-ng-class="{'view-mode': isViewMode()}"
-                           data-ng-model-options="{ debounce: 500 }"
-                           maxlength="50"
-                           data-required
-                           name="projectCode"
-                           data-ng-pattern="validation.projectCodeValidationPattern"
-                           data-tests-id="projectCode"
-                        />
+            </div><!-- Close w-sdc-form-column -->
 
-                    <div class="input-error" data-ng-show="validateField(editForm.projectCode)">
-                        <span ng-show="editForm.projectCode.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_PROJECT_CODE_REQUIRED"></span>
-                        <span ng-show="editForm.projectCode.$error.pattern" translate="NEW_SERVICE_RESOURCE_ERROR_PROJECT_CODE_NOT_VALID"></span>
+                <div class="w-sdc-form-column">
+                    <!--------------------- IMPORT TOSCA FILE USING BROWSE (ALSO VFC) -------------------->
+                    <div class="i-sdc-form-item" ng-if="isShowFileBrowse">
+                        <label class="i-sdc-form-label" data-ng-class="{'required':isCreateMode()}">{{browseFileLabel}}</label>
+                        <file-upload id="fileUploadElement"
+                                     class="i-sdc-form-input"
+                                     element-name="fileElement"
+                                     element-disabled="{{!isCreateMode()&&!(isEditMode()&&component.resourceType=='VF')}} || {{isViewMode()}}"
+                                     form-element="editForm"
+                                     file-model="component.importedFile"
+                                     on-file-changed-in-directive="uploadFileChangedInGeneralTab"
+                                     extensions="{{importedFileExtension}}"
+                                     default-text="'Browse to select file'"
+                                     data-ng-class="{'error':!(isEditMode()&&component.resourceType=='VF') && (!editForm.fileElement.$valid || !component.importedFile.filename)}"></file-upload>
                     </div>
-                </div>
 
+                    <!--------------------- IMPORT TOSCA FILE USING ONBOARDING -------------------->
+                    <div class="i-sdc-form-item" ng-if="isShowOnboardingSelectionBrowse">
+                        <label class="i-sdc-form-label required">Select VSP</label>
+                        <div class="i-sdc-form-file-upload i-sdc-form-input">
+                            <span class="i-sdc-form-file-name" data-tests-id="filename">{{(fileModel && fileModel.filename) || importedToscaBrowseFileText}}</span>
+                            <div class="i-sdc-form-file-upload-x-btn" ng-click="cancel()" data-ng-show="fileModel.filename && fileModel.filename!=='' && elementDisabled!=='true'"></div>
+                            <input type="button" name="fileElement"/>
+                            <div class="file-upload-browse-btn" data-ng-click="openOnBoardingModal()" data-tests-id="browseButton">Browse</div>
+                        </div>
+                    </div>
 
-                    <!--------------------- ECOMPGENERATEDNAMING -------------------->
+                    <div class="input-error-file-upload" data-ng-show="component.importedFile && (!editForm.fileElement.$valid || !component.importedFile.filename)">
+                        <!-- editForm.fileElement.$error.required <== Can not use this, because the browse is done from outside for the first time -->
+                        <span ng-show="!(isEditMode()&&component.resourceType=='VF')&&!component.importedFile.filename" translate="NEW_SERVICE_RESOURCE_ERROR_TOSCA_FILE_REQUIRED"></span><!-- Required -->
+                        <span ng-show="editForm.fileElement.$error.maxsize" translate="VALIDATION_ERROR_MAX_FILE_SIZE"></span>
+                        <span ng-show="editForm.fileElement.$error.filetype" translate="NEW_SERVICE_RESOURCE_ERROR_VALID_TOSCA_EXTENSIONS" translate-values="{'extensions': '{{importedFileExtension}}' }"></span>
+                        <span ng-show="editForm.fileElement.$error.emptyFile" translate="VALIDATION_ERROR_EMPTY_FILE"></span>
+                    </div>
+                    <!--------------------- IMPORT TOSCA FILE -------------------->
 
-                    <div class="i-sdc-form-item"
-                         data-ng-class="{'error': validateField(editForm.ecompGeneratedNaming)}"
-                         data-ng-if="component.isService()">
-                        <label class="i-sdc-form-label">Ecomp Generated Naming</label>
-                        <select class="i-sdc-form-select"
-                                data-required
-                                name="ecompGeneratedNaming"
-                                data-ng-change="onEcompGeneratedNamingChange()"
-                                data-ng-class="{'view-mode': isViewMode()}"
-                                data-ng-model="component.ecompGeneratedNaming"
-                                data-tests-id="ecompGeneratedNaming">
-                            <option ng-value="true">true</option>
-                            <option ng-value="false">false</option>
-                        </select>
-                        <div class="input-error" data-ng-show="validateField(editForm.ecompGeneratedNaming)">
+                    <!--------------------- USER ID -------------------->
+                    <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.contactId)}">
+                    <label class="i-sdc-form-label required" translate="GENERAL_LABEL_CONTACT_ID"></label>
+                    <input class="i-sdc-form-input" type="text"
+                               data-ng-model="component.contactId"
+                               data-ng-class="{'view-mode': isViewMode()}"
+                               data-ng-required="true"
+                               name="contactId"
+                               data-ng-pattern="validation.contactIdValidationPattern"
+                               data-ng-model-options="{ debounce: 500 }"
+                               data-tests-id="contactId"
+                               maxlength="50"
+                        />
 
+                        <div class="input-error" data-ng-show="validateField(editForm.contactId)">
+                            <span ng-show="editForm.contactId.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_CONTACT_REQUIRED"></span>
+                            <span ng-show="editForm.contactId.$error.pattern" translate="NEW_SERVICE_RESOURCE_ERROR_CONTACT_NOT_VALID"></span>
                         </div>
                     </div>
-                    <!--------------------- CATEGORIES -------------------->
-
-                    <!--------------------- NAMING POLICY  -------------------->
-                    <div ng-if="component.isService()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.namingPolicy)}">
-                        <label class="i-sdc-form-label">Naming policy</label>
-                        <input class="i-sdc-form-input"
-                               name="fullName"
-                               data-ng-class="{'view-mode': isViewMode() || !component.ecompGeneratedNaming}"
-                               data-ng-maxlength="100"
-                               maxlength="100"
-                               data-ng-model="component.namingPolicy"
-                               type="text"
+                    <!--------------------- USER ID -------------------->
+
+                    <!--------------------- PROJECT CODE -------------------->
+                    <div class="i-sdc-form-item"  data-ng-if="!component.isResource()"
+                         data-ng-class="{'error': validateField(editForm.projectCode)}">
+                        <label class="i-sdc-form-label required" translate="GENERAL_LABEL_PROJECT_CODE"></label>
+                        <input class="i-sdc-form-input" type="text"
+                               data-ng-model="component.projectCode"
+                               data-ng-class="{'view-mode': isViewMode()}"
                                data-ng-model-options="{ debounce: 500 }"
-                               data-ng-pattern="validation.commentValidationPattern"
-                               data-tests-id="namingPolicy"
-                               autofocus
-                               ng-readonly="isViewMode() || !component.ecompGeneratedNaming"
+                               maxlength="50"
+                               data-required
+                               name="projectCode"
+                               data-ng-pattern="validation.projectCodeValidationPattern"
+                               data-tests-id="projectCode"
                         />
 
-                        <div class="input-error" data-ng-show="validateField(editForm.namingPolicy)">
-                            <span ng-show="editForm.namingPolicy.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '100' }"></span>
-                            <span ng-show="editForm.namingPolicy.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+                        <div class="input-error" data-ng-show="validateField(editForm.projectCode)">
+                            <span ng-show="editForm.projectCode.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_PROJECT_CODE_REQUIRED"></span>
+                            <span ng-show="editForm.projectCode.$error.pattern" translate="NEW_SERVICE_RESOURCE_ERROR_PROJECT_CODE_NOT_VALID"></span>
                         </div>
                     </div>
-                    <!--------------------- NAMING POLICY  -------------------->
-
 
                 <!--------------------- VENDOR NAME -------------------->
                 <div ng-if="component.isResource()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.vendorName)}">
@@ -242,20 +216,20 @@
                            data-ng-class="{'view-mode': isViewMode()}"
                            data-ng-model="component.vendorName"
                            data-ng-model-options="{ debounce: 500 }"
-                           data-ng-maxlength="25"
+                           data-ng-maxlength="60"
                            data-required
                            ng-click="oldValue = component.vendorName"
                            name="vendorName"
                            data-ng-change="onVendorNameChange(oldValue)"
-                           data-ng-pattern="validation.vendorValidationPattern"
-                           maxlength="25"
+                           data-ng-pattern="validation.VendorNameValidationPattern"
+                           maxlength="60"
                            data-ng-disabled="component.isAlreadyCertified() || (component.isCsarComponent() && component.vendorName && component.vendorName!=='')"
                            data-tests-id="vendorName"
-                        />
+                    />
 
                     <div class="input-error" data-ng-show="validateField(editForm.vendorName)">
                         <span ng-show="editForm.vendorName.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_VENDOR_NAME_REQUIRED"></span>
-                        <span ng-show="editForm.vendorName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '25' }"></span>
+                        <span ng-show="editForm.vendorName.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '60' }"></span>
                         <span ng-show="editForm.vendorName.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
                     </div>
 
@@ -275,80 +249,160 @@
                            data-ng-maxlength="25"
                            data-required
                            name="vendorRelease"
-                           data-ng-pattern="validation.vendorValidationPattern"
+                           data-ng-pattern="validation.VendorReleaseValidationPattern"
                            maxlength="25"
                            data-ng-disabled="component.isCsarComponent() && component.vendorRelease && component.vendorRelease!==''"
                            data-tests-id="vendorRelease"
-                        />
+                    />
 
                     <div class="input-error" data-ng-show="validateField(editForm.vendorRelease)">
                         <span ng-show="editForm.vendorRelease.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_VENDOR_RELEASE_REQUIRED"></span>
-                        <span ng-show="editForm.vendorRelease.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '128' }"></span>
+                        <span ng-show="editForm.vendorRelease.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '25' }"></span>
                         <span ng-show="editForm.vendorRelease.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
                     </div>
                 </div>
                 <!--------------------- VENDOR RELEASE -------------------->
 
+                <!--------------------- Resource Model Number -------------------->
+                <div ng-if="component.isResource()"
+                     class="i-sdc-form-item"
+                     data-ng-class="{'error': validateField(editForm.resourceVendorModelNumber)}">
+                    <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_RESOURCE_MODEL_NUMBER"></label>
+                    <input class="i-sdc-form-input" type="text"
+                           data-ng-class="{'view-mode': isViewMode()}"
+                           data-ng-model="component.resourceVendorModelNumber"
+                           data-ng-model-options="{ debounce: 500 }"
+                           data-ng-maxlength="65"
+                           name="resourceVendorModelNumber"
+                           data-ng-pattern="validation.VendorModelNumberValidationPattern"
+                           maxlength="65"
+                           data-tests-id="resourceVendorModelNumber"
+                    />
 
+                    <div class="input-error" data-ng-show="validateField(editForm.resourceVendorModelNumber)">
+                        <span ng-show="editForm.resourceVendorModelNumber.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '65' }"></span>
+                        <span ng-show="editForm.resourceVendorModelNumber.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+                    </div>
+                </div>
+                <!--------------------- Resource Model Number -------------------->
 
-            </div><!-- Close w-sdc-form-column -->
-
-                <div class="w-sdc-form-column">
-
-                <!--------------------- RESOURCE TAGS -------------------->
-                <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.tags)}">
-                    <label class="i-sdc-form-label">Tags</label>
+                    <!--------------------- ECOMPGENERATEDNAMING -------------------->
 
-                    <sdc-tags form-element="editForm" element-name="tags" max-tags="20" class="i-sdc-form-item-tags"
-                              sdc-disabled="isViewMode()"
-                              tags="component.tags"
-                              pattern="validation.tagValidationPattern"
-                              special-tag="component.name"></sdc-tags>
+                    <div class="i-sdc-form-item"
+                         data-ng-class="{'error': validateField(editForm.ecompGeneratedNaming)}"
+                         data-ng-if="component.isService()">
+                        <label class="i-sdc-form-label">Ecomp Generated Naming</label>
+                        <select class="i-sdc-form-select"
+                                data-required
+                                name="ecompGeneratedNaming"
+                                data-ng-change="onEcompGeneratedNamingChange()"
+                                data-ng-class="{'view-mode': isViewMode()}"
+                                data-ng-model="component.ecompGeneratedNaming"
+                                data-tests-id="ecompGeneratedNaming">
+                            <option ng-value="true">true</option>
+                            <option ng-value="false">false</option>
+                        </select>
+                        <div class="input-error" data-ng-show="validateField(editForm.ecompGeneratedNaming)">
 
-                    <div class="input-error" data-ng-show="validateField(editForm.tags)">
-                        <span ng-show="editForm.tags.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
-                        <span ng-show="editForm.tags.$error.nameExist" translate="NEW_SERVICE_RESOURCE_ERROR_TAG_NAME_EXIST"></span>
+                        </div>
                     </div>
-                </div>
-                <!--------------------- RESOURCE TAGS -------------------->
+                    <!--------------------- CATEGORIES -------------------->
 
-                <!--------------------- USER ID -------------------->
-                <div class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.contactId)}">
-                    <label class="i-sdc-form-label " data-ng-class="{'required':!component.isProduct()}" translate="GENERAL_LABEL_CONTACT_ID"></label>
-                    <input class="i-sdc-form-input" type="text" data-ng-if="!component.isProduct()"
-                           data-ng-model="component.contactId"
-                           data-ng-class="{'view-mode': isViewMode()}"
-                           data-ng-required="!component.isProduct()"
-                           name="contactId"
-                           data-ng-pattern="validation.contactIdValidationPattern"
-                           data-ng-model-options="{ debounce: 500 }"
-                           data-tests-id="contactId"
-                           maxlength="50"
+                    <!--------------------- NAMING POLICY  -------------------->
+                    <div ng-if="component.isService()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.namingPolicy)}">
+                        <label class="i-sdc-form-label">Naming policy</label>
+                        <input class="i-sdc-form-input"
+                               name="fullName"
+                               data-ng-class="{'view-mode': isViewMode() || !component.ecompGeneratedNaming}"
+                               data-ng-maxlength="100"
+                               maxlength="100"
+                               data-ng-model="component.namingPolicy"
+                               type="text"
+                               data-ng-model-options="{ debounce: 500 }"
+                               data-ng-pattern="validation.commentValidationPattern"
+                               data-tests-id="namingPolicy"
+                               autofocus
+                               ng-readonly="isViewMode() || !component.ecompGeneratedNaming"
                         />
-                    <input class="i-sdc-form-input" type="text" data-ng-if="component.isProduct()"
-                           data-ng-model="component.contacts[0]"
-                           data-ng-class="{'view-mode': isViewMode()}"
-                           data-ng-required="!component.isProduct()"
-                           name="contactId"
-                           data-ng-pattern="validation.contactIdValidationPattern"
-                           data-ng-model-options="{ debounce: 500 }"
-                           data-tests-id="contactId"
-                           maxlength="50"
-                    />
 
-                    <div class="input-error" data-ng-show="validateField(editForm.contactId)">
-                        <span ng-show="editForm.contactId.$error.required" translate="NEW_SERVICE_RESOURCE_ERROR_CONTACT_REQUIRED"></span>
-                        <span ng-show="editForm.contactId.$error.pattern" translate="NEW_SERVICE_RESOURCE_ERROR_CONTACT_NOT_VALID"></span>
+                        <div class="input-error" data-ng-show="validateField(editForm.namingPolicy)">
+                            <span ng-show="editForm.namingPolicy.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '100' }"></span>
+                            <span ng-show="editForm.namingPolicy.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+                        </div>
                     </div>
-                </div>
-                <!--------------------- USER ID -------------------->
-
+                    <!--------------------- NAMING POLICY  -------------------->
 
+                    <!--------------------- Service Type -------------------->
+                    <div ng-if="component.isService()"
+                         class="i-sdc-form-item"
+                         data-ng-class="{'error': validateField(editForm.serviceType)}">
+                        <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_TYPE"></label>
+                        <input class="i-sdc-form-input" type="text"
+                               data-ng-class="{'view-mode': isViewMode()}"
+                               data-ng-model="component.serviceType"
+                               data-ng-model-options="{ debounce: 500 }"
+                               name="serviceType"
+                               data-tests-id="serviceType"
+                               data-ng-maxlength="25"
+                               data-ng-pattern="validation.VendorReleaseValidationPattern"
+                               maxlength="25"
+                        />
+                        <div class="input-error" data-ng-show="validateField(editForm.serviceType)">
+                            <span ng-show="editForm.serviceType.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '25' }"></span>
+                            <span ng-show="editForm.serviceType.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+                        </div>
+                    </div>
+                    <!--------------------- Service Type -------------------->
+
+                    <!--------------------- Service Role -------------------->
+                    <div ng-if="component.isService()"
+                         class="i-sdc-form-item"
+                         data-ng-class="{'error': validateField(editForm.serviceRole)}">
+                        <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_ROLE"></label>
+                        <input class="i-sdc-form-input" type="text"
+                               data-ng-class="{'view-mode': isViewMode()}"
+                               data-ng-model="component.serviceRole"
+                               data-ng-model-options="{ debounce: 500 }"
+                               name="serviceRole"
+                               data-tests-id="serviceRole"
+                               data-ng-maxlength="25"
+                               data-ng-pattern="validation.VendorReleaseValidationPattern"
+                               maxlength="25"
+                        />
+                        <div class="input-error" data-ng-show="validateField(editForm.serviceRole)">
+                            <span ng-show="editForm.serviceRole.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '25' }"></span>
+                            <span ng-show="editForm.serviceRole.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+                        </div>
+                    </div>
+                    <!--------------------- Service Role -------------------->
+                    <div class="meta-data" data-ng-if="component.creationDate">
+                        <div>
+                            <b>Created:</b>
+                        </div>
+                        <div class="meta-data-item-value">{{component.creationDate | date:'MM/dd/yyyy'}}, {{component.creatorFullName}}</div>
+                        <div>
+                            <b>Modifed:</b>
+                        </div>
+                        <div class="meta-data-item-value">
+                            {{component.lastUpdateDate | date:'MM/dd/yyyy'}}
+                        </div>
+                        <div>
+                            <b>UUID:</b>
+                        </div>
+                        <div class="meta-data-item-value">
+                            {{component.uuid}}
+                        </div>
+                        <div>
+                            <b>Invariant UUID:</b>
+                        </div>
+                        <div class="meta-data-item-value">
+                            {{component.invariantUUID}}
+                        </div>
+                    </div>
                 </div><!-- Close w-sdc-form-column -->
             </div>
 
         </div><!-- Close w-sdc-form-section-container -->
 
     </form>
-
 </div>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/general/general.less b/catalog-ui/src/app/view-models/workspace/tabs/general/general.less
index caa755cce3..9633ec5bb6 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/general/general.less
+++ b/catalog-ui/src/app/view-models/workspace/tabs/general/general.less
@@ -1,8 +1,8 @@
 .sdc-workspace-general-step {
-
+    display: flex;
     .w-sdc-form {
         padding: 0;
-
+        flex-grow: 10;
         .i-sdc-form-file-upload{
             input[type="button"] {
                 cursor: pointer;
@@ -33,6 +33,14 @@
             }
         }
 
+        .description{
+            height: 300px;
+        }
+
+        .i-sdc-form-item.description-field{
+            margin-bottom: 0;
+        }
+
         .w-sdc-form-section-container {
             text-align: center;
         }
@@ -43,6 +51,7 @@
                 width: auto;
                 padding: 10px;
             }
+            margin-bottom: 15px;
         }
 
         .i-sdc-form-label {
@@ -63,6 +72,73 @@
 
     }
 
+    .w-sdc-form-column {
+        position: relative;
+    }
+
+    .meta-data{
+        padding: 8px 0 2px 20px;
+        text-align: left;
+        background-color: @tlv_color_t;
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        .meta-data-item-value{
+            padding-bottom: 6px;
+        }
+    }
+
+    .upper-general-fields{
+        display: flex;
+    }
+
+    .selected-icon-container{
+        flex-grow: 1;
+        display: flex;
+        align-items: center;
+        .selected-icon-inner-container{
+            height: 64px;
+            width: 64px;
+            margin: 0 auto;
+        }
+        .update-component-icon{
+            position: relative;
+            float: right;
+            cursor: pointer;
+        }
+        .selected-icon{
+            position: relative;
+            top: -20px;
+            z-index: -1;
+            &.disable{
+                position: inherit;
+            }
+        }
+        &.show-only-on-over{
+            .update-component-icon{
+                display: none;
+            }
+            .selected-icon{
+                position: inherit;
+            }
+            &:hover{
+                .update-component-icon{
+                    display: inline-block;
+                }
+                .selected-icon{
+                    position: relative;
+                }
+            }
+        }
+    }
+
+    .name-and-category-fields{
+        flex-grow: 5;
+    }
+
+
+
+
 }