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>

16 files changed, 201 insertions, 28 deletions

diff --git a/catalog-ui/src/app/app.ts b/catalog-ui/src/app/app.ts
index 609ed48f3e..a3a1ba9230 100644
--- a/catalog-ui/src/app/app.ts
+++ b/catalog-ui/src/app/app.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.
@@ -58,6 +58,7 @@ import {ComponentMetadata} from "./models/component-metadata";
 import {Categories} from "./models/categories";
 import {IUserProperties} from "./models/user";
 import {SearchWithAutoCompleteComponent} from "./ng2/components/ui/search-with-autocomplete/search-with-autocomplete.component";
+import {DesignerFrameComponent} from "./ng2/components/ui/designer/designer-frame.component";
 
 
 let moduleName:string = 'sdcApp';
@@ -152,7 +153,7 @@ angular.module('sdcApp').directive('ng2SearchWithAutocomplete',
         inputs: ['searchPlaceholder', 'searchBarClass', 'autoCompleteValues'],
         outputs: ['searchChanged', 'searchButtonClicked']
     }) as angular.IDirectiveFactory);
-
+angular.module('sdcApp').directive('designerFrame', downgradeComponent( {component: DesignerFrameComponent, inputs: ['designer']} ) as angular.IDirectiveFactory);
 
 ng1appModule.config([
     '$stateProvider',
@@ -533,6 +534,14 @@ ng1appModule.config([
             }
         );
 
+        $stateProvider.state(
+            'designers', {
+                url: '/designers/*path',
+                templateUrl: './view-models/designers/designers-view.html',
+                controller: viewModelsModuleName + '.DesignersViewModel'
+            }
+        );
+
         // Build the states for all hosted apps dynamically
         _.each(hostedApplications, (hostedApp)=> {
             if (hostedApp.exists) {
diff --git a/catalog-ui/src/app/models.ts b/catalog-ui/src/app/models.ts
index 014525367d..4848fb5da2 100644
--- a/catalog-ui/src/app/models.ts
+++ b/catalog-ui/src/app/models.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.
@@ -26,6 +26,7 @@ export * from './models/activity';
 export * from './models/additional-information';
 export * from './models/app-config';
 export * from './models/validation-config';
+export * from './models/designers-config';
 export * from './models/artifacts';
 export * from './models/aschema-property';
 export * from './models/schema-attribute';
diff --git a/catalog-ui/src/app/models/designers-config.ts b/catalog-ui/src/app/models/designers-config.ts
new file mode 100644
index 0000000000..c784be2707
--- /dev/null
+++ b/catalog-ui/src/app/models/designers-config.ts
@@ -0,0 +1,17 @@
+
+export class Designer {
+    displayName: string;
+    designerHost: string;
+    designerPort: number;
+    designerPath: string;
+    designerStateUrl: string;
+    designerProtocol: string;
+    designerButtonLocation: Array<string>;
+    designerTabPresentation: Array<string>;
+}
+
+export type Designers = Array<Designer>;
+
+export class DesignersConfiguration {
+    static designers: Designers;
+}
diff --git a/catalog-ui/src/app/modules/view-model-module.ts b/catalog-ui/src/app/modules/view-model-module.ts
index f94bfc3218..63ca9012d6 100644
--- a/catalog-ui/src/app/modules/view-model-module.ts
+++ b/catalog-ui/src/app/modules/view-model-module.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.
@@ -73,6 +73,7 @@ import {InputFormViewModel} from "../view-models/forms/input-form/input-form-vie
 import {HierarchyViewModel} from "../view-models/tabs/hierarchy/hierarchy-view-model";
 import {downgradeComponent} from "@angular/upgrade/static";
 import {ConformanceLevelModalViewModel} from "../view-models/modals/conformance-level-modal/conformance-level-modal-view-model";
+import {DesignersViewModel} from "../view-models/designers/designers-view-model";
 // import {NG2ExampleComponent} from "../ng2/view-ng2/ng2.example.component/ng2.example.component";
 // import {upgradeAdapter} from "../ng2/app.module";
 // import { UpgradeAdapter } from '@angular/upgrade';
@@ -135,9 +136,10 @@ viewModelModule
   .controller(moduleName + '.ServiceInputsViewModel', ServiceInputsViewModel)
   .controller(moduleName + '.ReqAndCapabilitiesViewModel', ReqAndCapabilitiesViewModel)
   .controller(moduleName + '.InputFormViewModel', InputFormViewModel)
+  .controller(moduleName + '.DesignersViewModel', DesignersViewModel)
   //
   // //TABS
-  .controller(moduleName + '.HierarchyViewModel', HierarchyViewModel)
+  .controller(moduleName + '.HierarchyViewModel', HierarchyViewModel);
 
     // NG2
   //.controller(moduleName +  '.NG2Example',  downgradeComponent({component: NG2Example2Component}) );
diff --git a/catalog-ui/src/app/ng2/app.module.ts b/catalog-ui/src/app/ng2/app.module.ts
index 7108be93f9..ecaa26e1ce 100644
--- a/catalog-ui/src/app/ng2/app.module.ts
+++ b/catalog-ui/src/app/ng2/app.module.ts
@@ -46,6 +46,7 @@ import {UserService} from "./services/user.service";
 import {SdcConfig} from "./config/sdc-config.config";
 import { TranslateModule } from "./shared/translator/translate.module";
 import { TranslationServiceConfig } from "./config/translation.service.config";
+import {DesignerFrameModule} from "./components/ui/designer/designer-frame.module";
 
 export const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule));
 
@@ -72,7 +73,8 @@ export function configServiceFactory(config:ConfigService) {
 
         //We need to import them here since we use them in angular1
         ConnectionWizardModule,
-        PropertiesAssignmentModule
+        PropertiesAssignmentModule,
+        DesignerFrameModule
     ],
     exports: [],
     entryComponents: [],
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 {
+
+}
diff --git a/catalog-ui/src/app/ng2/pipes/global-pipes.module.ts b/catalog-ui/src/app/ng2/pipes/global-pipes.module.ts
index 1d81a1a4bf..e89a816e95 100644
--- a/catalog-ui/src/app/ng2/pipes/global-pipes.module.ts
+++ b/catalog-ui/src/app/ng2/pipes/global-pipes.module.ts
@@ -3,21 +3,23 @@ import {SearchFilterPipe} from "./searchFilter.pipe";
 import {KeysPipe} from "./keys.pipe";
 import {GroupByPipe} from "./groupBy.pipe";
 import {NgModule} from "@angular/core";
+import {SafeUrlSanitizerPipe} from "./safeUrlSanitizer.pipe";
 
 @NgModule({
     declarations: [
         ContentAfterLastDotPipe,
         GroupByPipe,
         KeysPipe,
-        SearchFilterPipe
-        
+        SearchFilterPipe,
+        SafeUrlSanitizerPipe
     ],
-    
+
     exports: [
         ContentAfterLastDotPipe,
         GroupByPipe,
         KeysPipe,
-        SearchFilterPipe
+        SearchFilterPipe,
+        SafeUrlSanitizerPipe
     ]
 })
 
diff --git a/catalog-ui/src/app/ng2/pipes/safeUrlSanitizer.pipe.ts b/catalog-ui/src/app/ng2/pipes/safeUrlSanitizer.pipe.ts
new file mode 100644
index 0000000000..9d8588030e
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pipes/safeUrlSanitizer.pipe.ts
@@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Pipe({ name: 'safeUrlSanitizer' })
+export class SafeUrlSanitizerPipe implements PipeTransform {
+    constructor(private sanitizer: DomSanitizer) {}
+    transform(url) {
+        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
+    }
+}
diff --git a/catalog-ui/src/app/ng2/services/config.service.ts b/catalog-ui/src/app/ng2/services/config.service.ts
index 1c0ee18d33..8675ea7d3d 100644
--- a/catalog-ui/src/app/ng2/services/config.service.ts
+++ b/catalog-ui/src/app/ng2/services/config.service.ts
@@ -25,7 +25,7 @@
 import { Injectable, Inject } from '@angular/core';
 import { Http, Response } from '@angular/http';
 import 'rxjs/add/operator/toPromise';
-import {IAppConfigurtaion, ValidationConfiguration, Validations} from "app/models";
+import {IAppConfigurtaion, ValidationConfiguration, Validations, Designers, DesignersConfiguration} from "app/models";
 import {IApi} from "app/models/app-config";
 import {SdcConfigToken, ISdcConfig} from "../config/sdc-config.config";
 
@@ -69,15 +69,18 @@ export class ConfigService {
         return promise;
     }
 
-    loadDesignersConfiguration(): void {
+    loadDesignersConfiguration(): Promise<DesignersConfiguration> {
         let url:string = this.api.no_proxy_root + this.api.GET_designers_configuration;
         let promise: Promise<any> = this.http.get(url).map((res: Response) => res.json()).toPromise();
-
-        promise.then((config:any) => {
-            console.log(config);
+        promise.then((designersData: Designers) => {
+            DesignersConfiguration.designers = designersData;
         }).catch((ex) => {
-            console.error('Error was:', ex);
-        })
+           console.error("Error loading designers configuration from BE", ex);
+
+            DesignersConfiguration.designers = [] as Designers;
+        });
+
+        return promise;
     }
 
 }
diff --git a/catalog-ui/src/app/utils/menu-handler.ts b/catalog-ui/src/app/utils/menu-handler.ts
index 1a3215bf80..d48412a6ed 100644
--- a/catalog-ui/src/app/utils/menu-handler.ts
+++ b/catalog-ui/src/app/utils/menu-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.
@@ -29,7 +29,7 @@ export class MenuItem {
     callback:(...args:Array<any>) => ng.IPromise<boolean>;
     state:string;
     action:string;
-    params:Array<any>;
+    params:any;
     isDisabled:boolean;
     disabledRoles:Array<string>;
     blockedForTypes:Array<string>;  // This item will not be shown for specific components types.
@@ -42,7 +42,7 @@ export class MenuItem {
     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.
 
 
-    constructor(text:string, callback:(...args:Array<any>) => ng.IPromise<boolean>, state:string, action:string, params?:Array<any>, blockedForTypes?:Array<string>) {
+    constructor(text:string, callback:(...args:Array<any>) => ng.IPromise<boolean>, state:string, action:string, params?:any, blockedForTypes?:Array<string>) {
         this.text = text;
         this.callback = callback;
         this.state = state;
diff --git a/catalog-ui/src/app/view-models/designers/designers-view-model.ts b/catalog-ui/src/app/view-models/designers/designers-view-model.ts
new file mode 100644
index 0000000000..42c1194258
--- /dev/null
+++ b/catalog-ui/src/app/view-models/designers/designers-view-model.ts
@@ -0,0 +1,42 @@
+import {Designer, IUserProperties, DesignersConfiguration} from "app/models";
+import {CacheService} from "app/services";
+import {MenuItemGroup} from "app/utils";
+
+
+interface IDesignerViewModelScope extends ng.IScope {
+    designer: Designer
+    topNavMenuModel:Array<MenuItemGroup>;
+    user:IUserProperties;
+    version:string;
+}
+
+export class DesignersViewModel {
+    static '$inject' = [
+        '$scope',
+        '$stateParams',
+        '$sce',
+        'Sdc.Services.CacheService'
+    ];
+
+    constructor(private $scope:IDesignerViewModelScope,
+                private $stateParams:any,
+                private $sce:any,
+                private cacheService:CacheService) {
+
+        this.initScope();
+    }
+
+    private initScope = ():void => {
+        // get the designer object by using the path parameter
+        let designerKey: any = _.findKey(DesignersConfiguration.designers, (designerConfig: Designer) =>{
+            return designerConfig.designerStateUrl ===  this.$stateParams.path;
+        });
+
+        this.$scope.designer = DesignersConfiguration.designers[designerKey];
+
+        this.$scope.version = this.cacheService.get('version');
+        this.$scope.topNavMenuModel = [];
+
+        this.$scope.user = this.cacheService.get('user');
+    }
+}
diff --git a/catalog-ui/src/app/view-models/designers/designers-view.html b/catalog-ui/src/app/view-models/designers/designers-view.html
new file mode 100644
index 0000000000..3ae980589d
--- /dev/null
+++ b/catalog-ui/src/app/view-models/designers/designers-view.html
@@ -0,0 +1,7 @@
+<div class="sdc-catalog-container">
+
+    <top-nav [menuModel]="topNavMenuModel" [version]="version" [hideSearch]="true"></top-nav>
+
+    <designer-frame [designer]="designer"></designer-frame>
+
+</div>