feat: adding inherit color from text input to entity (#826)

Author: anandtiwary

projects/observability/src/shared/components/entity-renderer/entity-renderer.component.scss

@@ -2,11 +2,12 @@
 @import 'font';
 
 .ht-entity-renderer {
+  @include body-1-regular(currentColor);
   display: flex;
   flex-direction: row;
   align-items: center;
   font-weight: inherit;
-  @include body-1-regular();
+  color: $gray-9;
 
   .icon {
     padding-right: 12px;
@@ -20,3 +21,7 @@
 .navigable {
   @include link-hover();
 }
+
+.inherit-text-color {
+  @include body-1-regular(inherit);
+}

projects/observability/src/shared/components/entity-renderer/entity-renderer.component.test.ts

@@ -134,4 +134,32 @@ describe('Entity Renderer Component', () => {
     });
     expect(spectator.query(IconComponent)?.icon).toEqual(IconType.Add);
   });
+
+  test('should inherit text color when enabled', () => {
+    const entity = {
+      [entityIdKey]: 'test-id',
+      [entityTypeKey]: ObservabilityEntityType.Api,
+      name: 'test api'
+    };
+
+    spectator = createHost(
+      `<ht-entity-renderer [entity]="entity" [inheritTextColor]="inheritTextColor">
+      </ht-entity-renderer>`,
+      {
+        hostProps: {
+          entity: entity,
+          inheritTextColor: false
+        }
+      }
+    );
+
+    expect(spectator.query('.inherit-text-color')).not.toExist();
+
+    spectator.setHostInput({
+      inheritTextColor: true
+    });
+    expect(spectator.query('.inherit-text-color')).toExist();
+
+    expect(spectator.query('.ht-entity-renderer')).toEqual(spectator.query('.inherit-text-color'));
+  });
 });

projects/observability/src/shared/components/entity-renderer/entity-renderer.component.ts

@@ -13,7 +13,7 @@ import { EntityNavigationService } from '../../services/navigation/entity/entity
     <div
       *ngIf="this.name"
       class="ht-entity-renderer"
-      [ngClass]="{ navigable: this.navigable }"
+      [ngClass]="{ navigable: this.navigable, 'inherit-text-color': this.inheritTextColor }"
       [htTooltip]="this.name"
       (click)="this.navigable && this.onClickNavigate()"
     >
@@ -44,6 +44,9 @@ export class EntityRendererComponent implements OnChanges {
   @Input()
   public showIcon: boolean = false;
 
+  @Input()
+  public inheritTextColor: boolean = false;
+
   public name?: string;
   public entityIconType?: string;