Merge branch 'master' into issue-28259-sdk-deployment-automation

core-web/README.MD

@@ -46,4 +46,3 @@ Use `nx affected:test` to execute the unit tests affected by recent changes.
 ### Understanding Your Workspace
 
 Run `nx dep-graph` to see a diagram of your projects' dependencies. This will help you better understand the structure and relationships in your monorepo.
-

core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-configuration-detail/dot-apps-configuration-detail-form/dot-apps-configuration-detail-form.component.html

@@ -3,8 +3,8 @@
         <dot-icon
             *ngIf="field.warnings && field.warnings.length"
             name="warning"
-            pTooltip="{{ field.warnings.length ? field.warnings.join('. ') : '' }}"
-            size="18"></dot-icon>
+            [pTooltip]="field.warnings.length ? field.warnings.join('. ') : ''"
+            size="18" />
     </ng-template>
 
     <ng-template #labelField let-field="field">
@@ -77,7 +77,7 @@
                     [ngClass]="{
                         required: field.required
                     }"
-                    [options]="field.options"></p-dropdown>
+                    [options]="field.options" />
                 <span class="p-field-hint">
                     <markdown>{{ field.hint }}</markdown>
                 </span>

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

@@ -128,7 +128,7 @@ describe('DotAppsCardComponent', () => {
             expect(warningIcon).toBeTruthy();
             expect(warningIcon.attributes['name']).toBe('warning');
             expect(warningIcon.attributes['size']).toBe('18');
-            expect(warningIcon.attributes['ng-reflect-text']).toBe(
+            expect(warningIcon.attributes['ng-reflect-content']).toBe(
                 `${component.app.sitesWithWarnings} ${messageServiceMock.get(
                     'apps.invalid.configurations'
                 )}`

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

@@ -9,7 +9,7 @@ import { map, take } from 'rxjs/operators';
 
 import { DotCategoriesService } from '@dotcms/app/api/services/dot-categories/dot-categories.service';
 import { DotMessageService, OrderDirection } from '@dotcms/data-access';
-import { DotActionMenuItem, DotCategory } from '@dotcms/dotcms-models';
+import { DotActionMenuItem, DotCategory, DotMenuItemCommandEvent } from '@dotcms/dotcms-models';
 import { DataTableColumn } from '@models/data-table';
 
 export interface DotCategoriesListState {
@@ -188,7 +188,7 @@ export class DotCategoriesListStore extends ComponentStore<DotCategoriesListStat
             {
                 menuItem: {
                     label: this.dotMessageService.get('View Children'),
-                    command: (event) => {
+                    command: (event: DotMenuItemCommandEvent) => {
                         this.getChildrenCategories({
                             sortOrder: 1,
                             filters: {

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

@@ -1,3 +1,4 @@
+import { createFakeEvent } from '@ngneat/spectator';
 import { of } from 'rxjs';
 
 import { CommonModule } from '@angular/common';
@@ -6,6 +7,7 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { Component, CUSTOM_ELEMENTS_SCHEMA, EventEmitter, Input, Output } from '@angular/core';
 import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ActivatedRoute } from '@angular/router';
 
 import { ConfirmationService, SelectItem } from 'primeng/api';
@@ -294,7 +296,8 @@ describe('ContainerListComponent', () => {
                 HttpClientTestingModule,
                 InputTextModule,
                 MenuModule,
-                TableModule
+                TableModule,
+                BrowserAnimationsModule
             ],
             schemas: [CUSTOM_ELEMENTS_SCHEMA]
         }).compileComponents();
@@ -388,7 +391,9 @@ describe('ContainerListComponent', () => {
 
             comp.handleActionMenuOpen({} as MouseEvent);
 
-            menu.model[0].command();
+            menu.model[0].command({
+                originalEvent: createFakeEvent('click')
+            });
             expect(dotContainersService.publish).toHaveBeenCalledWith([
                 '123Published',
                 '123Unpublish',
@@ -464,7 +469,7 @@ describe('ContainerListComponent', () => {
         it('should fetch containers with offset when table emits onPage', () => {
             spyOn(store, 'getContainersWithOffset');
 
-            table.onPage.emit({ first: 10 });
+            table.onPage.emit({ first: 10, rows: 10 });
 
             expect(store.getContainersWithOffset).toHaveBeenCalledWith(10);
         });

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

@@ -1,22 +1,26 @@
-<p-dataView *ngIf="vm$ | async as vm" [value]="vm.fields" layout="list">
-    <ng-template let-field pTemplate="listItem">
-        <div class="dot-add-variable-list__item">
-            <div class="item__info">
-                <h3 [attr.data-testId]="'h3' + field.variable" class="info__title">
-                    {{ field?.name }}
-                </h3>
-                <small class="info__label">
-                    {{ field?.fieldTypeLabel }}
-                </small>
-            </div>
-            <div class="item__action">
-                <button
-                    (click)="addCustomCode(field)"
-                    [attr.data-testId]="field.variable"
-                    [label]="'Add' | dm"
-                    class="p-button-outlined p-button-primary p-button-sm"
-                    pButton></button>
-            </div>
-        </div>
-    </ng-template>
-</p-dataView>
+@if (vm$ | async; as vm) {
+    <p-dataView [value]="vm.fields" layout="list">
+        <ng-template pTemplate="list" let-data>
+            @for (field of data; track $index) {
+                <div class="dot-add-variable-list__item">
+                    <div class="item__info">
+                        <h3 [attr.data-testId]="'h3' + field.variable" class="info__title">
+                            {{ field?.name }}
+                        </h3>
+                        <small class="info__label">
+                            {{ field?.fieldTypeLabel }}
+                        </small>
+                    </div>
+                    <div class="item__action">
+                        <button
+                            (click)="addCustomCode(field)"
+                            [attr.data-testId]="field.variable"
+                            [label]="'Add' | dm"
+                            class="p-button-outlined p-button-primary p-button-sm"
+                            pButton></button>
+                    </div>
+                </div>
+            }
+        </ng-template>
+    </p-dataView>
+}

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

@@ -1,3 +1,4 @@
+import { createFakeEvent } from '@ngneat/spectator';
 import { of } from 'rxjs';
 
 import { HttpClientTestingModule } from '@angular/common/http/testing';
@@ -247,7 +248,7 @@ describe('DotContentEditorComponent', () => {
             });
 
             it('should have add content type', fakeAsync(() => {
-                menu.model[0].command();
+                menu.model[0].command({ originalEvent: createFakeEvent('click') });
                 hostFixture.detectChanges();
                 const contentTypes = de.queryAll(By.css('p-tabpanel'));
                 const code = de.query(By.css(`[data-testid="${mockContentTypes[0].id}"]`));
@@ -277,8 +278,8 @@ describe('DotContentEditorComponent', () => {
             }));
 
             xit('should have remove content type and focus on another content type', fakeAsync(() => {
-                menu.model[0].command();
-                menu.model[1].command();
+                menu.model[0].command({ originalEvent: createFakeEvent('click') });
+                menu.model[1].command({ originalEvent: createFakeEvent('click') });
                 hostFixture.detectChanges();
                 const code = de.query(By.css(`[data-testid="${mockContentTypes[0].id}"]`));
                 code.triggerEventHandler('monacoInit', {
@@ -313,8 +314,8 @@ describe('DotContentEditorComponent', () => {
             }));
 
             it('should have select content type and focus on field', fakeAsync(() => {
-                menu.model[0].command();
-                menu.model[1].command();
+                menu.model[0].command({ originalEvent: createFakeEvent('click') });
+                menu.model[1].command({ originalEvent: createFakeEvent('click') });
                 hostFixture.detectChanges();
                 const code = de.query(By.css(`[data-testid="${mockContentTypes[0].id}"]`));
                 code.triggerEventHandler('monacoInit', {

core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-palette/dot-palette-contentlets/dot-palette-contentlets.component.spec.ts

@@ -183,7 +183,7 @@ describe('DotPaletteContentletsComponent', () => {
         expect(paginatorContainer.componentInstance.rows).toBe(25);
         expect(paginatorContainer.componentInstance.totalRecords).toBe(30);
         expect(paginatorContainer.componentInstance.showFirstLastIcon).toBe(false);
-        expect(paginatorContainer.componentInstance.pageLinkSize).toBe('2');
+        expect(paginatorContainer.componentInstance.pageLinkSize).toBe(2);
 
         paginatorContainer.componentInstance.onPageChange.emit({ first: 25 });
 

core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/components/dot-edit-page-state-controller/dot-edit-page-state-controller.component.spec.ts

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { createFakeEvent } from '@ngneat/spectator';
 import { of } from 'rxjs';
 
 import { CommonModule } from '@angular/common';
@@ -229,10 +230,10 @@ describe('DotEditPageStateControllerComponent', () => {
 
                 expect(lockerDe.classes.warn).toBe(true, 'warn class');
                 expect(lockerDe.attributes.appendTo).toBe('target');
-                expect(lockerDe.attributes['ng-reflect-text']).toBe('Page locked by Some One');
+                expect(lockerDe.attributes['ng-reflect-content']).toBe('Page locked by Some One');
                 expect(lockerDe.attributes['ng-reflect-tooltip-position']).toBe('top');
-                expect(locker.modelValue).toBe(false, 'checked');
-                expect(locker.disabled).toBe(false, 'disabled');
+                expect(locker.modelValue).toBe(false);
+                expect(locker.disabled).toBe(false);
             });
 
             it('should have lock info', () => {
@@ -578,14 +579,18 @@ describe('DotEditPageStateControllerComponent', () => {
         });
 
         it("should change the mode when the user clicks on the 'Edit' option", () => {
-            component.menuItems[0].command();
+            component.menuItems[0].command({
+                originalEvent: createFakeEvent('click')
+            });
 
             expect(component.modeChange.emit).toHaveBeenCalledWith(DotPageMode.EDIT);
         });
 
         it("should call editContentlet when clicking on the 'ContentType Content' option", () => {
             spyOn(editContentletService, 'edit');
-            component.menuItems[1].command();
+            component.menuItems[1].command({
+                originalEvent: createFakeEvent('click')
+            });
             expect(editContentletService.edit).toHaveBeenCalledWith({
                 data: {
                     inode: '123'

core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/components/dot-edit-page-toolbar/dot-edit-page-toolbar.component.html

@@ -14,13 +14,13 @@
             <dot-edit-page-info
                 [title]="variant.variant.title"
                 [url]="variant.variant.url"
-                class="dot-variant-header flex gap-3"></dot-edit-page-info>
+                class="dot-variant-header flex gap-3" />
         </ng-container>
     </div>
 
     <div class="main-toolbar-right flex align-items-center gap-3">
         <ng-container *ngIf="variant; else defaultHeaderRightTpl">
-            <dot-global-message data-testId="globalMessage" right></dot-global-message>
+            <dot-global-message data-testId="globalMessage" right />
             <i class="pi pi-filter-fill -rotate-180"></i>
             <h2>{{ variant.experimentName }}</h2>
         </ng-container>
@@ -31,21 +31,21 @@ <h2>{{ variant.experimentName }}</h2>
         <dot-edit-page-state-controller
             (modeChange)="stateChange()"
             [pageState]="pageState"
-            [variant]="variant"></dot-edit-page-state-controller>
+            [variant]="variant" />
 
         <p-checkbox
             *ngIf="showWhatsChanged && isEnterpriseLicense$ | async"
             (onChange)="whatschange.emit($event.checked)"
             [binary]="true"
             [label]="'dot.common.whats.changed' | dm"
-            class="dot-edit__what-changed-button"></p-checkbox>
+            class="dot-edit__what-changed-button" />
     </div>
 
     <div class="lower-toolbar-right w-5">
         <dot-edit-page-view-as-controller
             [pageState]="pageState"
             [variant]="variant"
-            class="flex w-full gap-2"></dot-edit-page-view-as-controller>
+            class="flex w-full gap-2" />
     </div>
 </dot-secondary-toolbar>
 
@@ -54,7 +54,7 @@ <h2>{{ variant.experimentName }}</h2>
         [apiLink]="apiLink"
         [title]="pageState.page.title"
         [url]="pageState.page.pageURI"
-        class="flex gap-2"></dot-edit-page-info>
+        class="flex gap-2" />
 
     <p-button
         *ngIf="showFavoritePageStar"
@@ -68,7 +68,7 @@ <h2>{{ variant.experimentName }}</h2>
 </ng-template>
 
 <ng-template #defaultHeaderRightTpl>
-    <dot-global-message data-testId="globalMessage" right></dot-global-message>
+    <dot-global-message data-testId="globalMessage" right />
 
     <p-tag
         *ngIf="runningExperiment"
@@ -91,7 +91,5 @@ <h2>{{ variant.experimentName }}</h2>
         role="button">
         <i class="material-icons">science</i>
     </p-tag>
-    <dot-edit-page-workflows-actions
-        (fired)="actionFired.emit($event)"
-        [page]="pageState.page"></dot-edit-page-workflows-actions>
+    <dot-edit-page-workflows-actions (fired)="actionFired.emit($event)" [page]="pageState.page" />
 </ng-template>

core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/components/dot-edit-page-view-as-controller/dot-edit-page-view-as-controller.component.html

@@ -5,25 +5,25 @@
         [value]="pageState.viewAs.device"
         appendTo="body"
         tooltipPosition="bottom"
-        tooltipStyleClass="dot-device-selector__dialog"></dot-device-selector>
+        tooltipStyleClass="dot-device-selector__dialog" />
 
     <dot-language-selector
         (selected)="changeLanguageHandler($event)"
         [pTooltip]="pageState.viewAs.language.language"
         [value]="pageState.viewAs.language"
         appendTo="body"
         tooltipPosition="bottom"
-        tooltipStyleClass="dot-language-selector__dialog"></dot-language-selector>
+        tooltipStyleClass="dot-language-selector__dialog" />
 
     <dot-persona-selector
         (delete)="deletePersonalization($event)"
         (selected)="changePersonaHandler($event)"
         [disabled]="(dotPageStateService.haveContent$ | async) === false"
-        [pageState]="pageState"></dot-persona-selector>
+        [pageState]="pageState" />
 </ng-container>
 
 <ng-template #language>
     <dot-language-selector
         (selected)="changeLanguageHandler($event)"
-        [value]="pageState.viewAs.language"></dot-language-selector>
+        [value]="pageState.viewAs.language" />
 </ng-template>

core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/components/dot-edit-page-view-as-controller/dot-edit-page-view-as-controller.component.spec.ts

@@ -230,18 +230,13 @@ describe('DotEditPageViewAsControllerComponent', () => {
             personaSelector.selected.emit(mockDotPersona);
 
             expect(component.changePersonaHandler).toHaveBeenCalledWith(mockDotPersona);
-            // expect(component.changeViewAs.emit).toHaveBeenCalledWith({
-            //     language: mockDotLanguage,
-            //     persona: mockDotPersona,
-            //     mode: 'PREVIEW'
-            // });
         });
 
         it('should have Device selector with tooltip', () => {
             const deviceSelectorDe = de.query(By.css('dot-device-selector'));
             expect(deviceSelector).not.toBeNull();
             expect(deviceSelectorDe.attributes.appendTo).toBe('body');
-            expect(deviceSelectorDe.attributes['ng-reflect-text']).toBe('Default Device');
+            expect(deviceSelectorDe.attributes['ng-reflect-content']).toBe('Default Device');
             expect(deviceSelectorDe.attributes['ng-reflect-tooltip-position']).toBe('bottom');
         });
 
@@ -250,11 +245,6 @@ describe('DotEditPageViewAsControllerComponent', () => {
             deviceSelector.selected.emit(mockDotDevices[0]);
 
             expect(component.changeDeviceHandler).toHaveBeenCalledWith(mockDotDevices[0]);
-            // expect(component.changeViewAs.emit).toHaveBeenCalledWith({
-            //     language: mockDotLanguage,
-            //     device: mockDotDevices[0],
-            //     mode: 'PREVIEW'
-            // });
         });
 
         it('should have Language selector', () => {
@@ -276,10 +266,6 @@ describe('DotEditPageViewAsControllerComponent', () => {
             languageSelector.selected.emit(testlanguage);
 
             expect(component.changeLanguageHandler).toHaveBeenCalledWith(testlanguage);
-            // expect(component.changeViewAs.emit).toHaveBeenCalledWith({
-            //     language: testlanguage,
-            //     mode: 'PREVIEW'
-            // });
         });
 
         it('should propagate the values to the selector components on init', () => {
@@ -291,12 +277,7 @@ describe('DotEditPageViewAsControllerComponent', () => {
                 })
             );
             fixtureHost.detectChanges();
-
-            // expect(languageSelector.value).toEqual(mockDotPersona);
             expect(deviceSelector.value).toEqual(mockDotEditPageViewAs.device);
-
-            // expect(personaSelector.value).toEqual(mockDotEditPageViewAs.persona);
-            // expect(personaSelector.pageId).toEqual(mockDotRenderedPage.page.identifier);
         });
     });
 });