From 2f038f4fd7c6d777cc60d0d5c2fe47c95648f41e Mon Sep 17 00:00:00 2001 From: jameshollyer Date: Thu, 17 Aug 2023 18:45:06 +0000 Subject: [PATCH] Angular Component Migration --- .../views/alert_display_snackbar_container.ts | 9 ++--- .../alert/views/alert_snackbar_container.ts | 4 +- .../alert/views/alert_snackbar_module.ts | 6 +-- .../webapp/alert/views/alert_snackbar_test.ts | 17 +++------ .../webapp/core/views/layout_module.ts | 4 +- .../views/feature_flag_dialog_module.ts | 6 +-- .../feature_flag_modal_trigger_container.ts | 9 ++--- ...ature_flag_modal_trigger_container_test.ts | 8 ++-- .../webapp/header/dark_mode_toggle_test.ts | 8 ++-- tensorboard/webapp/header/header_module.ts | 16 ++++---- tensorboard/webapp/header/header_test.ts | 16 ++++---- .../header/plugin_selector_component.ts | 4 +- .../data_download_dialog_container.ts | 4 +- .../data_download_dialog_test.ts | 4 +- .../card_renderer/data_download_module.ts | 16 ++++---- .../card_renderer/histogram_card_module.ts | 8 ++-- .../card_renderer/histogram_card_test.ts | 4 +- .../views/card_renderer/image_card_module.ts | 8 ++-- .../views/card_renderer/image_card_test.ts | 8 ++-- .../card_renderer/scalar_card_component.ts | 7 +--- .../views/card_renderer/scalar_card_module.ts | 12 +++--- .../views/card_renderer/scalar_card_test.ts | 17 ++++----- .../views/main_view/filter_input_test.ts | 8 ++-- .../views/main_view/main_view_module.ts | 16 ++++---- .../views/right_pane/right_pane_module.ts | 12 +++--- .../views/right_pane/right_pane_test.ts | 36 +++++++++--------- .../scalar_column_editor_component.ts | 4 +- .../scalar_column_editor_module.ts | 12 +++--- .../scalar_column_editor_test.ts | 28 +++++++++----- .../_views/notification_center_test.ts | 8 ++-- .../_views/views_module.ts | 8 ++-- .../runs_table/regex_edit_dialog_component.ts | 4 +- .../runs_table/regex_edit_dialog_container.ts | 9 ++--- .../runs_table/regex_edit_dialog_test.ts | 24 ++++++------ .../views/runs_table/runs_data_table_test.ts | 4 +- .../runs_group_menu_button_component.ts | 4 +- .../views/runs_table/runs_table_component.ts | 15 +++----- .../views/runs_table/runs_table_module.ts | 36 +++++++++--------- .../runs/views/runs_table/runs_table_test.ts | 38 ++++++++++--------- .../_views/settings_button_component.ts | 4 +- .../webapp/settings/_views/settings_module.ts | 16 ++++---- .../webapp/settings/_views/settings_test.ts | 16 ++++---- tensorboard/webapp/testing/dom.ts | 7 ++++ .../webapp/theme/_tb_theme.template.scss | 7 ++++ .../data_table/column_selector_module.ts | 8 ++-- .../widgets/data_table/data_table_module.ts | 4 +- .../widgets/dropdown/dropdown_module.ts | 4 +- .../webapp/widgets/dropdown/dropdown_test.ts | 10 ++--- .../filter_input/filter_input_component.ts | 6 +-- .../filter_input/filter_input_module.ts | 4 +- .../widgets/filter_input/filter_input_test.ts | 11 +++--- .../sub_view/line_chart_axis_view_test.ts | 16 ++++---- .../line_chart_v2/sub_view/sub_view_module.ts | 12 +++--- .../widgets/range_input/range_input_test.ts | 4 +- 54 files changed, 294 insertions(+), 296 deletions(-) diff --git a/tensorboard/webapp/alert/views/alert_display_snackbar_container.ts b/tensorboard/webapp/alert/views/alert_display_snackbar_container.ts index 139e064b788..ee209639316 100644 --- 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, - @Inject(MAT_LEGACY_SNACK_BAR_DATA) readonly unknownData: unknown, + private readonly snackBarRef: MatSnackBarRef, + @Inject(MAT_SNACK_BAR_DATA) readonly unknownData: unknown, private readonly store: Store ) { 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 index 9b001c6f581..ebd8273586b 100644 --- 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, - 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 index ed88bdbf89b..5aa90179fb6 100644 --- 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 index 3d6d46de01d..2870ac2f3a0 100644 --- 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 index 51ed3634a75..5a6fc1d7f44 100644 --- 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 index a415b320aae..1e384175335 100644 --- 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 index a18f823f776..fba1f843ad6 100644 --- 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 = FeatureFlagDialogContainer; readonly showFeatureFlags$ = this.store.select(getShowFlagsEnabled); - private featureFlagsDialog?: MatLegacyDialogRef; + private featureFlagsDialog?: MatDialogRef; private ngUnsubscribe = new Subject(); constructor( private readonly store: Store, - 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 index 14368165658..5bb82fde767 100644 --- 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 index e5cbfaa08ab..6cedfad7249 100644 --- 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 index b0872db4b5c..9adc6ce0034 100644 --- 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 index 081651fbf56..dbebbfe29bc 100644 --- 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 index fd01fe3ef59..c486424bac9 100644 --- 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 index a9a13adebe6..b20f3e4f269 100644 --- 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, 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 index 2a45ff3cb19..0a74d72f36c 100644 --- 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 index eb668a670e1..64396605725 100644 --- 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], diff --git a/tensorboard/webapp/metrics/views/card_renderer/histogram_card_module.ts b/tensorboard/webapp/metrics/views/card_renderer/histogram_card_module.ts index a1d9b4de211..5b366d1fd69 100644 --- a/tensorboard/webapp/metrics/views/card_renderer/histogram_card_module.ts +++ b/tensorboard/webapp/metrics/views/card_renderer/histogram_card_module.ts @@ -14,9 +14,9 @@ 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 {MatLegacyProgressSpinnerModule} from '@angular/material/legacy-progress-spinner'; +import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; import {HistogramModule} from '../../../widgets/histogram/histogram_module'; import {TruncatedPathModule} from '../../../widgets/text/truncated_path_module'; import {HistogramCardComponent} from './histogram_card_component'; @@ -30,9 +30,9 @@ import {VisLinkedTimeSelectionWarningModule} from './vis_linked_time_selection_w imports: [ CommonModule, HistogramModule, - MatLegacyButtonModule, + MatButtonModule, MatIconModule, - MatLegacyProgressSpinnerModule, + MatProgressSpinnerModule, RunNameModule, TruncatedPathModule, VisLinkedTimeSelectionWarningModule, diff --git a/tensorboard/webapp/metrics/views/card_renderer/histogram_card_test.ts b/tensorboard/webapp/metrics/views/card_renderer/histogram_card_test.ts index ed1c166c453..22ac970d64f 100644 --- a/tensorboard/webapp/metrics/views/card_renderer/histogram_card_test.ts +++ b/tensorboard/webapp/metrics/views/card_renderer/histogram_card_test.ts @@ -14,7 +14,7 @@ limitations under the License. ==============================================================================*/ import {Component, EventEmitter, Input, Output} from '@angular/core'; import {ComponentFixture, TestBed} from '@angular/core/testing'; -import {MatLegacyProgressSpinnerModule} from '@angular/material/legacy-progress-spinner'; +import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; import {By} from '@angular/platform-browser'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; import {Action, Store} from '@ngrx/store'; @@ -99,7 +99,7 @@ describe('histogram card', () => { imports: [ NoopAnimationsModule, MatIconTestingModule, - MatLegacyProgressSpinnerModule, + MatProgressSpinnerModule, RunNameModule, TruncatedPathModule, VisLinkedTimeSelectionWarningModule, diff --git a/tensorboard/webapp/metrics/views/card_renderer/image_card_module.ts b/tensorboard/webapp/metrics/views/card_renderer/image_card_module.ts index b1993996d79..4c66b376d4d 100644 --- a/tensorboard/webapp/metrics/views/card_renderer/image_card_module.ts +++ b/tensorboard/webapp/metrics/views/card_renderer/image_card_module.ts @@ -14,9 +14,9 @@ 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 {MatLegacyProgressSpinnerModule} from '@angular/material/legacy-progress-spinner'; +import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; import {MatLegacySliderModule} from '@angular/material/legacy-slider'; import {TruncatedPathModule} from '../../../widgets/text/truncated_path_module'; import {ImageCardComponent} from './image_card_component'; @@ -31,9 +31,9 @@ import {VisLinkedTimeSelectionWarningModule} from './vis_linked_time_selection_w imports: [ CommonModule, FeatureFlagDirectiveModule, - MatLegacyButtonModule, + MatButtonModule, MatIconModule, - MatLegacyProgressSpinnerModule, + MatProgressSpinnerModule, MatLegacySliderModule, RunNameModule, TruncatedPathModule, diff --git a/tensorboard/webapp/metrics/views/card_renderer/image_card_test.ts b/tensorboard/webapp/metrics/views/card_renderer/image_card_test.ts index a56ad4638b6..2265092ea8c 100644 --- a/tensorboard/webapp/metrics/views/card_renderer/image_card_test.ts +++ b/tensorboard/webapp/metrics/views/card_renderer/image_card_test.ts @@ -14,8 +14,8 @@ limitations under the License. ==============================================================================*/ import {Component, Input} from '@angular/core'; import {ComponentFixture, TestBed} from '@angular/core/testing'; -import {MatLegacyButtonModule} from '@angular/material/legacy-button'; -import {MatLegacyProgressSpinnerModule} from '@angular/material/legacy-progress-spinner'; +import {MatButtonModule} from '@angular/material/button'; +import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; import {MatLegacySliderModule} from '@angular/material/legacy-slider'; import {By} from '@angular/platform-browser'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; @@ -85,9 +85,9 @@ describe('image card', () => { await TestBed.configureTestingModule({ imports: [ NoopAnimationsModule, - MatLegacyButtonModule, + MatButtonModule, MatIconTestingModule, - MatLegacyProgressSpinnerModule, + MatProgressSpinnerModule, MatLegacySliderModule, RunNameModule, TruncatedPathModule, diff --git a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ts b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ts index 3dfa773a58b..74e2390576c 100644 --- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ts +++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.ts @@ -22,7 +22,7 @@ import { Output, ViewChild, } from '@angular/core'; -import {MatLegacyDialog} from '@angular/material/legacy-dialog'; +import {MatDialog} from '@angular/material/dialog'; import {DataLoadState} from '../../../types/data'; import { TimeSelection, @@ -131,10 +131,7 @@ export class ScalarCardComponent { @ViewChild('dataTableContainer') dataTableContainer?: ElementRef; - constructor( - private readonly ref: ElementRef, - private dialog: MatLegacyDialog - ) {} + constructor(private readonly ref: ElementRef, private dialog: MatDialog) {} yScaleType = ScaleType.LINEAR; isViewBoxOverridden: boolean = false; diff --git a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_module.ts b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_module.ts index 7e3d64e5ba6..563903e3e56 100644 --- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_module.ts +++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_module.ts @@ -14,10 +14,10 @@ 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 {MatLegacyMenuModule} from '@angular/material/legacy-menu'; -import {MatLegacyProgressSpinnerModule} from '@angular/material/legacy-progress-spinner'; +import {MatMenuModule} from '@angular/material/menu'; +import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; import {ExperimentAliasModule} from '../../../widgets/experiment_alias/experiment_alias_module'; import {IntersectionObserverModule} from '../../../widgets/intersection_observer/intersection_observer_module'; import {LineChartModule as LineChartV2Module} from '../../../widgets/line_chart_v2/line_chart_module'; @@ -39,10 +39,10 @@ import {VisLinkedTimeSelectionWarningModule} from './vis_linked_time_selection_w ExperimentAliasModule, IntersectionObserverModule, LineChartV2Module, - MatLegacyButtonModule, + MatButtonModule, MatIconModule, - MatLegacyMenuModule, - MatLegacyProgressSpinnerModule, + MatMenuModule, + MatProgressSpinnerModule, ResizeDetectorModule, ScalarCardDataTableModule, ScalarCardLineChartModule, diff --git a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_test.ts b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_test.ts index d8d1f2d6b72..fdb0cbed787 100644 --- a/tensorboard/webapp/metrics/views/card_renderer/scalar_card_test.ts +++ b/tensorboard/webapp/metrics/views/card_renderer/scalar_card_test.ts @@ -30,12 +30,9 @@ import { TestBed, tick, } from '@angular/core/testing'; -import { - MatLegacyDialogModule, - MAT_LEGACY_DIALOG_DATA, -} from '@angular/material/legacy-dialog'; -import {MatLegacyMenuModule} from '@angular/material/legacy-menu'; -import {MatLegacyProgressSpinnerModule} from '@angular/material/legacy-progress-spinner'; +import {MatDialogModule, MAT_DIALOG_DATA} from '@angular/material/dialog'; +import {MatMenuModule} from '@angular/material/menu'; +import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; import {By} from '@angular/platform-browser'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; import {Action, Store} from '@ngrx/store'; @@ -220,7 +217,7 @@ class TestableLineChart { }) class TestableDataDownload { cardId = 'hello'; - constructor(@Inject(MAT_LEGACY_DIALOG_DATA) data: {cardId: string}) { + constructor(@Inject(MAT_DIALOG_DATA) data: {cardId: string}) { this.cardId = data.cardId; } } @@ -336,10 +333,10 @@ describe('scalar card', () => { IntersectionObserverTestingModule, CardFobModule, DataTableModule, - MatLegacyDialogModule, + MatDialogModule, MatIconTestingModule, - MatLegacyMenuModule, - MatLegacyProgressSpinnerModule, + MatMenuModule, + MatProgressSpinnerModule, NoopAnimationsModule, ResizeDetectorTestingModule, TruncatedPathModule, diff --git a/tensorboard/webapp/metrics/views/main_view/filter_input_test.ts b/tensorboard/webapp/metrics/views/main_view/filter_input_test.ts index 8e10df5e64f..7e247723b93 100644 --- a/tensorboard/webapp/metrics/views/main_view/filter_input_test.ts +++ b/tensorboard/webapp/metrics/views/main_view/filter_input_test.ts @@ -15,8 +15,8 @@ limitations under the License. import {OverlayContainer} from '@angular/cdk/overlay'; import {NO_ERRORS_SCHEMA} from '@angular/core'; import {TestBed} from '@angular/core/testing'; -import {MatLegacyAutocompleteModule} from '@angular/material/legacy-autocomplete'; -import {MatLegacyButtonModule} from '@angular/material/legacy-button'; +import {MatAutocompleteModule} from '@angular/material/autocomplete'; +import {MatButtonModule} from '@angular/material/button'; import {By} from '@angular/platform-browser'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; import {Action, Store} from '@ngrx/store'; @@ -42,8 +42,8 @@ describe('metrics filter input', () => { await TestBed.configureTestingModule({ imports: [ NoopAnimationsModule, - MatLegacyAutocompleteModule, - MatLegacyButtonModule, + MatAutocompleteModule, + MatButtonModule, MatIconTestingModule, FilterInputModule, ], diff --git a/tensorboard/webapp/metrics/views/main_view/main_view_module.ts b/tensorboard/webapp/metrics/views/main_view/main_view_module.ts index 706eafb9707..21aaa9b0fdf 100644 --- a/tensorboard/webapp/metrics/views/main_view/main_view_module.ts +++ b/tensorboard/webapp/metrics/views/main_view/main_view_module.ts @@ -16,12 +16,12 @@ import {ScrollingModule} from '@angular/cdk/scrolling'; import {CommonModule} from '@angular/common'; import {CustomizationModule} from '../../../customization/customization_module'; import {NgModule} from '@angular/core'; -import {MatLegacyAutocompleteModule} from '@angular/material/legacy-autocomplete'; -import {MatLegacyButtonModule} from '@angular/material/legacy-button'; +import {MatAutocompleteModule} from '@angular/material/autocomplete'; +import {MatButtonModule} from '@angular/material/button'; import {MatButtonToggleModule} from '@angular/material/button-toggle'; import {MatIconModule} from '@angular/material/icon'; -import {MatLegacyInputModule} from '@angular/material/legacy-input'; -import {MatLegacyProgressSpinnerModule} from '@angular/material/legacy-progress-spinner'; +import {MatInputModule} from '@angular/material/input'; +import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; import {FilterInputModule} from '../../../widgets/filter_input/filter_input_module'; import {CardRendererModule} from '../card_renderer/card_renderer_module'; import {RightPaneModule} from '../right_pane/right_pane_module'; @@ -68,12 +68,12 @@ import {PinnedViewContainer} from './pinned_view_container'; CommonModule, CustomizationModule, FilterInputModule, - MatLegacyAutocompleteModule, - MatLegacyButtonModule, + MatAutocompleteModule, + MatButtonModule, MatButtonToggleModule, MatIconModule, - MatLegacyInputModule, - MatLegacyProgressSpinnerModule, + MatInputModule, + MatProgressSpinnerModule, RightPaneModule, ScalarColumnEditorModule, ScrollingModule, diff --git a/tensorboard/webapp/metrics/views/right_pane/right_pane_module.ts b/tensorboard/webapp/metrics/views/right_pane/right_pane_module.ts index b34dd023fdd..b7533a7946c 100644 --- a/tensorboard/webapp/metrics/views/right_pane/right_pane_module.ts +++ b/tensorboard/webapp/metrics/views/right_pane/right_pane_module.ts @@ -14,11 +14,11 @@ 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 {MatButtonToggleModule} from '@angular/material/button-toggle'; -import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; +import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatIconModule} from '@angular/material/icon'; -import {MatLegacySelectModule} from '@angular/material/legacy-select'; +import {MatSelectModule} from '@angular/material/select'; import {MatLegacySliderModule} from '@angular/material/legacy-slider'; import {FeatureFlagModule} from '../../../feature_flag/feature_flag_module'; import {DropdownModule} from '../../../widgets/dropdown/dropdown_module'; @@ -37,11 +37,11 @@ import {SettingsViewContainer} from './settings_view_container'; imports: [ CommonModule, DropdownModule, - MatLegacyButtonModule, + MatButtonModule, MatButtonToggleModule, - MatLegacyCheckboxModule, + MatCheckboxModule, MatIconModule, - MatLegacySelectModule, + MatSelectModule, MatLegacySliderModule, FeatureFlagModule, RangeInputModule, diff --git a/tensorboard/webapp/metrics/views/right_pane/right_pane_test.ts b/tensorboard/webapp/metrics/views/right_pane/right_pane_test.ts index 28aaea6d442..5704b76e86f 100644 --- a/tensorboard/webapp/metrics/views/right_pane/right_pane_test.ts +++ b/tensorboard/webapp/metrics/views/right_pane/right_pane_test.ts @@ -20,8 +20,8 @@ import { tick, } from '@angular/core/testing'; import {MatButtonToggleModule} from '@angular/material/button-toggle'; -import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; -import {MatLegacySelectModule} from '@angular/material/legacy-select'; +import {MatCheckboxModule} from '@angular/material/checkbox'; +import {MatSelectModule} from '@angular/material/select'; import {MatLegacySliderModule} from '@angular/material/legacy-slider'; import {By} from '@angular/platform-browser'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; @@ -48,8 +48,8 @@ describe('metrics right_pane', () => { NoopAnimationsModule, DropdownModule, MatButtonToggleModule, - MatLegacyCheckboxModule, - MatLegacySelectModule, + MatCheckboxModule, + MatSelectModule, MatLegacySliderModule, ], declarations: [ @@ -112,7 +112,7 @@ describe('metrics right_pane', () => { }); }); - function getMatLegacySliderValue(el: DebugElement): string { + function getMatSliderValue(el: DebugElement): string { return el.query(By.css('.mat-slider-thumb-label-text')).nativeElement .textContent; } @@ -176,17 +176,15 @@ describe('metrics right_pane', () => { ); expect(scalarSmoothingInput.nativeElement.value).toBe('0.3'); expect( - getMatLegacySliderValue( - select(fixture, '.scalars-smoothing mat-slider') - ) + getMatSliderValue(select(fixture, '.scalars-smoothing mat-slider')) ).toBe('0.30'); expect( - getMatLegacySliderValue(select(fixture, '.image-brightness mat-slider')) + getMatSliderValue(select(fixture, '.image-brightness mat-slider')) ).toBe('0.1'); expect( - getMatLegacySliderValue(select(fixture, '.image-contrast mat-slider')) + getMatSliderValue(select(fixture, '.image-contrast mat-slider')) ).toBe('0.2'); expect( @@ -323,9 +321,9 @@ describe('metrics right_pane', () => { expect(el.query(By.css('mat-slider'))).toBeTruthy(); expect(el.query(By.css('button'))).toBeTruthy(); - expect( - getMatLegacySliderValue(select(fixture, CARD_WIDTH_SLIDER)) - ).toBe(TEST_ONLY.MIN_CARD_WIDTH_SLIDER_VALUE.toString()); + expect(getMatSliderValue(select(fixture, CARD_WIDTH_SLIDER))).toBe( + TEST_ONLY.MIN_CARD_WIDTH_SLIDER_VALUE.toString() + ); }); it('dispatches metricsChangeCardWidth action when adjusting the slider', fakeAsync(() => { @@ -358,9 +356,9 @@ describe('metrics right_pane', () => { const fixture = TestBed.createComponent(SettingsViewContainer); fixture.detectChanges(); - expect( - getMatLegacySliderValue(select(fixture, CARD_WIDTH_SLIDER)) - ).toBe('400'); + expect(getMatSliderValue(select(fixture, CARD_WIDTH_SLIDER))).toBe( + '400' + ); }); it('does not set invalid value', () => { @@ -368,9 +366,9 @@ describe('metrics right_pane', () => { let fixture = TestBed.createComponent(SettingsViewContainer); fixture.detectChanges(); - expect( - getMatLegacySliderValue(select(fixture, CARD_WIDTH_SLIDER)) - ).toBe(TEST_ONLY.MIN_CARD_WIDTH_SLIDER_VALUE.toString()); + expect(getMatSliderValue(select(fixture, CARD_WIDTH_SLIDER))).toBe( + TEST_ONLY.MIN_CARD_WIDTH_SLIDER_VALUE.toString() + ); }); }); diff --git a/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.ts b/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.ts index 6b090204d60..b17aa03896f 100644 --- a/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.ts +++ b/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.ts @@ -21,7 +21,7 @@ import { OnDestroy, Output, } from '@angular/core'; -import {MatLegacyTabChangeEvent} from '@angular/material/legacy-tabs'; +import {MatTabChangeEvent} from '@angular/material/tabs'; import { ColumnHeader, ColumnHeaderType, @@ -92,7 +92,7 @@ export class ScalarColumnEditorComponent implements OnDestroy { ); } - tabChange(event: MatLegacyTabChangeEvent) { + tabChange(event: MatTabChangeEvent) { const newMode = event.index === 0 ? DataTableMode.SINGLE : DataTableMode.RANGE; this.onTabChange.emit(newMode); diff --git a/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_module.ts b/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_module.ts index 28a0aa656ac..508214d03dd 100644 --- a/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_module.ts +++ b/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_module.ts @@ -14,10 +14,10 @@ limitations under the License. ==============================================================================*/ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; -import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; +import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatIconModule} from '@angular/material/icon'; -import {MatLegacyTabsModule} from '@angular/material/legacy-tabs'; -import {MatLegacyButtonModule} from '@angular/material/legacy-button'; +import {MatTabsModule} from '@angular/material/tabs'; +import {MatButtonModule} from '@angular/material/button'; import {ScalarColumnEditorComponent} from './scalar_column_editor_component'; import {ScalarColumnEditorContainer} from './scalar_column_editor_container'; import {DataTableHeaderModule} from '../../../../widgets/data_table/data_table_header_module'; @@ -28,10 +28,10 @@ import {DataTableHeaderModule} from '../../../../widgets/data_table/data_table_h imports: [ CommonModule, DataTableHeaderModule, - MatLegacyCheckboxModule, - MatLegacyTabsModule, + MatCheckboxModule, + MatTabsModule, MatIconModule, - MatLegacyButtonModule, + MatButtonModule, ], }) export class ScalarColumnEditorModule {} diff --git a/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_test.ts b/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_test.ts index 1714e891b45..6731d9aa6a3 100644 --- a/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_test.ts +++ b/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_test.ts @@ -14,6 +14,7 @@ limitations under the License. ==============================================================================*/ import {NO_ERRORS_SCHEMA} from '@angular/core'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; +import {MatCheckboxModule} from '@angular/material/checkbox'; import { ComponentFixture, fakeAsync, @@ -42,7 +43,7 @@ import { import {DataTableHeaderModule} from '../../../../widgets/data_table/data_table_header_module'; import {ScalarColumnEditorComponent} from './scalar_column_editor_component'; import {ScalarColumnEditorContainer} from './scalar_column_editor_container'; -import {MatLegacyTabsModule} from '@angular/material/legacy-tabs'; +import {MatTabsModule} from '@angular/material/tabs'; describe('scalar column editor', () => { let store: MockStore; @@ -60,7 +61,7 @@ describe('scalar column editor', () => { let index = mode === DataTableMode.SINGLE ? 0 : 1; // Get mat-tab to queue the task of switching tabs fixture.debugElement - .queryAll(By.css('.mat-tab-label')) + .queryAll(By.css('.mat-mdc-tab')) [index].nativeElement.click(); fixture.detectChanges(); @@ -74,8 +75,9 @@ describe('scalar column editor', () => { await TestBed.configureTestingModule({ imports: [ DataTableHeaderModule, - MatLegacyTabsModule, + MatTabsModule, NoopAnimationsModule, + MatCheckboxModule, ], declarations: [ScalarColumnEditorContainer, ScalarColumnEditorComponent], providers: [provideMockStore()], @@ -172,9 +174,15 @@ describe('scalar column editor', () => { expect(checkboxes.length).toEqual(2); expect(checkboxes[0].nativeElement.innerText).toEqual('Run'); - expect(checkboxes[0].nativeElement.checked).toBeTrue(); + expect( + checkboxes[0].nativeElement.attributes.getNamedItem('ng-reflect-checked') + .value + ).toEqual('true'); expect(checkboxes[1].nativeElement.innerText).toEqual('Value'); - expect(checkboxes[1].nativeElement.checked).toBeFalse(); + expect( + checkboxes[1].nativeElement.attributes.getNamedItem('ng-reflect-checked') + .value + ).toEqual('false'); })); describe('toggling', () => { @@ -511,13 +519,13 @@ describe('scalar column editor', () => { it('update when global tableEditorSelectedTab changes', () => { const fixture = createComponent(); fixture.detectChanges(); - const tabs = fixture.debugElement.queryAll(By.css('.mat-tab-label')); + const tabs = fixture.debugElement.queryAll(By.css('.mat-mdc-tab')); expect( - tabs[0].attributes['class']?.includes('mat-tab-label-active') + tabs[0].attributes['class']?.includes('mdc-tab--active') ).toBeTrue(); expect( - tabs[1].attributes['class']?.includes('mat-tab-label-active') + tabs[1].attributes['class']?.includes('mdc-tab--active') ).toBeFalse(); store.overrideSelector(getTableEditorSelectedTab, DataTableMode.RANGE); @@ -525,10 +533,10 @@ describe('scalar column editor', () => { fixture.detectChanges(); expect( - tabs[0].attributes['class']?.includes('mat-tab-label-active') + tabs[0].attributes['class']?.includes('mdc-tab--active') ).toBeFalse(); expect( - tabs[1].attributes['class']?.includes('mat-tab-label-active') + tabs[1].attributes['class']?.includes('mdc-tab--active') ).toBeTrue(); }); }); diff --git a/tensorboard/webapp/notification_center/_views/notification_center_test.ts b/tensorboard/webapp/notification_center/_views/notification_center_test.ts index 53c1b03ad6e..c8277479e9c 100644 --- a/tensorboard/webapp/notification_center/_views/notification_center_test.ts +++ b/tensorboard/webapp/notification_center/_views/notification_center_test.ts @@ -15,8 +15,8 @@ limitations under the License. import {CommonModule} from '@angular/common'; import {NO_ERRORS_SCHEMA} from '@angular/core'; import {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,8 +37,8 @@ describe('notification center', () => { await TestBed.configureTestingModule({ imports: [ CommonModule, - MatLegacyButtonModule, - MatLegacyMenuModule, + MatButtonModule, + MatMenuModule, MatIconTestingModule, NoopAnimationsModule, ], diff --git a/tensorboard/webapp/notification_center/_views/views_module.ts b/tensorboard/webapp/notification_center/_views/views_module.ts index 5a1b185f2cc..c5951e8671e 100644 --- a/tensorboard/webapp/notification_center/_views/views_module.ts +++ b/tensorboard/webapp/notification_center/_views/views_module.ts @@ -14,9 +14,9 @@ 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 {MatLegacyMenuModule} from '@angular/material/legacy-menu'; +import {MatMenuModule} from '@angular/material/menu'; import {MarkdownRendererModule} from '../../widgets/markdown_renderer/markdown_renderer_module'; import {NotificationCenterComponent} from './notification_center_component'; import {NotificationCenterContainer} from './notification_center_container'; @@ -29,9 +29,9 @@ import {NotificationCenterContainer} from './notification_center_container'; exports: [NotificationCenterContainer], imports: [ CommonModule, - MatLegacyButtonModule, + MatButtonModule, MatIconModule, - MatLegacyMenuModule, + MatMenuModule, MarkdownRendererModule, ], }) diff --git a/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_component.ts b/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_component.ts index 8272d01e255..d1d1d67e512 100644 --- a/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_component.ts +++ b/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_component.ts @@ -21,7 +21,7 @@ import { Output, ViewChild, } from '@angular/core'; -import {MatLegacyDialogRef} from '@angular/material/legacy-dialog'; +import {MatDialogRef} from '@angular/material/dialog'; import {Run} from '../../types'; export interface ColorGroup { @@ -48,7 +48,7 @@ export class RegexEditDialogComponent { regexStringInput!: ElementRef; constructor( - public readonly dialogRef: MatLegacyDialogRef, + public readonly dialogRef: MatDialogRef, private readonly hostElRef: ElementRef ) {} diff --git a/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_container.ts b/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_container.ts index 604cf5cc68e..7c466d80c9a 100644 --- a/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_container.ts +++ b/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_container.ts @@ -13,10 +13,7 @@ See the License for the specific language governing permissions and limitations under the License. ==============================================================================*/ import {Component, Inject} from '@angular/core'; -import { - MatLegacyDialogRef, - MAT_LEGACY_DIALOG_DATA, -} from '@angular/material/legacy-dialog'; +import {MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; import {Store} from '@ngrx/store'; import {combineLatest, defer, merge, Observable, Subject} from 'rxjs'; import { @@ -123,8 +120,8 @@ export class RegexEditDialogContainer { constructor( private readonly store: Store, - public dialogRef: MatLegacyDialogRef, - @Inject(MAT_LEGACY_DIALOG_DATA) data: {experimentIds: string[]} + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) data: {experimentIds: string[]} ) { this.experimentIds = data.experimentIds; diff --git a/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_test.ts b/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_test.ts index 329acc261d6..207b206ed41 100644 --- a/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_test.ts +++ b/tensorboard/webapp/runs/views/runs_table/regex_edit_dialog_test.ts @@ -20,12 +20,12 @@ import { tick, } from '@angular/core/testing'; import { - MatLegacyDialogModule, - MatLegacyDialogRef, - MAT_LEGACY_DIALOG_DATA, -} from '@angular/material/legacy-dialog'; -import {MatLegacyInputModule} from '@angular/material/legacy-input'; -import {MatLegacyMenuModule} from '@angular/material/legacy-menu'; + MatDialogModule, + MatDialogRef, + MAT_DIALOG_DATA, +} from '@angular/material/dialog'; +import {MatInputModule} from '@angular/material/input'; +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'; @@ -54,20 +54,20 @@ describe('regex_edit_dialog', () => { let actualActions: Action[]; let dispatchSpy: jasmine.Spy; let store: MockStore; - const matDialogRefSpy = jasmine.createSpyObj('MatLegacyDialogRef', ['close']); + const matDialogRefSpy = jasmine.createSpyObj('MatDialogRef', ['close']); beforeEach(async () => { await TestBed.configureTestingModule({ imports: [ - MatLegacyMenuModule, - MatLegacyInputModule, - MatLegacyDialogModule, + MatMenuModule, + MatInputModule, + MatDialogModule, NoopAnimationsModule, ], declarations: [RegexEditDialogComponent, RegexEditDialogContainer], providers: [ provideMockTbStore(), - {provide: MatLegacyDialogRef, useValue: matDialogRefSpy}, + {provide: MatDialogRef, useValue: matDialogRefSpy}, ], schemas: [NO_ERRORS_SCHEMA], }).compileComponents(); @@ -78,7 +78,7 @@ describe('regex_edit_dialog', () => { }); function createComponent(experimentIds: string[]) { - TestBed.overrideProvider(MAT_LEGACY_DIALOG_DATA, { + TestBed.overrideProvider(MAT_DIALOG_DATA, { useValue: {experimentIds}, }); diff --git a/tensorboard/webapp/runs/views/runs_table/runs_data_table_test.ts b/tensorboard/webapp/runs/views/runs_table/runs_data_table_test.ts index 1191a5c08a5..44038e377ed 100644 --- a/tensorboard/webapp/runs/views/runs_table/runs_data_table_test.ts +++ b/tensorboard/webapp/runs/views/runs_table/runs_data_table_test.ts @@ -18,7 +18,7 @@ import {TestBed} from '@angular/core/testing'; import {RunsDataTable} from './runs_data_table'; import {DataTableModule} from '../../../widgets/data_table/data_table_module'; import {MatIconTestingModule} from '../../../testing/mat_icon_module'; -import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; +import {MatCheckboxModule} from '@angular/material/checkbox'; import { SortingOrder, SortingInfo, @@ -126,7 +126,7 @@ describe('runs_data_table', () => { DataTableModule, FilterInputModule, MatIconTestingModule, - MatLegacyCheckboxModule, + MatCheckboxModule, ], declarations: [TestableComponent, RunsDataTable], schemas: [NO_ERRORS_SCHEMA], diff --git a/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.ts b/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.ts index 9e37ea70d7b..c3fc7164379 100644 --- a/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.ts +++ b/tensorboard/webapp/runs/views/runs_table/runs_group_menu_button_component.ts @@ -19,7 +19,7 @@ import { Input, Output, } from '@angular/core'; -import {MatLegacyDialog} from '@angular/material/legacy-dialog'; +import {MatDialog} from '@angular/material/dialog'; import {GroupBy, GroupByKey} from '../../types'; import {RegexEditDialogContainer} from './regex_edit_dialog_container'; @@ -40,7 +40,7 @@ export class RunsGroupMenuButtonComponent { @Output() onGroupByChange = new EventEmitter(); - constructor(private readonly dialog: MatLegacyDialog) {} + constructor(private readonly dialog: MatDialog) {} onRegexStringEdit() { // data pass in the experiment id diff --git a/tensorboard/webapp/runs/views/runs_table/runs_table_component.ts b/tensorboard/webapp/runs/views/runs_table/runs_table_component.ts index 3a84927aa20..232d5f17fc7 100644 --- a/tensorboard/webapp/runs/views/runs_table/runs_table_component.ts +++ b/tensorboard/webapp/runs/views/runs_table/runs_table_component.ts @@ -23,12 +23,9 @@ import { Output, ViewChild, } from '@angular/core'; -import { - MatLegacyPaginator, - MatLegacyPaginatorIntl, -} from '@angular/material/legacy-paginator'; +import {MatPaginator, MatPaginatorIntl} from '@angular/material/paginator'; import {MatSort, Sort} from '@angular/material/sort'; -import {MatLegacyTableDataSource} from '@angular/material/legacy-table'; +import {MatTableDataSource} from '@angular/material/table'; import { DiscreteFilter, DiscreteHparamValue, @@ -44,7 +41,7 @@ import {HparamSpec, MetricSpec, RunsTableColumn, RunTableItem} from './types'; * Exported because Angular compiler requires decorated classes to be exported. */ @Injectable() -export class RunsPaginatorIntl extends MatLegacyPaginatorIntl { +export class RunsPaginatorIntl extends MatPaginatorIntl { override itemsPerPageLabel = 'Show runs:'; } @@ -76,10 +73,10 @@ export interface IntervalFilterChange { styleUrls: ['runs_table_component.css'], changeDetection: ChangeDetectionStrategy.OnPush, // Use Element Provider since this text is unique to this element hierarchy. - providers: [{provide: MatLegacyPaginatorIntl, useClass: RunsPaginatorIntl}], + providers: [{provide: MatPaginatorIntl, useClass: RunsPaginatorIntl}], }) export class RunsTableComponent implements OnChanges { - readonly dataSource = new MatLegacyTableDataSource(); + readonly dataSource = new MatTableDataSource(); readonly DomainType = DomainType; readonly RunsTableColumn = RunsTableColumn; readonly SortType = SortType; @@ -137,7 +134,7 @@ export class RunsTableComponent implements OnChanges { @ViewChild('filter', {static: true, read: ElementRef}) filter!: ElementRef; - @ViewChild(MatLegacyPaginator, {static: true}) paginator!: MatLegacyPaginator; + @ViewChild(MatPaginator, {static: true}) paginator!: MatPaginator; @ViewChild(MatSort, {static: true}) sort!: MatSort; ngOnChanges() { diff --git a/tensorboard/webapp/runs/views/runs_table/runs_table_module.ts b/tensorboard/webapp/runs/views/runs_table/runs_table_module.ts index 1f03baab1e0..2385048b978 100644 --- a/tensorboard/webapp/runs/views/runs_table/runs_table_module.ts +++ b/tensorboard/webapp/runs/views/runs_table/runs_table_module.ts @@ -18,17 +18,17 @@ limitations under the License. import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; -import {MatLegacyButtonModule} from '@angular/material/legacy-button'; -import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; -import {MatLegacyDialogModule} from '@angular/material/legacy-dialog'; -import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field'; +import {MatButtonModule} from '@angular/material/button'; +import {MatCheckboxModule} from '@angular/material/checkbox'; +import {MatDialogModule} from '@angular/material/dialog'; +import {MatFormFieldModule} from '@angular/material/form-field'; import {MatIconModule} from '@angular/material/icon'; -import {MatLegacyInputModule} from '@angular/material/legacy-input'; -import {MatLegacyMenuModule} from '@angular/material/legacy-menu'; -import {MatLegacyPaginatorModule} from '@angular/material/legacy-paginator'; -import {MatLegacyProgressSpinnerModule} from '@angular/material/legacy-progress-spinner'; +import {MatInputModule} from '@angular/material/input'; +import {MatMenuModule} from '@angular/material/menu'; +import {MatPaginatorModule} from '@angular/material/paginator'; +import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; import {MatSortModule} from '@angular/material/sort'; -import {MatLegacyTableModule} from '@angular/material/legacy-table'; +import {MatTableModule} from '@angular/material/table'; import {ColorPickerModule} from 'ngx-color-picker'; import {AlertModule} from '../../../alert/alert_module'; import {DataTableModule} from '../../../widgets/data_table/data_table_module'; @@ -50,17 +50,17 @@ import {RunsTableContainer} from './runs_table_container'; DataTableModule, ExperimentAliasModule, FilterInputModule, - MatLegacyFormFieldModule, - MatLegacyButtonModule, - MatLegacyCheckboxModule, - MatLegacyDialogModule, - MatLegacyInputModule, + MatFormFieldModule, + MatButtonModule, + MatCheckboxModule, + MatDialogModule, + MatInputModule, MatIconModule, - MatLegacyMenuModule, - MatLegacyPaginatorModule, - MatLegacyProgressSpinnerModule, + MatMenuModule, + MatPaginatorModule, + MatProgressSpinnerModule, MatSortModule, - MatLegacyTableModule, + MatTableModule, RangeInputModule, AlertModule, ], diff --git a/tensorboard/webapp/runs/views/runs_table/runs_table_test.ts b/tensorboard/webapp/runs/views/runs_table/runs_table_test.ts index 8dca1ccc068..373c0fa1104 100644 --- a/tensorboard/webapp/runs/views/runs_table/runs_table_test.ts +++ b/tensorboard/webapp/runs/views/runs_table/runs_table_test.ts @@ -27,13 +27,13 @@ import { flushMicrotasks, TestBed, } from '@angular/core/testing'; -import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; -import {MatLegacyDialogModule} from '@angular/material/legacy-dialog'; -import {MatLegacyMenuModule} from '@angular/material/legacy-menu'; -import {MatLegacyPaginatorModule} from '@angular/material/legacy-paginator'; -import {MatLegacyProgressSpinnerModule} from '@angular/material/legacy-progress-spinner'; +import {MatCheckboxModule} from '@angular/material/checkbox'; +import {MatDialogModule} from '@angular/material/dialog'; +import {MatMenuModule} from '@angular/material/menu'; +import {MatPaginatorModule} from '@angular/material/paginator'; +import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; import {MatSortModule} from '@angular/material/sort'; -import {MatLegacyTableModule} from '@angular/material/legacy-table'; +import {MatTableModule} from '@angular/material/table'; import {By} from '@angular/platform-browser'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; import {Action, Store} from '@ngrx/store'; @@ -238,14 +238,14 @@ describe('runs_table', () => { beforeEach(async () => { await TestBed.configureTestingModule({ imports: [ - MatLegacyCheckboxModule, - MatLegacyDialogModule, + MatCheckboxModule, + MatDialogModule, MatIconTestingModule, - MatLegacyMenuModule, - MatLegacyPaginatorModule, - MatLegacyProgressSpinnerModule, + MatMenuModule, + MatPaginatorModule, + MatProgressSpinnerModule, MatSortModule, - MatLegacyTableModule, + MatTableModule, NoopAnimationsModule, FilterInputModule, RangeInputModule, @@ -1052,7 +1052,7 @@ describe('runs_table', () => { fixture.detectChanges(); const label = fixture.debugElement.query( - By.css('.mat-paginator-page-size-label') + By.css('.mat-mdc-paginator-page-size-label') ); expect(label.nativeElement.textContent).toContain('Show runs:'); }); @@ -1176,7 +1176,7 @@ describe('runs_table', () => { updateTableAndPaginator(fixture); const label = fixture.nativeElement.querySelector( - '.mat-paginator-range-label' + '.mat-mdc-paginator-range-label' ); // By default, mat-paginator take the lowest pageSizeOptions. expect(label.textContent).toContain('6 – 10 of 10'); @@ -1732,7 +1732,9 @@ describe('runs_table', () => { Selector.HEADER_CHECKBOX ); - expect(checkbox.classList.contains('mat-checkbox-checked')).toBe(true); + expect(checkbox.attributes.getNamedItem('ng-reflect-checked').value).toBe( + 'true' + ); }); it( @@ -1768,9 +1770,9 @@ describe('runs_table', () => { Selector.HEADER_CHECKBOX ); - expect(checkbox.classList.contains('mat-checkbox-indeterminate')).toBe( - true - ); + expect( + checkbox.attributes.getNamedItem('ng-reflect-indeterminate').value + ).toBe('true'); } ); diff --git a/tensorboard/webapp/settings/_views/settings_button_component.ts b/tensorboard/webapp/settings/_views/settings_button_component.ts index 2b6d9a61367..f403b2cc278 100644 --- a/tensorboard/webapp/settings/_views/settings_button_component.ts +++ b/tensorboard/webapp/settings/_views/settings_button_component.ts @@ -13,7 +13,7 @@ See the License for the specific language governing permissions and limitations under the License. ==============================================================================*/ import {Component, Input} from '@angular/core'; -import {MatLegacyDialog} from '@angular/material/legacy-dialog'; +import {MatDialog} from '@angular/material/dialog'; import {DataLoadState} from '../../types/data'; import {SettingsDialogContainer} from './settings_dialog_container'; @@ -32,7 +32,7 @@ import {SettingsDialogContainer} from './settings_dialog_container'; export class SettingsButtonComponent { @Input() settingsLoadState!: DataLoadState; - constructor(private dialog: MatLegacyDialog) {} + constructor(private dialog: MatDialog) {} isButtonDisabled() { // Button is disabled if we have not yet attempted to start diff --git a/tensorboard/webapp/settings/_views/settings_module.ts b/tensorboard/webapp/settings/_views/settings_module.ts index 21be7a1f51b..3f4119d57d3 100644 --- a/tensorboard/webapp/settings/_views/settings_module.ts +++ b/tensorboard/webapp/settings/_views/settings_module.ts @@ -15,11 +15,11 @@ limitations under the License. import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {MatLegacyButtonModule} from '@angular/material/legacy-button'; -import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; -import {MatLegacyDialogModule} from '@angular/material/legacy-dialog'; +import {MatButtonModule} from '@angular/material/button'; +import {MatCheckboxModule} from '@angular/material/checkbox'; +import {MatDialogModule} from '@angular/material/dialog'; import {MatIconModule} from '@angular/material/icon'; -import {MatLegacyInputModule} from '@angular/material/legacy-input'; +import {MatInputModule} from '@angular/material/input'; import {SettingsPolymerInteropContainer} from './polymer_interop_container'; import {SettingsButtonComponent} from './settings_button_component'; import {SettingsButtonContainer} from './settings_button_container'; @@ -45,11 +45,11 @@ import {SettingsDialogContainer} from './settings_dialog_container'; CommonModule, FormsModule, ReactiveFormsModule, - MatLegacyButtonModule, - MatLegacyCheckboxModule, - MatLegacyDialogModule, + MatButtonModule, + MatCheckboxModule, + MatDialogModule, MatIconModule, - MatLegacyInputModule, + MatInputModule, ], }) export class SettingsModule {} diff --git a/tensorboard/webapp/settings/_views/settings_test.ts b/tensorboard/webapp/settings/_views/settings_test.ts index 5d0d362d900..c1c24f5e97b 100644 --- a/tensorboard/webapp/settings/_views/settings_test.ts +++ b/tensorboard/webapp/settings/_views/settings_test.ts @@ -15,10 +15,10 @@ limitations under the License. import {OverlayContainer} from '@angular/cdk/overlay'; import {fakeAsync, TestBed, tick} from '@angular/core/testing'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {MatLegacyButtonModule} from '@angular/material/legacy-button'; -import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox'; -import {MatLegacyDialogModule} from '@angular/material/legacy-dialog'; -import {MatLegacyInputModule} from '@angular/material/legacy-input'; +import {MatButtonModule} from '@angular/material/button'; +import {MatCheckboxModule} from '@angular/material/checkbox'; +import {MatDialogModule} from '@angular/material/dialog'; +import {MatInputModule} from '@angular/material/input'; import {By} from '@angular/platform-browser'; import {BrowserDynamicTestingModule} from '@angular/platform-browser-dynamic/testing'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; @@ -46,11 +46,11 @@ describe('settings test', () => { await TestBed.configureTestingModule({ imports: [ FormsModule, - MatLegacyButtonModule, - MatLegacyCheckboxModule, - MatLegacyDialogModule, + MatButtonModule, + MatCheckboxModule, + MatDialogModule, MatIconTestingModule, - MatLegacyInputModule, + MatInputModule, NoopAnimationsModule, ReactiveFormsModule, ], diff --git a/tensorboard/webapp/testing/dom.ts b/tensorboard/webapp/testing/dom.ts index 3feb281e9ea..785283173ae 100644 --- a/tensorboard/webapp/testing/dom.ts +++ b/tensorboard/webapp/testing/dom.ts @@ -35,6 +35,7 @@ export interface SendKeySpecialArg { | 'Tab' | 'Enter' | 'ArrowLeft' + | 'ArrowUp' | 'ArrowRight' | 'Escape'; prevString: string; @@ -88,6 +89,12 @@ export function sendKey( keyCode = 0x25; emitKeyPressAndInput = false; break; + case 'ArrowUp': + nextString = prevString; + nextCursorIndex = startingCursorIndex - 1; + keyCode = 0x26; + emitKeyPressAndInput = false; + break; case 'ArrowRight': nextString = prevString; nextCursorIndex = startingCursorIndex + 1; diff --git a/tensorboard/webapp/theme/_tb_theme.template.scss b/tensorboard/webapp/theme/_tb_theme.template.scss index 24ed43be2f2..3e4a15dc5a4 100644 --- a/tensorboard/webapp/theme/_tb_theme.template.scss +++ b/tensorboard/webapp/theme/_tb_theme.template.scss @@ -265,9 +265,13 @@ $tb-dark-theme: map_merge( // TODO(JamesHollyer): remove legacy component themes once all components // are migrated. @include mat.core(); +<<<<<<< HEAD @include mat.all-legacy-component-typographies(); +======= +>>>>>>> 7169a2fc3 (Angular Component Migration) @include mat.all-component-typographies(); // Include all theme-styles for the components based on the current theme. + @include mat.all-component-themes($tb-theme); @include mat.all-legacy-component-themes($tb-theme); @include mat.all-component-themes($tb-theme); @@ -303,8 +307,11 @@ $tb-dark-theme: map_merge( } } +<<<<<<< HEAD // TODO(JamesHollyer): remove legacy component themes once all components // are migrated. +======= +>>>>>>> 7169a2fc3 (Angular Component Migration) @include mat.all-component-themes($tb-dark-theme); @include mat.all-legacy-component-themes($tb-dark-theme); } diff --git a/tensorboard/webapp/widgets/data_table/column_selector_module.ts b/tensorboard/webapp/widgets/data_table/column_selector_module.ts index adef9b315b7..75d27d0265d 100644 --- a/tensorboard/webapp/widgets/data_table/column_selector_module.ts +++ b/tensorboard/webapp/widgets/data_table/column_selector_module.ts @@ -16,8 +16,8 @@ limitations under the License. import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {MatIconModule} from '@angular/material/icon'; -import {MatLegacyInputModule} from '@angular/material/legacy-input'; -import {MatLegacyButtonModule} from '@angular/material/legacy-button'; +import {MatInputModule} from '@angular/material/input'; +import {MatButtonModule} from '@angular/material/button'; import {ColumnSelectorComponent} from './column_selector_component'; import {FormsModule} from '@angular/forms'; @@ -26,8 +26,8 @@ import {FormsModule} from '@angular/forms'; imports: [ CommonModule, MatIconModule, - MatLegacyInputModule, - MatLegacyButtonModule, + MatInputModule, + MatButtonModule, FormsModule, ], exports: [ColumnSelectorComponent], diff --git a/tensorboard/webapp/widgets/data_table/data_table_module.ts b/tensorboard/webapp/widgets/data_table/data_table_module.ts index b5aa3875a37..62ced1d9f5c 100644 --- a/tensorboard/webapp/widgets/data_table/data_table_module.ts +++ b/tensorboard/webapp/widgets/data_table/data_table_module.ts @@ -16,6 +16,7 @@ limitations under the License. import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {MatIconModule} from '@angular/material/icon'; +import {MatButtonModule} from '@angular/material/button'; import {DataTableComponent} from './data_table_component'; import {HeaderCellComponent} from './header_cell_component'; import {DataTableHeaderModule} from './data_table_header_module'; @@ -23,7 +24,6 @@ import {ContentCellComponent} from './content_cell_component'; import {ContentRowComponent} from './content_row_component'; import {ColumnSelectorModule} from './column_selector_module'; import {CustomModalModule} from '../custom_modal/custom_modal_module'; -import {MatLegacyButtonModule} from '@angular/material/legacy-button'; import {FilterDialogModule} from './filter_dialog_module'; @NgModule({ @@ -42,7 +42,7 @@ import {FilterDialogModule} from './filter_dialog_module'; imports: [ CommonModule, MatIconModule, - MatLegacyButtonModule, + MatButtonModule, DataTableHeaderModule, CustomModalModule, ColumnSelectorModule, diff --git a/tensorboard/webapp/widgets/dropdown/dropdown_module.ts b/tensorboard/webapp/widgets/dropdown/dropdown_module.ts index e3aa8ca2d24..3e5e3236c3b 100644 --- a/tensorboard/webapp/widgets/dropdown/dropdown_module.ts +++ b/tensorboard/webapp/widgets/dropdown/dropdown_module.ts @@ -14,12 +14,12 @@ limitations under the License. ==============================================================================*/ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; -import {MatLegacySelectModule} from '@angular/material/legacy-select'; +import {MatSelectModule} from '@angular/material/select'; import {DropdownComponent} from './dropdown_component'; @NgModule({ declarations: [DropdownComponent], exports: [DropdownComponent], - imports: [CommonModule, MatLegacySelectModule], + imports: [CommonModule, MatSelectModule], }) export class DropdownModule {} diff --git a/tensorboard/webapp/widgets/dropdown/dropdown_test.ts b/tensorboard/webapp/widgets/dropdown/dropdown_test.ts index 8b698b99823..9f7e599aee9 100644 --- a/tensorboard/webapp/widgets/dropdown/dropdown_test.ts +++ b/tensorboard/webapp/widgets/dropdown/dropdown_test.ts @@ -15,8 +15,8 @@ limitations under the License. import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed'; import {Component, Input} from '@angular/core'; import {ComponentFixture, TestBed} from '@angular/core/testing'; -import {MatLegacySelectModule} from '@angular/material/legacy-select'; -import {MatLegacySelectHarness} from '@angular/material/legacy-select/testing'; +import {MatSelectModule} from '@angular/material/select'; +import {MatSelectHarness} from '@angular/material/select/testing'; import {By} from '@angular/platform-browser'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; import {DropdownComponent, DropdownOption} from './dropdown_component'; @@ -50,7 +50,7 @@ describe('tb-dropdown', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [MatLegacySelectModule, NoopAnimationsModule], + imports: [MatSelectModule, NoopAnimationsModule], declarations: [DropdownComponent, TestableComponent], }).compileComponents(); }); @@ -99,7 +99,7 @@ describe('tb-dropdown', () => { ]); // Test DOM content. - const selectHarness = await loader.getHarness(MatLegacySelectHarness); + const selectHarness = await loader.getHarness(MatSelectHarness); await selectHarness.open(); const options = await selectHarness.getOptions(); @@ -137,7 +137,7 @@ describe('tb-dropdown', () => { ]); // Test DOM content. - const selectHarness = await loader.getHarness(MatLegacySelectHarness); + const selectHarness = await loader.getHarness(MatSelectHarness); await selectHarness.open(); const options = await selectHarness.getOptions(); diff --git a/tensorboard/webapp/widgets/filter_input/filter_input_component.ts b/tensorboard/webapp/widgets/filter_input/filter_input_component.ts index 109e4db7233..8343ee46b4c 100644 --- a/tensorboard/webapp/widgets/filter_input/filter_input_component.ts +++ b/tensorboard/webapp/widgets/filter_input/filter_input_component.ts @@ -13,7 +13,7 @@ See the License for the specific language governing permissions and limitations under the License. ==============================================================================*/ import {Component, Input, ViewChild} from '@angular/core'; -import {MatLegacyAutocompleteTrigger} from '@angular/material/legacy-autocomplete'; +import {MatAutocompleteTrigger} from '@angular/material/autocomplete'; /** * A text input field intended for filtering items. @@ -42,8 +42,8 @@ export class FilterInputComponent { @Input() matAutocomplete?: string; @Input() placeholder: string = ''; - @ViewChild(MatLegacyAutocompleteTrigger) - private readonly autocompleteTrigger!: MatLegacyAutocompleteTrigger; + @ViewChild(MatAutocompleteTrigger) + private readonly autocompleteTrigger!: MatAutocompleteTrigger; onInputKeyUp(event: KeyboardEvent) { if (event.key === 'Enter') { diff --git a/tensorboard/webapp/widgets/filter_input/filter_input_module.ts b/tensorboard/webapp/widgets/filter_input/filter_input_module.ts index 03ff7ebcaf7..c5d9252703c 100644 --- a/tensorboard/webapp/widgets/filter_input/filter_input_module.ts +++ b/tensorboard/webapp/widgets/filter_input/filter_input_module.ts @@ -14,13 +14,13 @@ limitations under the License. ==============================================================================*/ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; -import {MatLegacyAutocompleteModule} from '@angular/material/legacy-autocomplete'; +import {MatAutocompleteModule} from '@angular/material/autocomplete'; import {MatIconModule} from '@angular/material/icon'; import {FilterInputComponent} from './filter_input_component'; @NgModule({ declarations: [FilterInputComponent], exports: [FilterInputComponent], - imports: [CommonModule, MatLegacyAutocompleteModule, MatIconModule], + imports: [CommonModule, MatAutocompleteModule, MatIconModule], }) export class FilterInputModule {} diff --git a/tensorboard/webapp/widgets/filter_input/filter_input_test.ts b/tensorboard/webapp/widgets/filter_input/filter_input_test.ts index 29060a54320..8b811c0b63e 100644 --- a/tensorboard/webapp/widgets/filter_input/filter_input_test.ts +++ b/tensorboard/webapp/widgets/filter_input/filter_input_test.ts @@ -14,8 +14,8 @@ limitations under the License. ==============================================================================*/ import {OverlayContainer} from '@angular/cdk/overlay'; import {Component, Input} from '@angular/core'; -import {TestBed} from '@angular/core/testing'; -import {MatLegacyAutocompleteModule} from '@angular/material/legacy-autocomplete'; +import {TestBed, fakeAsync, tick} from '@angular/core/testing'; +import {MatAutocompleteModule} from '@angular/material/autocomplete'; import {By} from '@angular/platform-browser'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; import {KeyType, sendKey} from '../../testing/dom'; @@ -59,7 +59,7 @@ describe('filter input widget', () => { await TestBed.configureTestingModule({ imports: [ NoopAnimationsModule, - MatLegacyAutocompleteModule, + MatAutocompleteModule, MatIconTestingModule, FilterInputModule, ], @@ -98,7 +98,7 @@ describe('filter input widget', () => { expect(isAutocompleteDisabled || !hasAutocomplete).toBe(true); }); - it('shows autocomplete and closes on Enter', () => { + it('shows autocomplete and closes on Enter', fakeAsync(() => { const fixture = TestBed.createComponent(TestableInputWithCompletions); fixture.componentInstance.completions = ['a', 'b', 'c']; fixture.detectChanges(); @@ -116,8 +116,9 @@ describe('filter input widget', () => { key: 'Enter', startingCursorIndex: input.properties['selectionStart'], }); + tick(); const options2 = getAutocompleteOptions(overlayContainer); expect(options2.length).toBe(0); - }); + })); }); diff --git a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view_test.ts b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view_test.ts index 74a9999d7df..8217ab00d75 100644 --- a/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view_test.ts +++ b/tensorboard/webapp/widgets/line_chart_v2/sub_view/line_chart_axis_view_test.ts @@ -17,10 +17,10 @@ import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed'; import {CommonModule} from '@angular/common'; import {Component, DebugElement, Input} from '@angular/core'; import {ComponentFixture, TestBed} from '@angular/core/testing'; -import {MatLegacyButtonModule} from '@angular/material/legacy-button'; -import {MatLegacyInputModule} from '@angular/material/legacy-input'; -import {MatLegacyMenuModule} from '@angular/material/legacy-menu'; -import {MatLegacyMenuHarness} from '@angular/material/legacy-menu/testing'; +import {MatButtonModule} from '@angular/material/button'; +import {MatInputModule} from '@angular/material/input'; +import {MatMenuModule} from '@angular/material/menu'; +import {MatMenuHarness} from '@angular/material/menu/testing'; import {By} from '@angular/platform-browser'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; import {MatIconTestingModule} from '../../../testing/mat_icon_module'; @@ -87,10 +87,10 @@ describe('line_chart_v2/sub_view/axis test', () => { declarations: [TestableComponent, LineChartAxisComponent], imports: [ CommonModule, - MatLegacyButtonModule, + MatButtonModule, MatIconTestingModule, - MatLegacyInputModule, - MatLegacyMenuModule, + MatInputModule, + MatMenuModule, NoopAnimationsModule, OverlayModule, ], @@ -381,7 +381,7 @@ describe('line_chart_v2/sub_view/axis test', () => { fixture.detectChanges(); const overlay = setMinMax(fixture, '100', '1'); - const menuTesting = await loader.getHarness(MatLegacyMenuHarness); + const menuTesting = await loader.getHarness(MatMenuHarness); await menuTesting.close(); expect(overlay.querySelectorAll(EditorSelector.INPUT).length).toBe(0); diff --git a/tensorboard/webapp/widgets/line_chart_v2/sub_view/sub_view_module.ts b/tensorboard/webapp/widgets/line_chart_v2/sub_view/sub_view_module.ts index c63b7d2eb43..94d3ccce2b6 100644 --- a/tensorboard/webapp/widgets/line_chart_v2/sub_view/sub_view_module.ts +++ b/tensorboard/webapp/widgets/line_chart_v2/sub_view/sub_view_module.ts @@ -15,10 +15,10 @@ limitations under the License. import {OverlayModule} from '@angular/cdk/overlay'; 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 {MatLegacyInputModule} from '@angular/material/legacy-input'; -import {MatLegacyMenuModule} from '@angular/material/legacy-menu'; +import {MatInputModule} from '@angular/material/input'; +import {MatMenuModule} from '@angular/material/menu'; import {LineChartAxisComponent} from './line_chart_axis_view'; import {LineChartGridView} from './line_chart_grid_view'; import {LineChartInteractiveViewComponent} from './line_chart_interactive_view'; @@ -42,10 +42,10 @@ import {LineChartInteractiveViewComponent} from './line_chart_interactive_view'; imports: [ CommonModule, OverlayModule, - MatLegacyButtonModule, + MatButtonModule, MatIconModule, - MatLegacyInputModule, - MatLegacyMenuModule, + MatInputModule, + MatMenuModule, ], }) export class SubViewModule {} diff --git a/tensorboard/webapp/widgets/range_input/range_input_test.ts b/tensorboard/webapp/widgets/range_input/range_input_test.ts index ddd94ce940e..e7365300ede 100644 --- a/tensorboard/webapp/widgets/range_input/range_input_test.ts +++ b/tensorboard/webapp/widgets/range_input/range_input_test.ts @@ -127,7 +127,7 @@ describe('range input test', () => { return input.map((inputDebugElement) => inputDebugElement.nativeElement); } - function getMatLegacySliderValue(el: DebugElement): string { + function getMatSliderValue(el: DebugElement): string { return el.query(By.css('.mat-slider-thumb-label-text')).nativeElement .textContent; } @@ -150,7 +150,7 @@ describe('range input test', () => { describe('single selection', () => { it('renders correct slider value', () => { const {fixture} = createComponent({lowerValue: 2}); - expect(getMatLegacySliderValue(fixture.debugElement)).toEqual('2'); + expect(getMatSliderValue(fixture.debugElement)).toEqual('2'); }); });