Angular Upgrade v21.x

modules/web/package.json

@@ -57,18 +57,18 @@
     ]
   },
   "dependencies": {
-    "@angular/animations": "20.3.15",
-    "@angular/cdk": "20.2.12",
-    "@angular/common": "20.3.15",
-    "@angular/compiler": "20.3.18",
-    "@angular/core": "20.3.18",
+    "@angular/animations": "21.2.9",
+    "@angular/cdk": "21.2.9",
+    "@angular/common": "21.2.9",
+    "@angular/compiler": "21.2.9",
+    "@angular/core": "21.2.9",
     "@angular/flex-layout": "15.0.0-beta.42",
-    "@angular/forms": "20.3.15",
-    "@angular/localize": "20.3.15",
-    "@angular/material": "20.2.12",
-    "@angular/platform-browser": "20.3.15",
-    "@angular/platform-browser-dynamic": "20.3.15",
-    "@angular/router": "20.3.15",
+    "@angular/forms": "21.2.9",
+    "@angular/localize": "21.2.9",
+    "@angular/material": "21.2.9",
+    "@angular/platform-browser": "21.2.9",
+    "@angular/platform-browser-dynamic": "21.2.9",
+    "@angular/router": "21.2.9",
     "@aws-sdk/client-s3": "^3.808.0",
     "@fontsource/inconsolata": "5.2.5",
     "@fontsource/roboto": "5.1.1",
@@ -90,10 +90,9 @@
     "lodash": "4.18.1",
     "modern-normalize": "3.0.1",
     "moment": "2.30.1",
-    "monaco-editor": "0.52.2",
-    "ngx-clipboard": "16.0.0",
-    "ngx-cookie-service": "20.1.0",
-    "ngx-monaco-editor-v2": "^20.3.0",
+    "monaco-editor": "0.55.1",
+    "ngx-cookie-service": "21.3.1",
+    "ngx-monaco-editor-v2": "^21.1.4",
     "react": "^19.1.0",
     "react-dom": "^18.3.1",
     "rxjs": "7.8.2",
@@ -103,11 +102,11 @@
     "zone.js": "0.16.0"
   },
   "devDependencies": {
-    "@angular/build": "^20.3.18",
-    "@angular/cli": "21.1.3",
-    "@angular/compiler-cli": "20.3.15",
+    "@angular/build": "21.2.9",
+    "@angular/cli": "21.2.9",
+    "@angular/compiler-cli": "21.2.9",
     "@jest/globals": "30.3.0",
-    "@types/jest": "29.5.14",
+    "@types/jest": "30.0.0",
     "@types/js-yaml": "4.0.9",
     "@types/lodash": "4.17.23",
     "@types/node": "22.13.4",
@@ -127,10 +126,10 @@
     "eslint-plugin-rxjs": "5.0.3",
     "gts": "5.3.0",
     "husky": "9.1.7",
-    "jest": "29.7.0",
+    "jest": "30.3.0",
     "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^30.1.2",
-    "jest-preset-angular": "^15.0.1",
+    "jest-preset-angular": "16.1.4",
     "js-beautify": "1.15.4",
     "json-server": "0.17.4",
     "license-check-and-add": "4.0.5",
@@ -144,14 +143,29 @@
     "stylelint-config-standard-scss": "14.0.0",
     "stylelint-no-unsupported-browser-features": "8.0.5",
     "stylelint-order": "6.0.4",
-    "ts-jest": "29.1.2",
+    "ts-jest": "29.4.9",
     "ts-node": "10.9.2",
     "tslib": "2.8.1",
     "typescript": "5.9.3"
   },
   "overrides": {
     "@aws-sdk/xml-builder": {
       "fast-xml-parser": ">=5.3.6"
+    },
+    "@angular/flex-layout": {
+      "@angular/core": "$@angular/core",
+      "@angular/common": "$@angular/common",
+      "@angular/cdk": "$@angular/cdk",
+      "@angular/platform-browser": "$@angular/platform-browser"
+    },
+    "@swimlane/ngx-charts": {
+      "@angular/core": "$@angular/core",
+      "@angular/common": "$@angular/common",
+      "@angular/cdk": "$@angular/cdk",
+      "@angular/animations": "$@angular/animations",
+      "@angular/forms": "$@angular/forms",
+      "@angular/platform-browser": "$@angular/platform-browser",
+      "@angular/platform-browser-dynamic": "$@angular/platform-browser-dynamic"
     }
   }
 }

modules/web/src/app/cluster/details/cluster/Untitled-2.md

@@ -0,0 +1,21 @@
+```
+https://dev.kubermatic.io/404
+    ?response_type=id_token
+    &client_id=kubermatic
+    &redirect_uri=http://localhost:8000/projects
+    &scope=openid%20email%20profile%20groups
+    &nonce=eO7aoMNy53j3MIxoQNcpI.MPQvP1Xu-F
+```
+
+**Redirect URI (decoded):** `http://localhost:8000/projects`
+
+
+https://dev.kubermatic.io/dex/auth/google?
+    access_type=online&
+    client_id=kubermaticIssuer&
+    code_challenge=SKVk8338kfmcYtjF4hOv0zPL0X3LuVBrUe2GmBqICh8&
+    code_challenge_method=S256&
+    redirect_uri=http%3A%2F%2Fdev.kubermatic.io%2Fapi%2Fv2%2Fauth%2Fcallback&
+    response_type=code&
+    scope=openid+email+profile+groups+offline_access&
+    state=btg544vvtzcx

modules/web/src/app/cluster/details/cluster/cluster-delete-confirmation/component.ts

@@ -12,6 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import {Clipboard} from '@angular/cdk/clipboard';
 import {Component, DoCheck, ElementRef, Input, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {FormControl, FormGroup} from '@angular/forms';
 import {MatDialogRef} from '@angular/material/dialog';
@@ -22,7 +23,6 @@ import {SettingsService} from '@core/services/settings';
 import {Cluster, Finalizer} from '@shared/entity/cluster';
 import {AdminSettings} from '@shared/entity/settings';
 import {CLICK_TO_COPY_TOOLTIP} from '@app/shared/constants/common';
-import {ClipboardService} from 'ngx-clipboard';
 import {Observable, Subject} from 'rxjs';
 import {take, takeUntil} from 'rxjs/operators';
 
@@ -48,7 +48,7 @@ export class ClusterDeleteConfirmationComponent implements OnInit, DoCheck, OnDe
     private readonly _settingsService: SettingsService,
     private readonly _dialogRef: MatDialogRef<ClusterDeleteConfirmationComponent>,
     private readonly _googleAnalyticsService: GoogleAnalyticsService,
-    private readonly _clipboardService: ClipboardService,
+    private readonly _clipboardService: Clipboard,
     private readonly _notificationService: NotificationService
   ) {}
 

modules/web/src/app/cluster/details/cluster/machine-deployment-details/copy-joining-script-button/component.ts

@@ -12,9 +12,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import {Clipboard} from '@angular/cdk/clipboard';
 import {Component, Input} from '@angular/core';
 import {MachineDeploymentService} from '@core/services/machine-deployment';
-import {ClipboardService} from 'ngx-clipboard';
 import {finalize, take} from 'rxjs/operators';
 
 @Component({
@@ -34,7 +34,7 @@ export class CopyJoiningScriptButtonComponent {
 
   constructor(
     private readonly _machineDeploymentService: MachineDeploymentService,
-    private readonly _clipboardService: ClipboardService
+    private readonly _clipboardService: Clipboard
   ) {}
 
   copyJoiningScript(): void {

modules/web/src/app/cluster/details/cluster/machine-deployment-details/template.html

@@ -24,8 +24,7 @@
         <i [matTooltip]="machineDeploymentHealthStatus.message"
            [ngClass]="machineDeploymentHealthStatus.icon"
            class="machine-deployment-health"></i>
-        <span ngxClipboard
-              [cbContent]="machineDeployment.name"
+        <span [cdkCopyToClipboard]="machineDeployment.name"
               [matTooltip]="CLICK_TO_COPY_TOOLTIP"
               class="km-copy">{{machineDeployment.name}}</span>
       </mat-card-title>

modules/web/src/app/cluster/details/cluster/machine-deployment-list/template.html

@@ -44,15 +44,13 @@
         <div class="km-code-block km-copy"
              fxLayoutAlign=" center"
              [matTooltip]="CLICK_TO_COPY_TOOLTIP"
-             ngxClipboard
-             [cbContent]="'kubectl get csr'">
+             [cdkCopyToClipboard]="'kubectl get csr'">
           <i class="km-icon-mask km-icon-terminal i-16"></i>&nbsp;kubectl get csr
         </div>
         <div class="km-code-block km-copy"
              fxLayoutAlign=" center"
              [matTooltip]="CLICK_TO_COPY_TOOLTIP"
-             ngxClipboard
-             [cbContent]="'kubectl certificate approve [csr-name]'">
+             [cdkCopyToClipboard]="'kubectl certificate approve [csr-name]'">
           <i class="km-icon-mask km-icon-terminal i-16"></i>&nbsp;kubectl certificate approve [csr-name]
         </div>
       </div>

modules/web/src/app/cluster/details/cluster/node-list/template.html

@@ -95,9 +95,8 @@
               <div fxLayout="column">
                 @for (internalIP of addresses.internalIPs; track internalIP) {
                 <span class="km-copy"
-                      [cbContent]="internalIP"
+                      [cdkCopyToClipboard]="internalIP"
                       (click)="$event.stopPropagation()"
-                      ngxClipboard
                       [matTooltip]="CLICK_TO_COPY_TOOLTIP">{{internalIP}}</span>
                 }
               </div>
@@ -110,9 +109,8 @@
               <div fxLayout="column">
                 @for (externalIP of addresses.externalIPs; track externalIP) {
                 <span class="km-copy"
-                      [cbContent]="externalIP"
+                      [cdkCopyToClipboard]="externalIP"
                       (click)="$event.stopPropagation()"
-                      ngxClipboard
                       [matTooltip]="CLICK_TO_COPY_TOOLTIP">{{externalIP}}</span>
                 }
               </div>

modules/web/src/app/cluster/details/cluster/share-kubeconfig/template.html

@@ -67,17 +67,15 @@
       <li>
         On Linux / macOS
         <div class="km-code-block km-copy"
-             ngxClipboard
-             [cbContent]="installCommands.brewInstallCommand"
+             [cdkCopyToClipboard]="installCommands.brewInstallCommand"
              [matTooltip]="CLICK_TO_COPY_TOOLTIP">
           {{installCommands.brewInstallCommand}}
         </div>
       </li>
       <li>
         On Windows (Chocolatey)
         <div class="km-code-block km-copy"
-             ngxClipboard
-             [cbContent]="installCommands.chocoInstallCommand"
+             [cdkCopyToClipboard]="installCommands.chocoInstallCommand"
              [matTooltip]="CLICK_TO_COPY_TOOLTIP">
           {{installCommands.chocoInstallCommand}}
         </div>
@@ -91,8 +89,7 @@
              rel="noopener">installation docs <i class="km-icon-external-link i-18"></i></a>.
         </P>
         <div class="km-code-block km-copy"
-             ngxClipboard
-             [cbContent]="installCommands.krewInstallCommand"
+             [cdkCopyToClipboard]="installCommands.krewInstallCommand"
              [matTooltip]="CLICK_TO_COPY_TOOLTIP">
           {{installCommands.krewInstallCommand}}
         </div>
@@ -103,8 +100,7 @@
   @if (dialogTitle === shareKubeConfigDialogMode.Share) {
   <div class="km-code-block km-copy"
        [matTooltip]="CLICK_TO_COPY_TOOLTIP"
-       ngxClipboard
-       [cbContent]="kubeconfigLink">{{kubeconfigLink}}</div>
+       [cdkCopyToClipboard]="kubeconfigLink">{{kubeconfigLink}}</div>
   }
 </mat-dialog-content>
 <mat-dialog-actions>

modules/web/src/app/cluster/details/cluster/template.html

@@ -47,8 +47,7 @@
         <i [matTooltip]="healthStatus?.message"
            [ngClass]="healthStatus?.icon"
            class="cluster-health km-pointer"></i>
-        <span ngxClipboard
-              [cbContent]="cluster.name"
+        <span [cdkCopyToClipboard]="cluster.name"
               [matTooltip]="CLICK_TO_COPY_TOOLTIP"
               class="cluster-name km-copy">{{cluster.name}}</span>
       </mat-card-title>
@@ -171,8 +170,7 @@
         <km-property>
           <div key>Cluster ID</div>
           <div value
-               ngxClipboard
-               [cbContent]="cluster?.id"
+               [cdkCopyToClipboard]="cluster?.id"
                [matTooltip]="CLICK_TO_COPY_TOOLTIP"
                class="km-copy">
             {{cluster?.id}}

modules/web/src/app/cluster/details/external-cluster/external-cluster-delete-confirmation/component.ts

@@ -12,13 +12,13 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import {Clipboard} from '@angular/cdk/clipboard';
 import {AfterContentChecked, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {MatDialogRef} from '@angular/material/dialog';
 import {GoogleAnalyticsService} from '@app/google-analytics.service';
 import {NotificationService} from '@core/services/notification';
 import {AdminSettings} from '@shared/entity/settings';
 import _ from 'lodash';
-import {ClipboardService} from 'ngx-clipboard';
 import {Observable, Subject} from 'rxjs';
 import {finalize, take} from 'rxjs/operators';
 import {DeleteExternalClusterAction, ExternalCluster, ExternalClusterProvider} from '@shared/entity/external-cluster';
@@ -51,7 +51,7 @@ export class ExternalClusterDeleteConfirmationComponent implements OnInit, OnDes
 
   constructor(
     private readonly _clusterService: ClusterService,
-    private readonly _clipboardService: ClipboardService,
+    private readonly _clipboardService: Clipboard,
     private readonly _dialogRef: MatDialogRef<ExternalClusterDeleteConfirmationComponent>,
     private readonly _externalClusterService: ExternalClusterService,
     private readonly _googleAnalyticsService: GoogleAnalyticsService,

modules/web/src/app/cluster/details/external-cluster/external-machine-deployment-details/template.html

@@ -23,8 +23,7 @@
       <i class="machine-deployment-health km-pointer"
          [matTooltip]="machineDeploymentHealthStatus?.message"
          [ngClass]="machineDeploymentHealthStatus?.icon"></i>
-      <span ngxClipboard
-            [cbContent]="machineDeployment.name"
+      <span [cdkCopyToClipboard]="machineDeployment.name"
             [matTooltip]="CLICK_TO_COPY_TOOLTIP"
             class="km-copy">{{machineDeployment.name}}</span>
     </mat-card-title>

modules/web/src/app/cluster/details/external-cluster/external-node-list/template.html

@@ -88,9 +88,8 @@
               <div fxLayout="column">
                 @for (internalIP of addresses.internalIPs; track internalIP) {
                 <span class="km-copy"
-                      [cbContent]="internalIP"
+                      [cdkCopyToClipboard]="internalIP"
                       (click)="$event.stopPropagation()"
-                      ngxClipboard
                       [matTooltip]="CLICK_TO_COPY_TOOLTIP">{{internalIP}}</span>
                 }
               </div>
@@ -103,9 +102,8 @@
               <div fxLayout="column">
                 @for (externalIP of addresses.externalIPs; track externalIP) {
                 <span class="km-copy"
-                      [cbContent]="externalIP"
+                      [cdkCopyToClipboard]="externalIP"
                       (click)="$event.stopPropagation()"
-                      ngxClipboard
                       [matTooltip]="CLICK_TO_COPY_TOOLTIP">{{externalIP}}</span>
                 }
               </div>

modules/web/src/app/cluster/details/external-cluster/template.html

@@ -33,8 +33,7 @@
       <i [matTooltip]="getStatus()"
          [ngClass]="getStatusColor()"
          class="cluster-health km-pointer"></i>
-      <span ngxClipboard
-            [cbContent]="cluster.name"
+      <span [cdkCopyToClipboard]="cluster.name"
             [matTooltip]="CLICK_TO_COPY_TOOLTIP"
             class="cluster-name km-copy">{{cluster.name}}</span>
       <span class="km-label-primary">External</span>
@@ -90,8 +89,7 @@
       <km-property>
         <div key>Cluster ID</div>
         <div value
-             ngxClipboard
-             [cbContent]="cluster?.id"
+             [cdkCopyToClipboard]="cluster?.id"
              [matTooltip]="CLICK_TO_COPY_TOOLTIP"
              class="km-copy">
           {{cluster?.id}}

modules/web/src/app/cluster/details/kubeone/machine-deployment-details/template.html

@@ -22,8 +22,7 @@
       <i class="machine-deployment-health km-pointer"
          [matTooltip]="machineDeploymentHealthStatus?.message"
          [ngClass]="machineDeploymentHealthStatus?.icon"></i>
-      <span ngxClipboard
-            [cbContent]="machineDeployment.name"
+      <span [cdkCopyToClipboard]="machineDeployment.name"
             [matTooltip]="CLICK_TO_COPY_TOOLTIP"
             class="km-copy">{{machineDeployment.name}}</span>
     </mat-card-title>

modules/web/src/app/cluster/details/kubeone/template.html

@@ -33,8 +33,7 @@
       <i [matTooltip]="getStatus()"
          [ngClass]="getStatusColor()"
          class="cluster-health km-pointer"></i>
-      <span ngxClipboard
-            [cbContent]="cluster.name"
+      <span [cdkCopyToClipboard]="cluster.name"
             [matTooltip]="CLICK_TO_COPY_TOOLTIP"
             class="cluster-name km-copy">{{cluster.name}}</span>
       <span class="km-label-primary">KubeOne</span>
@@ -79,8 +78,7 @@
       <km-property>
         <div key>Cluster ID</div>
         <div value
-             ngxClipboard
-             [cbContent]="cluster?.id"
+             [cdkCopyToClipboard]="cluster?.id"
              [matTooltip]="CLICK_TO_COPY_TOOLTIP"
              class="km-copy">
           {{cluster?.id}}

modules/web/src/app/core/components/notification-panel/template.html

@@ -74,8 +74,7 @@
             <div class="notification-info"
                  fxLayoutAlign=" center">
               <i class="km-icon-mask km-icon-copy-small"
-                 ngxClipboard
-                 [cbContent]="notification.message"
+                 [cdkCopyToClipboard]="notification.message"
                  matTooltip="Copy to clipboard"></i>
               <span class="notification-timestamp km-text-muted"
                     fxLayoutAlign="center center"