Migration to use the new MDC-based Angular Components. Components mig…

…rated: menu

PiperOrigin-RevId: 565193630

frontend/app/common/angular/BUILD

@@ -75,7 +75,7 @@ ts_library(
 )
 
 ts_library(
-    name = "angular_material_legacy_menu",
+    name = "angular_material_menu",
     srcs = [],
     deps = [
         "@npm//@angular/material",
@@ -91,15 +91,15 @@ ts_library(
 )
 
 ts_library(
-    name = "angular_material_legacy_checkbox",
+    name = "angular_material_checkbox",
     srcs = [],
     deps = [
         "@npm//@angular/material",
     ],
 )
 
 ts_library(
-    name = "angular_material_legacy_dialog",
+    name = "angular_material_dialog",
     srcs = [],
     deps = [
         "@npm//@angular/material",

frontend/app/components/capture_profile/BUILD

@@ -20,7 +20,7 @@ xprof_ng_module(
         "@npm//@ngrx/store",
         "@npm//rxjs",
         "@org_xprof//frontend/app/common/angular:angular_material_button",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_dialog",
+        "@org_xprof//frontend/app/common/angular:angular_material_dialog",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_progress_spinner",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_snack_bar",
         "@org_xprof//frontend/app/common/interfaces",

frontend/app/components/capture_profile/capture_profile.ts

@@ -1,5 +1,5 @@
 import {Component, OnDestroy} from '@angular/core';
-import {MatLegacyDialog} from '@angular/material/legacy-dialog';
+import {MatDialog} from '@angular/material/dialog';
 import {MatLegacySnackBar} from '@angular/material/legacy-snack-bar';
 import {Store} from '@ngrx/store';
 import {CaptureProfileOptions, CaptureProfileResponse} from 'org_xprof/frontend/app/common/interfaces/capture_profile';
@@ -27,7 +27,7 @@ export class CaptureProfile implements OnDestroy {
   capturingProfile: Observable<boolean>;
 
   constructor(
-      private readonly dialog: MatLegacyDialog,
+      private readonly dialog: MatDialog,
       private readonly snackBar: MatLegacySnackBar,
       private readonly dataService: DataService,
       private readonly store: Store<{}>) {

frontend/app/components/capture_profile/capture_profile_dialog/BUILD

@@ -19,10 +19,10 @@ xprof_ng_module(
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@org_xprof//frontend/app/common/angular:angular_material_button",
+        "@org_xprof//frontend/app/common/angular:angular_material_dialog",
         "@org_xprof//frontend/app/common/angular:angular_material_expansion",
         "@org_xprof//frontend/app/common/angular:angular_material_form_field",
         "@org_xprof//frontend/app/common/angular:angular_material_input",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_dialog",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_radio",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_tooltip",
         "@org_xprof//frontend/app/common/angular:angular_material_select",

frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MatLegacyDialogRef} from '@angular/material/legacy-dialog';
+import {MatDialogRef} from '@angular/material/dialog';
 
 /** A capture profile dialog component. */
 @Component({
@@ -25,7 +25,7 @@ export class CaptureProfileDialog {
   delay = 0;
 
   constructor(private readonly dialogRef:
-                  MatLegacyDialogRef<CaptureProfileDialog>) {}
+                  MatDialogRef<CaptureProfileDialog>) {}
 
   addressTypeChanged(value: string) {
     this.isTpuName = value === 'tpu';

frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog_module.ts

@@ -3,7 +3,7 @@ import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatExpansionModule} from '@angular/material/expansion';
 import {MatButtonModule} from '@angular/material/button';
-import {MatLegacyDialogModule} from '@angular/material/legacy-dialog';
+import {MatDialogModule} from '@angular/material/dialog';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatInputModule} from '@angular/material/input';
 import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
@@ -21,7 +21,7 @@ import {CaptureProfileDialog} from './capture_profile_dialog';
     CommonModule,
     FormsModule,
     MatButtonModule,
-    MatLegacyDialogModule,
+    MatDialogModule,
     MatExpansionModule,
     MatFormFieldModule,
     MatInputModule,

frontend/app/components/capture_profile/capture_profile_module.ts

@@ -1,7 +1,7 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
-import {MatLegacyDialogModule} from '@angular/material/legacy-dialog';
+import {MatDialogModule} from '@angular/material/dialog';
 import {MatLegacyProgressSpinnerModule} from '@angular/material/legacy-progress-spinner';
 import {MatLegacySnackBarModule} from '@angular/material/legacy-snack-bar';
 
@@ -15,7 +15,7 @@ import {CaptureProfileDialogModule} from './capture_profile_dialog/capture_profi
   imports: [
     CommonModule,
     MatButtonModule,
-    MatLegacyDialogModule,
+    MatDialogModule,
     MatLegacyProgressSpinnerModule,
     CaptureProfileDialogModule,
     MatLegacySnackBarModule,

frontend/app/components/graph_viewer/graph_config/BUILD

@@ -19,11 +19,11 @@ xprof_ng_module(
         "@npm//@angular/forms",
         "@npm//rxjs",
         "@org_xprof//frontend/app/common/angular:angular_material_button",
+        "@org_xprof//frontend/app/common/angular:angular_material_checkbox",
         "@org_xprof//frontend/app/common/angular:angular_material_core",
         "@org_xprof//frontend/app/common/angular:angular_material_form_field",
         "@org_xprof//frontend/app/common/angular:angular_material_icon",
         "@org_xprof//frontend/app/common/angular:angular_material_input",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_checkbox",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_tooltip",
         "@org_xprof//frontend/app/common/angular:angular_material_select",
         "@org_xprof//frontend/app/common/angular:angular_material_sidenav",

frontend/app/components/graph_viewer/graph_config/graph_config_module.ts

@@ -3,7 +3,7 @@ import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatIconModule} from '@angular/material/icon';
 import {MatButtonModule} from '@angular/material/button';
-import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
+import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatOptionModule} from '@angular/material/core';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatInputModule} from '@angular/material/input';
@@ -18,7 +18,7 @@ import {GraphConfig} from './graph_config';
     CommonModule,
     FormsModule,
     MatButtonModule,
-    MatLegacyCheckboxModule,
+    MatCheckboxModule,
     MatFormFieldModule,
     MatIconModule,
     MatInputModule,

frontend/app/components/memory_viewer/memory_viewer_main/BUILD

@@ -18,9 +18,9 @@ xprof_ng_module(
         "@npm//@angular/forms",
         "@npm//@angular/router",
         "@npm//@ngrx/store",
+        "@org_xprof//frontend/app/common/angular:angular_material_checkbox",
         "@org_xprof//frontend/app/common/angular:angular_material_divider",
         "@org_xprof//frontend/app/common/angular:angular_material_icon",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_checkbox",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_tooltip",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/common/utils",

frontend/app/components/memory_viewer/memory_viewer_main/memory_viewer_main_module.ts

@@ -2,7 +2,7 @@ import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatDividerModule} from '@angular/material/divider';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
+import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip';
 import {DiagnosticsViewModule} from 'org_xprof/frontend/app/components/diagnostics_view/diagnostics_view_module';
 import {MaxHeapChartModule} from 'org_xprof/frontend/app/components/memory_viewer/max_heap_chart/max_heap_chart_module';
@@ -18,7 +18,7 @@ import {MemoryViewerMain} from './memory_viewer_main';
     FormsModule,
     MatDividerModule,
     MaxHeapChartModule,
-    MatLegacyCheckboxModule,
+    MatCheckboxModule,
     MatIconModule,
     MatLegacyTooltipModule,
     ProgramOrderChartModule,

frontend/app/components/pod_viewer/topology_graph/BUILD

@@ -22,8 +22,8 @@ xprof_ng_module(
         "@org_xprof//frontend/app/common/angular:angular_material_form_field",
         "@org_xprof//frontend/app/common/angular:angular_material_icon",
         "@org_xprof//frontend/app/common/angular:angular_material_input",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_menu",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_slider",
+        "@org_xprof//frontend/app/common/angular:angular_material_menu",
         "@org_xprof//frontend/app/common/constants",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/common/utils",

frontend/app/components/pod_viewer/topology_graph/topology_graph_module.ts

@@ -4,7 +4,7 @@ import {MatIconModule} from '@angular/material/icon';
 import {MatButtonModule} from '@angular/material/button';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatInputModule} from '@angular/material/input';
-import {MatLegacyMenuModule} from '@angular/material/legacy-menu';
+import {MatMenuModule} from '@angular/material/menu';
 import {MatLegacySliderModule} from '@angular/material/legacy-slider';
 
 import {TopologyGraph} from './topology_graph';
@@ -18,7 +18,7 @@ import {TopologyGraph} from './topology_graph';
     MatFormFieldModule,
     MatIconModule,
     MatInputModule,
-    MatLegacyMenuModule,
+    MatMenuModule,
     MatLegacySliderModule,
   ],
   exports: [TopologyGraph]

frontend/app/components/tensorflow_stats/BUILD

@@ -38,7 +38,7 @@ xprof_ng_module(
         "@org_xprof//frontend/app/common/angular:angular_material_button",
         "@org_xprof//frontend/app/common/angular:angular_material_divider",
         "@org_xprof//frontend/app/common/angular:angular_material_icon",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_menu",
+        "@org_xprof//frontend/app/common/angular:angular_material_menu",
         "@org_xprof//frontend/app/common/constants",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/common/interfaces:chart",

frontend/app/components/tensorflow_stats/tensorflow_stats_module.ts

@@ -3,7 +3,7 @@ import {NgModule} from '@angular/core';
 import {MatDividerModule} from '@angular/material/divider';
 import {MatIconModule} from '@angular/material/icon';
 import {MatButtonModule} from '@angular/material/button';
-import {MatLegacyMenuModule} from '@angular/material/legacy-menu';
+import {MatMenuModule} from '@angular/material/menu';
 import {ChartModule} from 'org_xprof/frontend/app/components/chart/chart';
 import {ExportAsCsvModule} from 'org_xprof/frontend/app/components/controls/export_as_csv/export_as_csv_module';
 import {FlopRateChartModule} from 'org_xprof/frontend/app/components/tensorflow_stats/flop_rate_chart/flop_rate_chart_module';
@@ -21,7 +21,7 @@ import {TensorflowStats} from './tensorflow_stats';
     MatButtonModule,
     MatDividerModule,
     MatIconModule,
-    MatLegacyMenuModule,
+    MatMenuModule,
     ChartModule,
     ExportAsCsvModule,
     FlopRateChartModule,

frontend/styles.scss

@@ -33,7 +33,10 @@ $theme: mat.define-light-theme(
 @include mat.core-theme($theme);
 @include mat.input-theme($theme);
 @include mat.form-field-theme($theme);
+@include mat.checkbox-theme($theme);
 @include mat.select-theme($theme);
+@include mat.menu-theme($theme);
+@include mat.dialog-theme($theme);
 
 html, body {
   height: 100%;