Skip to content

Commit 607ef38

Browse files
kristahousekristahouse
authored
feat(webapp): upgrade to Angular 20 and PrimeNG 20 (#1652)
Upgrades the standalone webapp to Angular 20 and PrimeNG 20. This keeps the frontend on current, supported framework versions and enables continued UI improvements with the latest PrimeNG components.
1 parent 198fce9 commit 607ef38

170 files changed

Lines changed: 5403 additions & 7389 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@ target/
22
.DS_Store
33
.idea/
44
.vs/
5+
.angular/
56
bin/
67
obj/
8+
dist/
79
/output/
810
/config/
911
*.DotSettings
10-
.angular

‎webapp/apps/gateway-ui/angular.json‎

Lines changed: 14 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -31,31 +31,35 @@
3131
"src/assets"
3232
]
3333
},
34+
"inlineStyleLanguage": "scss",
3435
"assets": [
3536
{
3637
"glob": "**/*",
3738
"input": "src/assets",
38-
"output": "/assets"
39+
"output": "assets"
3940
},
4041
{
4142
"glob": "**/*",
4243
"input": "src/assets/fonts",
43-
"output": "/assets/fonts"
44+
"output": "assets/fonts"
45+
},
46+
{
47+
"glob": "**/*",
48+
"input": "./node_modules/@devolutions/icons/dist/fonts",
49+
"output": "assets/fonts"
4450
},
4551
{
4652
"glob": "**/*",
4753
"input": "./node_modules/@devolutions/icons/logos",
48-
"output": "/assets/icons/logos"
54+
"output": "assets/icons/logos"
4955
},
5056
"src/assets/favicon.ico",
5157
"src/assets/favicon.png"
5258
],
5359
"styles": [
60+
"node_modules/@devolutions/icons/dist/scss/devolutions-icons.css",
5461
"src/assets/css/main.scss",
5562
"node_modules/primeicons/primeicons.css",
56-
"node_modules/primeng/resources/primeng.min.css",
57-
"node_modules/primeflex/primeflex.scss",
58-
"node_modules/@devolutions/icons/scss/devolutions-icons.scss",
5963
"node_modules/@angular/cdk/overlay-prebuilt.css"
6064
],
6165
"scripts": [],
@@ -66,11 +70,13 @@
6670
"budgets": [
6771
{
6872
"type": "initial",
69-
"maximumWarning": "500kb"
73+
"maximumWarning": "20mb",
74+
"maximumError": "25mb"
7075
},
7176
{
7277
"type": "anyComponentStyle",
73-
"maximumWarning": "2kb"
78+
"maximumWarning": "10kb",
79+
"maximumError": "15kb"
7480
}
7581
],
7682
"outputHashing": "all",
@@ -113,21 +119,6 @@
113119
"options": {
114120
"buildTarget": "gateway-ui:build"
115121
}
116-
},
117-
"test": {
118-
"builder": "@angular-devkit/build-angular:karma",
119-
"options": {
120-
"polyfills": [
121-
"zone.js"
122-
],
123-
"tsConfig": "tsconfig.spec.json",
124-
"inlineStyleLanguage": "scss",
125-
"assets": [
126-
"src/client/favicon.ico",
127-
"src/client/assets"
128-
],
129-
"scripts": []
130-
}
131122
}
132123
}
133124
}

‎webapp/apps/gateway-ui/package.json‎

Lines changed: 27 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,16 @@
1717
},
1818
"private": true,
1919
"dependencies": {
20-
"@angular/animations": "18.2.1",
21-
"@angular/cdk": "18.2.2",
22-
"@angular/common": "18.2.1",
23-
"@angular/compiler": "18.2.1",
24-
"@angular/core": "18.2.1",
25-
"@angular/forms": "18.2.1",
26-
"@angular/platform-browser": "18.2.1",
27-
"@angular/platform-browser-dynamic": "18.2.1",
28-
"@angular/router": "18.2.1",
29-
"@devolutions/icons": "4.0.8",
20+
"@angular/animations": "20.3.5",
21+
"@angular/cdk": "20.2.14",
22+
"@angular/common": "20.3.5",
23+
"@angular/compiler": "20.3.5",
24+
"@angular/core": "20.3.5",
25+
"@angular/forms": "20.3.5",
26+
"@angular/platform-browser": "20.3.5",
27+
"@angular/platform-browser-dynamic": "20.3.5",
28+
"@angular/router": "20.3.5",
29+
"@devolutions/icons": "^5.0.10",
3030
"@devolutions/iron-remote-desktop": "^0.10.1",
3131
"@devolutions/iron-remote-desktop-rdp": "^0.6.1",
3232
"@devolutions/iron-remote-desktop-vnc": "^0.7.0",
@@ -36,39 +36,35 @@
3636
"@xterm/addon-clipboard": "^0.1.0",
3737
"@xterm/xterm": "^5.5.0",
3838
"i18next": "^25.5.3",
39-
"primeflex": "3.3.1",
40-
"primeicons": "7.0.0",
41-
"primeng": "17.18.9",
39+
"@primeuix/styled": "^0.7.4",
40+
"@primeuix/styles": "^1.2.5",
41+
"@primeuix/themes": "^1.2.5",
42+
"@primeuix/utils": "^0.6.3",
43+
"primeflex": "4.0.0",
44+
"primeicons": "^7.0.0",
45+
"primeng": "20.3.0",
4246
"prismjs": "1.29.0",
4347
"rxjs": "^7.8.1",
4448
"tslib": "2.6.1",
4549
"ua-parser-js": "^2.0.4",
4650
"uuid": "^9.0.1",
4751
"web-animations-js": "2.3.2",
48-
"zone.js": "0.14.10"
52+
"zone.js": "0.15.0"
4953
},
5054
"devDependencies": {
51-
"@angular-devkit/build-angular": "18.2.4",
52-
"@angular-devkit/core": "18.2.1",
53-
"@angular/cli": "18.2.1",
54-
"@angular/compiler-cli": "18.2.1",
55-
"@biomejs/biome": "2.0.0",
56-
"@types/jasmine": "~4.3.0",
57-
"@types/node": "^18.19.0",
55+
"@angular-devkit/build-angular": "20.3.13",
56+
"@angular-devkit/core": "20.3.5",
57+
"@angular/cli": "20.3.5",
58+
"@angular/compiler-cli": "20.3.5",
59+
"@biomejs/biome": "2.1.3",
60+
"@types/node": "^20.19.0",
5861
"@types/uuid": "^9.0.8",
59-
"jasmine-core": "~4.6.0",
60-
"karma": "~6.4.0",
61-
"karma-chrome-launcher": "~3.2.0",
62-
"karma-coverage": "~2.2.0",
63-
"karma-jasmine": "~5.1.0",
64-
"karma-jasmine-html-reporter": "~2.1.0",
65-
"typescript": "~5.5.4",
62+
"typescript": "~5.8.2",
6663
"undici": "^7.16.0",
6764
"undici-types": "^6.21.0"
6865
},
6966
"optionalDependencies": {
70-
"@biomejs/cli-linux-x64": "2.0.0",
71-
"@biomejs/cli-win32-x64": "2.0.0",
72-
"@rollup/rollup-linux-x64-gnu": "^4.21.2"
67+
"@biomejs/cli-linux-x64": "2.1.3",
68+
"@biomejs/cli-win32-x64": "2.1.3"
7369
}
7470
}

‎webapp/apps/gateway-ui/src/assets/css/main.scss‎

Lines changed: 48 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,60 @@
11
/********** Global import variables/mixins for css (so no need to reimport in all "...scss") **********/
2-
@import 'mixins';
3-
@import 'variables';
4-
@import 'typography';
5-
@import 'theme-mode-variables';
6-
@import 'root-theme';
7-
@import 'dark-theme';
8-
@import 'light-theme';
2+
@use 'style/mixins' as *;
3+
@use 'style/variables' as *;
4+
@use 'style/typography' as *;
5+
@use 'theme/theme-mode-variables' as *;
6+
@use 'theme/root-theme' as *;
7+
@use 'theme/dark-theme' as *;
8+
@use 'theme/light-theme' as *;
99

10-
@import 'base';
11-
@import 'entry-status';
10+
@use 'style/base' as *;
11+
@use 'style/entry-status' as *;
1212

13-
/********** Overrides **********/
14-
@import '_p-divider';
15-
@import '_p-chips';
16-
@import '_p-button-action-button';
17-
@import '_p-button';
18-
@import '_p-tree';
19-
@import '_p-dropdown';
20-
@import '_p-data-scroller';
21-
@import '_p-tabview';
22-
@import '_p-table';
23-
@import '_p-steps';
24-
@import '_p-calendar';
25-
@import '_p-menu';
26-
@import '_p-input';
27-
@import '_p-dialog';
28-
@import '_p-input-number';
29-
@import '_p-accordion';
30-
@import '_p-overlaypanel';
31-
@import '_p-sidebar';
32-
@import '_p-input-switch';
33-
@import '_p-toolbar';
34-
@import '_p-tooltip';
35-
@import '_p-multiselect';
36-
@import '_p-tabview-dialog-left-tabs';
37-
@import '_p-progress-spinner';
38-
@import '_p-paginator';
39-
@import '_p-dataview';
40-
@import '_p-listbox';
41-
@import '_p-virtual-scroller';
42-
@import '_p-checkbox';
43-
@import '_p-autocomplete';
44-
@import '_p-select-button';
45-
@import '_p-messages_p-toast';
46-
@import '_p-card';
47-
@import '_p-badge';
48-
@import '_p-progressbar';
49-
@import '_p-inputgroup';
50-
@import '_p-cascadeSelect';
51-
//@import '_p-colorpicker';
52-
@import '_p-inputMask';
53-
//@import '_p-knob';
54-
//@import '_p-rating';
55-
@import '_p-slider';
56-
@import '_p-splitbutton';
57-
@import '_p-orderlist';
58-
//@import '_p-organizationChart';
59-
@import '_p-timeLine';
60-
@import '_p-picklist';
61-
@import '_p-fieldset';
62-
@import '_p-confirm-popup';
63-
@import '_p-skeleton';
64-
@import '_p-contextMenu';
65-
@import '_p-breadcrumb';
66-
//@import '_p-carousel_p-galleria';
67-
@import '_p-progressbar';
68-
@import '_p-blockui';
69-
@import '_p-radio-button';
70-
@import '_p-panel';
71-
@import '_p-component-overlay';
72-
@import '_p-tieredMenu';
73-
@import '_p-timescircleicon';
13+
/********** Overrides - Only Used Components **********/
14+
/* Core Components */
15+
@use 'override/_p-button' as *;
16+
@use 'override/_p-button-action-button' as *;
17+
@use 'override/_p-checkbox' as *;
18+
@use 'override/_p-input' as *;
19+
@use 'override/_p-input-switch' as *;
20+
@use 'override/_p-inputgroup' as *;
7421

22+
/* Dropdowns & Selections */
23+
@use 'override/_p-autocomplete' as *;
24+
@use 'override/_p-dropdown' as *;
25+
@use 'override/_p-multiselect' as *;
26+
@use 'override/_p-select' as *;
27+
28+
/* Navigation & Layout */
29+
@use 'override/_p-tabview' as *;
30+
@use 'override/_p-divider' as *;
31+
32+
/* Feedback Components */
33+
@use 'override/_p-messages_p-toast' as *;
34+
@use 'override/_p-progress-spinner' as *;
35+
@use 'override/_p-tooltip' as *;
36+
37+
/* Miscellaneous */
38+
@use 'override/_p-chips' as *;
39+
@use 'override/_p-component-overlay' as *;
40+
@use 'override/_p-slider' as *;
7541

7642
/********* Fonts imports ************/
7743
@import url('https://cdnfonts.devolutions.net/OpenSans/variable-font/OpenSans.css');
7844
@import url('https://cdnfonts.devolutions.net/Roboto/static/Roboto.css');
7945

80-
.full-width-dropdown .p-dropdown {
46+
47+
/* Devolutions icon font must always win */
48+
.dvl-icon,
49+
[class*="dvl-icon-"] {
50+
font-family: 'devolutions-icons' !important;
51+
font-style: normal;
52+
font-weight: normal;
53+
line-height: 1;
54+
}
55+
56+
.full-width-dropdown .p-dropdown,
57+
.full-width-dropdown .p-select {
8158
width: 100%;
8259
}
8360

‎webapp/apps/gateway-ui/src/assets/css/override/_p-accordion.scss‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎webapp/apps/gateway-ui/src/assets/css/override/_p-autocomplete.scss‎

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
@use '../style/mixins' as *;
2+
@use '../style/variables' as *;
3+
@use '../theme/theme-mode-variables' as *;
4+
15
.p-autocomplete {
26
width: 100%;
37

@@ -28,12 +32,11 @@
2832
.p-autocomplete-dropdown {
2933
width: 2em;
3034
background: transparent !important;
31-
background: $input-txt-bg-color;
32-
color: $dropdown-trigger-color;
35+
color: var(--p-select-dropdown-color);
3336
border: 0 none;
3437
position: absolute;
3538
right: 0;
36-
top: 4px;
39+
top: 8px;
3740

3841
@include transition(color $transitionDuration);
3942

@@ -236,3 +239,18 @@
236239
border-color: $default-btn-bg-pressed-color;
237240
}
238241
}
242+
243+
.p-autocomplete-option-selected {
244+
background: $dropdown-item-selected-bg-color;
245+
color: $dropdown-item-selected-txt-color;
246+
}
247+
248+
.p-autocomplete-list {
249+
background: $dropdown-item-bg-color;
250+
color: $dropdown-item-txt-color;
251+
}
252+
253+
.p-autocomplete-overlay {
254+
border-radius: 0 0 $borderRadius $borderRadius;
255+
border: 1px solid $input-txt-border-focus-color;
256+
}

‎webapp/apps/gateway-ui/src/assets/css/override/_p-badge.scss‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎webapp/apps/gateway-ui/src/assets/css/override/_p-blockui.scss‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

0 commit comments

Comments
 (0)