Angular Component Migration

tensorflow · Sep 20, 2023 · 2f038f4 · 2f038f4
1 parent cc6e294
commit 2f038f4
Show file tree

Hide file tree

Showing 54 changed files with 294 additions and 296 deletions.
diff --git a/tensorboard/webapp/alert/views/alert_display_snackbar_container.ts b/tensorboard/webapp/alert/views/alert_display_snackbar_container.ts
@@ -13,10 +13,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';
-import {
-  MatLegacySnackBarRef,
-  MAT_LEGACY_SNACK_BAR_DATA,
-} from '@angular/material/legacy-snack-bar';
+import {MatSnackBarRef, MAT_SNACK_BAR_DATA} from '@angular/material/snack-bar';
 import {Store} from '@ngrx/store';
 import {State} from '../../app_state';
 import {splitByURL} from '../../util/string';
@@ -33,8 +30,8 @@ export class AlertDisplaySnackbarContainer {
   readonly splitByURL = splitByURL;
 
   constructor(
-    private readonly snackBarRef: MatLegacySnackBarRef<AlertDisplaySnackbarContainer>,
-    @Inject(MAT_LEGACY_SNACK_BAR_DATA) readonly unknownData: unknown,
+    private readonly snackBarRef: MatSnackBarRef<AlertDisplaySnackbarContainer>,
+    @Inject(MAT_SNACK_BAR_DATA) readonly unknownData: unknown,
     private readonly store: Store<State>
   ) {
     this.alert = unknownData as AlertInfo;

diff --git a/tensorboard/webapp/alert/views/alert_snackbar_container.ts b/tensorboard/webapp/alert/views/alert_snackbar_container.ts
@@ -18,7 +18,7 @@ import {
   OnDestroy,
   OnInit,
 } from '@angular/core';
-import {MatLegacySnackBar} from '@angular/material/legacy-snack-bar';
+import {MatSnackBar} from '@angular/material/snack-bar';
 import {Store} from '@ngrx/store';
 import {Subject} from 'rxjs';
 import {filter, takeUntil} from 'rxjs/operators';
@@ -40,7 +40,7 @@ export class AlertSnackbarContainer implements OnInit, OnDestroy {
 
   constructor(
     private readonly store: Store<State>,
-    private readonly snackBar: MatLegacySnackBar
+    private readonly snackBar: MatSnackBar
   ) {}
 
   ngOnInit() {

diff --git a/tensorboard/webapp/alert/views/alert_snackbar_module.ts b/tensorboard/webapp/alert/views/alert_snackbar_module.ts
@@ -14,8 +14,8 @@ limitations under the License.
 ==============================================================================*/
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
-import {MatLegacySnackBarModule} from '@angular/material/legacy-snack-bar';
+import {MatButtonModule} from '@angular/material/button';
+import {MatSnackBarModule} from '@angular/material/snack-bar';
 import {AlertDisplaySnackbarContainer} from './alert_display_snackbar_container';
 import {AlertSnackbarContainer} from './alert_snackbar_container';
 
@@ -25,7 +25,7 @@ import {AlertSnackbarContainer} from './alert_snackbar_container';
 @NgModule({
   declarations: [AlertSnackbarContainer, AlertDisplaySnackbarContainer],
   exports: [AlertSnackbarContainer],
-  imports: [CommonModule, MatLegacyButtonModule, MatLegacySnackBarModule],
+  imports: [CommonModule, MatButtonModule, MatSnackBarModule],
   entryComponents: [
     // Required for non-Ivy Angular apps.
     AlertDisplaySnackbarContainer,

diff --git a/tensorboard/webapp/alert/views/alert_snackbar_test.ts b/tensorboard/webapp/alert/views/alert_snackbar_test.ts
@@ -14,11 +14,8 @@ limitations under the License.
 ==============================================================================*/
 import {OverlayContainer} from '@angular/cdk/overlay';
 import {TestBed} from '@angular/core/testing';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
-import {
-  MatLegacySnackBar,
-  MatLegacySnackBarModule,
-} from '@angular/material/legacy-snack-bar';
+import {MatButtonModule} from '@angular/material/button';
+import {MatSnackBar, MatSnackBarModule} from '@angular/material/snack-bar';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {Action, createAction, props, Store} from '@ngrx/store';
 import {MockStore, provideMockStore} from '@ngrx/store/testing';
@@ -45,15 +42,11 @@ describe('alert snackbar', () => {
   let snackBarOpenSpy: jasmine.Spy;
   let recordedActions: Action[] = [];
   let overlayContainer: OverlayContainer;
-  let snackbar: MatLegacySnackBar;
+  let snackbar: MatSnackBar;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [
-        NoopAnimationsModule,
-        MatLegacyButtonModule,
-        MatLegacySnackBarModule,
-      ],
+      imports: [NoopAnimationsModule, MatButtonModule, MatSnackBarModule],
       providers: [
         provideMockStore({
           initialState: buildStateFromAlertState(buildAlertState({})),
@@ -67,7 +60,7 @@ describe('alert snackbar', () => {
       recordedActions.push(action);
     });
     overlayContainer = TestBed.inject(OverlayContainer);
-    snackbar = TestBed.inject(MatLegacySnackBar);
+    snackbar = TestBed.inject(MatSnackBar);
     snackBarOpenSpy = spyOn(snackbar, 'openFromComponent').and.callThrough();
   });
 

diff --git a/tensorboard/webapp/core/views/layout_module.ts b/tensorboard/webapp/core/views/layout_module.ts
@@ -14,7 +14,7 @@ limitations under the License.
 ==============================================================================*/
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
 import {LayoutContainer} from './layout_container';
 
@@ -24,6 +24,6 @@ import {LayoutContainer} from './layout_container';
 @NgModule({
   declarations: [LayoutContainer],
   exports: [LayoutContainer],
-  imports: [CommonModule, MatIconModule, MatLegacyButtonModule],
+  imports: [CommonModule, MatIconModule, MatButtonModule],
 })
 export class LayoutModule {}
diff --git a/tensorboard/webapp/feature_flag/views/feature_flag_dialog_module.ts b/tensorboard/webapp/feature_flag/views/feature_flag_dialog_module.ts
@@ -14,8 +14,8 @@ limitations under the License.
 ==============================================================================*/
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
-import {MatLegacySelectModule} from '@angular/material/legacy-select';
+import {MatButtonModule} from '@angular/material/button';
+import {MatSelectModule} from '@angular/material/select';
 import {FeatureFlagDialogComponent} from './feature_flag_dialog_component';
 import {FeatureFlagDialogContainer} from './feature_flag_dialog_container';
 
@@ -24,7 +24,7 @@ import {FeatureFlagDialogContainer} from './feature_flag_dialog_container';
  */
 @NgModule({
   declarations: [FeatureFlagDialogComponent, FeatureFlagDialogContainer],
-  imports: [CommonModule, MatLegacyButtonModule, MatLegacySelectModule],
+  imports: [CommonModule, MatButtonModule, MatSelectModule],
   exports: [FeatureFlagDialogContainer],
   entryComponents: [FeatureFlagDialogContainer],
 })

diff --git a/tensorboard/webapp/feature_flag/views/feature_flag_modal_trigger_container.ts b/tensorboard/webapp/feature_flag/views/feature_flag_modal_trigger_container.ts
@@ -14,10 +14,7 @@ limitations under the License.
 ==============================================================================*/
 import {ComponentType} from '@angular/cdk/overlay';
 import {Component, OnDestroy, OnInit} from '@angular/core';
-import {
-  MatLegacyDialog,
-  MatLegacyDialogRef,
-} from '@angular/material/legacy-dialog';
+import {MatDialog, MatDialogRef} from '@angular/material/dialog';
 import {Store} from '@ngrx/store';
 import {Subject} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
@@ -42,12 +39,12 @@ export class FeatureFlagModalTriggerContainer implements OnInit, OnDestroy {
   featureFlagDialogType: ComponentType<any> = FeatureFlagDialogContainer;
 
   readonly showFeatureFlags$ = this.store.select(getShowFlagsEnabled);
-  private featureFlagsDialog?: MatLegacyDialogRef<FeatureFlagDialogContainer>;
+  private featureFlagsDialog?: MatDialogRef<FeatureFlagDialogContainer>;
   private ngUnsubscribe = new Subject<void>();
 
   constructor(
     private readonly store: Store<State>,
-    private dialog: MatLegacyDialog
+    private dialog: MatDialog
   ) {}
 
   ngOnInit() {

diff --git a/tensorboard/webapp/feature_flag/views/feature_flag_modal_trigger_container_test.ts b/tensorboard/webapp/feature_flag/views/feature_flag_modal_trigger_container_test.ts
@@ -16,8 +16,8 @@ import {HarnessLoader} from '@angular/cdk/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
 import {Component} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
-import {MatLegacyDialogModule} from '@angular/material/legacy-dialog';
-import {MatLegacyDialogHarness} from '@angular/material/legacy-dialog/testing';
+import {MatDialogModule} from '@angular/material/dialog';
+import {MatDialogHarness} from '@angular/material/dialog/testing';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {Store} from '@ngrx/store';
 import {MockStore} from '@ngrx/store/testing';
@@ -47,7 +47,7 @@ describe('feature_flag_modal_trigger_container', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatLegacyDialogModule, NoopAnimationsModule],
+      imports: [MatDialogModule, NoopAnimationsModule],
       providers: [provideMockTbStore()],
     }).compileComponents();
 
@@ -78,7 +78,7 @@ describe('feature_flag_modal_trigger_container', () => {
     store.overrideSelector(getOverriddenFeatureFlags, {});
     store.overrideSelector(getShowFlagsEnabled, true);
     createComponent();
-    const dialog = await rootLoader.getHarness(MatLegacyDialogHarness);
+    const dialog = await rootLoader.getHarness(MatDialogHarness);
     expect(
       (fixture.componentInstance as any).featureFlagsDialog
     ).not.toBeUndefined();

diff --git a/tensorboard/webapp/header/dark_mode_toggle_test.ts b/tensorboard/webapp/header/dark_mode_toggle_test.ts
@@ -15,8 +15,8 @@ limitations under the License.
 import {OverlayContainer} from '@angular/cdk/overlay';
 import {NO_ERRORS_SCHEMA} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
-import {MatLegacyMenuModule} from '@angular/material/legacy-menu';
+import {MatButtonModule} from '@angular/material/button';
+import {MatMenuModule} from '@angular/material/menu';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {Action, Store} from '@ngrx/store';
@@ -37,9 +37,9 @@ describe('dark mode toggle test', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [
-        MatLegacyButtonModule,
+        MatButtonModule,
         MatIconTestingModule,
-        MatLegacyMenuModule,
+        MatMenuModule,
         NoopAnimationsModule,
       ],
       providers: [provideMockTbStore()],

diff --git a/tensorboard/webapp/header/header_module.ts b/tensorboard/webapp/header/header_module.ts
@@ -15,11 +15,11 @@ limitations under the License.
 // Uses `async` pipe.
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyMenuModule} from '@angular/material/legacy-menu';
-import {MatLegacySelectModule} from '@angular/material/legacy-select';
-import {MatLegacyTabsModule} from '@angular/material/legacy-tabs';
+import {MatMenuModule} from '@angular/material/menu';
+import {MatSelectModule} from '@angular/material/select';
+import {MatTabsModule} from '@angular/material/tabs';
 import {MatToolbarModule} from '@angular/material/toolbar';
 import {CoreModule} from '../core/core_module';
 import {SettingsModule} from '../settings/settings_module';
@@ -47,12 +47,12 @@ import {ReloadContainer} from './reload_container';
   ],
   providers: [],
   imports: [
-    MatLegacyButtonModule,
+    MatButtonModule,
     MatIconModule,
-    MatLegacyTabsModule,
+    MatTabsModule,
     MatToolbarModule,
-    MatLegacySelectModule,
-    MatLegacyMenuModule,
+    MatSelectModule,
+    MatMenuModule,
     CommonModule,
     CoreModule,
     SettingsModule,

diff --git a/tensorboard/webapp/header/header_test.ts b/tensorboard/webapp/header/header_test.ts
@@ -14,9 +14,9 @@ limitations under the License.
 ==============================================================================*/
 import {DebugElement, NO_ERRORS_SCHEMA} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
-import {MatLegacySelectModule} from '@angular/material/legacy-select';
-import {MatLegacyTabsModule} from '@angular/material/legacy-tabs';
+import {MatButtonModule} from '@angular/material/button';
+import {MatSelectModule} from '@angular/material/select';
+import {MatTabsModule} from '@angular/material/tabs';
 import {MatToolbarModule} from '@angular/material/toolbar';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
@@ -50,10 +50,10 @@ describe('header test', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [
-        MatLegacyButtonModule,
+        MatButtonModule,
         MatIconTestingModule,
-        MatLegacySelectModule,
-        MatLegacyTabsModule,
+        MatSelectModule,
+        MatTabsModule,
         MatToolbarModule,
         NoopAnimationsModule,
       ],
@@ -105,7 +105,7 @@ describe('header test', () => {
     const fixture = TestBed.createComponent(HeaderComponent);
     fixture.detectChanges();
 
-    const els = fixture.debugElement.queryAll(By.css('.mat-tab-label'));
+    const els = fixture.debugElement.queryAll(By.css('.mat-mdc-tab'));
     expect(els.length).toBe(2);
 
     assertDebugElementText(els[0], 'FOO FIGHTER');
@@ -125,7 +125,7 @@ describe('header test', () => {
     fixture.detectChanges();
     await fixture.whenStable();
 
-    const els = fixture.debugElement.queryAll(By.css('.mat-tab-label'));
+    const els = fixture.debugElement.queryAll(By.css('.mat-mdc-tab'));
     expect(els.length).toBe(3);
     assertDebugElementText(els[0], 'MEOW');
     assertDebugElementText(els[1], 'WOOF');

diff --git a/tensorboard/webapp/header/plugin_selector_component.ts b/tensorboard/webapp/header/plugin_selector_component.ts
@@ -13,7 +13,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 import {Component, EventEmitter, Input, Output} from '@angular/core';
-import {MatLegacySelectChange} from '@angular/material/legacy-select';
+import {MatSelectChange} from '@angular/material/select';
 import {PluginId} from '../types/api';
 import {UiPluginMetadata} from './types';
 
@@ -44,7 +44,7 @@ export class PluginSelectorComponent {
     this.onPluginSelectionChanged.emit(pluginId);
   }
 
-  onDisabledPluginSelectionChanged(selectChangeEvent: MatLegacySelectChange) {
+  onDisabledPluginSelectionChanged(selectChangeEvent: MatSelectChange) {
     this.onPluginSelectionChanged.emit(selectChangeEvent.value);
   }
 }
diff --git a/tensorboard/webapp/metrics/views/card_renderer/data_download_dialog_container.ts b/tensorboard/webapp/metrics/views/card_renderer/data_download_dialog_container.ts
@@ -13,7 +13,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';
-import {MAT_LEGACY_DIALOG_DATA} from '@angular/material/legacy-dialog';
+import {MAT_DIALOG_DATA} from '@angular/material/dialog';
 import {Store} from '@ngrx/store';
 import {BehaviorSubject, combineLatest, Observable} from 'rxjs';
 import {filter, map, startWith} from 'rxjs/operators';
@@ -54,7 +54,7 @@ export class DataDownloadDialogContainer {
   constructor(
     store: Store<State>,
     dataSource: MetricsDataSource,
-    @Inject(MAT_LEGACY_DIALOG_DATA) data: DataDownloadDialogData
+    @Inject(MAT_DIALOG_DATA) data: DataDownloadDialogData
   ) {
     this.cardMetadata$ = store
       .select(getCardMetadata, data.cardId)

diff --git a/tensorboard/webapp/metrics/views/card_renderer/data_download_dialog_test.ts b/tensorboard/webapp/metrics/views/card_renderer/data_download_dialog_test.ts
@@ -15,7 +15,7 @@ limitations under the License.
 import {NO_ERRORS_SCHEMA} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {FormsModule} from '@angular/forms';
-import {MAT_LEGACY_DIALOG_DATA} from '@angular/material/legacy-dialog';
+import {MAT_DIALOG_DATA} from '@angular/material/dialog';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {Store} from '@ngrx/store';
@@ -55,7 +55,7 @@ describe('metrics/views/data_download_dialog', () => {
       declarations: [DataDownloadDialogContainer, DataDownloadDialogComponent],
       providers: [
         provideMockStore({}),
-        {provide: MAT_LEGACY_DIALOG_DATA, useValue: dialogData},
+        {provide: MAT_DIALOG_DATA, useValue: dialogData},
         {provide: MetricsDataSource, useClass: TestingMetricsDataSource},
       ],
       schemas: [NO_ERRORS_SCHEMA],

diff --git a/tensorboard/webapp/metrics/views/card_renderer/data_download_module.ts b/tensorboard/webapp/metrics/views/card_renderer/data_download_module.ts
@@ -15,10 +15,10 @@ limitations under the License.
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
-import {MatLegacyButtonModule} from '@angular/material/legacy-button';
-import {MatLegacyDialogModule} from '@angular/material/legacy-dialog';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
-import {MatLegacySelectModule} from '@angular/material/legacy-select';
+import {MatButtonModule} from '@angular/material/button';
+import {MatDialogModule} from '@angular/material/dialog';
+import {MatInputModule} from '@angular/material/input';
+import {MatSelectModule} from '@angular/material/select';
 import {FeatureFlagDirectiveModule} from '../../../feature_flag/directives/feature_flag_directive_module';
 import {MetricsDataSourceModule} from '../../data_source';
 import {DataDownloadDialogComponent} from './data_download_dialog_component';
@@ -31,10 +31,10 @@ import {DataDownloadDialogContainer} from './data_download_dialog_container';
     CommonModule,
     FeatureFlagDirectiveModule,
     FormsModule,
-    MatLegacyButtonModule,
-    MatLegacyDialogModule,
-    MatLegacyInputModule,
-    MatLegacySelectModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatInputModule,
+    MatSelectModule,
     MetricsDataSourceModule,
   ],
   entryComponents: [DataDownloadDialogContainer],