Developed disable navigation mechanism

Added a mechanism to disable and enable the navigation when waiting for a response from a plugin

Change-Id: I11cba9a7fc2a32e3d3d32fb9cf9f0590900fe73b
Issue-ID: SDC-1277
Signed-off-by: Idan Amit <ia096e@intl.att.com>

7 files changed, 61 insertions, 7 deletions

diff --git a/catalog-ui/src/app/models/base-pubsub.ts b/catalog-ui/src/app/models/base-pubsub.ts
index b9ff788a57..c4b109f1d5 100644
--- a/catalog-ui/src/app/models/base-pubsub.ts
+++ b/catalog-ui/src/app/models/base-pubsub.ts
@@ -97,6 +97,12 @@ export class BasePubSub {
         }
     }
 
+    public isWaitingForEvent(eventName: string) : boolean {
+        return Array.from(this.eventsToWait.values()).some((eventsList: Array<string>) =>
+            eventsList.indexOf(eventName) !== -1
+        );
+    }
+
     protected onMessage(event: any) {
         if (this.subscribers.has(event.data.originId)) {
             this.eventsCallbacks.forEach((callback: Function) => {
diff --git a/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.less b/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.less
index 4234987072..d2d4c98cb4 100644
--- a/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.less
@@ -4,5 +4,9 @@
         width: 100%;
         height: 100%;
         border: none;
+        top: 3px;
+        left: 2px;
+        position: relative;
+        z-index: 1030
     }
 }
diff --git a/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.ts b/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.ts
index 4759721034..83d302b2a8 100644
--- a/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.ts
+++ b/catalog-ui/src/app/ng2/components/ui/plugin/plugin-frame.component.ts
@@ -1,4 +1,4 @@
-import {Component, Inject, Input, Output, OnInit, EventEmitter, ViewChild, ElementRef} from "@angular/core";
+import {Component, Inject, Input, Output, OnInit, EventEmitter} from "@angular/core";
 import {URLSearchParams} from '@angular/http';
 import {Plugin} from "app/models";
 import {EventBusService} from "../../../services/event-bus.service";
@@ -63,7 +63,6 @@ export class PluginFrameComponent implements OnInit {
 
                     this.eventBusService.notify("WINDOW_OUT").subscribe(() => {
                         this.isClosed = true;
-
                         this.eventBusService.unregister(this.plugin.pluginId);
 
                         this.$state.go(toState.name, toParams);
diff --git a/catalog-ui/src/app/ng2/services/event-bus.service.ts b/catalog-ui/src/app/ng2/services/event-bus.service.ts
index 438437d193..cff18e1db3 100644
--- a/catalog-ui/src/app/ng2/services/event-bus.service.ts
+++ b/catalog-ui/src/app/ng2/services/event-bus.service.ts
@@ -49,4 +49,48 @@ export class EventBusService extends BasePubSub {
             this.handlePluginRegistration(event.data, event);
         }
     }
+
+    public disableNavigation(isDisable: boolean) {
+        if (isDisable) {
+            let disableDiv = document.createElement('div');
+            disableDiv.style.cssText = "position: fixed;\n" +
+                "z-index: 1029;\n" +
+                "background: rgba(0,0,0,0.5);\n" +
+                "width: 100%;\n" +
+                "height: 100%;\n" +
+                "top: 0;\n" +
+                "left: 0;";
+            disableDiv.setAttribute("class", "disable-navigation-div");
+            document.body.appendChild(disableDiv);
+        }
+        else {
+            document.getElementsByClassName("disable-navigation-div")[0].remove();
+        }
+    }
+
+    public notify(eventType:string, eventData?:any, disableOnWaiting:boolean=true) {
+        let doDisable = false;
+
+        if (disableOnWaiting) {
+            doDisable = this.isWaitingForEvent(eventType);
+
+            if (doDisable) {
+                this.disableNavigation(true);
+            }
+        }
+
+        const origSubscribe = super.notify(eventType, eventData).subscribe;
+
+        return {
+            subscribe: function (callbackFn) {
+                origSubscribe(() => {
+                    if (doDisable) {
+                        this.disableNavigation(false);
+                    }
+
+                    callbackFn();
+                });
+            }.bind(this)
+        };
+    }
 }
diff --git a/catalog-ui/src/app/ng2/services/plugins.service.ts b/catalog-ui/src/app/ng2/services/plugins.service.ts
index 4ec90d1ac4..7a85b6e1b6 100644
--- a/catalog-ui/src/app/ng2/services/plugins.service.ts
+++ b/catalog-ui/src/app/ng2/services/plugins.service.ts
@@ -19,5 +19,5 @@ export class PluginsService {
         return plugin.pluginDisplayOptions["context"] &&
                plugin.pluginDisplayOptions["context"].displayRoles.includes(userRole) &&
                plugin.pluginDisplayOptions["context"].displayContext.indexOf(contextType) !== -1
-    }
+    };
 }
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 3797707046..9abd7139b7 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
@@ -276,7 +276,6 @@ export class WorkspaceViewModel {
                     return versionObj.versionId === this.$scope.component.uniqueId;
                 });
             }
-            this.$scope.isLoading = true;
 
             let eventData = {
                 uuid: this.$scope.component.uuid,
@@ -284,6 +283,8 @@ export class WorkspaceViewModel {
             };
 
             this.eventBusService.notify("VERSION_CHANGED", eventData).subscribe(() => {
+                this.$scope.isLoading = true;
+
                 this.$state.go(this.$state.current.name, {
                     id: selectedId,
                     type: this.$scope.componentType.toLowerCase(),
@@ -461,7 +462,7 @@ export class WorkspaceViewModel {
 
                 switch (url) {
                     case 'lifecycleState/CHECKOUT':
-                        this.eventBusService.notify("CHECK_OUT", eventData).subscribe(() => {
+                        this.eventBusService.notify("CHECK_OUT", eventData, false).subscribe(() => {
                             // only checkOut get the full component from server
                             //   this.$scope.component = component;
                             // Work around to change the csar version
@@ -503,7 +504,7 @@ export class WorkspaceViewModel {
                         });
                         break;
                     case 'lifecycleState/UNDOCHECKOUT':
-                        this.eventBusService.notify("UNDO_CHECK_OUT", eventData).subscribe(() => {
+                        this.eventBusService.notify("UNDO_CHECK_OUT", eventData, false).subscribe(() => {
                             defaultActionAfterChangeLifecycleState();
                             this.Notification.success({
                                 message: this.$filter('translate')("DELETE_SUCCESS_MESSAGE_TEXT"),
diff --git a/catalog-ui/src/app/view-models/workspace/workspace.less b/catalog-ui/src/app/view-models/workspace/workspace.less
index 84a3599d47..cee146aa12 100644
--- a/catalog-ui/src/app/view-models/workspace/workspace.less
+++ b/catalog-ui/src/app/view-models/workspace/workspace.less
@@ -79,7 +79,7 @@
 
         padding: 0px 0px 0px 0px;
         background-color: @main_color_p;
-        z-index: 1;
+        //z-index: 1;
 
         .sdc-workspace-top-bar {
             height: @action_nav_height;