chore(uve): FTM - Render future contentlets with the client appropria…

…te permissions (#30990)

https://github.com/user-attachments/assets/702ebb75-4648-4ecb-834f-73f7ade2e0f2



https://github.com/user-attachments/assets/2bdbbf8c-7473-45d8-8ed8-ce67e7f6edf2



This pull request includes several changes to the `dot-ema-shell` and
`dot-uve-toolbar` components to support the new `editorMode` and improve
the toolbar's functionality. The most important changes include adding
the `UVE_MODE` import, updating the `INITIAL_PAGE_PARAMS` to include
`editorMode`, and modifying various methods and tests to handle the new
`editorMode` and `publishDate` parameters.

### Changes to `dot-ema-shell` component:

* Added `UVE_MODE` import and updated `INITIAL_PAGE_PARAMS` to include
`editorMode`.
[[1]](diffhunk://#diff-8843e3a4ce8c16e83408b1a6dcc3ad54eaddd17f8e986bbdb502e11bd4446ab4L15-R15)
[[2]](diffhunk://#diff-8843e3a4ce8c16e83408b1a6dcc3ad54eaddd17f8e986bbdb502e11bd4446ab4L118-R119)
* Modified test cases to include `editorMode` in the URL and parameters.
[[1]](diffhunk://#diff-8843e3a4ce8c16e83408b1a6dcc3ad54eaddd17f8e986bbdb502e11bd4446ab4L323-R324)
[[2]](diffhunk://#diff-8843e3a4ce8c16e83408b1a6dcc3ad54eaddd17f8e986bbdb502e11bd4446ab4L379-R381)
* Added new tests to ensure `editorMode` is set to `EDIT` if an
incorrect value is passed and to handle `publishDate` when in preview
mode.
* Updated the `#getPageParams` method to set default values for
`editorMode` and `publishDate`.
[[1]](diffhunk://#diff-677330662fea6dadc7e48fd8455ec2a6fe60d624c7ed1f01f0a3e985aacd05c6L204-R205)
[[2]](diffhunk://#diff-677330662fea6dadc7e48fd8455ec2a6fe60d624c7ed1f01f0a3e985aacd05c6R222-R229)

### Changes to `dot-uve-toolbar` component:

* Added `UVE_MODE` import and updated the toolbar to handle `editorMode`
and `publishDate`.
[[1]](diffhunk://#diff-217a9e619d6590c4f652e85353b9637ba5e464ddeb0424be35aef39bb8dceb30R9-R13)
[[2]](diffhunk://#diff-217a9e619d6590c4f652e85353b9637ba5e464ddeb0424be35aef39bb8dceb30R24-R27)
[[3]](diffhunk://#diff-217a9e619d6590c4f652e85353b9637ba5e464ddeb0424be35aef39bb8dceb30R57-R58)
* Modified the toolbar template to bind the preview date and trigger
preview mode.
[[1]](diffhunk://#diff-9937556e73b051b878ba22ad1ce971a70019a617d7979b3e0bcc814801ad350bL15-R26)
[[2]](diffhunk://#diff-9937556e73b051b878ba22ad1ce971a70019a617d7979b3e0bcc814801ad350bL65-R62)
[[3]](diffhunk://#diff-9937556e73b051b878ba22ad1ce971a70019a617d7979b3e0bcc814801ad350bL92-R89)
* Updated the toolbar styles to improve the appearance of the preview
button.
* Added new tests to ensure the toolbar handles `editorMode` and
`publishDate` correctly.
[[1]](diffhunk://#diff-3eaa147616a5d1ff374a5fa27b0f38f0159a9039ef7e8d672dec43631f48a9e1R12)
[[2]](diffhunk://#diff-3eaa147616a5d1ff374a5fa27b0f38f0159a9039ef7e8d672dec43631f48a9e1R107-R109)
[[3]](diffhunk://#diff-3eaa147616a5d1ff374a5fa27b0f38f0159a9039ef7e8d672dec43631f48a9e1L252-R259)
[[4]](diffhunk://#diff-3eaa147616a5d1ff374a5fa27b0f38f0159a9039ef7e8d672dec43631f48a9e1L381-R391)
[[5]](diffhunk://#diff-3eaa147616a5d1ff374a5fa27b0f38f0159a9039ef7e8d672dec43631f48a9e1L393-R458)
* Refactored the toolbar component to use signals and effects for
managing state.
[[1]](diffhunk://#diff-217a9e619d6590c4f652e85353b9637ba5e464ddeb0424be35aef39bb8dceb30R84-R85)
[[2]](diffhunk://#diff-217a9e619d6590c4f652e85353b9637ba5e464ddeb0424be35aef39bb8dceb30R94-R146)
[[3]](diffhunk://#diff-217a9e619d6590c4f652e85353b9637ba5e464ddeb0424be35aef39bb8dceb30R175-R179)

These changes ensure that the `dot-ema-shell` and `dot-uve-toolbar`
components handle the new `editorMode` and `publishDate` parameters
correctly, improving the overall functionality and user experience.

---------

Co-authored-by: Kevin Davila <[email protected]>

core-web/libs/portlets/edit-ema/portlet/src/lib/utils/index.ts

@@ -1,6 +1,5 @@
 import { Params } from '@angular/router';
 
-import { UVE_MODE } from '@dotcms/client';
 import { CurrentUser } from '@dotcms/dotcms-js';
 import {
     DEFAULT_VARIANT_ID,
@@ -15,7 +14,7 @@ import {
 import { EmaDragItem } from '../edit-ema-editor/components/ema-page-dropzone/types';
 import { DotPageAssetKeys, DotPageApiParams } from '../services/dot-page-api.service';
 import { COMMON_ERRORS, DEFAULT_PERSONA } from '../shared/consts';
-import { EDITOR_STATE, PAGE_MODE } from '../shared/enums';
+import { EDITOR_STATE } from '../shared/enums';
 import {
     ActionPayload,
     ContainerPayload,
@@ -233,8 +232,7 @@ export function createPageApiUrlWithQueryParams(
         language_id: params?.language_id ?? '1',
         'com.dotmarketing.persona.id':
             params?.['com.dotmarketing.persona.id'] ?? DEFAULT_PERSONA.identifier,
-        variantName: params?.variantName ?? DEFAULT_VARIANT_ID,
-        mode: params?.editorMode === UVE_MODE.PREVIEW ? PAGE_MODE.LIVE : params.mode
+        variantName: params?.variantName ?? DEFAULT_VARIANT_ID
     };
 
     // Filter out undefined values and url

core-web/libs/sdk/client/src/lib/editor/sdk-editor.spec.ts

@@ -108,16 +108,6 @@ describe('DotCMSPageEditor', () => {
                 lastScrollYPosition: 0
             });
         });
-
-        it('should isInsideEditor return false when is preview mode', () => {
-            Object.defineProperty(window, 'location', {
-                value: {
-                    search: '?editorMode=preview'
-                },
-                writable: true
-            });
-            expect(isInsideEditor()).toBe(false);
-        });
     });
 
     describe('Add Class to Empty Contentets', () => {

core-web/libs/sdk/client/src/lib/editor/sdk-editor.ts

@@ -10,7 +10,6 @@ import { DotCMSPageEditorConfig, ReorderMenuConfig } from './models/editor.model
 import { INLINE_EDITING_EVENT_KEY, InlineEditEventData } from './models/inline-event.model';
 
 import { Contentlet } from '../client/content/shared/types';
-import { isPreviewMode } from '../utils';
 
 /**
  * Updates the navigation in the editor.
@@ -116,10 +115,6 @@ export function isInsideEditor(): boolean {
         return false;
     }
 
-    if (isPreviewMode()) {
-        return false;
-    }
-
     return window.parent !== window;
 }
 

core-web/libs/sdk/client/src/lib/utils/page/common-utils.spec.ts

@@ -1,4 +1,4 @@
-import { getPageRequestParams, isPreviewMode } from './common-utils';
+import { getPageRequestParams } from './common-utils';
 
 describe('Common Utils', () => {
     it('should return the correct Request Params', () => {
@@ -32,24 +32,6 @@ describe('Common Utils', () => {
             }
         });
 
-        expect(pageRequestParams).toEqual({ path: 'test' });
-    });
-
-    describe('Is Preview Mode', () => {
-        it('should return true when editorMode is preview', () => {
-            jest.spyOn(window, 'location', 'get').mockReturnValueOnce({
-                search: '?editorMode=preview'
-            } as Location);
-
-            expect(isPreviewMode()).toBe(true);
-        });
-
-        it('should return false when editorMode is not preview', () => {
-            jest.spyOn(window, 'location', 'get').mockReturnValueOnce({
-                search: ''
-            } as Location);
-
-            expect(isPreviewMode()).toBe(false);
-        });
+        expect(pageRequestParams).toEqual({ path: 'test', mode: 'LIVE' });
     });
 });

core-web/libs/sdk/client/src/lib/utils/page/common-utils.ts

@@ -1,5 +1,4 @@
 import { PageApiOptions } from '../../client/sdk-js-client';
-import { UVE_MODE } from '../../editor/models/editor.model';
 
 /**
  * Interface representing the properties for page request parameters.
@@ -42,9 +41,7 @@ export const getPageRequestParams = ({
     const finalParams: Record<string, unknown> = {};
     const dotMarketingPersonaId = copiedParams['com.dotmarketing.persona.id'] || '';
 
-    if (copiedParams['mode']) {
-        finalParams['mode'] = copiedParams['mode'];
-    }
+    finalParams['mode'] = copiedParams['mode'] || 'LIVE';
 
     if (copiedParams['language_id']) {
         finalParams['language_id'] = copiedParams['language_id'];
@@ -67,15 +64,3 @@ export const getPageRequestParams = ({
         ...finalParams
     };
 };
-
-/**
- * Checks if the code is running inside an editor.
- *
- * @return {*}  {boolean}
- */
-export const isPreviewMode = (): boolean => {
-    const queryParams = new URLSearchParams(window.location.search);
-    const editorMode = queryParams.get('editorMode');
-
-    return editorMode === UVE_MODE.PREVIEW;
-};