From a5510fcba065b9120170c6e61905316ceee87cf8 Mon Sep 17 00:00:00 2001
From: Arjunlal B <arjun@traceable.ai>
Date: Tue, 6 Apr 2021 10:15:12 +0530
Subject: [PATCH 1/2] feat: support displaying beta tag in left nav item

---
 projects/components/src/beta-tag/beta-tag.component.ts    | 8 +++++++-
 projects/components/src/beta-tag/beta-tag.module.ts       | 3 ++-
 .../src/navigation/nav-item/nav-item.component.scss       | 5 +++++
 .../src/navigation/nav-item/nav-item.component.ts         | 1 +
 .../src/navigation/navigation-list.component.scss         | 2 ++
 .../src/navigation/navigation-list.component.ts           | 1 +
 6 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/projects/components/src/beta-tag/beta-tag.component.ts b/projects/components/src/beta-tag/beta-tag.component.ts
index 238acdcb9..ef0c01486 100644
--- a/projects/components/src/beta-tag/beta-tag.component.ts
+++ b/projects/components/src/beta-tag/beta-tag.component.ts
@@ -5,7 +5,13 @@ import { Color } from '@hypertrace/common';
   selector: 'ht-beta-tag',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <ht-label-tag label="Beta" backgroundColor="${Color.Purple2}" labelColor="${Color.Purple5}"></ht-label-tag>
+    <ht-label-tag
+      htTooltip="Beta Feature"
+      class="beta-tag"
+      label="Beta"
+      backgroundColor="${Color.Purple2}"
+      labelColor="${Color.Purple5}"
+    ></ht-label-tag>
   `
 })
 export class BetaTagComponent {}
diff --git a/projects/components/src/beta-tag/beta-tag.module.ts b/projects/components/src/beta-tag/beta-tag.module.ts
index 1f359d0f6..7c2ad5e39 100644
--- a/projects/components/src/beta-tag/beta-tag.module.ts
+++ b/projects/components/src/beta-tag/beta-tag.module.ts
@@ -1,10 +1,11 @@
 import { NgModule } from '@angular/core';
 import { LabelTagModule } from '../label-tag/label-tag.module';
+import { TooltipModule } from '../tooltip/tooltip.module';
 import { BetaTagComponent } from './beta-tag.component';
 
 @NgModule({
   declarations: [BetaTagComponent],
-  imports: [LabelTagModule],
+  imports: [LabelTagModule, TooltipModule],
   exports: [BetaTagComponent]
 })
 export class BetaTagModule {}
diff --git a/projects/components/src/navigation/nav-item/nav-item.component.scss b/projects/components/src/navigation/nav-item/nav-item.component.scss
index 373850f49..9eb12d8ff 100644
--- a/projects/components/src/navigation/nav-item/nav-item.component.scss
+++ b/projects/components/src/navigation/nav-item/nav-item.component.scss
@@ -19,6 +19,11 @@
     margin-left: 14px;
     display: flex;
     flex-direction: row;
+    align-items: center;
+
+    .beta {
+      margin-left: 8px;
+    }
   }
 
   .icon {
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 ada92a9df..c5cc76a87 100644
--- a/projects/components/src/navigation/nav-item/nav-item.component.ts
+++ b/projects/components/src/navigation/nav-item/nav-item.component.ts
@@ -27,6 +27,7 @@ import { NavItemLinkConfig } from '../navigation-list.component';
         <span *ngIf="featureState === '${FeatureState.Preview}'" class="soon-container">
           <span class="soon">SOON</span>
         </span>
+        <ht-beta-tag *ngIf="config.isBeta" class="beta"></ht-beta-tag>
       </div>
     </div>
   `
diff --git a/projects/components/src/navigation/navigation-list.component.scss b/projects/components/src/navigation/navigation-list.component.scss
index 0b1c74e2b..a604f9b70 100644
--- a/projects/components/src/navigation/navigation-list.component.scss
+++ b/projects/components/src/navigation/navigation-list.component.scss
@@ -85,4 +85,6 @@
 
 .expanded {
   width: 220px;
+  overflow-x: hidden;
+  resize: horizontal;
 }
diff --git a/projects/components/src/navigation/navigation-list.component.ts b/projects/components/src/navigation/navigation-list.component.ts
index c4e4c6860..bae623b48 100644
--- a/projects/components/src/navigation/navigation-list.component.ts
+++ b/projects/components/src/navigation/navigation-list.component.ts
@@ -122,6 +122,7 @@ export interface NavItemLinkConfig {
   matchPaths: string[]; // For now, default path is index 0
   features?: string[];
   replaceCurrentHistory?: boolean;
+  isBeta?: boolean;
 }
 
 export type FooterItemConfig = FooterItemLinkConfig;

From ac7c09fa7bdea49ed50d06b34688c23d81aee999 Mon Sep 17 00:00:00 2001
From: Arjunlal B <arjun@traceable.ai>
Date: Tue, 6 Apr 2021 17:43:49 +0530
Subject: [PATCH 2/2] fix: remove resizing and increase width

---
 .../components/src/navigation/navigation-list.component.scss  | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/projects/components/src/navigation/navigation-list.component.scss b/projects/components/src/navigation/navigation-list.component.scss
index a604f9b70..64c46c41d 100644
--- a/projects/components/src/navigation/navigation-list.component.scss
+++ b/projects/components/src/navigation/navigation-list.component.scss
@@ -84,7 +84,5 @@
 }
 
 .expanded {
-  width: 220px;
-  overflow-x: hidden;
-  resize: horizontal;
+  width: 228px;
 }