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,18 @@
     }
 
     <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)"></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.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;
 }

core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/toolbar/withUVEToolbar.ts

@@ -14,7 +14,7 @@ import { DotDevice, DotExperimentStatus, SeoMetaTagsResult } from '@dotcms/dotcm
 
 import { DEFAULT_DEVICE, DEFAULT_PERSONA } from '../../../../shared/consts';
 import { UVE_STATUS } from '../../../../shared/enums';
-import { InfoOptions } from '../../../../shared/models';
+import { InfoOptions, UnlockOptions } from '../../../../shared/models';
 import {
     computePageIsLocked,
     createFavoritePagesURL,
@@ -110,6 +110,30 @@ export function withUVEToolbar() {
                     unlockButton: shouldShowUnlock ? unlockButton : null
                 };
             }),
+
+            $unlockButton: computed<UnlockOptions | null>(() => {
+                const pageAPIResponse = store.pageAPIResponse();
+                const currentUser = store.currentUser();
+                const isPreviewMode = store.pageParams()?.editorMode === UVE_MODE.PREVIEW;
+                const isLocked = computePageIsLocked(pageAPIResponse.page, currentUser);
+                const info = {
+                    message: pageAPIResponse.page.canLock
+                        ? 'editpage.toolbar.page.release.lock.locked.by.user'
+                        : 'editpage.locked-by',
+                    args: [pageAPIResponse.page.lockedByName]
+                };
+
+                const disabled = !pageAPIResponse.page.canLock;
+
+                return !isPreviewMode && isLocked
+                    ? {
+                          inode: pageAPIResponse.page.inode,
+                          loading: store.status() === UVE_STATUS.LOADING,
+                          info,
+                          disabled
+                      }
+                    : null;
+            }),
             $personaSelector: computed<PersonaSelectorProps>(() => {
                 const pageAPIResponse = store.pageAPIResponse();
 
@@ -130,21 +154,6 @@ export function withUVEToolbar() {
             $infoDisplayProps: computed<InfoOptions>(() => {
                 const pageAPIResponse = store.pageAPIResponse();
                 const canEditPage = store.canEditPage();
-                const socialMedia = store.socialMedia();
-                const currentUser = store.currentUser();
-                const isPreview = store.pageParams()?.editorMode === UVE_MODE.PREVIEW;
-
-                if (socialMedia && !isPreview) {
-                    return {
-                        icon: `pi pi-${socialMedia.toLowerCase()}`,
-                        id: 'socialMedia',
-                        info: {
-                            message: `Viewing <b>${socialMedia}</b> social media preview`,
-                            args: []
-                        },
-                        actionIcon: 'pi pi-times'
-                    };
-                }
 
                 if (!getIsDefaultVariant(pageAPIResponse?.viewAs.variantId)) {
                     const variantId = pageAPIResponse.viewAs.variantId;
@@ -169,24 +178,7 @@ export function withUVEToolbar() {
                     };
                 }
 
-                if (computePageIsLocked(pageAPIResponse.page, currentUser)) {
-                    let message = 'editpage.locked-by';
-
-                    if (!pageAPIResponse.page.canLock) {
-                        message = 'editpage.locked-contact-with';
-                    }
-
-                    return {
-                        icon: 'pi pi-lock',
-                        id: 'locked',
-                        info: {
-                            message,
-                            args: [pageAPIResponse.page.lockedByName]
-                        }
-                    };
-                }
-
-                if (!canEditPage) {
+                if (!pageAPIResponse.page.locked && !canEditPage) {
                     return {
                         icon: 'pi pi-exclamation-circle warning',
                         id: 'no-permission',

dotCMS/src/main/webapp/WEB-INF/messages/Language.properties

@@ -1479,6 +1479,7 @@ editpage.toolbar.nav.experiments=A/B
 editpage.toolbar.nav.page.tools=Page Tools
 editpage.toolbar.page.cant.edit=You don't have permission to edit this Page
 editpage.toolbar.page.locked.by.user=Locked by {0}
+editpage.toolbar.page.release.lock.locked.by.user=Unlock<br/><b>Locked</b> by {0}
 editpage.toolbar.preview.page=Preview
 editpage.toolbar.edit.url.map.content=Edit {0}
 editpage.toolbar.preview.page.clipboard=Preview Page