chore(uve): Update state management to NgRx Signal Store #28947 (#29239)

# Proposed Changes - Rewrite and apply new architecture to the Old Store to make it work with the new Signal Store and Custom Features. Use Computed Signals as a Reflection of the UI and State and Methods as source of information. - Centralize reusable code - Minimize the logic responsibility of the components to make them more simple and more readable - Replace all `ngFor` `ngIf` and `ngSwitch` for the new angular syntax - Add missing `themeId` on layout payload - Add missing functionality to fetch personas on page navigation - Add validation to replace urls from `/` to `index` to maintain consistency - Remove not natural reloads, extra calls to functions and anti-patterns - Fix inconsistencies across shared logic - Remove logic from the templates - Overall cleaning of the code to minimize tech debt - Fix out of place message for No Contentlets in Palette - Enhance overall perfomance of the tool - Fix internal navigation for Traditional Pages (VTL) - Enhance and minimize logic for Inline Editing (It was colliding with the navigation for Traditional Pages) - Add `SCROLLING` state to the Editor - Remove not necessary `MODE` from the editor, since now our store is a reflection of the UI - Separate `status` of the UVE from `state` of the editor to enhance reloads and the natural cycle of the tool - Remove all calls to `queryParams` from the router, since params now live in the store and are in sync with the url - Remove all references of old `EmaStore` - Remove not needed `Enums`, `Types`, `Interfaces` and `Mocks`
dotCMS · Jul 27, 2024 · 0f53ef2 · 0f53ef2
1 parent e452f3d
commit 0f53ef2
Show file tree

Hide file tree

Showing 69 changed files with 5,582 additions and 5,692 deletions.
diff --git a/...portlets/edit-ema/portlet/src/lib/components/dot-ema-dialog/dot-ema-dialog.component.html b/...portlets/edit-ema/portlet/src/lib/components/dot-ema-dialog/dot-ema-dialog.component.html
@@ -11,32 +11,32 @@
     data-testId="dialog"
     styleClass="edit-ema-dialog"
     (onHide)="onHide()">
-    <ng-container [ngSwitch]="ds.type">
-        <dot-ema-form-selector
-            *ngSwitchCase="'form'"
-            (selected)="onFormSelected($event)"
-            data-testId="form-selector" />
-
-        <ng-container *ngSwitchCase="'content'">
-            <iframe
-                *ngIf="ds.url"
-                (load)="onIframeLoad()"
-                [style]="{
-                    border: 'none',
-                    height: ds.status !== dialogStatus.INIT ? '0' : null
-                }"
-                [src]="ds.url | safeUrl"
-                #iframe
-                title="dialog"
-                data-testId="dialog-iframe"
-                width="100%"
-                height="100%"></iframe>
-            <dot-spinner
-                *ngIf="ds.status === dialogStatus.LOADING"
-                [ngStyle]="{ position: 'absolute', top: '50%' }"
-                data-testId="spinner"></dot-spinner>
-        </ng-container>
-    </ng-container>
+    @switch (ds.type) {
+        @case ('form') {
+            <dot-ema-form-selector
+                (selected)="onFormSelected($event)"
+                data-testId="form-selector" />
+        }
+        @case ('content') {
+            @if (ds.url) {
+                <iframe
+                    (load)="onIframeLoad()"
+                    [style]="{
+                        border: 'none',
+                        height: ds.status !== dialogStatus.INIT ? '0' : null
+                    }"
+                    [src]="ds.url | safeUrl"
+                    #iframe
+                    title="dialog"
+                    data-testId="dialog-iframe"
+                    width="100%"
+                    height="100%"></iframe>
+            }
+            @if (ds.status === dialogStatus.LOADING) {
+                <dot-spinner class="absolute top-50" data-testId="spinner"></dot-spinner>
+            }
+        }
+    }
 
     <p-dialog
         (visibleChange)="closeCompareDialog()"

diff --git a/...tlets/edit-ema/portlet/src/lib/components/dot-ema-dialog/dot-ema-dialog.component.spec.ts b/...tlets/edit-ema/portlet/src/lib/components/dot-ema-dialog/dot-ema-dialog.component.spec.ts
@@ -38,8 +38,8 @@ import { DotEmaDialogStore } from './store/dot-ema-dialog.store';
 
 import { DotActionUrlService } from '../../services/dot-action-url/dot-action-url.service';
 import { DotEmaWorkflowActionsService } from '../../services/dot-ema-workflow-actions/dot-ema-workflow-actions.service';
-import { PAYLOAD_MOCK } from '../../shared/consts';
 import { NG_CUSTOM_EVENTS } from '../../shared/enums';
+import { PAYLOAD_MOCK } from '../../shared/mocks';
 import { DotPage } from '../../shared/models';
 
 describe('DotEmaDialogComponent', () => {

diff --git a/...s/portlets/edit-ema/portlet/src/lib/components/dot-ema-dialog/dot-ema-dialog.component.ts b/...s/portlets/edit-ema/portlet/src/lib/components/dot-ema-dialog/dot-ema-dialog.component.ts
@@ -1,6 +1,5 @@
 import { fromEvent } from 'rxjs';
 
-import { NgIf, NgStyle, NgSwitch, NgSwitchCase } from '@angular/common';
 import {
     ChangeDetectionStrategy,
     Component,
@@ -48,10 +47,6 @@ import { EmaFormSelectorComponent } from '../ema-form-selector/ema-form-selector
     templateUrl: './dot-ema-dialog.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     imports: [
-        NgIf,
-        NgSwitch,
-        NgSwitchCase,
-        NgStyle,
         SafeUrlPipe,
         EmaFormSelectorComponent,
         DialogModule,

diff --git a/...ets/edit-ema/portlet/src/lib/components/dot-ema-dialog/store/dot-ema-dialog.store.spec.ts b/...ets/edit-ema/portlet/src/lib/components/dot-ema-dialog/store/dot-ema-dialog.store.spec.ts
@@ -8,7 +8,8 @@ import { MockDotMessageService } from '@dotcms/utils-testing';
 import { DialogStatus, DotEmaDialogStore } from './dot-ema-dialog.store';
 
 import { DotActionUrlService } from '../../../services/dot-action-url/dot-action-url.service';
-import { LAYOUT_URL, PAYLOAD_MOCK } from '../../../shared/consts';
+import { LAYOUT_URL } from '../../../shared/consts';
+import { PAYLOAD_MOCK } from '../../../shared/mocks';
 import { DotPage } from '../../../shared/models';
 
 describe('DotEmaDialogStoreService', () => {

diff --git a/...b/dot-ema-shell/components/edit-ema-navigation-bar/edit-ema-navigation-bar.component.html b/...b/dot-ema-shell/components/edit-ema-navigation-bar/edit-ema-navigation-bar.component.html
@@ -1,9 +1,9 @@
 <nav class="edit-ema-nav-bar">
-    <ng-container *ngFor="let item of items">
+    @for (item of items; track $index) {
         <ng-container
-            [ngTemplateOutlet]="item.action ? button : anchor"
+            [ngTemplateOutlet]="!item.href?.length ? button : anchor"
             [ngTemplateOutletContext]="{ item: item }"></ng-container>
-    </ng-container>
+    }
 </nav>
 
 <ng-template #anchor let-item="item">
@@ -28,7 +28,7 @@
 
 <ng-template #button let-item="item">
     <button
-        (click)="item.isDisabled ? null : item?.action()"
+        (click)="item.isDisabled ? null : itemAction(item)"
         [ngClass]="{ 'edit-ema-nav-bar__item--disabled': item.isDisabled }"
         [disabled]="item.isDisabled"
         class="edit-ema-nav-bar__item edit-ema-nav-bar__item--button"

diff --git a/...ot-ema-shell/components/edit-ema-navigation-bar/edit-ema-navigation-bar.component.spec.ts b/...ot-ema-shell/components/edit-ema-navigation-bar/edit-ema-navigation-bar.component.spec.ts
@@ -20,7 +20,6 @@ const messageServiceMock = new MockDotMessageService(messages);
 
 describe('EditEmaNavigationBarComponent', () => {
     let spectator: SpectatorRouting<EditEmaNavigationBarComponent>;
-    const mockedAction = jest.fn();
 
     const createComponent = createRoutingFactory({
         component: EditEmaNavigationBarComponent,
@@ -53,28 +52,32 @@ describe('EditEmaNavigationBarComponent', () => {
                     {
                         icon: 'pi-file',
                         label: 'editema.editor.navbar.content',
+                        id: 'content',
                         href: 'content'
                     },
                     {
                         icon: 'pi-table',
                         label: 'editema.editor.navbar.layout',
                         href: 'layout',
+                        id: 'layout',
                         isDisabled: true
                     },
                     {
                         icon: 'pi-sliders-h',
                         label: 'editema.editor.navbar.rules',
-                        href: 'rules'
+                        href: 'rules',
+                        id: 'rules'
                     },
                     {
                         iconURL: 'assets/images/experiments.svg',
                         label: 'editema.editor.navbar.experiments',
-                        href: 'experiments'
+                        href: 'experiments',
+                        id: 'experiments'
                     },
                     {
                         icon: 'pi-sliders-h',
                         label: 'editema.editor.navbar.action',
-                        action: mockedAction
+                        id: 'action'
                     }
                 ]
             }
@@ -105,12 +108,13 @@ describe('EditEmaNavigationBarComponent', () => {
                 expect(actionLink).not.toBeNull();
             });
 
-            it("should trigger mockedAction on clicking last item 'Action'", () => {
+            it("should emit action on clicking last item 'Action'", () => {
                 const actionLink = spectator.query(byText('Action'));
+                const mockedAction = jest.spyOn(spectator.component.action, 'emit');
 
                 spectator.click(actionLink);
 
-                expect(mockedAction).toHaveBeenCalled();
+                expect(mockedAction).toHaveBeenCalledWith('action');
             });
 
             describe('NavBar with disabled', () => {

diff --git a/...lib/dot-ema-shell/components/edit-ema-navigation-bar/edit-ema-navigation-bar.component.ts b/...lib/dot-ema-shell/components/edit-ema-navigation-bar/edit-ema-navigation-bar.component.ts
@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 import { TooltipModule } from 'primeng/tooltip';
@@ -16,5 +16,29 @@ import { NavigationBarItem } from '../../../shared/models';
     imports: [CommonModule, RouterModule, DotMessagePipe, TooltipModule]
 })
 export class EditEmaNavigationBarComponent {
+    /**
+     * List of items to display on the navigation bar
+     *
+     * @type {NavigationBarItem[]}
+     * @memberof EditEmaNavigationBarComponent
+     */
     @Input() items: NavigationBarItem[];
+
+    /**
+     * Emits the id of the clicked item
+     *
+     * @type {EventEmitter<string>}
+     * @memberof EditEmaNavigationBarComponent
+     */
+    @Output() action: EventEmitter<string> = new EventEmitter();
+
+    /**
+     * Handle the click event on the item
+     *
+     * @param {NavigationBarItem} item
+     * @memberof EditEmaNavigationBarComponent
+     */
+    itemAction(item: NavigationBarItem): void {
+        this.action.emit(item.id);
+    }
 }
diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.html b/core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.html
@@ -1,23 +1,20 @@
-<ng-container *ngIf="shellProperties$ | async as sp">
-    <ng-container *ngIf="sp.canRead; else error">
-        <router-outlet (activate)="onActivateRoute($event)"></router-outlet>
-        <dot-edit-ema-navigation-bar
-            [items]="sp.items"
-            data-testId="ema-nav-bar"></dot-edit-ema-navigation-bar>
-        <p-toast position="top-center" data-testId="ema-toast"></p-toast>
-        <dot-page-tools-seo
-            [currentPageUrlParams]="sp.seoProperties"
-            #pageTools></dot-page-tools-seo>
-    </ng-container>
-
-    <ng-template #error>
-        <ng-container [ngSwitch]="sp.error">
-            <dot-info-page *ngSwitchCase="403" [info]="EMA_INFO_PAGES.ACCESS_DENIED" />
-            <dot-info-page *ngSwitchCase="404" [info]="EMA_INFO_PAGES.NOT_FOUND" />
-            <dot-not-license *ngSwitchCase="401" />
-        </ng-container>
-    </ng-template>
-</ng-container>
+@if ($shellProps()?.canRead) {
+    <router-outlet (activate)="onActivateRoute($event)"></router-outlet>
+    <dot-edit-ema-navigation-bar
+        [items]="$shellProps().items"
+        (action)="handleItemAction($event)"
+        data-testId="ema-nav-bar"></dot-edit-ema-navigation-bar>
+    <p-toast position="top-center" data-testId="ema-toast"></p-toast>
+    <dot-page-tools-seo
+        [currentPageUrlParams]="$shellProps().seoParams"
+        #pageTools></dot-page-tools-seo>
+} @else {
+    @if ($shellProps().error?.code === 401) {
+        <dot-not-license />
+    } @else if ($shellProps()?.error?.pageInfo) {
+        <dot-info-page [info]="$shellProps().error.pageInfo" />
+    }
+}
 
 <dot-edit-ema-dialog
     (action)="handleNgEvent($event)"