Migrate Angular code to call inject()

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