Skip to content

Commit 2f038f4

Browse files
JamesHollyerJamesHollyer
committed
Angular Component Migration
1 parent cc6e294 commit 2f038f4

File tree

54 files changed

+294
-296
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+294
-296
lines changed

‎tensorboard/webapp/alert/views/alert_display_snackbar_container.ts

+3-6
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,7 @@ See the License for the specific language governing permissions and
1313
limitations under the License.
1414
==============================================================================*/
1515
import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';
16-
import {
17-
MatLegacySnackBarRef,
18-
MAT_LEGACY_SNACK_BAR_DATA,
19-
} from '@angular/material/legacy-snack-bar';
16+
import {MatSnackBarRef, MAT_SNACK_BAR_DATA} from '@angular/material/snack-bar';
2017
import {Store} from '@ngrx/store';
2118
import {State} from '../../app_state';
2219
import {splitByURL} from '../../util/string';
@@ -33,8 +30,8 @@ export class AlertDisplaySnackbarContainer {
3330
readonly splitByURL = splitByURL;
3431

3532
constructor(
36-
private readonly snackBarRef: MatLegacySnackBarRef<AlertDisplaySnackbarContainer>,
37-
@Inject(MAT_LEGACY_SNACK_BAR_DATA) readonly unknownData: unknown,
33+
private readonly snackBarRef: MatSnackBarRef<AlertDisplaySnackbarContainer>,
34+
@Inject(MAT_SNACK_BAR_DATA) readonly unknownData: unknown,
3835
private readonly store: Store<State>
3936
) {
4037
this.alert = unknownData as AlertInfo;

‎tensorboard/webapp/alert/views/alert_snackbar_container.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import {
1818
OnDestroy,
1919
OnInit,
2020
} from '@angular/core';
21-
import {MatLegacySnackBar} from '@angular/material/legacy-snack-bar';
21+
import {MatSnackBar} from '@angular/material/snack-bar';
2222
import {Store} from '@ngrx/store';
2323
import {Subject} from 'rxjs';
2424
import {filter, takeUntil} from 'rxjs/operators';
@@ -40,7 +40,7 @@ export class AlertSnackbarContainer implements OnInit, OnDestroy {
4040

4141
constructor(
4242
private readonly store: Store<State>,
43-
private readonly snackBar: MatLegacySnackBar
43+
private readonly snackBar: MatSnackBar
4444
) {}
4545

4646
ngOnInit() {

‎tensorboard/webapp/alert/views/alert_snackbar_module.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ limitations under the License.
1414
==============================================================================*/
1515
import {CommonModule} from '@angular/common';
1616
import {NgModule} from '@angular/core';
17-
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
18-
import {MatLegacySnackBarModule} from '@angular/material/legacy-snack-bar';
17+
import {MatButtonModule} from '@angular/material/button';
18+
import {MatSnackBarModule} from '@angular/material/snack-bar';
1919
import {AlertDisplaySnackbarContainer} from './alert_display_snackbar_container';
2020
import {AlertSnackbarContainer} from './alert_snackbar_container';
2121

@@ -25,7 +25,7 @@ import {AlertSnackbarContainer} from './alert_snackbar_container';
2525
@NgModule({
2626
declarations: [AlertSnackbarContainer, AlertDisplaySnackbarContainer],
2727
exports: [AlertSnackbarContainer],
28-
imports: [CommonModule, MatLegacyButtonModule, MatLegacySnackBarModule],
28+
imports: [CommonModule, MatButtonModule, MatSnackBarModule],
2929
entryComponents: [
3030
// Required for non-Ivy Angular apps.
3131
AlertDisplaySnackbarContainer,

‎tensorboard/webapp/alert/views/alert_snackbar_test.ts

+5-12
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,8 @@ limitations under the License.
1414
==============================================================================*/
1515
import {OverlayContainer} from '@angular/cdk/overlay';
1616
import {TestBed} from '@angular/core/testing';
17-
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
18-
import {
19-
MatLegacySnackBar,
20-
MatLegacySnackBarModule,
21-
} from '@angular/material/legacy-snack-bar';
17+
import {MatButtonModule} from '@angular/material/button';
18+
import {MatSnackBar, MatSnackBarModule} from '@angular/material/snack-bar';
2219
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
2320
import {Action, createAction, props, Store} from '@ngrx/store';
2421
import {MockStore, provideMockStore} from '@ngrx/store/testing';
@@ -45,15 +42,11 @@ describe('alert snackbar', () => {
4542
let snackBarOpenSpy: jasmine.Spy;
4643
let recordedActions: Action[] = [];
4744
let overlayContainer: OverlayContainer;
48-
let snackbar: MatLegacySnackBar;
45+
let snackbar: MatSnackBar;
4946

5047
beforeEach(async () => {
5148
await TestBed.configureTestingModule({
52-
imports: [
53-
NoopAnimationsModule,
54-
MatLegacyButtonModule,
55-
MatLegacySnackBarModule,
56-
],
49+
imports: [NoopAnimationsModule, MatButtonModule, MatSnackBarModule],
5750
providers: [
5851
provideMockStore({
5952
initialState: buildStateFromAlertState(buildAlertState({})),
@@ -67,7 +60,7 @@ describe('alert snackbar', () => {
6760
recordedActions.push(action);
6861
});
6962
overlayContainer = TestBed.inject(OverlayContainer);
70-
snackbar = TestBed.inject(MatLegacySnackBar);
63+
snackbar = TestBed.inject(MatSnackBar);
7164
snackBarOpenSpy = spyOn(snackbar, 'openFromComponent').and.callThrough();
7265
});
7366

‎tensorboard/webapp/core/views/layout_module.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ limitations under the License.
1414
==============================================================================*/
1515
import {CommonModule} from '@angular/common';
1616
import {NgModule} from '@angular/core';
17-
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
17+
import {MatButtonModule} from '@angular/material/button';
1818
import {MatIconModule} from '@angular/material/icon';
1919
import {LayoutContainer} from './layout_container';
2020

@@ -24,6 +24,6 @@ import {LayoutContainer} from './layout_container';
2424
@NgModule({
2525
declarations: [LayoutContainer],
2626
exports: [LayoutContainer],
27-
imports: [CommonModule, MatIconModule, MatLegacyButtonModule],
27+
imports: [CommonModule, MatIconModule, MatButtonModule],
2828
})
2929
export class LayoutModule {}

‎tensorboard/webapp/feature_flag/views/feature_flag_dialog_module.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ limitations under the License.
1414
==============================================================================*/
1515
import {CommonModule} from '@angular/common';
1616
import {NgModule} from '@angular/core';
17-
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
18-
import {MatLegacySelectModule} from '@angular/material/legacy-select';
17+
import {MatButtonModule} from '@angular/material/button';
18+
import {MatSelectModule} from '@angular/material/select';
1919
import {FeatureFlagDialogComponent} from './feature_flag_dialog_component';
2020
import {FeatureFlagDialogContainer} from './feature_flag_dialog_container';
2121

@@ -24,7 +24,7 @@ import {FeatureFlagDialogContainer} from './feature_flag_dialog_container';
2424
*/
2525
@NgModule({
2626
declarations: [FeatureFlagDialogComponent, FeatureFlagDialogContainer],
27-
imports: [CommonModule, MatLegacyButtonModule, MatLegacySelectModule],
27+
imports: [CommonModule, MatButtonModule, MatSelectModule],
2828
exports: [FeatureFlagDialogContainer],
2929
entryComponents: [FeatureFlagDialogContainer],
3030
})

‎tensorboard/webapp/feature_flag/views/feature_flag_modal_trigger_container.ts

+3-6
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,7 @@ limitations under the License.
1414
==============================================================================*/
1515
import {ComponentType} from '@angular/cdk/overlay';
1616
import {Component, OnDestroy, OnInit} from '@angular/core';
17-
import {
18-
MatLegacyDialog,
19-
MatLegacyDialogRef,
20-
} from '@angular/material/legacy-dialog';
17+
import {MatDialog, MatDialogRef} from '@angular/material/dialog';
2118
import {Store} from '@ngrx/store';
2219
import {Subject} from 'rxjs';
2320
import {takeUntil} from 'rxjs/operators';
@@ -42,12 +39,12 @@ export class FeatureFlagModalTriggerContainer implements OnInit, OnDestroy {
4239
featureFlagDialogType: ComponentType<any> = FeatureFlagDialogContainer;
4340

4441
readonly showFeatureFlags$ = this.store.select(getShowFlagsEnabled);
45-
private featureFlagsDialog?: MatLegacyDialogRef<FeatureFlagDialogContainer>;
42+
private featureFlagsDialog?: MatDialogRef<FeatureFlagDialogContainer>;
4643
private ngUnsubscribe = new Subject<void>();
4744

4845
constructor(
4946
private readonly store: Store<State>,
50-
private dialog: MatLegacyDialog
47+
private dialog: MatDialog
5148
) {}
5249

5350
ngOnInit() {

‎tensorboard/webapp/feature_flag/views/feature_flag_modal_trigger_container_test.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ import {HarnessLoader} from '@angular/cdk/testing';
1616
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
1717
import {Component} from '@angular/core';
1818
import {ComponentFixture, TestBed} from '@angular/core/testing';
19-
import {MatLegacyDialogModule} from '@angular/material/legacy-dialog';
20-
import {MatLegacyDialogHarness} from '@angular/material/legacy-dialog/testing';
19+
import {MatDialogModule} from '@angular/material/dialog';
20+
import {MatDialogHarness} from '@angular/material/dialog/testing';
2121
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
2222
import {Store} from '@ngrx/store';
2323
import {MockStore} from '@ngrx/store/testing';
@@ -47,7 +47,7 @@ describe('feature_flag_modal_trigger_container', () => {
4747

4848
beforeEach(async () => {
4949
await TestBed.configureTestingModule({
50-
imports: [MatLegacyDialogModule, NoopAnimationsModule],
50+
imports: [MatDialogModule, NoopAnimationsModule],
5151
providers: [provideMockTbStore()],
5252
}).compileComponents();
5353

@@ -78,7 +78,7 @@ describe('feature_flag_modal_trigger_container', () => {
7878
store.overrideSelector(getOverriddenFeatureFlags, {});
7979
store.overrideSelector(getShowFlagsEnabled, true);
8080
createComponent();
81-
const dialog = await rootLoader.getHarness(MatLegacyDialogHarness);
81+
const dialog = await rootLoader.getHarness(MatDialogHarness);
8282
expect(
8383
(fixture.componentInstance as any).featureFlagsDialog
8484
).not.toBeUndefined();

‎tensorboard/webapp/header/dark_mode_toggle_test.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ limitations under the License.
1515
import {OverlayContainer} from '@angular/cdk/overlay';
1616
import {NO_ERRORS_SCHEMA} from '@angular/core';
1717
import {ComponentFixture, TestBed} from '@angular/core/testing';
18-
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
19-
import {MatLegacyMenuModule} from '@angular/material/legacy-menu';
18+
import {MatButtonModule} from '@angular/material/button';
19+
import {MatMenuModule} from '@angular/material/menu';
2020
import {By} from '@angular/platform-browser';
2121
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
2222
import {Action, Store} from '@ngrx/store';
@@ -37,9 +37,9 @@ describe('dark mode toggle test', () => {
3737
beforeEach(async () => {
3838
await TestBed.configureTestingModule({
3939
imports: [
40-
MatLegacyButtonModule,
40+
MatButtonModule,
4141
MatIconTestingModule,
42-
MatLegacyMenuModule,
42+
MatMenuModule,
4343
NoopAnimationsModule,
4444
],
4545
providers: [provideMockTbStore()],

‎tensorboard/webapp/header/header_module.ts

+8-8
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,11 @@ limitations under the License.
1515
// Uses `async` pipe.
1616
import {CommonModule} from '@angular/common';
1717
import {NgModule} from '@angular/core';
18-
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
18+
import {MatButtonModule} from '@angular/material/button';
1919
import {MatIconModule} from '@angular/material/icon';
20-
import {MatLegacyMenuModule} from '@angular/material/legacy-menu';
21-
import {MatLegacySelectModule} from '@angular/material/legacy-select';
22-
import {MatLegacyTabsModule} from '@angular/material/legacy-tabs';
20+
import {MatMenuModule} from '@angular/material/menu';
21+
import {MatSelectModule} from '@angular/material/select';
22+
import {MatTabsModule} from '@angular/material/tabs';
2323
import {MatToolbarModule} from '@angular/material/toolbar';
2424
import {CoreModule} from '../core/core_module';
2525
import {SettingsModule} from '../settings/settings_module';
@@ -47,12 +47,12 @@ import {ReloadContainer} from './reload_container';
4747
],
4848
providers: [],
4949
imports: [
50-
MatLegacyButtonModule,
50+
MatButtonModule,
5151
MatIconModule,
52-
MatLegacyTabsModule,
52+
MatTabsModule,
5353
MatToolbarModule,
54-
MatLegacySelectModule,
55-
MatLegacyMenuModule,
54+
MatSelectModule,
55+
MatMenuModule,
5656
CommonModule,
5757
CoreModule,
5858
SettingsModule,

‎tensorboard/webapp/header/header_test.ts

+8-8
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@ limitations under the License.
1414
==============================================================================*/
1515
import {DebugElement, NO_ERRORS_SCHEMA} from '@angular/core';
1616
import {TestBed} from '@angular/core/testing';
17-
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
18-
import {MatLegacySelectModule} from '@angular/material/legacy-select';
19-
import {MatLegacyTabsModule} from '@angular/material/legacy-tabs';
17+
import {MatButtonModule} from '@angular/material/button';
18+
import {MatSelectModule} from '@angular/material/select';
19+
import {MatTabsModule} from '@angular/material/tabs';
2020
import {MatToolbarModule} from '@angular/material/toolbar';
2121
import {By} from '@angular/platform-browser';
2222
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
@@ -50,10 +50,10 @@ describe('header test', () => {
5050
beforeEach(async () => {
5151
await TestBed.configureTestingModule({
5252
imports: [
53-
MatLegacyButtonModule,
53+
MatButtonModule,
5454
MatIconTestingModule,
55-
MatLegacySelectModule,
56-
MatLegacyTabsModule,
55+
MatSelectModule,
56+
MatTabsModule,
5757
MatToolbarModule,
5858
NoopAnimationsModule,
5959
],
@@ -105,7 +105,7 @@ describe('header test', () => {
105105
const fixture = TestBed.createComponent(HeaderComponent);
106106
fixture.detectChanges();
107107

108-
const els = fixture.debugElement.queryAll(By.css('.mat-tab-label'));
108+
const els = fixture.debugElement.queryAll(By.css('.mat-mdc-tab'));
109109
expect(els.length).toBe(2);
110110

111111
assertDebugElementText(els[0], 'FOO FIGHTER');
@@ -125,7 +125,7 @@ describe('header test', () => {
125125
fixture.detectChanges();
126126
await fixture.whenStable();
127127

128-
const els = fixture.debugElement.queryAll(By.css('.mat-tab-label'));
128+
const els = fixture.debugElement.queryAll(By.css('.mat-mdc-tab'));
129129
expect(els.length).toBe(3);
130130
assertDebugElementText(els[0], 'MEOW');
131131
assertDebugElementText(els[1], 'WOOF');

‎tensorboard/webapp/header/plugin_selector_component.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ See the License for the specific language governing permissions and
1313
limitations under the License.
1414
==============================================================================*/
1515
import {Component, EventEmitter, Input, Output} from '@angular/core';
16-
import {MatLegacySelectChange} from '@angular/material/legacy-select';
16+
import {MatSelectChange} from '@angular/material/select';
1717
import {PluginId} from '../types/api';
1818
import {UiPluginMetadata} from './types';
1919

@@ -44,7 +44,7 @@ export class PluginSelectorComponent {
4444
this.onPluginSelectionChanged.emit(pluginId);
4545
}
4646

47-
onDisabledPluginSelectionChanged(selectChangeEvent: MatLegacySelectChange) {
47+
onDisabledPluginSelectionChanged(selectChangeEvent: MatSelectChange) {
4848
this.onPluginSelectionChanged.emit(selectChangeEvent.value);
4949
}
5050
}

‎tensorboard/webapp/metrics/views/card_renderer/data_download_dialog_container.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ See the License for the specific language governing permissions and
1313
limitations under the License.
1414
==============================================================================*/
1515
import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';
16-
import {MAT_LEGACY_DIALOG_DATA} from '@angular/material/legacy-dialog';
16+
import {MAT_DIALOG_DATA} from '@angular/material/dialog';
1717
import {Store} from '@ngrx/store';
1818
import {BehaviorSubject, combineLatest, Observable} from 'rxjs';
1919
import {filter, map, startWith} from 'rxjs/operators';
@@ -54,7 +54,7 @@ export class DataDownloadDialogContainer {
5454
constructor(
5555
store: Store<State>,
5656
dataSource: MetricsDataSource,
57-
@Inject(MAT_LEGACY_DIALOG_DATA) data: DataDownloadDialogData
57+
@Inject(MAT_DIALOG_DATA) data: DataDownloadDialogData
5858
) {
5959
this.cardMetadata$ = store
6060
.select(getCardMetadata, data.cardId)

‎tensorboard/webapp/metrics/views/card_renderer/data_download_dialog_test.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ limitations under the License.
1515
import {NO_ERRORS_SCHEMA} from '@angular/core';
1616
import {ComponentFixture, TestBed} from '@angular/core/testing';
1717
import {FormsModule} from '@angular/forms';
18-
import {MAT_LEGACY_DIALOG_DATA} from '@angular/material/legacy-dialog';
18+
import {MAT_DIALOG_DATA} from '@angular/material/dialog';
1919
import {By} from '@angular/platform-browser';
2020
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
2121
import {Store} from '@ngrx/store';
@@ -55,7 +55,7 @@ describe('metrics/views/data_download_dialog', () => {
5555
declarations: [DataDownloadDialogContainer, DataDownloadDialogComponent],
5656
providers: [
5757
provideMockStore({}),
58-
{provide: MAT_LEGACY_DIALOG_DATA, useValue: dialogData},
58+
{provide: MAT_DIALOG_DATA, useValue: dialogData},
5959
{provide: MetricsDataSource, useClass: TestingMetricsDataSource},
6060
],
6161
schemas: [NO_ERRORS_SCHEMA],

‎tensorboard/webapp/metrics/views/card_renderer/data_download_module.ts

+8-8
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@ limitations under the License.
1515
import {CommonModule} from '@angular/common';
1616
import {NgModule} from '@angular/core';
1717
import {FormsModule} from '@angular/forms';
18-
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
19-
import {MatLegacyDialogModule} from '@angular/material/legacy-dialog';
20-
import {MatLegacyInputModule} from '@angular/material/legacy-input';
21-
import {MatLegacySelectModule} from '@angular/material/legacy-select';
18+
import {MatButtonModule} from '@angular/material/button';
19+
import {MatDialogModule} from '@angular/material/dialog';
20+
import {MatInputModule} from '@angular/material/input';
21+
import {MatSelectModule} from '@angular/material/select';
2222
import {FeatureFlagDirectiveModule} from '../../../feature_flag/directives/feature_flag_directive_module';
2323
import {MetricsDataSourceModule} from '../../data_source';
2424
import {DataDownloadDialogComponent} from './data_download_dialog_component';
@@ -31,10 +31,10 @@ import {DataDownloadDialogContainer} from './data_download_dialog_container';
3131
CommonModule,
3232
FeatureFlagDirectiveModule,
3333
FormsModule,
34-
MatLegacyButtonModule,
35-
MatLegacyDialogModule,
36-
MatLegacyInputModule,
37-
MatLegacySelectModule,
34+
MatButtonModule,
35+
MatDialogModule,
36+
MatInputModule,
37+
MatSelectModule,
3838
MetricsDataSourceModule,
3939
],
4040
entryComponents: [DataDownloadDialogContainer],

0 commit comments

Comments
 (0)