33073 rxjs from v6 to v7 (#35145)

This pull request focuses on migrating the codebase away from deprecated
RxJS 6 patterns to be fully compatible with RxJS 7.8.2. The changes are
primarily aimed at replacing deprecated operators like `pluck`,
`switchMapTo`, and `publishLast` with their recommended alternatives, as
well as updating test code to align with newer RxJS error handling APIs.
The refactor touches a wide range of files, particularly in the
`dotcms-ui` app, and ensures improved maintainability and future
compatibility.

**RxJS Operator Refactoring:**

* Replaced deprecated `pluck` operator with `map` across all usages in
the codebase, updating selector logic accordingly
[[1]](diffhunk://#diff-6c19b151b96d1e9277930b34178414a4bb8edb3727bf54efb078f67722d91679L6-R6)
[[2]](diffhunk://#diff-6c19b151b96d1e9277930b34178414a4bb8edb3727bf54efb078f67722d91679L42-R47)
[[3]](diffhunk://#diff-a38219f03b97c41ff2b3e3e6fda3171d8deed438c9c1d5f933c30d3dd58fbb32L21-R21)
[[4]](diffhunk://#diff-a38219f03b97c41ff2b3e3e6fda3171d8deed438c9c1d5f933c30d3dd58fbb32L84-R89)
[[5]](diffhunk://#diff-033a32c658da882cbc2420b75ca50850898c3f1e6c722bb2add6522da75c6349L8-R8)
[[6]](diffhunk://#diff-033a32c658da882cbc2420b75ca50850898c3f1e6c722bb2add6522da75c6349L82-R85)
[[7]](diffhunk://#diff-188a97cb6de981d161e466dfc422052b39ac67ec5c4753ef54db7065442ef430L6-R6)
[[8]](diffhunk://#diff-188a97cb6de981d161e466dfc422052b39ac67ec5c4753ef54db7065442ef430L41-R44)
[[9]](diffhunk://#diff-ab22dfefdad25b6f40208fe418538738c29327375fbb37072ba18d098effa330L8-R8)
[[10]](diffhunk://#diff-ab22dfefdad25b6f40208fe418538738c29327375fbb37072ba18d098effa330L64-R64)
[[11]](diffhunk://#diff-f737fd3bdbe5670f34ce3ee6a82c427a5460835c6222b86527b9f3aa6e17a044L7-R7)
[[12]](diffhunk://#diff-f737fd3bdbe5670f34ce3ee6a82c427a5460835c6222b86527b9f3aa6e17a044L25-R25).
* Replaced deprecated `switchMapTo` with `switchMap` in all affected
streams, updating function signatures where necessary
[[1]](diffhunk://#diff-b202dfd3e850f6f8d29a81e0f698f305309a1d524fcb089138c0eed4f0b0e2d0L9-R9)
[[2]](diffhunk://#diff-b202dfd3e850f6f8d29a81e0f698f305309a1d524fcb089138c0eed4f0b0e2d0L170-R170)
[[3]](diffhunk://#diff-b202dfd3e850f6f8d29a81e0f698f305309a1d524fcb089138c0eed4f0b0e2d0L191-R191).
* Replaced deprecated `publishLast`/`refCount` combo with `shareReplay`
for caching HTTP responses
[[1]](diffhunk://#diff-6d1086b6ba6f8165deecbdc80ac9408a311b0b72781c89d3979b225a226f046aL6-R6)
[[2]](diffhunk://#diff-6d1086b6ba6f8165deecbdc80ac9408a311b0b72781c89d3979b225a226f046aL72-R66).
* Updated usages of `pluck` in service methods to `map`, ensuring type
safety and clarity.

**Test and Error Handling Updates:**

* Updated all usages of `throwError(error)` to the RxJS 7+ pattern
`throwError(() => error)` in tests and services for proper error
emission
[[1]](diffhunk://#diff-cb2b54d67fe7a39ef735fb2a985b7202ba8e25b653e456eeed74ada2bfc1ddbaL107-R107)
[[2]](diffhunk://#diff-c0762a9384069a32c029261a27d2ab7ae8bce5eea7850d8188a93f0cd8502341L158-R158)
[[3]](diffhunk://#diff-c0762a9384069a32c029261a27d2ab7ae8bce5eea7850d8188a93f0cd8502341L181-R183)
[[4]](diffhunk://#diff-c0762a9384069a32c029261a27d2ab7ae8bce5eea7850d8188a93f0cd8502341L202-R204)
[[5]](diffhunk://#diff-56b35eae311934a1279fbbf6999050daa4da884729bc6cac65890f20b2e61602L320-R320).

**Testing Utilities Modernization:**

* Replaced deprecated `fakeAsync`/`tick` usage with Jest timer mocks
(`jest.useFakeTimers`, `jest.advanceTimersByTime`, `jest.useRealTimers`)
in component tests for more robust async testing
[[1]](diffhunk://#diff-3bdd1a7f98eb62dd492e069085d19306cc031c98605e1e67f6f9e017494d9ba3L5-L6)
[[2]](diffhunk://#diff-3bdd1a7f98eb62dd492e069085d19306cc031c98605e1e67f6f9e017494d9ba3R62)
[[3]](diffhunk://#diff-3bdd1a7f98eb62dd492e069085d19306cc031c98605e1e67f6f9e017494d9ba3R85)
[[4]](diffhunk://#diff-3bdd1a7f98eb62dd492e069085d19306cc031c98605e1e67f6f9e017494d9ba3L107-R112).

**Documentation:**

* Added `.cursor/plans/rxjs_7_migration_plan_c65e7afc.plan.md` to
document the migration plan and provide an overview of the categories
and scope of changes.

This PR fixes: #33073

Author: nicobytes

core-web/apps/dotcdn/src/app/dotcdn.component.store.ts

@@ -6,7 +6,7 @@ import { inject, Injectable } from '@angular/core';
 
 import { SelectItem } from 'primeng/api';
 
-import { mergeMap, switchMapTo, tap } from 'rxjs/operators';
+import { mergeMap, switchMap, tap } from 'rxjs/operators';
 
 import {
     ChartData,
@@ -167,7 +167,7 @@ export class DotCDNStore extends ComponentStore<DotCDNState> {
         );
 
         return loading$.pipe(
-            switchMapTo(
+            switchMap(() =>
                 this.dotCdnService.purgeCache(urls).pipe(
                     tap(() => {
                         this.dispatchLoading({
@@ -188,7 +188,7 @@ export class DotCDNStore extends ComponentStore<DotCDNState> {
             })
         );
 
-        $loading.pipe(switchMapTo(this.dotCdnService.purgeCacheAll())).subscribe(() => {
+        $loading.pipe(switchMap(() => this.dotCdnService.purgeCacheAll())).subscribe(() => {
             this.dispatchLoading({
                 loadingState: LoadingState.LOADED,
                 loader: Loader.PURGE_PULL_ZONE

core-web/apps/dotcms-ui/src/app/api/services/dot-menu.service.ts

@@ -3,16 +3,7 @@ import { Observable } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { Injectable, inject } from '@angular/core';
 
-import {
-    defaultIfEmpty,
-    filter,
-    find,
-    map,
-    mergeMap,
-    pluck,
-    publishLast,
-    refCount
-} from 'rxjs/operators';
+import { defaultIfEmpty, filter, find, map, mergeMap, shareReplay } from 'rxjs/operators';
 
 import { DotCMSResponse, DotMenu, DotMenuItem } from '@dotcms/dotcms-models';
 
@@ -33,7 +24,7 @@ export class DotMenuService {
     getUrlById(id: string): Observable<string> {
         return this.getMenuItems().pipe(
             filter((res: DotMenuItem) => !res.angular && res.id === id),
-            pluck('url'),
+            map((res) => res?.url),
             defaultIfEmpty('')
         );
     }
@@ -69,9 +60,10 @@ export class DotMenuService {
      */
     loadMenu(force = false): Observable<DotMenu[]> {
         if (!this.menu$ || force) {
-            this.menu$ = this.http
-                .get<DotCMSResponse<DotMenu>>(this.urlMenus)
-                .pipe(publishLast(), refCount(), pluck('entity'));
+            this.menu$ = this.http.get<DotCMSResponse<DotMenu[]>>(this.urlMenus).pipe(
+                shareReplay({ bufferSize: 1, refCount: true }),
+                map((x) => x.entity)
+            );
         }
 
         return this.menu$;

core-web/apps/dotcms-ui/src/app/api/services/dynamic-route-initializer.service.spec.ts

@@ -104,7 +104,7 @@ describe('DynamicRouteInitializerService', () => {
     });
 
     it('should resolve to 0 on error', async () => {
-        (menuService.loadMenu as jest.Mock).mockReturnValue(throwError(new Error('fail')));
+        (menuService.loadMenu as jest.Mock).mockReturnValue(throwError(() => new Error('fail')));
 
         const count = await service.initialize();
 

core-web/apps/dotcms-ui/src/app/app.component.spec.ts

@@ -155,7 +155,7 @@ describe('AppComponent', () => {
 
         it('should use default colors when configuration fails to load', () => {
             const error = new Error('Failed to load configuration');
-            jest.spyOn(dotCmsConfigService, 'getConfig').mockReturnValue(throwError(error));
+            jest.spyOn(dotCmsConfigService, 'getConfig').mockReturnValue(throwError(() => error));
 
             fixture.detectChanges();
 
@@ -178,7 +178,9 @@ describe('AppComponent', () => {
 
         it('should handle configuration error gracefully (unauthenticated user)', () => {
             const httpError = { status: 401, message: 'Unauthorized' };
-            jest.spyOn(dotCmsConfigService, 'getConfig').mockReturnValue(throwError(httpError));
+            jest.spyOn(dotCmsConfigService, 'getConfig').mockReturnValue(
+                throwError(() => httpError)
+            );
 
             fixture.detectChanges();
 
@@ -199,7 +201,7 @@ describe('AppComponent', () => {
 
         it('should always set colors even when configuration fails', () => {
             jest.spyOn(dotCmsConfigService, 'getConfig').mockReturnValue(
-                throwError(new Error('Network error'))
+                throwError(() => new Error('Network error'))
             );
 
             // Mock querySelector to return null (edge case)

core-web/apps/dotcms-ui/src/app/portlets/dot-apps/components/dot-apps-configuration-detail/dot-apps-configuration-detail.component.ts

@@ -3,7 +3,7 @@ import { ActivatedRoute } from '@angular/router';
 
 import { ButtonModule } from 'primeng/button';
 
-import { pluck, take } from 'rxjs/operators';
+import { map, take } from 'rxjs/operators';
 
 import { DotAppsService, DotRouterService } from '@dotcms/data-access';
 import { DotApp, DotAppsSaveData, DotAppsSecret } from '@dotcms/dotcms-models';
@@ -39,13 +39,18 @@ export class DotAppsConfigurationDetailComponent implements OnInit {
     formValid = false;
 
     ngOnInit() {
-        this.route.data.pipe(pluck('data'), take(1)).subscribe((app: DotApp) => {
-            this.apps = app;
-            this.formFields = this.getSecrets(app.sites[0].secrets);
-            this.dynamicVariables = this.transformSecretsToKeyValue(
-                this.getSecrets(app.sites[0].secrets, true)
-            );
-        });
+        this.route.data
+            .pipe(
+                map((x) => x?.data),
+                take(1)
+            )
+            .subscribe((app: DotApp) => {
+                this.apps = app;
+                this.formFields = this.getSecrets(app.sites[0].secrets);
+                this.dynamicVariables = this.transformSecretsToKeyValue(
+                    this.getSecrets(app.sites[0].secrets, true)
+                );
+            });
     }
 
     /**

core-web/apps/dotcms-ui/src/app/portlets/dot-apps/components/dot-apps-configuration/dot-apps-configuration.component.ts

@@ -18,7 +18,7 @@ import { LazyLoadEvent } from 'primeng/api';
 import { ButtonModule } from 'primeng/button';
 import { InputTextModule } from 'primeng/inputtext';
 
-import { debounceTime, pluck, take } from 'rxjs/operators';
+import { debounceTime, map, take } from 'rxjs/operators';
 
 import {
     DotAlertConfirmService,
@@ -81,22 +81,27 @@ export class DotAppsConfigurationComponent implements OnInit, AfterViewInit {
     });
 
     ngOnInit() {
-        this.#route.data.pipe(pluck('data'), take(1)).subscribe((app: DotApp) => {
-            patchState(this.$state, {
-                app: {
-                    ...app,
-                    sites: []
-                }
-            });
+        this.#route.data
+            .pipe(
+                map((x) => x?.data),
+                take(1)
+            )
+            .subscribe((app: DotApp) => {
+                patchState(this.$state, {
+                    app: {
+                        ...app,
+                        sites: []
+                    }
+                });
 
-            // Initialize pagination after app data is available
-            this.paginationService.url = `v1/apps/${app.key}`;
-            this.paginationService.paginationPerPage = this.$paginationPerPage();
-            this.paginationService.sortField = 'name';
-            this.paginationService.setExtraParams('filter', '');
-            this.paginationService.sortOrder = 1;
-            this.loadData();
-        });
+                // Initialize pagination after app data is available
+                this.paginationService.url = `v1/apps/${app.key}`;
+                this.paginationService.paginationPerPage = this.$paginationPerPage();
+                this.paginationService.sortField = 'name';
+                this.paginationService.setExtraParams('filter', '');
+                this.paginationService.sortOrder = 1;
+                this.loadData();
+            });
     }
 
     ngAfterViewInit() {

core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-import-export-dialog/store/dot-apps-import-export-dialog.store.spec.ts

@@ -317,7 +317,7 @@ describe('DotAppsImportExportDialogStore', () => {
         it('should set error on import error', () => {
             spectator.service.openImport();
             dotAppsService.importConfiguration.mockReturnValue(
-                throwError(new Error('Network error'))
+                throwError(() => new Error('Network error'))
             );
 
             spectator.service.importConfiguration({

core-web/apps/dotcms-ui/src/app/portlets/dot-containers/container-list/store/dot-container-list.store.ts

@@ -5,7 +5,7 @@ import { ActivatedRoute } from '@angular/router';
 
 import { MenuItem } from 'primeng/api';
 
-import { pluck, switchMap, take, tap } from 'rxjs/operators';
+import { map, switchMap, take, tap } from 'rxjs/operators';
 
 import {
     DotAlertConfirmService,
@@ -79,7 +79,10 @@ export class DotContainerListStore extends ComponentStore<DotContainerListState>
 
                     this.paginatorService.setExtraParams('host', identifier);
 
-                    return this.route.data.pipe(pluck('dotContainerListResolverData'), take(1));
+                    return this.route.data.pipe(
+                        map((x) => x?.dotContainerListResolverData),
+                        take(1)
+                    );
                 })
             )
             .subscribe(([isEnterprise, hasEnvironments]: [boolean, boolean]) => {

core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-create.component.ts

@@ -3,7 +3,7 @@ import { ActivatedRoute } from '@angular/router';
 
 import { TabsModule } from 'primeng/tabs';
 
-import { pluck, take } from 'rxjs/operators';
+import { map, take } from 'rxjs/operators';
 
 import { DotRouterService } from '@dotcms/data-access';
 import { DotContainerEntity } from '@dotcms/dotcms-models';
@@ -38,7 +38,10 @@ export class DotContainerCreateComponent implements OnInit {
 
     ngOnInit() {
         this.activatedRoute.data
-            .pipe(pluck('container'), take(1))
+            .pipe(
+                map((x) => x?.container),
+                take(1)
+            )
             .subscribe((container: DotContainerEntity) => {
                 if (container?.container) this.containerId = container.container.identifier;
                 else this.dotRouterService.goToCreateContainer();

core-web/apps/dotcms-ui/src/app/portlets/dot-containers/dot-container-create/dot-container-properties/store/dot-container-properties.store.ts

@@ -5,7 +5,7 @@ import { HttpErrorResponse } from '@angular/common/http';
 import { Injectable, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
-import { catchError, filter, pluck, switchMap, take, tap } from 'rxjs/operators';
+import { catchError, filter, map, switchMap, take, tap } from 'rxjs/operators';
 
 import {
     DotContentTypeService,
@@ -61,7 +61,7 @@ export class DotContainerPropertiesStore extends ComponentStore<DotContainerProp
         });
         this.activatedRoute.data
             .pipe(
-                pluck('container'),
+                map((x) => x?.container),
                 take(1),
                 filter((containerEntity) => !!containerEntity)
             )