feat(websockets): migrate WebSocket stack to data-access and react to site CRUD events

core-web/apps/dotcdn/src/app/app.module.ts

@@ -15,9 +15,6 @@ import { TextareaModule } from 'primeng/textarea';
 
 import {
     DotcmsConfigService,
-    DotcmsEventsService,
-    DotEventsSocket,
-    DotEventsSocketURL,
     LoggerService,
     LoginService,
     SiteService,
@@ -28,13 +25,6 @@ import { DotIconComponent, DotSpinnerComponent } from '@dotcms/ui';
 import { AppComponent } from './app.component';
 import { DotCDNStore } from './dotcdn.component.store';
 
-const dotEventSocketURLFactory = () => {
-    return new DotEventsSocketURL(
-        `${window.location.hostname}:${window.location.port}/api/ws/v1/system/events`,
-        window.location.protocol === 'https:'
-    );
-};
-
 @NgModule({
     declarations: [AppComponent],
     imports: [
@@ -59,9 +49,6 @@ const dotEventSocketURLFactory = () => {
         StringUtils,
         SiteService,
         LoginService,
-        DotEventsSocket,
-        DotcmsEventsService,
-        { provide: DotEventsSocketURL, useFactory: dotEventSocketURLFactory },
         DotcmsConfigService,
         DotCDNStore
     ],

core-web/apps/dotcms-ui/src/app/api/services/dot-custom-event-handler/dot-custom-event-handler.service.spec.ts

@@ -33,9 +33,6 @@ import {
 import {
     ApiRoot,
     DotcmsConfigService,
-    DotcmsEventsService,
-    DotEventsSocket,
-    DotEventsSocketURL,
     DotPushPublishDialogService,
     LoggerService,
     LoginService,
@@ -52,7 +49,7 @@ import {
 
 import { DotCustomEventHandlerService } from './dot-custom-event-handler.service';
 
-import { dotEventSocketURLFactory, MockDotUiColorsService } from '../../../test/dot-test-bed';
+import { MockDotUiColorsService } from '../../../test/dot-test-bed';
 import { DotContentletEditorService } from '../../../view/components/dot-contentlet-editor/services/dot-contentlet-editor.service';
 import { DotDownloadBundleDialogService } from '../dot-download-bundle-dialog/dot-download-bundle-dialog.service';
 import { DotMenuService } from '../dot-menu.service';
@@ -94,10 +91,7 @@ describe('DotCustomEventHandlerService', () => {
                 { provide: DotFormatDateService, useClass: DotFormatDateServiceMock },
                 UserModel,
                 StringUtils,
-                DotcmsEventsService,
                 LoggerService,
-                DotEventsSocket,
-                { provide: DotEventsSocketURL, useFactory: dotEventSocketURLFactory },
                 DotcmsConfigService,
                 LoggerService,
                 DotCurrentUserService,

core-web/apps/dotcms-ui/src/app/api/services/dot-site-navigation/dot-site-navigation.effect.spec.ts

@@ -0,0 +1,53 @@
+import {
+    createServiceFactory,
+    mockProvider,
+    SpectatorService,
+    SpyObject
+} from '@ngneat/spectator/jest';
+import { Subject } from 'rxjs';
+
+import { DotRouterService } from '@dotcms/data-access';
+import { DotSite } from '@dotcms/dotcms-models';
+import { GlobalStore } from '@dotcms/store';
+import { MockDotRouterService, mockSites } from '@dotcms/utils-testing';
+
+import { DotSiteNavigationEffect } from './dot-site-navigation.effect';
+
+describe('DotSiteNavigationEffect', () => {
+    let spectator: SpectatorService<DotSiteNavigationEffect>;
+    let dotRouterService: SpyObject<DotRouterService>;
+    let switchSiteSubject: Subject<DotSite>;
+
+    const createService = createServiceFactory({
+        service: DotSiteNavigationEffect,
+        providers: [{ provide: DotRouterService, useClass: MockDotRouterService }]
+    });
+
+    beforeEach(() => {
+        // switchSiteSubject must be assigned before createService() so the effect
+        // constructor receives the correct observable when it subscribes on instantiation.
+        switchSiteSubject = new Subject<DotSite>();
+
+        spectator = createService({
+            providers: [
+                mockProvider(GlobalStore, {
+                    switchSiteEvent$: jest.fn().mockReturnValue(switchSiteSubject.asObservable())
+                })
+            ]
+        });
+
+        dotRouterService = spectator.inject(DotRouterService);
+    });
+
+    it('should navigate to site browser when SWITCH_SITE fires on edit page', () => {
+        jest.spyOn(dotRouterService, 'isEditPage').mockReturnValue(true);
+        switchSiteSubject.next(mockSites[0] as unknown as DotSite);
+        expect(dotRouterService.goToSiteBrowser).toHaveBeenCalled();
+    });
+
+    it('should NOT navigate when SWITCH_SITE fires on a non-edit page', () => {
+        jest.spyOn(dotRouterService, 'isEditPage').mockReturnValue(false);
+        switchSiteSubject.next(mockSites[0] as unknown as DotSite);
+        expect(dotRouterService.goToSiteBrowser).not.toHaveBeenCalled();
+    });
+});

core-web/apps/dotcms-ui/src/app/api/services/dot-site-navigation/dot-site-navigation.effect.ts

@@ -0,0 +1,28 @@
+import { Injectable, inject } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+import { DotRouterService } from '@dotcms/data-access';
+import { GlobalStore } from '@dotcms/store';
+
+/**
+ * App-level effect that navigates away from the edit page whenever
+ * another user/tab switches the current site via WebSocket.
+ *
+ * Provided eagerly in app.config.ts so it is active for the full
+ * application lifetime without being tied to any particular component.
+ */
+@Injectable({ providedIn: 'root' })
+export class DotSiteNavigationEffect {
+    readonly #dotRouterService = inject(DotRouterService);
+
+    constructor() {
+        inject(GlobalStore)
+            .switchSiteEvent$()
+            .pipe(takeUntilDestroyed())
+            .subscribe(() => {
+                if (this.#dotRouterService.isEditPage()) {
+                    this.#dotRouterService.goToSiteBrowser();
+                }
+            });
+    }
+}

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

@@ -1,4 +1,4 @@
-import { of } from 'rxjs';
+import { of, Subject } from 'rxjs';
 
 import { CommonModule } from '@angular/common';
 import { HttpClient, provideHttpClient } from '@angular/common/http';
@@ -36,17 +36,20 @@ import {
 } from '@dotcms/data-access';
 import {
     DotcmsConfigService,
-    DotcmsEventsService,
-    DotEventsSocket,
-    DotEventsSocketURL,
     DotPushPublishDialogService,
     LoggerService,
     LoginService,
     mockSites,
     SiteService,
     StringUtils
 } from '@dotcms/dotcms-js';
-import { CONTAINER_SOURCE, DotActionBulkResult, DotContainer } from '@dotcms/dotcms-models';
+import {
+    CONTAINER_SOURCE,
+    DotActionBulkResult,
+    DotContainer,
+    DotSite
+} from '@dotcms/dotcms-models';
+import { GlobalStore } from '@dotcms/store';
 import {
     DotActionMenuButtonComponent,
     DotAddToBundleComponent,
@@ -67,7 +70,6 @@ import { ContainerListComponent } from './container-list.component';
 import { DotContainerListStore } from './store/dot-container-list.store';
 
 import { DotContainersService } from '../../../api/services/dot-containers/dot-containers.service';
-import { dotEventSocketURLFactory } from '../../../test/dot-test-bed';
 import { DotEmptyStateComponent } from '../../../view/components/_common/dot-empty-state/dot-empty-state.component';
 import { DotContentTypeSelectorComponent } from '../../../view/components/dot-content-type-selector/dot-content-type-selector.component';
 import { ActionHeaderComponent } from '../../../view/components/dot-listing-data-table/action-header/action-header.component';
@@ -226,10 +228,13 @@ describe('ContainerListComponent', () => {
     let siteService: SiteServiceMock;
     let store: DotContainerListStore;
     let paginatorService: PaginatorService;
+    let switchSiteSubject: Subject<DotSite>;
 
     const messageServiceMock = new MockDotMessageService(messages);
 
     beforeEach(async () => {
+        switchSiteSubject = new Subject<DotSite>();
+
         await TestBed.configureTestingModule({
             declarations: [],
             imports: [
@@ -258,10 +263,8 @@ describe('ContainerListComponent', () => {
                 DialogService,
                 DotAlertConfirmService,
                 DotcmsConfigService,
-                DotcmsEventsService,
                 DotContainerListStore,
                 DotContainersService,
-                DotEventsSocket,
                 DotHttpErrorManagerService,
                 DotSiteBrowserService,
                 HttpClient,
@@ -290,11 +293,16 @@ describe('ContainerListComponent', () => {
                     }
                 },
                 { provide: DotMessageService, useValue: messageServiceMock },
-                { provide: DotEventsSocketURL, useFactory: dotEventSocketURLFactory },
                 { provide: DotFormatDateService, useClass: DotFormatDateServiceMock },
                 {
                     provide: DotMessageDisplayService,
                     useClass: DotMessageDisplayServiceMock
+                },
+                {
+                    provide: GlobalStore,
+                    useValue: {
+                        switchSiteEvent$: () => switchSiteSubject.asObservable()
+                    }
                 }
             ],
             schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
@@ -515,16 +523,17 @@ describe('ContainerListComponent', () => {
 
         it("should fetch containers when site is changed and it's not the first time", () => {
             jest.spyOn(paginatorService, 'setExtraParams');
+            jest.spyOn(paginatorService, 'getFirstPage').mockReturnValue(of(containersMock));
 
-            siteService.setFakeCurrentSite(mockSites[1]);
+            switchSiteSubject.next(mockSites[1] as unknown as DotSite);
 
             fixture.detectChanges();
 
             expect(paginatorService.setExtraParams).toHaveBeenCalledWith(
                 'host',
                 mockSites[1].identifier
             );
-            expect(paginatorService.get).toHaveBeenCalled();
+            expect(paginatorService.getFirstPage).toHaveBeenCalled();
         });
     });
 

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

@@ -25,7 +25,6 @@ import {
     DotMessageService,
     DotSiteBrowserService
 } from '@dotcms/data-access';
-import { SiteService } from '@dotcms/dotcms-js';
 import {
     CONTAINER_SOURCE,
     DotActionBulkResult,
@@ -36,6 +35,7 @@ import {
     DotMessageSeverity,
     DotMessageType
 } from '@dotcms/dotcms-models';
+import { GlobalStore } from '@dotcms/store';
 import {
     DotActionMenuButtonComponent,
     DotAddToBundleComponent,
@@ -84,7 +84,7 @@ export class ContainerListComponent implements OnDestroy {
     private dotMessageService = inject(DotMessageService);
     private dotMessageDisplayService = inject(DotMessageDisplayService);
     private dialogService = inject(DialogService);
-    private siteService = inject(SiteService);
+    readonly #globalStore = inject(GlobalStore);
 
     @ViewChild('actionsMenu')
     actionsMenu: Menu;
@@ -106,9 +106,10 @@ export class ContainerListComponent implements OnDestroy {
             this.selectedContainers = [];
         });
 
-        this.siteService.switchSite$.subscribe(({ identifier }) =>
-            this.#store.getContainersByHost(identifier)
-        );
+        this.#globalStore
+            .switchSiteEvent$()
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(({ identifier }) => this.#store.getContainersByHost(identifier));
     }
 
     ngOnDestroy(): void {

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

@@ -31,15 +31,7 @@ import {
     DotSiteBrowserService,
     DotGlobalMessageService
 } from '@dotcms/data-access';
-import {
-    DotcmsConfigService,
-    DotcmsEventsService,
-    DotEventsSocket,
-    DotEventsSocketURL,
-    LoggerService,
-    LoginService,
-    StringUtils
-} from '@dotcms/dotcms-js';
+import { DotcmsConfigService, LoggerService, LoginService, StringUtils } from '@dotcms/dotcms-js';
 import { DotCMSContentType } from '@dotcms/dotcms-models';
 import { DotMessagePipe } from '@dotcms/ui';
 import {
@@ -52,8 +44,6 @@ import { DotAddVariableComponent } from './dot-add-variable.component';
 import { FilteredFieldTypes } from './dot-add-variable.models';
 import { DOT_CONTENT_MAP, DotFieldsService } from './services/dot-fields.service';
 
-import { dotEventSocketURLFactory } from '../../../../../test/dot-test-bed';
-
 @Component({
     selector: 'dot-form-dialog',
     template: '<ng-content></ng-content>',
@@ -227,13 +217,10 @@ describe('DotAddVariableComponent', () => {
                         }
                     }
                 },
-                { provide: DotEventsSocketURL, useFactory: dotEventSocketURLFactory },
                 StringUtils,
                 DotHttpErrorManagerService,
                 DotAlertConfirmService,
                 ConfirmationService,
-                DotcmsEventsService,
-                DotEventsSocket,
                 DotcmsConfigService,
                 {
                     provide: DotMessageDisplayService,

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

@@ -17,20 +17,12 @@ import {
     DotMessageDisplayService,
     DotRouterService
 } from '@dotcms/data-access';
-import {
-    DotcmsEventsService,
-    DotEventsSocket,
-    DotEventsSocketURL,
-    LoggerService,
-    StringUtils
-} from '@dotcms/dotcms-js';
+import { LoggerService, StringUtils } from '@dotcms/dotcms-js';
 import { CONTAINER_SOURCE } from '@dotcms/dotcms-models';
 import { DotMessagePipe } from '@dotcms/ui';
 
 import { DotContainerCreateComponent } from './dot-container-create.component';
 
-import { dotEventSocketURLFactory } from '../../../test/dot-test-bed';
-
 @Pipe({
     name: 'dm'
 })
@@ -91,12 +83,9 @@ describe('ContainerCreateComponent', () => {
                 DotGlobalMessageService,
                 DotHttpErrorManagerService,
                 DotMessageDisplayService,
-                DotcmsEventsService,
-                DotEventsSocket,
                 LoggerService,
                 StringUtils,
-                DotContentTypeService,
-                { provide: DotEventsSocketURL, useFactory: dotEventSocketURLFactory }
+                DotContentTypeService
             ]
         })
             .overrideComponent(DotContainerCreateComponent, {