feat: support displaying beta tag in left nav item (#747)

* feat: support displaying beta tag in left nav item

Author: arjunlalb

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 {}

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 {}

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 {

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>
   `

projects/components/src/navigation/navigation-list.component.scss

@@ -84,5 +84,5 @@
 }
 
 .expanded {
-  width: 220px;
+  width: 228px;
 }

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;