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

…rated: menu PiperOrigin-RevId: 565193630
tensorflow · Sep 15, 2023 · 0d557a6 · 0d557a6
1 parent 8c0a84d
commit 0d557a6
Show file tree

Hide file tree

Showing 61 changed files with 188 additions and 177 deletions.
diff --git a/frontend/app/common/angular/BUILD b/frontend/app/common/angular/BUILD
@@ -35,7 +35,7 @@ ts_library(
 )
 
 ts_library(
-    name = "angular_material_legacy_form_field",
+    name = "angular_material_form_field",
     srcs = [],
     deps = [
         "@npm//@angular/material",
@@ -51,7 +51,7 @@ ts_library(
 )
 
 ts_library(
-    name = "angular_material_legacy_input",
+    name = "angular_material_input",
     srcs = [],
     deps = [
         "@npm//@angular/material",
@@ -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",
@@ -163,15 +163,15 @@ ts_library(
 )
 
 ts_library(
-    name = "angular_material_legacy_core",
+    name = "angular_material_core",
     srcs = [],
     deps = [
         "@npm//@angular/material",
     ],
 )
 
 ts_library(
-    name = "angular_material_legacy_select",
+    name = "angular_material_select",
     srcs = [],
     deps = [
         "@npm//@angular/material",

diff --git a/frontend/app/components/capture_profile/BUILD b/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",

diff --git a/frontend/app/components/capture_profile/capture_profile.ts b/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<{}>) {

diff --git a/frontend/app/components/capture_profile/capture_profile_dialog/BUILD b/frontend/app/components/capture_profile/capture_profile_dialog/BUILD
@@ -19,13 +19,13 @@ 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_legacy_dialog",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_form_field",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_input",
+        "@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_radio",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_select",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_tooltip",
+        "@org_xprof//frontend/app/common/angular:angular_material_select",
         "@org_xprof//frontend/app/common/interfaces",
     ],
 )

diff --git a/...tend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog.ng.html b/...tend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog.ng.html
@@ -39,7 +39,7 @@
   </div>
 
   <div>
-    <mat-form-field>
+    <mat-form-field appearance="outline">
       <mat-label>Host Trace (TraceMe) Level</mat-label>
       <mat-select
         matTooltip="{{ hostTracerTooltip }}"
@@ -55,7 +55,7 @@
   </div>
 
   <div>
-    <mat-form-field>
+    <mat-form-field appearance="outline">
       <mat-label>Device Trace Level</mat-label>
       <mat-select [(ngModel)]="deviceTracerLevel">
         <mat-option value="0">disable</mat-option>
@@ -65,7 +65,7 @@
   </div>
 
   <div>
-    <mat-form-field>
+    <mat-form-field appearance="outline">
       <mat-label>Python Trace Level</mat-label>
       <mat-select [(ngModel)]="pythonTracerLevel">
         <mat-option value="0">disable</mat-option>

diff --git a/frontend/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog.ts b/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';

diff --git a/...nd/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog_module.ts b/...nd/app/components/capture_profile/capture_profile_dialog/capture_profile_dialog_module.ts
@@ -3,11 +3,11 @@ 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 {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
+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';
-import {MatLegacySelectModule} from '@angular/material/legacy-select';
+import {MatSelectModule} from '@angular/material/select';
 import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip';
 import {BrowserModule} from '@angular/platform-browser';
 
@@ -21,12 +21,12 @@ import {CaptureProfileDialog} from './capture_profile_dialog';
     CommonModule,
     FormsModule,
     MatButtonModule,
-    MatLegacyDialogModule,
+    MatDialogModule,
     MatExpansionModule,
-    MatLegacyFormFieldModule,
-    MatLegacyInputModule,
+    MatFormFieldModule,
+    MatInputModule,
     MatLegacyRadioModule,
-    MatLegacySelectModule,
+    MatSelectModule,
     MatLegacyTooltipModule,
   ],
   exports: [CaptureProfileDialog]

diff --git a/frontend/app/components/capture_profile/capture_profile_module.ts b/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,

diff --git a/frontend/app/components/chart/table/BUILD b/frontend/app/components/chart/table/BUILD
@@ -16,9 +16,9 @@ xprof_ng_module(
     deps = [
         "@npm//@angular/core",
         "@npm//@types/google.visualization",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_core",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_form_field",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_select",
+        "@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_select",
     ],
 )
 

diff --git a/frontend/app/components/chart/table/table.ng.html b/frontend/app/components/chart/table/table.ng.html
@@ -1,5 +1,5 @@
 <div [style.height]="height">
-  <mat-form-field *ngIf="displayPageSizeSelector()">
+  <mat-form-field *ngIf="displayPageSizeSelector()" appearance="outline">
     <mat-label>Rows per Page: </mat-label>
     <mat-select (selectionChange)="drawTable()" [(value)]="pageSize">
       <mat-option *ngFor="let option of pageSizeOptions" [value]="option">{{option}}</mat-option>

diff --git a/frontend/app/components/chart/table/table_module.ts b/frontend/app/components/chart/table/table_module.ts
@@ -1,8 +1,8 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyOptionModule} from '@angular/material/legacy-core';
-import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacySelectModule} from '@angular/material/legacy-select';
+import {MatOptionModule} from '@angular/material/core';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatSelectModule} from '@angular/material/select';
 
 import {Table} from './table';
 
@@ -11,9 +11,9 @@ import {Table} from './table';
   declarations: [Table],
   imports: [
     CommonModule,
-    MatLegacyOptionModule,
-    MatLegacySelectModule,
-    MatLegacyFormFieldModule,
+    MatOptionModule,
+    MatSelectModule,
+    MatFormFieldModule,
   ],
   exports: [Table],
 })

diff --git a/frontend/app/components/controls/category_filter/BUILD b/frontend/app/components/controls/category_filter/BUILD
@@ -17,9 +17,9 @@ xprof_ng_module(
         "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@types/google.visualization",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_core",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_form_field",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_select",
+        "@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_select",
     ],
 )
 

diff --git a/frontend/app/components/controls/category_filter/category_filter.ng.html b/frontend/app/components/controls/category_filter/category_filter.ng.html
@@ -1,4 +1,4 @@
-<mat-form-field class="control" *ngIf="columnLabel">
+<mat-form-field class="control" *ngIf="columnLabel" appearance="outline">
   <mat-label>{{columnLabel}}</mat-label>
   <mat-select (selectionChange)="updateFilter()" [(value)]="value">
     <mat-option *ngFor="let option of options" [value]="option">{{option}}</mat-option>

diff --git a/frontend/app/components/controls/category_filter/category_filter_module.ts b/frontend/app/components/controls/category_filter/category_filter_module.ts
@@ -1,8 +1,8 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyOptionModule} from '@angular/material/legacy-core';
-import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacySelectModule} from '@angular/material/legacy-select';
+import {MatOptionModule} from '@angular/material/core';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatSelectModule} from '@angular/material/select';
 
 import {CategoryFilter} from './category_filter';
 
@@ -11,9 +11,9 @@ import {CategoryFilter} from './category_filter';
   declarations: [CategoryFilter],
   imports: [
     CommonModule,
-    MatLegacyOptionModule,
-    MatLegacyFormFieldModule,
-    MatLegacySelectModule,
+    MatOptionModule,
+    MatFormFieldModule,
+    MatSelectModule,
   ],
   exports: [CategoryFilter],
 })

diff --git a/frontend/app/components/controls/string_filter/BUILD b/frontend/app/components/controls/string_filter/BUILD
@@ -17,9 +17,9 @@ xprof_ng_module(
         "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@types/google.visualization",
+        "@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_legacy_form_field",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_input",
+        "@org_xprof//frontend/app/common/angular:angular_material_input",
     ],
 )
 

diff --git a/frontend/app/components/controls/string_filter/string_filter.ng.html b/frontend/app/components/controls/string_filter/string_filter.ng.html
@@ -1,7 +1,7 @@
-<mat-form-field class="input-control" *ngIf="columnLabel">
+<mat-form-field class="control" *ngIf="columnLabel" style="margin-right:8px;">
+  <mat-label>{{columnLabel}}</mat-label>
   <input
     matInput
-    [placeholder]="columnLabel"
     [value]="value"
     (input)="value = $event.target.value; updateFilter()"
   />

diff --git a/frontend/app/components/controls/string_filter/string_filter.scss b/frontend/app/components/controls/string_filter/string_filter.scss
@@ -1,8 +1,15 @@
-/** CSS for a stats table component. */
+/** CSS for string filter component. */
 
 @import 'frontend/app/styles/common';
 
 mat-icon {
   color: $button-focus-color;
   vertical-align: bottom;
 }
+
+// This control class never works for unknown reason
+// added inline style instead
+.control {
+  width: 240px;
+  margin-right: 8px;
+}
diff --git a/frontend/app/components/controls/string_filter/string_filter_module.ts b/frontend/app/components/controls/string_filter/string_filter_module.ts
@@ -1,8 +1,8 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
-import {MatLegacyInputModule} from '@angular/material/legacy-input';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
 
 import {StringFilter} from './string_filter';
 
@@ -11,9 +11,9 @@ import {StringFilter} from './string_filter';
   declarations: [StringFilter],
   imports: [
     CommonModule,
-    MatLegacyFormFieldModule,
+    MatFormFieldModule,
     MatIconModule,
-    MatLegacyInputModule,
+    MatInputModule,
   ],
   exports: [StringFilter],
 })

diff --git a/frontend/app/components/graph_viewer/BUILD b/frontend/app/components/graph_viewer/BUILD
@@ -19,7 +19,7 @@ xprof_ng_module(
         "@npm//@angular/router",
         "@npm//@ngrx/store",
         "@npm//rxjs",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_core",
+        "@org_xprof//frontend/app/common/angular:angular_material_core",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_progress_bar",
         "@org_xprof//frontend/app/common/angular:angular_material_sidenav",
         "@org_xprof//frontend/app/common/constants",

diff --git a/frontend/app/components/graph_viewer/graph_config/BUILD b/frontend/app/components/graph_viewer/graph_config/BUILD
@@ -19,13 +19,13 @@ 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_legacy_checkbox",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_core",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_form_field",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_input",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_select",
+        "@org_xprof//frontend/app/common/angular:angular_material_input",
         "@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",
         "@org_xprof//frontend/app/common/interfaces",
     ],

diff --git a/frontend/app/components/graph_viewer/graph_config/graph_config.ng.html b/frontend/app/components/graph_viewer/graph_config/graph_config.ng.html
@@ -1,11 +1,11 @@
-<div class="item-container">
+<div class="form-container">
   <form (ngSubmit)="onSubmit()">
     <div class="row" *ngIf="!isHloOssTool" id="xla-module-list-header">
       <div [ngClass]="{ 'mat-subheading-2': true }">
         XLA Modules ({{ moduleList.length }})
       </div>
     </div>
-    <mat-form-field class="full-width" *ngIf="!isHloOssTool" id="xla-module-list-selector">
+    <mat-form-field class="full-width" *ngIf="!isHloOssTool" id="xla-module-list-selector" appearance="outline">
       <mat-select
         name="selectedModule"
         panelClass="panel-override"