chore(FTM): Add Unlock button to new Toolbar

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

@@ -28,6 +28,19 @@
     }
 
     <div class="p-toolbar-group-end">
+        @if ($unlockButton(); as unlockButton) {
+            <p-button
+                [disabled]="unlockButton.disabled"
+                [pTooltip]="unlockButton.info.message | dm: unlockButton.info.args"
+                [escape]="false"
+                tooltipPosition="bottom"
+                icon="pi pi-lock"
+                styleClass="p-button-text p-button-sm p-button-rounded unlock-button"
+                [loading]="unlockButton.loading"
+                (click)="unlockPage(unlockButton.inode)"
+                data-testId="uve-toolbar-unlock-button"></p-button>
+        }
+
         @if (runningExperiment) {
             <dot-ema-running-experiment
                 [runningExperiment]="runningExperiment"

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.scss

@@ -15,6 +15,11 @@
         color: var(--color-palette-primary-500);
         cursor: pointer;
     }
+
+    .p-button.unlock-button:disabled {
+        pointer-events: auto;
+        color: $color-palette-primary-500;
+    }
 }
 
 .p-toolbar-group-start,

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.spec.ts

@@ -11,6 +11,7 @@ import { ConfirmationService, MessageService } from 'primeng/api';
 
 import { UVE_MODE } from '@dotcms/client';
 import {
+    DotContentletLockerService,
     DotDevicesService,
     DotExperimentsService,
     DotLanguagesService,
@@ -109,7 +110,8 @@ const baseUVEState = {
     patchViewParams: jest.fn(),
     orientation: signal(''),
     clearDeviceAndSocialMedia: jest.fn(),
-    device: signal(DEFAULT_DEVICES.find((device) => device.inode === 'default'))
+    device: signal(DEFAULT_DEVICES.find((device) => device.inode === 'default')),
+    $unlockButton: signal(null)
 };
 
 describe('DotUveToolbarComponent', () => {
@@ -118,6 +120,7 @@ describe('DotUveToolbarComponent', () => {
     let messageService: MessageService;
     let confirmationService: ConfirmationService;
     let devicesService: DotDevicesService;
+    let dotContentletLockerService: DotContentletLockerService;
 
     const fixedDate = new Date('2024-01-01');
     jest.spyOn(global, 'Date').mockImplementation(() => fixedDate);
@@ -135,6 +138,9 @@ describe('DotUveToolbarComponent', () => {
         providers: [
             UVEStore,
             provideHttpClientTesting(),
+            mockProvider(DotContentletLockerService, {
+                unlock: jest.fn().mockReturnValue(of({}))
+            }),
             mockProvider(ConfirmationService, {
                 confirm: jest.fn()
             }),
@@ -197,6 +203,7 @@ describe('DotUveToolbarComponent', () => {
             messageService = spectator.inject(MessageService, true);
             devicesService = spectator.inject(DotDevicesService);
             confirmationService = spectator.inject(ConfirmationService, true);
+            dotContentletLockerService = spectator.inject(DotContentletLockerService);
         });
 
         it('should have a dot-uve-workflow-actions component', () => {
@@ -217,6 +224,82 @@ describe('DotUveToolbarComponent', () => {
             });
         });
 
+        describe('unlock button', () => {
+            it('should be null', () => {
+                expect(spectator.query(byTestId('uve-toolbar-unlock-button'))).toBeNull();
+            });
+
+            it('should be true', () => {
+                baseUVEState.$unlockButton.set({
+                    inode: '123',
+                    disabled: false,
+                    loading: false,
+                    info: {
+                        message: 'editpage.toolbar.page.release.lock.locked.by.user',
+                        args: ['John Doe']
+                    }
+                });
+                spectator.detectChanges();
+
+                expect(spectator.query(byTestId('uve-toolbar-unlock-button'))).toBeTruthy();
+            });
+
+            it('should be disabled', () => {
+                baseUVEState.$unlockButton.set({
+                    disabled: true,
+                    loading: false,
+                    info: {
+                        message: 'editpage.toolbar.page.release.lock.locked.by.user',
+                        args: ['John Doe']
+                    },
+                    inode: '123'
+                });
+                spectator.detectChanges();
+                expect(
+                    spectator
+                        .query(byTestId('uve-toolbar-unlock-button'))
+                        .getAttribute('ng-reflect-disabled')
+                ).toEqual('true');
+            });
+
+            it('should be loading', () => {
+                baseUVEState.$unlockButton.set({
+                    loading: true,
+                    disabled: false,
+                    inode: '123',
+                    info: {
+                        message: 'editpage.toolbar.page.release.lock.locked.by.user',
+                        args: ['John Doe']
+                    }
+                });
+                spectator.detectChanges();
+                expect(
+                    spectator
+                        .query(byTestId('uve-toolbar-unlock-button'))
+                        .getAttribute('ng-reflect-loading')
+                ).toEqual('true');
+            });
+
+            it('should call dotContentletLockerService.unlockPage', () => {
+                const spy = jest.spyOn(dotContentletLockerService, 'unlock');
+
+                baseUVEState.$unlockButton.set({
+                    loading: true,
+                    disabled: false,
+                    inode: '123',
+                    info: {
+                        message: 'editpage.toolbar.page.release.lock.locked.by.user',
+                        args: ['John Doe']
+                    }
+                });
+                spectator.detectChanges();
+
+                spectator.click(byTestId('uve-toolbar-unlock-button'));
+
+                expect(spy).toHaveBeenCalledWith('123');
+            });
+        });
+
         describe('dot-ema-bookmarks', () => {
             it('should have attr', () => {
                 const bookmarks = spectator.query(DotEmaBookmarksComponent);

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.ts

@@ -1,3 +1,5 @@
+import { tapResponse } from '@ngrx/operators';
+
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import { NgClass, NgTemplateOutlet } from '@angular/common';
 import {
@@ -26,7 +28,12 @@ import { ToolbarModule } from 'primeng/toolbar';
 import { map } from 'rxjs/operators';
 
 import { UVE_MODE } from '@dotcms/client';
-import { DotDevicesService, DotMessageService, DotPersonalizeService } from '@dotcms/data-access';
+import {
+    DotContentletLockerService,
+    DotDevicesService,
+    DotMessageService,
+    DotPersonalizeService
+} from '@dotcms/data-access';
 import { DotPersona, DotLanguage, DotDeviceListItem } from '@dotcms/dotcms-models';
 import { DotMessagePipe } from '@dotcms/ui';
 
@@ -83,13 +90,16 @@ export class DotUveToolbarComponent {
     readonly #confirmationService = inject(ConfirmationService);
     readonly #personalizeService = inject(DotPersonalizeService);
     readonly #deviceService = inject(DotDevicesService);
+    readonly #dotContentletLockerService = inject(DotContentletLockerService);
 
     readonly $toolbar = this.#store.$uveToolbar;
     readonly $showWorkflowActions = this.#store.$showWorkflowsActions;
     readonly $isPreviewMode = this.#store.$isPreviewMode;
     readonly $apiURL = this.#store.$apiURL;
     readonly $personaSelectorProps = this.#store.$personaSelector;
     readonly $infoDisplayProps = this.#store.$infoDisplayProps;
+    readonly $unlockButton = this.#store.$unlockButton;
+
     readonly $devices: Signal<DotDeviceListItem[]> = toSignal(
         this.#deviceService.get().pipe(map((devices = []) => [...DEFAULT_DEVICES, ...devices])),
         {
@@ -299,4 +309,40 @@ export class DotUveToolbarComponent {
             }
         });
     }
+
+    /**
+     * Unlocks a page with the specified inode.
+     *
+     * @param {string} inode
+     * @memberof EditEmaToolbarComponent
+     */
+    unlockPage(inode: string) {
+        this.#messageService.add({
+            severity: 'info',
+            summary: this.#dotMessageService.get('edit.ema.page.unlock'),
+            detail: this.#dotMessageService.get('edit.ema.page.is.being.unlocked')
+        });
+
+        this.#dotContentletLockerService
+            .unlock(inode)
+            .pipe(
+                tapResponse({
+                    next: () => {
+                        this.#messageService.add({
+                            severity: 'success',
+                            summary: this.#dotMessageService.get('edit.ema.page.unlock'),
+                            detail: this.#dotMessageService.get('edit.ema.page.unlock.success')
+                        });
+                    },
+                    error: () => {
+                        this.#messageService.add({
+                            severity: 'error',
+                            summary: this.#dotMessageService.get('edit.ema.page.unlock'),
+                            detail: this.#dotMessageService.get('edit.ema.page.unlock.error')
+                        });
+                    }
+                })
+            )
+            .subscribe(() => this.#store.reloadCurrentPage());
+    }
 }

core-web/libs/portlets/edit-ema/portlet/src/lib/shared/models.ts

@@ -6,12 +6,21 @@ import { CommonErrors, DialogStatus, FormStatus } from './enums';
 
 import { DotPageApiParams } from '../services/dot-page-api.service';
 
+export interface MessagePipeOptions {
+    message: string;
+    args: string[];
+}
+
+export interface UnlockOptions {
+    inode: string;
+    loading: boolean;
+    info: MessagePipeOptions;
+    disabled: boolean;
+}
+
 export interface InfoOptions {
     icon: string;
-    info: {
-        message: string;
-        args: string[];
-    };
+    info: MessagePipeOptions;
     id: string;
     actionIcon?: string;
 }