feat: adding following supporting methods to navigation and link (#878)

* 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

* refactor: fix lint

Author: anandtiwary

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<boolean> {
+    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);
   }

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;
+  }
 }

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(`<ht-link [paramsOrUrl]="paramsOrUrl" [disabled]="true"></ht-link>`, {
+      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();

projects/components/src/link/link.component.ts

@@ -10,6 +10,7 @@ import { NavigationParams, NavigationPath, NavigationService } from '@hypertrace
     <a
       *ngIf="this.navigationPath"
       class="ht-link"
+      [ngClass]="{ disabled: this.disabled }"
       [routerLink]="this.navigationPath"
       [queryParams]="this.navigationOptions?.queryParams"
       [queryParamsHandling]="this.navigationOptions?.queryParamsHandling"
@@ -24,6 +25,9 @@ export class LinkComponent implements OnChanges {
   @Input()
   public paramsOrUrl?: NavigationParams | string;
 
+  @Input()
+  public disabled?: boolean;
+
   public navigationPath?: NavigationPath;
   public navigationOptions?: NavigationExtras;