Added confirmation popup.

css/dashboards/dashboards.css

@@ -924,9 +924,11 @@
     top: 5%;
     overflow: hidden;
     position: absolute;
-    z-index: 100;
+    z-index: 1000;
     border-radius: 10px;
     padding: 20px;
+    pointer-events: all;
+    border: 1px solid var(--highcharts-neutral-color-20);
 }
 
 .highcharts-dashboards-edit-popup-close {

ts/Dashboards/EditMode/AccordionMenu.ts

@@ -27,6 +27,7 @@ import type Globals from '../Globals';
 import EditRenderer from './EditRenderer.js';
 import U from '../../Core/Utilities.js';
 import EditGlobals from './EditGlobals.js';
+import ConfirmationPopup from './ConfirmationPopup.js';
 const {
     createElement,
     merge,
@@ -67,7 +68,8 @@ class AccordionMenu {
     private chartOptionsJSON = {};
     private component?: Component;
     private oldOptionsBuffer: DeepPartial<Component.Options> = {};
-    private oldChartOptionsBuffer: Globals.AnyRecord = {};
+    private confirmationPopup?: ConfirmationPopup;
+    public waitingForConfirmation = false;
 
     /* *
      *
@@ -84,13 +86,22 @@ class AccordionMenu {
      * The component to render the menu for.
      */
     public renderContent(container: HTMLElement, component: Component): void {
+        const { editMode } = component.board;
         const menu = this;
         const editableOptions = component.editableOptions.getOptions();
         let option, content;
 
         this.component = component;
         this.oldOptionsBuffer = merge({}, component.options);
-        this.oldChartOptionsBuffer = {};
+
+        if (editMode) {
+            this.confirmationPopup = new ConfirmationPopup(
+                component.board.container,
+                editMode.iconsURLPrefix,
+                editMode,
+                { close: { icon: '' } }
+            );
+        }
 
         const accordionContainer = createElement(
             'div',
@@ -150,17 +161,8 @@ class AccordionMenu {
                 text: (component.board?.editMode || EditGlobals)
                     .lang.cancelButton,
                 className: EditGlobals.classNames.popupCancelBtn,
-                callback: async (): Promise<void> => {
-                    const oldOptions =
-                        this.oldOptionsBuffer as Partial<Component.Options>;
-
-                    await component.update(
-                        oldOptions
-                    );
-
-                    menu.changedOptions = {};
-                    menu.chartOptionsJSON = {};
-                    menu.closeSidebar();
+                callback: (): void => {
+                    this.showCancelConfirmationPopup();
                 }
             }
         );
@@ -341,6 +343,49 @@ class AccordionMenu {
         }
         return;
     }
+
+    private async discardChanges(): Promise<void> {
+        await this.component?.update(
+            this.oldOptionsBuffer as Partial<Component.Options>
+        );
+
+        this.changedOptions = {};
+        this.chartOptionsJSON = {};
+    }
+
+    /**
+     * Shows a confirmation popup when the user tries to discard changes.
+     */
+    public showCancelConfirmationPopup(): void {
+        const popup = this.confirmationPopup;
+        if (!popup || this.waitingForConfirmation) {
+            return;
+        }
+
+        this.waitingForConfirmation = true;
+        popup.show({
+            text: 'Are you sure you want to discard changes?',
+            confirmButton: {
+                value: 'Yes',
+                callback: async (): Promise<void> => {
+                    await this.discardChanges();
+                    this.waitingForConfirmation = false;
+                    this.closeSidebar();
+                },
+                context: this as any
+            },
+            cancelButton: {
+                value: 'No',
+                callback: (): void => {
+                    popup.closePopup();
+
+                    setTimeout((): void => {
+                        this.waitingForConfirmation = false;
+                    }, 100);
+                }
+            }
+        });
+    }
 }
 
 /* *

ts/Dashboards/EditMode/ConfirmationPopup.ts

@@ -97,6 +97,10 @@ class ConfirmationPopup extends BaseForm {
      * Options for confirmation popup.
      */
     public options?: ConfirmationPopup.Options;
+    /**
+     * Show options for confirmation popup.
+     */
+    public contentOptions?: ConfirmationPopup.ContentOptions;
 
     /* *
     *
@@ -133,14 +137,28 @@ class ConfirmationPopup extends BaseForm {
     }
 
     /**
-     * Adds content inside the popup.
+     * Adds events to the close button.
      *
-     * @param options
-     * Options for confirmation popup.
+     * @override BaseForm.closeButtonEvents
      */
-    public renderContent(
-        options: ConfirmationPopup.ContentOptions
-    ): void {
+    public closeButtonEvents(): void {
+        const cancelCallback = this.contentOptions?.cancelButton.callback;
+        if (!cancelCallback) {
+            return;
+        }
+
+        cancelCallback();
+    }
+
+    /**
+     * Adds content inside the popup.
+     */
+    public renderContent(): void {
+        const options = this.contentOptions;
+        if (!options) {
+            return;
+        }
+
         // Render content wrapper
         this.contentContainer = createElement(
             'div', {
@@ -187,12 +205,9 @@ class ConfirmationPopup extends BaseForm {
                 text: options.confirmButton.value,
                 className: EditGlobals.classNames.popupConfirmBtn,
                 callback: (): void => {
-                    // Run callback
-                    // confirmCallback.call(context);
                     options.confirmButton.callback.call(
                         options.confirmButton.context
                     );
-                    // Hide popup
                     this.closePopup();
                 }
             }
@@ -208,8 +223,9 @@ class ConfirmationPopup extends BaseForm {
     public show(
         options: ConfirmationPopup.ContentOptions
     ): void {
+        this.contentOptions = options;
         this.showPopup();
-        this.renderContent(options);
+        this.renderContent();
         this.editMode.setEditOverlay();
     }
 
@@ -256,7 +272,7 @@ namespace ConfirmationPopup {
     export interface ConfirmButton {
         value: string;
         callback: Function;
-        context: RowEditToolbar|CellEditToolbar;
+        context?: RowEditToolbar|CellEditToolbar;
     }
 
     export interface CancelButton{

ts/Dashboards/EditMode/SidebarPopup.ts

@@ -288,9 +288,9 @@ class SidebarPopup extends BaseForm {
             return;
         }
 
-        const type = context.getType();
+        this.type = context.getType();
 
-        if (type === 'cell') {
+        if (this.type === 'cell') {
             const component = (context as Cell).mountedComponent;
             if (!component) {
                 return;
@@ -432,9 +432,15 @@ class SidebarPopup extends BaseForm {
 
     /**
      * Function called when the close button is pressed.
+     *
+     * @override BaseForm.closeButtonEvents
      */
     public closeButtonEvents(): void {
-        this.hide();
+        if (this.type === 'cell') {
+            this.accordionMenu.showCancelConfirmationPopup();
+        } else {
+            this.hide();
+        }
     }
 
     public renderHeader(title: string, iconURL: string): void {
@@ -514,7 +520,11 @@ class SidebarPopup extends BaseForm {
                 !this.container.contains(event.target) &&
                 this.container.classList.value.includes('show')
             ) {
-                this.hide();
+                if (this.type === 'cell') {
+                    this.accordionMenu.showCancelConfirmationPopup();
+                } else {
+                    this.hide();
+                }
             }
         });