Skip to content

1st draf of angular upgrade v17 to v18 to verify CI #7099

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
cdavalos7 wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

1st draf of angular upgrade v17 to v18 to verify CI #7099

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion WORKSPACE
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ node_repositories(
yarn_install(
name = "npm",
data = [
"//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",
],
# "Some rules only work by referencing labels nested inside npm packages
Expand Down
40 changes: 21 additions & 19 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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"
}
27 changes: 7 additions & 20 deletions ...d7f66a089ac0208ea84eee672b2529f4f6c.patch → ...a4e742cd081bfba01db2edc4e816018419b.patch
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 =
12 changes: 6 additions & 6 deletions tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/common/_lib.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ limitations under the License.
@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);
Expand All @@ -31,8 +31,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
);
}
Expand All @@ -42,8 +42,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
);
}
Expand Down
6 changes: 3 additions & 3 deletions ...gins/debugger_v2/tf_debugger_v2_plugin/views/execution_data/execution_data_component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,16 +47,16 @@ 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
);
}
Expand Down
2 changes: 1 addition & 1 deletion tensorboard/plugins/debugger_v2/tf_debugger_v2_plugin/views/graph/graph_op_component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,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;
Expand Down
4 changes: 2 additions & 2 deletions tensorboard/webapp/feature_flag/views/feature_flag_dialog_component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,14 @@ limitations under the License.

.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 {
Expand Down
2 changes: 1 addition & 1 deletion tensorboard/webapp/metrics/views/card_renderer/image_card_component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,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 {
Expand Down
4 changes: 2 additions & 2 deletions tensorboard/webapp/metrics/views/card_renderer/scalar_card_component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,10 +207,10 @@ $_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);
}
}
Expand Down
8 changes: 4 additions & 4 deletions ...board/webapp/metrics/views/card_renderer/vis_linked_time_selection_warning_component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,17 @@ limitations under the License.
@import 'tensorboard/webapp/theme/tb_theme';

:host {
color: matm2.get-color-from-palette(
map-get(matm2.get-color-config($tb-theme), warn),
color: matm2.m2-get-color-from-palette(
map-get(matm2.m2-get-color-config($tb-theme), warn),
700
);
height: 1em;
line-height: 0;
display: inline-flex;

@include tb-dark-theme {
color: matm2.get-color-from-palette(
map-get(matm2.get-color-config($tb-dark-theme), warn),
color: matm2.m2-get-color-from-palette(
map-get(matm2.m2-get-color-config($tb-dark-theme), warn),
700
);
}
Expand Down
2 changes: 1 addition & 1 deletion tensorboard/webapp/metrics/views/main_view/filter_input_component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ tb-filter-input {
@include tb-theme-foreground-prop(color, text);

&:not(.valid) {
$_error-color: matm2.get-color-from-palette($tb-warn, 800);
$_error-color: matm2.m2-get-color-from-palette($tb-warn, 800);

color: $_error-color;

Expand Down
12 changes: 6 additions & 6 deletions tensorboard/webapp/metrics/views/main_view/main_view_component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ mat-button-toggle-group.filter-view {
.main,
.sidebar {
contain: strict;
background-color: matm2.get-color-from-palette($tb-background, background);
background-color: matm2.m2-get-color-from-palette($tb-background, background);
overflow-x: hidden;
overflow-y: auto;
will-change: transform, scroll-position;
Expand All @@ -99,7 +99,7 @@ mat-button-toggle-group.filter-view {
}

.main {
background-color: matm2.get-color-from-palette($tf-slate, 200);
background-color: matm2.m2-get-color-from-palette($tf-slate, 200);
flex: 1 1;
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -155,16 +155,16 @@ mat-button-toggle-group.filter-view {

/** TODO(psybuzz): consider making a tb-button instead. */
:host .settings-button {
color: matm2.get-color-from-palette($tb-foreground, secondary-text);
color: matm2.m2-get-color-from-palette($tb-foreground, secondary-text);
display: inline-flex;

@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);
}

&.checked {
@include tb-theme-background-prop(background-color, selected-button);
border-color: matm2.get-color-from-palette(matm2var.$grey-palette, 300);
border-color: matm2.m2-get-color-from-palette(matm2var.$m2-grey-palette, 300);
}

::ng-deep .mat-button-wrapper {
Expand All @@ -178,7 +178,7 @@ mat-button-toggle-group.filter-view {
}

.slide-out-menu {
background-color: matm2.get-color-from-palette($tb-background, background);
background-color: matm2.m2-get-color-from-palette($tb-background, background);
// Make the menu the full height minus the size of the toolbar.
height: calc(100% - 49px);
position: absolute;
Expand Down
2 changes: 1 addition & 1 deletion tensorboard/webapp/metrics/views/main_view/pinned_view_component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ mat-icon {

.new-card-pinned {
animation: pinned-view-fade-out 3s linear;
background: matm2.get-color-from-palette(matm2var.$red-palette, 500);
background: matm2.m2-get-color-from-palette(matm2var.$m2-red-palette, 500);
border-radius: 5px;
color: #fff;
display: inline-block;
Expand Down
10 changes: 5 additions & 5 deletions tensorboard/webapp/metrics/views/metrics_container.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,10 @@ limitations under the License.

.notice {
background-color: rgba(
matm2.get-color-from-palette(matm2var.$yellow-palette, 200),
matm2.m2-get-color-from-palette(matm2var.$m2-yellow-palette, 200),
0.85
);
$yellow-500: matm2.get-color-from-palette(matm2var.$yellow-palette, 500);
$yellow-500: matm2.m2-get-color-from-palette(matm2var.$m2-yellow-palette, 500);
border-bottom: 1px solid $yellow-500;
color: map-get($tb-foreground, text);
display: block;
Expand All @@ -44,15 +44,15 @@ tb-dashboard-layout {
}

nav {
background-color: matm2.get-color-from-palette($tb-background, background);
$border: matm2.get-color-from-palette($tb-foreground, border);
background-color: matm2.m2-get-color-from-palette($tb-background, background);
$border: matm2.m2-get-color-from-palette($tb-foreground, border);
border-right: 1px solid $border;
flex: none;
width: 340px;

@include tb-dark-theme {
background-color: map-get($tb-dark-background, background);
border-right-color: matm2.get-color-from-palette(
border-right-color: matm2.m2-get-color-from-palette(
$tb-dark-foreground,
border
);
Expand Down
16 changes: 8 additions & 8 deletions .../webapp/metrics/views/right_pane/scalar_column_editor/scalar_column_editor_component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ limitations under the License.
@use '@angular/material' as matm2var;
@import 'tensorboard/webapp/theme/tb_theme';

$_accent: map-get(matm2.get-color-config($tb-theme), accent);
$_accent: map-get(matm2.m2-get-color-config($tb-theme), accent);

:host ::ng-deep .mat-tab-label {
min-width: 0;
Expand All @@ -43,15 +43,15 @@ $_accent: map-get(matm2.get-color-config($tb-theme), accent);
}

.highlighted {
background-color: matm2.get-color-from-palette(matm2var.$grey-palette, 200);
background-color: matm2.m2-get-color-from-palette(matm2var.$m2-grey-palette, 200);
}

.highlight-bottom {
border-bottom: 2px solid matm2.get-color-from-palette($_accent);
border-bottom: 2px solid matm2.m2-get-color-from-palette($_accent);
}

.highlight-top {
border-top: 2px solid matm2.get-color-from-palette($_accent);
border-top: 2px solid matm2.m2-get-color-from-palette($_accent);
}

.footer {
Expand All @@ -64,20 +64,20 @@ $_accent: map-get(matm2.get-color-config($tb-theme), accent);
align-items: center;
justify-content: flex-end;
padding: 4px;
$border: matm2.get-color-from-palette($tb-foreground, border);
$border: matm2.m2-get-color-from-palette($tb-foreground, border);
border-top: 1px solid $border;

@include tb-dark-theme {
border-color: matm2.get-color-from-palette($tb-dark-foreground, border);
border-color: matm2.m2-get-color-from-palette($tb-dark-foreground, border);
}
}

.close-button {
color: matm2.get-color-from-palette($tb-foreground, secondary-text);
color: matm2.m2-get-color-from-palette($tb-foreground, secondary-text);
width: 84px;

@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);
}
}

Expand Down
Loading
Loading