Implement error level on client side (#9817)

Add additional class names and style to components and error indicators to distinguish different error levels.

Vaadin 8 implementation of #9816. Cherry picked changes and added compatibility package component changes and tests.

Resolves #3139

4 files changed, 373 insertions, 3 deletions

diff --git a/uitest/src/main/java/com/vaadin/tests/components/ErrorLevels.java b/uitest/src/main/java/com/vaadin/tests/components/ErrorLevels.java
new file mode 100644
index 0000000000..9ab5ca6f0b
--- /dev/null
+++ b/uitest/src/main/java/com/vaadin/tests/components/ErrorLevels.java
@@ -0,0 +1,210 @@
+package com.vaadin.tests.components;
+
+import java.util.Arrays;
+
+import com.vaadin.annotations.Theme;
+import com.vaadin.server.AbstractErrorMessage;
+import com.vaadin.server.ErrorMessage;
+import com.vaadin.server.ExternalResource;
+import com.vaadin.server.UserError;
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.shared.ui.ErrorLevel;
+import com.vaadin.ui.Accordion;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.CheckBox;
+import com.vaadin.ui.ComboBox;
+import com.vaadin.ui.DateField;
+import com.vaadin.ui.FormLayout;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.Link;
+import com.vaadin.ui.NativeButton;
+import com.vaadin.ui.Panel;
+import com.vaadin.ui.TabSheet;
+import com.vaadin.ui.TextField;
+import com.vaadin.ui.TwinColSelect;
+import com.vaadin.ui.themes.ValoTheme;
+
+@Theme("valo")
+public class ErrorLevels extends AbstractTestUI {
+
+    private ComboBox<ErrorLevel> errorLevels;
+    private Button button;
+    private Button borderlessButton;
+    private Link link;
+    private ComboBox<String> comboBox;
+    private TextField textField;
+    private TextField textFieldBorderless;
+    private TabSheet tabSheet;
+    private Accordion accordion;
+    private CheckBox checkBox;
+    private NativeButton nativeButton;
+    private FormLayout formLayout;
+    private TextField formLayoutTextField;
+    private Panel panel;
+    private DateField dateField;
+    private TwinColSelect twinColSelect;
+
+    private com.vaadin.v7.ui.ComboBox comboBoxCompat;
+    private com.vaadin.v7.ui.TextField textFieldCompat;
+    private com.vaadin.v7.ui.CheckBox checkBoxCompat;
+    private com.vaadin.v7.ui.DateField dateFieldCompat;
+    private com.vaadin.v7.ui.TwinColSelect twinColSelectCompat;
+
+    @Override
+    protected void setup(VaadinRequest request) {
+
+        errorLevels = new ComboBox<>("Error level",
+                Arrays.asList(ErrorLevel.values()));
+        errorLevels.setEmptySelectionAllowed(false);
+        errorLevels.setValue(ErrorLevel.ERROR);
+        errorLevels.addValueChangeListener(event -> setErrorMessages());
+        addComponent(errorLevels);
+
+        Label subtitle = new Label("Components");
+        subtitle.setStyleName(ValoTheme.LABEL_H3);
+        addComponent(subtitle);
+
+        // Button
+        button = new Button("Button");
+
+        borderlessButton = new Button("Borderless button");
+        borderlessButton.setStyleName(ValoTheme.BUTTON_BORDERLESS);
+
+        addComponent(new HorizontalLayout(button, borderlessButton));
+
+        // Native button
+        nativeButton = new NativeButton("Native button");
+        addComponent(nativeButton);
+
+        // Link
+        link = new Link("Link", new ExternalResource("#"));
+        addComponent(link);
+
+        // Combo box
+        comboBox = new ComboBox<>("Combo box");
+        addComponent(comboBox);
+
+        // Text field
+        textField = new TextField("Text field");
+        textField.setValue("text");
+
+        textFieldBorderless = new TextField("Borderless text field");
+        textFieldBorderless.setStyleName(ValoTheme.TEXTFIELD_BORDERLESS);
+        textFieldBorderless.setValue("text");
+
+        addComponent(new HorizontalLayout(textField, textFieldBorderless));
+
+        // Date field
+        dateField = new DateField("Date field");
+        addComponent(dateField);
+
+        // Check box
+        checkBox = new CheckBox("Check box");
+        addComponent(checkBox);
+
+        // Tab sheet
+        tabSheet = new TabSheet();
+        tabSheet.addTab(new Label("Label1"), "Tab1");
+        tabSheet.addTab(new Label("Label2"), "Tab2");
+        tabSheet.setWidth("400px");
+        addComponent(tabSheet);
+
+        // Accordion
+        accordion = new Accordion();
+        accordion.addTab(new Label("Label1"), "Tab1");
+        accordion.addTab(new Label("Label2"), "Tab2");
+        accordion.setWidth("400px");
+        addComponent(accordion);
+
+        // Form layout
+        formLayout = new FormLayout();
+        formLayout.setWidth("400px");
+
+        formLayoutTextField = new TextField("Form layout text field");
+        formLayout.addComponent(formLayoutTextField);
+
+        addComponent(formLayout);
+
+        // Panel
+        panel = new Panel();
+        panel.setContent(new Label("Panel"));
+        panel.setWidth("400px");
+        addComponent(panel);
+
+        // TwinColSelect
+        twinColSelect = new TwinColSelect("Twin col select");
+        addComponent(twinColSelect);
+
+        Label subtitleCompat = new Label("Compatibility components");
+        subtitleCompat.setStyleName(ValoTheme.LABEL_H3);
+        addComponent(subtitleCompat);
+
+        // Compatibility combo box
+        comboBoxCompat = new com.vaadin.v7.ui.ComboBox(
+                "Compatibility combo box");
+        addComponent(comboBoxCompat);
+
+        // Compatibility text field
+        textFieldCompat = new com.vaadin.v7.ui.TextField(
+                "Compatibility text field");
+        textFieldCompat.setValue("text");
+
+        // Compatibility check box
+        checkBoxCompat = new com.vaadin.v7.ui.CheckBox("Check box");
+        addComponent(checkBoxCompat);
+
+        // Compatibility date field
+        dateFieldCompat = new com.vaadin.v7.ui.DateField("Date field");
+        addComponent(dateFieldCompat);
+
+        // Compatibility twin col select
+        twinColSelectCompat = new com.vaadin.v7.ui.TwinColSelect(
+                "Twin col select");
+        addComponent(twinColSelectCompat);
+
+        setErrorMessages();
+
+        getLayout().setSpacing(true);
+    }
+
+    private void setErrorMessages() {
+        button.setComponentError(createErrorMessage("Button error"));
+        borderlessButton.setComponentError(
+                createErrorMessage("Borderless button error"));
+        link.setComponentError(createErrorMessage("Link error"));
+        comboBox.setComponentError(createErrorMessage("ComboBox error"));
+        textField.setComponentError(createErrorMessage("Text field error"));
+        textFieldBorderless.setComponentError(
+                createErrorMessage("Borderless text field error"));
+        tabSheet.setComponentError(createErrorMessage("Tab sheet error"));
+        tabSheet.getTab(0).setComponentError(createErrorMessage("Tab error"));
+        accordion.setComponentError(createErrorMessage("Accordion error"));
+        accordion.getTab(0).setComponentError(createErrorMessage("Tab error"));
+        checkBox.setComponentError(createErrorMessage("Check box error"));
+        nativeButton
+                .setComponentError(createErrorMessage("Native button error"));
+        formLayout.setComponentError(createErrorMessage("Form layout error"));
+        formLayoutTextField.setComponentError(
+                createErrorMessage("Form layout text field error"));
+        panel.setComponentError(createErrorMessage("Panel error"));
+        dateField.setComponentError(createErrorMessage("Date field error"));
+        twinColSelect
+                .setComponentError(createErrorMessage("Twin col select error"));
+        comboBoxCompat.setComponentError(
+                createErrorMessage("Compatibility combo box error"));
+        textFieldCompat.setComponentError(
+                createErrorMessage("Compatibility text field error"));
+        checkBoxCompat.setComponentError(
+                createErrorMessage("Compatibility check box error"));
+        dateFieldCompat.setComponentError(
+                createErrorMessage("Compatibility date field error"));
+        twinColSelectCompat.setComponentError(
+                createErrorMessage("Compatibility twin col select error"));
+    }
+
+    private ErrorMessage createErrorMessage(String text) {
+        return new UserError(text, AbstractErrorMessage.ContentMode.TEXT,
+                errorLevels.getValue());
+    }
+}
diff --git a/uitest/src/main/java/com/vaadin/tests/themes/valo/CommonParts.java b/uitest/src/main/java/com/vaadin/tests/themes/valo/CommonParts.java
index 6d7a67cfa8..4c83430832 100644
--- a/uitest/src/main/java/com/vaadin/tests/themes/valo/CommonParts.java
+++ b/uitest/src/main/java/com/vaadin/tests/themes/valo/CommonParts.java
@@ -20,11 +20,11 @@ import com.vaadin.icons.VaadinIcons;
 import com.vaadin.navigator.View;
 import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
 import com.vaadin.server.AbstractErrorMessage;
-import com.vaadin.server.ErrorMessage.ErrorLevel;
 import com.vaadin.server.Page;
 import com.vaadin.server.UserError;
 import com.vaadin.shared.Position;
 import com.vaadin.shared.ui.ContentMode;
+import com.vaadin.shared.ui.ErrorLevel;
 import com.vaadin.ui.Alignment;
 import com.vaadin.ui.Button;
 import com.vaadin.ui.Button.ClickEvent;
diff --git a/uitest/src/test/java/com/vaadin/tests/components/ErrorLevelsTest.java b/uitest/src/test/java/com/vaadin/tests/components/ErrorLevelsTest.java
new file mode 100644
index 0000000000..750545ce89
--- /dev/null
+++ b/uitest/src/test/java/com/vaadin/tests/components/ErrorLevelsTest.java
@@ -0,0 +1,160 @@
+package com.vaadin.tests.components;
+
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.Collection;
+import java.util.List;
+
+import org.junit.Assert;
+import org.junit.Test;
+import org.openqa.selenium.Keys;
+import org.openqa.selenium.WebElement;
+
+import com.vaadin.client.StyleConstants;
+import com.vaadin.shared.ui.ErrorLevel;
+import com.vaadin.testbench.By;
+import com.vaadin.testbench.elements.AccordionElement;
+import com.vaadin.testbench.elements.ButtonElement;
+import com.vaadin.testbench.elements.CheckBoxElement;
+import com.vaadin.testbench.elements.ComboBoxElement;
+import com.vaadin.testbench.elements.DateFieldElement;
+import com.vaadin.testbench.elements.FormLayoutElement;
+import com.vaadin.testbench.elements.LinkElement;
+import com.vaadin.testbench.elements.NativeButtonElement;
+import com.vaadin.testbench.elements.PanelElement;
+import com.vaadin.testbench.elements.TabSheetElement;
+import com.vaadin.testbench.elements.TwinColSelectElement;
+import com.vaadin.testbench.parallel.BrowserUtil;
+import com.vaadin.tests.tb3.SingleBrowserTest;
+
+public class ErrorLevelsTest extends SingleBrowserTest {
+
+    private ComboBoxElement errorLevelSelector;
+
+    @Override
+    public void setup() throws Exception {
+        super.setup();
+        openTestURL();
+
+        errorLevelSelector = $(ComboBoxElement.class).first();
+    }
+
+    @Test
+    public void testErrorIndicatorsClassName() {
+        ErrorLevel errorLevel = ErrorLevel.WARNING;
+        selectErrorLevel(errorLevel);
+
+        List<WebElement> errorIndicators = findElements(
+                By.className(StyleConstants.STYLE_NAME_ERROR_INDICATOR));
+        for (WebElement errorIndicator : errorIndicators) {
+            assertHasRightClassNames(errorIndicator,
+                    StyleConstants.STYLE_NAME_ERROR_INDICATOR, errorLevel);
+        }
+    }
+
+    @Test
+    public void testComponentsClassName() {
+        ErrorLevel errorLevel = ErrorLevel.WARNING;
+        selectErrorLevel(errorLevel);
+
+        // Button
+        ButtonElement buttonElement = $(ButtonElement.class).first();
+        assertHasRightClassNames(buttonElement, "v-button-error", errorLevel);
+
+        // Native button
+        NativeButtonElement nativeButtonElement = $(NativeButtonElement.class)
+                .first();
+        assertHasRightClassNames(nativeButtonElement, "v-nativebutton-error",
+                errorLevel);
+
+        // Link
+        LinkElement linkElement = $(LinkElement.class).first();
+        assertHasRightClassNames(linkElement, "v-link-error", errorLevel);
+
+        // Combo box
+        ComboBoxElement comboBoxElement = $(ComboBoxElement.class).get(1);
+        assertHasRightClassNames(comboBoxElement, "v-filterselect-error",
+                errorLevel);
+
+        // Date field
+        DateFieldElement dateFieldElement = $(DateFieldElement.class).first();
+        assertHasRightClassNames(dateFieldElement, "v-datefield-error",
+                errorLevel);
+
+        // Checkbox
+        CheckBoxElement checkBoxElement = $(CheckBoxElement.class).first();
+        assertHasRightClassNames(checkBoxElement, "v-checkbox-error",
+                errorLevel);
+
+        // Tab sheet
+        TabSheetElement tabSheetElement = $(TabSheetElement.class).first();
+        assertHasRightClassNames(tabSheetElement, "v-tabsheet-error",
+                errorLevel);
+
+        // Accordion
+        AccordionElement accordionElement = $(AccordionElement.class).first();
+        assertHasRightClassNames(accordionElement, "v-accordion-error",
+                errorLevel);
+
+        // Form layout
+        FormLayoutElement formLayoutElement = $(FormLayoutElement.class)
+                .first();
+        assertHasRightClassNames(formLayoutElement, "v-formlayout-error",
+                errorLevel);
+
+        // Panel
+        PanelElement panelElement = $(PanelElement.class).first();
+        assertHasRightClassNames(panelElement, "v-panel-error", errorLevel);
+
+        // Twin col select
+        TwinColSelectElement twinColSelectElement = $(
+                TwinColSelectElement.class).first();
+        assertHasRightClassNames(twinColSelectElement, "v-select-twincol-error",
+                errorLevel);
+    }
+
+    private void assertHasRightClassNames(WebElement element, String prefix,
+            ErrorLevel errorLevel) {
+        Assert.assertTrue("Element must have only one error level class name",
+                containsCorrectErrorLevelClassNameOnly(element, prefix,
+                        errorLevel));
+    }
+
+    private boolean containsCorrectErrorLevelClassNameOnly(WebElement element,
+            String prefix, ErrorLevel errorLevel) {
+        List<String> classNames = new ArrayList<String>(
+                Arrays.asList(element.getAttribute("class").split(" ")));
+        classNames.retainAll(getErrorLevelClassNames(prefix,
+                Arrays.asList(ErrorLevel.values())));
+        return classNames.size() == 1 && classNames
+                .contains(getErrorLevelClassName(prefix, errorLevel));
+    }
+
+    private String getErrorLevelClassName(String prefix,
+            ErrorLevel errorLevel) {
+        return prefix + "-" + errorLevel.toString().toLowerCase();
+    }
+
+    private List<String> getErrorLevelClassNames(String prefix,
+            Collection<ErrorLevel> errorLevels) {
+        List<String> classNames = new ArrayList<String>(errorLevels.size());
+        for (ErrorLevel errorLevel : errorLevels) {
+            classNames.add(getErrorLevelClassName(prefix, errorLevel));
+        }
+        return classNames;
+    }
+
+    private void selectErrorLevel(ErrorLevel errorLevel) {
+        errorLevelSelector.clear();
+        errorLevelSelector.sendKeys(errorLevel.toString().toLowerCase());
+        errorLevelSelector.sendKeys(getReturn());
+    }
+
+    private Keys getReturn() {
+        if (BrowserUtil.isPhantomJS(getDesiredCapabilities())) {
+            return Keys.ENTER;
+        } else {
+            return Keys.RETURN;
+        }
+    }
+}
diff --git a/uitest/src/test/java/com/vaadin/tests/components/tabsheet/TabSheetErrorTooltipTest.java b/uitest/src/test/java/com/vaadin/tests/components/tabsheet/TabSheetErrorTooltipTest.java
index 99c7a1d770..31011b8837 100644
--- a/uitest/src/test/java/com/vaadin/tests/components/tabsheet/TabSheetErrorTooltipTest.java
+++ b/uitest/src/test/java/com/vaadin/tests/components/tabsheet/TabSheetErrorTooltipTest.java
@@ -84,8 +84,8 @@ public class TabSheetErrorTooltipTest extends MultiBrowserTest {
     }
 
     private WebElement getCurrentErrorMessage() {
-        return getDriver()
-                .findElement(By.xpath("//div[@class='v-errormessage']"));
+        return getDriver().findElement(
+                By.xpath("//div[contains(@class, 'v-errormessage')]"));
     }
 
     private void assertTooltip(String tooltip) {