Filter system host when is isRequired

core-web/libs/edit-content/src/lib/fields/dot-edit-content-host-folder-field/dot-edit-content-host-folder-field.component.ts

@@ -8,7 +8,7 @@ import {
     effect,
     inject
 } from '@angular/core';
-import { ControlContainer, FormControl, ReactiveFormsModule } from '@angular/forms';
+import { ControlContainer, FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 
 import { DotCMSContentTypeField } from '@dotcms/dotcms-models';
 
@@ -64,7 +64,11 @@ export class DotEditContentHostFolderFieldComponent implements OnInit {
 
     ngOnInit() {
         const currentPath = this.formControl.value;
-        this.store.loadSites(currentPath);
+        const isRequired = this.formControl.hasValidator(Validators.required);
+        this.store.loadSites({
+            path: currentPath,
+            isRequired
+        });
     }
 
     get formControl(): FormControl {

core-web/libs/edit-content/src/lib/fields/dot-edit-content-host-folder-field/store/host-folder-field.store.ts

@@ -21,7 +21,7 @@ export type HostFolderFiledState = {
     error: string | null;
 };
 
-const initialState: HostFolderFiledState = {
+export const initialState: HostFolderFiledState = {
     nodeSelected: null,
     nodeExpaned: null,
     tree: [],

core-web/libs/edit-content/src/lib/fields/dot-edit-content-host-folder-field/store/methods/loadSites.spec.ts

@@ -0,0 +1,47 @@
+import { SpyObject, createSpyObject } from '@ngneat/spectator/jest';
+import { signalStore, withState } from '@ngrx/signals';
+import { of } from 'rxjs';
+
+import { TestBed } from '@angular/core/testing';
+
+import { loadSites, SYSTEM_HOST_NAME } from './loadSites';
+
+import { DotEditContentService } from '../../../../services/dot-edit-content.service';
+import { TREE_SELECT_SITES_MOCK } from '../../../../utils/mocks';
+import { initialState } from '../host-folder-field.store';
+
+describe('rxMethod: loadSites', () => {
+    let Store = signalStore(withState(initialState));
+    let store: InstanceType<typeof Store>;
+    let service: SpyObject<DotEditContentService>;
+
+    beforeEach(() => {
+        service = createSpyObject(DotEditContentService);
+        Store = signalStore(withState(initialState));
+        store = new Store();
+    });
+
+    it('should include System Host when isRequired is false.', () => {
+        service.getSitesTreePath.mockReturnValue(of(TREE_SELECT_SITES_MOCK));
+        const rxMethod = TestBed.runInInjectionContext(() => loadSites(store, service));
+        const props = {
+            path: '',
+            isRequired: false
+        };
+        rxMethod(props);
+        const hasSystemHost = store.tree().some((item) => item.label === SYSTEM_HOST_NAME);
+        expect(hasSystemHost).toBe(true);
+    });
+
+    it('should not include System Host when isRequired is true.', () => {
+        service.getSitesTreePath.mockReturnValue(of(TREE_SELECT_SITES_MOCK));
+        const rxMethod = TestBed.runInInjectionContext(() => loadSites(store, service));
+        const props = {
+            path: '',
+            isRequired: true
+        };
+        rxMethod(props);
+        const hasSystemHost = store.tree().some((item) => item.label === SYSTEM_HOST_NAME);
+        expect(hasSystemHost).toBe(false);
+    });
+});

core-web/libs/edit-content/src/lib/fields/dot-edit-content-host-folder-field/store/methods/loadSites.ts

@@ -11,14 +11,28 @@ import type { HostFolderFiledState } from './../host-folder-field.store';
 
 const PEER_PAGE_LIMIT = 7000;
 
+type Props = {
+    path: string | null;
+    isRequired: boolean;
+};
+
+export const SYSTEM_HOST_NAME = 'System Host';
+
 export const loadSites = (store, dotEditContentService: DotEditContentService) => {
-    return rxMethod<string | null>(
+    return rxMethod<Props>(
         pipe(
             tap(() => patchState(store, { status: 'LOADING' })),
-            switchMap((path) => {
+            switchMap(({ path, isRequired }) => {
                 return dotEditContentService
                     .getSitesTreePath({ perPage: PEER_PAGE_LIMIT, filter: '*' })
                     .pipe(
+                        map((sites) => {
+                            if (isRequired) {
+                                return sites.filter((site) => site.label !== SYSTEM_HOST_NAME);
+                            }
+
+                            return sites;
+                        }),
                         tapResponse({
                             next: (sites) => patchState(store, { tree: sites }),
                             error: () => patchState(store, { status: 'FAILED', error: '' }),

core-web/libs/edit-content/src/lib/utils/mocks.ts

@@ -1211,6 +1211,17 @@ export const TREE_SELECT_SITES_MOCK: TreeNodeItem[] = [
         },
         expandedIcon: 'pi pi-folder-open',
         collapsedIcon: 'pi pi-folder'
+    },
+    {
+        key: 'System Host',
+        label: 'System Host',
+        data: {
+            hostname: 'System Host',
+            path: '',
+            type: 'site'
+        },
+        expandedIcon: 'pi pi-folder-open',
+        collapsedIcon: 'pi pi-folder'
     }
 ];
 

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/ema-contentlet-tools/ema-contentlet-tools.component.html

@@ -13,12 +13,12 @@
 
 <div *ngIf="!isContainerEmpty" [ngStyle]="styles.actions" class="actions" data-testId="actions">
     @if (contentletArea.payload.vtlFiles?.length) {
-    <p-menu [model]="vtlFiles" [popup]="true" #menuVTL appendTo="body" />
-    <p-button
-        (click)="menuVTL.toggle($event)"
-        data-testId="edit-vtl-button"
-        styleClass="p-button-rounded p-button-raised"
-        icon="pi pi-code" />
+        <p-menu [model]="vtlFiles" [popup]="true" #menuVTL appendTo="body" />
+        <p-button
+            (click)="menuVTL.toggle($event)"
+            data-testId="edit-vtl-button"
+            styleClass="p-button-rounded p-button-raised"
+            icon="pi pi-code" />
     }
 
     <p-button

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.html

@@ -81,20 +81,22 @@
         [variantId]="es.editorData.variantId"
         data-testId="palette" />
 
-    @if ( es.editorData.canEditVariant && (es.editorData.mode === editorMode.EDIT ||
-    es.editorData.mode === editorMode.EDIT_VARIANT) ) {
-    <dot-edit-ema-dialog
-        (action)="onCustomEvent($event)"
-        (reloadFromDialog)="reloadFromDialog()"
-        #dialog
-        data-testId="ema-dialog"></dot-edit-ema-dialog>
-    <p-confirmDialog
-        [style]="{
-            width: '400px'
-        }"
-        rejectIcon="hidden"
-        acceptIcon="hidden"
-        rejectButtonStyleClass="p-button-outlined"
-        data-testId="confirm-dialog"></p-confirmDialog>
+    @if (
+        es.editorData.canEditVariant &&
+        (es.editorData.mode === editorMode.EDIT || es.editorData.mode === editorMode.EDIT_VARIANT)
+    ) {
+        <dot-edit-ema-dialog
+            (action)="onCustomEvent($event)"
+            (reloadFromDialog)="reloadFromDialog()"
+            #dialog
+            data-testId="ema-dialog"></dot-edit-ema-dialog>
+        <p-confirmDialog
+            [style]="{
+                width: '400px'
+            }"
+            rejectIcon="hidden"
+            acceptIcon="hidden"
+            rejectButtonStyleClass="p-button-outlined"
+            data-testId="confirm-dialog"></p-confirmDialog>
     }
 </ng-container>