Designer-view component for top-nav

Create a designer-view component for opening a designer view from the top-nav
Updated the API to return the designers as a list and not as an object
Created a designer-frame component that will get a designer url to open in the dedicated position

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

5 files changed, 82 insertions, 4 deletions

diff --git a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts
index f48aa4801f..846b84c69f 100644
--- a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts
+++ b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts
@@ -24,6 +24,7 @@ import {MenuItemGroup, MenuItem} from "app/utils";
 import {UserService} from "../../../services/user.service";
 import {SdcConfigToken, ISdcConfig} from "../../../config/sdc-config.config";
 import {TranslateService} from "../../../shared/translator/translate.service";
+import {DesignersConfiguration, Designer} from "app/models";
 
 
 declare const window:any;
@@ -62,10 +63,20 @@ export class TopNavComponent {
         let result = -1;
 
         //set result to current state
-        this.topLvlMenu.menuItems.forEach((item:MenuItem, index:number)=> {
+        this.topLvlMenu.menuItems.every((item:MenuItem, index:number)=> {
             if (item.state === this.$state.current.name) {
-                result = index;
+                if (this.$state.current.name === 'designers') {
+                    const designerIdx = _.findIndex(DesignersConfiguration.designers, (designer: Designer) => designer.designerStateUrl === this.$state.params.path);
+                    if (designerIdx !== -1) {
+                        result = index + designerIdx;
+                        return false;
+                    }
+                } else {
+                    result = index;
+                    return false;
+                }
             }
+            return true;
         });
 
         //if it's a different state , checking previous state param
@@ -109,6 +120,10 @@ export class TopNavComponent {
                         tmpArray.push(new MenuItem(hostedApp.navTitle, null, hostedApp.defaultState, "goToState", null, null));
                     }
                 });
+
+                _.each(DesignersConfiguration.designers, (designer: Designer) => {
+                    tmpArray.push(new MenuItem(designer.displayName, null, "designers", "goToState", {path: designer.designerStateUrl}, null));
+                })
             }
 
             this.topLvlMenu = new MenuItemGroup(0, tmpArray, true);
@@ -124,9 +139,9 @@ export class TopNavComponent {
         }
     }
 
-    goToState(state:string, params:Array<any>):Promise<boolean> {
+    goToState(state:string, params:any):Promise<boolean> {
         return new Promise((resolve, reject) => {
-            this.$state.go(state, params && params.length > 0 ? [0] : undefined);
+            this.$state.go(state, params || undefined);
             resolve(true);
         });
     }
diff --git a/catalog-ui/src/app/ng2/components/ui/designer/designer-frame.component.html b/catalog-ui/src/app/ng2/components/ui/designer/designer-frame.component.html
new file mode 100644
index 0000000000..752e49e218
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/designer/designer-frame.component.html
@@ -0,0 +1,5 @@
+<div class="designer-frame">
+    <div class="w-sdc-main-container">
+        <iframe class="designer-iframe" [src]="designerUrl | safeUrlSanitizer"></iframe>
+    </div>
+</div>
diff --git a/catalog-ui/src/app/ng2/components/ui/designer/designer-frame.component.less b/catalog-ui/src/app/ng2/components/ui/designer/designer-frame.component.less
new file mode 100644
index 0000000000..4b9456b5b1
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/designer/designer-frame.component.less
@@ -0,0 +1,8 @@
+.designer-frame {
+
+    .designer-iframe {
+        width: 100%;
+        height: 100%;
+        border: none;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/designer/designer-frame.component.ts b/catalog-ui/src/app/ng2/components/ui/designer/designer-frame.component.ts
new file mode 100644
index 0000000000..b66008f022
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/designer/designer-frame.component.ts
@@ -0,0 +1,25 @@
+import {Component, OnInit, Input} from "@angular/core";
+import {Designer} from "app/models";
+
+@Component({
+    selector: 'designer-frame',
+    templateUrl: './designer-frame.component.html',
+    styleUrls:['designer-frame.component.less']
+})
+
+export class DesignerFrameComponent implements OnInit {
+
+    @Input() designer: Designer;
+    designerUrl: string;
+
+    constructor() {
+    }
+
+    ngOnInit(): void {
+
+        this.designerUrl = this.designer.designerProtocol + "://" +
+            this.designer.designerHost + ":" +
+            this.designer.designerPort +
+            this.designer.designerPath;
+    }
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/designer/designer-frame.module.ts b/catalog-ui/src/app/ng2/components/ui/designer/designer-frame.module.ts
new file mode 100644
index 0000000000..1edf195230
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/designer/designer-frame.module.ts
@@ -0,0 +1,25 @@
+import {NgModule} from "@angular/core";
+import { CommonModule } from '@angular/common';
+import {DesignerFrameComponent} from "./designer-frame.component";
+import {LayoutModule} from "../../layout/layout.module";
+import {GlobalPipesModule} from "../../../pipes/global-pipes.module";
+
+
+@NgModule({
+    declarations: [
+        DesignerFrameComponent
+    ],
+    imports: [
+        CommonModule,
+        LayoutModule,
+        GlobalPipesModule
+    ],
+    entryComponents: [DesignerFrameComponent],
+    exports: [
+        DesignerFrameComponent
+    ],
+    providers: []
+})
+export class DesignerFrameModule {
+
+}