Migrate Angular code to call inject() (#6992)

## Motivation for features / changes
When tsc's `--target` is updated `es2022` or newer, the initialization
order of parameter properties changes. Inline field initializers that
directly or indirectly reference parameter properties can break with
this change as the parameter properties may be initialized if the
reference occurs too soon.

This can be difficult to accurately statically detect because it's not
always clear if callbacks are executed immediately or later.

Migrating to Angular's `inject()` function solves the problems as
parameter properties are no longer used.

## Technical description of changes
Updates classes where some inline field initializer has an indirect
reference to a parameter property to use Angular `inject()`.

## Screenshots of UI changes (or N/A)
N/A

## Detailed steps to verify changes work correctly (as executed by you)
Should be a no-op refactor. Simply verify test flows the involve all
modified classes.

## Alternate designs / implementations considered (or N/A)
We could also avoid this upcoming issue by moving the inline field
initializers that reference uninitialized parameter properties into the
constructor body. This is generally seen as an inferior change though.

Author: trevorade

tensorboard/webapp/alert/effects/index.ts

@@ -12,7 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-import {Injectable} from '@angular/core';
+import {Injectable, inject} from '@angular/core';
 import {Actions, createEffect} from '@ngrx/effects';
 import {Store} from '@ngrx/store';
 import {tap} from 'rxjs/operators';
@@ -22,11 +22,9 @@ import {AlertActionModule} from '../alert_action_module';
 
 @Injectable()
 export class AlertEffects {
-  constructor(
-    private readonly actions$: Actions,
-    private readonly store: Store<State>,
-    private readonly alertActionModule: AlertActionModule
-  ) {}
+  private readonly actions$ = inject(Actions);
+  private readonly store: Store<State> = inject(Store);
+  private readonly alertActionModule = inject(AlertActionModule);
 
   /** @export */
   reportRegisteredActionAlerts$ = createEffect(

tensorboard/webapp/feature_flag/effects/feature_flag_effects.ts

@@ -13,7 +13,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 
-import {Injectable} from '@angular/core';
+import {inject, Injectable} from '@angular/core';
 import {Actions, createEffect, ofType} from '@ngrx/effects';
 import {Action, createAction, Store} from '@ngrx/store';
 import {combineLatestWith, map, tap, withLatestFrom} from 'rxjs/operators';
@@ -37,6 +37,10 @@ const effectsInitialized = createAction('[FEATURE FLAG] Effects Init');
 
 @Injectable()
 export class FeatureFlagEffects {
+  private readonly actions$ = inject(Actions);
+  private readonly store: Store<State> = inject(Store);
+  private readonly dataSource = inject(TBFeatureFlagDataSource);
+
   // Ngrx assumes all Effect classes have properties that inherit from the base
   // JS Object. `tf_feature_flags` does not, so we wrap it.
   private readonly tfFeatureFlags = {
@@ -128,12 +132,6 @@ export class FeatureFlagEffects {
     {dispatch: false}
   );
 
-  constructor(
-    private readonly actions$: Actions,
-    private readonly store: Store<State>,
-    private readonly dataSource: TBFeatureFlagDataSource
-  ) {}
-
   /** @export */
   ngrxOnInitEffects(): Action {
     return effectsInitialized();

tensorboard/webapp/notification_center/_redux/notification_center_effects.ts

@@ -12,7 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-import {Injectable} from '@angular/core';
+import {Injectable, inject} from '@angular/core';
 import {Actions, createEffect, ofType, OnInitEffects} from '@ngrx/effects';
 import {Action, createAction, Store} from '@ngrx/store';
 import {EMPTY, Observable} from 'rxjs';
@@ -26,11 +26,9 @@ export const initAction = createAction('[NotificationCenter Effects] Init');
 
 @Injectable()
 export class NotificationCenterEffects implements OnInitEffects {
-  constructor(
-    private readonly actions$: Actions,
-    private readonly store: Store<State>,
-    private readonly dataSource: NotificationCenterDataSource
-  ) {}
+  private readonly actions$ = inject(Actions);
+  private readonly store: Store<State> = inject(Store);
+  private readonly dataSource = inject(NotificationCenterDataSource);
 
   /** @export */
   ngrxOnInitEffects(): Action {

tensorboard/webapp/persistent_settings/_redux/persistent_settings_effects.ts

@@ -12,7 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-import {Injectable} from '@angular/core';
+import {Injectable, inject} from '@angular/core';
 import {Actions, createEffect, ofType} from '@ngrx/effects';
 import {Store} from '@ngrx/store';
 import {EMPTY, Observable, merge} from 'rxjs';
@@ -45,6 +45,15 @@ const DEBOUNCE_PERIOD_IN_MS = 500;
  */
 @Injectable()
 export class PersistentSettingsEffects {
+  private readonly actions$: Actions = inject(Actions);
+  private readonly store: Store<{}> = inject(Store);
+  private readonly configModule: PersistentSettingsConfigModule<
+    {},
+    PersistableSettings
+  > = inject(PersistentSettingsConfigModule);
+  private readonly dataSource: PersistentSettingsDataSource<PersistableSettings> =
+    inject(PersistentSettingsDataSource);
+
   /** @export */
   readonly initializeAndUpdateSettings$: Observable<void> = createEffect(
     () => {
@@ -109,16 +118,6 @@ export class PersistentSettingsEffects {
     },
     {dispatch: false}
   );
-
-  constructor(
-    private readonly actions$: Actions,
-    private readonly store: Store<{}>,
-    private readonly configModule: PersistentSettingsConfigModule<
-      {},
-      PersistableSettings
-    >,
-    private readonly dataSource: PersistentSettingsDataSource<PersistableSettings>
-  ) {}
 }
 
 export const TEST_ONLY = {DEBOUNCE_PERIOD_IN_MS};

tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_container.ts

@@ -12,7 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-import {Component, Inject} from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
 import {Store} from '@ngrx/store';
 import {combineLatest, defer, merge, Observable, Subject} from 'rxjs';
@@ -69,6 +69,9 @@ const INPUT_CHANGE_DEBOUNCE_INTERVAL_MS = 500;
   ],
 })
 export class RegexEditDialogContainer {
+  private readonly store = inject<Store<State>>(Store);
+  dialogRef = inject<MatDialogRef<RegexEditDialogContainer>>(MatDialogRef);
+
   private readonly experimentIds: string[];
   private readonly runIdToEid$: Observable<Record<string, string>>;
   private readonly allRuns$: Observable<Run[]>;
@@ -152,14 +155,11 @@ export class RegexEditDialogContainer {
     );
   }).pipe(startWith([]));
 
-  constructor(
-    private readonly store: Store<State>,
-    public dialogRef: MatDialogRef<RegexEditDialogContainer>,
-    @Inject(MAT_DIALOG_DATA)
-    data: {
+  constructor() {
+    const data = inject<{
       experimentIds: string[];
-    }
-  ) {
+    }>(MAT_DIALOG_DATA);
+
     this.expNameByExpId$ = this.store.select(getDashboardExperimentNames);
     this.enableColorByExperiment$ = this.store.select(
       getEnableColorByExperiment