diff options
author | ys9693 <ys9693@att.com> | 2020-01-19 13:50:02 +0200 |
---|---|---|
committer | Ofir Sonsino <ofir.sonsino@intl.att.com> | 2020-01-22 12:33:31 +0000 |
commit | 16a9fce0e104a38371a9e5a567ec611ae3fc7f33 (patch) | |
tree | 03a2aff3060ddb5bc26a90115805a04becbaffc9 /catalog-ui/src/app/view-models/workspace/tabs/general | |
parent | aa83a2da4f911c3ac89318b8e9e8403b072942e1 (diff) |
Catalog alignment
Issue-ID: SDC-2724
Signed-off-by: ys9693 <ys9693@att.com>
Change-Id: I52b4aacb58cbd432ca0e1ff7ff1f7dd52099c6fe
Diffstat (limited to 'catalog-ui/src/app/view-models/workspace/tabs/general')
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; } |