Create designer-tab component

Created designer-tab component for side-nav of resource context
Updated configuration according to new design

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

9 files changed, 115 insertions, 30 deletions

diff --git a/catalog-ui/src/app/app.ts b/catalog-ui/src/app/app.ts
index a3a1ba9230..f3bfbb9c52 100644
--- a/catalog-ui/src/app/app.ts
+++ b/catalog-ui/src/app/app.ts
@@ -518,6 +518,15 @@ ng1appModule.config([
         );
 
         $stateProvider.state(
+            'workspace.designers', {
+                url: 'designers/*path',
+                parent: 'workspace',
+                templateUrl: './view-models/workspace/tabs/designers/designers-tab-view.html',
+                controller: viewModelsModuleName + '.DesignersTabViewModel'
+            }
+        );
+
+        $stateProvider.state(
             'adminDashboard', {
                 url: '/adminDashboard',
                 templateUrl: './view-models/admin-dashboard/admin-dashboard-view.html',
diff --git a/catalog-ui/src/app/models/designers-config.ts b/catalog-ui/src/app/models/designers-config.ts
index c218c89e7a..6b4233fc1b 100644
--- a/catalog-ui/src/app/models/designers-config.ts
+++ b/catalog-ui/src/app/models/designers-config.ts
@@ -11,7 +11,7 @@ export class Designer {
 
 export class DesignerDisplayOptions {
     displayName: string;
-    validResourceTypes: Array<string>;
+    displayContext: Array<string>;
 }
 
 export type Designers = Array<Designer>;
diff --git a/catalog-ui/src/app/modules/view-model-module.ts b/catalog-ui/src/app/modules/view-model-module.ts
index 63ca9012d6..321d039d66 100644
--- a/catalog-ui/src/app/modules/view-model-module.ts
+++ b/catalog-ui/src/app/modules/view-model-module.ts
@@ -74,6 +74,7 @@ import {HierarchyViewModel} from "../view-models/tabs/hierarchy/hierarchy-view-m
 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 {DesignersTabViewModel} from "../view-models/workspace/tabs/designers/designers-tab-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';
@@ -137,6 +138,7 @@ viewModelModule
   .controller(moduleName + '.ReqAndCapabilitiesViewModel', ReqAndCapabilitiesViewModel)
   .controller(moduleName + '.InputFormViewModel', InputFormViewModel)
   .controller(moduleName + '.DesignersViewModel', DesignersViewModel)
+  .controller(moduleName + '.DesignersTabViewModel', DesignersTabViewModel)
   //
   // //TABS
   .controller(moduleName + '.HierarchyViewModel', HierarchyViewModel);
diff --git a/catalog-ui/src/app/utils/constants.ts b/catalog-ui/src/app/utils/constants.ts
index 3ea652a7dd..c04da62380 100644
--- a/catalog-ui/src/app/utils/constants.ts
+++ b/catalog-ui/src/app/utils/constants.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.
@@ -198,8 +198,8 @@ export class GraphTransactionLogText {
 }
 
 export class GraphUIObjects {
-    public static HANDLE_SIZE = 18; 
-    public static NODE_OVERLAP_MIN_SIZE = 30; 
+    public static HANDLE_SIZE = 18;
+    public static NODE_OVERLAP_MIN_SIZE = 30;
     public static DEFAULT_RESOURCE_WIDTH = 65;
     public static SMALL_RESOURCE_WIDTH = 21;
     public static LINK_MENU_HEIGHT = 420;
@@ -239,6 +239,7 @@ export class States {
     public static WORKSPACE_DISTRIBUTION = 'workspace.distribution';
     public static WORKSPACE_PROPERTIES_ASSIGNMENT = 'workspace.properties_assignment';
     public static WORKSPACE_REQUIREMENTS_AND_CAPABILITIES = 'workspace.reqAndCap';
+    public static WORKSPACE_DESIGNERS = 'workspace.designers';
     public static WORKSPACE_NG2 = 'workspace.ng2';
 }
 
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/designers/designers-tab-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/designers/designers-tab-view-model.ts
new file mode 100644
index 0000000000..03ce83ee18
--- /dev/null
+++ b/catalog-ui/src/app/view-models/workspace/tabs/designers/designers-tab-view-model.ts
@@ -0,0 +1,28 @@
+import {Designer, DesignersConfiguration} from "app/models";
+
+
+interface IDesignerTabViewModelScope extends ng.IScope {
+    designer: Designer;
+}
+
+export class DesignersTabViewModel {
+    static '$inject' = [
+        '$scope',
+        '$stateParams'
+    ];
+
+    constructor(private $scope:IDesignerTabViewModelScope,
+                private $stateParams:any) {
+
+        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];
+    }
+}
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/designers/designers-tab-view.html b/catalog-ui/src/app/view-models/workspace/tabs/designers/designers-tab-view.html
new file mode 100644
index 0000000000..7abb81a694
--- /dev/null
+++ b/catalog-ui/src/app/view-models/workspace/tabs/designers/designers-tab-view.html
@@ -0,0 +1,5 @@
+<div class="workspace-designers">
+
+    <designer-frame [designer]="designer"></designer-frame>
+
+</div>
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/designers/designers-tab.less b/catalog-ui/src/app/view-models/workspace/tabs/designers/designers-tab.less
new file mode 100644
index 0000000000..c8626dc031
--- /dev/null
+++ b/catalog-ui/src/app/view-models/workspace/tabs/designers/designers-tab.less
@@ -0,0 +1,3 @@
+.workspace-designers {
+
+}
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 226785e06f..3846cf075e 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
@@ -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.
@@ -22,7 +22,7 @@
  * Created by obarda on 3/30/2016.
  */
 'use strict';
-import {IUserProperties, IAppMenu, Resource, Component} from "app/models";
+import {IUserProperties, IAppMenu, Resource, Component, Designer, DesignersConfiguration, DesignerDisplayOptions} from "app/models";
 import {
     WorkspaceMode, ComponentFactory, ChangeLifecycleStateHandler, Role, ComponentState, MenuItemGroup, MenuHandler,
     MenuItem, ModalsHandler, States, EVENTS, CHANGE_COMPONENT_CSAR_VERSION_FLAG, ResourceType
@@ -58,6 +58,7 @@ export interface IWorkspaceViewModelScope extends ng.IScope {
     changeVersion:any;
     isComposition:boolean;
     isDeployment:boolean;
+    isDesigners:boolean;
     $state:ng.ui.IStateService;
     user:IUserProperties;
     thirdParty:boolean;
@@ -70,7 +71,7 @@ export interface IWorkspaceViewModelScope extends ng.IScope {
     showChangeStateButton():boolean;
     getComponent():Component;
     setComponent(component:Component):void;
-    onMenuItemPressed(state:string):ng.IPromise<boolean>;
+    onMenuItemPressed(state:string, params:any):ng.IPromise<boolean>;
     save():ng.IPromise<boolean>;
     setValidState(isValid:boolean):void;
     revert():void;
@@ -88,6 +89,7 @@ export interface IWorkspaceViewModelScope extends ng.IScope {
     getStatus():string;
     showLifecycleIcon():boolean;
     updateSelectedMenuItem(state:string):void;
+    isSelected(menuItem:MenuItem):boolean;
     uploadFileChangedInGeneralTab():void;
     updateMenuComponentName(ComponentName:string):void;
     getTabTitle():string;
@@ -214,14 +216,15 @@ export class WorkspaceViewModel {
             }
         };
 
-        this.$scope.onMenuItemPressed = (state:string):ng.IPromise<boolean> => {
+        this.$scope.onMenuItemPressed = (state:string, params:any):ng.IPromise<boolean> => {
             let deferred = this.$q.defer();
             let goToState = ():void => {
-                this.$scope.updateSelectedMenuItem(state);
-                this.$state.go(state, {
+                this.$state.go(state, Object.assign({
                     id: this.$scope.component.uniqueId,
                     type: this.$scope.component.componentType.toLowerCase(),
                     components: this.components
+                }, params)).then(() => {
+                    this.$scope.updateSelectedMenuItem(state);
                 });
                 deferred.resolve(true);
             };
@@ -616,18 +619,32 @@ export class WorkspaceViewModel {
         };
 
         this.$scope.updateSelectedMenuItem = (state:string):void => {
-            let stateArray:Array<string> = state.split('.');
+            let stateArray:Array<string> = state.split('.', 2);
             let stateWithoutInternalNavigate:string = stateArray[0] + '.' + stateArray[1];
             let selectedItem:MenuItem = _.find(this.$scope.leftBarTabs.menuItems, (item:MenuItem) => {
-                return _.startsWith(item.state, stateWithoutInternalNavigate);
+                let itemStateArray: Array<string> = item.state.split('.', 2);
+                let itemStateWithoutNavigation:string = itemStateArray[0] + '.' + itemStateArray[1];
+                return (itemStateWithoutNavigation === stateWithoutInternalNavigate);
             });
-            this.$scope.leftBarTabs.selectedIndex = selectedItem ? this.$scope.leftBarTabs.menuItems.indexOf(selectedItem) : 0;
+
+            let selectedIndex = selectedItem ? this.$scope.leftBarTabs.menuItems.indexOf(selectedItem) : 0;
+
+            if (stateArray[1] === 'designers') {
+                selectedIndex += _.findIndex(DesignersConfiguration.designers, (designer: Designer) => designer.designerStateUrl === this.$state.params.path);
+            }
+
+            this.$scope.leftBarTabs.selectedIndex = selectedIndex;
         };
 
+        this.$scope.isSelected = (menuItem:MenuItem): boolean => {
+            return this.$scope.leftBarTabs.selectedIndex === _.indexOf(this.$scope.leftBarTabs.menuItems, menuItem);
+        }
+
         this.$scope.$watch('$state.current.name', (newVal:string):void => {
             if (newVal) {
                 this.$scope.isComposition = (newVal.indexOf(States.WORKSPACE_COMPOSITION) > -1);
                 this.$scope.isDeployment = newVal == States.WORKSPACE_DEPLOYMENT;
+                this.$scope.isDesigners = newVal == States.WORKSPACE_DESIGNERS;
             }
         });
 
@@ -669,9 +686,9 @@ export class WorkspaceViewModel {
         return new MenuItem(text, null, States.WORKSPACE_GENERAL, 'goToState', [this.$state.params]);
     };
 
-    private updateMenuItemByRole = (menuItems:Array<MenuItem>, role:string) => {
-        let tempMenuItems:Array<MenuItem> = new Array<MenuItem>();
-        menuItems.forEach((item:MenuItem) => {
+    private updateMenuItemByRole = (menuItems:Array<any>, role:string) : Array<any> => {
+        let tempMenuItems:Array<any> = new Array<any>();
+        menuItems.forEach((item:any) => {
             //remove item if role is disabled
             if (!(item.disabledRoles && item.disabledRoles.indexOf(role) > -1)) {
                 tempMenuItems.push(item);
@@ -700,13 +717,37 @@ export class WorkspaceViewModel {
 
         let inCreateMode = this.$scope.isCreateMode();
         this.$scope.leftBarTabs = new MenuItemGroup();
-        this.$scope.leftBarTabs.menuItems = this.updateMenuItemByRole(this.sdcMenu.component_workspace_menu_option[this.$scope.component.getComponentSubType()], this.role);
+        const menuItemsObjects:Array<any> = this.updateMenuItemByRole(this.sdcMenu.component_workspace_menu_option[this.$scope.component.getComponentSubType()], this.role);
+
+        // Only need to add designers to the menu if the current role is Designer
+        if (this.role === "DESIGNER") {
+            _.each(DesignersConfiguration.designers, (designer: Designer) => {
+                if (designer.designerDisplayOptions["context"]) {
+                    let displayOptions : DesignerDisplayOptions = designer.designerDisplayOptions["context"];
+
+                    if (displayOptions.displayContext.indexOf(this.$scope.component.getComponentSubType()) !== -1) {
+                        menuItemsObjects.push({
+                            text: displayOptions.displayName,
+                            action: 'onMenuItemPressed',
+                            state: 'workspace.designers',
+                            params: {path: designer.designerStateUrl}
+                        });
+                    }
+                }
+            });
+        }
 
-        this.$scope.leftBarTabs.menuItems.forEach((item:MenuItem) => {
-            item.params = [item.state];
-            item.callback = this.$scope.onMenuItemPressed;
+        this.$scope.leftBarTabs.menuItems = menuItemsObjects.map((item:MenuItem) => {
+            if (item.params) {
+                item.params.state = item.state;
+            }
+            else {
+                item.params = {state: item.state};
+            }
+            item.callback = () => this.$scope[item.action](item.state, item.params);
             item.isDisabled = (inCreateMode && States.WORKSPACE_GENERAL != item.state) ||
                 (States.WORKSPACE_DEPLOYMENT === item.state && this.$scope.component.groups && this.$scope.component.groups.length === 0 && this.$scope.component.isResource());
+            return new MenuItem(item.text, item.callback, item.state, item.action, item.params, item.blockedForTypes);
         });
 
         if (this.cacheService.get('breadcrumbsComponents')) {
@@ -722,16 +763,12 @@ export class WorkspaceViewModel {
 
     private disableMenuItems() {
         this.$scope.leftBarTabs.menuItems.forEach((item:MenuItem) => {
-            item.params = [item.state];
-            item.callback = this.$scope.onMenuItemPressed;
             item.isDisabled = (States.WORKSPACE_GENERAL != item.state);
         });
     }
 
     private enableMenuItems() {
         this.$scope.leftBarTabs.menuItems.forEach((item:MenuItem) => {
-            item.params = [item.state];
-            item.callback = this.$scope.onMenuItemPressed;
             item.isDisabled = false;
         });
     }
diff --git a/catalog-ui/src/app/view-models/workspace/workspace-view.html b/catalog-ui/src/app/view-models/workspace/workspace-view.html
index 0663074dbc..f076ba0ced 100644
--- a/catalog-ui/src/app/view-models/workspace/workspace-view.html
+++ b/catalog-ui/src/app/view-models/workspace/workspace-view.html
@@ -6,8 +6,8 @@
             <div class="menu-header" tooltips tooltip-content="{{menuComponentTitle}}">
                 {{menuComponentTitle}}
             </div>
-            <div class="i-sdc-designer-sidebar-section-content-item" ng-class="{'selected': menuItem.state == $state.current.name}" ng-repeat="menuItem in leftBarTabs.menuItems track by $index">
-                <div class="expand-collapse-menu-box-item-text" ng-click="onMenuItemPressed(menuItem.state)" ng-class="{'disabled': menuItem.isDisabled }" data-tests-id="{{menuItem.text}}LeftSideMenu">{{menuItem.text}}</div>
+            <div class="i-sdc-designer-sidebar-section-content-item" ng-class="{'selected': isSelected(menuItem)}" ng-repeat="menuItem in leftBarTabs.menuItems track by $index">
+                <div class="expand-collapse-menu-box-item-text" ng-click="menuItem.callback()" ng-class="{'disabled': menuItem.isDisabled }" data-tests-id="{{menuItem.text}}LeftSideMenu">{{menuItem.text}}</div>
             </div>
         </div>
 
@@ -63,14 +63,14 @@
 
                     <span data-ng-if="isDesigner()" data-ng-class="{'disabled' :isDisableMode() || isViewMode()}"  ng-click="revert()" class="sprite-new revert-btn" data-tests-id="revert"
                           data-ng-show="showFullIcons()" sdc-smart-tooltip="">Revert</span>
-                    
+
                     <span class="delimiter"></span>
                     <span class="sprite-new x-btn" data-ng-click="goToBreadcrumbHome()" sdc-smart-tooltip="">Close</span>
 
                 </div>
             </div>
             <div class="w-sdc-main-container-body-content-wrapper">
-                <div class="tab-title" data-ng-if="!isComposition && !isDeployment">
+                <div class="tab-title" data-ng-if="!isComposition && !isDeployment && !isDesigners">
                     {{getTabTitle()}}
                 </div>
                 <div class="w-sdc-main-container-body-content" data-ng-class="{'third-party':thirdParty}" data-ui-view></div>