chore: Upgrade Angular (to 15) and related dependencies (#6483)

Upgrade Angular to version 15. Upgrade related dependencies as needed.

See:
https://github.com/tensorflow/tensorboard/blob/master/DEVELOPMENT.md#updating-angular
See: https://update.angular.io/?l=3&v=14.0-15.0 
See:
https://dev.to/ngrx/announcing-ngrx-v15-standalone-apis-type-safe-projectors-component-and-componentstore-updates-and-more-l7

Highlights:
* Upgrade the following set of dependencies:
  * `@angular/*` and `@angular-devkit`: ^15.2.9
  * `@ngrx/*`: ^15.4.0
* Note that the following dependencies did not require upgrade:
  * `typescript`
  * `rxjs`
  * `zone.js`
  * `ngx-color-picker`
* Had to migrate much of the Angular material component usage to use the
"Legacy" versions of the components.
  * https://rc.material.angular.io/guide/mdc-migration
  * Note: Migration to the current MDC-based material components will
happen later.
* Checkboxes no longer have the aria-checked property so some tests had
to be updated.

Most of the changes to use Legacy components are done with the following
`sed` commands with some manual adjustments to manually revert changes
to `MatButtonToggle` (which does not have a Legacy equivalent):

```
find . -type f -name '*.ts' -exec sed -i 's#MatAutocomplete#MatLegacyAutocomplete#g' {} \;
find . -type f -name '*.ts' -exec sed -i 's#MatButton#MatLegacyButton#g' {} \;
find . -type f -name '*.ts' -exec sed -i 's#MatCheckbox#MatLegacyCheckbox#g' {} \;
find . -type f -name '*.ts' -exec sed -i 's#MatDialog#MatLegacyDialog#g' {} \;
find . -type f -name '*.ts' -exec sed -i 's#MAT_DIALOG#MAT_LEGACY_DIALOG#g' {} \;
find . -type f -name '*.ts' -exec sed -i 's#MatFormField#MatLegacyFormField#g' {} \;
find . -type f -name '*.ts' -exec sed -i 's#MatInput#MatLegacyInput#g' {} \;
find . -type f -name '*.ts' -exec sed -i 's#MatMenu#MatLegacyMenu#g' {} \;
find . -type f -name '*.ts' -exec sed -i 's#MatPaginator#MatLegacyPaginator#g' {} \;
find . -type f -name '*.ts' -exec sed -i 's#MatProgressSpinner#MatLegacyProgressSpinner#g' {} \;
find . -type f -name '*.ts' -exec sed -i 's#MatSelect#MatLegacySelect#g' {} \;
find . -type f -name '*.ts' -exec sed -i 's#MatSlider#MatLegacySlider#g' {} \;
find . -type f -name '*.ts' -exec sed -i 's#MatSnackBar#MatLegacySnackBar#g' {} \;
find . -type f -name '*.ts' -exec sed -i 's#MAT_SNACK_BAR#MAT_LEGACY_SNACK_BAR#g' {} \;
find . -type f -name '*.ts' -exec sed -i 's#MatTable#MatLegacyTable#g' {} \;
find . -type f -name '*.ts' -exec sed -i 's#MatTabs#MatLegacyTabs#g' {} \;
find . -type f -name '*.ts' -exec sed -i 's#MatTabChangeEvent#MatLegacyTabChangeEvent#g' {} \;
find . -type f -name '*.ts' -exec sed -i 's#@angular/material/autocomplete#@angular/material/legacy-autocomplete#g' {} \;
find . -type f -name '*.ts' -exec sed -i 's#@angular/material/button#@angular/material/legacy-button#g' {} \;
find . -type f -name '*.ts' -exec sed -i 's#@angular/material/checkbox#@angular/material/legacy-checkbox#g' {} \;
find . -type f -name '*.ts' -exec sed -i 's#@angular/material/dialog#@angular/material/legacy-dialog#g' {} \;
find . -type f -name '*.ts' -exec sed -i 's#@angular/material/form-field#@angular/material/legacy-form-field#g' {} \;
find . -type f -name '*.ts' -exec sed -i 's#@angular/material/input#@angular/material/legacy-input#g' {} \;
find . -type f -name '*.ts' -exec sed -i 's#@angular/material/menu#@angular/material/legacy-menu#g' {} \;
find . -type f -name '*.ts' -exec sed -i 's#@angular/material/paginator#@angular/material/legacy-paginator#g' {} \;
find . -type f -name '*.ts' -exec sed -i 's#@angular/material/progress-spinner#@angular/material/legacy-progress-spinner#g' {} \;
find . -type f -name '*.ts' -exec sed -i 's#@angular/material/select#@angular/material/legacy-select#g' {} \;
find . -type f -name '*.ts' -exec sed -i 's#@angular/material/slider#@angular/material/legacy-slider#g' {} \;
find . -type f -name '*.ts' -exec sed -i 's#@angular/material/snack-bar#@angular/material/legacy-snack-bar#g' {} \;
find . -type f -name '*.ts' -exec sed -i 's#@angular/material/table#@angular/material/legacy-table#g' {} \;
find . -type f -name '*.ts' -exec sed -i 's#@angular/material/tabs#@angular/material/legacy-tabs#g' {} \;
```

Author: bmd3k

package.json

@@ -28,11 +28,11 @@
   },
   "homepage": "https://github.com/tensorflow/tensorboard#readme",
   "devDependencies": {
-    "@angular-devkit/build-angular": "^14.2.9",
+    "@angular-devkit/build-angular": "^15.2.9",
     "@angular/build-tooling": "https://github.com/angular/dev-infra-private-build-tooling-builds.git#fb42478534df7d48ec23a6834fea94a776cb89a0",
-    "@angular/cli": "^14.2.9",
-    "@angular/compiler": "14.2.11",
-    "@angular/compiler-cli": "^14.2.11",
+    "@angular/cli": "^15.2.9",
+    "@angular/compiler": "15.2.9",
+    "@angular/compiler-cli": "^15.2.9",
     "@babel/core": "^7.16.12",
     "@bazel/concatjs": "5.7.0",
     "@bazel/esbuild": "5.7.0",
@@ -65,18 +65,18 @@
     "yarn-deduplicate": "^5.0.0"
   },
   "dependencies": {
-    "@angular/animations": "^14.2.11",
-    "@angular/cdk": "^14.2.7",
-    "@angular/common": "14.2.11",
-    "@angular/core": "^14.2.11",
-    "@angular/forms": "^14.2.11",
-    "@angular/localize": "^14.2.11",
-    "@angular/material": "^14.2.7",
-    "@angular/platform-browser": "^14.2.11",
-    "@angular/platform-browser-dynamic": "^14.2.11",
-    "@angular/router": "^14.2.11",
-    "@ngrx/effects": "^14.3.2",
-    "@ngrx/store": "^14.3.2",
+    "@angular/animations": "^15.2.9",
+    "@angular/cdk": "^15.2.9",
+    "@angular/common": "15.2.9",
+    "@angular/core": "^15.2.9",
+    "@angular/forms": "^15.2.9",
+    "@angular/localize": "^15.2.9",
+    "@angular/material": "^15.2.9",
+    "@angular/platform-browser": "^15.2.9",
+    "@angular/platform-browser-dynamic": "^15.2.9",
+    "@angular/router": "^15.2.9",
+    "@ngrx/effects": "^15.4.0",
+    "@ngrx/store": "^15.4.0",
     "@polymer/decorators": "^3.0.0",
     "@polymer/iron-behaviors": "^3.0.1",
     "@polymer/iron-collapse": "^3.0.1",

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/timeline/timeline_module.ts

@@ -15,8 +15,8 @@ limitations under the License.
 
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatButtonModule} from '@angular/material/button';
-import {MatSliderModule} from '@angular/material/slider';
+import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatLegacySliderModule} from '@angular/material/legacy-slider';
 import {ExecutionDataModule} from '../execution_data/execution_data_module';
 import {TimelineComponent} from './timeline_component';
 import {TimelineContainer} from './timeline_container';
@@ -26,8 +26,8 @@ import {TimelineContainer} from './timeline_container';
   imports: [
     CommonModule,
     ExecutionDataModule,
-    MatButtonModule,
-    MatSliderModule,
+    MatLegacyButtonModule,
+    MatLegacySliderModule,
   ],
   // TODO(cais): The following two providers are meant to make the mat-slider
   // dragging to work. But the dragging is still not working, needs more

tensorboard/webapp/alert/views/alert_display_snackbar_container.ts

@@ -13,7 +13,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
 import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';
-import {MatSnackBarRef, MAT_SNACK_BAR_DATA} from '@angular/material/snack-bar';
+import {
+  MatLegacySnackBarRef,
+  MAT_LEGACY_SNACK_BAR_DATA,
+} from '@angular/material/legacy-snack-bar';
 import {Store} from '@ngrx/store';
 import {State} from '../../app_state';
 import {splitByURL} from '../../util/string';
@@ -30,8 +33,8 @@ export class AlertDisplaySnackbarContainer {
   readonly splitByURL = splitByURL;
 
   constructor(
-    private readonly snackBarRef: MatSnackBarRef<AlertDisplaySnackbarContainer>,
-    @Inject(MAT_SNACK_BAR_DATA) readonly unknownData: unknown,
+    private readonly snackBarRef: MatLegacySnackBarRef<AlertDisplaySnackbarContainer>,
+    @Inject(MAT_LEGACY_SNACK_BAR_DATA) readonly unknownData: unknown,
     private readonly store: Store<State>
   ) {
     this.alert = unknownData as AlertInfo;

tensorboard/webapp/alert/views/alert_snackbar_container.ts

@@ -18,7 +18,7 @@ import {
   OnDestroy,
   OnInit,
 } from '@angular/core';
-import {MatSnackBar} from '@angular/material/snack-bar';
+import {MatLegacySnackBar} from '@angular/material/legacy-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: MatSnackBar
+    private readonly snackBar: MatLegacySnackBar
   ) {}
 
   ngOnInit() {

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 {MatButtonModule} from '@angular/material/button';
-import {MatSnackBarModule} from '@angular/material/snack-bar';
+import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatLegacySnackBarModule} from '@angular/material/legacy-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, MatButtonModule, MatSnackBarModule],
+  imports: [CommonModule, MatLegacyButtonModule, MatLegacySnackBarModule],
   entryComponents: [
     // Required for non-Ivy Angular apps.
     AlertDisplaySnackbarContainer,

tensorboard/webapp/alert/views/alert_snackbar_test.ts

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

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 {MatButtonModule} from '@angular/material/button';
+import {MatLegacyButtonModule} from '@angular/material/legacy-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, MatButtonModule],
+  imports: [CommonModule, MatIconModule, MatLegacyButtonModule],
 })
 export class LayoutModule {}

tensorboard/webapp/feature_flag/views/feature_flag_dialog_module.ts

@@ -14,8 +14,8 @@ limitations under the License.
 ==============================================================================*/
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatButtonModule} from '@angular/material/button';
-import {MatSelectModule} from '@angular/material/select';
+import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatLegacySelectModule} from '@angular/material/legacy-select';
 import {FeatureFlagDialogComponent} from './feature_flag_dialog_component';
 import {FeatureFlagDialogContainer} from './feature_flag_dialog_container';
 
@@ -24,7 +24,7 @@ import {FeatureFlagDialogContainer} from './feature_flag_dialog_container';
  */
 @NgModule({
   declarations: [FeatureFlagDialogComponent, FeatureFlagDialogContainer],
-  imports: [CommonModule, MatButtonModule, MatSelectModule],
+  imports: [CommonModule, MatLegacyButtonModule, MatLegacySelectModule],
   exports: [FeatureFlagDialogContainer],
   entryComponents: [FeatureFlagDialogContainer],
 })

tensorboard/webapp/feature_flag/views/feature_flag_modal_trigger_container.ts

@@ -14,7 +14,10 @@ limitations under the License.
 ==============================================================================*/
 import {ComponentType} from '@angular/cdk/overlay';
 import {Component, OnDestroy, OnInit} from '@angular/core';
-import {MatDialog, MatDialogRef} from '@angular/material/dialog';
+import {
+  MatLegacyDialog,
+  MatLegacyDialogRef,
+} from '@angular/material/legacy-dialog';
 import {Store} from '@ngrx/store';
 import {Subject} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
@@ -39,12 +42,12 @@ export class FeatureFlagModalTriggerContainer implements OnInit, OnDestroy {
   featureFlagDialogType: ComponentType<any> = FeatureFlagDialogContainer;
 
   readonly showFeatureFlags$ = this.store.select(getShowFlagsEnabled);
-  private featureFlagsDialog?: MatDialogRef<FeatureFlagDialogContainer>;
+  private featureFlagsDialog?: MatLegacyDialogRef<FeatureFlagDialogContainer>;
   private ngUnsubscribe = new Subject<void>();
 
   constructor(
     private readonly store: Store<State>,
-    private dialog: MatDialog
+    private dialog: MatLegacyDialog
   ) {}
 
   ngOnInit() {

tensorboard/webapp/feature_flag/views/feature_flag_modal_trigger_container_test.ts

@@ -16,8 +16,8 @@ import {HarnessLoader} from '@angular/cdk/testing';
 import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
 import {Component} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
-import {MatDialogModule} from '@angular/material/dialog';
-import {MatDialogHarness} from '@angular/material/dialog/testing';
+import {MatLegacyDialogModule} from '@angular/material/legacy-dialog';
+import {MatLegacyDialogHarness} from '@angular/material/legacy-dialog/testing';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {Store} from '@ngrx/store';
 import {MockStore} from '@ngrx/store/testing';
@@ -47,7 +47,7 @@ describe('feature_flag_modal_trigger_container', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatDialogModule, NoopAnimationsModule],
+      imports: [MatLegacyDialogModule, NoopAnimationsModule],
       providers: [provideMockTbStore()],
     }).compileComponents();
 
@@ -78,7 +78,7 @@ describe('feature_flag_modal_trigger_container', () => {
     store.overrideSelector(getOverriddenFeatureFlags, {});
     store.overrideSelector(getShowFlagsEnabled, true);
     createComponent();
-    const dialog = await rootLoader.getHarness(MatDialogHarness);
+    const dialog = await rootLoader.getHarness(MatLegacyDialogHarness);
     expect(
       (fixture.componentInstance as any).featureFlagsDialog
     ).not.toBeUndefined();