From 32b61e039839aea37a248d0b483df59293e2b368 Mon Sep 17 00:00:00 2001 From: Jalinson Diaz Date: Mon, 11 Nov 2024 16:40:44 -0300 Subject: [PATCH 1/7] add to enum and whitelist of FF --- core-web/libs/dotcms-models/src/lib/shared-models.ts | 3 ++- .../com/dotcms/rest/api/v1/system/ConfigurationResource.java | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/core-web/libs/dotcms-models/src/lib/shared-models.ts b/core-web/libs/dotcms-models/src/lib/shared-models.ts index 665e02e46561..d085547b5bfd 100644 --- a/core-web/libs/dotcms-models/src/lib/shared-models.ts +++ b/core-web/libs/dotcms-models/src/lib/shared-models.ts @@ -27,7 +27,8 @@ export const enum FeaturedFlags { FEATURE_FLAG_CONTENT_EDITOR2_ENABLED = 'CONTENT_EDITOR2_ENABLED', FEATURE_FLAG_CONTENT_EDITOR2_CONTENT_TYPE = 'CONTENT_EDITOR2_CONTENT_TYPE', FEATURE_FLAG_ANNOUNCEMENTS = 'FEATURE_FLAG_ANNOUNCEMENTS', - FEATURE_FLAG_NEW_EDIT_PAGE = 'FEATURE_FLAG_NEW_EDIT_PAGE' + FEATURE_FLAG_NEW_EDIT_PAGE = 'FEATURE_FLAG_NEW_EDIT_PAGE', + FEATURE_FLAG_UVE_PREVIEW_MODE = 'FEATURE_FLAG_UVE_PREVIEW_MODE' } export const FEATURE_FLAG_NOT_FOUND = 'NOT_FOUND'; diff --git a/dotCMS/src/main/java/com/dotcms/rest/api/v1/system/ConfigurationResource.java b/dotCMS/src/main/java/com/dotcms/rest/api/v1/system/ConfigurationResource.java index a02b51632567..05cb7697c0f0 100644 --- a/dotCMS/src/main/java/com/dotcms/rest/api/v1/system/ConfigurationResource.java +++ b/dotCMS/src/main/java/com/dotcms/rest/api/v1/system/ConfigurationResource.java @@ -65,7 +65,7 @@ public class ConfigurationResource implements Serializable { new String[] {"EMAIL_SYSTEM_ADDRESS", "WYSIWYG_IMAGE_URL_PATTERN", "CHARSET","CONTENT_PALETTE_HIDDEN_CONTENT_TYPES", "FEATURE_FLAG_EXPERIMENTS", "DOTFAVORITEPAGE_FEATURE_ENABLE", "FEATURE_FLAG_TEMPLATE_BUILDER_2", "SHOW_VIDEO_THUMBNAIL", "EXPERIMENTS_MIN_DURATION", "EXPERIMENTS_MAX_DURATION", "EXPERIMENTS_DEFAULT_DURATION", "FEATURE_FLAG_SEO_IMPROVEMENTS", - "FEATURE_FLAG_SEO_PAGE_TOOLS", "FEATURE_FLAG_EDIT_URL_CONTENT_MAP", "CONTENT_EDITOR2_ENABLED", "CONTENT_EDITOR2_CONTENT_TYPE", "FEATURE_FLAG_NEW_BINARY_FIELD", "FEATURE_FLAG_ANNOUNCEMENTS", "FEATURE_FLAG_NEW_EDIT_PAGE" })); + "FEATURE_FLAG_SEO_PAGE_TOOLS", "FEATURE_FLAG_EDIT_URL_CONTENT_MAP", "CONTENT_EDITOR2_ENABLED", "CONTENT_EDITOR2_CONTENT_TYPE", "FEATURE_FLAG_NEW_BINARY_FIELD", "FEATURE_FLAG_ANNOUNCEMENTS", "FEATURE_FLAG_NEW_EDIT_PAGE", "FEATURE_FLAG_UVE_PREVIEW_MODE" })); private boolean isOnBlackList(final String key) { From 920d54c16f31ba714b02ff5ed8a13c684925ec4c Mon Sep 17 00:00:00 2001 From: Jalinson Diaz Date: Tue, 12 Nov 2024 14:09:53 -0300 Subject: [PATCH 2/7] add withFlags feature --- .../portlet/src/lib/store/dot-uve.store.ts | 6 +- .../src/lib/store/features/flags/models.ts | 7 +++ .../src/lib/store/features/flags/withFlags.ts | 55 +++++++++++++++++++ 3 files changed, 67 insertions(+), 1 deletion(-) create mode 100644 core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/flags/models.ts create mode 100644 core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/flags/withFlags.ts diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/dot-uve.store.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/dot-uve.store.ts index 3001d63aaa00..22c24baca60a 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/dot-uve.store.ts +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/dot-uve.store.ts @@ -2,7 +2,10 @@ import { patchState, signalStore, withComputed, withMethods, withState } from '@ import { computed } from '@angular/core'; +import { FeaturedFlags } from '@dotcms/dotcms-models'; + import { withEditor } from './features/editor/withEditor'; +import { withFlags } from './features/flags/withFlags'; import { withLayout } from './features/layout/withLayout'; import { withLoad } from './features/load/withLoad'; import { ShellProps, TranslateProps, UVEState } from './models'; @@ -145,5 +148,6 @@ export const UVEStore = signalStore( }), withLoad(), withLayout(), - withEditor() + withEditor(), + withFlags([FeaturedFlags.FEATURE_FLAG_UVE_PREVIEW_MODE]) ); diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/flags/models.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/flags/models.ts new file mode 100644 index 000000000000..42383fa35a25 --- /dev/null +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/flags/models.ts @@ -0,0 +1,7 @@ +import { FeaturedFlags } from '@dotcms/dotcms-models'; + +export type UVEFlags = { [key in FeaturedFlags]?: boolean }; + +export interface WithFlagsState { + flags: UVEFlags; +} diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/flags/withFlags.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/flags/withFlags.ts new file mode 100644 index 000000000000..36840c981f6a --- /dev/null +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/flags/withFlags.ts @@ -0,0 +1,55 @@ +import { + patchState, + signalStoreFeature, + type, + withComputed, + withHooks, + withState +} from '@ngrx/signals'; + +import { computed, inject } from '@angular/core'; + +import { take } from 'rxjs/operators'; + +import { DotPropertiesService } from '@dotcms/data-access'; +import { FeaturedFlags } from '@dotcms/dotcms-models'; + +import { WithFlagsState } from './models'; + +import { UVEState } from '../../models'; + +/** + * + * @description This feature is used to handle the fetch of flags + * @export + * @return {*} + */ +export function withFlags(flags: FeaturedFlags[]) { + return signalStoreFeature( + { + state: type() + }, + withState({ flags: {} }), + withComputed(({ flags }) => { + return { + $previewMode: computed(() => { + const currentFlags = flags(); + + return currentFlags[FeaturedFlags.FEATURE_FLAG_UVE_PREVIEW_MODE]; + }) + }; + }), + withHooks({ + onInit: (store) => { + const propertiesService = inject(DotPropertiesService); + + propertiesService + .getFeatureFlags(flags) + .pipe(take(1)) + .subscribe((flags) => { + patchState(store, { flags: { ...flags } }); + }); + } + }) + ); +} From f5d3ee326dbb7948f5c53fb1d3e6092c0da1d5ac Mon Sep 17 00:00:00 2001 From: Jalinson Diaz Date: Tue, 12 Nov 2024 14:10:36 -0300 Subject: [PATCH 3/7] add new toolbar component --- .../dot-uve-toolbar.component.html | 1 + .../dot-uve-toolbar.component.scss | 0 .../dot-uve-toolbar.component.spec.ts | 22 +++++++++++++++++++ .../dot-uve-toolbar.component.ts | 11 ++++++++++ 4 files changed, 34 insertions(+) create mode 100644 core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.html create mode 100644 core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.scss create mode 100644 core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.spec.ts create mode 100644 core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.ts diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.html b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.html new file mode 100644 index 000000000000..8412fff6e6ce --- /dev/null +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.html @@ -0,0 +1 @@ +

dot-uve-toolbar works!

diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.scss b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.scss new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.spec.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.spec.ts new file mode 100644 index 000000000000..333421176be1 --- /dev/null +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.spec.ts @@ -0,0 +1,22 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DotUveToolbarComponent } from './dot-uve-toolbar.component'; + +describe('DotUveToolbarComponent', () => { + let component: DotUveToolbarComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [DotUveToolbarComponent] + }).compileComponents(); + + fixture = TestBed.createComponent(DotUveToolbarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.ts new file mode 100644 index 000000000000..e234bbbea17a --- /dev/null +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.ts @@ -0,0 +1,11 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; + +@Component({ + selector: 'dot-uve-toolbar', + standalone: true, + imports: [], + templateUrl: './dot-uve-toolbar.component.html', + styleUrl: './dot-uve-toolbar.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class DotUveToolbarComponent {} From 6e4a4597a598c84c947bce3a24110eca2b3a8a5b Mon Sep 17 00:00:00 2001 From: Jalinson Diaz Date: Tue, 12 Nov 2024 14:11:59 -0300 Subject: [PATCH 4/7] add uve toolbar --- .../edit-ema-editor.component.html | 7 ++++++- .../edit-ema-editor.component.scss | 3 ++- .../edit-ema-editor/edit-ema-editor.component.ts | 15 +++++---------- 3 files changed, 13 insertions(+), 12 deletions(-) diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.html b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.html index dfdabec7b995..3de3c502d8ce 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.html +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.html @@ -1,4 +1,9 @@ - +@if ($previewMode()) { + +} @else { + +} + @if ($editorProps().seoResults && ogTagsResults$) { = signal(undefined); readonly $editorProps = this.uveStore.$editorProps; + readonly $previewMode = this.uveStore.$previewMode; get contentWindow(): Window { return this.iframe.nativeElement.contentWindow; From 8d5e8fa371566d7e0a70a6356131fbf34bdd1c1a Mon Sep 17 00:00:00 2001 From: Jalinson Diaz Date: Tue, 12 Nov 2024 14:31:02 -0300 Subject: [PATCH 5/7] add test for withFlags --- .../edit-ema/portlet/src/lib/shared/consts.ts | 4 +- .../portlet/src/lib/store/dot-uve.store.ts | 5 +- .../store/features/flags/withFlags.spec.ts | 81 +++++++++++++++++++ .../src/lib/store/features/flags/withFlags.ts | 1 + 4 files changed, 87 insertions(+), 4 deletions(-) create mode 100644 core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/flags/withFlags.spec.ts diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/shared/consts.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/shared/consts.ts index 764a21436b0c..5a491fe8f2f0 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/shared/consts.ts +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/shared/consts.ts @@ -1,6 +1,6 @@ import { InjectionToken } from '@angular/core'; -import { DotPersona } from '@dotcms/dotcms-models'; +import { DotPersona, FeaturedFlags } from '@dotcms/dotcms-models'; import { CommonErrors } from './enums'; import { CommonErrorsInfo } from './models'; @@ -67,3 +67,5 @@ export const DEFAULT_PERSONA: DotPersona = { hasLiveVersion: false, modUser: 'system' }; + +export const UVE_FEATURE_FLAGS = [FeaturedFlags.FEATURE_FLAG_UVE_PREVIEW_MODE]; diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/dot-uve.store.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/dot-uve.store.ts index 22c24baca60a..be75b88eef5d 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/dot-uve.store.ts +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/dot-uve.store.ts @@ -2,8 +2,6 @@ import { patchState, signalStore, withComputed, withMethods, withState } from '@ import { computed } from '@angular/core'; -import { FeaturedFlags } from '@dotcms/dotcms-models'; - import { withEditor } from './features/editor/withEditor'; import { withFlags } from './features/flags/withFlags'; import { withLayout } from './features/layout/withLayout'; @@ -11,6 +9,7 @@ import { withLoad } from './features/load/withLoad'; import { ShellProps, TranslateProps, UVEState } from './models'; import { DotPageApiResponse } from '../services/dot-page-api.service'; +import { UVE_FEATURE_FLAGS } from '../shared/consts'; import { UVE_STATUS } from '../shared/enums'; import { getErrorPayload, getRequestHostName, sanitizeURL } from '../utils'; @@ -149,5 +148,5 @@ export const UVEStore = signalStore( withLoad(), withLayout(), withEditor(), - withFlags([FeaturedFlags.FEATURE_FLAG_UVE_PREVIEW_MODE]) + withFlags(UVE_FEATURE_FLAGS) ); diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/flags/withFlags.spec.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/flags/withFlags.spec.ts new file mode 100644 index 000000000000..47157a47d1cc --- /dev/null +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/flags/withFlags.spec.ts @@ -0,0 +1,81 @@ +import { describe } from '@jest/globals'; +import { createServiceFactory, SpectatorService } from '@ngneat/spectator/jest'; +import { signalStore, withState } from '@ngrx/signals'; +import { of } from 'rxjs'; + +import { DotPropertiesService } from '@dotcms/data-access'; +import { FeaturedFlags } from '@dotcms/dotcms-models'; + +import { withFlags } from './withFlags'; + +import { DotPageApiParams } from '../../../services/dot-page-api.service'; +import { UVE_FEATURE_FLAGS } from '../../../shared/consts'; +import { UVE_STATUS } from '../../../shared/enums'; +import { UVEState } from '../../models'; + +const initialState: UVEState = { + isEnterprise: false, + languages: [], + pageAPIResponse: null, + currentUser: null, + experiment: null, + errorCode: null, + params: {} as DotPageApiParams, + status: UVE_STATUS.LOADING, + isTraditionalPage: true, + canEditPage: false, + pageIsLocked: true +}; + +export const uveStoreMock = signalStore( + withState(initialState), + withFlags(UVE_FEATURE_FLAGS) +); + +const MOCK_RESPONSE = UVE_FEATURE_FLAGS.reduce((acc, flag) => { + acc[flag] = Math.random() * 10 > 4.5; // This way we have a 65% chance of having true + + return acc; +}, {}); + +describe('withFlags', () => { + let spectator: SpectatorService>; + let store: InstanceType; + + const createService = createServiceFactory({ + service: uveStoreMock, + providers: [ + { + provide: DotPropertiesService, + useValue: { + getFeatureFlags: jest.fn().mockReturnValue(of(MOCK_RESPONSE)) + } + } + ] + }); + + beforeEach(() => { + spectator = createService(); + store = spectator.service; + }); + + describe('onInit', () => { + it('should call propertiesService.getFeatureFlags with flags', () => { + const propertiesService = spectator.inject(DotPropertiesService); + + expect(propertiesService.getFeatureFlags).toHaveBeenCalledWith(UVE_FEATURE_FLAGS); + }); + + it('should patch state with flags', () => { + expect(store.flags()).toEqual(MOCK_RESPONSE); + }); + }); + + describe('computed', () => { + it('should return $previewMode', () => { + expect(store.$previewMode()).toEqual( + MOCK_RESPONSE[FeaturedFlags.FEATURE_FLAG_UVE_PREVIEW_MODE] + ); + }); + }); +}); diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/flags/withFlags.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/flags/withFlags.ts index 36840c981f6a..4fdd3b8308e4 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/flags/withFlags.ts +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/flags/withFlags.ts @@ -32,6 +32,7 @@ export function withFlags(flags: FeaturedFlags[]) { withState({ flags: {} }), withComputed(({ flags }) => { return { + // You can add here more computed properties if needed $previewMode: computed(() => { const currentFlags = flags(); From 43d5c3a5b5dd7cf47c5600cefe904972e94f13c9 Mon Sep 17 00:00:00 2001 From: Jalinson Diaz Date: Tue, 12 Nov 2024 17:07:46 -0300 Subject: [PATCH 6/7] add and fix test --- .../dot-ema-shell.component.spec.ts | 6 ++++ .../edit-ema-editor.component.spec.ts | 30 +++++++++++++++++-- .../edit-ema/portlet/src/lib/shared/mocks.ts | 10 ++++++- .../src/lib/store/dot-uve.store.spec.ts | 8 ++++- .../store/features/flags/withFlags.spec.ts | 8 +++++ .../src/lib/store/features/flags/withFlags.ts | 12 ++++++-- 6 files changed, 67 insertions(+), 7 deletions(-) diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.spec.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.spec.ts index c07b3966cd5d..97c92b87865e 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.spec.ts +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.spec.ts @@ -27,6 +27,7 @@ import { DotLanguagesService, DotLicenseService, DotMessageService, + DotPropertiesService, DotWorkflowActionsFireService, PushPublishService } from '@dotcms/data-access'; @@ -56,6 +57,7 @@ import { DotPageApiService } from '../services/dot-page-api.service'; import { DEFAULT_PERSONA, WINDOW } from '../shared/consts'; import { FormStatus, NG_CUSTOM_EVENTS } from '../shared/enums'; import { + dotPropertiesServiceMock, PAGE_RESPONSE_BY_LANGUAGE_ID, PAGE_RESPONSE_URL_CONTENT_MAP, PAYLOAD_MOCK @@ -103,6 +105,10 @@ describe('DotEmaShellComponent', () => { DotMessageService, DialogService, DotWorkflowActionsFireService, + { + provide: DotPropertiesService, + useValue: dotPropertiesServiceMock + }, { provide: DotcmsConfigService, useValue: new DotcmsConfigServiceMock() diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.spec.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.spec.ts index 63e3a32cb453..c753863286e9 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.spec.ts +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.spec.ts @@ -36,6 +36,7 @@ import { DotLicenseService, DotMessageService, DotPersonalizeService, + DotPropertiesService, DotSeoMetaTagsService, DotSeoMetaTagsUtilService, DotTempFileUploadService, @@ -72,6 +73,7 @@ import { import { DotEditEmaWorkflowActionsComponent } from './components/dot-edit-ema-workflow-actions/dot-edit-ema-workflow-actions.component'; import { DotEmaRunningExperimentComponent } from './components/dot-ema-running-experiment/dot-ema-running-experiment.component'; +import { DotUveToolbarComponent } from './components/dot-uve-toolbar/dot-uve-toolbar.component'; import { CONTENT_TYPE_MOCK } from './components/edit-ema-palette/components/edit-ema-palette-content-type/edit-ema-palette-content-type.component.spec'; import { CONTENTLETS_MOCK } from './components/edit-ema-palette/edit-ema-palette.component.spec'; import { EditEmaToolbarComponent } from './components/edit-ema-toolbar/edit-ema-toolbar.component'; @@ -91,7 +93,8 @@ import { newContentlet, PAYLOAD_MOCK, UVE_PAGE_RESPONSE_MAP, - EMA_DRAG_ITEM_CONTENTLET_MOCK + EMA_DRAG_ITEM_CONTENTLET_MOCK, + dotPropertiesServiceMock } from '../shared/mocks'; import { ActionPayload, ContentTypeDragPayload } from '../shared/models'; import { UVEStore } from '../store/dot-uve.store'; @@ -145,6 +148,13 @@ const createRouting = () => UVEStore, DotFavoritePageService, DotESContentService, + { + provide: DotPropertiesService, + useValue: { + ...dotPropertiesServiceMock, + getKeyAsList: () => of([]) + } + }, { provide: DotAlertConfirmService, useValue: { @@ -366,7 +376,6 @@ describe('EditEmaEditorComponent', () => { dotWorkflowActionsFireService = spectator.inject(DotWorkflowActionsFireService, true); router = spectator.inject(Router, true); dotPageApiService = spectator.inject(DotPageApiService, true); - addMessageSpy = jest.spyOn(messageService, 'add'); store.init({ @@ -408,6 +417,23 @@ describe('EditEmaEditorComponent', () => { }); }); + it('should show the old toolbar when FEATURE_FLAG_UVE_PREVIEW_MODE is false', () => { + const toolbar = spectator.query(EditEmaToolbarComponent); + + expect(toolbar).not.toBeNull(); + }); + + it('should show the new toolbar when FEATURE_FLAG_UVE_PREVIEW_MODE is true', () => { + store.setFlags({ + FEATURE_FLAG_UVE_PREVIEW_MODE: true + }); + spectator.detectChanges(); + + const toolbar = spectator.query(DotUveToolbarComponent); + + expect(toolbar).not.toBeNull(); + }); + it('should hide components when the store changes for a variant', () => { const componentsToHide = [ 'palette', diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/shared/mocks.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/shared/mocks.ts index 0d85461015e7..853e3801d16a 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/shared/mocks.ts +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/shared/mocks.ts @@ -3,7 +3,8 @@ import { of } from 'rxjs'; import { DEFAULT_VARIANT_ID, DotPageContainerStructure, - CONTAINER_SOURCE + CONTAINER_SOURCE, + FeaturedFlags } from '@dotcms/dotcms-models'; import { mockSites, @@ -956,3 +957,10 @@ export const UVE_PAGE_RESPONSE_MAP = { containers: dotPageContainerStructureMock }) }; + +export const dotPropertiesServiceMock = { + getFeatureFlags: () => + of({ + [FeaturedFlags.FEATURE_FLAG_UVE_PREVIEW_MODE]: false + }) +}; diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/dot-uve.store.spec.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/dot-uve.store.spec.ts index c7297b633cd6..89ca17aa9b41 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/dot-uve.store.spec.ts +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/dot-uve.store.spec.ts @@ -16,7 +16,8 @@ import { DotExperimentsService, DotLanguagesService, DotLicenseService, - DotMessageService + DotMessageService, + DotPropertiesService } from '@dotcms/data-access'; import { LoginService } from '@dotcms/dotcms-js'; import { @@ -37,6 +38,7 @@ import { UVE_STATUS } from '../shared/enums'; import { BASE_SHELL_ITEMS, BASE_SHELL_PROPS_RESPONSE, + dotPropertiesServiceMock, HEADLESS_BASE_QUERY_PARAMS, MOCK_RESPONSE_HEADLESS, MOCK_RESPONSE_VTL, @@ -65,6 +67,10 @@ describe('UVEStore', () => { MessageService, mockProvider(Router), mockProvider(ActivatedRoute), + { + provide: DotPropertiesService, + useValue: dotPropertiesServiceMock + }, { provide: DotPageApiService, useValue: { diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/flags/withFlags.spec.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/flags/withFlags.spec.ts index 47157a47d1cc..0282702d8ab9 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/flags/withFlags.spec.ts +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/flags/withFlags.spec.ts @@ -70,7 +70,15 @@ describe('withFlags', () => { expect(store.flags()).toEqual(MOCK_RESPONSE); }); }); + describe('methods', () => { + describe('setFlags', () => { + it('should patch state with flags', () => { + store.setFlags(MOCK_RESPONSE); + expect(store.flags()).toEqual(MOCK_RESPONSE); + }); + }); + }); describe('computed', () => { it('should return $previewMode', () => { expect(store.$previewMode()).toEqual( diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/flags/withFlags.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/flags/withFlags.ts index 4fdd3b8308e4..91eee9336f04 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/flags/withFlags.ts +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/flags/withFlags.ts @@ -4,6 +4,7 @@ import { type, withComputed, withHooks, + withMethods, withState } from '@ngrx/signals'; @@ -14,7 +15,7 @@ import { take } from 'rxjs/operators'; import { DotPropertiesService } from '@dotcms/data-access'; import { FeaturedFlags } from '@dotcms/dotcms-models'; -import { WithFlagsState } from './models'; +import { UVEFlags, WithFlagsState } from './models'; import { UVEState } from '../../models'; @@ -36,10 +37,15 @@ export function withFlags(flags: FeaturedFlags[]) { $previewMode: computed(() => { const currentFlags = flags(); - return currentFlags[FeaturedFlags.FEATURE_FLAG_UVE_PREVIEW_MODE]; + return Boolean(currentFlags[FeaturedFlags.FEATURE_FLAG_UVE_PREVIEW_MODE]); }) }; }), + withMethods((store) => ({ + setFlags: (flags: UVEFlags) => { + patchState(store, { flags: { ...flags } }); + } + })), withHooks({ onInit: (store) => { const propertiesService = inject(DotPropertiesService); @@ -48,7 +54,7 @@ export function withFlags(flags: FeaturedFlags[]) { .getFeatureFlags(flags) .pipe(take(1)) .subscribe((flags) => { - patchState(store, { flags: { ...flags } }); + store.setFlags(flags); }); } }) From c6becdc726ff2adbf2bc318e645268d4856abb0d Mon Sep 17 00:00:00 2001 From: Jalinson Diaz Date: Tue, 12 Nov 2024 17:34:55 -0300 Subject: [PATCH 7/7] Update withFlags.spec.ts --- .../portlet/src/lib/store/features/flags/withFlags.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/flags/withFlags.spec.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/flags/withFlags.spec.ts index 0282702d8ab9..6bd7d6947d4f 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/flags/withFlags.spec.ts +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/flags/withFlags.spec.ts @@ -33,7 +33,7 @@ export const uveStoreMock = signalStore( ); const MOCK_RESPONSE = UVE_FEATURE_FLAGS.reduce((acc, flag) => { - acc[flag] = Math.random() * 10 > 4.5; // This way we have a 65% chance of having true + acc[flag] = true; return acc; }, {});