Merge "[SDC] code rebase for sdc resync to LF"

21 files changed, 150 insertions, 135 deletions

diff --git a/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view-model.ts b/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view-model.ts
index 37b9b9db9c..f77a29b003 100644
--- a/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view-model.ts
+++ b/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view-model.ts
@@ -22,6 +22,7 @@
 import {IUserProperties} from "app/models";
 import {MenuItemGroup, MenuItem} from "app/utils";
 import {CacheService} from "app/services";
+declare var PunchOutRegistry;
 
 export class BreadcrumbsMenuItem {
     key:string;
@@ -48,7 +49,7 @@ export interface IOnboardVendorViewModelScope extends ng.IScope {
     topNavRootMenu:MenuItemGroup;
     user:IUserProperties;
     version:string;
-    isLoading: boolean;
+    isLoading:boolean;
 }
 
 export class OnboardVendorViewModel {
@@ -66,10 +67,13 @@ export class OnboardVendorViewModel {
 
         this.$scope.isLoading = true;
 
-        $.getScript("/onboarding/punch-outs_en.js", () => {
+        PunchOutRegistry.loadOnBoarding(()=> {
             this.$scope.isLoading = false;
         });
+        this.initScope();
 
+    }
+    private initScope = ():void => {
         this.$scope.vendorData = {
             breadcrumbs: {
                 selectedKeys: []
@@ -89,6 +93,7 @@ export class OnboardVendorViewModel {
         this.$scope.topNavMenuModel = [];
 
         this.$scope.user = this.cacheService.get('user');
+
     }
 
     updateBreadcrumbsPath = (selectedKeys:Array<string>):ng.IPromise<boolean> => {
@@ -140,6 +145,7 @@ export class OnboardVendorViewModel {
             let topNavRootMenu = topNavMenuModel[0];
             let onboardItem = topNavRootMenu.menuItems[topNavRootMenu.selectedIndex];
             let originalCallback = onboardItem.callback;
+            //noinspection TypeScriptValidateTypes
             onboardItem.callback = (...args) => {
                 let ret = this.updateBreadcrumbsPath([]);
                 return originalCallback && originalCallback.apply(undefined, args) || ret;
diff --git a/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view.html b/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view.html
index 56a36863e1..eec7c4758d 100644
--- a/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view.html
+++ b/catalog-ui/src/app/view-models/onboard-vendor/onboard-vendor-view.html
@@ -1,6 +1,6 @@
 <div class="sdc-catalog-container">
 
-    <loader ng-init="isLoading=true" data-display="isLoading"></loader>
+    <loader data-display="isLoading"></loader>
     <div class="w-sdc-main-container">
         <punch-out name="'onboarding/vendor'" data="vendorData"  user="user" on-event="onVendorEvent"></punch-out>
     </div>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.ts b/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.ts
index f4ce1d8bc4..5d22d65f52 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/activity-log/activity-log.ts
@@ -54,7 +54,6 @@ export class ActivityLogViewModel {
         this.initScope();
         this.$scope.setValidState(true);
         this.initSortedTableScope();
-        this.$scope.updateSelectedMenuItem();
 
         // Set default sorting
         this.$scope.sortBy = 'logDate';
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes-view-model.ts
index ce7296cf04..312a663e8f 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/attributes/attributes-view-model.ts
@@ -53,7 +53,6 @@ export class AttributesViewModel {
                 private ComponentServiceNg2: ComponentServiceNg2) {
 
         this.initComponentAttributes();
-        this.$scope.updateSelectedMenuItem();
     }
 
     private initComponentAttributes = () => {
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view-model.ts
index 0e5a5fcd6c..4b9dd6fc00 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition-view-model.ts
@@ -47,6 +47,7 @@ export interface ICompositionViewModelScope extends IWorkspaceViewModelScope {
     onBackgroundClick():void;
     setSelectedInstance(componentInstance:ComponentInstance):void;
     printScreen():void;
+    isPNF():boolean;
 
     cacheComponentsInstancesFullData:Component;
 }
@@ -90,7 +91,6 @@ export class CompositionViewModel {
         this.$scope.setValidState(true);
         this.initScope();
         this.initGraphData();
-        this.$scope.updateSelectedMenuItem();
         this.registerGraphEvents(this.$scope);
     }
 
@@ -242,7 +242,10 @@ export class CompositionViewModel {
             this.$scope.setComponent(this.$scope.currentComponent);
             this.$scope.updateSelectedComponent();
         };
-        
+
+        this.$scope.isPNF = (): boolean => {
+            return this.$scope.selectedComponent.isResource() && (<Resource>this.$scope.selectedComponent).resourceType === ResourceType.PNF;
+        };
 
         this.eventListenerService.registerObserverCallback(EVENTS.ON_CHECKOUT, this.$scope.reload);
 
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model.ts
index c4c63fae06..f0c8b1d86b 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/tabs/artifacts/artifacts-view-model.ts
@@ -249,7 +249,6 @@ export class ResourceArtifactsViewModel {
 
         this.$scope.isLoading = false;
         this.$scope.artifactType = this.artifactsUtils.getArtifactTypeByState(this.$state.current.name);
-        this.loadArtifacts();
         this.$scope.getTitle = ():string => {
             return this.artifactsUtils.getTitle(this.$scope.artifactType, this.$scope.currentComponent);
         };
@@ -335,5 +334,7 @@ export class ResourceArtifactsViewModel {
             this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_NODE_SELECTED, this.loadArtifacts);
             this.eventListenerService.unRegisterObserver(GRAPH_EVENTS.ON_GRAPH_BACKGROUND_CLICKED, this.loadArtifacts);
         });
+
+        this.loadArtifacts();
     }
 }
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view-model.ts
index 6990ad7241..86bc478048 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/deployment-artifacts/deployment-artifacts-view-model.ts
@@ -74,7 +74,6 @@ export class DeploymentArtifactsViewModel {
                 private ModalsHandler:ModalsHandler,
                 private ComponentServiceNg2: ComponentServiceNg2) {
         this.initScope();
-        this.$scope.updateSelectedMenuItem();
     }
 
     private initDescriptions = ():void => {
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/deployment/deployment-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/deployment/deployment-view-model.ts
index 76be6c1141..feda7fe17f 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/deployment/deployment-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/deployment/deployment-view-model.ts
@@ -86,7 +86,6 @@ export class DeploymentViewModel {
         this.$scope.setValidState(true);
         this.initScope();
         this.initGraphData();
-        this.$scope.updateSelectedMenuItem();
     }
 
 
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/distribution/distribution-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/distribution/distribution-view-model.ts
index 1852b6a83e..663361cd85 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/distribution/distribution-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/distribution/distribution-view-model.ts
@@ -48,7 +48,6 @@ export class DistributionViewModel {
                 private ModalsHandler:ModalsHandler) {
         this.initScope();
         this.$scope.setValidState(true);
-        this.$scope.updateSelectedMenuItem();
     }
 
     private initScope = ():void => {
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 1dc326a7c0..98539d6a3b 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
@@ -118,7 +118,6 @@ export class GeneralViewModel {
         this.initScopeValidation();
         this.initScopeMethods();
         this.initScope();
-        this.$scope.updateSelectedMenuItem();
     }
 
 
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts-view-model.ts
index ceaba3c187..b2fd4d68c0 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/information-artifacts/information-artifacts-view-model.ts
@@ -65,7 +65,6 @@ export class InformationArtifactsViewModel {
                 private ModalsHandler:ModalsHandler,
                 private ComponentServiceNg2: ComponentServiceNg2) {
         this.initInformationalArtifacts();
-        this.$scope.updateSelectedMenuItem();
     }
 
     private initInformationalArtifacts = ():void => {
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view-model.ts
index 78865ac873..2e871a5f8d 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/inputs/resource-input/resource-inputs-view-model.ts
@@ -45,7 +45,6 @@ export class ResourceInputsViewModel {
 
     constructor(private $scope:IInputsViewModelScope, private $q:ng.IQService, private ModalsHandler:ModalsHandler) {
         this.initScope();
-        this.$scope.updateSelectedMenuItem();
     }
 
     private initScope = ():void => {
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/inputs/service-input/service-inputs-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/inputs/service-input/service-inputs-view-model.ts
index 013a0023f9..00f3347b74 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/inputs/service-input/service-inputs-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/inputs/service-input/service-inputs-view-model.ts
@@ -62,7 +62,6 @@ export class ServiceInputsViewModel {
                 private ModalsHandler:ModalsHandler,
                 private DataTypesService:DataTypesService) {
         this.initScope();
-        this.$scope.updateSelectedMenuItem();
         this.$scope.isViewOnly = this.$scope.isViewMode();
     }
 
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/management-workflow/management-workflow-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/management-workflow/management-workflow-view-model.ts
index f8b29c4a9c..e44ed12c2a 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/management-workflow/management-workflow-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/management-workflow/management-workflow-view-model.ts
@@ -18,130 +18,137 @@
  * ============LICENSE_END=========================================================
  */
 
-    'use strict';
-    import {ArtifactType} from "app/utils";
-    import {ArtifactGroupModel} from "app/models";
-    import {participant} from "app/view-models/workspace/tabs/network-call-flow/network-call-flow-view-model";
-    import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model";
-    import {ComponentGenericResponse} from "../../../../ng2/services/responses/component-generic-response";
-    import {ComponentServiceNg2} from "../../../../ng2/services/component-services/component.service";
+'use strict';
+import {ArtifactType} from "app/utils";
+import {ArtifactGroupModel} from "app/models";
+import {participant} from "app/view-models/workspace/tabs/network-call-flow/network-call-flow-view-model";
+import {IWorkspaceViewModelScope} from "app/view-models/workspace/workspace-view-model";
+import {ComponentGenericResponse} from "../../../../ng2/services/responses/component-generic-response";
+import {ComponentServiceNg2} from "../../../../ng2/services/component-services/component.service";
+declare var PunchOutRegistry;
 
-    export interface IManagementWorkflowViewModelScope extends IWorkspaceViewModelScope {
-        vendorModel:VendorModel;
-    }
+export interface IManagementWorkflowViewModelScope extends IWorkspaceViewModelScope {
+    vendorModel:VendorModel;
+    isLoading: boolean;
+}
 
-    export class VendorModel {
-        artifacts: ArtifactGroupModel;
-        serviceID: string;
-        readonly: boolean;
-        sessionID: string;
-        requestID: string;
-        diagramType: string;
-        participants:Array<participant>;
+export class VendorModel {
+    artifacts:ArtifactGroupModel;
+    serviceID:string;
+    readonly:boolean;
+    sessionID:string;
+    requestID:string;
+    diagramType:string;
+    participants:Array<participant>;
 
-        constructor(artifacts: ArtifactGroupModel, serviceID:string, readonly:boolean, sessionID:string,
-                    requestID:string, diagramType:string, participants:Array<participant>){
-            this.artifacts = artifacts;
-            this.serviceID = serviceID;
-            this.readonly = readonly;
-            this.sessionID = sessionID;
-            this.requestID = requestID;
-            this.diagramType = diagramType;
-            this.participants = participants;
-        }
+    constructor(artifacts:ArtifactGroupModel, serviceID:string, readonly:boolean, sessionID:string,
+                requestID:string, diagramType:string, participants:Array<participant>) {
+        this.artifacts = artifacts;
+        this.serviceID = serviceID;
+        this.readonly = readonly;
+        this.sessionID = sessionID;
+        this.requestID = requestID;
+        this.diagramType = diagramType;
+        this.participants = participants;
     }
+}
+
+export class ManagementWorkflowViewModel {
 
-    export class ManagementWorkflowViewModel {
+    static '$inject' = [
+        '$scope',
+        'uuid4',
+        'ComponentServiceNg2'
+    ];
 
-        static '$inject' = [
-            '$scope',
-            'uuid4',
-            'ComponentServiceNg2'
-        ];
+    constructor(private $scope:IManagementWorkflowViewModelScope,
+                private uuid4:any,
+                private ComponentServiceNg2:ComponentServiceNg2) {
 
-        constructor(private $scope:IManagementWorkflowViewModelScope,
-                    private uuid4:any,
-                    private ComponentServiceNg2: ComponentServiceNg2) {
+        this.$scope.isLoading = true;
 
+        PunchOutRegistry.loadOnBoarding(()=> {
+            this.$scope.isLoading = false;
             this.initInformationalArtifacts();
-            this.$scope.updateSelectedMenuItem();
-        }
+        });
+    }
 
 
-        private initInformationalArtifacts = ():void => {
-            if(!this.$scope.component.artifacts) {
-                this.$scope.isLoading = true;
-                this.ComponentServiceNg2.getComponentInformationalArtifacts(this.$scope.component).subscribe((response:ComponentGenericResponse) => {
-                    this.$scope.component.artifacts = response.artifacts;
-                    this.initScope();
-                    this.$scope.isLoading = false;
-                });
-            } else {
+    private initInformationalArtifacts = ():void => {
+        if (!this.$scope.component.artifacts) {
+            this.$scope.isLoading = true;
+            this.ComponentServiceNg2.getComponentInformationalArtifacts(this.$scope.component).subscribe((response:ComponentGenericResponse) => {
+                this.$scope.component.artifacts = response.artifacts;
                 this.initScope();
-            }
+                this.$scope.isLoading = false;
+            });
+        } else {
+            this.initScope();
         }
+    }
 
-        private static getParticipants():Array<participant> {
-            return [
-                {
-                    "id": "1",
-                    "name": "Customer"},
-                {
-                    "id": "2",
-                    "name": "CCD"
-                },
-                {
-                    "id": "3",
-                    "name": "Infrastructure"
-                },
-                {
-                    "id": "4",
-                    "name": "MSO"
-                },
-                {
-                    "id": "5",
-                    "name": "SDN-C"
-                },
-                {
-                    "id": "6",
-                    "name": "A&AI"
-                },
-                {
-                    "id": "7",
-                    "name": "APP-C"
-                },
-                {
-                    "id": "8",
-                    "name": "Cloud"
-                },
-                {
-                    "id": "9",
-                    "name": "DCAE"
-                },
-                {
-                    "id": "10",
-                    "name": "ALTS"
-                },
-                {
-                    "id": "11",
-                    "name": "VF"
-                }
-            ]
-        }
+    private static getParticipants():Array<participant> {
+        return [
+            {
+                "id": "1",
+                "name": "Customer"
+            },
+            {
+                "id": "2",
+                "name": "CCD"
+            },
+            {
+                "id": "3",
+                "name": "Infrastructure"
+            },
+            {
+                "id": "4",
+                "name": "MSO"
+            },
+            {
+                "id": "5",
+                "name": "SDN-C"
+            },
+            {
+                "id": "6",
+                "name": "A&AI"
+            },
+            {
+                "id": "7",
+                "name": "APP-C"
+            },
+            {
+                "id": "8",
+                "name": "Cloud"
+            },
+            {
+                "id": "9",
+                "name": "DCAE"
+            },
+            {
+                "id": "10",
+                "name": "ALTS"
+            },
+            {
+                "id": "11",
+                "name": "VF"
+            }
+        ]
+    }
 
 
-        private initScope():void {
-            this.$scope.vendorModel = new VendorModel(
-                this.$scope.component.artifacts.filteredByType(ArtifactType.THIRD_PARTY_RESERVED_TYPES.WORKFLOW),
-                this.$scope.component.uniqueId,
-                this.$scope.isViewMode(),
-                this.$scope.user.userId,
-                this.uuid4.generate(),
-                ArtifactType.THIRD_PARTY_RESERVED_TYPES.WORKFLOW,
-                ManagementWorkflowViewModel.getParticipants()
-            );
+    private initScope():void {
+        this.$scope.vendorModel = new VendorModel(
+            this.$scope.component.artifacts.filteredByType(ArtifactType.THIRD_PARTY_RESERVED_TYPES.WORKFLOW),
+            this.$scope.component.uniqueId,
+            this.$scope.isViewMode(),
+            this.$scope.user.userId,
+            this.uuid4.generate(),
+            ArtifactType.THIRD_PARTY_RESERVED_TYPES.WORKFLOW,
+            ManagementWorkflowViewModel.getParticipants()
+        );
 
-            this.$scope.thirdParty = true;
-            this.$scope.setValidState(true);
-        }
+        this.$scope.thirdParty = true;
+        this.$scope.setValidState(true);
     }
+}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/management-workflow/management-workflow-view.html b/catalog-ui/src/app/view-models/workspace/tabs/management-workflow/management-workflow-view.html
index bd196daec8..df570ccdca 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/management-workflow/management-workflow-view.html
+++ b/catalog-ui/src/app/view-models/workspace/tabs/management-workflow/management-workflow-view.html
@@ -1,3 +1,4 @@
-<div class="workspace-management-workflow">
-    <punch-out name="'sequence-diagram'" data="vendorModel"  user="user" on-event="onVendorEvent"></punch-out>
+<loader data-display="isLoading"></loader>
+<div class="workspace-management-workflow" ng-if="vendorModel">
+    <punch-out  name="'sequence-diagram'" data="vendorModel"  user="user" on-event="onVendorEvent"></punch-out>
 </div>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/network-call-flow/network-call-flow-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/network-call-flow/network-call-flow-view-model.ts
index 6c7666d28c..488e4c774d 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/network-call-flow/network-call-flow-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/network-call-flow/network-call-flow-view-model.ts
@@ -25,9 +25,11 @@ import {ResourceType, ArtifactType} from "app/utils";
 import {ComponentInstance} from "app/models";
 import {ComponentGenericResponse} from "../../../../ng2/services/responses/component-generic-response";
 import {ComponentServiceNg2} from "../../../../ng2/services/component-services/component.service";
+declare var PunchOutRegistry;
 
 export interface INetworkCallFlowViewModelScope extends IWorkspaceViewModelScope {
     vendorMessageModel:VendorModel;
+    isLoading: boolean;
 }
 
 export class participant {
@@ -53,8 +55,12 @@ export class NetworkCallFlowViewModel {
                 private uuid4:any,
                 private ComponentServiceNg2: ComponentServiceNg2) {
 
-        this.initComponentInstancesAndInformationalArtifacts();
-        this.$scope.updateSelectedMenuItem();
+        this.$scope.isLoading = true;
+
+        PunchOutRegistry.loadOnBoarding(()=> {
+            this.$scope.isLoading = false;
+            this.initComponentInstancesAndInformationalArtifacts();
+        });
     }
 
     private getVFParticipantsFromInstances(instances:Array<ComponentInstance>):Array<participant> {
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/network-call-flow/network-call-flow-view.html b/catalog-ui/src/app/view-models/workspace/tabs/network-call-flow/network-call-flow-view.html
index 6ce3e8e2b7..bc2d0643e0 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/network-call-flow/network-call-flow-view.html
+++ b/catalog-ui/src/app/view-models/workspace/tabs/network-call-flow/network-call-flow-view.html
@@ -1,3 +1,4 @@
-<div class="workspace-network-call-flow">
+<loader data-display="isLoading"></loader>
+<div ng-if="vendorMessageModel" class="workspace-network-call-flow">
     <punch-out name="'sequence-diagram'" data="vendorMessageModel"  user="user" on-event="onVendorEvent"></punch-out>
 </div>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view-model.ts
index c9f2d0725f..3c9c7e9e4b 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/properties/properties-view-model.ts
@@ -52,7 +52,6 @@ export class PropertiesViewModel {
                 private ModalsHandler:ModalsHandler,
                 private ComponentServiceNg2:ComponentServiceNg2) {
         this.initComponentProperties();
-        this.$scope.updateSelectedMenuItem();
     }
 
     private initComponentProperties = ():void => {
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-view-model.ts
index c02900a413..b6cbf65cf0 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/req-and-capabilities/req-and-capabilities-view-model.ts
@@ -67,7 +67,6 @@ export class ReqAndCapabilitiesViewModel {
                 private ComponentServiceNg2: ComponentServiceNg2) {
 
         this.initCapabilitiesAndRequirements();
-        this.$scope.updateSelectedMenuItem();
     }
 
     private initCapabilitiesAndRequirements = (): void => {
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts-view-model.ts
index 5f724c48fd..77b5ab74eb 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/tosca-artifacts/tosca-artifacts-view-model.ts
@@ -50,7 +50,6 @@ export class ToscaArtifactsViewModel {
                 private $filter:ng.IFilterService,
                 private ComponentServiceNg2:ComponentServiceNg2) {
         this.initToscaArtifacts();
-        this.$scope.updateSelectedMenuItem();
     }
 
     private initToscaArtifacts = (): void => {
diff --git a/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts b/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts
index f529e79fa7..97a58402de 100644
--- a/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/workspace-view-model.ts
@@ -87,7 +87,7 @@ export interface IWorkspaceViewModelScope extends ng.IScope {
     getLatestVersion():void;
     getStatus():string;
     showLifecycleIcon():boolean;
-    updateSelectedMenuItem():void;
+    updateSelectedMenuItem(state:string):void;
     uploadFileChangedInGeneralTab():void;
     updateMenuComponentName(ComponentName:string):void;
     getTabTitle():string;
@@ -136,6 +136,7 @@ export class WorkspaceViewModel {
 
         this.initScope();
         this.initAfterScope();
+        this.$scope.updateSelectedMenuItem(this.$state.current.name);
     }
 
     private role:string;
@@ -216,6 +217,7 @@ export class WorkspaceViewModel {
         this.$scope.onMenuItemPressed = (state:string):ng.IPromise<boolean> => {
             let deferred = this.$q.defer();
             let goToState = ():void => {
+                this.$scope.updateSelectedMenuItem(state);
                 this.$state.go(state, {
                     id: this.$scope.component.uniqueId,
                     type: this.$scope.component.componentType.toLowerCase(),
@@ -613,9 +615,9 @@ export class WorkspaceViewModel {
             return result;
         };
 
-        this.$scope.updateSelectedMenuItem = ():void => {
+        this.$scope.updateSelectedMenuItem = (state:string):void => {
             let selectedItem:MenuItem = _.find(this.$scope.leftBarTabs.menuItems, (item:MenuItem) => {
-                return item.state === this.$state.current.name;
+                return item.state === state;
             });
             this.$scope.leftBarTabs.selectedIndex = selectedItem ? this.$scope.leftBarTabs.menuItems.indexOf(selectedItem) : 0;
         };