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

core-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');

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;

core-web/libs/portlets/edit-ema/portlet/src/lib/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()

core-web/libs/portlets/edit-ema/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>

core-web/libs/portlets/edit-ema/portlet/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();
         });
     });
 

core-web/libs/portlets/edit-ema/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();
 
     /**

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-edit-ema-workflow-actions/dot-edit-ema-workflow-actions.component.html → core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-workflow-actions/dot-uve-workflow-actions.component.html

@@ -2,4 +2,5 @@
     (actionFired)="handleActionTrigger($event)"
     [size]="'small'"
     [loading]="loading()"
+    [disabled]="!canEdit()"
     [actions]="actions()" />