fix(uve): Hide workflow actions toolbar button when editing a variant #…

…30726 (#31001) ### Proposed Changes * Conditionally render the `<dot-uve-workflow-actions>` 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 `<dot-uve-workflow-actions>` 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
dotCMS · Dec 23, 2024 · 0e70610 · 0e70610
1 parent cbdbf73
commit 0e70610
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 6 deletions.
diff --git a/...rtlet/src/lib/edit-ema-editor/components/edit-ema-toolbar/edit-ema-toolbar.component.html b/...rtlet/src/lib/edit-ema-editor/components/edit-ema-toolbar/edit-ema-toolbar.component.html
@@ -64,7 +64,9 @@
             #personaSelector
             data-testId="persona-selector" />
 
-        <dot-uve-workflow-actions />
+        @if ($toolbarProps().isDefaultVariant) {
+            <dot-uve-workflow-actions />
+        }
 
         @if ($toolbarProps().unlockButton; as unlockButton) {
             <p-button

diff --git a/...et/src/lib/edit-ema-editor/components/edit-ema-toolbar/edit-ema-toolbar.component.spec.ts b/...et/src/lib/edit-ema-editor/components/edit-ema-toolbar/edit-ema-toolbar.component.spec.ts
@@ -167,6 +167,7 @@ describe('EditEmaToolbarComponent', () => {
                             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
@@ -90,6 +90,7 @@ export interface ToolbarProps {
     bookmarksUrl: string;
     copyUrl: string;
     apiUrl: string;
+    isDefaultVariant: boolean;
     showInfoDisplay: boolean;
     currentLanguage: DotLanguage;
     runningExperiment?: DotExperiment;

diff --git a/...libs/portlets/edit-ema/portlet/src/lib/store/features/editor/toolbar/withEditorToolbar.ts b/...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
@@ -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', () => {