From 3ae8c6a9af359424bde459632c0364b6a131969b Mon Sep 17 00:00:00 2001 From: anandtiwary <52081890+anandtiwary@users.noreply.github.com> Date: Tue, 25 May 2021 12:58:14 -0700 Subject: [PATCH 1/2] feat: adding following supporting methods to navigation and link - Added a method that returns an observable and checks whether a path is active in a reactive fashion - Added a plain method that returns whether a path is active or not --- .../src/navigation/navigation.service.ts | 15 +++++++- .../components/src/link/link.component.scss | 9 ++++- .../src/link/link.component.test.ts | 38 +++++++++++++++++-- .../components/src/link/link.component.ts | 4 ++ 4 files changed, 61 insertions(+), 5 deletions(-) diff --git a/projects/common/src/navigation/navigation.service.ts b/projects/common/src/navigation/navigation.service.ts index 837164a8e..3382d6ea4 100644 --- a/projects/common/src/navigation/navigation.service.ts +++ b/projects/common/src/navigation/navigation.service.ts @@ -14,7 +14,7 @@ import { UrlTree } from '@angular/router'; import { from, Observable, of } from 'rxjs'; -import { filter, map, share, skip, take } from 'rxjs/operators'; +import { distinctUntilChanged, filter, map, share, skip, take, startWith } from 'rxjs/operators'; import { throwIfNil } from '../utilities/lang/lang-utils'; import { Dictionary } from '../utilities/types/types'; import { TraceRoute } from './trace-route'; @@ -167,6 +167,19 @@ export class NavigationService { return route; } + public isPathActiveAndChanges(path: string[]): Observable { + const urlTree = this.router.createUrlTree(path); + return this.router.events.pipe( + startWith(), + map(() => this.router.isActive(urlTree, false)), + distinctUntilChanged() + ); + } + + public isPathActive(path: string[]): boolean { + return this.router.isActive(this.router.createUrlTree(path), false); + } + public isRelativePathActive(path: string[], relativeTo: ActivatedRoute = this.getCurrentActivatedRoute()): boolean { return this.router.isActive(this.router.createUrlTree(path, { relativeTo: relativeTo }), false); } diff --git a/projects/components/src/link/link.component.scss b/projects/components/src/link/link.component.scss index 5418020e5..5e8e80960 100644 --- a/projects/components/src/link/link.component.scss +++ b/projects/components/src/link/link.component.scss @@ -5,5 +5,12 @@ text-decoration-line: none; text-decoration: none; color: inherit; - @include link-hover; + + &:not(.disabled) { + @include link-hover; + } + + .disabled { + pointer-events: none; + } } diff --git a/projects/components/src/link/link.component.test.ts b/projects/components/src/link/link.component.test.ts index d3d2d4120..4d08f5648 100644 --- a/projects/components/src/link/link.component.test.ts +++ b/projects/components/src/link/link.component.test.ts @@ -44,7 +44,9 @@ describe('Link component', () => { ] }); - expect(spectator.query('.ht-link')).toExist(); + const anchorElement = spectator.query('.ht-link'); + expect(anchorElement).toExist(); + expect(anchorElement).not.toHaveClass('disabled'); const routerLinkDirective = spectator.query(RouterLinkWithHref); expect(routerLinkDirective).toBeDefined(); @@ -73,7 +75,9 @@ describe('Link component', () => { ] }); - expect(spectator.query('.ht-link')).toExist(); + const anchorElement = spectator.query('.ht-link'); + expect(anchorElement).toExist(); + expect(anchorElement).not.toHaveClass('disabled'); const routerLinkDirective = spectator.query(RouterLinkWithHref); expect(routerLinkDirective).toBeDefined(); @@ -96,7 +100,35 @@ describe('Link component', () => { ] }); - expect(spectator.query('.ht-link')).toExist(); + const anchorElement = spectator.query('.ht-link'); + expect(anchorElement).toExist(); + expect(anchorElement).not.toHaveClass('disabled'); + const routerLinkDirective = spectator.query(RouterLinkWithHref); + + expect(routerLinkDirective).toBeDefined(); + expect(routerLinkDirective?.routerLink).toEqual(['/test']); + expect(routerLinkDirective?.skipLocationChange).toBeUndefined(); + expect(routerLinkDirective?.queryParams).toBeUndefined(); + expect(routerLinkDirective?.queryParamsHandling).toBeUndefined(); + expect(routerLinkDirective?.replaceUrl).toBeUndefined(); + }); + + test('should apply disabled style when disabled', () => { + spectator = createHost(``, { + hostProps: { + paramsOrUrl: '/test' + }, + providers: [ + mockProvider(NavigationService, { + buildNavigationParams: jest.fn().mockReturnValue({ path: ['/test'], extras: {} }) + }) + ] + }); + + const anchorElement = spectator.query('.ht-link'); + expect(anchorElement).toExist(); + expect(anchorElement).toHaveClass('ht-link disabled'); + const routerLinkDirective = spectator.query(RouterLinkWithHref); expect(routerLinkDirective).toBeDefined(); diff --git a/projects/components/src/link/link.component.ts b/projects/components/src/link/link.component.ts index 8d23e8bdc..fc97eacd0 100644 --- a/projects/components/src/link/link.component.ts +++ b/projects/components/src/link/link.component.ts @@ -10,6 +10,7 @@ import { NavigationParams, NavigationPath, NavigationService } from '@hypertrace Date: Tue, 25 May 2021 13:38:58 -0700 Subject: [PATCH 2/2] refactor: fix lint --- projects/common/src/navigation/navigation.service.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/projects/common/src/navigation/navigation.service.ts b/projects/common/src/navigation/navigation.service.ts index 3382d6ea4..b76f71f8e 100644 --- a/projects/common/src/navigation/navigation.service.ts +++ b/projects/common/src/navigation/navigation.service.ts @@ -14,7 +14,7 @@ import { UrlTree } from '@angular/router'; import { from, Observable, of } from 'rxjs'; -import { distinctUntilChanged, filter, map, share, skip, take, startWith } from 'rxjs/operators'; +import { distinctUntilChanged, filter, map, share, skip, startWith, take } from 'rxjs/operators'; import { throwIfNil } from '../utilities/lang/lang-utils'; import { Dictionary } from '../utilities/types/types'; import { TraceRoute } from './trace-route'; @@ -169,6 +169,7 @@ export class NavigationService { public isPathActiveAndChanges(path: string[]): Observable { const urlTree = this.router.createUrlTree(path); + return this.router.events.pipe( startWith(), map(() => this.router.isActive(urlTree, false)),