#28172 Addition of Cancel Button to AI Image Block Editor Modal (#28191)

* QA feedback

* QA feedback

core-web/libs/block-editor/src/lib/extensions/ai-image-prompt/ai-image-prompt.component.html

@@ -23,17 +23,32 @@
                     [orientation]="vm.formValue?.size"
                     (activeIndexChange)="store.setGalleryActiveIndex($event)"
                     (regenerate)="store.generateImage()" />
-                <button
-                    class="align-self-end"
-                    *ngIf="vm.images.length || vm.isLoading"
-                    [disabled]="vm.isLoading || vm.images[vm.galleryActiveIndex].error"
-                    [label]="'block-editor.extension.ai-image.insert' | dm"
-                    (click)="store.setSelectedImage(vm.images[vm.galleryActiveIndex])"
-                    data-testid="submit-btn"
-                    pButton
-                    type="submit"
-                    icon="pi pi-check"></button>
+                <div class="dot-ai-image__buttons" *ngIf="vm.images.length || vm.isLoading">
+                    <button
+                        class="p-button-text"
+                        [label]="'Cancel' | dm"
+                        (click)="closeDialog()"
+                        data-testid="close-btn"
+                        type="button"
+                        pButton></button>
+                    <button
+                        class="align-self-end"
+                        [disabled]="vm.isLoading || vm.images[vm.galleryActiveIndex].error"
+                        [label]="'block-editor.extension.ai-image.insert' | dm"
+                        (click)="store.setSelectedImage(vm.images[vm.galleryActiveIndex])"
+                        data-testid="submit-btn"
+                        pButton
+                        type="submit"
+                        icon="pi pi-check"></button>
+                </div>
             </div>
+            <p-confirmDialog
+                [style]="{ width: '500px' }"
+                key="ai-image-prompt"
+                rejectButtonStyleClass="p-button-outlined"
+                acceptIcon="null"
+                rejectIcon="null">
+            </p-confirmDialog>
         </div>
     </p-dialog>
 </ng-container>

core-web/libs/block-editor/src/lib/extensions/ai-image-prompt/ai-image-prompt.component.scss

@@ -19,3 +19,9 @@
 dot-ai-image-prompt-gallery {
     margin-bottom: $spacing-3;
 }
+
+.dot-ai-image__buttons {
+    display: flex;
+    gap: $spacing-1;
+    justify-content: flex-end;
+}

core-web/libs/block-editor/src/lib/extensions/ai-image-prompt/ai-image-prompt.component.spec.ts

@@ -1,6 +1,7 @@
 import { byTestId, createComponentFactory, Spectator } from '@ngneat/spectator';
 import { of } from 'rxjs';
 
+import { ConfirmationService } from 'primeng/api';
 import { Dialog } from 'primeng/dialog';
 
 import { AIImagePromptComponent } from './ai-image-prompt.component';
@@ -17,6 +18,7 @@ import {
 describe('AIImagePromptComponent', () => {
     let spectator: Spectator<AIImagePromptComponent>;
     let store: DotAiImagePromptStore;
+    let confirmationService: ConfirmationService;
 
     const imagesMock: DotGeneratedAIImage[] = [
         { name: 'image1', url: 'image_url' },
@@ -48,6 +50,7 @@ describe('AIImagePromptComponent', () => {
     beforeEach(() => {
         spectator = createComponent();
         store = spectator.inject(DotAiImagePromptStore);
+        confirmationService = spectator.inject(ConfirmationService);
     });
 
     it('should hide dialog', () => {
@@ -83,4 +86,12 @@ describe('AIImagePromptComponent', () => {
         dialog.onHide.emit('true');
         expect(store.cleanError).toHaveBeenCalled();
     });
+
+    it('should call confirm dialog when try to close dialog', () => {
+        const closeBtn = spectator.query(byTestId('close-btn'));
+        jest.spyOn(confirmationService, 'confirm');
+
+        spectator.click(closeBtn);
+        expect(confirmationService.confirm).toHaveBeenCalled();
+    });
 });

core-web/libs/block-editor/src/lib/extensions/ai-image-prompt/ai-image-prompt.component.ts

@@ -4,6 +4,8 @@ import { AsyncPipe, NgIf } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { FormGroupDirective } from '@angular/forms';
 
+import { ConfirmationService } from 'primeng/api';
+import { ButtonModule } from 'primeng/button';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import { DialogModule } from 'primeng/dialog';
 
@@ -25,17 +27,33 @@ import { AiImagePromptGalleryComponent } from './components/ai-image-prompt-gall
         DialogModule,
         AsyncPipe,
         DotMessagePipe,
+        ButtonModule,
         ConfirmDialogModule,
         AiImagePromptFormComponent,
         AiImagePromptGalleryComponent
     ],
-    providers: [FormGroupDirective],
+    providers: [FormGroupDirective, ConfirmationService],
 
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AIImagePromptComponent {
     protected readonly vm$: Observable<VmAiImagePrompt> = inject(DotAiImagePromptStore).vm$;
     protected readonly ComponentStatus = ComponentStatus;
     private dotMessageService = inject(DotMessageService);
+    private confirmationService = inject(ConfirmationService);
     store: DotAiImagePromptStore = inject(DotAiImagePromptStore);
+
+    closeDialog(): void {
+        this.confirmationService.confirm({
+            key: 'ai-image-prompt',
+            header: this.dotMessageService.get('block-editor.extension.ai.confirmation.header'),
+            message: this.dotMessageService.get('block-editor.extension.ai.confirmation.message'),
+            icon: 'pi pi-exclamation-triangle',
+            acceptLabel: this.dotMessageService.get('Discard'),
+            rejectLabel: this.dotMessageService.get('Cancel'),
+            accept: () => {
+                this.store.hideDialog();
+            }
+        });
+    }
 }

core-web/libs/block-editor/src/lib/extensions/ai-image-prompt/components/ai-image-prompt-form/ai-image-prompt-form.component.html

@@ -68,9 +68,12 @@
                         >{{ 'block-editor.extension.ai-image.rewritten' | dm }}
                         <i
                             class="pi pi-copy"
+                            [pTooltip]="tooltipText"
                             (click)="copyToClipboard()"
-                            data-testid="copy-to-clipboard"></i
-                    ></label>
+                            tooltipPosition="bottom"
+                            hideDelay="800"
+                            data-testid="copy-to-clipboard"></i>
+                    </label>
                     <textarea
                         class="w-full ai-image-prompt__rewritten-textarea"
                         id="prompt-rewritten"

core-web/libs/block-editor/src/lib/extensions/ai-image-prompt/components/ai-image-prompt-form/ai-image-prompt-form.component.scss

@@ -21,6 +21,7 @@ form {
         margin: $spacing-0 0 $spacing-1 $spacing-5;
         font-size: $font-size-sm;
         color: $color-palette-gray-700;
+        word-break: break-word;
     }
 }
 

core-web/libs/block-editor/src/lib/extensions/ai-image-prompt/components/ai-image-prompt-form/ai-image-prompt-form.component.ts

@@ -26,6 +26,7 @@ import { ButtonModule } from 'primeng/button';
 import { DropdownModule } from 'primeng/dropdown';
 import { InputTextareaModule } from 'primeng/inputtextarea';
 import { RadioButtonModule } from 'primeng/radiobutton';
+import { TooltipModule } from 'primeng/tooltip';
 
 import { filter } from 'rxjs/operators';
 
@@ -46,6 +47,7 @@ import { PromptType } from '../../ai-image-prompt.models';
     imports: [
         ButtonModule,
         AccordionModule,
+        TooltipModule,
         RadioButtonModule,
         ReactiveFormsModule,
         FormsModule,
@@ -86,6 +88,7 @@ export class AiImagePromptFormComponent implements OnChanges, OnInit {
     promptLabel = 'block-editor.extension.ai-image.prompt';
     submitButtonLabel = 'block-editor.extension.ai-image.generate';
     requiredPrompt = true;
+    tooltipText: string = null;
 
     private isUpdatingValidators = false;
     private destroyRef = inject(DestroyRef);
@@ -125,6 +128,10 @@ export class AiImagePromptFormComponent implements OnChanges, OnInit {
 
     copyToClipboard(): void {
         navigator.clipboard.writeText(this.aiProcessedPrompt);
+        this.tooltipText = this.dotMessageService.get('Copied');
+        setTimeout(() => {
+            this.tooltipText = null;
+        }, 1000);
     }
 
     private initForm(): void {

core-web/libs/ui/src/lib/services/clipboard/ClipboardUtil.ts

@@ -3,6 +3,8 @@ import { Injectable } from '@angular/core';
 /**
  * Clipboard utils
  *
+ * @deprecated This class is deprecated, use navigator.clipboard.writeText instead.
+ *
  * @export
  * @class DotClipboardUtil
  */

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

@@ -1133,6 +1133,7 @@ details=Details
 Dictionary-Terms=Dictionary Terms
 dictionary=Dictionary
 diff=Diff
+Discard=Discard
 plain=Plain
 different-content-s-looks-like-the-key-fields-choosen=different content item(s)
 Disable-click-tracking=Disable click tracking
@@ -5661,6 +5662,9 @@ block-editor.extension.ai-image.api-error.missing-token=Error: Incorrect API key
 block-editor.extension.ai-image.api-error.error-publishing-ai-image=Error publishing AI image
 block-editor.extension.ai-image.api-error.no-choice-returned=No choices returned
 
+block-editor.extension.ai.confirmation.header=Discard Changes?
+block-editor.extension.ai.confirmation.message=It looks like you've made significant or complex edits. Are you sure you want to discard these changes? Any unsaved progress will be lost.
+
 editpage.language-change-missing-lang-populate.confirm.header=Create New Language Version?
 editpage.language-change-missing-lang-populate.confirm.message=Page does not exist in the selected language. Create a new version in {0}?
 editpage.viewing.variant=Viewing <b>{0}</b> Variant