From 4a64b44393e3e86e04781a1d910e8a5d5b0af846 Mon Sep 17 00:00:00 2001 From: Arjunlal B Date: Sat, 3 Jul 2021 09:55:16 +0530 Subject: [PATCH 1/5] fix: rename route interface --- projects/common/src/feature/feature.guard.test.ts | 4 ++-- projects/common/src/feature/feature.guard.ts | 8 ++++---- .../src/navigation/{route-data.ts => ht-route-data.ts} | 2 +- projects/common/src/navigation/ht-route.ts | 7 +++++++ projects/common/src/navigation/navigation.service.ts | 10 +++++----- projects/common/src/navigation/trace-route.ts | 7 ------- projects/common/src/public-api.ts | 4 ++-- .../src/breadcrumbs/breadcrumbs.service.test.ts | 4 ++-- .../src/pages/spans/span-list.page.module.ts | 4 ++-- .../src/pages/trace-detail/trace-detail.page.module.ts | 4 ++-- .../api-trace-detail/api-trace-detail.page.module.ts | 4 ++-- src/app/home/home.module.ts | 4 ++-- .../application-flow-routing.module.ts | 4 ++-- .../backend-detail/backend-detail-routing.module.ts | 4 ++-- src/app/routes/backends/backends-routing.module.ts | 4 ++-- .../endpoint-detail/endpoint-detail-routing.module.ts | 4 ++-- src/app/routes/endpoints/endpoint-routing.module.ts | 4 ++-- src/app/routes/explorer/explorer-routing.module.ts | 4 ++-- src/app/routes/root-routing.module.ts | 4 ++-- .../service-detail/service-detail-routing.module.ts | 4 ++-- src/app/routes/services/services-routing.module.ts | 4 ++-- src/app/shared/navigation/navigation.component.ts | 6 +++--- 22 files changed, 52 insertions(+), 52 deletions(-) rename projects/common/src/navigation/{route-data.ts => ht-route-data.ts} (83%) create mode 100644 projects/common/src/navigation/ht-route.ts delete mode 100644 projects/common/src/navigation/trace-route.ts diff --git a/projects/common/src/feature/feature.guard.test.ts b/projects/common/src/feature/feature.guard.test.ts index 93b2dc54a..2c118ea6f 100644 --- a/projects/common/src/feature/feature.guard.test.ts +++ b/projects/common/src/feature/feature.guard.test.ts @@ -5,14 +5,14 @@ import { patchRouterNavigateForTest, runFakeRxjs } from '@hypertrace/test-utils' import { createServiceFactory, mockProvider } from '@ngneat/spectator/jest'; import { Observable, of } from 'rxjs'; import { map } from 'rxjs/operators'; +import { HtRoute } from '../navigation/ht-route'; import { NavigationService } from '../navigation/navigation.service'; -import { TraceRoute } from '../navigation/trace-route'; import { FeatureGuard } from './feature.guard'; import { FeatureStateResolver } from './state/feature-state.resolver'; import { FeatureState } from './state/feature.state'; describe('Feature Guard', () => { - const buildRouteForFeatures = (features: string[]): TraceRoute => ({ + const buildRouteForFeatures = (features: string[]): HtRoute => ({ data: { features: features } diff --git a/projects/common/src/feature/feature.guard.ts b/projects/common/src/feature/feature.guard.ts index 38603d9e0..3fb13007f 100644 --- a/projects/common/src/feature/feature.guard.ts +++ b/projects/common/src/feature/feature.guard.ts @@ -2,8 +2,8 @@ import { Injectable } from '@angular/core'; import { ActivatedRouteSnapshot, CanActivate, CanLoad, UrlSegment, UrlTree } from '@angular/router'; import { Observable, of } from 'rxjs'; import { catchError, map, tap } from 'rxjs/operators'; +import { HtRoute } from '../navigation/ht-route'; import { NavigationService } from '../navigation/navigation.service'; -import { TraceRoute } from '../navigation/trace-route'; import { FeatureStateResolver } from './state/feature-state.resolver'; import { FeatureState } from './state/feature.state'; @@ -14,7 +14,7 @@ export class FeatureGuard implements CanLoad, CanActivate { private readonly featureStateResolver: FeatureStateResolver ) {} - public canLoad(route: TraceRoute, segments: UrlSegment[]): Observable { + public canLoad(route: HtRoute, segments: UrlSegment[]): Observable { // TODO as of ng8, canLoad has been pretty neglected. Doesn't have access to query params or returning a url tree // Https://github.com/angular/angular/issues/30633 https://github.com/angular/angular/issues/28306 // For now, we'll work around by ignoring query params and doing a direct redirect @@ -44,7 +44,7 @@ export class FeatureGuard implements CanLoad, CanActivate { ); } - private checkRouteValidity(route: TraceRoute): Observable { + private checkRouteValidity(route: HtRoute): Observable { return this.getCombinedFeatureState(this.getFeaturesForRoute(route)).pipe( catchError(() => of(FeatureState.Disabled)), map(state => state !== FeatureState.Disabled) @@ -55,7 +55,7 @@ export class FeatureGuard implements CanLoad, CanActivate { return this.featureStateResolver.getCombinedFeatureState(features); } - private getFeaturesForRoute(route: TraceRoute): string[] { + private getFeaturesForRoute(route: HtRoute): string[] { return (route.data && route.data.features) || []; } } diff --git a/projects/common/src/navigation/route-data.ts b/projects/common/src/navigation/ht-route-data.ts similarity index 83% rename from projects/common/src/navigation/route-data.ts rename to projects/common/src/navigation/ht-route-data.ts index 905a31231..7a90f06ef 100644 --- a/projects/common/src/navigation/route-data.ts +++ b/projects/common/src/navigation/ht-route-data.ts @@ -1,7 +1,7 @@ import { Observable } from 'rxjs'; import { Breadcrumb } from './breadcrumb'; -export interface RouteData { +export interface HtRouteData { breadcrumb?: Breadcrumb | Observable; features?: string[]; } diff --git a/projects/common/src/navigation/ht-route.ts b/projects/common/src/navigation/ht-route.ts new file mode 100644 index 000000000..ef25c9288 --- /dev/null +++ b/projects/common/src/navigation/ht-route.ts @@ -0,0 +1,7 @@ +import { Route } from '@angular/router'; +import { HtRouteData } from './ht-route-data'; + +export interface HtRoute extends Route { + data?: HtRouteData; + children?: HtRoute[]; +} diff --git a/projects/common/src/navigation/navigation.service.ts b/projects/common/src/navigation/navigation.service.ts index 3311abe95..1ad2de08f 100644 --- a/projects/common/src/navigation/navigation.service.ts +++ b/projects/common/src/navigation/navigation.service.ts @@ -17,7 +17,7 @@ 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'; import { Dictionary } from '../utilities/types/types'; -import { TraceRoute } from './trace-route'; +import { HtRoute } from './ht-route'; @Injectable({ providedIn: 'root' }) export class NavigationService { @@ -222,7 +222,7 @@ export class NavigationService { public getRouteConfig( path: string[], relativeTo: ActivatedRoute = this.getCurrentActivatedRoute() - ): TraceRoute | undefined { + ): HtRoute | undefined { const childRoutes = relativeTo === this.rootRoute() ? this.router.config : relativeTo.routeConfig && relativeTo.routeConfig.children; @@ -233,7 +233,7 @@ export class NavigationService { return this.router.routerState.root; } - public currentRouteConfig(): TraceRoute { + public currentRouteConfig(): HtRoute { return throwIfNil(this.getCurrentActivatedRoute().routeConfig); } @@ -303,7 +303,7 @@ export class NavigationService { }); } - private findRouteConfig(path: string[], routes: TraceRoute[]): TraceRoute | undefined { + private findRouteConfig(path: string[], routes: HtRoute[]): HtRoute | undefined { if (path.length === 0) { return undefined; } @@ -320,7 +320,7 @@ export class NavigationService { return this.router.routerState.snapshot.root.queryParamMap; } - private findMatchingRoute(pathSegment: string, routes: TraceRoute[]): TraceRoute | undefined { + private findMatchingRoute(pathSegment: string, routes: HtRoute[]): HtRoute | undefined { return routes .filter( // First, filter to anything that potentially matches diff --git a/projects/common/src/navigation/trace-route.ts b/projects/common/src/navigation/trace-route.ts deleted file mode 100644 index 04f3aafa6..000000000 --- a/projects/common/src/navigation/trace-route.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Route } from '@angular/router'; -import { RouteData } from './route-data'; - -export interface TraceRoute extends Route { - data?: RouteData; - children?: TraceRoute[]; -} diff --git a/projects/common/src/public-api.ts b/projects/common/src/public-api.ts index fe2efa56e..aae6ba442 100644 --- a/projects/common/src/public-api.ts +++ b/projects/common/src/public-api.ts @@ -81,8 +81,8 @@ export * from './utilities/memoize/memoize.pipe'; // Navigation export * from './navigation/breadcrumb'; export * from './navigation/navigation.service'; -export * from './navigation/route-data'; -export * from './navigation/trace-route'; +export * from './navigation/ht-route-data'; +export * from './navigation/ht-route'; // Operations export * from './utilities/operations/operation-utilities'; diff --git a/projects/components/src/breadcrumbs/breadcrumbs.service.test.ts b/projects/components/src/breadcrumbs/breadcrumbs.service.test.ts index 87324f48c..eca5d778c 100644 --- a/projects/components/src/breadcrumbs/breadcrumbs.service.test.ts +++ b/projects/components/src/breadcrumbs/breadcrumbs.service.test.ts @@ -1,5 +1,5 @@ import { IconType } from '@hypertrace/assets-library'; -import { Breadcrumb, NavigationService, RouteData } from '@hypertrace/common'; +import { Breadcrumb, HtRouteData, NavigationService } from '@hypertrace/common'; import { runFakeRxjs } from '@hypertrace/test-utils'; import { createServiceFactory, mockProvider } from '@ngneat/spectator/jest'; import { NEVER, Observable, of, throwError } from 'rxjs'; @@ -118,6 +118,6 @@ interface ActivatedRouteSnapshotBuildData { interface ActivatedRouteSnapshotMock { pathFromRoot: ActivatedRouteSnapshotMock[]; - data: RouteData; + data: HtRouteData; url: { path: string }[]; } diff --git a/projects/distributed-tracing/src/pages/spans/span-list.page.module.ts b/projects/distributed-tracing/src/pages/spans/span-list.page.module.ts index fd9e6ffa9..d3dc08772 100644 --- a/projects/distributed-tracing/src/pages/spans/span-list.page.module.ts +++ b/projects/distributed-tracing/src/pages/spans/span-list.page.module.ts @@ -1,13 +1,13 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { TraceRoute } from '@hypertrace/common'; +import { HtRoute } from '@hypertrace/common'; import { NavigableDashboardModule } from '../../shared/dashboard/dashboard-wrapper/navigable-dashboard.module'; import { TracingDashboardModule } from '../../shared/dashboard/tracing-dashboard.module'; import { SpanListPageComponent } from './span-list.page.component'; import { spanListDashboard } from './span-list.page.dashboard'; -const ROUTE_CONFIG: TraceRoute[] = [ +const ROUTE_CONFIG: HtRoute[] = [ { path: '', component: SpanListPageComponent diff --git a/projects/distributed-tracing/src/pages/trace-detail/trace-detail.page.module.ts b/projects/distributed-tracing/src/pages/trace-detail/trace-detail.page.module.ts index 576bb1def..75ab4b044 100644 --- a/projects/distributed-tracing/src/pages/trace-detail/trace-detail.page.module.ts +++ b/projects/distributed-tracing/src/pages/trace-detail/trace-detail.page.module.ts @@ -1,7 +1,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { FormattingModule, TraceRoute } from '@hypertrace/common'; +import { FormattingModule, HtRoute } from '@hypertrace/common'; import { CopyShareableLinkToClipboardModule, DownloadJsonModule, @@ -20,7 +20,7 @@ import { TraceSequenceComponent } from './sequence/trace-sequence.component'; import { traceSequenceDashboard } from './sequence/trace-sequence.dashboard'; import { TraceDetailPageComponent } from './trace-detail.page.component'; -const ROUTE_CONFIG: TraceRoute[] = [ +const ROUTE_CONFIG: HtRoute[] = [ { path: `:${TraceDetailPageComponent.TRACE_ID_PARAM_NAME}`, component: TraceDetailPageComponent, diff --git a/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.module.ts b/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.module.ts index c5a636468..3959947cd 100644 --- a/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.module.ts +++ b/projects/observability/src/pages/api-trace-detail/api-trace-detail.page.module.ts @@ -1,7 +1,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { FormattingModule, TraceRoute } from '@hypertrace/common'; +import { FormattingModule, HtRoute } from '@hypertrace/common'; import { ButtonModule, CopyShareableLinkToClipboardModule, @@ -18,7 +18,7 @@ import { ApiTraceLogsComponent } from './logs/api-trace-logs.component'; import { ApiTraceSequenceComponent } from './sequence/api-trace-sequence.component'; import { apiTraceSequenceDashboard } from './sequence/api-trace-sequence.dashboard'; -const ROUTE_CONFIG: TraceRoute[] = [ +const ROUTE_CONFIG: HtRoute[] = [ { path: `:${ApiTraceDetailPageComponent.TRACE_ID_PARAM_NAME}`, component: ApiTraceDetailPageComponent, diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts index d8d7dadbf..eca03138f 100644 --- a/src/app/home/home.module.ts +++ b/src/app/home/home.module.ts @@ -1,7 +1,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { TraceRoute } from '@hypertrace/common'; +import { HtRoute } from '@hypertrace/common'; import { NavigableDashboardModule } from '@hypertrace/distributed-tracing'; import { ObservabilityDashboardModule } from '@hypertrace/observability'; import { TotalErrorsLabelDataSourceModule } from './data/label/total-errors-label-data-source.module'; @@ -9,7 +9,7 @@ import { ObserveSystemRadarDataSourceModule } from './data/system/observe-system import { HomeComponent } from './home.component'; import { homeDashboard } from './home.dashboard'; -const ROUTE_CONFIG: TraceRoute[] = [ +const ROUTE_CONFIG: HtRoute[] = [ { path: '', component: HomeComponent diff --git a/src/app/routes/application-flow/application-flow-routing.module.ts b/src/app/routes/application-flow/application-flow-routing.module.ts index f895b80a4..d9821abb7 100644 --- a/src/app/routes/application-flow/application-flow-routing.module.ts +++ b/src/app/routes/application-flow/application-flow-routing.module.ts @@ -1,10 +1,10 @@ import { RouterModule } from '@angular/router'; import { NgModule } from '@angular/core'; -import { TraceRoute } from '@hypertrace/common'; +import { HtRoute } from '@hypertrace/common'; import { ApplicationFlowComponent, ApplicationFlowModule } from '@hypertrace/observability'; -const ROUTE_CONFIG: TraceRoute[] = [ +const ROUTE_CONFIG: HtRoute[] = [ { path: '', component: ApplicationFlowComponent diff --git a/src/app/routes/backends/backend-detail/backend-detail-routing.module.ts b/src/app/routes/backends/backend-detail/backend-detail-routing.module.ts index 90c3c9363..9a13ed37e 100644 --- a/src/app/routes/backends/backend-detail/backend-detail-routing.module.ts +++ b/src/app/routes/backends/backend-detail/backend-detail-routing.module.ts @@ -1,4 +1,4 @@ -import { TraceRoute } from '@hypertrace/common'; +import { HtRoute } from '@hypertrace/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; @@ -10,7 +10,7 @@ import { BackendTraceListComponent } from '@hypertrace/observability'; -const ROUTE_CONFIG: TraceRoute[] = [ +const ROUTE_CONFIG: HtRoute[] = [ { path: '', component: BackendDetailComponent, diff --git a/src/app/routes/backends/backends-routing.module.ts b/src/app/routes/backends/backends-routing.module.ts index 3b79ca5ed..a9351bc67 100644 --- a/src/app/routes/backends/backends-routing.module.ts +++ b/src/app/routes/backends/backends-routing.module.ts @@ -1,7 +1,7 @@ import { RouterModule } from '@angular/router'; import { NgModule } from '@angular/core'; -import { TraceRoute } from '@hypertrace/common'; +import { HtRoute } from '@hypertrace/common'; import { BackendDetailBreadcrumbResolver, BackendDetailService, @@ -9,7 +9,7 @@ import { BackendListModule } from '@hypertrace/observability'; -const ROUTE_CONFIG: TraceRoute[] = [ +const ROUTE_CONFIG: HtRoute[] = [ { path: '', component: BackendListComponent diff --git a/src/app/routes/endpoints/endpoint-detail/endpoint-detail-routing.module.ts b/src/app/routes/endpoints/endpoint-detail/endpoint-detail-routing.module.ts index f7d44df97..0f05bcbb6 100644 --- a/src/app/routes/endpoints/endpoint-detail/endpoint-detail-routing.module.ts +++ b/src/app/routes/endpoints/endpoint-detail/endpoint-detail-routing.module.ts @@ -1,4 +1,4 @@ -import { TraceRoute } from '@hypertrace/common'; +import { HtRoute } from '@hypertrace/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; @@ -10,7 +10,7 @@ import { ApiTraceListComponent } from '@hypertrace/observability'; -const ROUTE_CONFIG: TraceRoute[] = [ +const ROUTE_CONFIG: HtRoute[] = [ { path: '', component: ApiDetailComponent, diff --git a/src/app/routes/endpoints/endpoint-routing.module.ts b/src/app/routes/endpoints/endpoint-routing.module.ts index 3fb85cf2e..53b9c11bf 100644 --- a/src/app/routes/endpoints/endpoint-routing.module.ts +++ b/src/app/routes/endpoints/endpoint-routing.module.ts @@ -1,6 +1,6 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { TraceRoute } from '@hypertrace/common'; +import { HtRoute } from '@hypertrace/common'; import { ApiDetailBreadcrumbResolver, ApiDetailService, @@ -8,7 +8,7 @@ import { EndpointListModule } from '@hypertrace/observability'; -const ROUTE_CONFIG: TraceRoute[] = [ +const ROUTE_CONFIG: HtRoute[] = [ { path: '', component: EndpointListComponent diff --git a/src/app/routes/explorer/explorer-routing.module.ts b/src/app/routes/explorer/explorer-routing.module.ts index fe40b4f97..0a12e870b 100644 --- a/src/app/routes/explorer/explorer-routing.module.ts +++ b/src/app/routes/explorer/explorer-routing.module.ts @@ -1,11 +1,11 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { TraceRoute } from '@hypertrace/common'; +import { HtRoute } from '@hypertrace/common'; import { FilterBuilderLookupService } from '@hypertrace/components'; import { MetadataService } from '@hypertrace/distributed-tracing'; import { ExplorerComponent, ExplorerDashboardBuilder, ExplorerModule } from '@hypertrace/observability'; -const ROUTE_CONFIG: TraceRoute[] = [ +const ROUTE_CONFIG: HtRoute[] = [ { path: '', component: ExplorerComponent diff --git a/src/app/routes/root-routing.module.ts b/src/app/routes/root-routing.module.ts index 95277205b..8f5919cd3 100644 --- a/src/app/routes/root-routing.module.ts +++ b/src/app/routes/root-routing.module.ts @@ -1,12 +1,12 @@ import { NgModule } from '@angular/core'; import { PreloadAllModules, RouterModule } from '@angular/router'; import { IconType } from '@hypertrace/assets-library'; -import { ExternalUrlNavigator, TraceRoute } from '@hypertrace/common'; +import { ExternalUrlNavigator, HtRoute } from '@hypertrace/common'; import { NotFoundComponent, NotFoundModule } from '@hypertrace/components'; import { ObservabilityIconType } from '@hypertrace/observability'; import { ApplicationFrameComponent } from '../application-frame/application-frame.component'; -const ROUTE_CONFIG: TraceRoute[] = [ +const ROUTE_CONFIG: HtRoute[] = [ { path: '', children: [ diff --git a/src/app/routes/services/service-detail/service-detail-routing.module.ts b/src/app/routes/services/service-detail/service-detail-routing.module.ts index 30f9668d7..0294291ee 100644 --- a/src/app/routes/services/service-detail/service-detail-routing.module.ts +++ b/src/app/routes/services/service-detail/service-detail-routing.module.ts @@ -1,4 +1,4 @@ -import { TraceRoute } from '@hypertrace/common'; +import { HtRoute } from '@hypertrace/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; @@ -11,7 +11,7 @@ import { ServiceTraceListComponent } from '@hypertrace/observability'; -const ROUTE_CONFIG: TraceRoute[] = [ +const ROUTE_CONFIG: HtRoute[] = [ { path: '', component: ServiceDetailComponent, diff --git a/src/app/routes/services/services-routing.module.ts b/src/app/routes/services/services-routing.module.ts index 14c930e50..e5edf28c1 100644 --- a/src/app/routes/services/services-routing.module.ts +++ b/src/app/routes/services/services-routing.module.ts @@ -1,6 +1,6 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { TraceRoute } from '@hypertrace/common'; +import { HtRoute } from '@hypertrace/common'; import { ApiDetailBreadcrumbResolver, ApiDetailService, @@ -10,7 +10,7 @@ import { ServiceListModule } from '@hypertrace/observability'; -const ROUTE_CONFIG: TraceRoute[] = [ +const ROUTE_CONFIG: HtRoute[] = [ { path: '', component: ServiceListComponent diff --git a/src/app/shared/navigation/navigation.component.ts b/src/app/shared/navigation/navigation.component.ts index e4b9a8cf9..8e696b005 100644 --- a/src/app/shared/navigation/navigation.component.ts +++ b/src/app/shared/navigation/navigation.component.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { IconType } from '@hypertrace/assets-library'; -import { NavigationService, PreferenceService, TraceRoute } from '@hypertrace/common'; +import { HtRoute, NavigationService, PreferenceService } from '@hypertrace/common'; import { NavItemConfig, NavItemType } from '@hypertrace/components'; import { ObservabilityIconType } from '@hypertrace/observability'; import { uniq } from 'lodash-es'; @@ -93,7 +93,7 @@ export class NavigationComponent { } const features = navItem.matchPaths .map(path => this.navigationService.getRouteConfig([path], this.activatedRoute)) - .filter((maybeRoute): maybeRoute is TraceRoute => maybeRoute !== undefined) + .filter((maybeRoute): maybeRoute is HtRoute => maybeRoute !== undefined) .flatMap(route => this.getFeaturesForRoute(route)) .concat(navItem.features || []); @@ -103,7 +103,7 @@ export class NavigationComponent { }; } - private getFeaturesForRoute(route: TraceRoute): string[] { + private getFeaturesForRoute(route: HtRoute): string[] { return (route.data && route.data.features) || []; } } From 9244d023969a9ebec9c281d7acd1e12fa3743f4a Mon Sep 17 00:00:00 2001 From: Arjunlal B Date: Mon, 5 Jul 2021 10:22:32 +0530 Subject: [PATCH 2/5] fix: support disabling select options --- .../src/select/select-option.component.ts | 3 ++ .../components/src/select/select-option.ts | 1 + .../src/select/select.component.scss | 5 +++ .../src/select/select.component.test.ts | 34 +++++++++++++++++++ .../components/src/select/select.component.ts | 16 ++++++++- 5 files changed, 58 insertions(+), 1 deletion(-) diff --git a/projects/components/src/select/select-option.component.ts b/projects/components/src/select/select-option.component.ts index afc8c020c..372793772 100644 --- a/projects/components/src/select/select-option.component.ts +++ b/projects/components/src/select/select-option.component.ts @@ -27,6 +27,9 @@ export class SelectOptionComponent implements OnChanges, SelectOption { @Input() public iconColor?: string; + @Input() + public disabled?: boolean; + private readonly optionChangeSubject$: Subject = new Subject(); public readonly optionChange$: Observable = this.optionChangeSubject$.asObservable(); diff --git a/projects/components/src/select/select-option.ts b/projects/components/src/select/select-option.ts index 23aa6f419..ab8be64f4 100644 --- a/projects/components/src/select/select-option.ts +++ b/projects/components/src/select/select-option.ts @@ -4,4 +4,5 @@ export interface SelectOption { selectedLabel?: string; icon?: string; iconColor?: string; + disabled?: boolean; } diff --git a/projects/components/src/select/select.component.scss b/projects/components/src/select/select.component.scss index 1b43dd42f..5d40321ca 100644 --- a/projects/components/src/select/select.component.scss +++ b/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; diff --git a/projects/components/src/select/select.component.test.ts b/projects/components/src/select/select.component.test.ts index af86bcf6c..64fed54db 100644 --- a/projects/components/src/select/select.component.test.ts +++ b/projects/components/src/select/select.component.test.ts @@ -282,4 +282,38 @@ describe('Select Component', () => { expect(onChange).toHaveBeenCalledWith('none-id'); flush(); })); + + test('should disable select options as expected', fakeAsync(() => { + const onChange = jest.fn(); + + spectator = hostFactory( + ` + + + `, + { + 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(); + })); }); diff --git a/projects/components/src/select/select.component.ts b/projects/components/src/select/select.component.ts index 79cdc9ef9..d44f641bd 100644 --- a/projects/components/src/select/select.component.ts +++ b/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(item)" >
implements AfterContentInit, OnChanges { } public onSelectionChange(item: SelectOptionComponent): 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 implements AfterContentInit, OnChanges { return this.items.find(item => item.value === value); } + + public getStyleClassesForSelectItem(item: SelectOptionComponent): string[] { + const styles: string[] = [this.size]; + + if (item.disabled) { + styles.push('disabled'); + } + + return styles; + } } export const enum SelectTriggerDisplayMode { From 7bc8aefce6c9f4cf05d3ad49208a572a070a529c Mon Sep 17 00:00:00 2001 From: Arjunlal B Date: Mon, 5 Jul 2021 11:01:19 +0530 Subject: [PATCH 3/5] fix: prettier fix --- projects/components/src/select/select.component.test.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/projects/components/src/select/select.component.test.ts b/projects/components/src/select/select.component.test.ts index 64fed54db..a85c1c322 100644 --- a/projects/components/src/select/select.component.test.ts +++ b/projects/components/src/select/select.component.test.ts @@ -296,7 +296,13 @@ describe('Select Component', () => { 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' } + { + label: 'third', + value: 'third-value', + selectedLabel: 'Third Value!!!', + icon: 'test-icon', + iconColor: 'red' + } ], onChange: onChange } From 3871bf22abc09040d1271e2ec024396d5e6c01a8 Mon Sep 17 00:00:00 2001 From: Arjunlal B Date: Wed, 7 Jul 2021 13:28:26 +0530 Subject: [PATCH 4/5] fix: use memoize --- projects/components/src/select/select.component.test.ts | 4 ++-- projects/components/src/select/select.component.ts | 6 +++--- projects/components/src/select/select.module.ts | 4 +++- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/projects/components/src/select/select.component.test.ts b/projects/components/src/select/select.component.test.ts index a85c1c322..5ee890849 100644 --- a/projects/components/src/select/select.component.test.ts +++ b/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>({ component: SelectComponent, - imports: [SelectModule, HttpClientTestingModule, IconLibraryTestingModule], + imports: [SelectModule, HttpClientTestingModule, IconLibraryTestingModule, MemoizeModule], declareComponent: false, declarations: [MockComponent(IconComponent)], providers: [ diff --git a/projects/components/src/select/select.component.ts b/projects/components/src/select/select.component.ts index d44f641bd..f4bbd5933 100644 --- a/projects/components/src/select/select.component.ts +++ b/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.getStyleClassesForSelectItem(item)" + [ngClass]="this.getStyleClassesForSelectItem | htMemoize: this.size: item" >
implements AfterContentInit, OnChanges { return this.items.find(item => item.value === value); } - public getStyleClassesForSelectItem(item: SelectOptionComponent): string[] { - const styles: string[] = [this.size]; + public getStyleClassesForSelectItem(size: SelectSize, item: SelectOptionComponent): string[] { + const styles: string[] = [size]; if (item.disabled) { styles.push('disabled'); diff --git a/projects/components/src/select/select.module.ts b/projects/components/src/select/select.module.ts index 75088454e..7a49b5802 100644 --- a/projects/components/src/select/select.module.ts +++ b/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] From 27ac1164fad5f19b25ee217e4bcd9da1387d1724 Mon Sep 17 00:00:00 2001 From: Arjunlal B Date: Wed, 7 Jul 2021 14:20:24 +0530 Subject: [PATCH 5/5] fix: prettier fix --- projects/components/src/select/select.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/components/src/select/select.component.ts b/projects/components/src/select/select.component.ts index f4bbd5933..63549d86f 100644 --- a/projects/components/src/select/select.component.ts +++ b/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.getStyleClassesForSelectItem | htMemoize: this.size: item" + [ngClass]="this.getStyleClassesForSelectItem | htMemoize: this.size:item" >