Upgrade angular for oss plugin from v14 to v15

Checked stuff:
- Angular upgrade to ^15.2.9 (find avail versions at https://semver.npmjs.com/ )
- Check on https://update.angular.io/?v=14.0-15.0
- Check relative package compatibility (typescript, nodejs, ngrx, rxjs..) for angular and ngrx: https://angular.io/guide/versions#actively-supported-versions , https://ngrx.io/guide/migration/v15
    - The current default node version met requirements https://github.com/bazelbuild/rules_nodejs/blob/5.7.0/docs/Core.md#node_version
    - Upgrade typescript to 4.8.2
    - Upgrade ngrx
- Fixed style discrepancy by overriding with legacy stylesheets (legacy-core, all-legacy-components-themes, legacy-typography-hierarchy). However some of the legacy sheet is going away in Q4/2023, need to figure out right next step.

PiperOrigin-RevId: 538322545

Author: zzzaries

frontend/BUILD

@@ -76,6 +76,7 @@ sass_binary(
     # need to include the node_modules path to enable sass to find the theming file
     include_paths = [
       "node_modules",
+      # used for resolve the external @npm dependencies
       "external/npm/node_modules",
     ],
     output_name = "styles.css",

frontend/app/BUILD

@@ -19,7 +19,7 @@ xprof_ng_module(
         "@npm//@ngrx/store",
         "@npm//rxjs",
         "@org_xprof//frontend/app/common/angular:angular_common_http",
-        "@org_xprof//frontend/app/common/angular:angular_material_progress_bar",
+        "@org_xprof//frontend/app/common/angular:angular_material_legacy_progress_bar",
         "@org_xprof//frontend/app/common/angular:angular_platform-browser_animation",
         "@org_xprof//frontend/app/common/constants",
         "@org_xprof//frontend/app/common/interfaces",

frontend/app/app_module.ts

@@ -1,6 +1,6 @@
 import {HttpClientModule} from '@angular/common/http';
 import {NgModule} from '@angular/core';
-import {MatProgressBarModule} from '@angular/material/progress-bar';
+import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar';
 import {BrowserModule} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {EmptyPageModule} from 'org_xprof/frontend/app/components/empty_page/empty_page_module';
@@ -18,7 +18,7 @@ import {App} from './app';
   imports: [
     BrowserModule,
     HttpClientModule,
-    MatProgressBarModule,
+    MatLegacyProgressBarModule,
     EmptyPageModule,
     MainPageModule,
     BrowserAnimationsModule,

frontend/app/common/angular/BUILD

@@ -27,15 +27,15 @@ ts_library(
 )
 
 ts_library(
-    name = "angular_material_progress_bar",
+    name = "angular_material_legacy_progress_bar",
     srcs = [],
     deps = [
         "@npm//@angular/material",
     ],
 )
 
 ts_library(
-    name = "angular_material_form_field",
+    name = "angular_material_legacy_form_field",
     srcs = [],
     deps = [
         "@npm//@angular/material",
@@ -51,15 +51,15 @@ ts_library(
 )
 
 ts_library(
-    name = "angular_material_input",
+    name = "angular_material_legacy_input",
     srcs = [],
     deps = [
         "@npm//@angular/material",
     ],
 )
 
 ts_library(
-    name = "angular_material_button",
+    name = "angular_material_legacy_button",
     srcs = [],
     deps = [
         "@npm//@angular/material",
@@ -75,7 +75,7 @@ ts_library(
 )
 
 ts_library(
-    name = "angular_material_menu",
+    name = "angular_material_legacy_menu",
     srcs = [],
     deps = [
         "@npm//@angular/material",
@@ -91,87 +91,87 @@ ts_library(
 )
 
 ts_library(
-    name = "angular_material_checkbox",
+    name = "angular_material_legacy_checkbox",
     srcs = [],
     deps = [
         "@npm//@angular/material",
     ],
 )
 
 ts_library(
-    name = "angular_material_dialog",
+    name = "angular_material_legacy_dialog",
     srcs = [],
     deps = [
         "@npm//@angular/material",
     ],
 )
 
 ts_library(
-    name = "angular_material_radio",
+    name = "angular_material_legacy_radio",
     srcs = [],
     deps = [
         "@npm//@angular/material",
     ],
 )
 
 ts_library(
-    name = "angular_material_progress_spinner",
+    name = "angular_material_legacy_progress_spinner",
     srcs = [],
     deps = [
         "@npm//@angular/material",
     ],
 )
 
 ts_library(
-    name = "angular_material_snack_bar",
+    name = "angular_material_legacy_snack_bar",
     srcs = [],
     deps = [
         "@npm//@angular/material",
     ],
 )
 
 ts_library(
-    name = "angular_material_card",
+    name = "angular_material_legacy_card",
     srcs = [],
     deps = [
         "@npm//@angular/material",
     ],
 )
 
 ts_library(
-    name = "angular_material_slide_toggle",
+    name = "angular_material_legacy_slide_toggle",
     srcs = [],
     deps = [
         "@npm//@angular/material",
     ],
 )
 
 ts_library(
-    name = "angular_material_slider",
+    name = "angular_material_legacy_slider",
     srcs = [],
     deps = [
         "@npm//@angular/material",
     ],
 )
 
 ts_library(
-    name = "angular_material_tooltip",
+    name = "angular_material_legacy_tooltip",
     srcs = [],
     deps = [
         "@npm//@angular/material",
     ],
 )
 
 ts_library(
-    name = "angular_material_core",
+    name = "angular_material_legacy_core",
     srcs = [],
     deps = [
         "@npm//@angular/material",
     ],
 )
 
 ts_library(
-    name = "angular_material_select",
+    name = "angular_material_legacy_select",
     srcs = [],
     deps = [
         "@npm//@angular/material",

frontend/app/components/capture_profile/BUILD

@@ -19,10 +19,10 @@ xprof_ng_module(
         "@npm//@angular/forms",
         "@npm//@ngrx/store",
         "@npm//rxjs",
-        "@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_progress_spinner",
-        "@org_xprof//frontend/app/common/angular:angular_material_snack_bar",
+        "@org_xprof//frontend/app/common/angular:angular_material_legacy_button",
+        "@org_xprof//frontend/app/common/angular:angular_material_legacy_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",
         "@org_xprof//frontend/app/components/capture_profile/capture_profile_dialog",
         "@org_xprof//frontend/app/services/data_service",

frontend/app/components/capture_profile/capture_profile.ts

@@ -1,6 +1,6 @@
 import {Component, OnDestroy} from '@angular/core';
-import {MatDialog} from '@angular/material/dialog';
-import {MatSnackBar} from '@angular/material/snack-bar';
+import {MatLegacyDialog} from '@angular/material/legacy-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';
 import {DataService} from 'org_xprof/frontend/app/services/data_service/data_service';
@@ -27,8 +27,8 @@ export class CaptureProfile implements OnDestroy {
   capturingProfile: Observable<boolean>;
 
   constructor(
-      private readonly dialog: MatDialog,
-      private readonly snackBar: MatSnackBar,
+      private readonly dialog: MatLegacyDialog,
+      private readonly snackBar: MatLegacySnackBar,
       private readonly dataService: DataService,
       private readonly store: Store<{}>) {
     this.capturingProfile = this.store.select(getCapturingProfileState);

frontend/app/components/capture_profile/capture_profile_dialog/BUILD

@@ -18,14 +18,14 @@ xprof_ng_module(
         "@npm//@angular/core",
         "@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_radio",
-        "@org_xprof//frontend/app/common/angular:angular_material_select",
-        "@org_xprof//frontend/app/common/angular:angular_material_tooltip",
+        "@org_xprof//frontend/app/common/angular:angular_material_legacy_button",
+        "@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_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/interfaces",
     ],
 )

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

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

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

@@ -2,13 +2,13 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatExpansionModule} from '@angular/material/expansion';
-import {MatButtonModule} from '@angular/material/button';
-import {MatDialogModule} from '@angular/material/dialog';
-import {MatFormFieldModule} from '@angular/material/form-field';
-import {MatInputModule} from '@angular/material/input';
-import {MatRadioModule} from '@angular/material/radio';
-import {MatSelectModule} from '@angular/material/select';
-import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatLegacyDialogModule} from '@angular/material/legacy-dialog';
+import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
+import {MatLegacyInputModule} from '@angular/material/legacy-input';
+import {MatLegacyRadioModule} from '@angular/material/legacy-radio';
+import {MatLegacySelectModule} from '@angular/material/legacy-select';
+import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip';
 import {BrowserModule} from '@angular/platform-browser';
 
 import {CaptureProfileDialog} from './capture_profile_dialog';
@@ -20,14 +20,14 @@ import {CaptureProfileDialog} from './capture_profile_dialog';
     BrowserModule,
     CommonModule,
     FormsModule,
-    MatButtonModule,
-    MatDialogModule,
+    MatLegacyButtonModule,
+    MatLegacyDialogModule,
     MatExpansionModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatRadioModule,
-    MatSelectModule,
-    MatTooltipModule,
+    MatLegacyFormFieldModule,
+    MatLegacyInputModule,
+    MatLegacyRadioModule,
+    MatLegacySelectModule,
+    MatLegacyTooltipModule,
   ],
   exports: [CaptureProfileDialog]
 })

frontend/app/components/capture_profile/capture_profile_module.ts

@@ -1,9 +1,9 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatButtonModule} from '@angular/material/button';
-import {MatDialogModule} from '@angular/material/dialog';
-import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
-import {MatSnackBarModule} from '@angular/material/snack-bar';
+import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatLegacyDialogModule} from '@angular/material/legacy-dialog';
+import {MatLegacyProgressSpinnerModule} from '@angular/material/legacy-progress-spinner';
+import {MatLegacySnackBarModule} from '@angular/material/legacy-snack-bar';
 
 import {CaptureProfile} from './capture_profile';
 import {CaptureProfileDialog} from './capture_profile_dialog/capture_profile_dialog';
@@ -14,11 +14,11 @@ import {CaptureProfileDialogModule} from './capture_profile_dialog/capture_profi
   declarations: [CaptureProfile],
   imports: [
     CommonModule,
-    MatButtonModule,
-    MatDialogModule,
-    MatProgressSpinnerModule,
+    MatLegacyButtonModule,
+    MatLegacyDialogModule,
+    MatLegacyProgressSpinnerModule,
     CaptureProfileDialogModule,
-    MatSnackBarModule,
+    MatLegacySnackBarModule,
   ],
   exports: [CaptureProfile],
   entryComponents: [CaptureProfileDialog],

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_core",
-        "@org_xprof//frontend/app/common/angular:angular_material_form_field",
-        "@org_xprof//frontend/app/common/angular:angular_material_select",
+        "@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",
     ],
 )
 

frontend/app/components/chart/table/table_module.ts

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

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_core",
-        "@org_xprof//frontend/app/common/angular:angular_material_form_field",
-        "@org_xprof//frontend/app/common/angular:angular_material_select",
+        "@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",
     ],
 )
 

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 {MatOptionModule} from '@angular/material/core';
-import {MatFormFieldModule} from '@angular/material/form-field';
-import {MatSelectModule} from '@angular/material/select';
+import {MatLegacyOptionModule} from '@angular/material/legacy-core';
+import {MatLegacyFormFieldModule} from '@angular/material/legacy-form-field';
+import {MatLegacySelectModule} from '@angular/material/legacy-select';
 
 import {CategoryFilter} from './category_filter';
 
@@ -11,9 +11,9 @@ import {CategoryFilter} from './category_filter';
   declarations: [CategoryFilter],
   imports: [
     CommonModule,
-    MatOptionModule,
-    MatFormFieldModule,
-    MatSelectModule,
+    MatLegacyOptionModule,
+    MatLegacyFormFieldModule,
+    MatLegacySelectModule,
   ],
   exports: [CategoryFilter],
 })