feat(FTM): New UVE Toolbar - Implement Workflows Action button (#30908)

This pull request introduces several changes to the `DotEmaShellComponent` and related components to integrate the `DotWorkflowsActionsService` and enhance workflow actions functionality. The most important changes include adding the new service to multiple components, updating component templates, and refactoring the `DotUveWorkflowActionsComponent`. ### Integration of `DotWorkflowsActionsService`: * Added `DotWorkflowsActionsService` to the imports and providers in `dot-ema-shell.component.ts` and `dot-ema-shell.component.spec.ts` to enable workflow actions. [[1]](diffhunk://#diff-8843e3a4ce8c16e83408b1a6dcc3ad54eaddd17f8e986bbdb502e11bd4446ab4R24) [[2]](diffhunk://#diff-8843e3a4ce8c16e83408b1a6dcc3ad54eaddd17f8e986bbdb502e11bd4446ab4R212-R217) [[3]](diffhunk://#diff-677330662fea6dadc7e48fd8455ec2a6fe60d624c7ed1f01f0a3e985aacd05c6L22-R23) [[4]](diffhunk://#diff-677330662fea6dadc7e48fd8455ec2a6fe60d624c7ed1f01f0a3e985aacd05c6R62) ### Component Template Updates: * Replaced the workflows button with the `dot-uve-workflow-actions` component in `dot-uve-toolbar.component.html` to improve the user interface for workflow actions. * Updated the `dot-uve-workflow-actions.component.html` to disable actions when editing is not allowed. ### Refactoring `DotUveWorkflowActionsComponent`: * Renamed `dot-edit-ema-workflow-actions` to `dot-uve-workflow-actions` and refactored the component to use `UVEStore` for managing state and actions. [[1]](diffhunk://#diff-0c14a7beca853a53da6f640191eefa9d4b9564b2473879c4cbd391d7ff091c1cL1-R1) [[2]](diffhunk://#diff-0c14a7beca853a53da6f640191eefa9d4b9564b2473879c4cbd391d7ff091c1cL22-R45) [[3]](diffhunk://#diff-0c14a7beca853a53da6f640191eefa9d4b9564b2473879c4cbd391d7ff091c1cL70-L75) [[4]](diffhunk://#diff-0c14a7beca853a53da6f640191eefa9d4b9564b2473879c4cbd391d7ff091c1cL102-L116) [[5]](diffhunk://#diff-0c14a7beca853a53da6f640191eefa9d4b9564b2473879c4cbd391d7ff091c1cL141-R111) [[6]](diffhunk://#diff-0c14a7beca853a53da6f640191eefa9d4b9564b2473879c4cbd391d7ff091c1cL150-R120) ### Test Updates: * Added mock providers and updated test cases in `dot-ema-info-display.component.spec.ts` and `dot-uve-toolbar.component.spec.ts` to accommodate the new service and component changes. [[1]](diffhunk://#diff-164a62c130e772cc25a858a58ce4c6d8099d21b119ce0ec61e9c297b94ba4297L24-R25) [[2]](diffhunk://#diff-164a62c130e772cc25a858a58ce4c6d8099d21b119ce0ec61e9c297b94ba4297R57-R62) [[3]](diffhunk://#diff-3eaa147616a5d1ff374a5fa27b0f38f0159a9039ef7e8d672dec43631f48a9e1L16-R17) [[4]](diffhunk://#diff-3eaa147616a5d1ff374a5fa27b0f38f0159a9039ef7e8d672dec43631f48a9e1R45) [[5]](diffhunk://#diff-3eaa147616a5d1ff374a5fa27b0f38f0159a9039ef7e8d672dec43631f48a9e1L95-R98) [[6]](diffhunk://#diff-3eaa147616a5d1ff374a5fa27b0f38f0159a9039ef7e8d672dec43631f48a9e1L110-R125) [[7]](diffhunk://#diff-3eaa147616a5d1ff374a5fa27b0f38f0159a9039ef7e8d672dec43631f48a9e1L363-R373) ### Codebase Simplification: * Simplified `DotUveToolbarComponent` by removing unused properties and methods, and integrating the new workflow actions component. [[1]](diffhunk://#diff-217a9e619d6590c4f652e85353b9637ba5e464ddeb0424be35aef39bb8dceb30R30) [[2]](diffhunk://#diff-217a9e619d6590c4f652e85353b9637ba5e464ddeb0424be35aef39bb8dceb30L49-R67) [[3]](diffhunk://#diff-217a9e619d6590c4f652e85353b9637ba5e464ddeb0424be35aef39bb8dceb30L74-L75) [[4]](diffhunk://#diff-217a9e619d6590c4f652e85353b9637ba5e464ddeb0424be35aef39bb8dceb30R86-R92) #### Videos https://github.com/user-attachments/assets/0d2f3692-1377-41ba-bd2f-443dcb13ee4b
dotCMS · Dec 16, 2024 · 7503306 · 7503306
1 parent aca3a06
commit 7503306
Show file tree

Hide file tree

Showing 30 changed files with 639 additions and 330 deletions.
diff --git a/...-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.spec.ts b/...-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.spec.ts
@@ -21,6 +21,7 @@ import {
     DotMessageService,
     DotPropertiesService,
     DotWorkflowActionsFireService,
+    DotWorkflowsActionsService,
     PushPublishService
 } from '@dotcms/data-access';
 import {
@@ -208,6 +209,12 @@ describe('DotEmaShellComponent', () => {
             DotWorkflowActionsFireService,
             Router,
             Location,
+            {
+                provide: DotWorkflowsActionsService,
+                useValue: {
+                    getByInode: () => of([])
+                }
+            },
             {
                 provide: DotPropertiesService,
                 useValue: dotPropertiesServiceMock
@@ -559,6 +566,23 @@ describe('DotEmaShellComponent', () => {
                 expect(spyloadPageAsset).toHaveBeenCalledWith({ url: '/my-awesome-page' });
             });
 
+            it('should get the workflow action when an `UPDATE_WORKFLOW_ACTION` event is received', () => {
+                const spyGetWorkflowActions = jest.spyOn(store, 'getWorkflowActions');
+
+                spectator.detectChanges();
+
+                spectator.triggerEventHandler(
+                    DotEmaDialogComponent,
+                    'action',
+                    DIALOG_ACTION_EVENT({
+                        name: NG_CUSTOM_EVENTS.UPDATE_WORKFLOW_ACTION
+                    })
+                );
+                spectator.detectChanges();
+
+                expect(spyGetWorkflowActions).toHaveBeenCalled();
+            });
+
             it('should trigger a store reload if the url is the same', () => {
                 const spyReload = jest.spyOn(store, 'reloadCurrentPage');
                 const spyLocation = jest.spyOn(location, 'go');

diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.ts
@@ -19,7 +19,8 @@ import {
     DotPageLayoutService,
     DotPageRenderService,
     DotSeoMetaTagsService,
-    DotSeoMetaTagsUtilService
+    DotSeoMetaTagsUtilService,
+    DotWorkflowsActionsService
 } from '@dotcms/data-access';
 import { SiteService } from '@dotcms/dotcms-js';
 import { DotPageToolsSeoComponent } from '@dotcms/portlets/dot-ema/ui';
@@ -58,6 +59,7 @@ import {
         DotPageRenderService,
         DotSeoMetaTagsService,
         DotSeoMetaTagsUtilService,
+        DotWorkflowsActionsService,
         {
             provide: WINDOW,
             useValue: window
@@ -111,6 +113,7 @@ export class DotEmaShellComponent implements OnInit, OnDestroy {
             ...(pageParams ?? {}),
             ...(viewParams ?? {})
         };
+
         this.#updateLocation(queryParams);
     });
 
@@ -131,6 +134,11 @@ export class DotEmaShellComponent implements OnInit, OnDestroy {
 
     handleNgEvent({ event }: DialogAction) {
         switch (event.detail.name) {
+            case NG_CUSTOM_EVENTS.UPDATE_WORKFLOW_ACTION: {
+                this.uveStore.getWorkflowActions();
+                break;
+            }
+
             case NG_CUSTOM_EVENTS.SAVE_PAGE: {
                 this.handleSavePageEvent(event);
                 break;

diff --git a/...ib/edit-ema-editor/components/dot-ema-info-display/dot-ema-info-display.component.spec.ts b/...ib/edit-ema-editor/components/dot-ema-info-display/dot-ema-info-display.component.spec.ts
@@ -21,7 +21,8 @@ import {
     DotExperimentsService,
     DotLanguagesService,
     DotLicenseService,
-    DotMessageService
+    DotMessageService,
+    DotWorkflowsActionsService
 } from '@dotcms/data-access';
 import { LoginService } from '@dotcms/dotcms-js';
 import { DEFAULT_VARIANT_NAME } from '@dotcms/dotcms-models';
@@ -53,6 +54,12 @@ describe('DotEmaInfoDisplayComponent', () => {
             MessageService,
             mockProvider(Router),
             mockProvider(ActivatedRoute),
+            {
+                provide: DotWorkflowsActionsService,
+                useValue: {
+                    getByInode: () => of([])
+                }
+            },
             {
                 provide: DotLanguagesService,
                 useValue: new DotLanguagesServiceMock()

diff --git a/...portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.html b/...portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.html
@@ -51,7 +51,7 @@
             data-testId="uve-toolbar-persona-selector" />
 
         @if (!preview) {
-            <span data-testId="uve-toolbar-workflow-actions">Workflows</span>
+            <dot-uve-workflow-actions />
         }
     </div>
 </p-toolbar>

diff --git a/...tlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.spec.ts b/...tlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.spec.ts
@@ -13,7 +13,8 @@ import {
     DotExperimentsService,
     DotLanguagesService,
     DotLicenseService,
-    DotPersonalizeService
+    DotPersonalizeService,
+    DotWorkflowsActionsService
 } from '@dotcms/data-access';
 import { LoginService } from '@dotcms/dotcms-js';
 import {
@@ -41,6 +42,7 @@ import {
 } from '../../../utils';
 import { DotEmaBookmarksComponent } from '../dot-ema-bookmarks/dot-ema-bookmarks.component';
 import { DotEmaRunningExperimentComponent } from '../dot-ema-running-experiment/dot-ema-running-experiment.component';
+import { DotUveWorkflowActionsComponent } from '../dot-uve-workflow-actions/dot-uve-workflow-actions.component';
 import { EditEmaLanguageSelectorComponent } from '../edit-ema-language-selector/edit-ema-language-selector.component';
 import { EditEmaPersonaSelectorComponent } from '../edit-ema-persona-selector/edit-ema-persona-selector.component';
 
@@ -107,14 +109,19 @@ describe('DotUveToolbarComponent', () => {
             HttpClientTestingModule,
             MockComponent(DotEmaBookmarksComponent),
             MockComponent(DotEmaRunningExperimentComponent),
-            MockComponent(EditEmaPersonaSelectorComponent)
+            MockComponent(EditEmaPersonaSelectorComponent),
+            MockComponent(DotUveWorkflowActionsComponent)
         ],
         providers: [
             UVEStore,
             provideHttpClientTesting(),
             mockProvider(ConfirmationService, {
                 confirm: jest.fn()
             }),
+
+            mockProvider(DotWorkflowsActionsService, {
+                getByInode: () => of([])
+            }),
             {
                 provide: DotLanguagesService,
                 useValue: new DotLanguagesServiceMock()
@@ -181,6 +188,12 @@ describe('DotUveToolbarComponent', () => {
             });
         });
 
+        it('should have a dot-uve-workflow-actions component', () => {
+            const workflowActions = spectator.query(DotUveWorkflowActionsComponent);
+
+            expect(workflowActions).toBeTruthy();
+        });
+
         describe('copy-url', () => {
             let button: DebugElement;
 
@@ -359,10 +372,6 @@ describe('DotUveToolbarComponent', () => {
         it('should have persona selector', () => {
             expect(spectator.query(byTestId('uve-toolbar-persona-selector'))).toBeTruthy();
         });
-
-        it('should have workflows button', () => {
-            expect(spectator.query(byTestId('uve-toolbar-workflow-actions'))).toBeTruthy();
-        });
     });
 
     describe('preview', () => {
@@ -411,8 +420,10 @@ describe('DotUveToolbarComponent', () => {
             expect(spectator.query(byTestId('uve-toolbar-running-experiment'))).toBeFalsy();
         });
 
-        it('should not have workflow actions', () => {
-            expect(spectator.query(byTestId('uve-toolbar-workflow-actions'))).toBeFalsy();
+        it('should not have a dot-uve-workflow-actions component', () => {
+            const workflowActions = spectator.query(DotUveWorkflowActionsComponent);
+
+            expect(workflowActions).toBeNull();
         });
     });
 

diff --git a/...a/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.ts b/...a/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.ts
@@ -27,6 +27,7 @@ import { UVEStore } from '../../../store/dot-uve.store';
 import { DotEmaBookmarksComponent } from '../dot-ema-bookmarks/dot-ema-bookmarks.component';
 import { DotEmaInfoDisplayComponent } from '../dot-ema-info-display/dot-ema-info-display.component';
 import { DotEmaRunningExperimentComponent } from '../dot-ema-running-experiment/dot-ema-running-experiment.component';
+import { DotUveWorkflowActionsComponent } from '../dot-uve-workflow-actions/dot-uve-workflow-actions.component';
 import { EditEmaLanguageSelectorComponent } from '../edit-ema-language-selector/edit-ema-language-selector.component';
 import { EditEmaPersonaSelectorComponent } from '../edit-ema-persona-selector/edit-ema-persona-selector.component';
 
@@ -46,10 +47,10 @@ import { EditEmaPersonaSelectorComponent } from '../edit-ema-persona-selector/ed
         SplitButtonModule,
         FormsModule,
         ReactiveFormsModule,
-        ChipModule,
         EditEmaPersonaSelectorComponent,
         EditEmaLanguageSelectorComponent,
-        ClipboardModule
+        DotUveWorkflowActionsComponent,
+        ChipModule
     ],
     providers: [DotPersonalizeService],
     templateUrl: './dot-uve-toolbar.component.html',
@@ -59,8 +60,10 @@ import { EditEmaPersonaSelectorComponent } from '../edit-ema-persona-selector/ed
 export class DotUveToolbarComponent {
     $personaSelector = viewChild<EditEmaPersonaSelectorComponent>('personaSelector');
     $languageSelector = viewChild<EditEmaLanguageSelectorComponent>('languageSelector');
-    #store = inject(UVEStore);
 
+    @Output() translatePage = new EventEmitter<{ page: DotPage; newLanguage: number }>();
+
+    readonly #store = inject(UVEStore);
     readonly #messageService = inject(MessageService);
     readonly #dotMessageService = inject(DotMessageService);
     readonly #confirmationService = inject(ConfirmationService);
@@ -71,8 +74,6 @@ export class DotUveToolbarComponent {
     readonly $apiURL = this.#store.$apiURL;
     readonly $personaSelectorProps = this.#store.$personaSelector;
 
-    @Output() translatePage = new EventEmitter<{ page: DotPage; newLanguage: number }>();
-
     readonly $styleToolbarClass = computed(() => {
         if (!this.$isPreviewMode()) {
             return 'uve-toolbar';
@@ -81,6 +82,13 @@ export class DotUveToolbarComponent {
         return 'uve-toolbar uve-toolbar-preview';
     });
 
+    readonly $pageInode = computed(() => {
+        return this.#store.pageAPIResponse()?.page.inode;
+    });
+
+    readonly $actions = this.#store.workflowLoading;
+    readonly $workflowLoding = this.#store.workflowLoading;
+
     protected readonly date = new Date();
 
     /**

diff --git a/...t-edit-ema-workflow-actions.component.css → ...ns/dot-uve-workflow-actions.component.css b/...t-edit-ema-workflow-actions.component.css → ...ns/dot-uve-workflow-actions.component.css
diff --git a/...-edit-ema-workflow-actions.component.html → ...s/dot-uve-workflow-actions.component.html b/...-edit-ema-workflow-actions.component.html → ...s/dot-uve-workflow-actions.component.html
@@ -2,4 +2,5 @@
     (actionFired)="handleActionTrigger($event)"
     [size]="'small'"
     [loading]="loading()"
+    [disabled]="!canEdit()"
     [actions]="actions()" />