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
+            }
         }
     }
 

packages/node_modules/@node-red/editor-client/src/sass/popover.scss

@@ -205,3 +205,39 @@
     background: var(--red-ui-secondary-background);
     z-index: 2000;
 }
+
+
+.red-ui-popover.red-ui-dialog {
+    z-index: 2003;
+    --red-ui-popover-background: var(--red-ui-secondary-background);
+    --red-ui-popover-border: var(--red-ui-tourGuide-border);
+    --red-ui-popover-color: var(--red-ui-primary-text-color);
+
+    .red-ui-popover-content {
+        h2 {
+            text-align: center;
+            margin-top: 0px;
+            line-height: 1.2em;
+            color: var(--red-ui-tourGuide-heading-color);
+            i.fa {
+                font-size: 1.5em
+            }
+        }
+    }
+
+}
+
+.red-ui-dialog-toolbar {
+    min-height: 36px;
+    position: relative;
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+}
+.red-ui-dialog-body {
+    padding: 20px 40px 10px;
+    a {
+        color: var(--red-ui-text-color-link) !important;
+        text-decoration: none;
+    }
+}