From 2f038f4fd7c6d777cc60d0d5c2fe47c95648f41e Mon Sep 17 00:00:00 2001 From: jameshollyer Date: Thu, 17 Aug 2023 18:45:06 +0000 Subject: [PATCH 1/2] 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'); }); }); From 0b7f39b755a142ccfffd9456abd7e9ce95889f5d Mon Sep 17 00:00:00 2001 From: jameshollyer Date: Wed, 20 Sep 2023 20:36:01 +0000 Subject: [PATCH 2/2] rebase + depend on legacy mat slider --- .../views/timeline/BUILD | 2 +- .../views/timeline/timeline_module.ts | 4 +- tensorboard/webapp/alert/views/BUILD | 8 ++-- tensorboard/webapp/angular/BUILD | 47 ++++++++----------- tensorboard/webapp/core/views/BUILD | 2 +- tensorboard/webapp/feature_flag/views/BUILD | 10 ++-- tensorboard/webapp/header/BUILD | 16 +++---- .../webapp/metrics/views/card_renderer/BUILD | 36 +++++++------- .../webapp/metrics/views/main_view/BUILD | 12 ++--- .../webapp/metrics/views/right_pane/BUILD | 10 ++-- .../right_pane/scalar_column_editor/BUILD | 7 +-- .../webapp/notification_center/_views/BUILD | 10 ++-- .../webapp/runs/views/runs_table/BUILD | 32 ++++++------- tensorboard/webapp/settings/_views/BUILD | 16 +++---- .../webapp/theme/_tb_theme.template.scss | 6 --- tensorboard/webapp/widgets/data_table/BUILD | 6 +-- tensorboard/webapp/widgets/dropdown/BUILD | 6 +-- tensorboard/webapp/widgets/filter_input/BUILD | 4 +- .../widgets/line_chart_v2/sub_view/BUILD | 14 +++--- 19 files changed, 117 insertions(+), 131 deletions(-) diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/timeline/BUILD b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/timeline/BUILD index 9123b0529ae..c998b03958b 100644 --- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/timeline/BUILD +++ b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/timeline/BUILD @@ -20,8 +20,8 @@ tf_ng_module( "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/store", "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/store:types", "//tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/execution_data", - "//tensorboard/webapp/angular:expect_angular_legacy_material_button", "//tensorboard/webapp/angular:expect_angular_legacy_material_slider", + "//tensorboard/webapp/angular:expect_angular_material_button", "@npm//@angular/common", "@npm//@angular/core", "@npm//@ngrx/store", diff --git a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/timeline/timeline_module.ts b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/timeline/timeline_module.ts index e69fa2625b5..097d7b018dd 100644 --- a/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/timeline/timeline_module.ts +++ b/tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/timeline/timeline_module.ts @@ -15,7 +15,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 {MatLegacySliderModule} from '@angular/material/legacy-slider'; import {ExecutionDataModule} from '../execution_data/execution_data_module'; import {TimelineComponent} from './timeline_component'; @@ -26,7 +26,7 @@ import {TimelineContainer} from './timeline_container'; imports: [ CommonModule, ExecutionDataModule, - MatLegacyButtonModule, + MatButtonModule, MatLegacySliderModule, ], // TODO(cais): The following two providers are meant to make the mat-slider diff --git a/tensorboard/webapp/alert/views/BUILD b/tensorboard/webapp/alert/views/BUILD index b8ec01fa2f3..78e359b7917 100644 --- a/tensorboard/webapp/alert/views/BUILD +++ b/tensorboard/webapp/alert/views/BUILD @@ -26,8 +26,8 @@ tf_ng_module( "//tensorboard/webapp/alert:types", "//tensorboard/webapp/alert/store", "//tensorboard/webapp/alert/store:types", - "//tensorboard/webapp/angular:expect_angular_legacy_material_button", - "//tensorboard/webapp/angular:expect_angular_legacy_material_snackbar", + "//tensorboard/webapp/angular:expect_angular_material_button", + "//tensorboard/webapp/angular:expect_angular_material_snackbar", "//tensorboard/webapp/util:string", "@npm//@angular/common", "@npm//@angular/core", @@ -49,8 +49,8 @@ tf_ts_library( "//tensorboard/webapp/alert/store:testing", "//tensorboard/webapp/angular:expect_angular_cdk_overlay", "//tensorboard/webapp/angular:expect_angular_core_testing", - "//tensorboard/webapp/angular:expect_angular_legacy_material_button", - "//tensorboard/webapp/angular:expect_angular_legacy_material_snackbar", + "//tensorboard/webapp/angular:expect_angular_material_button", + "//tensorboard/webapp/angular:expect_angular_material_snackbar", "//tensorboard/webapp/angular:expect_angular_platform_browser_animations", "//tensorboard/webapp/angular:expect_ngrx_store_testing", "@npm//@angular/core", diff --git a/tensorboard/webapp/angular/BUILD b/tensorboard/webapp/angular/BUILD index a769eb7382b..5c710b161a7 100644 --- a/tensorboard/webapp/angular/BUILD +++ b/tensorboard/webapp/angular/BUILD @@ -71,7 +71,7 @@ tf_ts_library( # This is a dummy rule used as a @angular/material/autocomplete dependency. tf_ts_library( - name = "expect_angular_legacy_material_autocomplete", + name = "expect_angular_material_autocomplete", srcs = [], deps = [ "@npm//@angular/material", @@ -87,15 +87,6 @@ tf_ts_library( ], ) -# This is a dummy rule used as a @angular/material/legacy_checkbox dependency. -tf_ts_library( - name = "expect_angular_legacy_material_checkbox", - srcs = [], - deps = [ - "@npm//@angular/material", - ], -) - # This is a dummy rule used as a @angular/material/checkbox/testing dependency. tf_ts_library( name = "expect_angular_material_checkbox_testing", @@ -107,7 +98,7 @@ tf_ts_library( # This is a dummy rule used as a @angular/material/button dependency. tf_ts_library( - name = "expect_angular_legacy_material_button", + name = "expect_angular_material_button", srcs = [], deps = [ "@npm//@angular/material", @@ -125,7 +116,7 @@ tf_ts_library( # This is a dummy rule used as a @angular/material/chips dependency. tf_ts_library( - name = "expect_angular_legacy_material_chips", + name = "expect_angular_material_chips", srcs = [], deps = [ "@npm//@angular/material", @@ -134,7 +125,7 @@ tf_ts_library( # This is a dummy rule used as a @angular/material/dialog dependency. tf_ts_library( - name = "expect_angular_legacy_material_dialog", + name = "expect_angular_material_dialog", srcs = [], deps = [ "@npm//@angular/material", @@ -143,7 +134,7 @@ tf_ts_library( # This is a dummy rule used as a @angular/material/dialog/testing dependency. tf_ts_library( - name = "expect_angular_legacy_material_dialog_testing", + name = "expect_angular_material_dialog_testing", srcs = [], deps = [ "@npm//@angular/material", @@ -152,7 +143,7 @@ tf_ts_library( # This is a dummy rule used as a @angular/material/expansion dependency. tf_ts_library( - name = "expect_angular_legacy_material_expansion", + name = "expect_angular_material_expansion", srcs = [], deps = [ "@npm//@angular/material", @@ -161,7 +152,7 @@ tf_ts_library( # This is a dummy rule used as a @angular/material/expansion dependency. tf_ts_library( - name = "expect_angular_legacy_material_form_field", + name = "expect_angular_material_form_field", srcs = [], deps = [ "@npm//@angular/material", @@ -188,7 +179,7 @@ tf_ts_library( # This is a dummy rule used as a @angular/material/input dependency. tf_ts_library( - name = "expect_angular_legacy_material_input", + name = "expect_angular_material_input", srcs = [], deps = [ "@npm//@angular/material", @@ -197,7 +188,7 @@ tf_ts_library( # This is a dummy rule used as a @angular/material/menu dependency. tf_ts_library( - name = "expect_angular_legacy_material_menu", + name = "expect_angular_material_menu", srcs = [], deps = [ "@npm//@angular/material", @@ -206,7 +197,7 @@ tf_ts_library( # This is a dummy rule used as a @angular/material/menu/testing dependency. tf_ts_library( - name = "expect_angular_legacy_material_menu_testing", + name = "expect_angular_material_menu_testing", srcs = [], deps = [ "@npm//@angular/material", @@ -215,7 +206,7 @@ tf_ts_library( # This is a dummy rule used as a @angular/material/paginator dependency. tf_ts_library( - name = "expect_angular_legacy_material_paginator", + name = "expect_angular_material_paginator", srcs = [], deps = [ "@npm//@angular/material", @@ -224,7 +215,7 @@ tf_ts_library( # This is a dummy rule used as a @angular/material/progress_spinner dependency. tf_ts_library( - name = "expect_angular_legacy_material_progress_spinner", + name = "expect_angular_material_progress_spinner", srcs = [], deps = [ "@npm//@angular/material", @@ -233,7 +224,7 @@ tf_ts_library( # This is a dummy rule used as a @angular/material/select dependency. tf_ts_library( - name = "expect_angular_legacy_material_select", + name = "expect_angular_material_select", srcs = [], deps = [ "@npm//@angular/material", @@ -242,7 +233,7 @@ tf_ts_library( # This is a dummy rule used as a @angular/material/select/testing dependency. tf_ts_library( - name = "expect_angular_legacy_material_select_testing", + name = "expect_angular_material_select_testing", srcs = [], deps = [ "@npm//@angular/material", @@ -251,7 +242,7 @@ tf_ts_library( # This is a dummy rule used as a @angular/material/slide_toggle dependency. tf_ts_library( - name = "expect_angular_legacy_material_slide_toggle", + name = "expect_angular_material_slide_toggle", srcs = [], deps = [ "@npm//@angular/material", @@ -269,7 +260,7 @@ tf_ts_library( # This is a dummy rule used as a @angular/material/snackbar dependency. tf_ts_library( - name = "expect_angular_legacy_material_snackbar", + name = "expect_angular_material_snackbar", srcs = [], deps = [ "@npm//@angular/material", @@ -287,7 +278,7 @@ tf_ts_library( # This is a dummy rule used as a @angular/material/table dependency. tf_ts_library( - name = "expect_angular_legacy_material_table", + name = "expect_angular_material_table", srcs = [], deps = [ "@npm//@angular/material", @@ -296,7 +287,7 @@ tf_ts_library( # This is a dummy rule used as a @angular/material/tabs dependency. tf_ts_library( - name = "expect_angular_legacy_material_tabs", + name = "expect_angular_material_tabs", srcs = [], deps = [ "@npm//@angular/material", @@ -314,7 +305,7 @@ tf_ts_library( # This is a dummy rule used as a @angular/material/tooltip dependency. tf_ts_library( - name = "expect_angular_legacy_material_tooltip", + name = "expect_angular_material_tooltip", srcs = [], deps = [ "@npm//@angular/material", diff --git a/tensorboard/webapp/core/views/BUILD b/tensorboard/webapp/core/views/BUILD index 5230e45c8a7..511c16191bb 100644 --- a/tensorboard/webapp/core/views/BUILD +++ b/tensorboard/webapp/core/views/BUILD @@ -17,7 +17,7 @@ tf_ng_module( ], assets = [":layout_styles"], deps = [ - "//tensorboard/webapp/angular:expect_angular_legacy_material_button", + "//tensorboard/webapp/angular:expect_angular_material_button", "//tensorboard/webapp/angular:expect_angular_material_icon", "//tensorboard/webapp/core:state", "//tensorboard/webapp/core:types", diff --git a/tensorboard/webapp/feature_flag/views/BUILD b/tensorboard/webapp/feature_flag/views/BUILD index ea089c2fb18..d2c9a10f86a 100644 --- a/tensorboard/webapp/feature_flag/views/BUILD +++ b/tensorboard/webapp/feature_flag/views/BUILD @@ -24,7 +24,7 @@ tf_ng_module( ":feature_flag_dialog", "//tensorboard/webapp:app_state", "//tensorboard/webapp/angular:expect_angular_cdk_overlay", - "//tensorboard/webapp/angular:expect_angular_legacy_material_dialog", + "//tensorboard/webapp/angular:expect_angular_material_dialog", "//tensorboard/webapp/feature_flag/actions", "//tensorboard/webapp/feature_flag/store", "@npm//@angular/common", @@ -48,8 +48,8 @@ tf_ng_module( ], deps = [ "//tensorboard/webapp:app_state", - "//tensorboard/webapp/angular:expect_angular_legacy_material_button", - "//tensorboard/webapp/angular:expect_angular_legacy_material_select", + "//tensorboard/webapp/angular:expect_angular_material_button", + "//tensorboard/webapp/angular:expect_angular_material_select", "//tensorboard/webapp/feature_flag:types", "//tensorboard/webapp/feature_flag/actions", "//tensorboard/webapp/feature_flag/store", @@ -76,8 +76,8 @@ tf_ng_module( "//tensorboard/webapp/angular:expect_angular_cdk_testing", "//tensorboard/webapp/angular:expect_angular_cdk_testing_testbed", "//tensorboard/webapp/angular:expect_angular_core_testing", - "//tensorboard/webapp/angular:expect_angular_legacy_material_dialog", - "//tensorboard/webapp/angular:expect_angular_legacy_material_dialog_testing", + "//tensorboard/webapp/angular:expect_angular_material_dialog", + "//tensorboard/webapp/angular:expect_angular_material_dialog_testing", "//tensorboard/webapp/angular:expect_angular_platform_browser_animations", "//tensorboard/webapp/angular:expect_ngrx_store_testing", "//tensorboard/webapp/feature_flag:types", diff --git a/tensorboard/webapp/header/BUILD b/tensorboard/webapp/header/BUILD index 535a4b0fa89..5502ba956bf 100644 --- a/tensorboard/webapp/header/BUILD +++ b/tensorboard/webapp/header/BUILD @@ -37,11 +37,11 @@ tf_ng_module( ], deps = [ "//tensorboard/webapp:selectors", - "//tensorboard/webapp/angular:expect_angular_legacy_material_button", - "//tensorboard/webapp/angular:expect_angular_legacy_material_menu", - "//tensorboard/webapp/angular:expect_angular_legacy_material_select", - "//tensorboard/webapp/angular:expect_angular_legacy_material_tabs", + "//tensorboard/webapp/angular:expect_angular_material_button", "//tensorboard/webapp/angular:expect_angular_material_icon", + "//tensorboard/webapp/angular:expect_angular_material_menu", + "//tensorboard/webapp/angular:expect_angular_material_select", + "//tensorboard/webapp/angular:expect_angular_material_tabs", "//tensorboard/webapp/angular:expect_angular_material_toolbar", "//tensorboard/webapp/core", "//tensorboard/webapp/core/actions", @@ -70,10 +70,10 @@ tf_ts_library( "//tensorboard/webapp:selectors", "//tensorboard/webapp/angular:expect_angular_cdk_overlay", "//tensorboard/webapp/angular:expect_angular_core_testing", - "//tensorboard/webapp/angular:expect_angular_legacy_material_button", - "//tensorboard/webapp/angular:expect_angular_legacy_material_menu", - "//tensorboard/webapp/angular:expect_angular_legacy_material_select", - "//tensorboard/webapp/angular:expect_angular_legacy_material_tabs", + "//tensorboard/webapp/angular:expect_angular_material_button", + "//tensorboard/webapp/angular:expect_angular_material_menu", + "//tensorboard/webapp/angular:expect_angular_material_select", + "//tensorboard/webapp/angular:expect_angular_material_tabs", "//tensorboard/webapp/angular:expect_angular_material_toolbar", "//tensorboard/webapp/angular:expect_angular_platform_browser_animations", "//tensorboard/webapp/angular:expect_ngrx_store_testing", diff --git a/tensorboard/webapp/metrics/views/card_renderer/BUILD b/tensorboard/webapp/metrics/views/card_renderer/BUILD index 5d6cad6ff65..7076578ebcd 100644 --- a/tensorboard/webapp/metrics/views/card_renderer/BUILD +++ b/tensorboard/webapp/metrics/views/card_renderer/BUILD @@ -61,10 +61,10 @@ tf_ng_module( deps = [ "//tensorboard/webapp:app_state", "//tensorboard/webapp:selectors", - "//tensorboard/webapp/angular:expect_angular_legacy_material_button", - "//tensorboard/webapp/angular:expect_angular_legacy_material_dialog", - "//tensorboard/webapp/angular:expect_angular_legacy_material_input", - "//tensorboard/webapp/angular:expect_angular_legacy_material_select", + "//tensorboard/webapp/angular:expect_angular_material_button", + "//tensorboard/webapp/angular:expect_angular_material_dialog", + "//tensorboard/webapp/angular:expect_angular_material_input", + "//tensorboard/webapp/angular:expect_angular_material_select", "//tensorboard/webapp/feature_flag/directives", "//tensorboard/webapp/metrics:types", "//tensorboard/webapp/metrics/data_source", @@ -106,9 +106,9 @@ tf_ng_module( ":vis_linked_time_selection_warning", "//tensorboard/webapp:app_state", "//tensorboard/webapp:selectors", - "//tensorboard/webapp/angular:expect_angular_legacy_material_button", - "//tensorboard/webapp/angular:expect_angular_legacy_material_progress_spinner", + "//tensorboard/webapp/angular:expect_angular_material_button", "//tensorboard/webapp/angular:expect_angular_material_icon", + "//tensorboard/webapp/angular:expect_angular_material_progress_spinner", "//tensorboard/webapp/metrics:types", "//tensorboard/webapp/metrics/actions", "//tensorboard/webapp/metrics/data_source", @@ -155,10 +155,10 @@ tf_ng_module( ":utils", ":vis_linked_time_selection_warning", "//tensorboard/webapp:app_state", - "//tensorboard/webapp/angular:expect_angular_legacy_material_button", - "//tensorboard/webapp/angular:expect_angular_legacy_material_progress_spinner", "//tensorboard/webapp/angular:expect_angular_legacy_material_slider", + "//tensorboard/webapp/angular:expect_angular_material_button", "//tensorboard/webapp/angular:expect_angular_material_icon", + "//tensorboard/webapp/angular:expect_angular_material_progress_spinner", "//tensorboard/webapp/feature_flag/directives", "//tensorboard/webapp/metrics:types", "//tensorboard/webapp/metrics/actions", @@ -332,11 +332,11 @@ tf_ng_module( "//tensorboard/webapp:app_state", "//tensorboard/webapp:selectors", "//tensorboard/webapp/angular:expect_angular_cdk_overlay", - "//tensorboard/webapp/angular:expect_angular_legacy_material_button", - "//tensorboard/webapp/angular:expect_angular_legacy_material_dialog", - "//tensorboard/webapp/angular:expect_angular_legacy_material_menu", - "//tensorboard/webapp/angular:expect_angular_legacy_material_progress_spinner", + "//tensorboard/webapp/angular:expect_angular_material_button", + "//tensorboard/webapp/angular:expect_angular_material_dialog", "//tensorboard/webapp/angular:expect_angular_material_icon", + "//tensorboard/webapp/angular:expect_angular_material_menu", + "//tensorboard/webapp/angular:expect_angular_material_progress_spinner", "//tensorboard/webapp/experiments:types", "//tensorboard/webapp/feature_flag/store", "//tensorboard/webapp/metrics:types", @@ -449,13 +449,13 @@ tf_ts_library( "//tensorboard/webapp:selectors", "//tensorboard/webapp/angular:expect_angular_cdk_overlay", "//tensorboard/webapp/angular:expect_angular_core_testing", - "//tensorboard/webapp/angular:expect_angular_legacy_material_button", - "//tensorboard/webapp/angular:expect_angular_legacy_material_dialog", - "//tensorboard/webapp/angular:expect_angular_legacy_material_input", - "//tensorboard/webapp/angular:expect_angular_legacy_material_menu", - "//tensorboard/webapp/angular:expect_angular_legacy_material_progress_spinner", - "//tensorboard/webapp/angular:expect_angular_legacy_material_select", "//tensorboard/webapp/angular:expect_angular_legacy_material_slider", + "//tensorboard/webapp/angular:expect_angular_material_button", + "//tensorboard/webapp/angular:expect_angular_material_dialog", + "//tensorboard/webapp/angular:expect_angular_material_input", + "//tensorboard/webapp/angular:expect_angular_material_menu", + "//tensorboard/webapp/angular:expect_angular_material_progress_spinner", + "//tensorboard/webapp/angular:expect_angular_material_select", "//tensorboard/webapp/angular:expect_angular_platform_browser_animations", "//tensorboard/webapp/angular:expect_ngrx_store_testing", "//tensorboard/webapp/experiments:types", diff --git a/tensorboard/webapp/metrics/views/main_view/BUILD b/tensorboard/webapp/metrics/views/main_view/BUILD index aadfccfca45..a0a2f17691a 100644 --- a/tensorboard/webapp/metrics/views/main_view/BUILD +++ b/tensorboard/webapp/metrics/views/main_view/BUILD @@ -137,12 +137,12 @@ tf_ng_module( "//tensorboard/webapp:app_state", "//tensorboard/webapp:selectors", "//tensorboard/webapp/angular:expect_angular_cdk_scrolling", - "//tensorboard/webapp/angular:expect_angular_legacy_material_autocomplete", - "//tensorboard/webapp/angular:expect_angular_legacy_material_button", - "//tensorboard/webapp/angular:expect_angular_legacy_material_input", - "//tensorboard/webapp/angular:expect_angular_legacy_material_progress_spinner", + "//tensorboard/webapp/angular:expect_angular_material_autocomplete", + "//tensorboard/webapp/angular:expect_angular_material_button", "//tensorboard/webapp/angular:expect_angular_material_button_toggle", "//tensorboard/webapp/angular:expect_angular_material_icon", + "//tensorboard/webapp/angular:expect_angular_material_input", + "//tensorboard/webapp/angular:expect_angular_material_progress_spinner", "//tensorboard/webapp/customization", "//tensorboard/webapp/metrics:types", "//tensorboard/webapp/metrics:utils", @@ -185,8 +185,8 @@ tf_ts_library( "//tensorboard/webapp/angular:expect_angular_cdk_overlay", "//tensorboard/webapp/angular:expect_angular_cdk_scrolling", "//tensorboard/webapp/angular:expect_angular_core_testing", - "//tensorboard/webapp/angular:expect_angular_legacy_material_autocomplete", - "//tensorboard/webapp/angular:expect_angular_legacy_material_button", + "//tensorboard/webapp/angular:expect_angular_material_autocomplete", + "//tensorboard/webapp/angular:expect_angular_material_button", "//tensorboard/webapp/angular:expect_angular_platform_browser_animations", "//tensorboard/webapp/angular:expect_ngrx_store_testing", "//tensorboard/webapp/app_routing", diff --git a/tensorboard/webapp/metrics/views/right_pane/BUILD b/tensorboard/webapp/metrics/views/right_pane/BUILD index 68a3eb589cf..2153af26025 100644 --- a/tensorboard/webapp/metrics/views/right_pane/BUILD +++ b/tensorboard/webapp/metrics/views/right_pane/BUILD @@ -27,12 +27,12 @@ tf_ng_module( deps = [ "//tensorboard/webapp:app_state", "//tensorboard/webapp:selectors", - "//tensorboard/webapp/angular:expect_angular_legacy_material_button", - "//tensorboard/webapp/angular:expect_angular_legacy_material_checkbox", - "//tensorboard/webapp/angular:expect_angular_legacy_material_select", "//tensorboard/webapp/angular:expect_angular_legacy_material_slider", + "//tensorboard/webapp/angular:expect_angular_material_button", "//tensorboard/webapp/angular:expect_angular_material_button_toggle", + "//tensorboard/webapp/angular:expect_angular_material_checkbox", "//tensorboard/webapp/angular:expect_angular_material_icon", + "//tensorboard/webapp/angular:expect_angular_material_select", "//tensorboard/webapp/feature_flag", "//tensorboard/webapp/metrics:types", "//tensorboard/webapp/metrics/actions", @@ -58,10 +58,10 @@ tf_ts_library( "//tensorboard/webapp:app_state", "//tensorboard/webapp:selectors", "//tensorboard/webapp/angular:expect_angular_core_testing", - "//tensorboard/webapp/angular:expect_angular_legacy_material_checkbox", - "//tensorboard/webapp/angular:expect_angular_legacy_material_select", "//tensorboard/webapp/angular:expect_angular_legacy_material_slider", "//tensorboard/webapp/angular:expect_angular_material_button_toggle", + "//tensorboard/webapp/angular:expect_angular_material_checkbox", + "//tensorboard/webapp/angular:expect_angular_material_select", "//tensorboard/webapp/angular:expect_angular_platform_browser_animations", "//tensorboard/webapp/angular:expect_ngrx_store_testing", "//tensorboard/webapp/metrics:types", diff --git a/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/BUILD b/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/BUILD index eaf9997903e..4de20c5ee46 100644 --- a/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/BUILD +++ b/tensorboard/webapp/metrics/views/right_pane/scalar_column_editor/BUILD @@ -26,8 +26,8 @@ tf_ng_module( deps = [ "//tensorboard/webapp:app_state", "//tensorboard/webapp:selectors", - "//tensorboard/webapp/angular:expect_angular_legacy_material_checkbox", - "//tensorboard/webapp/angular:expect_angular_legacy_material_tabs", + "//tensorboard/webapp/angular:expect_angular_material_checkbox", + "//tensorboard/webapp/angular:expect_angular_material_tabs", "//tensorboard/webapp/metrics:types", "//tensorboard/webapp/metrics/actions", "//tensorboard/webapp/metrics/store", @@ -50,7 +50,8 @@ tf_ts_library( ":scalar_column_editor", "//tensorboard/webapp:app_state", "//tensorboard/webapp/angular:expect_angular_core_testing", - "//tensorboard/webapp/angular:expect_angular_legacy_material_tabs", + "//tensorboard/webapp/angular:expect_angular_material_checkbox", + "//tensorboard/webapp/angular:expect_angular_material_tabs", "//tensorboard/webapp/angular:expect_angular_platform_browser_animations", "//tensorboard/webapp/angular:expect_ngrx_store_testing", "//tensorboard/webapp/metrics/actions", diff --git a/tensorboard/webapp/notification_center/_views/BUILD b/tensorboard/webapp/notification_center/_views/BUILD index 4954a5de09d..2ca9ee2ffe9 100644 --- a/tensorboard/webapp/notification_center/_views/BUILD +++ b/tensorboard/webapp/notification_center/_views/BUILD @@ -29,9 +29,9 @@ tf_ng_module( deps = [ "//tensorboard/webapp:app_state", "//tensorboard/webapp:selectors", - "//tensorboard/webapp/angular:expect_angular_legacy_material_button", - "//tensorboard/webapp/angular:expect_angular_legacy_material_menu", + "//tensorboard/webapp/angular:expect_angular_material_button", "//tensorboard/webapp/angular:expect_angular_material_icon", + "//tensorboard/webapp/angular:expect_angular_material_menu", "//tensorboard/webapp/notification_center/_redux", "//tensorboard/webapp/notification_center/_redux:actions", "//tensorboard/webapp/notification_center/_redux:types", @@ -54,9 +54,9 @@ tf_ts_library( ":_views", "//tensorboard/webapp:app_state", "//tensorboard/webapp/angular:expect_angular_core_testing", - "//tensorboard/webapp/angular:expect_angular_legacy_material_button", - "//tensorboard/webapp/angular:expect_angular_legacy_material_menu", - "//tensorboard/webapp/angular:expect_angular_legacy_material_snackbar", + "//tensorboard/webapp/angular:expect_angular_material_button", + "//tensorboard/webapp/angular:expect_angular_material_menu", + "//tensorboard/webapp/angular:expect_angular_material_snackbar", "//tensorboard/webapp/angular:expect_angular_platform_browser_animations", "//tensorboard/webapp/angular:expect_ngrx_store_testing", "//tensorboard/webapp/notification_center/_redux", diff --git a/tensorboard/webapp/runs/views/runs_table/BUILD b/tensorboard/webapp/runs/views/runs_table/BUILD index 475344b18b0..4d936d8af1d 100644 --- a/tensorboard/webapp/runs/views/runs_table/BUILD +++ b/tensorboard/webapp/runs/views/runs_table/BUILD @@ -81,17 +81,17 @@ tf_ng_module( "//tensorboard/webapp:selectors", "//tensorboard/webapp/alert", "//tensorboard/webapp/alert/actions", - "//tensorboard/webapp/angular:expect_angular_legacy_material_button", - "//tensorboard/webapp/angular:expect_angular_legacy_material_checkbox", - "//tensorboard/webapp/angular:expect_angular_legacy_material_dialog", - "//tensorboard/webapp/angular:expect_angular_legacy_material_form_field", - "//tensorboard/webapp/angular:expect_angular_legacy_material_input", - "//tensorboard/webapp/angular:expect_angular_legacy_material_menu", - "//tensorboard/webapp/angular:expect_angular_legacy_material_paginator", - "//tensorboard/webapp/angular:expect_angular_legacy_material_progress_spinner", - "//tensorboard/webapp/angular:expect_angular_legacy_material_table", + "//tensorboard/webapp/angular:expect_angular_material_button", + "//tensorboard/webapp/angular:expect_angular_material_checkbox", + "//tensorboard/webapp/angular:expect_angular_material_dialog", + "//tensorboard/webapp/angular:expect_angular_material_form_field", "//tensorboard/webapp/angular:expect_angular_material_icon", + "//tensorboard/webapp/angular:expect_angular_material_input", + "//tensorboard/webapp/angular:expect_angular_material_menu", + "//tensorboard/webapp/angular:expect_angular_material_paginator", + "//tensorboard/webapp/angular:expect_angular_material_progress_spinner", "//tensorboard/webapp/angular:expect_angular_material_sort", + "//tensorboard/webapp/angular:expect_angular_material_table", "//tensorboard/webapp/app_routing", "//tensorboard/webapp/app_routing:types", "//tensorboard/webapp/core/actions", @@ -140,14 +140,14 @@ tf_ts_library( "//tensorboard/webapp/alert/actions", "//tensorboard/webapp/angular:expect_angular_cdk_overlay", "//tensorboard/webapp/angular:expect_angular_core_testing", - "//tensorboard/webapp/angular:expect_angular_legacy_material_checkbox", - "//tensorboard/webapp/angular:expect_angular_legacy_material_dialog", - "//tensorboard/webapp/angular:expect_angular_legacy_material_input", - "//tensorboard/webapp/angular:expect_angular_legacy_material_menu", - "//tensorboard/webapp/angular:expect_angular_legacy_material_paginator", - "//tensorboard/webapp/angular:expect_angular_legacy_material_progress_spinner", - "//tensorboard/webapp/angular:expect_angular_legacy_material_table", + "//tensorboard/webapp/angular:expect_angular_material_checkbox", + "//tensorboard/webapp/angular:expect_angular_material_dialog", + "//tensorboard/webapp/angular:expect_angular_material_input", + "//tensorboard/webapp/angular:expect_angular_material_menu", + "//tensorboard/webapp/angular:expect_angular_material_paginator", + "//tensorboard/webapp/angular:expect_angular_material_progress_spinner", "//tensorboard/webapp/angular:expect_angular_material_sort", + "//tensorboard/webapp/angular:expect_angular_material_table", "//tensorboard/webapp/angular:expect_angular_platform_browser_animations", "//tensorboard/webapp/angular:expect_angular_platform_browser_dynamic_testing", "//tensorboard/webapp/angular:expect_ngrx_store_testing", diff --git a/tensorboard/webapp/settings/_views/BUILD b/tensorboard/webapp/settings/_views/BUILD index 7c23e752d5e..3e6f5f53243 100644 --- a/tensorboard/webapp/settings/_views/BUILD +++ b/tensorboard/webapp/settings/_views/BUILD @@ -18,11 +18,11 @@ tf_ng_module( ], deps = [ "//tensorboard/webapp:tb_polymer_interop_types", - "//tensorboard/webapp/angular:expect_angular_legacy_material_button", - "//tensorboard/webapp/angular:expect_angular_legacy_material_checkbox", - "//tensorboard/webapp/angular:expect_angular_legacy_material_dialog", - "//tensorboard/webapp/angular:expect_angular_legacy_material_input", + "//tensorboard/webapp/angular:expect_angular_material_button", + "//tensorboard/webapp/angular:expect_angular_material_checkbox", + "//tensorboard/webapp/angular:expect_angular_material_dialog", "//tensorboard/webapp/angular:expect_angular_material_icon", + "//tensorboard/webapp/angular:expect_angular_material_input", "//tensorboard/webapp/settings/_redux", "//tensorboard/webapp/types", "@npm//@angular/common", @@ -44,11 +44,11 @@ tf_ts_library( ":_views", "//tensorboard/webapp/angular:expect_angular_cdk_overlay", "//tensorboard/webapp/angular:expect_angular_core_testing", - "//tensorboard/webapp/angular:expect_angular_legacy_material_button", - "//tensorboard/webapp/angular:expect_angular_legacy_material_checkbox", - "//tensorboard/webapp/angular:expect_angular_legacy_material_dialog", - "//tensorboard/webapp/angular:expect_angular_legacy_material_input", + "//tensorboard/webapp/angular:expect_angular_material_button", + "//tensorboard/webapp/angular:expect_angular_material_checkbox", + "//tensorboard/webapp/angular:expect_angular_material_dialog", "//tensorboard/webapp/angular:expect_angular_material_icon", + "//tensorboard/webapp/angular:expect_angular_material_input", "//tensorboard/webapp/angular:expect_angular_platform_browser_animations", "//tensorboard/webapp/angular:expect_angular_platform_browser_dynamic_testing", "//tensorboard/webapp/angular:expect_ngrx_store_testing", diff --git a/tensorboard/webapp/theme/_tb_theme.template.scss b/tensorboard/webapp/theme/_tb_theme.template.scss index 3e4a15dc5a4..60a85d5da06 100644 --- a/tensorboard/webapp/theme/_tb_theme.template.scss +++ b/tensorboard/webapp/theme/_tb_theme.template.scss @@ -265,10 +265,7 @@ $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); @@ -307,11 +304,8 @@ $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/BUILD b/tensorboard/webapp/widgets/data_table/BUILD index 035ace3794e..773be63f419 100644 --- a/tensorboard/webapp/widgets/data_table/BUILD +++ b/tensorboard/webapp/widgets/data_table/BUILD @@ -83,7 +83,7 @@ tf_ng_module( ":data_table_header", ":filter_dialog", ":types", - "//tensorboard/webapp/angular:expect_angular_legacy_material_button", + "//tensorboard/webapp/angular:expect_angular_material_button", "//tensorboard/webapp/angular:expect_angular_material_icon", "//tensorboard/webapp/metrics/views/card_renderer:scalar_card_types", "//tensorboard/webapp/widgets/custom_modal", @@ -125,9 +125,9 @@ tf_ng_module( ], deps = [ ":types", - "//tensorboard/webapp/angular:expect_angular_legacy_material_button", - "//tensorboard/webapp/angular:expect_angular_legacy_material_input", + "//tensorboard/webapp/angular:expect_angular_material_button", "//tensorboard/webapp/angular:expect_angular_material_icon", + "//tensorboard/webapp/angular:expect_angular_material_input", "@npm//@angular/common", "@npm//@angular/core", "@npm//@angular/forms", diff --git a/tensorboard/webapp/widgets/dropdown/BUILD b/tensorboard/webapp/widgets/dropdown/BUILD index 444abca4b25..2e915ea4834 100644 --- a/tensorboard/webapp/widgets/dropdown/BUILD +++ b/tensorboard/webapp/widgets/dropdown/BUILD @@ -24,7 +24,7 @@ tf_ng_module( ":dropdown_styles", ], deps = [ - "//tensorboard/webapp/angular:expect_angular_legacy_material_select", + "//tensorboard/webapp/angular:expect_angular_material_select", "@npm//@angular/common", "@npm//@angular/core", ], @@ -38,8 +38,8 @@ tf_ts_library( ":dropdown", "//tensorboard/webapp/angular:expect_angular_cdk_testing_testbed", "//tensorboard/webapp/angular:expect_angular_core_testing", - "//tensorboard/webapp/angular:expect_angular_legacy_material_select", - "//tensorboard/webapp/angular:expect_angular_legacy_material_select_testing", + "//tensorboard/webapp/angular:expect_angular_material_select", + "//tensorboard/webapp/angular:expect_angular_material_select_testing", "//tensorboard/webapp/angular:expect_angular_platform_browser_animations", "@npm//@angular/core", "@npm//@angular/platform-browser", diff --git a/tensorboard/webapp/widgets/filter_input/BUILD b/tensorboard/webapp/widgets/filter_input/BUILD index b4b41bd3f36..ec87ba1909f 100644 --- a/tensorboard/webapp/widgets/filter_input/BUILD +++ b/tensorboard/webapp/widgets/filter_input/BUILD @@ -21,7 +21,7 @@ tf_ng_module( ":filter_input_component_styles", ], deps = [ - "//tensorboard/webapp/angular:expect_angular_legacy_material_autocomplete", + "//tensorboard/webapp/angular:expect_angular_material_autocomplete", "//tensorboard/webapp/angular:expect_angular_material_icon", "@npm//@angular/common", "@npm//@angular/core", @@ -38,7 +38,7 @@ tf_ts_library( ":filter_input", "//tensorboard/webapp/angular:expect_angular_cdk_overlay", "//tensorboard/webapp/angular:expect_angular_core_testing", - "//tensorboard/webapp/angular:expect_angular_legacy_material_autocomplete", + "//tensorboard/webapp/angular:expect_angular_material_autocomplete", "//tensorboard/webapp/angular:expect_angular_platform_browser_animations", "//tensorboard/webapp/testing:dom", "//tensorboard/webapp/testing:mat_icon", diff --git a/tensorboard/webapp/widgets/line_chart_v2/sub_view/BUILD b/tensorboard/webapp/widgets/line_chart_v2/sub_view/BUILD index 69375080763..130ef7f42d7 100644 --- a/tensorboard/webapp/widgets/line_chart_v2/sub_view/BUILD +++ b/tensorboard/webapp/widgets/line_chart_v2/sub_view/BUILD @@ -39,10 +39,10 @@ tf_ng_module( deps = [ ":internal_types", "//tensorboard/webapp/angular:expect_angular_cdk_overlay", - "//tensorboard/webapp/angular:expect_angular_legacy_material_button", - "//tensorboard/webapp/angular:expect_angular_legacy_material_input", - "//tensorboard/webapp/angular:expect_angular_legacy_material_menu", + "//tensorboard/webapp/angular:expect_angular_material_button", "//tensorboard/webapp/angular:expect_angular_material_icon", + "//tensorboard/webapp/angular:expect_angular_material_input", + "//tensorboard/webapp/angular:expect_angular_material_menu", "//tensorboard/webapp/third_party:d3", "//tensorboard/webapp/util:dom", "//tensorboard/webapp/widgets/line_chart_v2/lib:public_types", @@ -76,10 +76,10 @@ tf_ts_library( "//tensorboard/webapp/angular:expect_angular_cdk_overlay", "//tensorboard/webapp/angular:expect_angular_cdk_testing_testbed", "//tensorboard/webapp/angular:expect_angular_core_testing", - "//tensorboard/webapp/angular:expect_angular_legacy_material_button", - "//tensorboard/webapp/angular:expect_angular_legacy_material_input", - "//tensorboard/webapp/angular:expect_angular_legacy_material_menu", - "//tensorboard/webapp/angular:expect_angular_legacy_material_menu_testing", + "//tensorboard/webapp/angular:expect_angular_material_button", + "//tensorboard/webapp/angular:expect_angular_material_input", + "//tensorboard/webapp/angular:expect_angular_material_menu", + "//tensorboard/webapp/angular:expect_angular_material_menu_testing", "//tensorboard/webapp/angular:expect_angular_platform_browser_animations", "//tensorboard/webapp/testing:mat_icon", "//tensorboard/webapp/widgets/line_chart_v2/lib:public_types",