MDC Migration: Merging feature branch with all new Angular Components…

… Styled as desired. (#6631) Contributors: @rileyajones, @bmd3k, @JamesHollyer ## Motivation for features / changes Angular is deprecating the "Legacy" Material Components. We are migrating to the new MDC Components. This was done in a feature branch. This PR merges the feature branch into master with all components except for the mat-slider converted and styled properly. ## Technical description of changes This was all done in a feature branch for commit history please see that branch here: https://github.com/tensorflow/tensorboard/tree/MDCMigration ## Screenshots of UI changes (or N/A) Here is one basic screenshot of what a TensorBoard looks like now. For more detailed screenshots please see commit history with above link. ![Screenshot 2023-10-10 at 1 50 06 PM](https://github.com/tensorflow/tensorboard/assets/8672809/add132b1-5bfd-4ab9-9ac9-f135114df518) --------- Co-authored-by: Riley Jones <[email protected]> Co-authored-by: Brian Dubois <[email protected]>
tensorflow · Oct 12, 2023 · 9c25f00 · 9c25f00
1 parent 4a5a44d
commit 9c25f00
Show file tree

Hide file tree

Showing 102 changed files with 661 additions and 643 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
@@ -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
@@ -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
@@ -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/alert/views/alert_display_snackbar_container.scss b/tensorboard/webapp/alert/views/alert_display_snackbar_container.scss
@@ -33,6 +33,7 @@ limitations under the License.
   margin-left: auto;
 }
 
-button {
+button.mat-mdc-button {
+  color: inherit;
   text-transform: uppercase;
 }
diff --git a/tensorboard/webapp/alert/views/alert_display_snackbar_container.ts b/tensorboard/webapp/alert/views/alert_display_snackbar_container.ts
@@ -13,10 +13,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';
-import {
-  MatLegacySnackBarRef,
-  MAT_LEGACY_SNACK_BAR_DATA,
-} from '@angular/material/legacy-snack-bar';
+import {MatSnackBarRef, MAT_SNACK_BAR_DATA} from '@angular/material/snack-bar';
 import {Store} from '@ngrx/store';
 import {State} from '../../app_state';
 import {splitByURL} from '../../util/string';
@@ -33,8 +30,8 @@ export class AlertDisplaySnackbarContainer {
   readonly splitByURL = splitByURL;
 
   constructor(
-    private readonly snackBarRef: MatLegacySnackBarRef<AlertDisplaySnackbarContainer>,
-    @Inject(MAT_LEGACY_SNACK_BAR_DATA) readonly unknownData: unknown,
+    private readonly snackBarRef: MatSnackBarRef<AlertDisplaySnackbarContainer>,
+    @Inject(MAT_SNACK_BAR_DATA) readonly unknownData: unknown,
     private readonly store: Store<State>
   ) {
     this.alert = unknownData as AlertInfo;

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

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

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

diff --git a/tensorboard/webapp/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
@@ -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/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 {}