Add RED.popover.dialog api

packages/node_modules/@node-red/editor-client/src/js/ui/common/popover.js

@@ -673,6 +673,74 @@ RED.popover = (function() {
                 show:show,
                 hide:hide
             }
+        },
+        dialog: function(options) {
+
+            const dialogContent = $('<div style="position:relative"></div>');
+
+            if (options.closeButton !== false) {
+                $('<button type="button" class="red-ui-button red-ui-button-small" style="float: right; margin-top: -4px; margin-right: -4px;"><i class="fa fa-times"></i></button>').appendTo(dialogContent).click(function(evt) {
+                    evt.preventDefault();
+                    close();
+                })
+            }
+
+            const dialogBody = $('<div class="red-ui-dialog-body"></div>').appendTo(dialogContent);
+            if (options.title) {
+                $('<h2>').text(options.title).appendTo(dialogBody);
+            }
+            $('<div>').css("text-align","left").html(options.content).appendTo(dialogBody);
+
+            const stepToolbar = $('<div>',{class:"red-ui-dialog-toolbar"}).appendTo(dialogContent);
+
+            if (options.buttons) {
+                options.buttons.forEach(button => {
+                    const btn = $('<button type="button" class="red-ui-button"></button>').text(button.text).appendTo(stepToolbar);
+                    if (button.class) {
+                        btn.addClass(button.class);
+                    }
+                    if (button.click) {
+                        btn.on('click', function(evt) {
+                            evt.preventDefault();
+                            button.click();
+                        })
+                    }
+
+                })
+            }
+
+            const width = 500;
+            const maxWidth = Math.min($(window).width()-10,Math.max(width || 0, 300));
+
+            let shade = $('<div class="red-ui-shade" style="z-index: 2000"></div>').appendTo(document.body);
+            shade.fadeIn()
+
+            let popover = RED.popover.create({
+                target: $(".red-ui-editor"),
+                width: width || "auto",
+                maxWidth: maxWidth+"px",
+                direction: "inset",
+                class: "red-ui-dialog",
+                trigger: "manual",
+                content: dialogContent
+            }).open()
+
+            function close() {
+                if (shade) {
+                    shade.fadeOut(() => {
+                        shade.remove()
+                        shade = null
+                    })
+                }
+                if (popover) {
+                    popover.close()
+                    popover = null
+                }
+            }
+
+            return {
+                close
+            }
         }
     }