[DB-6705] Angular 20 (#66)

* DB-6705 angular 20

* DB-6705 styles

* DB-6705 upgraded nodeJS

* DB-6705 fix css of checkboxes on query page

* disable standalone and inject error eslint

* changed version of nodejs in Dockerfile

* changed version of nodejs in Dockerfile

* DB-6705 css fix of ng-select

* DB-6711 Added AutoFocusDirective to import of QueryComponent

Author: isvonja

.gitlab-ci.yml

@@ -1,4 +1,4 @@
-image: $CI_REGISTRY/swe-database-team/gitlab-ci/whois-build:v0.0.6
+image: $CI_REGISTRY/swe-database-team/gitlab-ci/whois-build:v0.0.11
 
 variables:
   MAVEN_OPTS: -Dmaven.repo.local=.m2/repository

Dockerfile

@@ -5,8 +5,8 @@ FROM maven:3.9-amazoncorretto-21-al2023 AS build
 
 WORKDIR /src
 
-# INSTALL: node 18
-RUN curl -sL https://rpm.nodesource.com/setup_18.x | bash - && \
+# INSTALL: node 22
+RUN curl -sL https://rpm.nodesource.com/setup_22.x | bash - && \
     dnf install -y nodejs && \
     dnf clean all && \
     rm -rf /var/cache/dnf

frontend/.eslintrc.json

@@ -10,6 +10,8 @@
             },
             "extends": ["plugin:@angular-eslint/recommended", "plugin:@angular-eslint/template/process-inline-templates"],
             "rules": {
+                "@angular-eslint/prefer-standalone": "off",
+                "@angular-eslint/prefer-inject": "off",
                 "@angular-eslint/component-selector": ["off"],
                 "@angular-eslint/directive-selector": ["off"],
                 "@angular-eslint/no-input-rename": ["error"],

frontend/angular.json

@@ -52,7 +52,7 @@
                                 {
                                     "type": "initial",
                                     "maximumWarning": "3mb",
-                                    "maximumError": "15mb"
+                                    "maximumError": "16mb"
                                 },
                                 {
                                     "type": "anyComponentStyle",
@@ -118,10 +118,9 @@
                     }
                 },
                 "serve": {
-                    "builder": "@angular-devkit/build-angular:dev-server",
+                    "builder": "@angular/build:dev-server",
                     "options": {
                         "proxyConfig": "proxy.conf.json",
-                        "disableHostCheck": true,
                         "buildTarget": "frontend:build"
                     },
                     "configurations": {
@@ -134,16 +133,16 @@
                     }
                 },
                 "extract-i18n": {
-                    "builder": "@angular-devkit/build-angular:extract-i18n",
+                    "builder": "@angular/build:extract-i18n",
                     "options": {
                         "buildTarget": "frontend:build"
                     }
                 },
                 "test": {
-                    "builder": "@angular-devkit/build-angular:karma",
+                    "builder": "@angular/build:karma",
                     "options": {
                         "main": "test/unit/test.ts",
-                        "polyfills": "src/polyfills.ts",
+                        "polyfills": ["src/polyfills.ts"],
                         "tsConfig": "test/unit/tsconfig.spec.json",
                         "assets": ["src/assets"],
                         "styles": ["src/styles.scss"],
@@ -176,5 +175,31 @@
     "cli": {
         "analytics": "81bf981f-ca1c-4e1b-9aff-651e1a4771f3",
         "schematicCollections": ["@angular-eslint/schematics"]
+    },
+    "schematics": {
+        "@schematics/angular:component": {
+            "type": "component"
+        },
+        "@schematics/angular:directive": {
+            "type": "directive"
+        },
+        "@schematics/angular:service": {
+            "type": "service"
+        },
+        "@schematics/angular:guard": {
+            "typeSeparator": "."
+        },
+        "@schematics/angular:interceptor": {
+            "typeSeparator": "."
+        },
+        "@schematics/angular:module": {
+            "typeSeparator": "."
+        },
+        "@schematics/angular:pipe": {
+            "typeSeparator": "."
+        },
+        "@schematics/angular:resolver": {
+            "typeSeparator": "."
+        }
     }
 }

frontend/package.json

@@ -24,16 +24,16 @@
     },
     "private": true,
     "devDependencies": {
-        "@angular-builders/custom-webpack": "19.0.1",
-        "@angular-devkit/build-angular": "19.2.13",
-        "@angular-eslint/builder": "18.4.3",
-        "@angular-eslint/eslint-plugin": "18.4.3",
-        "@angular-eslint/eslint-plugin-template": "18.4.3",
-        "@angular-eslint/schematics": "18.4.3",
-        "@angular-eslint/template-parser": "18.4.3",
-        "@angular/cli": "19.2.13",
-        "@angular/compiler-cli": "19.2.13",
-        "@angular/language-service": "19.2.13",
+        "@angular-builders/custom-webpack": "20.0.0",
+        "@angular-eslint/builder": "20.4.0",
+        "@angular-eslint/eslint-plugin": "20.4.0",
+        "@angular-eslint/eslint-plugin-template": "20.4.0",
+        "@angular-eslint/schematics": "20.4.0",
+        "@angular-eslint/template-parser": "20.4.0",
+        "@angular/build": "^20.3.6",
+        "@angular/cli": "20.3.6",
+        "@angular/compiler-cli": "20.3.6",
+        "@angular/language-service": "20.3.6",
         "@babel/core": "7.26.10",
         "@babel/preset-env": "7.26.9",
         "@babel/runtime": "7.26.10",
@@ -68,24 +68,24 @@
         "typescript": "5.8.3"
     },
     "engines": {
-        "node": "18.16.0"
+        "node": "22.21.0"
     },
     "dependencies": {
-        "@angular/animations": "19.2.13",
-        "@angular/cdk": "19.2.17",
-        "@angular/common": "19.2.13",
-        "@angular/compiler": "19.2.13",
-        "@angular/core": "19.2.13",
-        "@angular/forms": "19.2.13",
-        "@angular/localize": "19.2.13",
-        "@angular/material": "19.2.17",
-        "@angular/material-moment-adapter": "19.2.17",
-        "@angular/platform-browser": "19.2.13",
-        "@angular/platform-browser-dynamic": "19.2.13",
-        "@angular/router": "19.2.13",
+        "@angular/animations": "20.3.6",
+        "@angular/cdk": "20.2.9",
+        "@angular/common": "20.3.6",
+        "@angular/compiler": "20.3.6",
+        "@angular/core": "20.3.6",
+        "@angular/forms": "20.3.6",
+        "@angular/localize": "20.3.6",
+        "@angular/material": "20.2.9",
+        "@angular/material-moment-adapter": "20.2.9",
+        "@angular/platform-browser": "20.3.6",
+        "@angular/platform-browser-dynamic": "20.3.6",
+        "@angular/router": "20.3.6",
         "@cypress/schematic": "2.4.0",
-        "@ng-bootstrap/ng-bootstrap": "18.0.0",
-        "@ng-select/ng-select": "14.9.0",
+        "@ng-bootstrap/ng-bootstrap": "19.0.1",
+        "@ng-select/ng-select": "15.2.0",
         "@ngx-loading-bar/core": "6.0.2",
         "@ngx-loading-bar/http-client": "6.0.2",
         "@technical-design/ripe-app-webcomponents": "4.3.0",
@@ -103,7 +103,7 @@
         "lodash": "4.17.21",
         "moment": "^2.30.1",
         "moment-timezone": "^0.6.0",
-        "ngx-cookie-service": "19.1.2",
+        "ngx-cookie-service": "20.1.0",
         "npm": "10.5.2",
         "rxjs": "7.5.5",
         "sanitize-html": "^2.7.0",

frontend/src/app/apikeys/api-key-confirmation-dialog/api-key-confirmation-dialog.component.scss

@@ -1,5 +1,6 @@
 .mat-mdc-card {
     margin-bottom: 16px;
+    color: #3d3d3d;
 
     .mat-mdc-card-content {
         background-color: #f7f7fa;

frontend/src/app/apikeys/create-new-api-key/create-new-api-key.component.ts

@@ -1,6 +1,6 @@
 import { Component, EventEmitter, OnInit, Output } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import * as moment from 'moment-timezone';
+import moment from 'moment-timezone';
 import { Subject, switchMap } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { AlertsService } from '../../shared/alert/alerts.service';

frontend/src/app/shared/table-scroller.directive.ts

@@ -1,5 +1,4 @@
-import { DOCUMENT } from '@angular/common';
-import { Directive, ElementRef, EventEmitter, HostListener, Inject, Output } from '@angular/core';
+import { Directive, DOCUMENT, ElementRef, EventEmitter, HostListener, Inject, Output } from '@angular/core';
 
 export function debounce(delay: number = 25): MethodDecorator {
     return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {

frontend/src/styles.scss

@@ -1,37 +1,37 @@
 /* Extended CSS */
-@import 'src/styles/scss/extend.scss';
+@import './styles/scss/extend.scss';
 /* Generic CSS */
-@import 'src/styles/scss/web-components.scss';
-@import 'src/styles/scss/general.scss';
-@import 'src/styles/scss/paginator.scss';
-@import 'src/styles/scss/query.scss';
-@import 'src/styles/scss/hierarchy-flags-panel.scss';
-@import 'src/styles/scss/advance-filter-panel.scss';
+@import './styles/scss/web-components.scss';
+@import './styles/scss/general.scss';
+@import './styles/scss/paginator.scss';
+@import './styles/scss/query.scss';
+@import './styles/scss/hierarchy-flags-panel.scss';
+@import './styles/scss/advance-filter-panel.scss';
 /* View based CSS */
-@import 'src/styles/scss/create-obj.scss';
-@import 'src/styles/scss/datatables.scss';
-@import 'src/styles/scss/display.scss';
-@import 'src/styles/scss/multisync.scss';
-@import 'src/styles/scss/resources.scss';
-@import 'src/styles/scss/ip-usage-of-all-resources.scss';
-@import 'src/styles/scss/ip-usage.scss';
-@import 'src/styles/scss/whois-object.scss';
+@import './styles/scss/create-obj.scss';
+@import './styles/scss/datatables.scss';
+@import './styles/scss/display.scss';
+@import './styles/scss/multisync.scss';
+@import './styles/scss/resources.scss';
+@import './styles/scss/ip-usage-of-all-resources.scss';
+@import './styles/scss/ip-usage.scss';
+@import './styles/scss/whois-object.scss';
 /* Module based CSS */
-@import 'src/styles/scss/uiselect-custom.scss';
-@import 'src/styles/scss/bootstrap-custom.scss';
-@import 'src/styles/scss/material-custom.scss';
+@import './styles/scss/uiselect-custom.scss';
+@import './styles/scss/bootstrap-custom.scss';
+@import './styles/scss/material-custom.scss';
 /* Custom directives */
-@import 'src/styles/scss/flag.scss';
-@import 'src/styles/scss/forgot-maintainer-password.scss';
-@import 'src/styles/scss/font.scss';
-@import 'src/styles/scss/live-chat.scss';
-@import 'src/styles/scss/alerts-drop-down.scss';
-@import 'src/styles/scss/transfer-drop-down.scss';
-@import 'src/styles/scss/org-drop-down.scss';
-@import 'src/styles/scss/query-flags.scss';
-@import 'src/styles/scss/hierarchy-selector.scss';
-@import 'src/styles/scss/feedback-support-dialog.scss';
-@import 'src/styles/scss/syncupdates.scss';
+@import './styles/scss/flag.scss';
+@import './styles/scss/forgot-maintainer-password.scss';
+@import './styles/scss/font.scss';
+@import './styles/scss/live-chat.scss';
+@import './styles/scss/alerts-drop-down.scss';
+@import './styles/scss/transfer-drop-down.scss';
+@import './styles/scss/org-drop-down.scss';
+@import './styles/scss/query-flags.scss';
+@import './styles/scss/hierarchy-selector.scss';
+@import './styles/scss/feedback-support-dialog.scss';
+@import './styles/scss/syncupdates.scss';
 @import '@ng-select/ng-select/themes/default.theme.css';
 @import 'bootstrap/dist/css/bootstrap.min.css';
 @import '@typeform/embed/build/css/widget.css';

frontend/src/styles/scss/_bootstrap-custom.scss

@@ -157,9 +157,15 @@ ngb-popover-window.popover {
     }
 }
 
+.ng-select.ng-select-opened .ng-select-container {
+    z-index: 1 !important;
+}
 .ng-select.ng-select-disabled > .ng-select-container {
     background-color: #eee;
 }
+.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value {
+    background: none !important;
+}
 
 // bootstrap modal
 .modal,