Catalog alignment

Issue-ID: SDC-2724
Signed-off-by: ys9693 <ys9693@att.com>
Change-Id: I52b4aacb58cbd432ca0e1ff7ff1f7dd52099c6fe

6 files changed, 226 insertions, 10 deletions

diff --git a/catalog-ui/src/app/ng2/components/layout/layout.module.ts b/catalog-ui/src/app/ng2/components/layout/layout.module.ts
index 827209326c..f6d2cf487e 100644
--- a/catalog-ui/src/app/ng2/components/layout/layout.module.ts
+++ b/catalog-ui/src/app/ng2/components/layout/layout.module.ts
@@ -13,7 +13,9 @@ import { TopNavComponent } from "./top-nav/top-nav.component";
         FormsModule,
         TranslateModule
     ],
-    exports: [],
+    exports: [
+        TopNavComponent
+    ],
     entryComponents: [ //need to add anything that will be dynamically created
         TopNavComponent
     ],
diff --git a/catalog-ui/src/app/ng2/components/layout/top-nav/__snapshots__/top-nav.comonent.spec.ts.snap b/catalog-ui/src/app/ng2/components/layout/top-nav/__snapshots__/top-nav.comonent.spec.ts.snap
new file mode 100644
index 0000000000..c650a9ca56
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/layout/top-nav/__snapshots__/top-nav.comonent.spec.ts.snap
@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`artifact form component should match current snapshot of top-nav component 1`] = `
+<top-nav
+  $state={[Function Object]}
+  _getTopLvlSelectedIndexByState={[Function Function]}
+  authService={[Function Object]}
+  sdcConfig={[Function Object]}
+  searchTermChange={[Function EventEmitter]}
+  translateService={[Function Object]}
+>
+  <nav
+    class="top-nav"
+  >
+    <div
+      class="asdc-app-title-wrapper"
+    >
+      <a
+        class="asdc-app-title"
+      >
+        
+      </a>
+      <div
+        class="asdc-version"
+      >
+         v.
+      </div>
+    </div>
+    
+    
+    <div
+      class="top-search"
+    >
+      <input
+        class="search-text"
+        data-tests-id="main-menu-input-search"
+        placeholder="Search"
+        type="text"
+      />
+      <span
+        class="w-sdc-search-icon magnification"
+      />
+    </div>
+    
+  </nav>
+</top-nav>
+`;
diff --git a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.comonent.spec.ts b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.comonent.spec.ts
new file mode 100644
index 0000000000..54fbb36dcf
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.comonent.spec.ts
@@ -0,0 +1,161 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture } from '@angular/core/testing';
+import { PluginsConfiguration } from 'app/models';
+import { Observable } from 'rxjs';
+import { Mock } from 'ts-mockery';
+import { ConfigureFn, configureTests } from '../../../../../jest/test-config.helper';
+import { MenuItem, MenuItemGroup } from '../../../../utils/menu-handler';
+import { SdcConfigToken } from '../../../config/sdc-config.config';
+import { AuthenticationService } from '../../../services/authentication.service';
+import { TranslateModule } from '../../../shared/translator/translate.module';
+import { TranslateService } from '../../../shared/translator/translate.service';
+import { TopNavComponent } from './top-nav.component';
+
+describe('artifact form component', () => {
+
+    let fixture: ComponentFixture<TopNavComponent>;
+    let translateServiceMock: Partial<TranslateService>;
+    let mockStateService;
+    let authServiceMock;
+
+    const designerUser = {
+        email: 'designer@sdc.com',
+        firstName: 'Carlos',
+        fullName: 'Carlos Santana',
+        lastLoginTime: 1555587266566,
+        lastName: 'Santana',
+        role: 'DESIGNER',
+        status: 'ACTIVE',
+        userId: 'cs0008'
+    };
+
+    const pluginDisplayOptions = {
+        displayName : '',
+        displayContext : new Array<string>(),
+        displayRoles :  new Array<string>()
+    };
+
+    let roleToReturn = designerUser;
+
+    const map1 =  new Map();
+    map1.otherValue =  pluginDisplayOptions;
+
+    const map2 = new Map();
+    pluginDisplayOptions.displayRoles = ['DESIGNER'];
+    pluginDisplayOptions.displayName = 'DCAE-DS';
+    map2.tab =  pluginDisplayOptions;
+
+    PluginsConfiguration.plugins =
+        [
+            {pluginId: 'DCAED', pluginDiscoveryUrl: 'DCAED_discoveryURL', pluginSourceUrl: 'DCAED_sourceURL', pluginStateUrl: 'DCAED_stateURL', pluginDisplayOptions:  map1, isOnline: true},
+            {pluginId: 'DCAE-DS', pluginDiscoveryUrl: 'DCAE-DS_discoveryURL', pluginSourceUrl: 'DCAE-DS_sourceURL', pluginStateUrl: 'DCAE-DS_stateURL', pluginDisplayOptions: map2, isOnline: true}
+        ];
+
+    beforeEach(
+        async(() => {
+            authServiceMock = {
+                getLoggedinUser: jest.fn().mockImplementation(() => {
+                    return roleToReturn;
+                })
+            };
+
+            mockStateService = {
+                go: jest.fn(),
+                includes: jest.fn(() => true),
+                current : {
+                    name : 'plugins'
+                },
+                params : {}
+            };
+
+            translateServiceMock = {
+                languageChangedObservable: Mock.of<Observable<string>>( {
+                    subscribe : jest.fn().mockImplementation((cb) => {
+                        cb();
+                    })
+                }),
+                translate: jest.fn((str: string) => {
+                    if (str === 'TOP_MENU_HOME_BUTTON') {
+                        return 'HOME';
+                    } else if (str === 'TOP_MENU_CATALOG_BUTTON') {
+                        return 'CATALOG';
+                    } else if (str === 'TOP_MENU_ON_BOARD_BUTTON') {
+                        return 'ONBOARD';
+                    } else {
+                        return 'TBD...';
+                    }
+                })
+            };
+
+            const configure: ConfigureFn = (testBed) => {
+                testBed.configureTestingModule({
+                    declarations: [TopNavComponent],
+                    imports: [TranslateModule],
+                    schemas: [NO_ERRORS_SCHEMA],
+                    providers: [
+                        {provide: TranslateService, useValue: translateServiceMock},
+                        {provide: '$state', useValue: mockStateService},
+                        {provide: AuthenticationService, useValue: authServiceMock},
+                        {provide: SdcConfigToken, useValue: {csarFileExtension: 'csar', toscaFileExtension: 'yaml,yml'}},
+                    ],
+                });
+            };
+
+            configureTests(configure).then((testBed) => {
+                fixture = testBed.createComponent(TopNavComponent);
+            });
+        })
+    );
+
+    it('should match current snapshot of top-nav component', () => {
+        expect(fixture).toMatchSnapshot();
+    });
+
+    it('Once a Designer logged in, Menu Items will contain HOME, CATALOG, ONBOARD & DCAE-DS; HOME will be selected', () => {
+
+        // topLvlSelectedIndex = 1 => Ignore the inner call to  _getTopLvlSelectedIndexByState.
+        fixture.componentInstance.topLvlSelectedIndex = 0;
+        fixture.componentInstance.ngOnInit();
+
+        expect(fixture.componentInstance.topLvlMenu.itemClick).toBe(true);
+
+        expect(fixture.componentInstance.topLvlMenu.menuItems.length).toBe(4);
+
+        expect(fixture.componentInstance.topLvlMenu.menuItems[0]).toEqual({
+            action: 'goToState',
+            blockedForTypes: null,
+            callback: null,
+            params: null,
+            state: 'dashboard',
+            text: 'HOME'
+        });
+        expect(fixture.componentInstance.topLvlMenu.menuItems[1]).toEqual({
+            action: 'goToState',
+            blockedForTypes: null,
+            callback: null,
+            params: null,
+            state: 'catalog',
+            text: 'CATALOG'
+        });
+        expect(fixture.componentInstance.topLvlMenu.menuItems[2]).toEqual({
+            action: 'goToState',
+            blockedForTypes: null,
+            callback: null,
+            params: null,
+            state: 'onboardVendor',
+            text: 'ONBOARD'
+        });
+        expect(fixture.componentInstance.topLvlMenu.menuItems[3]).toEqual({
+            action: 'goToState',
+            blockedForTypes: null,
+            callback: null,
+            params:
+                {path: 'DCAE-DS_stateURL'},
+            state: 'plugins',
+            text: 'DCAE-DS'
+        });
+
+        expect(fixture.componentInstance.topLvlMenu.selectedIndex).toBe(0);
+    });
+
+});
diff --git a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.html b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.html
index f82e110f1f..2636dd96bb 100644
--- a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.html
+++ b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.html
@@ -65,6 +65,6 @@
         <span class="w-sdc-search-icon magnification"></span>
     </div>
 
-    <div class="notification-icon" [ngClass]="{'disabled' : progress > 0}" *ngIf="user.role === 'DESIGNER' && notificationIconCallback" (click)="notificationIconCallback()" tooltip="Vendor Software Product Repository" tooltipPlacement="left" data-tests-id="repository-icon"></div>
+    <div class="notification-icon" [ngClass]="{'disabled' : progress > 0}" *ngIf="user && user.role === 'DESIGNER' && notificationIconCallback" (click)="notificationIconCallback()" tooltip="Vendor Software Product Repository" tooltipPlacement="left" data-tests-id="repository-icon"></div>
 
 </nav>
diff --git a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.less b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.less
index 5c99015e7d..2bcdfc28d5 100644
--- a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.less
+++ b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.less
@@ -120,7 +120,7 @@
             height: 35px;
             background-color: white;
             font-size: 13px;
-            width: 150px;
+            width: auto;
             line-height: 35px;
             padding: 0 10px;
 
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 a253b3a933..3bd2255488 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
@@ -19,14 +19,17 @@
  */
 
 import * as _ from "lodash";
-import {Component, Inject, Input, Output, EventEmitter} from "@angular/core";
+import {Component, Inject, Input, Output, EventEmitter, OnInit, OnDestroy, OnChanges} from "@angular/core";
 import {IHostedApplication, IUserProperties} from "app/models";
 import {MenuItemGroup, MenuItem} from "app/utils";
-import {UserService} from "../../../services/user.service";
+import {AuthenticationService} from "../../../services/authentication.service";
 import {SdcConfigToken, ISdcConfig} from "../../../config/sdc-config.config";
 import {TranslateService} from "../../../shared/translator/translate.service";
 import {PluginsConfiguration, Plugin} from "app/models";
-
+import { Subscription } from "rxjs";
+// import { Store } from "@ngrx/store";
+// import { AppState } from "app/ng2/store/app.state";
+// import * as unsavedChangesReducer from 'app/ng2/store/reducers/unsaved-changes.reducer';
 
 declare const window:any;
 @Component({
@@ -34,7 +37,7 @@ declare const window:any;
     templateUrl: './top-nav.component.html',
     styleUrls:['./top-nav.component.less']
 })
-export class TopNavComponent {
+export class TopNavComponent implements OnInit, OnChanges {
     @Input() public version:string;
     @Input() public menuModel:Array<MenuItemGroup>;
     @Input() public topLvlSelectedIndex:number;
@@ -48,15 +51,18 @@ export class TopNavComponent {
         this.searchTermChange.emit(event);
     }
 
+    private subscription: Subscription;
+    private hasUnsavedChanges: boolean;
     public topLvlMenu:MenuItemGroup;
     public user:IUserProperties;
     private topNavPlugins: Array<Plugin>;
 
     constructor(private translateService:TranslateService,
                 @Inject('$state') private $state:ng.ui.IStateService,
-                private userService:UserService,
+                private authService:AuthenticationService,
                 @Inject(SdcConfigToken) private sdcConfig:ISdcConfig) {
         window.nav = this;
+
     }
 
     private _getTopLvlSelectedIndexByState = ():number => {
@@ -112,7 +118,7 @@ export class TopNavComponent {
 
     ngOnInit() {
         console.log('Nav is init!', this.menuModel);
-        this.user = this.userService.getLoggedinUser();
+        this.user = this.authService.getLoggedinUser();
         this.topNavPlugins = _.filter(PluginsConfiguration.plugins, (plugin: Plugin) => {
             return plugin.pluginDisplayOptions["tab"] !== undefined;
         });
@@ -142,7 +148,6 @@ export class TopNavComponent {
 
             this.topLvlMenu = new MenuItemGroup(0, tmpArray, true);
             this.topLvlMenu.selectedIndex = isNaN(this.topLvlSelectedIndex) ? this._getTopLvlSelectedIndexByState() : this.topLvlSelectedIndex;
-
             this.generateMenu();
         });
     }
@@ -160,6 +165,7 @@ export class TopNavComponent {
         });
     }
 
+
     menuItemClick(itemGroup:MenuItemGroup, item:MenuItem) {
 
         let onSuccessFunction = () => {