Merge branch 'main' into entity-changes

Author: anandtiwary

Dockerfile

@@ -1,4 +1,4 @@
-FROM nginx:1.20-alpine
+FROM nginx:1.21-alpine
 COPY dist/hypertrace-ui /usr/share/nginx/html
 COPY conf/default.conf /etc/nginx/conf.d/default.conf
 EXPOSE 2020

projects/common/src/navigation/navigation.service.test.ts

@@ -1,6 +1,8 @@
 import { Location } from '@angular/common';
 import { Router, UrlSegment } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
+import { IconType } from '@hypertrace/assets-library';
+import { NavItemType } from '@hypertrace/components';
 import { patchRouterNavigateForTest } from '@hypertrace/test-utils';
 import { createServiceFactory, mockProvider, SpectatorService } from '@ngneat/spectator/jest';
 import {
@@ -47,6 +49,7 @@ describe('Navigation Service', () => {
       RouterTestingModule.withRoutes([
         {
           path: 'root',
+          data: { features: ['test-feature'] },
           children: [firstChildRouteConfig, secondChildRouteConfig]
         }
       ])
@@ -285,4 +288,34 @@ describe('Navigation Service', () => {
       );
     }
   });
+
+  test('decorating navItem with features work as expected', () => {
+    expect(
+      spectator.service.decorateNavItem(
+        {
+          type: NavItemType.Header,
+          label: 'Label'
+        },
+        spectator.service.getCurrentActivatedRoute()
+      )
+    ).toEqual({ type: NavItemType.Header, label: 'Label' });
+
+    expect(
+      spectator.service.decorateNavItem(
+        {
+          type: NavItemType.Link,
+          label: 'Label',
+          icon: IconType.None,
+          matchPaths: ['root']
+        },
+        spectator.service.rootRoute()
+      )
+    ).toEqual({
+      type: NavItemType.Link,
+      label: 'Label',
+      icon: IconType.None,
+      matchPaths: ['root'],
+      features: ['test-feature']
+    });
+  });
 });

projects/common/src/navigation/navigation.service.ts

@@ -13,6 +13,8 @@ import {
   UrlSegment,
   UrlTree
 } from '@angular/router';
+import { NavItemConfig, NavItemType } from '@hypertrace/components';
+import { uniq } from 'lodash-es';
 import { from, Observable, of } from 'rxjs';
 import { distinctUntilChanged, filter, map, share, skip, startWith, switchMap, take } from 'rxjs/operators';
 import { isEqualIgnoreFunctions, throwIfNil } from '../utilities/lang/lang-utils';
@@ -229,6 +231,26 @@ export class NavigationService {
     return this.findRouteConfig(path, childRoutes ? childRoutes : []);
   }
 
+  public decorateNavItem(navItem: NavItemConfig, activatedRoute: ActivatedRoute): NavItemConfig {
+    if (navItem.type !== NavItemType.Link) {
+      return { ...navItem };
+    }
+    const features = navItem.matchPaths
+      .map(path => this.getRouteConfig([path], activatedRoute))
+      .filter((maybeRoute): maybeRoute is HtRoute => maybeRoute !== undefined)
+      .flatMap(route => this.getFeaturesForRoute(route))
+      .concat(navItem.features || []);
+
+    return {
+      ...navItem,
+      features: uniq(features)
+    };
+  }
+
+  private getFeaturesForRoute(route: HtRoute): string[] {
+    return (route.data && route.data.features) || [];
+  }
+
   public rootRoute(): ActivatedRoute {
     return this.router.routerState.root;
   }

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

@@ -27,6 +27,9 @@ export class SelectOptionComponent<V> implements OnChanges, SelectOption<V> {
   @Input()
   public iconColor?: string;
 
+  @Input()
+  public disabled?: boolean;
+
   private readonly optionChangeSubject$: Subject<V> = new Subject<V>();
   public readonly optionChange$: Observable<V> = this.optionChangeSubject$.asObservable();
 

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

@@ -4,4 +4,5 @@ export interface SelectOption<V> {
   selectedLabel?: string;
   icon?: string;
   iconColor?: string;
+  disabled?: boolean;
 }

projects/components/src/select/select.component.scss

@@ -165,6 +165,11 @@
     justify-content: space-between;
     white-space: nowrap;
 
+    &.disabled {
+      color: $gray-5;
+      cursor: not-allowed;
+    }
+
     .select-option-info {
       display: flex;
       flex-direction: row;

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

@@ -2,7 +2,7 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { fakeAsync, flush } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { IconLibraryTestingModule, IconType } from '@hypertrace/assets-library';
-import { NavigationService } from '@hypertrace/common';
+import { MemoizeModule, NavigationService } from '@hypertrace/common';
 import { IconComponent } from '@hypertrace/components';
 import { createHostFactory, mockProvider, SpectatorHost } from '@ngneat/spectator/jest';
 import { MockComponent } from 'ng-mocks';
@@ -15,7 +15,7 @@ import { SelectModule } from './select.module';
 describe('Select Component', () => {
   const hostFactory = createHostFactory<SelectComponent<string>>({
     component: SelectComponent,
-    imports: [SelectModule, HttpClientTestingModule, IconLibraryTestingModule],
+    imports: [SelectModule, HttpClientTestingModule, IconLibraryTestingModule, MemoizeModule],
     declareComponent: false,
     declarations: [MockComponent(IconComponent)],
     providers: [
@@ -282,4 +282,44 @@ describe('Select Component', () => {
     expect(onChange).toHaveBeenCalledWith('none-id');
     flush();
   }));
+
+  test('should disable select options as expected', fakeAsync(() => {
+    const onChange = jest.fn();
+
+    spectator = hostFactory(
+      `
+    <ht-select (selectedChange)="onChange($event)">
+      <ht-select-option *ngFor="let option of options" [label]="option.label" [value]="option.value" [disabled]="option.disabled"></ht-select-option>
+    </ht-select>`,
+      {
+        hostProps: {
+          options: [
+            { label: 'first', value: 'first-value' },
+            { label: 'second', value: 'second-value', disabled: true },
+            {
+              label: 'third',
+              value: 'third-value',
+              selectedLabel: 'Third Value!!!',
+              icon: 'test-icon',
+              iconColor: 'red'
+            }
+          ],
+          onChange: onChange
+        }
+      }
+    );
+
+    spectator.tick();
+    spectator.click('.trigger-content');
+
+    const optionElements = spectator.queryAll('.select-option', { root: true });
+    expect(optionElements.length).toBe(3);
+    expect(optionElements[0]).not.toHaveClass('disabled');
+    expect(optionElements[1]).toHaveClass('disabled');
+    expect(optionElements[2]).not.toHaveClass('disabled');
+    spectator.click(optionElements[1]);
+
+    expect(onChange).not.toHaveBeenCalled();
+    flush();
+  }));
 });

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

@@ -114,7 +114,7 @@ import { SelectSize } from './select-size';
               *ngFor="let item of items"
               (click)="this.onSelectionChange(item)"
               class="select-option"
-              [ngClass]="this.size"
+              [ngClass]="this.getStyleClassesForSelectItem | htMemoize: this.size:item"
             >
               <div class="select-option-info">
                 <ht-icon
@@ -241,6 +241,10 @@ export class SelectComponent<V> implements AfterContentInit, OnChanges {
   }
 
   public onSelectionChange(item: SelectOptionComponent<V>): void {
+    if (item.disabled) {
+      return;
+    }
+
     this.selected = item.value;
     this.selected$ = this.buildObservableOfSelected();
     this.selectedChange.emit(this.selected);
@@ -255,6 +259,16 @@ export class SelectComponent<V> implements AfterContentInit, OnChanges {
 
     return this.items.find(item => item.value === value);
   }
+
+  public getStyleClassesForSelectItem(size: SelectSize, item: SelectOptionComponent<V>): string[] {
+    const styles: string[] = [size];
+
+    if (item.disabled) {
+      styles.push('disabled');
+    }
+
+    return styles;
+  }
 }
 
 export const enum SelectTriggerDisplayMode {

projects/components/src/select/select.module.ts

@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { MemoizeModule } from '@hypertrace/common';
 import { DividerModule } from '../divider/divider.module';
 import { IconModule } from '../icon/icon.module';
 import { LabelModule } from '../label/label.module';
@@ -21,7 +22,8 @@ import { SelectComponent } from './select.component';
     LetAsyncModule,
     PopoverModule,
     TooltipModule,
-    DividerModule
+    DividerModule,
+    MemoizeModule
   ],
   declarations: [SelectComponent, SelectOptionComponent, SelectGroupComponent, SelectControlOptionComponent],
   exports: [SelectComponent, SelectOptionComponent, SelectGroupComponent, SelectControlOptionComponent]

src/app/shared/navigation/navigation.component.test.ts

@@ -18,7 +18,8 @@ describe('NavigationComponent', () => {
           data: {
             features: ['example-feature']
           }
-        })
+        }),
+        decorateNavItem: jest.fn().mockImplementation(navItem => ({ ...navItem, features: ['example-feature'] }))
       }),
       mockProvider(ActivatedRoute),
       mockProvider(PreferenceService, { get: jest.fn().mockReturnValue(of(false)) })