From ec888e5d7a8c4a763ec9ac745aaa8f70b502aca1 Mon Sep 17 00:00:00 2001 From: anandtiwary <52081890+anandtiwary@users.noreply.github.com> Date: Thu, 27 May 2021 20:54:10 -0700 Subject: [PATCH 1/3] fix: adding hyperlink capabilities to nav items and nav tabs --- .../nav-item/nav-item.component.test.ts | 107 ++++++++++++++++++ .../navigation/nav-item/nav-item.component.ts | 52 +++++---- .../navigation-list.component.test.ts | 53 +-------- .../navigation/navigation-list.component.ts | 8 +- .../src/navigation/navigation-list.module.ts | 5 +- .../navigable-tab-group.component.ts | 28 +++-- .../tabs/navigable/navigable-tab.module.ts | 12 +- 7 files changed, 177 insertions(+), 88 deletions(-) create mode 100644 projects/components/src/navigation/nav-item/nav-item.component.test.ts diff --git a/projects/components/src/navigation/nav-item/nav-item.component.test.ts b/projects/components/src/navigation/nav-item/nav-item.component.test.ts new file mode 100644 index 000000000..e2dd8b69a --- /dev/null +++ b/projects/components/src/navigation/nav-item/nav-item.component.test.ts @@ -0,0 +1,107 @@ +import { ActivatedRoute } from '@angular/router'; +import { IconType } from '@hypertrace/assets-library'; +import { + FeatureState, + FeatureStateResolver, + MemoizeModule, + NavigationParamsType, + NavigationService +} from '@hypertrace/common'; +import { BetaTagComponent, IconComponent, LinkComponent } from '@hypertrace/components'; +import { createHostFactory, mockProvider, SpectatorHost } from '@ngneat/spectator/jest'; +import { MockComponent } from 'ng-mocks'; +import { EMPTY, of } from 'rxjs'; +import { NavItemConfig, NavItemType } from '../navigation-list.component'; +import { FeatureConfigCheckModule } from './../../feature-check/feature-config-check.module'; +import { NavItemComponent } from './nav-item.component'; + +describe('Navigation Item Component', () => { + let spectator: SpectatorHost; + const activatedRoute = { + root: {} + }; + const createHost = createHostFactory({ + shallow: true, + component: NavItemComponent, + declarations: [MockComponent(IconComponent), MockComponent(LinkComponent), MockComponent(BetaTagComponent)], + imports: [MemoizeModule, FeatureConfigCheckModule], + providers: [ + mockProvider(ActivatedRoute, activatedRoute), + mockProvider(NavigationService, { + navigation$: EMPTY, + navigateWithinApp: jest.fn(), + getCurrentActivatedRoute: jest.fn().mockReturnValue(of(activatedRoute)) + }), + mockProvider(FeatureStateResolver, { + getCombinedFeatureState: () => of(FeatureState.Enabled) + }) + ] + }); + + test('should update layout when collapsed input is updated', () => { + const navItem: NavItemConfig = { + type: NavItemType.Link, + icon: IconType.TriangleLeft, + label: 'Foo Label', + matchPaths: ['foo', 'bar'] + }; + spectator = createHost(``, { + hostProps: { navItem: navItem } + }); + + expect(spectator.query('.label')).not.toExist(); + expect(spectator.query(IconComponent)?.icon).toEqual(IconType.TriangleLeft); + + spectator.setInput({ + collapsed: false + }); + + spectator.detectChanges(); + expect(spectator.query('.label')).toExist(); + expect(spectator.query(IconComponent)?.icon).toEqual(IconType.TriangleLeft); + }); + + test('should navigate to first match on click, relative to activated route', () => { + const navItem: NavItemConfig = { + type: NavItemType.Link, + icon: 'icon', + label: 'Foo Label', + matchPaths: ['foo', 'bar'] + }; + spectator = createHost(``, { + hostProps: { navItem: navItem } + }); + + const link = spectator.query(LinkComponent); + expect(link).toExist(); + expect(link?.paramsOrUrl).toEqual({ + navType: NavigationParamsType.InApp, + path: 'foo', + relativeTo: spectator.inject(ActivatedRoute), + replaceCurrentHistory: undefined + }); + }); + + test('should navigate to first match on click, relative to activated route with skip location change option', () => { + const navItem: NavItemConfig = { + type: NavItemType.Link, + icon: 'icon', + label: 'Foo Label', + matchPaths: ['foo', 'bar'], + replaceCurrentHistory: true + }; + + spectator = createHost(``, { + hostProps: { navItem: navItem } + }); + + const link = spectator.query(LinkComponent); + expect(link).toExist(); + expect(link?.paramsOrUrl).toEqual({ + navType: NavigationParamsType.InApp, + path: 'foo', + relativeTo: spectator.inject(ActivatedRoute), + replaceCurrentHistory: true + }); + }); +}); diff --git a/projects/components/src/navigation/nav-item/nav-item.component.ts b/projects/components/src/navigation/nav-item/nav-item.component.ts index c5cc76a87..4c3584b3d 100644 --- a/projects/components/src/navigation/nav-item/nav-item.component.ts +++ b/projects/components/src/navigation/nav-item/nav-item.component.ts @@ -1,5 +1,6 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; -import { FeatureState } from '@hypertrace/common'; +import { ActivatedRoute } from '@angular/router'; +import { FeatureState, NavigationParams, NavigationParamsType } from '@hypertrace/common'; import { IconSize } from '../../icon/icon-size'; import { NavItemLinkConfig } from '../navigation-list.component'; @@ -8,28 +9,30 @@ import { NavItemLinkConfig } from '../navigation-list.component'; styleUrls: ['./nav-item.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, template: ` -
- +
- + + -
- {{ this.config.label }} - - SOON - - +
+ {{ this.config.label }} + + SOON + + +
-
+ ` }) export class NavItemComponent { @@ -41,4 +44,13 @@ export class NavItemComponent { @Input() public collapsed: boolean = true; + + public buildNavigationParam = (item: NavItemLinkConfig): NavigationParams => ({ + navType: NavigationParamsType.InApp, + path: item.matchPaths[0], + relativeTo: this.activatedRoute, + replaceCurrentHistory: item.replaceCurrentHistory + }); + + public constructor(private readonly activatedRoute: ActivatedRoute) {} } diff --git a/projects/components/src/navigation/navigation-list.component.test.ts b/projects/components/src/navigation/navigation-list.component.test.ts index e3acfeb58..b29e3800d 100644 --- a/projects/components/src/navigation/navigation-list.component.test.ts +++ b/projects/components/src/navigation/navigation-list.component.test.ts @@ -1,12 +1,12 @@ -import { ElementRef } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { IconType } from '@hypertrace/assets-library'; -import { NavigationParams, NavigationParamsType, NavigationService } from '@hypertrace/common'; +import { MemoizeModule, NavigationService } from '@hypertrace/common'; import { createHostFactory, mockProvider, SpectatorHost } from '@ngneat/spectator/jest'; import { MockComponent } from 'ng-mocks'; import { EMPTY, of } from 'rxjs'; import { IconComponent } from '../icon/icon.component'; import { LetAsyncModule } from '../let-async/let-async.module'; +import { LinkComponent } from './../link/link.component'; import { NavItemComponent } from './nav-item/nav-item.component'; import { FooterItemConfig, NavigationListComponent, NavItemConfig, NavItemType } from './navigation-list.component'; describe('Navigation List Component', () => { @@ -17,8 +17,8 @@ describe('Navigation List Component', () => { const createHost = createHostFactory({ shallow: true, component: NavigationListComponent, - declarations: [MockComponent(IconComponent), MockComponent(NavItemComponent)], - imports: [LetAsyncModule], + declarations: [MockComponent(IconComponent), MockComponent(NavItemComponent), MockComponent(LinkComponent)], + imports: [LetAsyncModule, MemoizeModule], providers: [ mockProvider(ActivatedRoute, activatedRoute), mockProvider(NavigationService, { @@ -78,49 +78,4 @@ describe('Navigation List Component', () => { expect(spectator.query('.navigation-list')).not.toHaveClass('expanded'); expect(spectator.query(IconComponent)?.icon).toEqual(IconType.TriangleRight); }); - - test('should navigate to first match on click, relative to activated route', () => { - const navItems: NavItemConfig[] = [ - { - type: NavItemType.Link, - icon: 'icon', - label: 'Foo Label', - matchPaths: ['foo', 'bar'] - } - ]; - spectator = createHost(``, { - hostProps: { navItems: navItems } - }); - - spectator.click(spectator.query(NavItemComponent, { read: ElementRef })!); - expect(spectator.inject(NavigationService).navigate).toHaveBeenCalledWith({ - navType: NavigationParamsType.InApp, - path: 'foo', - relativeTo: spectator.inject(ActivatedRoute), - replaceCurrentHistory: undefined - }); - }); - - test('should navigate to first match on click, relative to activated route with skip location change option', () => { - const navItems: NavItemConfig[] = [ - { - type: NavItemType.Link, - icon: 'icon', - label: 'Foo Label', - matchPaths: ['foo', 'bar'], - replaceCurrentHistory: true - } - ]; - spectator = createHost(``, { - hostProps: { navItems: navItems } - }); - - spectator.click(spectator.query(NavItemComponent, { read: ElementRef })!); - expect(spectator.inject(NavigationService).navigate).toHaveBeenCalledWith({ - navType: NavigationParamsType.InApp, - path: 'foo', - relativeTo: spectator.inject(ActivatedRoute), - replaceCurrentHistory: true - }); - }); }); diff --git a/projects/components/src/navigation/navigation-list.component.ts b/projects/components/src/navigation/navigation-list.component.ts index bae623b48..2d9925e77 100644 --- a/projects/components/src/navigation/navigation-list.component.ts +++ b/projects/components/src/navigation/navigation-list.component.ts @@ -25,13 +25,7 @@ import { IconSize } from '../icon/icon-size';
- - + diff --git a/projects/components/src/navigation/navigation-list.module.ts b/projects/components/src/navigation/navigation-list.module.ts index fdfd7f02b..076034459 100644 --- a/projects/components/src/navigation/navigation-list.module.ts +++ b/projects/components/src/navigation/navigation-list.module.ts @@ -1,6 +1,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; +import { MemoizeModule } from '@hypertrace/common'; import { BetaTagModule } from '../beta-tag/beta-tag.module'; import { ButtonModule } from '../button/button.module'; import { FeatureConfigCheckModule } from '../feature-check/feature-config-check.module'; @@ -23,7 +24,9 @@ import { NavigationListComponent } from './navigation-list.component'; ButtonModule, LinkModule, LabelModule, - BetaTagModule + BetaTagModule, + MemoizeModule, + LinkModule ], declarations: [NavigationListComponent, NavItemComponent], exports: [NavigationListComponent] diff --git a/projects/components/src/tabs/navigable/navigable-tab-group.component.ts b/projects/components/src/tabs/navigable/navigable-tab-group.component.ts index 04e25c9f3..16293a508 100644 --- a/projects/components/src/tabs/navigable/navigable-tab-group.component.ts +++ b/projects/components/src/tabs/navigable/navigable-tab-group.component.ts @@ -1,6 +1,6 @@ import { AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, QueryList } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; -import { FeatureState, NavigationService } from '@hypertrace/common'; +import { FeatureState, NavigationParams, NavigationParamsType, NavigationService } from '@hypertrace/common'; import { merge, Observable } from 'rxjs'; import { map, startWith } from 'rxjs/operators'; import { NavigableTabComponent } from './navigable-tab.component'; @@ -14,15 +14,17 @@ import { NavigableTabComponent } from './navigable-tab.component'; @@ -48,6 +50,12 @@ export class NavigableTabGroupComponent implements AfterContentInit { ); } + public buildNavigationParam = (tab: NavigableTabComponent): NavigationParams => ({ + navType: NavigationParamsType.InApp, + path: [tab.path], + relativeTo: this.activatedRoute + }); + public onTabClick(tab: NavigableTabComponent): void { this.navigationService.navigateWithinApp([tab.path], this.activatedRoute); } diff --git a/projects/components/src/tabs/navigable/navigable-tab.module.ts b/projects/components/src/tabs/navigable/navigable-tab.module.ts index 882ee7fd3..05f1a8b92 100644 --- a/projects/components/src/tabs/navigable/navigable-tab.module.ts +++ b/projects/components/src/tabs/navigable/navigable-tab.module.ts @@ -2,14 +2,24 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { MatTabsModule } from '@angular/material/tabs'; import { RouterModule } from '@angular/router'; +import { MemoizeModule } from '@hypertrace/common'; import { FeatureConfigCheckModule } from '../../feature-check/feature-config-check.module'; import { LetAsyncModule } from '../../let-async/let-async.module'; +import { LinkModule } from '../../link/link.module'; import { NavigableTabGroupComponent } from './navigable-tab-group.component'; import { NavigableTabComponent } from './navigable-tab.component'; @NgModule({ declarations: [NavigableTabGroupComponent, NavigableTabComponent], exports: [NavigableTabGroupComponent, NavigableTabComponent], - imports: [MatTabsModule, CommonModule, RouterModule, LetAsyncModule, FeatureConfigCheckModule] + imports: [ + MatTabsModule, + CommonModule, + RouterModule, + LetAsyncModule, + FeatureConfigCheckModule, + MemoizeModule, + LinkModule + ] }) export class NavigableTabModule {} From e2448a210f720ae0ad5b471d8a9856accf2ae419 Mon Sep 17 00:00:00 2001 From: anandtiwary <52081890+anandtiwary@users.noreply.github.com> Date: Thu, 27 May 2021 20:59:28 -0700 Subject: [PATCH 2/3] refactor: remove unused code --- .../src/navigation/navigation-list.component.ts | 9 --------- 1 file changed, 9 deletions(-) diff --git a/projects/components/src/navigation/navigation-list.component.ts b/projects/components/src/navigation/navigation-list.component.ts index 2d9925e77..0686887fb 100644 --- a/projects/components/src/navigation/navigation-list.component.ts +++ b/projects/components/src/navigation/navigation-list.component.ts @@ -76,15 +76,6 @@ export class NavigationListComponent { ); } - public navigate(item: NavItemLinkConfig): void { - this.navigationService.navigate({ - navType: NavigationParamsType.InApp, - path: item.matchPaths[0], - relativeTo: this.activatedRoute, - replaceCurrentHistory: item.replaceCurrentHistory - }); - } - public toggleView(): void { if (this.resizable) { this.collapsed = !this.collapsed; From 586bab82c59a258911ad5a75570f7e99ee156dfd Mon Sep 17 00:00:00 2001 From: anandtiwary <52081890+anandtiwary@users.noreply.github.com> Date: Thu, 27 May 2021 20:59:56 -0700 Subject: [PATCH 3/3] refactor: fixing lint --- projects/components/src/navigation/navigation-list.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/components/src/navigation/navigation-list.component.ts b/projects/components/src/navigation/navigation-list.component.ts index 0686887fb..3c0025d02 100644 --- a/projects/components/src/navigation/navigation-list.component.ts +++ b/projects/components/src/navigation/navigation-list.component.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { IconType } from '@hypertrace/assets-library'; -import { NavigationParamsType, NavigationService } from '@hypertrace/common'; +import { NavigationService } from '@hypertrace/common'; import { Observable } from 'rxjs'; import { map, startWith } from 'rxjs/operators'; import { IconSize } from '../icon/icon-size';