Angular upgrade v17 to v18 (#7099)

## Motivation for features / changes

This PR is the third step in a planned major Angular upgrade cycle,
where each major version will be delivered in a separate PR,
incrementally progressing until the project reaches Angular 21. This
specific PR upgrades TensorBoard from Angular 17 to Angular 18

## Technical description of changes
- Updated Angular, NgRx, Material, and CDK to ^18.0.0.
- Updated TypeScript from 5.2.2 to 5.4.5.
- Updated @angular/build-tooling to its commit compatible with Angular
18.
- Set selenium-webdriver to 4.27.0 to keep working with Node 18.
- Updated the patch name in WORKSPACE; removed the old entry from
whitespace_hygiene_test.py.
- Added the m2- prefix to all Material M2 SCSS styles. Material 18
renamed these APIs (eg: define-light-theme became
m2-define-light-theme).



## Detailed steps to verify changes work correctly (as executed by you)
 - All 2022 webapp tests pass
  - yarn lint passes with Node 18
- App builds and runs locally and you are able to interact with the page

Author: cdavalos7

WORKSPACE

@@ -237,7 +237,7 @@ yarn_install(
     # this Bazel/CI setup. Apply the generated patch artifacts directly during
     # yarn_install instead.
     post_install_patches = [
-        "//patches:@angular+build-tooling+0.0.0-2113cd7f66a089ac0208ea84eee672b2529f4f6c.patch",
+        "//patches:@angular+build-tooling+0.0.0-db91da4e742cd081bfba01db2edc4e816018419b.patch",
         "//patches:@bazel+concatjs+5.8.1.patch",
     ],
     yarn_lock = "//:yarn.lock",

package.json

@@ -28,11 +28,12 @@
   },
   "homepage": "https://github.com/tensorflow/tensorboard#readme",
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.0.0",
-    "@angular/build-tooling": "https://github.com/angular/dev-infra-private-build-tooling-builds.git#3069be882e3e41cdb3dad58788d878e31d7d82e8",
-    "@angular/cli": "^17.0.0",
-    "@angular/compiler": "17.3.12",
-    "@angular/compiler-cli": "^17.0.0",
+    "@angular-devkit/build-angular": "^18.0.0",
+    "@angular/build": "^18.0.0",
+    "@angular/build-tooling": "https://github.com/angular/dev-infra-private-build-tooling-builds.git#c2de5cda47188d1ed960cd3c6fa9f4b699ba1001",
+    "@angular/cli": "^18.0.0",
+    "@angular/compiler": "18.2.14",
+    "@angular/compiler-cli": "^18.0.0",
     "@babel/core": "^7.16.12",
     "@bazel/concatjs": "5.8.1",
     "@bazel/esbuild": "5.8.1",
@@ -61,22 +62,22 @@
     "prettier-plugin-organize-imports": "2.3.4",
     "requirejs": "^2.3.7",
     "tslib": "^2.3.0",
-    "typescript": "5.2.2",
+    "typescript": "5.4.5",
     "yarn-deduplicate": "^5.0.0"
   },
   "dependencies": {
-    "@angular/animations": "^17.0.0",
-    "@angular/cdk": "^17.0.0",
-    "@angular/common": "17.3.12",
-    "@angular/core": "^17.0.0",
-    "@angular/forms": "^17.0.0",
-    "@angular/localize": "^17.0.0",
-    "@angular/material": "^17.0.0",
-    "@angular/platform-browser": "^17.0.0",
-    "@angular/platform-browser-dynamic": "^17.0.0",
-    "@angular/router": "^17.0.0",
-    "@ngrx/effects": "^17.0.0",
-    "@ngrx/store": "^17.0.0",
+    "@angular/animations": "^18.0.0",
+    "@angular/cdk": "^18.0.0",
+    "@angular/common": "18.2.14",
+    "@angular/core": "^18.0.0",
+    "@angular/forms": "^18.0.0",
+    "@angular/localize": "^18.0.0",
+    "@angular/material": "^18.0.0",
+    "@angular/platform-browser": "^18.0.0",
+    "@angular/platform-browser-dynamic": "^18.0.0",
+    "@angular/router": "^18.0.0",
+    "@ngrx/effects": "^18.0.0",
+    "@ngrx/store": "^18.0.0",
     "@polymer/decorators": "^3.0.0",
     "@polymer/iron-behaviors": "^3.0.1",
     "@polymer/iron-collapse": "^3.0.1",
@@ -139,7 +140,8 @@
     "@types/d3-transition": "1.3.6",
     "@types/d3-zoom": "1.8.7",
     "@types/d3-drag": "1.2.8",
-    "@types/d3-scale-chromatic": "1.5.4"
+    "@types/d3-scale-chromatic": "1.5.4",
+    "selenium-webdriver": "4.27.0"
   },
   "packageManager": "yarn@1.22.22"
 }

…7f66a089ac0208ea84eee672b2529f4f6c.patch …4e742cd081bfba01db2edc4e816018419b.patchpatches/@angular+build-tooling+0.0.0-2113cd7f66a089ac0208ea84eee672b2529f4f6c.patch renamed to patches/@angular+build-tooling+0.0.0-db91da4e742cd081bfba01db2edc4e816018419b.patch patches/@angular+build-tooling+0.0.0-2113cd7f66a089ac0208ea84eee672b2529f4f6c.patch renamed to patches/@angular+build-tooling+0.0.0-db91da4e742cd081bfba01db2edc4e816018419b.patch

@@ -1,33 +1,20 @@
-diff --git a/node_modules/@angular/build-tooling/shared-scripts/angular-optimization/BUILD.bazel b/node_modules/@angular/build-tooling/shared-scripts/angular-optimization/BUILD.bazel
-index 870da1b..3f1e5c5 100755
---- a/node_modules/@angular/build-tooling/shared-scripts/angular-optimization/BUILD.bazel
-+++ b/node_modules/@angular/build-tooling/shared-scripts/angular-optimization/BUILD.bazel
-@@ -23,6 +23,7 @@ js_library(
-     deps = [
-         "@npm//@babel/core",
-         "@npm//@babel/helper-annotate-as-pure",
-+        "@npm//@babel/helper-split-export-declaration",
-     ],
- )
- 
 diff --git a/node_modules/@angular/build-tooling/shared-scripts/angular-optimization/esbuild-plugin.mjs b/node_modules/@angular/build-tooling/shared-scripts/angular-optimization/esbuild-plugin.mjs
-index 6d5ec3f..ad4217f 100755
 --- a/node_modules/@angular/build-tooling/shared-scripts/angular-optimization/esbuild-plugin.mjs
 +++ b/node_modules/@angular/build-tooling/shared-scripts/angular-optimization/esbuild-plugin.mjs
-@@ -86,11 +86,11 @@ export async function createEsbuildAngularOptimizePlugin(opts, additionalBabelPl
-             devkitOptimizePlugins.adjustTypeScriptEnumsPlugin,
-           );
- 
+@@ -55,11 +55,11 @@
+         if (opts.optimize) {
+           plugins.push(adjustStaticMembers, adjustTypeScriptEnums, elideAngularMetadata);
+
 -          // If the current file is denoted as explicit side effect free, add the pure
 -          // top-level functions optimization plugin for this file.
 -          if (opts.optimize.isSideEffectFree && opts.optimize.isSideEffectFree(args.path)) {
--            plugins.push(devkitOptimizePlugins.pureToplevelFunctionsPlugin);
+-            plugins.push(markTopLevelPure);
 -          }
 +          // For TensorBoard: This plugin aggressively culls symbols in a way that
 +          // is incompatible with TensorBoard source. Disable it. As result the binary is bigger.
 +          //if (opts.optimize.isSideEffectFree && opts.optimize.isSideEffectFree(args.path)) {
-+          //  plugins.push(devkitOptimizePlugins.pureToplevelFunctionsPlugin);
++          //  plugins.push(markTopLevelPure);
 +          //}
          }
- 
+
          const shouldRunLinker =

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/common/_lib.scss

@@ -12,13 +12,12 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@use '@angular/material' as mat;
 @use '@angular/material' as matm2;
 @use '@angular/material' as matm2var;
 
 @mixin debugger-op-type {
-  background-color: matm2.get-color-from-palette(
-    matm2var.$blue-grey-palette,
+  background-color: matm2.m2-get-color-from-palette(
+    matm2var.$m2-blue-grey-palette,
     50
   );
   @include tb-theme-foreground-prop(border, border, 1px solid);
@@ -31,8 +30,8 @@ limitations under the License.
   width: max-content;
 
   @include tb-dark-theme {
-    background-color: matm2.get-color-from-palette(
-      matm2var.$blue-grey-palette,
+    background-color: matm2.m2-get-color-from-palette(
+      matm2var.$m2-blue-grey-palette,
       700
     );
   }
@@ -42,8 +41,8 @@ limitations under the License.
   background-color: #fff099;
 
   @include tb-dark-theme {
-    background-color: matm2.get-color-from-palette(
-      matm2var.$orange-palette,
+    background-color: matm2.m2-get-color-from-palette(
+      matm2var.$m2-orange-palette,
       900
     );
   }

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/execution_data/execution_data_component.scss

@@ -12,7 +12,6 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@use '@angular/material' as mat;
 @use '@angular/material' as matm2;
 @use '@angular/material' as matm2var;
 @import 'tensorboard/webapp/theme/tb_theme';
@@ -47,16 +46,19 @@ limitations under the License.
 }
 
 .focus-execution-container {
-  background-color: matm2.get-color-from-palette(matm2var.$orange-palette, 200);
+  background-color: matm2.m2-get-color-from-palette(
+    matm2var.$m2-orange-palette,
+    200
+  );
   border-radius: 4px;
   font-size: 12px;
   height: 120px;
   padding: 5px;
   width: 360px;
 
   @include tb-dark-theme {
-    background-color: matm2.get-color-from-palette(
-      matm2var.$orange-palette,
+    background-color: matm2.m2-get-color-from-palette(
+      matm2var.$m2-orange-palette,
       900
     );
   }

tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph/graph_op_component.scss

@@ -12,7 +12,6 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@use '@angular/material' as mat;
 @use '@angular/material' as matm2;
 @use '@angular/material' as matm2var;
 @import 'tensorboard/webapp/theme/tb_theme';
@@ -33,7 +32,7 @@ limitations under the License.
   padding: 2px 6px;
   text-align: right;
   width: 200px;
-  $grey-600: matm2.get-color-from-palette(matm2var.$grey-palette, 600);
+  $grey-600: matm2.m2-get-color-from-palette(matm2var.$m2-grey-palette, 600);
 
   @include tb-dark-theme {
     box-shadow: 1px 3px $grey-600;

tensorboard/tools/whitespace_hygiene_test.py

@@ -25,12 +25,10 @@
 import sys
 
 
-# @TODO(@cdavalos7): Remove this exception when the patch file is no longer needed.
 # Patch files use a trailing space on blank lines to mark them as context.
-# This is required by patch-package and cannot be removed.
+# This is required by patch format and cannot be removed.
 exceptions = frozenset(
     [
-        "patches/@angular+build-tooling+0.0.0-2113cd7f66a089ac0208ea84eee672b2529f4f6c.patch",
         "patches/protobuf_6_31_1_java_export.patch",
     ]
 )

tensorboard/webapp/feature_flag/views/feature_flag_dialog_component.scss

@@ -12,21 +12,19 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@use '@angular/material' as mat;
 @use '@angular/material' as matm2;
-@use '@angular/material' as matm2var;
 @import 'tensorboard/webapp/theme/tb_theme';
 
 .message {
   .warning {
-    color: matm2.get-color-from-palette($tb-warn);
+    color: matm2.m2-get-color-from-palette($tb-warn);
   }
 
   margin-bottom: 16px;
 }
 
 .note-1 {
-  color: matm2.get-color-from-palette($tb-accent);
+  color: matm2.m2-get-color-from-palette($tb-accent);
 }
 
 .scrolling-page {

tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss

@@ -12,9 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@use '@angular/material' as mat;
 @use '@angular/material' as matm2;
-@use '@angular/material' as matm2var;
 @import 'tensorboard/webapp/theme/tb_theme';
 @import '../common';
 
@@ -155,7 +153,7 @@ $_title-to-heading-gap: 12px;
 }
 
 :host ::ng-deep .mat-slider-min-value .mat-slider-thumb {
-  background-color: matm2.get-color-from-palette($tb-primary);
+  background-color: matm2.m2-get-color-from-palette($tb-primary);
 }
 
 :host ::ng-deep .hide-slider.mat-slider-horizontal .mat-slider-track-wrapper {

tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss

@@ -12,9 +12,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 ==============================================================================*/
-@use '@angular/material' as mat;
 @use '@angular/material' as matm2;
-@use '@angular/material' as matm2var;
 @import 'tensorboard/webapp/theme/tb_theme';
 @import '../common';
 
@@ -207,10 +205,13 @@ $_data_table_initial_height: 100px;
   align-items: center;
 
   .expand-button {
-    color: matm2.get-color-from-palette($tb-foreground, secondary-text);
+    color: matm2.m2-get-color-from-palette($tb-foreground, secondary-text);
 
     @include tb-dark-theme {
-      color: matm2.get-color-from-palette($tb-dark-foreground, secondary-text);
+      color: matm2.m2-get-color-from-palette(
+        $tb-dark-foreground,
+        secondary-text
+      );
       background-color: map-get($tb-dark-background, background);
     }
   }