fix(UVE): Hide add forms option for Non-Licensed Users in UVE Editor (#…

…28903) ### Proposed Changes * Hide add forms option for Non-Licensed Users in UVE Editor ### Video https://github.com/dotCMS/core/assets/72418962/631e2dd0-be2c-4034-9098-890ac4f1eae8
dotCMS · Jun 18, 2024 · d834374 · d834374
1 parent de70136
commit d834374
Show file tree

Hide file tree

Showing 6 changed files with 192 additions and 68 deletions.
diff --git a/...c/lib/edit-ema-editor/components/ema-contentlet-tools/ema-contentlet-tools.component.html b/...c/lib/edit-ema-editor/components/ema-contentlet-tools/ema-contentlet-tools.component.html
@@ -9,16 +9,16 @@
     [ngStyle]="styles.bottomButton"
     data-testId="add-bottom-button"
     icon="pi pi-plus"></p-button>
-<p-menu [model]="items" [popup]="true" #menu appendTo="body" data-testId="menu-add"></p-menu>
+<p-menu [model]="items()" [popup]="true" #menu appendTo="body" data-testId="menu-add"></p-menu>
 
 <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

diff --git a/...ib/edit-ema-editor/components/ema-contentlet-tools/ema-contentlet-tools.component.spec.ts b/...ib/edit-ema-editor/components/ema-contentlet-tools/ema-contentlet-tools.component.spec.ts
@@ -63,7 +63,8 @@ describe('EmaContentletToolsComponent', () => {
             () =>
                 (spectator = createComponent({
                     props: {
-                        contentletArea: contentletAreaMock
+                        contentletArea: contentletAreaMock,
+                        isEnterprise: false
                     }
                 }))
         );
@@ -77,7 +78,7 @@ describe('EmaContentletToolsComponent', () => {
 
             const hideMenu = jest.spyOn(spectator.component.menu, 'hide');
             // Open menu
-            spectator.click('[data-testId="menu-add"]');
+            spectator.click(byTestId('menu-add'));
 
             //Change contentlet hover
             spectator.setInput('contentletArea', {
@@ -98,13 +99,13 @@ describe('EmaContentletToolsComponent', () => {
         describe('events', () => {
             it('should emit delete on delete button click', () => {
                 const deleteSpy = jest.spyOn(spectator.component.delete, 'emit');
-                spectator.click('[data-testId="delete-button"]');
+                spectator.click(byTestId('delete-button'));
                 expect(deleteSpy).toHaveBeenCalledWith(contentletAreaMock.payload);
             });
 
             it('should emit edit on edit button click', () => {
                 const deleteSpy = jest.spyOn(spectator.component.edit, 'emit');
-                spectator.click('[data-testId="edit-button"]');
+                spectator.click(byTestId('edit-button'));
                 expect(deleteSpy).toHaveBeenCalledWith(contentletAreaMock.payload);
             });
 
@@ -126,74 +127,122 @@ describe('EmaContentletToolsComponent', () => {
 
             describe('top button', () => {
                 it('should open menu on add button click', () => {
-                    spectator.click('[data-testId="add-top-button"]');
+                    spectator.click(byTestId('add-top-button'));
                     expect(spectator.query('.p-menu-overlay')).not.toBeNull();
                 });
 
                 it('should call addContent on Content option click', () => {
                     const addSpy = jest.spyOn(spectator.component.addContent, 'emit');
-                    spectator.click('[data-testId="add-top-button"]');
+                    spectator.click(byTestId('add-top-button'));
                     spectator.click(byText('Content'));
                     expect(addSpy).toHaveBeenCalledWith({
                         ...contentletAreaMock.payload,
                         position: 'before'
                     } as ActionPayload);
                 });
 
-                it('should call addForm on Form option click', () => {
-                    const addSpy = jest.spyOn(spectator.component.addForm, 'emit');
-                    spectator.click('[data-testId="add-top-button"]');
-                    spectator.click(byText('Form'));
-                    expect(addSpy).toHaveBeenCalledWith({
-                        ...contentletAreaMock.payload,
-                        position: 'before'
-                    } as ActionPayload);
+                it('should not call addForm on Form option click', () => {
+                    spectator.click(byTestId('add-bottom-button'));
+                    const formOption = spectator.query(byText('Form'));
+                    expect(formOption).toBeNull();
                 });
 
                 it('should call addWidget on Widget option click', () => {
                     const addSpy = jest.spyOn(spectator.component.addWidget, 'emit');
-                    spectator.click('[data-testId="add-top-button"]');
+                    spectator.click(byTestId('add-top-button'));
                     spectator.click(byText('Widget'));
                     expect(addSpy).toHaveBeenCalledWith({
                         ...contentletAreaMock.payload,
                         position: 'before'
                     } as ActionPayload);
                 });
+
+                describe('isEnterprise', () => {
+                    beforeEach(
+                        () =>
+                            (spectator = createComponent({
+                                props: {
+                                    contentletArea: contentletAreaMock,
+                                    isEnterprise: true
+                                }
+                            }))
+                    );
+
+                    it('should render form option', () => {
+                        spectator.click(byTestId('add-top-button'));
+                        expect(spectator.query(byText('Form'))).toBeDefined();
+                    });
+
+                    it('should call addForm on Form option click', () => {
+                        const addSpy = jest.spyOn(spectator.component.addForm, 'emit');
+                        spectator.click(byTestId('add-top-button'));
+                        spectator.click(byText('Form'));
+                        expect(addSpy).toHaveBeenCalledWith({
+                            ...contentletAreaMock.payload,
+                            position: 'before'
+                        } as ActionPayload);
+                    });
+                });
             });
 
             describe('bottom button', () => {
                 it('should open menu on button click', () => {
-                    spectator.click('[data-testId="add-bottom-button"]');
+                    spectator.click(byTestId('add-bottom-button'));
                     expect(spectator.query('.p-menu-overlay')).not.toBeNull();
                 });
 
                 it('should call addContent on Content option click', () => {
                     const addSpy = jest.spyOn(spectator.component.addContent, 'emit');
-                    spectator.click('[data-testId="add-bottom-button"]');
+                    spectator.click(byTestId('add-bottom-button'));
                     spectator.click(byText('Content'));
                     expect(addSpy).toHaveBeenCalledWith({
                         ...contentletAreaMock.payload,
                         position: 'after'
                     } as ActionPayload);
                 });
-                it('should call addForm on Form option click', () => {
-                    const addSpy = jest.spyOn(spectator.component.addForm, 'emit');
-                    spectator.click('[data-testId="add-bottom-button"]');
-                    spectator.click(byText('Form'));
-                    expect(addSpy).toHaveBeenCalledWith({
-                        ...contentletAreaMock.payload,
-                        position: 'after'
-                    } as ActionPayload);
+
+                it('should not call addForm on Form option click', () => {
+                    spectator.click(byTestId('add-bottom-button'));
+                    const formOption = spectator.query(byText('Form'));
+                    expect(formOption).toBeNull();
                 });
+
                 it('should call addWidget on Widget option click', () => {
                     const addSpy = jest.spyOn(spectator.component.addWidget, 'emit');
-                    spectator.click('[data-testId="add-bottom-button"]');
+                    spectator.click(byTestId('add-bottom-button'));
                     spectator.click(byText('Widget'));
                     expect(addSpy).toHaveBeenCalledWith({
                         ...contentletAreaMock.payload,
                         position: 'after'
                     } as ActionPayload);
                 });
+
+                describe('isEnterprise', () => {
+                    beforeEach(
+                        () =>
+                            (spectator = createComponent({
+                                props: {
+                                    contentletArea: contentletAreaMock,
+                                    isEnterprise: true
+                                }
+                            }))
+                    );
+
+                    it('should render form option', () => {
+                        spectator.click(byTestId('add-bottom-button'));
+                        expect(spectator.query(byText('Form'))).toBeDefined();
+                    });
+
+                    it('should call addForm on Form option click', () => {
+                        const addSpy = jest.spyOn(spectator.component.addForm, 'emit');
+                        spectator.click(byTestId('add-bottom-button'));
+                        spectator.click(byText('Form'));
+                        expect(addSpy).toHaveBeenCalledWith({
+                            ...contentletAreaMock.payload,
+                            position: 'after'
+                        } as ActionPayload);
+                    });
+                });
             });
         });
 

diff --git a/...src/lib/edit-ema-editor/components/ema-contentlet-tools/ema-contentlet-tools.component.ts b/...src/lib/edit-ema-editor/components/ema-contentlet-tools/ema-contentlet-tools.component.ts
@@ -10,7 +10,8 @@ import {
     Output,
     SimpleChanges,
     ViewChild,
-    inject
+    inject,
+    signal
 } from '@angular/core';
 
 import { MenuItem } from 'primeng/api';
@@ -41,60 +42,69 @@ export class EmaContentletToolsComponent implements OnChanges {
     @ViewChild('menu') menu: Menu;
     @ViewChild('menuVTL') menuVTL: Menu;
     @ViewChild('dragImage') dragImage: ElementRef;
-    private dotMessageService = inject(DotMessageService);
 
-    private buttonPosition: 'after' | 'before' = 'after';
+    @HostBinding('class.hide') @Input() hide = false;
 
     @Input() contentletArea: ContentletArea;
-    @HostBinding('class.hide') @Input() hide = false;
+    @Input() isEnterprise: boolean;
+
     @Output() addContent = new EventEmitter<ActionPayload>();
     @Output() addForm = new EventEmitter<ActionPayload>();
     @Output() addWidget = new EventEmitter<ActionPayload>();
     @Output() edit = new EventEmitter<ActionPayload>();
     @Output() editVTL = new EventEmitter<VTLFile>();
     @Output() delete = new EventEmitter<ActionPayload>();
 
-    items: MenuItem[] = [
+    #dotMessageService = inject(DotMessageService);
+    ACTIONS_CONTAINER_WIDTH = INITIAL_ACTIONS_CONTAINER_WIDTH; // Now is dynamic based on the page type (Headless - VTL)
+    vtlFiles: MenuItem[] = [];
+    #buttonPosition: 'after' | 'before' = 'after';
+
+    readonly #comunityItems: MenuItem[] = [
         {
-            label: this.dotMessageService.get('content'),
+            label: this.#dotMessageService.get('content'),
             command: () => {
                 this.addContent.emit({
                     ...this.contentletArea.payload,
-                    position: this.buttonPosition
+                    position: this.#buttonPosition
                 });
             }
         },
         {
-            label: this.dotMessageService.get('Widget'),
+            label: this.#dotMessageService.get('Widget'),
             command: () => {
                 this.addWidget.emit({
                     ...this.contentletArea.payload,
-                    position: this.buttonPosition
+                    position: this.#buttonPosition
                 });
             }
-        },
+        }
+    ];
+    readonly #enterpriseItems: MenuItem[] = [
         {
-            label: this.dotMessageService.get('form'),
+            label: this.#dotMessageService.get('form'),
             command: () => {
                 this.addForm.emit({
                     ...this.contentletArea.payload,
-                    position: this.buttonPosition
+                    position: this.#buttonPosition
                 });
             }
         }
     ];
 
-    vtlFiles: MenuItem[] = [];
-
-    ACTIONS_CONTAINER_WIDTH = INITIAL_ACTIONS_CONTAINER_WIDTH; // Now is dynamic based on the page type (Headless - VTL)
-
+    readonly items = signal<MenuItem[]>(this.#comunityItems);
     protected styles: Record<string, { [klass: string]: unknown }> = {};
 
     ngOnChanges(changes: SimpleChanges): void {
         if (!changes.contentletArea) {
             return;
         }
 
+        // If the contentlet is enterprise, we need to add the form option
+        if (changes.isEnterprise?.currentValue) {
+            this.items.update((items) => [...items, ...this.#enterpriseItems]);
+        }
+
         this.hideMenus(); // We need to hide the menu if the contentlet changes
         this.setVtlFiles(); // Set the VTL files for the component
 
@@ -136,7 +146,7 @@ export class EmaContentletToolsComponent implements OnChanges {
      * @memberof EmaContentletToolsComponent
      */
     setPositionFlag(position: 'before' | 'after'): void {
-        this.buttonPosition = position;
+        this.#buttonPosition = position;
     }
 
     /**

diff --git a/...web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.html b/...web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.html
@@ -64,6 +64,7 @@
                 (addContent)="dialog.addContentlet($event)"
                 [hide]="es.state === editorState.DRAGGING"
                 [contentletArea]="es.contentletArea"
+                [isEnterprise]="es.isEnterpriseLicense"
                 data-testId="contentlet-tools" />
             <dot-ema-page-dropzone
                 *ngIf="es.showDropzone"
@@ -80,22 +81,20 @@
         [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>