diff --git a/projects/common/src/navigation/navigation.service.ts b/projects/common/src/navigation/navigation.service.ts index fdec9e880..734576231 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, startWith, take } from 'rxjs/operators'; import { throwIfNil } from '../utilities/lang/lang-utils'; import { Dictionary } from '../utilities/types/types'; import { TraceRoute } from './trace-route'; @@ -185,6 +185,20 @@ 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