3.1 cherry pick

.gitignore

@@ -43,7 +43,6 @@ flow-tests/**/package.json
 flow-tests/**/webpack*.js
 flow-tests/**/tsconfig.json
 flow-tests/**/pnpm-lock.yaml
-flow-tests/**/types.d.ts
 yarn.lock
 
 flow-client/src/main/resources/META-INF/resources/frontend/FlowClient.js

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

@@ -20,8 +20,6 @@
 
 import com.google.web.bindery.event.shared.UmbrellaException;
 
-import com.google.gwt.core.client.Scheduler;
-
 import com.vaadin.client.bootstrap.ErrorMessage;
 
 import elemental.client.Browser;
@@ -58,12 +56,8 @@ public SystemErrorHandler(Registry registry) {
      *            message details or null if there are no details
      */
     public void handleSessionExpiredError(String details) {
-        // Run asynchronously to guarantee that all executions in the Uidl are
-        // done (#7581)
-        Scheduler.get()
-                .scheduleDeferred(() -> handleUnrecoverableError(details,
-                        registry.getApplicationConfiguration()
-                                .getSessionExpiredError()));
+        handleUnrecoverableError(details, registry.getApplicationConfiguration()
+                .getSessionExpiredError());
     }
 
     /**

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

@@ -126,7 +126,7 @@ public static String toPrettyJson(JsonValue json) {
      * {@code value}.
      * <p>
      * If {@code value} is {@code null} then {@code attribute} is removed,
-     * otherwise {@code value.toString()} is set as its value.
+     * otherwise {@code value} is set as its value.
      *
      * @param element
      *            the DOM element owning attribute
@@ -136,11 +136,11 @@ public static String toPrettyJson(JsonValue json) {
      *            the value to update
      */
     public static void updateAttribute(Element element, String attribute,
-            Object value) {
+            String value) {
         if (value == null) {
             DomApi.wrap(element).removeAttribute(attribute);
         } else {
-            DomApi.wrap(element).setAttribute(attribute, value.toString());
+            DomApi.wrap(element).setAttribute(attribute, value);
         }
     }
 
@@ -227,7 +227,7 @@ public static native boolean hasJsProperty(Object object, String name)
     /**
      * Checks if the given value is explicitly undefined. <code>null</code>
      * values returns <code>false</code>.
-     * 
+     *
      * @param property
      *            the value to be verified
      * @return <code>true</code> is the value is explicitly undefined,

flow-client/src/main/java/com/vaadin/client/flow/binding/SimpleElementBindingStrategy.java

@@ -24,6 +24,7 @@
 import com.google.gwt.core.client.JavaScriptObject;
 import com.google.gwt.core.client.Scheduler;
 
+import com.vaadin.client.ApplicationConfiguration;
 import com.vaadin.client.Command;
 import com.vaadin.client.Console;
 import com.vaadin.client.ElementUtil;
@@ -289,9 +290,9 @@ private native void bindPolymerModelProperties(StateNode node,
     private native void hookUpPolymerElement(StateNode node, Element element)
     /*-{
         var self = this;
-    
+
         var originalPropertiesChanged = element._propertiesChanged;
-    
+
         if (originalPropertiesChanged) {
             element._propertiesChanged = function (currentProps, changedProps, oldProps) {
                 $entry(function () {
@@ -300,16 +301,16 @@ private native void hookUpPolymerElement(StateNode node, Element element)
                 originalPropertiesChanged.apply(this, arguments);
             };
         }
-    
-    
+
+
         var tree = [email protected]::getTree()();
-    
+
         var originalReady = element.ready;
-    
+
         element.ready = function (){
             originalReady.apply(this, arguments);
             @com.vaadin.client.PolymerUtils::fireReadyEvent(*)(element);
-    
+
             // The  _propertiesChanged method which is replaced above for the element
             // doesn't do anything for items in dom-repeat.
             // Instead it's called with some meaningful info for the <code>dom-repeat</code> element.
@@ -318,7 +319,7 @@ private native void hookUpPolymerElement(StateNode node, Element element)
             // which changes this method for any dom-repeat instance.
             var replaceDomRepeatPropertyChange = function(){
                 var domRepeat = element.root.querySelector('dom-repeat');
-    
+
                 if ( domRepeat ){
                  // If the <code>dom-repeat</code> element is in the DOM then
                  // this method should not be executed anymore. The logic below will replace
@@ -332,12 +333,12 @@ private native void hookUpPolymerElement(StateNode node, Element element)
                 // if dom-repeat is found => replace _propertiesChanged method in the prototype and mark it as replaced.
                 if ( !domRepeat.constructor.prototype.$propChangedModified){
                     domRepeat.constructor.prototype.$propChangedModified = true;
-    
+
                     var changed = domRepeat.constructor.prototype._propertiesChanged;
-    
+
                     domRepeat.constructor.prototype._propertiesChanged = function(currentProps, changedProps, oldProps){
                         changed.apply(this, arguments);
-    
+
                         var props = Object.getOwnPropertyNames(changedProps);
                         var items = "items.";
                         var i;
@@ -358,7 +359,7 @@ private native void hookUpPolymerElement(StateNode node, Element element)
                                     if( currentPropsItem && currentPropsItem.nodeId ){
                                         var nodeId = currentPropsItem.nodeId;
                                         var value = currentPropsItem[propertyName];
-    
+
                                         // this is an attempt to find the template element
                                         // which is not available as a context in the protype method
                                         var host = this.__dataHost;
@@ -369,7 +370,7 @@ private native void hookUpPolymerElement(StateNode node, Element element)
                                         while( !host.localName || host.__dataHost ){
                                             host = host.__dataHost;
                                         }
-    
+
                                         $entry(function () {
                                             @SimpleElementBindingStrategy::handleListItemPropertyChange(*)(nodeId, host, propertyName, value, tree);
                                         })();
@@ -380,7 +381,7 @@ private native void hookUpPolymerElement(StateNode node, Element element)
                     };
                 }
             };
-    
+
             // dom-repeat doesn't have to be in DOM even if template has it
             //  such situation happens if there is dom-if e.g. which evaluates to <code>false</code> initially.
             // in this case dom-repeat is not yet in the DOM tree until dom-if becomes <code>true</code>
@@ -395,7 +396,7 @@ private native void hookUpPolymerElement(StateNode node, Element element)
                 element.addEventListener('dom-change',replaceDomRepeatPropertyChange);
             }
         }
-    
+
     }-*/;
 
     private static void handleListItemPropertyChange(double nodeId,
@@ -629,16 +630,21 @@ private void updateVisibility(JsArray<EventRemover> listeners,
     private void updateVisibility(Element element, NodeMap visibilityData,
             Boolean visibility) {
         storeInitialHiddenAttribute(element, visibilityData);
-        WidgetUtil.updateAttribute(element, HIDDEN_ATTRIBUTE, visibility);
+        updateAttributeValue(
+                visibilityData.getNode().getTree().getRegistry()
+                        .getApplicationConfiguration(),
+                element, HIDDEN_ATTRIBUTE, visibility);
     }
 
     private void restoreInitialHiddenAttribute(Element element,
             NodeMap visibilityData) {
         MapProperty initialVisibility = storeInitialHiddenAttribute(element,
                 visibilityData);
         if (initialVisibility.hasValue()) {
-            WidgetUtil.updateAttribute(element, HIDDEN_ATTRIBUTE,
-                    initialVisibility.getValue());
+            updateAttributeValue(
+                    visibilityData.getNode().getTree().getRegistry()
+                            .getApplicationConfiguration(),
+                    element, HIDDEN_ATTRIBUTE, initialVisibility.getValue());
         }
     }
 
@@ -733,7 +739,10 @@ private void updateStyleProperty(MapProperty mapProperty, Element element) {
 
     private void updateAttribute(MapProperty mapProperty, Element element) {
         String name = mapProperty.getName();
-        WidgetUtil.updateAttribute(element, name, mapProperty.getValue());
+        updateAttributeValue(
+                mapProperty.getMap().getNode().getTree().getRegistry()
+                        .getApplicationConfiguration(),
+                element, name, mapProperty.getValue());
     }
 
     private EventRemover bindChildren(BindingContext context) {
@@ -1352,6 +1361,35 @@ private EventRemover bindClientCallableMethods(BindingContext context) {
                 (Element) context.htmlNode, context.node);
     }
 
+    private static void updateAttributeValue(
+            ApplicationConfiguration configuration, Element element,
+            String attribute, Object value) {
+        if (value == null || value instanceof String) {
+            WidgetUtil.updateAttribute(element, attribute, (String) value);
+        } else {
+            JsonValue jsonValue = WidgetUtil.crazyJsoCast(value);
+            if (JsonType.OBJECT.equals(jsonValue.getType())) {
+                JsonObject object = (JsonObject) jsonValue;
+                assert object.hasKey(
+                        NodeProperties.URI_ATTRIBUTE) : "Implementation error: JsonObject is recieved as an attribute value for '"
+                                + attribute + "' but it has no "
+                                + NodeProperties.URI_ATTRIBUTE + " key";
+                String uri = object.getString(NodeProperties.URI_ATTRIBUTE);
+                if (configuration.isWebComponentMode()) {
+                    String baseUri = configuration.getServiceUrl();
+                    baseUri = baseUri.endsWith("/") ? baseUri : baseUri + "/";
+                    WidgetUtil.updateAttribute(element, attribute,
+                            baseUri + uri);
+                } else {
+                    WidgetUtil.updateAttribute(element, attribute, uri);
+                }
+            } else {
+                WidgetUtil.updateAttribute(element, attribute,
+                        value.toString());
+            }
+        }
+    }
+
     private static EventExpression getOrCreateExpression(
             String expressionString) {
         if (expressionCache == null) {

flow-client/src/main/resources/META-INF/resources/frontend/VaadinDevmodeGizmo.js

@@ -344,9 +344,54 @@ class VaadinDevmodeGizmo extends LitElement {
     this.messages.push(msg);
   }
 
-  demoteNotification() {
-    if (this.notification) {
-      this.showMessage(this.notification);
+  dismissNotification(id) {
+    const index = this.findNotificationIndex(id);
+    if (index !== -1 && !this.notifications[index].deleted) {
+      const notification = this.notifications[index];
+
+      // user is explicitly dismissing a notification---after that we won't bug them with it
+      if (notification.dontShowAgain && notification.persistentId && !VaadinDevmodeGizmo.notificationDismissed(notification.persistentId)) {
+        let dismissed = window.localStorage.getItem(VaadinDevmodeGizmo.DISMISSED_NOTIFICATIONS_IN_LOCAL_STORAGE);
+        if (dismissed === null) {
+          dismissed = notification.persistentId;
+        } else {
+          dismissed = dismissed + ',' + notification.persistentId;
+        }
+        window.localStorage.setItem(VaadinDevmodeGizmo.DISMISSED_NOTIFICATIONS_IN_LOCAL_STORAGE, dismissed);
+      }
+
+      notification.deleted = true;
+      this.showMessage(notification.type, notification.message, notification.details, notification.link);
+
+      const self = this;
+      // give some time for the animation
+      setTimeout(() => {
+        const index = self.findNotificationIndex(id);
+        if (index != -1) {
+          this.notifications.splice(index, 1);
+          this.requestUpdate();
+        }
+      }, this.__transitionDuration);
+    }
+  }
+
+  findNotificationIndex(id) {
+    let index = -1;
+    this.notifications.some((notification, idx) => {
+      if (notification.id === id) {
+        index = idx;
+        return true;
+      }
+    });
+    return index;
+  }
+
+  toggleDontShowAgain(id) {
+    const index = this.notifications.findIndex(notification => notification.id === id);
+    if (index !== -1 && !this.notifications[index].deleted) {
+      const notification = this.notifications[index];
+      notification.dontShowAgain = !notification.dontShowAgain;
+      this.requestUpdate();
     }
     this.showNotification(null);
   }

flow-client/src/test-gwt/java/com/vaadin/client/flow/GwtEventHandlerTest.java

@@ -21,6 +21,7 @@
 import java.util.function.Consumer;
 import java.util.function.Supplier;
 
+import com.vaadin.client.ApplicationConfiguration;
 import com.vaadin.client.ClientEngineTestBase;
 import com.vaadin.client.Registry;
 import com.vaadin.client.WidgetUtil;
@@ -66,6 +67,8 @@ protected void gwtSetUp() throws Exception {
         registry = new Registry() {
             {
                 set(ConstantPool.class, new ConstantPool());
+                set(ApplicationConfiguration.class,
+                        new ApplicationConfiguration());
             }
         };
 
@@ -138,7 +141,8 @@ public void testClientCallablePromises() {
         delayTestFinish(100);
     }
 
-    private static native void addThen(Object promise, Consumer<String> callback)
+    private static native void addThen(Object promise,
+            Consumer<String> callback)
     /*-{
         promise.then($entry(function(value) {
             callback.@Consumer::accept(*)(value);

flow-client/src/test-gwt/java/com/vaadin/client/flow/GwtMultipleBindingTest.java

@@ -15,6 +15,7 @@
  */
 package com.vaadin.client.flow;
 
+import com.vaadin.client.ApplicationConfiguration;
 import com.vaadin.client.ClientEngineTestBase;
 import com.vaadin.client.ExistingElementMap;
 import com.vaadin.client.Registry;
@@ -91,6 +92,8 @@ protected void gwtSetUp() throws Exception {
             {
                 set(ConstantPool.class, new ConstantPool());
                 set(ExistingElementMap.class, new ExistingElementMap());
+                set(ApplicationConfiguration.class,
+                        new ApplicationConfiguration());
             }
         };
 

flow-client/src/test-gwt/java/com/vaadin/client/flow/GwtPropertyElementBinderTest.java

@@ -18,6 +18,7 @@
 import java.util.ArrayList;
 import java.util.List;
 
+import com.vaadin.client.ApplicationConfiguration;
 import com.vaadin.client.ClientEngineTestBase;
 import com.vaadin.client.ExistingElementMap;
 import com.vaadin.client.InitialPropertiesHandler;
@@ -58,6 +59,7 @@ private static class TestRegistry extends Registry {
                 ExistingElementMap existingElementMap) {
             this.constantPool = constantPool;
             this.existingElementMap = existingElementMap;
+            set(ApplicationConfiguration.class, new ApplicationConfiguration());
         }
 
         @Override

flow-server/src/main/java/com/vaadin/flow/component/HasStyle.java

@@ -63,7 +63,11 @@ default boolean removeClassName(String className) {
      *            <code>null</code> to remove all class names
      */
     default void setClassName(String className) {
-        getElement().setAttribute("class", className);
+        if(className == null) {
+            getElement().removeAttribute("class");
+        } else {
+            getElement().setAttribute("class", className);
+        }
     }
 
     /**