Merge branch 'main' into sort-icon

Author: DmitiryPotychkin

projects/components/src/select/select-option.component.ts

@@ -15,6 +15,9 @@ export class SelectOptionComponent<V> implements OnChanges, SelectOption<V> {
   @Input()
   public label!: string;
 
+  @Input()
+  public selectedLabel?: string;
+
   @Input()
   public style: SelectOptionStyle = SelectOptionStyle.Default;
 

projects/components/src/select/select-option.ts

@@ -1,6 +1,7 @@
 export interface SelectOption<V> {
   value: V;
   label: string;
+  selectedLabel?: string;
   icon?: string;
   iconColor?: string;
 }

projects/components/src/select/select.component.test.ts

@@ -27,10 +27,10 @@ describe('Select Component', () => {
   const selectionOptions = [
     { label: 'first', value: 'first-value' },
     { label: 'second', value: 'second-value' },
-    { label: 'third', value: 'third-value' }
+    { label: 'third', value: 'third-value', selectedLabel: 'Third Value!!!' }
   ];
 
-  test('should display intial selection', fakeAsync(() => {
+  test('should display initial selection', fakeAsync(() => {
     spectator = hostFactory(
       `
     <ht-select [selected]="selected">
@@ -127,7 +127,7 @@ describe('Select Component', () => {
     spectator = hostFactory(
       `
     <ht-select [selected]="selected" (selectedChange)="onChange($event)">
-      <ht-select-option *ngFor="let option of options" [label]="option.label" [value]="option.value">
+      <ht-select-option *ngFor="let option of options" [label]="option.label" [value]="option.value" [selectedLabel]="option.selectedLabel">
       </ht-select-option>
     </ht-select>`,
       {
@@ -140,14 +140,15 @@ describe('Select Component', () => {
     );
 
     spectator.tick();
+    expect(spectator.query('.trigger-content')).toHaveText(selectionOptions[1].label);
     spectator.click('.trigger-content');
 
     const optionElements = spectator.queryAll('.select-option', { root: true });
     spectator.click(optionElements[2]);
 
     expect(onChange).toHaveBeenCalledTimes(1);
     expect(onChange).toHaveBeenCalledWith(selectionOptions[2].value);
-    expect(spectator.element).toHaveText(selectionOptions[2].label);
+    expect(spectator.query('.trigger-content')).toHaveText(selectionOptions[2].selectedLabel!);
     flush();
   }));
 

projects/components/src/select/select.component.ts

@@ -54,7 +54,8 @@ import { SelectSize } from './select-size';
             >
               <ht-icon *ngIf="this.icon" class="trigger-prefix-icon" [icon]="this.icon" [size]="this.iconSize">
               </ht-icon>
-              <ht-label class="trigger-label" [label]="selected?.label || this.placeholder"> </ht-label>
+              <ht-label class="trigger-label" [label]="selected?.selectedLabel || selected?.label || this.placeholder">
+              </ht-label>
               <ht-icon class="trigger-icon" icon="${IconType.ChevronDown}" size="${IconSize.ExtraSmall}"> </ht-icon>
             </div>
             <div

projects/distributed-tracing/src/shared/dashboard/dashboard-wrapper/navigable-dashboard.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
-import { TypedSimpleChanges } from '@hypertrace/common';
+import { Dictionary, TypedSimpleChanges } from '@hypertrace/common';
 import { Filter } from '@hypertrace/components';
 import { DashboardPersistenceService } from '@hypertrace/dashboards';
 import { Dashboard, ModelJson } from '@hypertrace/hyperdash';
@@ -37,10 +37,13 @@ import { GraphQlFilterDataSourceModel } from '../data/graphql/filter/graphql-fil
 })
 export class NavigableDashboardComponent implements OnChanges {
   @Input()
-  public readonly defaultJson?: ModelJson;
+  public navLocation?: string | null;
 
   @Input()
-  public navLocation?: string | null;
+  public defaultJson?: ModelJson;
+
+  @Input()
+  public variables?: Dictionary<unknown>;
 
   @Input()
   public filterConfig?: NavigableDashboardFilterConfig;
@@ -89,6 +92,7 @@ export class NavigableDashboardComponent implements OnChanges {
 
   public onDashboardReady(dashboard: Dashboard): void {
     this.dashboard = dashboard;
+    this.applyVariablesToDashboard(this.dashboard, this.variables);
     this.applyFiltersToDashboard(dashboard, this.explicitFilters);
     this.dashboardReady.emit(dashboard);
   }
@@ -100,6 +104,12 @@ export class NavigableDashboardComponent implements OnChanges {
     }
   }
 
+  public applyVariablesToDashboard(dashboard: Dashboard, variables: Dictionary<unknown> = {}): void {
+    for (const key of Object.keys(variables)) {
+      dashboard.setVariable(key, variables[key]);
+    }
+  }
+
   public applyFiltersToDashboard(dashboard: Dashboard, explicitFilters: Filter[]): void {
     const rootDataSource = dashboard.getRootDataSource<GraphQlFilterDataSourceModel>();
     rootDataSource