Catalog alignment

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

9 files changed, 248 insertions, 631 deletions

diff --git a/catalog-ui/src/app/utils/artifacts-utils.ts b/catalog-ui/src/app/utils/artifacts-utils.ts
deleted file mode 100644
index e99b6411c4..0000000000
--- a/catalog-ui/src/app/utils/artifacts-utils.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * 
- *      http://www.apache.org/licenses/LICENSE-2.0
- * 
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import * as _ from "lodash";
-import {ArtifactModel} from "../models/artifacts";
-import {IArtifactResourceFormViewModelScope} from "../view-models/forms/artifact-form/artifact-form-view-model";
-import {Component} from "../models/components/component";
-import {ArtifactGroupType, ArtifactType} from "./constants";
-
-export class ArtifactsUtils {
-
-    static '$inject' = [
-        '$filter'
-    ];
-
-    constructor(private $filter:ng.IFilterService) {
-
-    }
-
-    public getArtifactTypeByState(currentState:string):string {
-        switch (currentState) {
-            case "workspace.composition.lifecycle":
-                return "interface";
-            case "workspace.composition.api":
-                return "api";
-            case "workspace.deployment_artifacts":
-            case "workspace.composition.deployment":
-                return "deployment";
-            case "workspace.composition.artifacts":
-                return "informational";
-            default:
-                return "informational";
-        }
-    }
-
-    public getTitle(artifactType:string, selectedComponent:Component):string {
-        switch (artifactType) {
-            case "interface":
-                return "Lifecycle Management";
-            case "api":
-                return "API Artifacts";
-            case "deployment":
-                return "Deployment Artifacts";
-            case "informational":
-                return "Informational Artifacts";
-            default:
-                if (!selectedComponent) {
-                    return "";
-                } else {
-                    return this.$filter("resourceName")(selectedComponent.name) + ' Artifacts';
-                }
-        }
-    }
-
-    public setArtifactType = (artifact:ArtifactModel, artifactType:string):void => {
-        switch (artifactType) {
-            case "api":
-                artifact.artifactGroupType = ArtifactGroupType.SERVICE_API;
-                break;
-            case "deployment":
-                artifact.artifactGroupType = ArtifactGroupType.DEPLOYMENT;
-                break;
-            default:
-                artifact.artifactGroupType = ArtifactGroupType.INFORMATION;
-                break;
-        }
-    };
-
-    public isLicenseType = (artifactType:string):boolean => {
-        let isLicense:boolean = false;
-
-        if (ArtifactType.VENDOR_LICENSE === artifactType || ArtifactType.VF_LICENSE === artifactType) {
-            isLicense = true;
-        }
-
-        return isLicense;
-    };
-
-    public removeArtifact = (artifact:ArtifactModel, artifactsArr:Array<ArtifactModel>):void => {
-
-        if (!artifact.mandatory && (ArtifactGroupType.INFORMATION == artifact.artifactGroupType ||
-            ArtifactGroupType.DEPLOYMENT == artifact.artifactGroupType)) {
-            _.remove(artifactsArr, {uniqueId: artifact.uniqueId});
-        }
-        else {
-            let artifactToDelete = _.find(artifactsArr, {uniqueId: artifact.uniqueId});
-
-            delete artifactToDelete.esId;
-            delete artifactToDelete.description;
-            delete artifactToDelete.artifactName;
-            delete artifactToDelete.apiUrl;
-        }
-    };
-
-    public addAnotherAfterSave(scope:IArtifactResourceFormViewModelScope) {
-        let newArtifact = new ArtifactModel();
-        this.setArtifactType(newArtifact, scope.artifactType);
-        scope.editArtifactResourceModel.artifactResource = newArtifact;
-
-        scope.forms.editForm['description'].$setPristine();
-        if (scope.forms.editForm['artifactLabel']) {
-            scope.forms.editForm['artifactLabel'].$setPristine();
-        }
-        if (scope.forms.editForm['type']) {
-            scope.forms.editForm['type'].$setPristine();
-        }
-
-    }
-}
diff --git a/catalog-ui/src/app/utils/change-lifecycle-state-handler.ts b/catalog-ui/src/app/utils/change-lifecycle-state-handler.ts
index 54497ba187..6a37864fe1 100644
--- a/catalog-ui/src/app/utils/change-lifecycle-state-handler.ts
+++ b/catalog-ui/src/app/utils/change-lifecycle-state-handler.ts
@@ -17,18 +17,16 @@
  * limitations under the License.
  * ============LICENSE_END=========================================================
  */
-
-import {ComponentFactory} from "./component-factory";
-import {Component, Service,IAppMenu, IAppConfigurtaion} from "../models";
-import {IEmailModalModel, IEmailModalModel_Email, IEmailModalModel_Data} from "../view-models/modals/email-modal/email-modal-view-model";
-import {AsdcComment} from "../models/comments";
-import {ModalsHandler} from "./modals-handler";
-import {ServiceServiceNg2} from "../ng2/services/component-services/service.service";
-import {EventBusService} from "../ng2/services/event-bus.service";
-
-/**
- * Created by obarda on 2/11/2016.
- */
+import { ServiceServiceNg2 } from 'app/ng2/services/component-services/service.service';
+import { EventBusService } from 'app/ng2/services/event-bus.service';
+import { EVENTS, ValidationUtils } from 'app/utils';
+import { SdcUiCommon, SdcUiComponents, SdcUiServices } from 'onap-ui-angular';
+import { Component, IAppConfigurtaion, IAppMenu, Service } from '../models';
+import { AsdcComment } from '../models/comments';
+import { CommentModalComponent } from '../ng2/components/modals/comment-modal/comment-modal.component';
+import { EventListenerService } from '../services/event-listener-service';
+import { ComponentFactory } from './component-factory';
+import { ModalsHandler } from './modals-handler';
 
 export class ChangeLifecycleStateHandler {
 
@@ -39,167 +37,130 @@ export class ChangeLifecycleStateHandler {
         '$filter',
         'ModalsHandler',
         'ServiceServiceNg2',
-        'EventBusService'
+        'EventBusService',
+        'ModalServiceSdcUI',
+        'ValidationUtils',
+        'EventListenerService'
     ];
 
-    constructor(private sdcConfig:IAppConfigurtaion,
-                private sdcMenu:IAppMenu,
-                private ComponentFactory:ComponentFactory,
-                private $filter:ng.IFilterService,
-                private ModalsHandler:ModalsHandler,
-                private ServiceServiceNg2:ServiceServiceNg2,
-                private eventBusService:EventBusService) {
-
+    constructor(private sdcConfig: IAppConfigurtaion,
+                private sdcMenu: IAppMenu,
+                private componentFactory: ComponentFactory,
+                private $filter: ng.IFilterService,
+                private modalsHandler: ModalsHandler,
+                private serviceServiceNg2: ServiceServiceNg2,
+                private eventBusService: EventBusService,
+                private modalService: SdcUiServices.ModalService,
+                private validationUtils: ValidationUtils,
+                private eventListenerService: EventListenerService) {
     }
 
-    private actualChangeLifecycleState = (component:Component, data:any, scope:any, onSuccessCallback?:Function, onErrorCallback?:Function):void => {
+    public changeLifecycleState = (component: Component, data: any, scope: any, onSuccessCallback?: Function, onErrorCallback?: Function) => {
+        if (data.conformanceLevelModal) {
+            this.validateConformanceLevel(component, data, scope, onSuccessCallback, onErrorCallback);
+        } else {
+            this.actualChangeLifecycleState(component, data, scope, onSuccessCallback, onErrorCallback);
+        }
+    }
 
-        let self = this;
+    private actualChangeLifecycleState = (component: Component, data: any, scope: any, onSuccessCallback?: Function, onErrorCallback?: Function) => {
+        const self = this;
 
-        let getContacts = (component:Component):string => {
-            let testers = this.sdcConfig.testers;
-            let result:string = testers[component.componentType][component.categories[0].name] ?
-                testers[component.componentType][component.categories[0].name] :
-                testers[component.componentType]['default'];
-            return result;
-        };
-
-        let onSuccess = (newComponent:Component):void => {
-            //scope.isLoading = false;
-            console.info(component.componentType.toLowerCase + ' change state ', newComponent);
+        const onSuccess = (newComponent: Component) => {
             if (onSuccessCallback) {
-                onSuccessCallback(self.ComponentFactory.createComponent(newComponent), data.url);
+                onSuccessCallback(self.componentFactory.createComponent(newComponent), data.url);
+                if (data.url === 'distribution/PROD/activate') {
+                    this.eventListenerService.notifyObservers(EVENTS.ON_DISTRIBUTION_SUCCESS);
+                }
             }
         };
 
-        let onError = (error):void => {
+        const onError = (error) => {
             scope.isLoading = false;
-            console.info('Failed to changeLifecycleState to ', data.url);
             if (onErrorCallback) {
                 onErrorCallback(error);
             }
         };
 
-        let comment:AsdcComment = new AsdcComment();
+        const comment: AsdcComment = new AsdcComment();
         if (data.alertModal) {
             // Show alert dialog if defined in menu.json
-            //-------------------------------------------------
-            let onOk = (confirmationText):void => {
+            const onOk: Function = (confirmationText) => {
                 comment.userRemarks = confirmationText;
                 scope.isLoading = true;
                 component.changeLifecycleState(data.url, comment).then(onSuccess, onError);
             };
 
-            let onCancel = ():void => {
-                console.info('Cancel pressed');
-                scope.isLoading = false;
-            };
-
-            let modalTitle = this.sdcMenu.alertMessages[data.alertModal].title;
-            let modalMessage = this.sdcMenu.alertMessages[data.alertModal].message.format([component.componentType.toLowerCase()]);
-            this.ModalsHandler.openAlertModal(modalTitle, modalMessage).then(onOk, onCancel);
+            const modalTitle = this.sdcMenu.alertMessages[data.alertModal].title;
+            const modalMessage = this.sdcMenu.alertMessages[data.alertModal].message.format([component.componentType.toLowerCase()]);
+            const modalButton = {
+                testId: 'OK',
+                text: this.sdcMenu.alertMessages.okButton,
+                type: SdcUiCommon.ButtonType.warning,
+                callback: onOk,
+                closeModal: true
+            } as SdcUiComponents.ModalButtonComponent;
+            this.modalService.openWarningModal(modalTitle, modalMessage, 'alert-modal', [modalButton]);
         } else if (data.confirmationModal) {
             // Show confirmation dialog if defined in menu.json
-            //-------------------------------------------------
-            let onOk = (confirmationText):void => {
-                comment.userRemarks = confirmationText;
-
-                if (data.url === "lifecycleState/CHECKIN") {
-                    this.eventBusService.notify("CHECK_IN").subscribe(() => {
+            let commentModalInstance: SdcUiComponents.ModalComponent;
+            const onOk = () => {
+                const confirmationText: string = commentModalInstance.innerModalContent.instance.comment.text;
+                commentModalInstance.closeModal();
+                comment.userRemarks = this.validationUtils.stripAndSanitize(confirmationText);
+
+                if (data.url === 'lifecycleState/CHECKIN') {
+                    this.eventBusService.notify('CHECK_IN').subscribe(() => {
                         scope.isLoading = true;
                         component.changeLifecycleState(data.url, comment).then(onSuccess, onError);
                     });
-                }
-                else {
+                } else {
                     scope.isLoading = true;
                     component.changeLifecycleState(data.url, comment).then(onSuccess, onError);
                 }
             };
 
-            let onCancel = ():void => {
-                console.info('Cancel pressed');
-                scope.isLoading = false;
-            };
-
-            let modalTitle = this.sdcMenu.confirmationMessages[data.confirmationModal].title;
-            let modalMessage = this.sdcMenu.confirmationMessages[data.confirmationModal].message.format([component.componentType.toLowerCase()]);
-            let modalShowComment = this.sdcMenu.confirmationMessages[data.confirmationModal].showComment;
-            this.ModalsHandler.openConfirmationModal(modalTitle, modalMessage, modalShowComment).then(onOk, onCancel);
-
-        } else if (data.emailModal) {
-            // Show email dialog if defined in menu.json
-            //-------------------------------------------------
-            let onOk = (resource):void => {
-                if (data.url === "lifecycleState/certificationRequest") {
-                    this.eventBusService.notify("SUBMIT_FOR_TESTING").subscribe(() => {
-                        if (resource) {
-                            onSuccess(resource);
-                        } else {
-                            onError("Error changing life cycle state");
-                        }
-                    });
-                }
-                else {
-                    if (resource) {
-                        onSuccess(resource);
-                    } else {
-                        onError("Error changing life cycle state");
-                    }
-                }
-            };
-
-            let onCancel = ():void => {
-                scope.isLoading = false;
-            };
-
-            let emailModel:IEmailModalModel = <IEmailModalModel>{};
-            emailModel.email = <IEmailModalModel_Email>{};
-            emailModel.data = <IEmailModalModel_Data>{};
-            emailModel.title = this.$filter('translate')("EMAIL_MODAL_TITLE");
-            emailModel.email.to = getContacts(component);
-            emailModel.email.subject = this.$filter('translate')("EMAIL_MODAL_SUBJECT", "{'entityName': '" + this.$filter('resourceName')(component.name) + "','entityVersion': '" + component.version + "'}");
-            emailModel.email.message = '';
-            emailModel.data.component = component;
-            emailModel.data.stateUrl = data.url;
-
-            this.ModalsHandler.openEmailModal(emailModel).then(onOk, onCancel);
-
+            const modalTitle = this.sdcMenu.confirmationMessages[data.confirmationModal].title;
+            const modalMessage = this.sdcMenu.confirmationMessages[data.confirmationModal].message.format([component.componentType.toLowerCase()]);
+            const modalConfig = {
+                size: 'md',
+                title: modalTitle,
+                type: SdcUiCommon.ModalType.custom,
+                testId: 'confirm-modal',
+                buttons: [
+                    { id: 'OK', text: 'OK', callback: onOk, closeModal: false, testId: 'OK' },
+                    { id: 'cancel', text: 'Cancel', size: 'x-small', type: 'secondary', closeModal: true, testId: 'Cancel' }
+                ] as SdcUiCommon.IModalButtonComponent[]
+            } as SdcUiCommon.IModalConfig;
+            commentModalInstance = this.modalService.openCustomModal(modalConfig, CommentModalComponent, { message: modalMessage });
+            commentModalInstance.innerModalContent.instance.onValidationChange.subscribe((isValid) => {
+                commentModalInstance.getButtonById('OK').disabled = !isValid;
+            });
         } else {
             // Submit to server only (no modal is shown).
             scope.isLoading = true;
             component.changeLifecycleState(data.url, comment).then(onSuccess, onError);
         }
-
-    }
-
-    public changeLifecycleState = (component:Component, data:any, scope:any, onSuccessCallback?:Function, onErrorCallback?:Function):void => {
-
-        if (data.conformanceLevelModal) {
-            this.validateConformanceLevel(component, data, scope, onSuccessCallback, onErrorCallback);
-        } else {
-            this.actualChangeLifecycleState(component, data, scope, onSuccessCallback, onErrorCallback);
-        }
     }
 
-    private validateConformanceLevel = (component:Component, data:any, scope:any, onSuccessCallback?:Function, onErrorCallback?:Function):void => {
+    private validateConformanceLevel = (component: Component, data: any, scope: any, onSuccessCallback?: Function, onErrorCallback?: Function) => {
         // Validate conformance level if defined in menu.json
-        //-------------------------------------------------
-        this.ServiceServiceNg2.validateConformanceLevel(<Service>component).subscribe((res:boolean) => {
+        this.serviceServiceNg2.validateConformanceLevel(component as Service).subscribe((res: boolean) => {
             if (res === true) {
-                //conformance level is ok - continue
+                // Conformance level is ok - continue
                 this.actualChangeLifecycleState(component, data, scope, onSuccessCallback, onErrorCallback);
-
             } else {
-                //show warning modal
-                this.ModalsHandler.openConformanceLevelModal()
-                    .then(() => {
-                        //continue distribute
-                        this.actualChangeLifecycleState(component, data, scope, onSuccessCallback, onErrorCallback);
-
-                    }).catch(() => {
-                        //reject distribution
-                        this.actualChangeLifecycleState(component, data.conformanceLevelModal, scope, onSuccessCallback, onErrorCallback);
-                });
+                // Show warning modal
+                const onContinue: Function = () => {
+                    this.actualChangeLifecycleState(component, data, scope, onSuccessCallback, onErrorCallback);
+                };
+                const reject: Function = () => {
+                    this.actualChangeLifecycleState(component, data.conformanceLevelModal, scope, onSuccessCallback, onErrorCallback);
+                };
+                const continueButton = {testId: 'Continue', text: 'Continue', type: SdcUiCommon.ButtonType.primary, callback: onContinue, closeModal: true} as SdcUiComponents.ModalButtonComponent;
+                const rejectButton = {testId: 'Reject', text: 'Reject', type: SdcUiCommon.ButtonType.secondary, callback: reject, closeModal: true} as SdcUiComponents.ModalButtonComponent;
+                this.modalService.openInfoModal(this.$filter('translate')('CONFORMANCE_LEVEL_MODAL_TITLE'),
+                    this.$filter('translate')('CONFORMANCE_LEVEL_MODAL_TEXT'), 'conformance-modal', [continueButton, rejectButton]);
             }
         });
     }
diff --git a/catalog-ui/src/app/utils/common-utils.ts b/catalog-ui/src/app/utils/common-utils.ts
index 99f7c49a29..eadb92bd4f 100644
--- a/catalog-ui/src/app/utils/common-utils.ts
+++ b/catalog-ui/src/app/utils/common-utils.ts
@@ -19,11 +19,12 @@
  */
 
 import * as _ from "lodash";
-import {Module, AttributeModel, ResourceInstance, PropertyModel, InterfaceModel, OperationModel} from "../models";
+import {Module, AttributeModel, ResourceInstance, PropertyModel, InputFEModel, OperationModel} from "../models";
 import {ComponentInstanceFactory} from "./component-instance-factory";
 import {InputBEModel, PropertyBEModel, RelationshipModel} from "app/models";
 import { PolicyInstance } from "app/models/graph/zones/policy-instance";
 import { GroupInstance } from "../models/graph/zones/group-instance";
+import { InterfaceModel } from "../models/operation";
 
 export class CommonUtils {
 
@@ -167,7 +168,7 @@ export class CommonUtils {
 
         });
     }
-
+    
     static initInterfaceOperations(interfaces: Array<InterfaceModel>): Array<OperationModel> {
 
         return _.reduce(interfaces, (acc, interf: InterfaceModel) => {
@@ -194,5 +195,6 @@ export class CommonUtils {
 
         }, []);
     }
+
 }
 
diff --git a/catalog-ui/src/app/utils/component-factory.ts b/catalog-ui/src/app/utils/component-factory.ts
index 2b134bd2e7..889f6fb43b 100644
--- a/catalog-ui/src/app/utils/component-factory.ts
+++ b/catalog-ui/src/app/utils/component-factory.ts
@@ -21,7 +21,8 @@
 'use strict';
 import * as _ from "lodash";
 import {DEFAULT_ICON, ResourceType, ComponentType} from "./constants";
-import {ServiceService, CacheService, ResourceService} from "app/services";
+import {ServiceService, ResourceService} from "app/services";
+import {CacheService} from "app/services-ng2";
 import {IMainCategory, ISubCategory, ICsarComponent, Component, Resource, Service} from "app/models";
 import {ComponentMetadata} from "../models/component-metadata";
 import {ComponentServiceNg2} from "../ng2/services/component-services/component.service";
@@ -71,23 +72,23 @@ export class ComponentFactory {
         return newResource;
     };
 
-    public updateComponentFromCsar = (csarComponent:Resource, oldComponent:Resource):Component => {
-        _.pull(oldComponent.tags, oldComponent.name);
-        if (!oldComponent.isAlreadyCertified()) {
+    public updateComponentFromCsar = (csarComponent:Resource, oldComponent: Resource): Component => {
+          _.pull(oldComponent.tags, oldComponent.name);
+          if (!oldComponent.isAlreadyCertified()) {
             oldComponent.name = csarComponent.name;
             oldComponent.categories = csarComponent.categories;
             oldComponent.selectedCategory = csarComponent.selectedCategory;
         }
-        oldComponent.vendorName = csarComponent.vendorName;
-        oldComponent.vendorRelease = csarComponent.vendorRelease;
-        oldComponent.csarUUID = csarComponent.csarUUID;
-        oldComponent.csarPackageType = csarComponent.csarPackageType;
-        oldComponent.csarVersion = csarComponent.csarVersion;
-        oldComponent.packageId = csarComponent.packageId;
-        oldComponent.description = csarComponent.description;
-        oldComponent.filterTerm = oldComponent.name +  ' '  + oldComponent.description + ' ' + oldComponent.vendorName + ' ' + oldComponent.csarVersion
-        return oldComponent;
-    };
+          oldComponent.vendorName = csarComponent.vendorName;
+          oldComponent.vendorRelease = csarComponent.vendorRelease;
+          oldComponent.csarUUID = csarComponent.csarUUID;
+          oldComponent.csarPackageType = csarComponent.csarPackageType;
+          oldComponent.csarVersion = csarComponent.csarVersion;
+          oldComponent.packageId = csarComponent.packageId;
+          oldComponent.description = csarComponent.description;
+          oldComponent.filterTerm = oldComponent.name +  ' '  + oldComponent.description + ' ' + oldComponent.vendorName + ' ' + oldComponent.csarVersion;
+          return oldComponent;
+    }
 
     public createFromCsarComponent = (csar:ICsarComponent):Component => {
         let newResource:Resource = <Resource>this.createEmptyComponent(ComponentType.RESOURCE);
@@ -126,7 +127,7 @@ export class ComponentFactory {
         }
 
         // Fill the component with details from CSAR
-        newResource.selectedCategory = selectedCategory && selectedSubCategory ? selectedCategory.name + "_#_" + selectedSubCategory.name : '';
+
         newResource.categories = categories;
         newResource.vendorName = csar.vendorName;
         newResource.vendorRelease = csar.vendorRelease;
@@ -136,7 +137,8 @@ export class ComponentFactory {
         newResource.packageId = csar.packageId;
         newResource.description = csar.description;
         newResource.resourceType = csar.resourceType;
-        newResource.filterTerm = newResource.name +  ' '  + newResource.description + ' ' + newResource.vendorName + ' ' + newResource.csarVersion
+        newResource.selectedCategory = selectedCategory && selectedSubCategory ? selectedCategory.name + "_#_" + selectedSubCategory.name : '';
+        newResource.filterTerm = newResource.name +  ' '  + newResource.description + ' ' + newResource.vendorName + ' ' + newResource.csarVersion;
         return newResource;
     };
 
@@ -183,7 +185,7 @@ export class ComponentFactory {
         let deferred = this.$q.defer<Component>();
         let component = this.createEmptyComponent(componentType);
         component.setUniqueId(componentId);
-        this.ComponentServiceNg2.getComponentMetadata(component).subscribe((response:ComponentGenericResponse) => {
+        this.ComponentServiceNg2.getComponentMetadata(component.uniqueId, component.componentType).subscribe((response:ComponentGenericResponse) => {
             component.setComponentMetadata(response.metadata);
             deferred.resolve(component);
         });
diff --git a/catalog-ui/src/app/utils/component-instance-factory.ts b/catalog-ui/src/app/utils/component-instance-factory.ts
index 25916cc055..03abd96a77 100644
--- a/catalog-ui/src/app/utils/component-instance-factory.ts
+++ b/catalog-ui/src/app/utils/component-instance-factory.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.
@@ -21,14 +21,14 @@
  * Created by obarda on 3/7/2016.
  */
 'use strict';
-import {ComponentInstance, ServiceInstance, ResourceInstance, Component, ServiceProxyInstance} from "../models";
-import {ComponentType} from "app/utils";
-import {LeftPaletteComponent} from "../models/components/displayComponent";
+import { ComponentType } from 'app/utils';
+import { Component, ComponentInstance, ResourceInstance, ServiceInstance, ServiceProxyInstance } from '../models';
+import { LeftPaletteComponent } from '../models/components/displayComponent';
 
 export class ComponentInstanceFactory {
 
-    static createComponentInstance(componentInstance:ComponentInstance):ComponentInstance {
-        let newComponentInstance:ComponentInstance;
+    static createComponentInstance(componentInstance: ComponentInstance): ComponentInstance {
+        let newComponentInstance: ComponentInstance;
         switch (componentInstance.originType) {
             case ComponentType.SERVICE:
                 newComponentInstance = new ServiceInstance(componentInstance);
@@ -41,10 +41,10 @@ export class ComponentInstanceFactory {
                 break;
         }
         return newComponentInstance;
-    };
+    }
 
-    public createEmptyComponentInstance = (componentInstanceType?:string):ComponentInstance => {
-        let newComponentInstance:ComponentInstance;
+    static createEmptyComponentInstance = (componentInstanceType?: string): ComponentInstance => {
+        let newComponentInstance: ComponentInstance;
         switch (componentInstanceType) {
             case ComponentType.SERVICE:
                 newComponentInstance = new ServiceInstance();
@@ -57,25 +57,32 @@ export class ComponentInstanceFactory {
                 break;
         }
         return newComponentInstance;
-    };
+    }
 
-    public createComponentInstanceFromComponent = (component:LeftPaletteComponent):ComponentInstance => {
-        let newComponentInstance:ComponentInstance = this.createEmptyComponentInstance(component.componentType);
+    static createComponentInstanceFromComponent = (component: LeftPaletteComponent): ComponentInstance => {
+        const newComponentInstance: ComponentInstance = ComponentInstanceFactory.createEmptyComponentInstance(component.componentType);
         newComponentInstance.uniqueId = component.uniqueId + (new Date()).getTime();
         newComponentInstance.posX = 0;
         newComponentInstance.posY = 0;
         newComponentInstance.name = component.name;
         newComponentInstance.componentVersion = component.version;
-        newComponentInstance.originType = component.getComponentSubType();
-        if(component.getComponentSubType() === ComponentType.SERVICE){
-            newComponentInstance.originType = ComponentType.SERVICE_PROXY
-        }
-        //new component instance -> req. & cap. are added on successful instance creation
+        newComponentInstance.originType = getOriginType(component);
         newComponentInstance.requirements = component.requirements;
         newComponentInstance.capabilities = component.capabilities;
         newComponentInstance.icon = component.icon;
         newComponentInstance.componentUid = component.uniqueId;
         return newComponentInstance;
-    };
 
+        function getOriginType(component: LeftPaletteComponent): string  {
+            if (component.componentSubType) {
+                return component.componentSubType;
+            } else {
+                if (component.componentType === ComponentType.SERVICE) {
+                    return ComponentType.SERVICE_PROXY;
+                } else {
+                    return component.resourceType;
+                }
+            }
+        }
+    }
 }
diff --git a/catalog-ui/src/app/utils/constants.ts b/catalog-ui/src/app/utils/constants.ts
index 9d3bf104ee..e82322e0de 100644
--- a/catalog-ui/src/app/utils/constants.ts
+++ b/catalog-ui/src/app/utils/constants.ts
@@ -43,8 +43,20 @@ export class ComponentType {
 export class ServerTypeUrl {
     static RESOURCES = 'resources/';
     static SERVICES = 'services/';
+
+    public static toServerTypeUrl(componentType: ComponentType) : string {
+        if (componentType == ComponentType.SERVICE) {
+            return ServerTypeUrl.SERVICES.slice(0,-1);
+        } else if (componentType == ComponentType.RESOURCE) {
+            return ServerTypeUrl.RESOURCES.slice(0,-1);
+        } else {
+            return undefined;
+        }
+    }
 }
 
+
+
 export class ResourceType {
     static VF = 'VF';
     static VL = 'VL';
@@ -57,6 +69,11 @@ export class ResourceType {
     static CR = 'CR';
 }
 
+export class SdcElementType {
+    static GROUP = 'GROUP';
+    static POLICY = 'POLICY';
+    static SERVICE_PROXY = 'ServiceProxy'
+}
 export class ComponentState {
     static CERTIFICATION_IN_PROGRESS = 'CERTIFICATION_IN_PROGRESS';
     static CERTIFIED = 'CERTIFIED';
@@ -76,9 +93,15 @@ export class ArtifactGroupType {
     static DEPLOYMENT = "DEPLOYMENT";
     static INFORMATION = "INFORMATIONAL";
     static SERVICE_API = "SERVICE_API";
+    static TOSCA = "TOSCA";
 }
 
 export class ArtifactType {
+
+    static DEPLOYMENT = "DEPLOYMENT";
+    static INFORMATION = "INFORMATIONAL";
+    static SERVICE_API = "SERVICE_API";
+    static HEAT_ENV = "HEAT_ENV";
     static HEAT = "HEAT";
     static HEAT_VOL = "HEAT_VOL";
     static HEAT_NET = "HEAT_NET";
@@ -202,6 +225,7 @@ export class ServerErrors {
     static ERROR_TITLE = 'Error';
     static DEFAULT_ERROR = 'Error getting response from server';
     static MESSAGE_ERROR = 'Wrong error format from server';
+    static DOWNLOAD_ERROR = 'Download error';
 }
 
 export class GraphColors {
@@ -255,6 +279,8 @@ export class States {
     public static WORKSPACE_ACTIVITY_LOG = 'workspace.activity_log';
     public static WORKSPACE_DEPLOYMENT_ARTIFACTS = 'workspace.deployment_artifacts';
     public static WORKSPACE_PROPERTIES = 'workspace.properties';
+    public static WORKSPACE_SERVICE_INPUTS = 'workspace.service_inputs';
+    public static WORKSPACE_RESOURCE_INPUTS = 'workspace.resource_inputs';
     public static WORKSPACE_ATTRIBUTES = 'workspace.attributes';
     public static WORKSPACE_INFORMATION_ARTIFACTS = 'workspace.information_artifacts';
     public static WORKSPACE_TOSCA_ARTIFACTS = 'workspace.tosca_artifacts';
@@ -287,6 +313,7 @@ export class EVENTS {
     static SHOW_LOADER_EVENT = "showLoaderEvent";
     static HIDE_LOADER_EVENT = "hideLoaderEvent";
     static UPDATE_PANEL = 'updatePanel';
+    static ON_DISTRIBUTION_SUCCESS = 'onDistributionSuccess';
 }
 
 
@@ -312,6 +339,7 @@ export class GRAPH_EVENTS {
     static ON_PALETTE_COMPONENT_HOVER_OUT = 'onPaletteComponentHoverOut';
     static ON_PALETTE_COMPONENT_DRAG_START = 'onPaletteComponentDragStart';
     static ON_PALETTE_COMPONENT_DRAG_ACTION = 'onPaletteComponentDragAction';
+    static ON_PALETTE_COMPONENT_DROP = 'onPaletteComponentDrop';
     static ON_PALETTE_COMPONENT_SHOW_POPUP_PANEL = 'onPaletteComponentShowPopupPanel';
     static ON_PALETTE_COMPONENT_HIDE_POPUP_PANEL = 'onPaletteComponentHidePopupPanel';
     static ON_COMPONENT_INSTANCE_NAME_CHANGED = 'onComponentInstanceNameChanged';
@@ -329,6 +357,7 @@ export class GRAPH_EVENTS {
     static ON_CANVAS_TAG_END = 'onCanvasTagEnd';
     static ON_POLICY_INSTANCE_UPDATE = 'onPolicyInstanceUpdate';
     static ON_GROUP_INSTANCE_UPDATE = 'onGroupInstanceUpdate';
+    static ON_SERVICE_PATH_CREATED = 'onServicePathCreated';
 }
 
 export class DEPENDENCY_EVENTS {
@@ -349,6 +378,7 @@ export class COMPONENT_FIELDS {
     static COMPONENT_INFORMATIONAL_ARTIFACTS = "artifacts";
     static COMPONENT_PROPERTIES = "properties";
     static COMPONENT_CAPABILITIES = "capabilities";
+    static COMPONENT_CAPABILITIES_PROPERTIES = "instanceCapabiltyProperties";
     static COMPONENT_REQUIREMENTS = "requirements";
     static COMPONENT_TOSCA_ARTIFACTS = "toscaArtifacts";
     static COMPONENT_POLICIES = "policies";
@@ -357,6 +387,8 @@ export class COMPONENT_FIELDS {
     static COMPONENT_INSTANCES_INTERFACES = "componentInstancesInterfaces";
     static COMPONENT_NON_EXCLUDED_GROUPS = "nonExcludedGroups";
     static COMPONENT_NON_EXCLUDED_POLICIES = "nonExcludedPolicies";
+    static FORWARDING_PATHS = "forwardingPaths";
+    static SERVICE_API_ARTIFACT = "serviceApiArtifacts";
 }
 
 export class SERVICE_FIELDS {
diff --git a/catalog-ui/src/app/utils/menu-handler.ts b/catalog-ui/src/app/utils/menu-handler.ts
index eaef63fcc7..e17012a45e 100644
--- a/catalog-ui/src/app/utils/menu-handler.ts
+++ b/catalog-ui/src/app/utils/menu-handler.ts
@@ -40,7 +40,6 @@ export class MenuItem {
     alertModal:string;
     conformanceLevelModal: boolean; // Call validateConformanceLevel API and shows conformanceLevelModal if necessary, then continue with action or invokes another action
     confirmationModal:string;       // Open confirmation modal (user should select "OK" or "Cancel"), and continue with the action.
-    emailModal:string;              // Open email modal (user should fill email details), and continue with the action.
     url:string;                     // Data added to menu item, in case the function need to use it, example: for function "changeLifecycleState", I need to pass also the state "CHECKOUT" that I want the state to change to.
 
 
diff --git a/catalog-ui/src/app/utils/modals-handler.ts b/catalog-ui/src/app/utils/modals-handler.ts
index 903175f199..342f03f290 100644
--- a/catalog-ui/src/app/utils/modals-handler.ts
+++ b/catalog-ui/src/app/utils/modals-handler.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.
@@ -18,25 +18,13 @@
  * ============LICENSE_END=========================================================
  */
 
-import {PropertyModel, Component, ArtifactModel, Distribution, InputModel, DisplayModule, InputPropertyBase} from "../models";
-import {IEmailModalModel} from "../view-models/modals/email-modal/email-modal-view-model";
-import {IClientMessageModalModel} from "../view-models/modals/message-modal/message-client-modal/client-message-modal-view-model";
-import {IServerMessageModalModel} from "../view-models/modals/message-modal/message-server-modal/server-message-modal-view-model";
-import {IConfirmationModalModel} from "../view-models/modals/confirmation-modal/confirmation-modal-view-model";
-import {ModalType} from "./constants";
-import {AttributeModel} from "../models/attributes";
+import {  Component, DisplayModule , PropertyModel } from '../models';
+import { ComponentMetadata } from '../models/component-metadata';
 
 export interface IModalsHandler {
 
-
-    openDistributionStatusModal (distribution:Distribution, status:string, component:Component):ng.IPromise<any>;
-    openConfirmationModal (title:string, message:string, showComment:boolean, size?:string):ng.IPromise<any>;
-    openAlertModal (title:string, message:string, size?:string):ng.IPromise<any>;
-    openEmailModal(emailModel:IEmailModalModel):ng.IPromise<any>;
-    openServerMessageModal(data:IServerMessageModalModel):ng.IPromise<any>;
-    openClientMessageModal(data:IClientMessageModalModel):ng.IPromise<ng.ui.bootstrap.IModalServiceInstance>;
-    openArtifactModal(artifact:ArtifactModel, component:Component):ng.IPromise<any>;
-    openEditPropertyModal(property:PropertyModel, component:Component, filteredProperties:Array<PropertyModel>, isPropertyOwnValue:boolean, propertyOwnerType:string, propertyOwnerId:string):ng.IPromise<any>;
+    openEditPropertyModal(property: PropertyModel, component: Component, filteredProperties: PropertyModel[], isPropertyOwnValue: boolean,
+                          propertyOwnerType: string, propertyOwnerId: string): ng.IPromise<any>;
 }
 
 export class ModalsHandler implements IModalsHandler {
@@ -46,230 +34,27 @@ export class ModalsHandler implements IModalsHandler {
         '$q'
     ];
 
-    constructor(private $uibModal:ng.ui.bootstrap.IModalService,
-                private $q:ng.IQService) {
+    constructor(private $uibModal: ng.ui.bootstrap.IModalService,
+                private $q: ng.IQService) {
     }
 
-
-
-
-    openDistributionStatusModal = (distribution:Distribution, status:string, component:Component):ng.IPromise<any> => {
-        let deferred = this.$q.defer();
-        let modalOptions:ng.ui.bootstrap.IModalSettings = {
-            templateUrl: '../view-models/workspace/tabs/distribution/disribution-status-modal/disribution-status-modal-view.html',
-            controller: 'Sdc.ViewModels.DistributionStatusModalViewModel',
-            size: 'sdc-xl',
-            backdrop: 'static',
-            resolve: {
-                data: ():any => {
-                    return {
-                        'distribution': distribution,
-                        'status': status,
-                        'component': component
-                    };
-                }
-            }
-        };
-        let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions);
-        deferred.resolve(modalInstance.result);
-        return deferred.promise;
-    };
-
-
-    openAlertModal = (title:string, message:string, size?:string):ng.IPromise<any> => {
-        return this.openConfirmationModalBase(title, message, false, ModalType.ALERT, size);
-    };
-
-    openConfirmationModal = (title:string, message:string, showComment:boolean, size?:string):ng.IPromise<any> => {
-        return this.openConfirmationModalBase(title, message, showComment, ModalType.STANDARD, size);
-    };
-
-    private openConfirmationModalBase = (title:string, message:string, showComment:boolean, type:ModalType, size?:string):ng.IPromise<any> => {
-        let deferred = this.$q.defer();
-        let modalOptions:ng.ui.bootstrap.IModalSettings = {
-            templateUrl: '../view-models/modals/confirmation-modal/confirmation-modal-view.html',
-            controller: 'Sdc.ViewModels.ConfirmationModalViewModel',
-            size: size ? size : 'sdc-sm',
-            backdrop: 'static',
-            resolve: {
-                confirmationModalModel: ():IConfirmationModalModel => {
-                    let model:IConfirmationModalModel = {
-                        title: title,
-                        message: message,
-                        showComment: showComment,
-                        type: type
-                    };
-                    return model;
-                }
-            }
-        };
-
-        let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions);
-        deferred.resolve(modalInstance.result);
-        return deferred.promise;
-    };
-
-    openEmailModal = (emailModel:IEmailModalModel):ng.IPromise<any> => {
-
-        let deferred = this.$q.defer();
-        let modalOptions:ng.ui.bootstrap.IModalSettings = {
-            templateUrl: '../view-models/modals/email-modal/email-modal-view.html',
-            controller: 'Sdc.ViewModels.EmailModalViewModel',
-            size: 'sdc-sm',
-            backdrop: 'static',
-            resolve: {
-                emailModalModel: ():IEmailModalModel => {
-                    return emailModel;
-                }
-            }
-        };
-        let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions);
-        deferred.resolve(modalInstance.result);
-        return deferred.promise;
-
-    };
-
-    openServerMessageModal = (data:IServerMessageModalModel):ng.IPromise<any> => {
-        let deferred = this.$q.defer();
-        let modalOptions:ng.ui.bootstrap.IModalSettings = {
-            templateUrl: '../view-models/modals/message-modal/message-server-modal/server-message-modal-view.html',
-            controller: 'Sdc.ViewModels.ServerMessageModalViewModel',
-            size: 'sdc-sm',
-            backdrop: 'static',
-            resolve: {
-                serverMessageModalModel: ():IServerMessageModalModel => {
-                    return data;
-                }
-            }
-        };
-
-        let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions);
-        deferred.resolve(modalInstance.result);
-        return deferred.promise;
-    };
-
-    openClientMessageModal = (data:IClientMessageModalModel):ng.IPromise<any> => {
-        let deferred = this.$q.defer();
-        let modalOptions:ng.ui.bootstrap.IModalSettings = {
-            templateUrl: '../view-models/modals/message-modal/message-client-modal/client-message-modal-view.html',
-            controller: 'Sdc.ViewModels.ClientMessageModalViewModel',
-            size: 'sdc-sm',
-            backdrop: 'static',
-            resolve: {
-                clientMessageModalModel: ():IClientMessageModalModel => {
-                    return data;
-                }
-            }
-        };
-        let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions);
-        deferred.resolve(modalInstance);
-        return deferred.promise;
-    };
-
-    openOnboadrdingModal = (okButtonText:string, currentCsarUUID?:string, currentCsarVersion?:string):ng.IPromise<any> => {
-        let deferred = this.$q.defer();
-        let modalOptions:ng.ui.bootstrap.IModalSettings = {
-            templateUrl: '../view-models/modals/onboarding-modal/onboarding-modal-view.html',
-            controller: 'Sdc.ViewModels.OnboardingModalViewModel',
-            size: 'sdc-xl',
-            backdrop: 'static',
-            resolve: {
-                okButtonText: ():string=> {
-                    return okButtonText;
-                },
-                currentCsarUUID: ():string=> {
-                    return currentCsarUUID || null;
-                },
-                currentCsarVersion: ():string=> {
-                    return currentCsarVersion || null;
-                }
-            }
-        };
-        let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions);
-        deferred.resolve(modalInstance.result);
-        return deferred.promise;
-    };
-
-    openUpdateIconModal = (component: Component):ng.IPromise<any> => {
-        let deferred = this.$q.defer();
-        let modalOptions:ng.ui.bootstrap.IModalSettings = {
+    openUpdateIconModal = (component: Component): ng.IPromise<any> => {
+        const deferred = this.$q.defer();
+        const modalOptions: ng.ui.bootstrap.IModalSettings = {
             templateUrl: '../view-models/modals/icons-modal/icons-modal-view.html',
             controller: 'Sdc.ViewModels.IconsModalViewModel',
             size: 'sdc-auto',
             backdrop: 'static',
             resolve: {
-                component: ():Component => {
-                    return component;
-                }
-            }
-        };
-        let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions);
-        deferred.resolve(modalInstance.result);
-        return deferred.promise;
-    };
-
-    openEditEnvParametersModal = (artifactResource:ArtifactModel, component?:Component):ng.IPromise<any> => {
-        let deferred = this.$q.defer();
-        let modalOptions:ng.ui.bootstrap.IModalSettings = {
-            templateUrl: '../view-models/forms/env-parameters-form/env-parameters-form.html',
-            controller: 'Sdc.ViewModels.EnvParametersFormViewModel',
-            size: 'sdc-xl',
-            backdrop: 'static',
-            resolve: {
-                artifact: ():ArtifactModel => {
-                    return artifactResource;
-                },
-                component: ():Component => {
+                component: (): Component => {
                     return component;
                 }
             }
         };
-        let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions);
+        const modalInstance: ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions);
         deferred.resolve(modalInstance.result);
         return deferred.promise;
-    };
-
-    openEditInputValueModal = (input:InputModel):ng.IPromise<any> => {
-        let deferred = this.$q.defer();
-        let modalOptions:ng.ui.bootstrap.IModalSettings = {
-            templateUrl: '../view-models/forms/input-form/input-form-view.html',
-            controller: 'Sdc.ViewModels.InputFormViewModel',
-            size: 'sdc-md',
-            backdrop: 'static',
-            resolve: {
-                input: ():InputModel => {
-                    return input;
-                }
-            }
-        };
-        let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions);
-        deferred.resolve(modalInstance.result);
-        return deferred.promise;
-    };
-
-    openArtifactModal = (artifact:ArtifactModel, component:Component):ng.IPromise<any> => {
-        let deferred = this.$q.defer();
-        let modalOptions:ng.ui.bootstrap.IModalSettings = {
-            templateUrl: '../view-models/forms/artifact-form/artifact-form-view.html',
-            controller: 'Sdc.ViewModels.ArtifactResourceFormViewModel',
-            size: 'sdc-md',
-            backdrop: 'static',
-            keyboard: false,
-            resolve: {
-                artifact: ():ArtifactModel => {
-                    return artifact;
-                },
-                component: ():Component => {
-                    return component;
-                }
-            }
-        };
-
-        let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions);
-        deferred.resolve(modalInstance.result);
-        return deferred.promise;
-    };
-
+    }
 
     /**
      *
@@ -281,158 +66,113 @@ export class ModalsHandler implements IModalsHandler {
      * @param isPropertyValueOwner - boolean telling if the component is eligible of editing the property
      * @returns {IPromise<T>} - Promise telling if the modal has opened or not
      */
-    openEditPropertyModal = (property:PropertyModel, component:Component, filteredProperties:Array<PropertyModel>, isPropertyValueOwner:boolean, propertyOwnerType:string, propertyOwnerId:string):ng.IPromise<any> => {
-        let deferred = this.$q.defer();
+    openEditPropertyModal = (property: PropertyModel, component: Component | ComponentMetadata, filteredProperties: PropertyModel[],
+                             isPropertyValueOwner: boolean, propertyOwnerType: string, propertyOwnerId: string): ng.IPromise<any> => {
+        const deferred = this.$q.defer();
 
-        let modalOptions:ng.ui.bootstrap.IModalSettings = {
+        const modalOptions: ng.ui.bootstrap.IModalSettings = {
             templateUrl: '../view-models/forms/property-forms/component-property-form/property-form-view.html',
             controller: 'Sdc.ViewModels.PropertyFormViewModel',
             size: 'sdc-l',
             backdrop: 'static',
             keyboard: false,
             resolve: {
-                property: ():PropertyModel => {
+                property: (): PropertyModel => {
                     return property;
                 },
-                component: ():Component => {
-                    return <Component> component;
+                component: (): Component => {
+                    return component as Component;
                 },
-                filteredProperties: ():Array<PropertyModel> => {
+                filteredProperties: (): PropertyModel[] => {
                     return filteredProperties;
                 },
-                isPropertyValueOwner: ():boolean => {
+                isPropertyValueOwner: (): boolean => {
                     return isPropertyValueOwner;
                 },
-                propertyOwnerType: ():string => {
+                propertyOwnerType: (): string => {
                     return propertyOwnerType;
                 },
-                propertyOwnerId: ():string => {
+                propertyOwnerId: (): string => {
                     return propertyOwnerId;
                 }
             }
         };
 
-        let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions);
+        const modalInstance: ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions);
         deferred.resolve(modalInstance.result);
         return deferred.promise;
-    };
-
+    }
 
-    openEditModulePropertyModal = (property:PropertyModel, component:Component, selectedModule:DisplayModule, filteredProperties:Array<PropertyModel>):ng.IPromise<any> => {
-        let deferred = this.$q.defer();
+    /**
+     *
+     * This function openes up the edit property modal
+     *
+     * @param property - the property to edit
+     * @param filteredProperties - the filtered properties list to scroll between in the edit modal
+     * @param isPropertyValueOwner - boolean telling if the component is eligible of editing the property
+     * @returns {IPromise<T>} - Promise telling if the modal has opened or not
+     */
+    newOpenEditPropertyModal = (property: PropertyModel, filteredProperties: PropertyModel[], isPropertyValueOwner: boolean, propertyOwnerType: string, propertyOwnerId: string): ng.IPromise<any> => {
+        const deferred = this.$q.defer();
 
-        let modalOptions:ng.ui.bootstrap.IModalSettings = {
-            templateUrl: '../view-models/forms/property-forms/base-property-form/property-form-base-view.html',
-            controller: 'Sdc.ViewModels.ModulePropertyView',
+        const modalOptions: ng.ui.bootstrap.IModalSettings = {
+            templateUrl: '../view-models/forms/property-forms/component-property-form/property-form-view.html',
+            controller: 'Sdc.ViewModels.PropertyFormViewModel',
             size: 'sdc-l',
             backdrop: 'static',
             keyboard: false,
             resolve: {
-                originalProperty: ():PropertyModel => {
+                property: (): PropertyModel => {
                     return property;
                 },
-                component: ():Component => {
-                    return <Component> component;
+                filteredProperties: (): PropertyModel[] => {
+                    return filteredProperties;
                 },
-                selectedModule: ():DisplayModule => {
-                    return selectedModule;
+                isPropertyValueOwner: (): boolean => {
+                    return isPropertyValueOwner;
                 },
-                filteredProperties: ():Array<PropertyModel> => {
-                    return filteredProperties;
+                propertyOwnerType: (): string => {
+                    return propertyOwnerType;
+                },
+                propertyOwnerId: (): string => {
+                    return propertyOwnerId;
                 }
             }
         };
 
-        let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions);
+        const modalInstance: ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions);
         deferred.resolve(modalInstance.result);
         return deferred.promise;
-    };
+    }
 
-    openSelectDataTypeModal = (property:PropertyModel, component:Component, filteredProperties:Array<PropertyModel>, propertiesMap:Array<InputPropertyBase>):ng.IPromise<any> => {
-        let deferred = this.$q.defer();
+    openEditModulePropertyModal = (property: PropertyModel, component: Component, selectedModule: DisplayModule, filteredProperties: PropertyModel[]): ng.IPromise<any> => {
+        const deferred = this.$q.defer();
 
-        let modalOptions:ng.ui.bootstrap.IModalSettings = {
+        const modalOptions: ng.ui.bootstrap.IModalSettings = {
             templateUrl: '../view-models/forms/property-forms/base-property-form/property-form-base-view.html',
-            controller: 'Sdc.ViewModels.SelectDataTypeViewModel',
+            controller: 'Sdc.ViewModels.ModulePropertyView',
             size: 'sdc-l',
             backdrop: 'static',
             keyboard: false,
             resolve: {
-                originalProperty: ():PropertyModel => {
+                originalProperty: (): PropertyModel => {
                     return property;
                 },
-                component: ():Component => {
-                    return <Component> component;
-                },
-                filteredProperties: ():Array<PropertyModel> => {
-                    return filteredProperties;
+                component: (): Component => {
+                    return component as Component;
                 },
-                propertiesMap: ():Array<InputPropertyBase>=> {
-                    return propertiesMap;
-                }
-            }
-        };
-
-        let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions);
-        deferred.resolve(modalInstance.result);
-        return deferred.promise;
-    };
-
-    public openEditAttributeModal = (attribute:AttributeModel, component: Component):void => {
-
-        let modalOptions:ng.ui.bootstrap.IModalSettings = {
-            templateUrl: '../view-models/forms/attribute-form/attribute-form-view.html',
-            controller: 'Sdc.ViewModels.AttributeFormViewModel',
-            size: 'sdc-md',
-            backdrop: 'static',
-            keyboard: false,
-            resolve: {
-                attribute: ():AttributeModel => {
-                    return attribute;
+                selectedModule: (): DisplayModule => {
+                    return selectedModule;
                 },
-                component: ():Component => {
-                    return component;
-                }
-            }
-        };
-        this.$uibModal.open(modalOptions);
-    };
-
-    public openUpdateComponentInstanceNameModal = (currentComponent: Component):ng.IPromise<any> => {
-        let deferred = this.$q.defer();
-
-        let modalOptions:ng.ui.bootstrap.IModalSettings = {
-            templateUrl: '../view-models/forms/resource-instance-name-form/resource-instance-name-view.html',
-            controller: 'Sdc.ViewModels.ResourceInstanceNameViewModel',
-            size: 'sdc-sm',
-            backdrop: 'static',
-            resolve: {
-                component: ():Component => {
-                    return currentComponent;
+                filteredProperties: (): PropertyModel[] => {
+                    return filteredProperties;
                 }
             }
         };
 
-        let modalInstance:ng.ui.bootstrap.IModalServiceInstance =  this.$uibModal.open(modalOptions);
-        deferred.resolve(modalInstance.result);
-        return deferred.promise;
-    };
-
-    public openConformanceLevelModal = ():ng.IPromise<any> => {
-        let deferred = this.$q.defer();
-        let modalOptions:ng.ui.bootstrap.IModalSettings = {
-            templateUrl: '../view-models/modals/conformance-level-modal/conformance-level-modal-view.html',
-            controller: 'Sdc.ViewModels.ConformanceLevelModalViewModel',
-            size: 'sdc-sm',
-            backdrop: 'static',
-            resolve: {
-
-            }
-        };
-
-        let modalInstance:ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions);
+        const modalInstance: ng.ui.bootstrap.IModalServiceInstance = this.$uibModal.open(modalOptions);
         deferred.resolve(modalInstance.result);
         return deferred.promise;
-    };
+    }
 
 }
diff --git a/catalog-ui/src/app/utils/validation-utils.ts b/catalog-ui/src/app/utils/validation-utils.ts
index cd90ba7752..b7e43f79ba 100644
--- a/catalog-ui/src/app/utils/validation-utils.ts
+++ b/catalog-ui/src/app/utils/validation-utils.ts
@@ -97,25 +97,25 @@ export class ValidationUtils {
         }
     };
 
-    public getPropertyListPatterns():IMapRegex {
+    public static getPropertyListPatterns():IMapRegex {
         return {
-            integer: /^(0|[-+]?[1-9][0-9]*|[-+]?0x[0-9a-fA-F]+|[-+]?0o[0-7]+)(,?(0|[-+]?[1-9][0-9]*|[-+]?0x[0-9a-fA-F]+|[-+]?0o[0-7]+))*$/,
-            string: /^"[\u0000-\u0021\u0023-\u00BF]+"(\s*,?\s*"[\u0000-\u0021\u0023-\u00BF]+")*$/,
-            boolean: /^([Tt][Rr][Uu][Ee]|[Ff][Aa][Ll][Ss][Ee])(,?([Tt][Rr][Uu][Ee]|[Ff][Aa][Ll][Ss][Ee]))*$/,
-            float: /^[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?(,?[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?f?)*$/
+            integer: /^$|^(0|[-+]?[1-9][0-9]*|[-+]?0x[0-9a-fA-F]+|[-+]?0o[0-7]+)(,?(0|[-+]?[1-9][0-9]*|[-+]?0x[0-9a-fA-F]+|[-+]?0o[0-7]+))*$/,
+            string: /^$|^"[\u0000-\u0021\u0023-\u00BF]+"(\s*,?\s*"[\u0000-\u0021\u0023-\u00BF]+")*$/,
+            boolean: /^$|^([Tt][Rr][Uu][Ee]|[Ff][Aa][Ll][Ss][Ee])(,?([Tt][Rr][Uu][Ee]|[Ff][Aa][Ll][Ss][Ee]))*$/,
+            float: /^$|^[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?(,?[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?f?)*$/
         };
     }
 
-    public getPropertyMapPatterns():IMapRegex {
+    public static getPropertyMapPatterns():IMapRegex {
         return {
-            integer: /^"\w+"\s*:\s?(0|[-+]?[1-9][0-9]*|[-+]?0x[0-9a-fA-F]+|[-+]?0o[0-7]+)+(\s*,?\s*"\w+"\s?:\s?(0|[-+]?[1-9][0-9]*|[-+]?0x[0-9a-fA-F]+|[-+]?0o[0-7]+)+)*$/,
-            string: /^"\w+"\s?:\s?"[\u0000-\u0021\u0023-\u00BF]*"(\s*,?\s*"\w+"\s?:\s?"[\u0000-\u0021\u0023-\u00BF]*")*$/,
-            boolean: /^"\w+"\s?:\s?([Tt][Rr][Uu][Ee]|[Ff][Aa][Ll][Ss][Ee])(\s*,?\s*"\w+"\s?:\s?([Tt][Rr][Uu][Ee]|[Ff][Aa][Ll][Ss][Ee]))*$/,
-            float: /^"\w+"\s?:\s?[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?f?(\s*,?\s*"\w+"\s?:\s?[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?f?)*$/
+            integer: /^$|^"\w+"\s*:\s?(0|[-+]?[1-9][0-9]*|[-+]?0x[0-9a-fA-F]+|[-+]?0o[0-7]+)+(\s*,?\s*"\w+"\s?:\s?(0|[-+]?[1-9][0-9]*|[-+]?0x[0-9a-fA-F]+|[-+]?0o[0-7]+)+)*$/,
+            string: /^$|^"\w+"\s?:\s?"[\u0000-\u0021\u0023-\u00BF]*"(\s*,?\s*"\w+"\s?:\s?"[\u0000-\u0021\u0023-\u00BF]*")*$/,
+            boolean: /^$|^"\w+"\s?:\s?([Tt][Rr][Uu][Ee]|[Ff][Aa][Ll][Ss][Ee])(\s*,?\s*"\w+"\s?:\s?([Tt][Rr][Uu][Ee]|[Ff][Aa][Ll][Ss][Ee]))*$/,
+            float: /^$|^"\w+"\s?:\s?[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?f?(\s*,?\s*"\w+"\s?:\s?[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?f?)*$/
         };
     }
 
-    public validateUniqueKeys(viewValue:string):boolean {
+    public static validateUniqueKeys(viewValue: string): boolean {
         if (!viewValue) {
             return true; //allow empty value
         }