From 0e70610b7e5ad32bf6ec75a3b675ae656fe89647 Mon Sep 17 00:00:00 2001 From: Valentino Giardino <77643678+valentinogiardino@users.noreply.github.com> Date: Mon, 23 Dec 2024 13:45:43 -0300 Subject: [PATCH] fix(uve): Hide workflow actions toolbar button when editing a variant #30726 (#31001) ### Proposed Changes * Conditionally render the `` component in the `EditEmaToolbarComponent` when `isDefaultVariant` is true. * Update the `ToolbarProps` model to include the `isDefaultVariant` property. ### Checklist - [x] Tests - [x] Translations - [x] Security Implications Contemplated (add notes if applicable) ### Additional Info The `isDefaultVariant` property determines whether the current page variant is the default. The `` component is displayed only when this condition is met, preventing errors from triggering workflow actions on variant editing pages. **Slack conversation:** https://dotcms.slack.com/archives/CQMHM7PNJ/p1734635875445969 ### Screenshots #### Before https://github.com/user-attachments/assets/f1d938e7-4dca-4fd4-a7aa-89872bb15be9 #### After https://github.com/user-attachments/assets/b8d0a20a-04de-4e51-acd8-59b766198255 --- .../edit-ema-toolbar.component.html | 4 +- .../edit-ema-toolbar.component.spec.ts | 46 +++++++++++++++++-- .../src/lib/store/features/editor/models.ts | 1 + .../editor/toolbar/withEditorToolbar.ts | 4 +- .../store/features/editor/withEditor.spec.ts | 30 ++++++++++++ 5 files changed, 79 insertions(+), 6 deletions(-) diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/edit-ema-toolbar/edit-ema-toolbar.component.html b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/edit-ema-toolbar/edit-ema-toolbar.component.html index 3c88816de67f..3cdfe903821f 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/edit-ema-toolbar/edit-ema-toolbar.component.html +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/edit-ema-toolbar/edit-ema-toolbar.component.html @@ -64,7 +64,9 @@ #personaSelector data-testId="persona-selector" /> - + @if ($toolbarProps().isDefaultVariant) { + + } @if ($toolbarProps().unlockButton; as unlockButton) { { runningExperiment: null, workflowActionsInode: pageAPIResponse?.page.inode, unlockButton: null, + isDefaultVariant: true, showInfoDisplay: shouldShowInfoDisplay, deviceSelector: { apiLink: `${params?.clientHost ?? 'http://localhost'}${pageAPI}`, @@ -405,12 +406,10 @@ describe('EditEmaToolbarComponent', () => { }); }); }); - it('should have a dot-uve-workflow-actions component', () => { const workflowActions = spectator.query(DotUveWorkflowActionsComponent); expect(workflowActions).toBeTruthy(); }); - describe('dot-ema-info-display', () => { it('should be hidden', () => { const infoDisplay = spectator.query(byTestId('info-display')); @@ -426,7 +425,7 @@ describe('EditEmaToolbarComponent', () => { }); }); - xdescribe('constrains', () => { + describe('constrains', () => { describe('dot-ema-info-display', () => { beforeEach(() => { spectator = createComponent({ @@ -466,6 +465,46 @@ describe('EditEmaToolbarComponent', () => { expect(infoDisplay).toBeDefined(); }); }); + describe('dot-uve-workflow-actions', () => { + beforeEach(() => { + spectator = createComponent({ + providers: [ + mockProvider(UVEStore, { + $toolbarProps: signal({ + bookmarksUrl, + copyUrl: '', + apiUrl: '', + currentLanguage: pageAPIResponse?.viewAs.language, + urlContentMap: null, + runningExperiment: null, + workflowActionsInode: '', + unlockButton: null, + isDefaultVariant: false, + showInfoDisplay: true, + deviceSelector: { + apiLink: '', + hideSocialMedia: true + }, + personaSelector: { + pageId: '', + value: DEFAULT_PERSONA + } + }), + setDevice: jest.fn(), + setSocialMedia: jest.fn(), + pageParams: signal(params) + }) + ] + }); + store = spectator.inject(UVEStore); + messageService = spectator.inject(MessageService); + confirmationService = spectator.inject(ConfirmationService); + }); + it('should not show when isDefaultVariant is false in the store', () => { + const workflowActions = spectator.query(DotUveWorkflowActionsComponent); + expect(workflowActions).toBeNull(); + }); + }); describe('experiments', () => { const experiment = getRunningExperimentMock(); @@ -499,7 +538,6 @@ describe('EditEmaToolbarComponent', () => { ] }); }); - describe('dot-ema-running-experiment', () => { it('should have attr', () => { const experiments = spectator.query(DotEmaRunningExperimentComponent); diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/models.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/models.ts index 8b1687f3dbf4..cf1b2f8caec3 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/models.ts +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/models.ts @@ -90,6 +90,7 @@ export interface ToolbarProps { bookmarksUrl: string; copyUrl: string; apiUrl: string; + isDefaultVariant: boolean; showInfoDisplay: boolean; currentLanguage: DotLanguage; runningExperiment?: DotExperiment; diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/toolbar/withEditorToolbar.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/toolbar/withEditorToolbar.ts index 61594b55cefe..5abd50896f22 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/toolbar/withEditorToolbar.ts +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/toolbar/withEditorToolbar.ts @@ -67,9 +67,10 @@ export function withEditorToolbar() { inode: pageAPIResponse?.page.inode, loading: store.status() === UVE_STATUS.LOADING }; + const isDefaultVariant = getIsDefaultVariant(pageAPIResponse?.viewAs.variantId); const shouldShowInfoDisplay = - !getIsDefaultVariant(pageAPIResponse?.viewAs.variantId) || + !isDefaultVariant || !store.canEditPage() || isPageLocked || !!store.device() || @@ -94,6 +95,7 @@ export function withEditorToolbar() { runningExperiment: isExperimentRunning ? experiment : null, workflowActionsInode: store.canEditPage() ? pageAPIResponse?.page.inode : null, unlockButton: shouldShowUnlock ? unlockButton : null, + isDefaultVariant, showInfoDisplay: shouldShowInfoDisplay, deviceSelector: { apiLink: `${clientHost}${pageAPI}`, diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/withEditor.spec.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/withEditor.spec.ts index ae318082d228..c1562eca832b 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/withEditor.spec.ts +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/withEditor.spec.ts @@ -130,6 +130,7 @@ describe('withEditor', () => { value: MOCK_RESPONSE_HEADLESS.viewAs.persona ?? DEFAULT_PERSONA }, runningExperiment: null, + isDefaultVariant: true, showInfoDisplay: false, unlockButton: null, urlContentMap: null, @@ -331,6 +332,35 @@ describe('withEditor', () => { expect(store.$toolbarProps().showInfoDisplay).toBe(false); }); }); + + describe('isDefaultVariant', () => { + it('should have isDefaultVariant as true if the page variant is default', () => { + patchState(store, { + pageAPIResponse: { + ...MOCK_RESPONSE_HEADLESS, + viewAs: { + ...MOCK_RESPONSE_HEADLESS.viewAs, + variantId: DEFAULT_VARIANT_ID + } + } + }); + + expect(store.$toolbarProps().isDefaultVariant).toBe(true); + }); + it('should have isDefaultVariant as false if the page is a variant different from default', () => { + patchState(store, { + pageAPIResponse: { + ...MOCK_RESPONSE_HEADLESS, + viewAs: { + ...MOCK_RESPONSE_HEADLESS.viewAs, + variantId: 'test' + } + } + }); + + expect(store.$toolbarProps().isDefaultVariant).toBe(false); + }); + }); }); describe('$infoDisplayOptions', () => {