From c1f5093a09de90a5bb49385d8b2ba8aa299e17e3 Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Fri, 27 Sep 2024 09:25:17 -0700 Subject: [PATCH] Explicitly set `standalone` for all Angular directives Angular v19 is going to change the default value for `standalone` from `false` to `true`. Even though tensorboard is on an older version of Angular on GitHub, the version inside Google runs at HEAD. We're in the process of changing existing code in google to explicitly set `standalone: false` for existing code, so I'm sending this change to the source of truth here. This is a follow-up to #6912, which missed a handful of places. --- .../webapp/app_routing/effects/app_routing_effects_test.ts | 2 +- tensorboard/webapp/app_routing/route_config_test.ts | 2 +- .../app_routing/views/router_link_directive_container.ts | 5 ++++- .../feature_flag/directives/feature_flag_directive.ts | 5 ++++- .../webapp/metrics/views/main_view/card_grid_test.ts | 2 +- .../intersection_observer_directive.ts | 5 ++++- .../intersection_observer_testing_module.ts | 6 +++++- tensorboard/webapp/widgets/resize_detector_directive.ts | 5 ++++- .../webapp/widgets/resize_detector_testing_module.ts | 5 ++++- 9 files changed, 28 insertions(+), 9 deletions(-) diff --git a/tensorboard/webapp/app_routing/effects/app_routing_effects_test.ts b/tensorboard/webapp/app_routing/effects/app_routing_effects_test.ts index 10543e6db2..afa8834701 100644 --- a/tensorboard/webapp/app_routing/effects/app_routing_effects_test.ts +++ b/tensorboard/webapp/app_routing/effects/app_routing_effects_test.ts @@ -48,7 +48,7 @@ import { } from '../types'; import {AppRoutingEffects, TEST_ONLY} from './app_routing_effects'; -@Component({selector: 'test', template: '', jit: true}) +@Component({standalone: false, selector: 'test', template: '', jit: true}) class TestableComponent {} const testAction = createAction('[TEST] test action'); diff --git a/tensorboard/webapp/app_routing/route_config_test.ts b/tensorboard/webapp/app_routing/route_config_test.ts index dac4343146..eac5e5d67d 100644 --- a/tensorboard/webapp/app_routing/route_config_test.ts +++ b/tensorboard/webapp/app_routing/route_config_test.ts @@ -19,7 +19,7 @@ import {RouteConfigs, RouteMatch} from './route_config'; import {ConcreteRouteDef, RedirectionRouteDef} from './route_config_types'; import {Navigation, RouteKind} from './types'; -@Component({selector: 'test', template: ''}) +@Component({standalone: false, selector: 'test', template: ''}) class TestableComponent {} function buildConcreteRouteDef(override: Partial) { diff --git a/tensorboard/webapp/app_routing/views/router_link_directive_container.ts b/tensorboard/webapp/app_routing/views/router_link_directive_container.ts index 498123bc18..12337dde98 100644 --- a/tensorboard/webapp/app_routing/views/router_link_directive_container.ts +++ b/tensorboard/webapp/app_routing/views/router_link_directive_container.ts @@ -19,7 +19,10 @@ import {navigationRequested} from '../actions'; import {AppRootProvider} from '../app_root'; import {Location} from '../location'; -@Directive({selector: 'a[routerLink]'}) +@Directive({ + standalone: false, + selector: 'a[routerLink]', +}) export class RouterLinkDirectiveContainer { private pathname: string | null = null; diff --git a/tensorboard/webapp/feature_flag/directives/feature_flag_directive.ts b/tensorboard/webapp/feature_flag/directives/feature_flag_directive.ts index cfa60b63c6..9c6b32b946 100644 --- a/tensorboard/webapp/feature_flag/directives/feature_flag_directive.ts +++ b/tensorboard/webapp/feature_flag/directives/feature_flag_directive.ts @@ -27,7 +27,10 @@ import {FEATURE_FLAGS_QUERY_STRING_NAME} from '../http/const'; import {getFeatureFlagsToSendToServer} from '../store/feature_flag_selectors'; import {State as FeatureFlagState} from '../store/feature_flag_types'; -@Directive({selector: 'a[includeFeatureFlags], img[includeFeatureFlags]'}) +@Directive({ + standalone: false, + selector: 'a[includeFeatureFlags], img[includeFeatureFlags]', +}) export class FeatureFlagDirective { @HostBinding('attr.href') hrefAttr: string | undefined = undefined; @HostBinding('attr.src') srcAttr: string | undefined = undefined; diff --git a/tensorboard/webapp/metrics/views/main_view/card_grid_test.ts b/tensorboard/webapp/metrics/views/main_view/card_grid_test.ts index 834b958baa..5b01ed6bd0 100644 --- a/tensorboard/webapp/metrics/views/main_view/card_grid_test.ts +++ b/tensorboard/webapp/metrics/views/main_view/card_grid_test.ts @@ -82,7 +82,7 @@ class TestableScrollingContainer { /** * Stub 'card-view' component for ease of testing. */ -@Component({selector: 'card-view'}) +@Component({standalone: false, selector: 'card-view'}) class TestableCardView { @Output() fullHeightChanged = new EventEmitter(); @Output() fullWidthChanged = new EventEmitter(); diff --git a/tensorboard/webapp/widgets/intersection_observer/intersection_observer_directive.ts b/tensorboard/webapp/widgets/intersection_observer/intersection_observer_directive.ts index d399cb7fa6..2cb762b145 100644 --- a/tensorboard/webapp/widgets/intersection_observer/intersection_observer_directive.ts +++ b/tensorboard/webapp/widgets/intersection_observer/intersection_observer_directive.ts @@ -29,7 +29,10 @@ import {take, takeUntil} from 'rxjs/operators'; /** * A directive that calls `onVisibilityChange` when element visiblity changes. */ -@Directive({selector: '[observeIntersection]'}) +@Directive({ + standalone: false, + selector: '[observeIntersection]', +}) export class IntersectionObserverDirective implements OnInit, OnDestroy { @Input() intersectionObserverMargin?: string; @Output() onVisibilityChange = new EventEmitter<{visible: boolean}>(); diff --git a/tensorboard/webapp/widgets/intersection_observer/intersection_observer_testing_module.ts b/tensorboard/webapp/widgets/intersection_observer/intersection_observer_testing_module.ts index 6c48c4b48e..712932b588 100644 --- a/tensorboard/webapp/widgets/intersection_observer/intersection_observer_testing_module.ts +++ b/tensorboard/webapp/widgets/intersection_observer/intersection_observer_testing_module.ts @@ -16,7 +16,11 @@ import {Directive, EventEmitter, NgModule, Output} from '@angular/core'; import {ComponentFixture} from '@angular/core/testing'; import {By} from '@angular/platform-browser'; -@Directive({selector: '[observeIntersection]', jit: true}) +@Directive({ + standalone: false, + selector: '[observeIntersection]', + jit: true, +}) class IntersectionObserverTestingDirective { @Output() onVisibilityChange = new EventEmitter<{visible: boolean}>(); diff --git a/tensorboard/webapp/widgets/resize_detector_directive.ts b/tensorboard/webapp/widgets/resize_detector_directive.ts index 0f50fc3826..2599b73199 100644 --- a/tensorboard/webapp/widgets/resize_detector_directive.ts +++ b/tensorboard/webapp/widgets/resize_detector_directive.ts @@ -29,7 +29,10 @@ import {debounceTime, skip, takeUntil} from 'rxjs/operators'; * * It does not emit `onResize` on the initial render. */ -@Directive({selector: '[detectResize]'}) +@Directive({ + standalone: false, + selector: '[detectResize]', +}) export class ResizeDetectorDirective implements OnDestroy, OnInit { @Input() resizeEventDebouncePeriodInMs: number = 100; @Output() onResize = new EventEmitter(); diff --git a/tensorboard/webapp/widgets/resize_detector_testing_module.ts b/tensorboard/webapp/widgets/resize_detector_testing_module.ts index 01c3f20d8c..1e6e01823c 100644 --- a/tensorboard/webapp/widgets/resize_detector_testing_module.ts +++ b/tensorboard/webapp/widgets/resize_detector_testing_module.ts @@ -16,7 +16,10 @@ import {Directive, EventEmitter, Input, NgModule, Output} from '@angular/core'; import {ComponentFixture} from '@angular/core/testing'; import {By} from '@angular/platform-browser'; -@Directive({selector: '[detectResize]'}) +@Directive({ + standalone: false, + selector: '[detectResize]', +}) class ResizeDetectorTestingDirective { @Input() resizeEventDebouncePeriodInMs: number = 100; @Output() onResize = new EventEmitter();