summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/components/layout
diff options
context:
space:
mode:
authorys9693 <ys9693@att.com>2020-01-19 13:50:02 +0200
committerOfir Sonsino <ofir.sonsino@intl.att.com>2020-01-22 12:33:31 +0000
commit16a9fce0e104a38371a9e5a567ec611ae3fc7f33 (patch)
tree03a2aff3060ddb5bc26a90115805a04becbaffc9 /catalog-ui/src/app/ng2/components/layout
parentaa83a2da4f911c3ac89318b8e9e8403b072942e1 (diff)
Catalog alignment
Issue-ID: SDC-2724 Signed-off-by: ys9693 <ys9693@att.com> Change-Id: I52b4aacb58cbd432ca0e1ff7ff1f7dd52099c6fe
Diffstat (limited to 'catalog-ui/src/app/ng2/components/layout')
-rw-r--r--catalog-ui/src/app/ng2/components/layout/layout.module.ts4
-rw-r--r--catalog-ui/src/app/ng2/components/layout/top-nav/__snapshots__/top-nav.comonent.spec.ts.snap47
-rw-r--r--catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.comonent.spec.ts161
-rw-r--r--catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.html2
-rw-r--r--catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.less2
-rw-r--r--catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.ts20
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 = () => {