Catalog alignment

Issue-ID: SDC-2724
Signed-off-by: ys9693 <ys9693@att.com>
Change-Id: I52b4aacb58cbd432ca0e1ff7ff1f7dd52099c6fe

3 files changed, 141 insertions, 131 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 b4529700cf..e2709281b7 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
@@ -7,9 +7,9 @@
  * 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.
@@ -22,11 +22,13 @@
 import * as _ from "lodash";
 import {ModalsHandler, ValidationUtils, EVENTS, CHANGE_COMPONENT_CSAR_VERSION_FLAG, ComponentType, DEFAULT_ICON,
     ResourceType, ComponentState, instantiationType, ComponentFactory} from "app/utils";
-import {CacheService, EventListenerService, ProgressService, OnboardingService} from "app/services";
+import { EventListenerService, ProgressService} from "app/services";
+import {CacheService, OnboardingService, ImportVSPService} from "app/services-ng2";
 import {IAppConfigurtaion, IValidate, IMainCategory, Resource, ISubCategory,Service, ICsarComponent, Component} from "app/models";
 import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model";
 import {Dictionary} from "lodash";
 import { PREVIOUS_CSAR_COMPONENT } from "../../../../utils/constants";
+import { Observable, Subject } from "rxjs";
 
 
 export class Validation {
@@ -37,7 +39,6 @@ export class Validation {
     VendorNameValidationPattern:RegExp;
     VendorModelNumberValidationPattern:RegExp;
     commentValidationPattern:RegExp;
-    projectCodeValidationPattern:RegExp;
 }
 
 export class componentCategories {//categories field bind to this obj in order to solve this bug: DE242059
@@ -61,7 +62,7 @@ export interface IGeneralScope extends IWorkspaceViewModelScope {
     isShowFileBrowse:boolean;
     isShowOnboardingSelectionBrowse:boolean;
     importedToscaBrowseFileText:string;
-    importCsarProgressKey:string;
+    importCsarProProgressKey:string;
     browseFileLabel:string;
     componentCategories:componentCategories;
     instantiationTypes:Array<instantiationType>;
@@ -86,6 +87,7 @@ export interface IGeneralScope extends IWorkspaceViewModelScope {
     possibleToUpdateIcon():boolean;
 }
 
+// tslint:disable-next-line:max-classes-per-file
 export class GeneralViewModel {
 
     static '$inject' = [
@@ -100,7 +102,6 @@ export class GeneralViewModel {
         'CommentValidationPattern',
         'ValidationUtils',
         'sdcConfig',
-        'ProjectCodeValidationPattern',
         '$state',
         'ModalsHandler',
         'EventListenerService',
@@ -109,8 +110,10 @@ export class GeneralViewModel {
         '$interval',
         '$filter',
         '$timeout',
-        'Sdc.Services.OnboardingService',
-        'ComponentFactory'
+        'OnboardingService',
+        'ComponentFactory',
+        'ImportVSPService',
+        '$stateParams'
     ];
 
     constructor(private $scope:IGeneralScope,
@@ -124,7 +127,6 @@ export class GeneralViewModel {
                 private CommentValidationPattern:RegExp,
                 private ValidationUtils:ValidationUtils,
                 private sdcConfig:IAppConfigurtaion,
-                private ProjectCodeValidationPattern:RegExp,
                 private $state:ng.ui.IStateService,
                 private ModalsHandler:ModalsHandler,
                 private EventListenerService:EventListenerService,
@@ -133,8 +135,10 @@ export class GeneralViewModel {
                 protected $interval:any,
                 private $filter:ng.IFilterService,
                 private $timeout:ng.ITimeoutService,
-                private onBoardingService:OnboardingService,
-                private ComponentFactory:ComponentFactory) {
+                private onBoardingService: OnboardingService,
+                private ComponentFactory:ComponentFactory,
+                private importVSPService: ImportVSPService,
+                private $stateParams: any) {
 
         this.initScopeValidation();
         this.initScopeMethods();
@@ -153,13 +157,11 @@ export class GeneralViewModel {
         this.$scope.validation.VendorNameValidationPattern = this.VendorNameValidationPattern;
         this.$scope.validation.VendorModelNumberValidationPattern = this.VendorModelNumberValidationPattern;
         this.$scope.validation.commentValidationPattern = this.CommentValidationPattern;
-        this.$scope.validation.projectCodeValidationPattern = this.ProjectCodeValidationPattern;
     };
 
-    private loadOnboardingFileCache = ():ng.IPromise<Dictionary<any>> =>{
-
+    private loadOnboardingFileCache = (): Observable<Dictionary<Dictionary<string>>> => {
         let onboardCsarFilesMap:Dictionary<Dictionary<string>>;
-        let onSuccess = (vsps:Array<ICsarComponent>) =>{
+        let onSuccess = (vsps:Array<ICsarComponent>) => {
             onboardCsarFilesMap = {};
             _.each(vsps, (vsp:ICsarComponent)=>{
                 onboardCsarFilesMap[vsp.packageId] = onboardCsarFilesMap[vsp.packageId] || {};
@@ -170,8 +172,8 @@ export class GeneralViewModel {
         };
         let onError = (): void =>{
             console.log("Error getting onboarding list");
-        };               
-        return this.onBoardingService.getOnboardingVSPs().then(onSuccess, onError);
+        };
+        return this.onBoardingService.getOnboardingVSPs().map(onSuccess, onError);
     };
 
     private setImportedFileText = ():void => {
@@ -179,7 +181,7 @@ export class GeneralViewModel {
         if(!this.$scope.isShowOnboardingSelectionBrowse) return;
 
         //these variables makes it easier to read this logic
-        let csarUUID:string = (<Resource>this.$scope.component).csarUUID; 
+        let csarUUID:string = (<Resource>this.$scope.component).csarUUID;
         let csarVersion:string = (<Resource>this.$scope.component).csarVersion;
 
         let onboardCsarFilesMap:Dictionary<Dictionary<string>> = this.cacheService.get('onboardCsarFilesMap');
@@ -187,21 +189,25 @@ export class GeneralViewModel {
             if(this.$scope.component.vspArchived){
                 this.$scope.importedToscaBrowseFileText = 'VSP is archived';
             } else {
-                this.$scope.importedToscaBrowseFileText = onboardCsarFilesMap[csarUUID][csarVersion];
+                if(this.$stateParams.componentCsar && this.$scope.component.lifecycleState === 'NOT_CERTIFIED_CHECKIN' && !this.$scope.isCreateMode()) {
+                    this.$scope.importedToscaBrowseFileText = this.$scope.originComponent.name + ' (' + (this.$scope.originComponent as Resource).csarVersion + ')';
+                } else {
+                    this.$scope.importedToscaBrowseFileText = onboardCsarFilesMap[csarUUID][csarVersion];
+                }
             }
         }
 
-        
+
         if(this.$scope.component.vspArchived || (onboardCsarFilesMap && onboardCsarFilesMap[csarUUID] && onboardCsarFilesMap[csarUUID][csarVersion])){ //check that the file name is already in cache
             assignFileName();
         } else {
-            this.loadOnboardingFileCache().then((onboardingFiles) => {
+            this.loadOnboardingFileCache().subscribe((onboardingFiles) => {
                 onboardCsarFilesMap = onboardingFiles;
                 this.cacheService.set('onboardCsarFilesMap', onboardingFiles);
                 assignFileName();
             }, ()=> {});
         }
-        
+
     }
 
     isCreateModeAvailable(verifyObj:string): boolean {
@@ -211,10 +217,9 @@ export class GeneralViewModel {
 
     private initScope = ():void => {
 
-       
         this.$scope.importCsarProgressKey = "importCsarProgressKey";
 
-        this.$scope.browseFileLabel = this.$scope.component.isResource() && (<Resource>this.$scope.component).resourceType === ResourceType.VF ? "Upload file" : "Upload VFC";
+        this.$scope.browseFileLabel = this.$scope.component.isResource() && (<Resource>this.$scope.component).resourceType === ResourceType.VF ? 'VSP' : 'Upload VFC';
         this.$scope.progressService = this.progressService;
         this.$scope.componentCategories = new componentCategories();
         this.$scope.componentCategories.selectedCategory = this.$scope.component.selectedCategory;
@@ -236,7 +241,7 @@ export class GeneralViewModel {
             if (resource.importedFile) { // Component has imported file.
                 this.$scope.isShowFileBrowse = true;
             }
-            if (this.$scope.isEditMode() && resource.resourceType == ResourceType.VF && !resource.csarUUID) {
+            if (resource.resourceType === ResourceType.VF && !resource.csarUUID) {
                 this.$scope.isShowFileBrowse = true;
             }
         } else if(this.$scope.component.isService()){
@@ -244,30 +249,35 @@ export class GeneralViewModel {
             this.$scope.initInstantiationTypes();
         }
 
-        // Work around to change the csar version
-        if (this.cacheService.get(CHANGE_COMPONENT_CSAR_VERSION_FLAG)) {
-            //(<Resource>this.$scope.component).csarVersion = this.cacheService.get(CHANGE_COMPONENT_CSAR_VERSION_FLAG);
-            this.cacheService.remove(CHANGE_COMPONENT_CSAR_VERSION_FLAG);
-            this.$scope.updateUnsavedFileFlag(true);
+        if (this.cacheService.get(PREVIOUS_CSAR_COMPONENT)) { //keep the old component in the cache until checkout, so we dont need to pass it around
+            this.$scope.setOriginComponent(this.cacheService.get(PREVIOUS_CSAR_COMPONENT));
+            this.cacheService.remove(PREVIOUS_CSAR_COMPONENT);
+        }
 
-            if (!this.$scope.isViewMode() && this.cacheService.get(PREVIOUS_CSAR_COMPONENT)) { //keep the old component in the cache until checkout, so we dont need to pass it around
-                this.$scope.setOriginComponent(this.cacheService.get(PREVIOUS_CSAR_COMPONENT));
-                this.cacheService.remove(PREVIOUS_CSAR_COMPONENT);
+        if (this.$stateParams.componentCsar && !this.$scope.isCreateMode()) {
+            this.$scope.updateUnsavedFileFlag(true);
+            // We are coming from update VSP modal we need to automatically checkout (if needed) and save the VF
+            if (this.$scope.component.lifecycleState !== ComponentState.NOT_CERTIFIED_CHECKOUT) {
+                // Checkout is needed after that a save will be invoked in workspace-view.handleLifeCycleStateChange
+                this.EventListenerService.notifyObservers(EVENTS.ON_LIFECYCLE_CHANGE_WITH_SAVE, 'checkOut');
+                // if(this.$scope.component.lifecycleState !== 'NOT_CERTIFIED_CHECKIN') {
+                //     (<Resource>this.$scope.component).csarVersion = this.$stateParams.componentCsar.csarVersion;
+                // }
+            } else {
+                this.$scope.save();
             }
         }
 
 
-        // Init the decision if to show onboarding
-        if (this.$scope.component.isResource() && this.$scope.isEditMode() &&
-            ((<Resource>this.$scope.component).resourceType == ResourceType.VF ||
-                (<Resource>this.$scope.component).resourceType == ResourceType.PNF)
-            && (<Resource>this.$scope.component).csarUUID) {
+        if (this.$scope.component.isResource() &&
+            (this.$scope.component as Resource).resourceType === ResourceType.VF ||
+                (this.$scope.component as Resource).resourceType === ResourceType.PNF && (this.$scope.component as Resource).csarUUID) {
             this.$scope.isShowOnboardingSelectionBrowse = true;
             this.setImportedFileText();
         } else {
             this.$scope.isShowOnboardingSelectionBrowse = false;
         }
-        
+
 
         //init file extensions based on the file that was imported.
         if (this.$scope.component.isResource() && (<Resource>this.$scope.component).importedFile) {
@@ -304,7 +314,7 @@ export class GeneralViewModel {
             this.$scope.originComponent.contactId = this.$scope.component.contactId;
         }
 
-        
+
         this.$scope.$on('$destroy', () => {
             this.EventListenerService.unRegisterObserver(EVENTS.ON_LIFECYCLE_CHANGE_WITH_SAVE);
             this.EventListenerService.unRegisterObserver(EVENTS.ON_LIFECYCLE_CHANGE);
@@ -313,7 +323,7 @@ export class GeneralViewModel {
     };
 
     // Convert category string MainCategory_#_SubCategory to Array with one item (like the server except)
-    private convertCategoryStringToOneArray = ():Array<IMainCategory> => {
+    private convertCategoryStringToOneArray = ():IMainCategory[] => {
         let tmp = this.$scope.component.selectedCategory.split("_#_");
         let mainCategory = tmp[0];
         let subCategory = tmp[1];
@@ -333,14 +343,14 @@ export class GeneralViewModel {
         }
         let tmpSelected = <IMainCategory> mainCategoryClone;
 
-        let result:Array<IMainCategory> = [];
+        let result:IMainCategory[] = [];
         result.push(tmpSelected);
 
         return result;
     };
 
     private updateComponentNameInBreadcrumbs = ():void => {
-        //update breadcrum after changing name
+        // update breadcrum after changing name
         this.$scope.breadcrumbsModel[1].updateSelectedMenuItemText(this.$scope.component.getComponentSubType() + ': ' + this.$scope.component.name);
         this.$scope.updateMenuComponentName(this.$scope.component.name);
     };
@@ -436,24 +446,20 @@ export class GeneralViewModel {
             if(this.$scope.component.vspArchived) return;
             let csarUUID = (<Resource>this.$scope.component).csarUUID;
             let csarVersion = (<Resource>this.$scope.component).csarVersion;
-            this.ModalsHandler.openOnboadrdingModal('Update', csarUUID, csarVersion).then((result)=> {
-
-                if(result){
-                    this.ComponentFactory.getComponentWithMetadataFromServer(result.type.toUpperCase(), result.previousComponent.uniqueId).then(
-                        (component:Component)=> {
-                        if (result.componentCsar && component.isResource()){
-                            this.cacheService.set(PREVIOUS_CSAR_COMPONENT, angular.copy(component));
-                            component = this.ComponentFactory.updateComponentFromCsar(result.componentCsar, <Resource>component);
-                        }
-                            
-                        this.$scope.setComponent(component);
-                        this.$scope.updateUnsavedFileFlag(true);
-                        this.setImportedFileText();
-                    }, ()=> {
-                        // ERROR
-                    });
-                }
-            }, () => {});
+            this.importVSPService.openOnboardingModal(csarUUID, csarVersion).subscribe((result) => {
+                this.ComponentFactory.getComponentWithMetadataFromServer(result.type.toUpperCase(), result.previousComponent.uniqueId).then(
+                    (component:Component)=> {
+                    if (result.componentCsar && component.isResource()){
+                        this.cacheService.set(PREVIOUS_CSAR_COMPONENT, angular.copy(component));
+                        component = this.ComponentFactory.updateComponentFromCsar(result.componentCsar, <Resource>component);
+                    }
+                    this.$scope.setComponent(component);
+                    this.$scope.save();
+                    this.setImportedFileText();
+                }, ()=> {
+                    // ERROR
+                });
+            })
         };
 
         this.$scope.updateIcon = ():void => {
@@ -491,17 +497,17 @@ export class GeneralViewModel {
 
                 return;
             }
-            let subtype:string = ComponentType.RESOURCE == this.$scope.componentType ? this.$scope.component.getComponentSubType() : undefined;
+            const subtype:string = ComponentType.RESOURCE == this.$scope.componentType ? this.$scope.component.getComponentSubType() : undefined;
 
-            let onFailed = (response) => {
-                //console.info('onFaild', response);
-                //this.$scope.isLoading = false;
+            const onFailed = (response) => {
+                // console.info('onFaild', response);
+                // this.$scope.isLoading = false;
             };
 
-            let onSuccess = (validation:IValidate) => {
-                this.$scope.editForm["componentName"].$setValidity('nameExist', validation.isValid);
+            const onSuccess = (validation:IValidate) => {
+                this.$scope.editForm['componentName'].$setValidity('nameExist', validation.isValid);
                 if (validation.isValid) {
-                    //update breadcrumb after changing name
+                    // update breadcrumb after changing name
                     this.updateComponentNameInBreadcrumbs();
                 }
             };
@@ -522,48 +528,57 @@ export class GeneralViewModel {
                     && !this.$scope.editForm["componentName"].$error.pattern
                     && (!this.$scope.originComponent.name || this.$scope.component.name.toUpperCase() !== this.$scope.originComponent.name.toUpperCase())
                 ) {
-                    if (!(this.$scope.componentType === ComponentType.RESOURCE && (<Resource>this.$scope.component).csarUUID !== undefined)
+                    if (!(this.$scope.componentType === ComponentType.RESOURCE && (this.$scope.component as Resource).csarUUID !== undefined)
                     ) {
                         this.$scope.component.validateName(name, subtype).then(onSuccess, onFailed);
                     }
-                } else if (this.$scope.originComponent.name && this.$scope.component.name.toUpperCase() === this.$scope.originComponent.name.toUpperCase()) {
+                } else if (this.$scope.editForm && this.$scope.originComponent.name && this.$scope.component.name.toUpperCase() === this.$scope.originComponent.name.toUpperCase()) {
                     // Clear the error
-                    this.$scope.editForm["componentName"].$setValidity('nameExist', true);
+                    this.$scope.editForm['componentName'].$setValidity('nameExist', true);
                 }
             }
         };
 
 
         this.EventListenerService.registerObserverCallback(EVENTS.ON_LIFECYCLE_CHANGE_WITH_SAVE, (nextState) => {
-            if (this.$state.current.data.unsavedChanges && this.$scope.isValidForm){
+            if (this.$state.current.data.unsavedChanges && this.$scope.isValidForm) {
                 this.$scope.save().then(() => {
                     this.$scope.handleChangeLifecycleState(nextState);
                 }, () => {
-                    console.error("Save failed, unable to change lifecycle state to " + nextState);
+                    console.error('Save failed, unable to change lifecycle state to ' + nextState);
                 });
             } else if(!this.$scope.isValidForm){
-                console.error("Form is not valid");
+                console.error('Form is not valid');
             } else {
                 let newCsarVersion:string;
-                if(this.$scope.unsavedFile){
-                    newCsarVersion = (<Resource>this.$scope.component).csarVersion;
+                if(this.$scope.unsavedFile) {
+                    newCsarVersion = (this.$scope.component as Resource).csarVersion;
+                }
+                if(this.$stateParams.componentCsar && !this.$scope.isCreateMode()) {
+                    const onError = (): void => {
+                        if (this.$scope.component.lifecycleState === 'NOT_CERTIFIED_CHECKIN') {
+                            this.$scope.revert();
+                        }
+                    };
+                    this.$scope.handleChangeLifecycleState(nextState, newCsarVersion, onError);
+
+                } else {
+                    this.$scope.handleChangeLifecycleState(nextState, newCsarVersion);
                 }
-                this.$scope.handleChangeLifecycleState(nextState, newCsarVersion);
             }
         });
 
-
         this.$scope.revert = ():void => {
-            //in state of import file leave the file in place
+            // in state of import file leave the file in place
 
             this.$scope.setComponent(this.ComponentFactory.createComponent(this.$scope.originComponent));
 
             if (this.$scope.component.isResource() && this.$scope.restoreFile) {
-                (<Resource>this.$scope.component).importedFile = angular.copy(this.$scope.restoreFile);
-            } 
-    
-            this.setImportedFileText(); 
-            this.$scope.updateBreadcrumbs(this.$scope.component); //update on workspace
+                (this.$scope.component as Resource).importedFile = angular.copy(this.$scope.restoreFile);
+            }
+
+            this.setImportedFileText();
+            this.$scope.updateBreadcrumbs(this.$scope.component); // update on workspace
 
             this.$scope.componentCategories.selectedCategory = this.$scope.originComponent.selectedCategory;
             this.setUnsavedChanges(false);
@@ -573,8 +588,8 @@ export class GeneralViewModel {
 
         this.$scope.onImportFileChange = () => {
 
-            if( !this.$scope.restoreFile && this.$scope.editForm.fileElement.value && this.$scope.editForm.fileElement.value.filename || //if file started empty but we have added a new one
-                this.$scope.restoreFile && !angular.equals(this.$scope.restoreFile, this.$scope.editForm.fileElement.value)){ //or file was swapped for a new one
+            if( !this.$scope.restoreFile && this.$scope.editForm.fileElement.value && this.$scope.editForm.fileElement.value.filename || // if file started empty but we have added a new one
+                this.$scope.restoreFile && !angular.equals(this.$scope.restoreFile, this.$scope.editForm.fileElement.value)){ // or file was swapped for a new one
                 this.$scope.updateUnsavedFileFlag(true);
             } else {
                 this.$scope.updateUnsavedFileFlag(false);
@@ -582,46 +597,46 @@ export class GeneralViewModel {
             }
         };
 
-        this.$scope.$watchCollection('component.name', (newData:any):void => {
+        this.$scope.$watchCollection('component.name', (newData: any): void => {
             this.$scope.validateName(false);
         });
 
         // Notify the parent if this step valid or not.
-        this.$scope.$watch("editForm.$valid", (newVal, oldVal) => {
+        this.$scope.$watch('editForm.$valid', (newVal, oldVal) => {
             this.$scope.setValidState(newVal);
         });
 
-        this.$scope.$watch("editForm.$dirty", (newVal, oldVal) => {
+        this.$scope.$watch('editForm.$dirty', (newVal, oldVal) => {
             if (newVal && !this.$scope.isCreateMode()) {
                 this.setUnsavedChanges(true);
             }
 
         });
 
-        this.$scope.onCategoryChange = ():void => {
+        this.$scope.onCategoryChange = (): void => {
             this.$scope.component.selectedCategory = this.$scope.componentCategories.selectedCategory;
             this.$scope.component.categories = this.convertCategoryStringToOneArray();
             this.$scope.component.icon = DEFAULT_ICON;
         };
 
-        this.$scope.onEcompGeneratedNamingChange = ():void =>{
-            if(!(<Service>this.$scope.component).ecompGeneratedNaming){
-                (<Service>this.$scope.component).namingPolicy = '';
+        this.$scope.onEcompGeneratedNamingChange = (): void => {
+            if (!(this.$scope.component as Service).ecompGeneratedNaming) {
+                (this.$scope.component as Service).namingPolicy = '';
             }
         };
 
-        this.$scope.onVendorNameChange = (oldVendorName:string):void => {
+        this.$scope.onVendorNameChange = (oldVendorName: string): void => {
             if (this.$scope.component.icon === oldVendorName) {
                 this.$scope.component.icon = DEFAULT_ICON;
             }
         };
         this.EventListenerService.registerObserverCallback(EVENTS.ON_LIFECYCLE_CHANGE, this.$scope.reload);
 
-    };
+    }
 
-    private setUnsavedChanges = (hasChanges:boolean):void => {
+    private setUnsavedChanges = (hasChanges: boolean): void => {
         this.$state.current.data.unsavedChanges = hasChanges;
-    };
+    }
 
 }
 
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 07f1e4d6ed..86f1feba0c 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
@@ -13,13 +13,12 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
 -->
-
 <div include-padding="true" class="sdc-workspace-general-step">
     <div class="w-sdc-main-container-body-content-action-buttons">
-        <div data-ng-if="unsavedFile && !isCreateMode() && !isViewMode()" class="unsaved-file-warning">
+        <div data-ng-if="unsavedFile && !isCreateMode() && !isViewMode()" data-tests-id="save-warning" class="unsaved-file-warning">
              <span class="sprite-new sdc-warning"></span> Click save to update to the new VSP
         </div>
-        <button class="tlv-btn blue" data-ng-if="isDesigner()" data-ng-show="isGeneralView()" data-ng-class="{'disabled' : !isValidForm  || isDisableMode() || isViewMode() || isCreateMode()}"  
+        <button class="tlv-btn blue" data-ng-if="isDesigner()" data-ng-show="isGeneralView()" data-ng-class="{'disabled' : !isValidForm  || isDisableMode() || isViewMode() || isCreateMode()}"
             data-ng-click="save()" data-tests-id="create/save" tooltips tooltip-content="Save">Save</button>
         <span data-ng-if="isDesigner()" data-ng-class="{'disabled' :isDisableMode() || isViewMode() || isCreateMode()}"  ng-click="revert()" class="sprite-new revert-btn" data-tests-id="revert"
               data-ng-show="isGeneralView()" tooltips tooltip-content="Revert"></span>
@@ -160,7 +159,7 @@
                 <div class="w-sdc-form-column">
                     <!--------------------- IMPORT TOSCA FILE USING BROWSE (ALSO VFC) -------------------->
                     <div class="i-sdc-form-item" ng-if="isShowFileBrowse">
-                       
+
                         <!-- //                                     element-disabled="{{!isCreateMode()&&!(isEditMode()&&component.resourceType=='VF')&&component.vspArchived}} || {{isViewMode()}}" -->
 
                         <label class="i-sdc-form-label" data-ng-class="{'required':isCreateMode()}">{{browseFileLabel}}</label>
@@ -173,17 +172,17 @@
                                      on-file-changed-in-directive="onImportFileChange"
                                      extensions="{{importedFileExtension}}"
                                      default-text="'Browse to select file'"
-                                     data-ng-class="{'error':!(isEditMode()&&component.resourceType=='VF') && (!editForm.fileElement.$valid || !component.importedFile.filename)}"></file-upload>
+                                     ></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>
+                            <label class="i-sdc-form-label required">VSP</label>
                             <div class="i-sdc-form-file-upload i-sdc-form-input">
                                 <span class="i-sdc-form-file-name"  data-ng-disabled="component.vspArchived"  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" data-ng-disabled="component.vspArchived" name="fileElement" />
-                                <div class="file-upload-browse-btn" data-ng-click="openOnBoardingModal()" data-ng-disabled="!component.vspArchived" data-tests-id="browseButton">Browse</div>
+                                <input type="button" data-ng-class="{'disabled': !isEditMode() && component.vspArchived}" data-ng-disabled="component.vspArchived" name="fileElement" />
+                                <div class="file-upload-browse-btn" data-ng-class="{'disabled': !isEditMode() && !component.vspArchived}" data-ng-click="openOnBoardingModal()" data-ng-disabled="!component.vspArchived" data-tests-id="browseButton">Browse</div>
                             </div>
                     </div>
 
@@ -218,28 +217,6 @@
                     </div>
                     <!--------------------- 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-maxlength="50"
-                               data-required
-                               name="projectCode"
-                               data-ng-pattern="validation.projectCodeValidationPattern"
-                               data-tests-id="projectCode"
-                        />
-
-                        <div class="input-error" data-ng-show="validateField(editForm.projectCode)">
-                            <span ng-show="editForm.contactId.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '50' }"></span>
-                            <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>
-
                 <!--------------------- VENDOR NAME -------------------->
                 <div ng-if="component.isResource()" class="i-sdc-form-item" data-ng-class="{'error': validateField(editForm.vendorName)}">
                     <label class="i-sdc-form-label required">Vendor</label>
@@ -401,6 +378,27 @@
                     </div>
                     <!--------------------- Service Role -------------------->
 
+                    <!--------------------- Service Function -------------------->
+                    <div ng-if="component.isService()"
+                         class="i-sdc-form-item"
+                         data-ng-class="{'error': validateField(editForm.serviceFunction)}">
+                        <label class="i-sdc-form-label" translate="GENERAL_TAB_LABEL_SERVICE_FUNCTION"></label>
+                        <input class="i-sdc-form-input" type="text"
+                               data-ng-class="{'view-mode': isViewMode()}"
+                               data-ng-model="component.serviceFunction"
+                               data-ng-model-options="{ debounce: 500 }"
+                               name="serviceFunction"
+                               data-tests-id="serviceFunction"
+                               data-ng-maxlength="256"
+                               data-ng-pattern="validation.ServiceTypeAndRoleValidationPattern"
+                        />
+                        <div class="input-error" data-ng-show="validateField(editForm.serviceFunction)">
+                            <span ng-show="editForm.serviceFunction.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span>
+                            <span ng-show="editForm.serviceFunction.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
+                        </div>
+                    </div>
+                    <!--------------------- Service Function -------------------->
+
                     <!-------------------- ENVIRONMENT CONTEXT  ----------------->
 
                     <div  ng-if="component.isService()" class="i-sdc-form-item">
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 b60e4b8de4..8b2cc01d75 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
@@ -27,6 +27,7 @@
             .file-upload-browse-btn {
                 .noselect;
                 .bg_n;
+                color:#191919;
                 padding: 4px 6px;
                 cursor: pointer;
                 z-index: 999;
@@ -35,10 +36,6 @@
                 text-align: center;
                 border-left: solid 1px #cfcfcf;
 
-                &.disabled {
-                    cursor: default;
-                }
-
                 &:hover:not(.disabled) {
                     background-color: #dbdee2;
                 }