Upgrade helix-front to Angular 12.2 (#2131)

Fix security vulnerabilities in helix-front dependencies. Upgrade helix-front dependencies to improve contributor productivity.
apache · Jun 3, 2022 · 4faa5f6 · 4faa5f6
1 parent e84a4a7
commit 4faa5f6
Show file tree

Hide file tree

Showing 18 changed files with 86 additions and 75 deletions.
diff --git a/helix-front/angular.json b/helix-front/angular.json
@@ -25,21 +25,26 @@
               "client/styles.scss",
               "client/theme.scss"
             ],
-            "scripts": []
+            "scripts": [],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "3503kb"
+                  "maximumWarning": "3523kb"
                 }
               ],
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
               "namedChunks": false,
-              "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true,
@@ -49,20 +54,25 @@
                   "with": "client/environments/environment.prod.ts"
                 }
               ]
-            }
-          }
+            },
+            "development": {}
+          },
+          "defaultConfiguration": "production"
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "helix-front:build",
             "proxyConfig": "./proxy.conf.json"
           },
           "configurations": {
             "production": {
               "browserTarget": "helix-front:build:production"
+            },
+            "development": {
+              "browserTarget": "helix-front:build:development"
             }
-          }
+          },
+          "defaultConfiguration": "development"
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
@@ -110,7 +120,8 @@
           "options": {
             "protractorConfig": "./protractor.conf.js",
             "devServerTarget": "helix-front:serve"
-          }
+          },
+          "configurations": {}
         },
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",

diff --git a/helix-front/client/app/cluster/cluster-list/cluster-list.component.scss b/helix-front/client/app/cluster/cluster-list/cluster-list.component.scss
@@ -1,3 +1,4 @@
+@use '~@angular/material' as mat;
 @import 'client/theme.scss';
 
 .mat-spinner {
@@ -6,7 +7,7 @@
 
 .cluster-list-item-selected h4 {
   font-weight: 500;
-  color: mat-color($hi-primary);
+  color: mat.get-color-from-palette($hi-primary);
 }
 
 .error-message {

diff --git a/helix-front/client/app/cluster/cluster.component.scss b/helix-front/client/app/cluster/cluster.component.scss
@@ -1,5 +1,3 @@
-@import '~@angular/material/theming';
-
 .mat-sidenav {
   width: 25vw;
   min-width: 200px;
@@ -9,7 +7,7 @@
   position: fixed;
   top: 50%;
   z-index: 3;
-  transition: $swift-ease-out;
+  transition: all 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
   cursor: pointer;
 
   &.open {

diff --git a/helix-front/client/app/history/history-list/history-list.component.scss b/helix-front/client/app/history/history-list/history-list.component.scss
@@ -1,11 +1,11 @@
 // Import theming functions
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 // Import custom theme
 @import 'client/theme.scss';
 
 hi-history-list {
   .current {
-    color: mat-color($hi-primary);
+    color: mat.get-color-from-palette($hi-primary);
   }
 
   .mat-icon {

diff --git a/helix-front/client/app/instance/instance-list/instance-list.component.scss b/helix-front/client/app/instance/instance-list/instance-list.component.scss
@@ -1,13 +1,13 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 .info {
   padding: 24px;
 }
 
 .status-healthy {
-  color: mat-color(mat-palette($mat-blue));
+  color: mat.get-color-from-palette(mat.define-palette(mat.$blue-palette));
 }
 
 .status-not-healthy {
-  color: mat-color(mat-palette($mat-grey, 900, 900, 900));
+  color: mat.get-color-from-palette(mat.define-palette(mat.$grey-palette, 900, 900, 900));
 }
diff --git a/helix-front/client/app/resource/partition-list/partition-list.component.scss b/helix-front/client/app/resource/partition-list/partition-list.component.scss
@@ -1,15 +1,15 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 div.message {
   padding: 20px;
 }
 
 .status-ready {
-  color: mat-color(mat-palette($mat-blue));
+  color: mat.get-color-from-palette(mat.define-palette(mat.$blue-palette));
 }
 
 .status-not-ready {
-  color: mat-color(mat-palette($mat-grey, 900, 900, 900), darker);
+  color: mat.get-color-from-palette(mat.define-palette(mat.$grey-palette, 900, 900, 900), darker);
 }
 
 .footer {

diff --git a/helix-front/client/app/resource/resource-detail/resource-detail.component.scss b/helix-front/client/app/resource/resource-detail/resource-detail.component.scss
@@ -1,9 +1,10 @@
+@use '~@angular/material' as mat;
 @import 'client/theme.scss';
 
 .offline {
   font-size: 14px;
   padding-left: 24px;
-  color: mat-color($hi-warn);
+  color: mat.get-color-from-palette($hi-warn);
 }
 
 .information {

diff --git a/helix-front/client/app/shared/data-table/data-table.component.scss b/helix-front/client/app/shared/data-table/data-table.component.scss
@@ -1,10 +1,11 @@
+@use '~@angular/material' as mat;
 @import 'client/theme.scss';
 
 .mat-icon {
   @include md-icon-size(20px);
 
   &:hover {
-    color: mat-color($hi-warn);
+    color: mat.get-color-from-palette($hi-warn);
   }
 }
 

diff --git a/helix-front/client/app/shared/detail-header/detail-header.component.scss b/helix-front/client/app/shared/detail-header/detail-header.component.scss
@@ -1,4 +1,4 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 .secondary {
   color: rgba(0, 0, 0, 0.54);
@@ -18,22 +18,22 @@
   }
 
   .cluster {
-    background-color: mat-color(mat-palette($mat-indigo));
+    background-color: mat.get-color-from-palette(mat.define-palette(mat.$indigo-palette));
   }
 
   .controller {
-    background-color: mat-color(mat-palette($mat-purple));
+    background-color: mat.get-color-from-palette(mat.define-palette(mat.$purple-palette));
   }
 
   .resource {
-    background-color: mat-color(mat-palette($mat-teal));
+    background-color: mat.get-color-from-palette(mat.define-palette(mat.$teal-palette));
   }
 
   .instance {
-    background-color: mat-color(mat-palette($mat-blue));
+    background-color: mat.get-color-from-palette(mat.define-palette(mat.$blue-palette));
   }
 
   .workflow {
-    background-color: mat-color(mat-palette($mat-deep-orange));
+    background-color: mat.get-color-from-palette(mat.define-palette(mat.$deep-orange-palette));
   }
 }
diff --git a/helix-front/client/app/shared/disabled-label/disabled-label.component.scss b/helix-front/client/app/shared/disabled-label/disabled-label.component.scss
@@ -1,12 +1,12 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 .status-disabled {
   margin-left: 10px;
   padding: 4px 8px;
   font-size: 12px;
   line-height: 40px;
   border-radius: 4px;
-  border: 1px solid mat-color(mat-palette($mat-red), 900);
-  background-color: mat-color(mat-palette($mat-red), darker);
+  border: 1px solid mat.get-color-from-palette(mat.define-palette(mat.$red-palette), 900);
+  background-color: mat.get-color-from-palette(mat.define-palette(mat.$red-palette), darker);
   color: rgb(255, 255, 255);
 }
diff --git a/helix-front/client/app/shared/node-viewer/node-viewer.component.scss b/helix-front/client/app/shared/node-viewer/node-viewer.component.scss
@@ -1,12 +1,12 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 @import 'client/theme.scss';
 
 .node-viewer {
   padding: 10px;
 }
 
 .primary {
-  color: mat-color($hi-primary);
+  color: mat.get-color-from-palette($hi-primary);
 }
 
 .search-form-field {
@@ -36,7 +36,7 @@ ngx-datatable {
     @include md-icon-size(20px);
 
     &:hover {
-      color: mat-color($hi-warn);
+      color: mat.get-color-from-palette($hi-warn);
     }
   }
 }
diff --git a/helix-front/client/app/shared/state-label/state-label.component.scss b/helix-front/client/app/shared/state-label/state-label.component.scss
@@ -1,4 +1,4 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 .state-label {
   font-size: 12px;
@@ -9,9 +9,9 @@
 }
 
 .state-label-ready {
-  border-color: mat-color(mat-palette($mat-blue), darker);
+  border-color: mat.get-color-from-palette(mat.define-palette(mat.$blue-palette), darker);
 }
 
 .state-label-not-ready {
-  border-color: mat-color(mat-palette($mat-grey, 900, 900, 900), darker);
+  border-color: mat.get-color-from-palette(mat.define-palette(mat.$grey-palette, 900, 900, 900), darker);
 }
diff --git a/helix-front/client/app/workflow/workflow-dag/workflow-dag.component.scss b/helix-front/client/app/workflow/workflow-dag/workflow-dag.component.scss
@@ -1,13 +1,13 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 .state-default {
-  fill: mat-color(mat-palette($mat-deep-orange));
+  fill: mat.get-color-from-palette(mat.define-palette(mat.$deep-orange-palette));
 }
 
 .state-COMPLETED {
-  fill: mat-color(mat-palette($mat-green));
+  fill: mat.get-color-from-palette(mat.define-palette(mat.$green-palette));
 }
 
 .state-PENDING {
-  fill: mat-color(mat-palette($mat-grey));
+  fill: mat.get-color-from-palette(mat.define-palette(mat.$grey-palette));
 }
diff --git a/helix-front/client/app/workflow/workflow-detail/workflow-detail.component.scss b/helix-front/client/app/workflow/workflow-detail/workflow-detail.component.scss
@@ -1,17 +1,17 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 .content {
   padding: 20px;
 }
 
 .state-default {
-  color: mat-color(mat-palette($mat-deep-orange));
+  color: mat.get-color-from-palette(mat.define-palette(mat.$deep-orange-palette));
 }
 
 .state-COMPLETED {
-  color: mat-color(mat-palette($mat-green));
+  color: mat.get-color-from-palette(mat.define-palette(mat.$green-palette));
 }
 
 .state-PENDING {
-  color: mat-color(mat-palette($mat-grey));
+  color: mat.get-color-from-palette(mat.define-palette(mat.$grey-palette));
 }
diff --git a/helix-front/client/polyfills.ts b/helix-front/client/polyfills.ts
@@ -53,7 +53,7 @@ import 'core-js/es6/reflect';
 /***************************************************************************************************
  * Zone JS is required by Angular itself.
  */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
+import 'zone.js';  // Included with Angular CLI.
 
 
 

diff --git a/helix-front/client/theme.scss b/helix-front/client/theme.scss
@@ -1,7 +1,7 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 
 // Include the common styles for Angular Material
-@include mat-core();
+@include mat.core();
 
 @mixin md-icon-size($size: 24px) {
   font-size: $size;
@@ -26,22 +26,22 @@ $hi-nuage: (
   A200: #86BAFF,
   A400: #539DFF,
   A700: #3A8FFF,
-  contrast: map-get($mat-indigo, contrast)
+  contrast: map-get(mat.$indigo-palette, contrast)
 );
 
 // Define the palettes for the theme using the Material Design palettes available in palette.scss
 // For each palette, optionally specify a default, lighter, and darker hue.
-$hi-primary: mat-palette($hi-nuage);
-$hi-accent:  mat-palette($mat-pink, A200, A100, A400);
+$hi-primary: mat.define-palette($hi-nuage);
+$hi-accent:  mat.define-palette(mat.$pink-palette, A200, A100, A400);
 
 // The warn palette is optional (defaults to red).
-$hi-warn:    mat-palette($mat-red);
+$hi-warn:    mat.define-palette(mat.$red-palette);
 
 // Create the theme object (a Sass map containing all of the palettes).
-$hi-theme: mat-light-theme($hi-primary, $hi-accent, $hi-warn);
+$hi-theme: mat.define-light-theme($hi-primary, $hi-accent, $hi-warn);
 
 // Include theme styles for core and each component used in the app
-@include angular-material-theme($hi-theme);
+@include mat.all-component-themes($hi-theme);
 
 // Additional adjusts by vivo
 .mat-toolbar {