fix: Add popover attribute to system error container (#24093)

E.g. Dialog can obscure the message

Fixes #24094

---------

Co-authored-by: Marco Collovati <marco@vaadin.com>

Author: TatuLund

flow-client/src/main/java/com/vaadin/client/SystemErrorHandler.java

@@ -275,6 +275,8 @@ private Element handleError(String caption, String message, String details,
             String querySelector) {
         Document document = Browser.getDocument();
         Element systemErrorContainer = document.createDivElement();
+        // Set the popover attribute for native popovers.
+        systemErrorContainer.setAttribute("popover", "manual");
         systemErrorContainer.setClassName("v-system-error");
 
         if (caption != null) {
@@ -311,10 +313,21 @@ private Element handleError(String caption, String message, String details,
         } else {
             document.getBody().appendChild(systemErrorContainer);
         }
+        showPopover(systemErrorContainer);
 
         return systemErrorContainer;
     }
 
+    // @formatter:off
+    private native void showPopover(Element el) 
+    /*-{
+        var fn = el && el.showPopover;
+        if (typeof fn === "function") {
+            fn.call(el);
+        }
+    }-*/;
+    // @formatter:on
+
     private static Throwable unwrapUmbrellaException(Throwable e) {
         if (e instanceof UmbrellaException) {
             Set<Throwable> causes = ((UmbrellaException) e).getCauses();

flow-server/src/main/java/com/vaadin/flow/server/BootstrapHandler.java

@@ -1565,8 +1565,8 @@ protected static void setupErrorDialogs(Element style) {
                 "position: absolute;" +
                 "color: black;" +
                 "background: white;" +
-                "top: 1em;" +
-                "right: 1em;" +
+                "margin-top: 1em;" +
+                "margin-right: 1em;" +
                 "border: 1px solid black;" +
                 "padding: 1em;" +
                 "z-index: 10000;" +

flow-tests/test-root-context/src/main/java/com/vaadin/flow/uitest/ui/InternalErrorView.java

@@ -18,7 +18,9 @@
 import java.io.IOException;
 
 import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.component.html.H3;
 import com.vaadin.flow.component.html.NativeButton;
+import com.vaadin.flow.dom.Style;
 import com.vaadin.flow.router.Route;
 import com.vaadin.flow.server.CustomizedSystemMessages;
 import com.vaadin.flow.server.DefaultSystemMessagesProvider;
@@ -57,9 +59,15 @@ public InternalErrorView() {
                 "Reset system messages", "reset-system-messages",
                 event -> resetSystemMessages());
 
+        Div popover = createPopover();
+        NativeButton openPopoverButton = new NativeButton("Open popover");
+        openPopoverButton.setId("open-popover");
+        popover.getId().ifPresent(popoverId -> openPopoverButton.getElement()
+                .setAttribute("popovertarget", popoverId));
+
         add(message, updateMessageButton, closeSessionButton,
                 enableNotificationButton, causeExceptionButton,
-                resetSystemMessagesButton);
+                openPopoverButton, resetSystemMessagesButton, popover);
     }
 
     private void showInternalError() {
@@ -99,4 +107,20 @@ private void resetSystemMessages() {
         VaadinService.getCurrent()
                 .setSystemMessagesProvider(DefaultSystemMessagesProvider.get());
     }
+
+    private Div createPopover() {
+        Div popover = new Div();
+        popover.setId("popover-div");
+        popover.getElement().setAttribute("popover", "manual");
+        popover.setSizeFull();
+        popover.getStyle().setPosition(Style.Position.ABSOLUTE);
+        popover.getStyle().setPadding("10px");
+        popover.getStyle().setBorder("2px solid black");
+        popover.add(new H3("Modal dialog"));
+        NativeButton causeExceptionButton = createButton("Cause exception",
+                "cause-exception-popover", event -> showInternalError());
+        popover.add(causeExceptionButton);
+        return popover;
+    }
+
 }

flow-tests/test-root-context/src/test/java/com/vaadin/flow/uitest/ui/InternalErrorIT.java

@@ -116,7 +116,7 @@ public void internalError_showNotification_clickNotification_refresh() {
                         + "a server-side exception",
                 isInternalErrorNotificationPresent());
 
-        getErrorNotification().click();
+        clickErrorNotification();
         try {
             waitUntil(driver -> !isMessageUpdated());
         } catch (TimeoutException e) {
@@ -154,6 +154,33 @@ public void internalError_showNotification_clickEsc_refresh() {
                 isInternalErrorNotificationPresent());
     }
 
+    @Test
+    public void popover_showNotification_notificationInteractable() {
+        clickButton(UPDATE);
+
+        clickButton("open-popover");
+        waitForElementPresent(By.id("cause-exception-popover"));
+        clickButton("cause-exception-popover");
+
+        Assert.assertTrue("The page should not be immediately refreshed after "
+                + "a server-side exception", isMessageUpdated());
+        Assert.assertTrue(
+                "'Internal error' notification should be present after "
+                        + "a server-side exception",
+                isInternalErrorNotificationPresent());
+
+        clickErrorNotification();
+        try {
+            waitUntil(driver -> !isMessageUpdated());
+        } catch (TimeoutException e) {
+            Assert.fail("After internal error, clicking the notification "
+                    + "should refresh the page, resetting the state of the UI.");
+        }
+        Assert.assertFalse(
+                "'Internal error' notification should be gone after refreshing",
+                isInternalErrorNotificationPresent());
+    }
+
     @After
     public void resetSystemMessages() {
         waitUntil(ExpectedConditions
@@ -177,7 +204,13 @@ private boolean isErrorNotificationPresent(String text) {
         if (!isElementPresent(By.className("v-system-error"))) {
             return false;
         }
-        return getErrorNotification().getAttribute("innerHTML").contains(text);
+        WebElement notification = getErrorNotification();
+        notification = ExpectedConditions.elementToBeClickable(notification)
+                .apply(driver);
+        if (notification == null) {
+            return false;
+        }
+        return notification.getText().contains(text);
     }
 
     private WebElement getErrorNotification() {
@@ -187,4 +220,12 @@ private WebElement getErrorNotification() {
     private void clickButton(String id) {
         findElement(By.id(id)).click();
     }
+
+    private void clickErrorNotification() {
+        // Do not use click() because it currently invokes JavaScript function
+        // instead of clicking on the element
+        new Actions(getDriver()).click(getErrorNotification()).build()
+                .perform();
+    }
+
 }