From 9fe0fa2a4b6973316561504699482460e70553c1 Mon Sep 17 00:00:00 2001
From: Arjunlal B <arjun@traceable.ai>
Date: Fri, 28 May 2021 21:36:01 +0530
Subject: [PATCH 1/3] feat: expose replaceHistory option via navigable tab
 component

---
 projects/common/src/navigation/navigation.service.ts        | 6 ++++--
 .../src/tabs/navigable/navigable-tab-group.component.ts     | 2 +-
 .../src/tabs/navigable/navigable-tab.component.ts           | 3 +++
 projects/components/src/tabs/navigable/navigable-tab.ts     | 1 +
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/projects/common/src/navigation/navigation.service.ts b/projects/common/src/navigation/navigation.service.ts
index 734576231..52468e619 100644
--- a/projects/common/src/navigation/navigation.service.ts
+++ b/projects/common/src/navigation/navigation.service.ts
@@ -131,13 +131,15 @@ export class NavigationService {
   public navigateWithinApp(
     path: NavigationPath,
     relativeTo?: ActivatedRoute,
-    preserveParameters?: string[]
+    preserveParameters?: string[],
+    replaceCurrentHistory?: boolean
   ): Observable<boolean> {
     return this.navigate({
       navType: NavigationParamsType.InApp,
       path: path,
       queryParams: this.buildQueryParam(preserveParameters ?? []),
-      relativeTo: relativeTo
+      relativeTo: relativeTo,
+      replaceCurrentHistory: replaceCurrentHistory
     });
   }
 
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..0d7621033 100644
--- a/projects/components/src/tabs/navigable/navigable-tab-group.component.ts
+++ b/projects/components/src/tabs/navigable/navigable-tab-group.component.ts
@@ -49,7 +49,7 @@ export class NavigableTabGroupComponent implements AfterContentInit {
   }
 
   public onTabClick(tab: NavigableTabComponent): void {
-    this.navigationService.navigateWithinApp([tab.path], this.activatedRoute);
+    this.navigationService.navigateWithinApp([tab.path], this.activatedRoute, [], tab.replaceHistory);
   }
 
   private findActiveTab(): NavigableTabComponent | undefined {
diff --git a/projects/components/src/tabs/navigable/navigable-tab.component.ts b/projects/components/src/tabs/navigable/navigable-tab.component.ts
index 68246ece1..8c5e15b31 100644
--- a/projects/components/src/tabs/navigable/navigable-tab.component.ts
+++ b/projects/components/src/tabs/navigable/navigable-tab.component.ts
@@ -18,6 +18,9 @@ export class NavigableTabComponent extends ContentHolder {
   @Input()
   public hidden: boolean = false;
 
+  @Input()
+  public replaceHistory?: boolean;
+
   @Input()
   public features: string[] = [];
 
diff --git a/projects/components/src/tabs/navigable/navigable-tab.ts b/projects/components/src/tabs/navigable/navigable-tab.ts
index cb197ee28..8c0ff18e9 100644
--- a/projects/components/src/tabs/navigable/navigable-tab.ts
+++ b/projects/components/src/tabs/navigable/navigable-tab.ts
@@ -3,4 +3,5 @@ export interface NavigableTab {
   label: string;
   hidden?: boolean;
   features?: string[];
+  replaceHistory?: boolean;
 }

From 49a5db7c6ce25545253a83847aebe94752560f89 Mon Sep 17 00:00:00 2001
From: Arjunlal B <arjun@traceable.ai>
Date: Sat, 29 May 2021 10:57:07 +0530
Subject: [PATCH 2/3] fix: use ht-link in tab component

---
 .../navigable/navigable-tab-group.component.ts    | 15 ++++++++++-----
 .../src/tabs/navigable/navigable-tab.module.ts    |  3 ++-
 2 files changed, 12 insertions(+), 6 deletions(-)

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 0d7621033..759eca59b 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';
@@ -15,12 +15,12 @@ import { NavigableTabComponent } from './navigable-tab.component';
         <ng-container *ngFor="let tab of this.tabs">
           <ng-container *ngIf="!tab.hidden">
             <div class="tab-button" *htIfFeature="tab.featureFlags | htFeature as featureState">
-              <a mat-tab-link (click)="this.onTabClick(tab)" class="tab-link" [active]="activeTab === tab">
+              <ht-link mat-tab-link [paramsOrUrl]="this.buildNavParamsForTab(tab)" class="tab-link">
                 <ng-container *ngTemplateOutlet="tab.content"></ng-container>
                 <span *ngIf="featureState === '${FeatureState.Preview}'" class="soon-container">
                   <span class="soon">SOON</span>
                 </span>
-              </a>
+              </ht-link>
               <div class="ink-bar" [ngClass]="{ active: activeTab === tab }"></div>
             </div>
           </ng-container>
@@ -48,8 +48,13 @@ export class NavigableTabGroupComponent implements AfterContentInit {
     );
   }
 
-  public onTabClick(tab: NavigableTabComponent): void {
-    this.navigationService.navigateWithinApp([tab.path], this.activatedRoute, [], tab.replaceHistory);
+  public buildNavParamsForTab(tab: NavigableTabComponent): NavigationParams {
+    return {
+      navType: NavigationParamsType.InApp,
+      path: tab.path,
+      relativeTo: this.activatedRoute,
+      replaceCurrentHistory: tab.replaceHistory
+    };
   }
 
   private findActiveTab(): NavigableTabComponent | undefined {
diff --git a/projects/components/src/tabs/navigable/navigable-tab.module.ts b/projects/components/src/tabs/navigable/navigable-tab.module.ts
index 882ee7fd3..a2c41c06a 100644
--- a/projects/components/src/tabs/navigable/navigable-tab.module.ts
+++ b/projects/components/src/tabs/navigable/navigable-tab.module.ts
@@ -4,12 +4,13 @@ import { MatTabsModule } from '@angular/material/tabs';
 import { RouterModule } from '@angular/router';
 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, LinkModule]
 })
 export class NavigableTabModule {}

From 3c51f24562a6d0f5c2c755860d001b2ca9a99ccc Mon Sep 17 00:00:00 2001
From: Arjunlal B <arjun@traceable.ai>
Date: Sat, 29 May 2021 11:04:44 +0530
Subject: [PATCH 3/3] fix: minor changes

---
 .../common/src/navigation/navigation.service.ts   |  6 ++----
 .../navigable/navigable-tab-group.component.ts    | 15 +++++++--------
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/projects/common/src/navigation/navigation.service.ts b/projects/common/src/navigation/navigation.service.ts
index 52468e619..734576231 100644
--- a/projects/common/src/navigation/navigation.service.ts
+++ b/projects/common/src/navigation/navigation.service.ts
@@ -131,15 +131,13 @@ export class NavigationService {
   public navigateWithinApp(
     path: NavigationPath,
     relativeTo?: ActivatedRoute,
-    preserveParameters?: string[],
-    replaceCurrentHistory?: boolean
+    preserveParameters?: string[]
   ): Observable<boolean> {
     return this.navigate({
       navType: NavigationParamsType.InApp,
       path: path,
       queryParams: this.buildQueryParam(preserveParameters ?? []),
-      relativeTo: relativeTo,
-      replaceCurrentHistory: replaceCurrentHistory
+      relativeTo: relativeTo
     });
   }
 
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 e7bcc7aa0..5c954ce83 100644
--- a/projects/components/src/tabs/navigable/navigable-tab-group.component.ts
+++ b/projects/components/src/tabs/navigable/navigable-tab-group.component.ts
@@ -15,7 +15,7 @@ import { NavigableTabComponent } from './navigable-tab.component';
         <ng-container *ngFor="let tab of this.tabs">
           <ng-container *ngIf="!tab.hidden">
             <div class="tab-button" *htIfFeature="tab.featureFlags | htFeature as featureState">
-              <ht-link mat-tab-link [paramsOrUrl]="this.buildNavParamsForTab(tab)" class="tab-link">
+              <ht-link mat-tab-link [paramsOrUrl]="buildNavParamsForTab | htMemoize: tab" class="tab-link">
                 <ng-container *ngTemplateOutlet="tab.content"></ng-container>
                 <span *ngIf="featureState === '${FeatureState.Preview}'" class="soon-container">
                   <span class="soon">SOON</span>
@@ -48,13 +48,12 @@ export class NavigableTabGroupComponent implements AfterContentInit {
     );
   }
 
-  public buildNavParamsForTab = (tab: NavigableTabComponent): NavigationParams =>
-    ({
-      navType: NavigationParamsType.InApp,
-      path: tab.path,
-      relativeTo: this.activatedRoute,
-      replaceCurrentHistory: tab.replaceHistory
-    })
+  public buildNavParamsForTab = (tab: NavigableTabComponent): NavigationParams => ({
+    navType: NavigationParamsType.InApp,
+    path: tab.path,
+    relativeTo: this.activatedRoute,
+    replaceCurrentHistory: tab.replaceHistory
+  });
 
   private findActiveTab(): NavigableTabComponent | undefined {
     return this.tabs.find(tab => this.navigationService.isRelativePathActive([tab.path], this.activatedRoute));