Skip to content
Permalink
Browse files
Upgrade helix-front to Angular 12.2 (#2131)
Fix security vulnerabilities in helix-front dependencies.
Upgrade helix-front dependencies to improve contributor productivity.
  • Loading branch information
micahstubbs committed Jun 3, 2022
1 parent e84a4a7 commit 4faa5f61a17b446a1c4e75ac03397e62981f9af1
Showing 18 changed files with 86 additions and 75 deletions.
@@ -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",
@@ -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 {
@@ -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 {
@@ -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 {
@@ -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));
}
@@ -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 {
@@ -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 {
@@ -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);
}
}

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



@@ -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 {

0 comments on commit 4faa5f6

Please sign in to comment.