diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/components/layout')
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 = () => { |