Implementing commonDialogWindow

Signed-off-by: Melanie Retter <melanie.retter@bosch-si.com>

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/artifacts/smtable/SoftwareModuleAddUpdateWindow.java

@@ -14,11 +14,11 @@ import org.eclipse.hawkbit.repository.SoftwareManagement;
 import org.eclipse.hawkbit.repository.model.SoftwareModule;
 import org.eclipse.hawkbit.ui.UiProperties;
 import org.eclipse.hawkbit.ui.artifacts.event.SoftwareModuleEvent;
+import org.eclipse.hawkbit.ui.common.CommonDialogWindow;
 import org.eclipse.hawkbit.ui.common.PopupWindowHelp;
 import org.eclipse.hawkbit.ui.common.SoftwareModuleTypeBeanQuery;
 import org.eclipse.hawkbit.ui.common.table.BaseEntityEventType;
 import org.eclipse.hawkbit.ui.components.SPUIComponentProvider;
-import org.eclipse.hawkbit.ui.decorators.SPUIButtonStyleSmallNoBorder;
 import org.eclipse.hawkbit.ui.utils.HawkbitCommonUtil;
 import org.eclipse.hawkbit.ui.utils.I18N;
 import org.eclipse.hawkbit.ui.utils.SPUIComponetIdProvider;
@@ -30,12 +30,11 @@ import org.springframework.beans.factory.annotation.Autowired;
 import org.vaadin.addons.lazyquerycontainer.BeanQueryFactory;
 import org.vaadin.spring.events.EventBus;
 
-import com.vaadin.server.FontAwesome;
 import com.vaadin.spring.annotation.SpringComponent;
 import com.vaadin.spring.annotation.ViewScope;
 import com.vaadin.ui.Alignment;
-import com.vaadin.ui.Button;
 import com.vaadin.ui.ComboBox;
+import com.vaadin.ui.CustomComponent;
 import com.vaadin.ui.HorizontalLayout;
 import com.vaadin.ui.Label;
 import com.vaadin.ui.TextArea;
@@ -52,7 +51,7 @@ import com.vaadin.ui.themes.ValoTheme;
  */
 @SpringComponent
 @ViewScope
-public class SoftwareModuleAddUpdateWindow implements Serializable {
+public class SoftwareModuleAddUpdateWindow extends CustomComponent implements Serializable {
 
     private static final long serialVersionUID = -5217675246477211483L;
 
@@ -79,15 +78,15 @@ public class SoftwareModuleAddUpdateWindow implements Serializable {
 
     private TextField vendorTextField;
 
-    private Button saveSoftware;
+    // private Button saveSoftware;
-
+    //
-    private Button closeWindow;
+    // private Button closeWindow;
 
     private ComboBox typeComboBox;
 
     private TextArea descTextArea;
 
-    private Window window;
+    private CommonDialogWindow window;
 
     private String oldDescriptionValue;
 
@@ -103,7 +102,7 @@ public class SoftwareModuleAddUpdateWindow implements Serializable {
      * @return reference of {@link com.vaadin.ui.Window} to add new software
      *         module.
      */
-    public Window createAddSoftwareModuleWindow() {
+    public CommonDialogWindow createAddSoftwareModuleWindow() {
         editSwModule = Boolean.FALSE;
         createRequiredComponents();
         createWindow();
@@ -170,22 +169,19 @@ public class SoftwareModuleAddUpdateWindow implements Serializable {
         populateTypeNameCombo();
 
         /* save or update button */
-        saveSoftware = SPUIComponentProvider.getButton(SPUIComponetIdProvider.SOFT_MODULE_SAVE, "", "", "", true,
+        // saveSoftware =
-                FontAwesome.SAVE, SPUIButtonStyleSmallNoBorder.class);
+        // SPUIComponentProvider.getButton(SPUIComponetIdProvider.SOFT_MODULE_SAVE,
-        saveSoftware.addClickListener(event -> {
+        // "", "", "", true,
-            if (editSwModule) {
+        // FontAwesome.SAVE, SPUIButtonStyleSmallNoBorder.class);
-                updateSwModule();
+        // saveSoftware.addClickListener(event -> save());
-            } else {
+        //
-                /* add new or update software module */
+        // /* close button */
-                addNewBaseSoftware();
+        // closeWindow =
-            }
+        // SPUIComponentProvider.getButton(SPUIComponetIdProvider.SOFT_MODULE_DISCARD,
-        });
+        // "", "", "", true,
-
+        // FontAwesome.TIMES, SPUIButtonStyleSmallNoBorder.class);
-        /* close button */
+        // /* Just close this window when this button is clicked */
-        closeWindow = SPUIComponentProvider.getButton(SPUIComponetIdProvider.SOFT_MODULE_DISCARD, "", "", "", true,
+        // closeWindow.addClickListener(event -> closeThisWindow());
-                FontAwesome.TIMES, SPUIButtonStyleSmallNoBorder.class);
-        /* Just close this window when this button is clicked */
-        closeWindow.addClickListener(event -> closeThisWindow());
 
         resetOldValues();
     }
@@ -212,12 +208,14 @@ public class SoftwareModuleAddUpdateWindow implements Serializable {
      */
     private void createWindow() {
         /* action button layout (save & dicard) */
-        final HorizontalLayout buttonsLayout = new HorizontalLayout();
+        // final HorizontalLayout buttonsLayout = new HorizontalLayout();
-        buttonsLayout.setSizeFull();
+        // buttonsLayout.setSizeFull();
-        buttonsLayout.addComponents(saveSoftware, closeWindow);
+        // buttonsLayout.addComponents(saveSoftware, closeWindow);
-        buttonsLayout.setComponentAlignment(saveSoftware, Alignment.BOTTOM_LEFT);
+        // buttonsLayout.setComponentAlignment(saveSoftware,
-        buttonsLayout.setComponentAlignment(closeWindow, Alignment.BOTTOM_RIGHT);
+        // Alignment.BOTTOM_LEFT);
-        buttonsLayout.addStyleName("window-style");
+        // buttonsLayout.setComponentAlignment(closeWindow,
+        // Alignment.BOTTOM_RIGHT);
+        // buttonsLayout.addStyleName("window-style");
 
         final Label madatoryStarLabel = new Label("*");
         madatoryStarLabel.setStyleName("v-caption v-required-field-indicator");
@@ -242,22 +240,26 @@ public class SoftwareModuleAddUpdateWindow implements Serializable {
         mainLayout.setComponentAlignment(madatoryLabel, Alignment.MIDDLE_LEFT);
         mainLayout.addComponent(hLayout);
         mainLayout.setComponentAlignment(hLayout, Alignment.MIDDLE_LEFT);
-        mainLayout.addComponents(nameTextField, versionTextField, vendorTextField, descTextArea, buttonsLayout);
+        // mainLayout.addComponents(nameTextField, versionTextField,
-        
+        // vendorTextField, descTextArea, buttonsLayout);
+
+        // TODO MR WINDOW
+        mainLayout.addComponents(nameTextField, versionTextField, vendorTextField, descTextArea);
+
+        setCompositionRoot(mainLayout);
+
         /* add main layout to the window */
         window = SPUIComponentProvider.getWindow(i18n.get("upload.caption.add.new.swmodule"), null,
-                SPUIDefinitions.CREATE_UPDATE_WINDOW);
+                SPUIDefinitions.CREATE_UPDATE_WINDOW, this, event -> save(), event -> closeThisWindow());
-        window.setContent(mainLayout);
-        window.setModal(true);
         nameTextField.focus();
     }
 
     private void addDescriptionTextChangeListener() {
         descTextArea.addTextChangeListener(event -> {
             if (event.getText().equals(oldDescriptionValue) && vendorTextField.getValue().equals(oldVendorValue)) {
-                saveSoftware.setEnabled(false);
+                window.setSaveButtonEnabled(false);
             } else {
-                saveSoftware.setEnabled(true);
+                window.setSaveButtonEnabled(true);
             }
         });
     }
@@ -265,9 +267,9 @@ public class SoftwareModuleAddUpdateWindow implements Serializable {
     private void addVendorTextChangeListener() {
         vendorTextField.addTextChangeListener(event -> {
             if (event.getText().equals(oldVendorValue) && descTextArea.getValue().equals(oldDescriptionValue)) {
-                saveSoftware.setEnabled(false);
+                window.setSaveButtonEnabled(false);
             } else {
-                saveSoftware.setEnabled(true);
+                window.setSaveButtonEnabled(true);
             }
         });
     }
@@ -331,7 +333,7 @@ public class SoftwareModuleAddUpdateWindow implements Serializable {
             typeComboBox.addItem(swModle.getType().getName());
         }
         typeComboBox.setValue(swModle.getType().getName());
-        saveSoftware.setEnabled(Boolean.FALSE);
+        window.setSaveButtonEnabled(Boolean.FALSE);
     }
 
     /**
@@ -369,4 +371,13 @@ public class SoftwareModuleAddUpdateWindow implements Serializable {
         }
         return isValid;
     }
+
+    private void save() {
+        if (editSwModule) {
+            updateSwModule();
+        } else {
+            /* add new or update software module */
+            addNewBaseSoftware();
+        }
+    }
 }

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/artifacts/smtype/CreateUpdateSoftwareTypeLayout.java

@@ -19,11 +19,11 @@ import org.eclipse.hawkbit.repository.model.SoftwareModuleType;
 import org.eclipse.hawkbit.ui.UiProperties;
 import org.eclipse.hawkbit.ui.artifacts.event.SoftwareModuleTypeEvent;
 import org.eclipse.hawkbit.ui.artifacts.event.SoftwareModuleTypeEvent.SoftwareModuleTypeEnum;
+import org.eclipse.hawkbit.ui.common.CommonDialogWindow;
 import org.eclipse.hawkbit.ui.common.CoordinatesToColor;
 import org.eclipse.hawkbit.ui.common.PopupWindowHelp;
 import org.eclipse.hawkbit.ui.common.SoftwareModuleTypeBeanQuery;
 import org.eclipse.hawkbit.ui.components.SPUIComponentProvider;
-import org.eclipse.hawkbit.ui.decorators.SPUIButtonStyleSmallNoBorder;
 import org.eclipse.hawkbit.ui.management.tag.SpColorPickerPreview;
 import org.eclipse.hawkbit.ui.utils.HawkbitCommonUtil;
 import org.eclipse.hawkbit.ui.utils.I18N;
@@ -41,7 +41,6 @@ import org.vaadin.spring.events.EventBus;
 import com.google.common.base.Strings;
 import com.vaadin.data.Property.ValueChangeEvent;
 import com.vaadin.data.Property.ValueChangeListener;
-import com.vaadin.server.FontAwesome;
 import com.vaadin.server.Page;
 import com.vaadin.shared.ui.colorpicker.Color;
 import com.vaadin.spring.annotation.SpringComponent;
@@ -60,7 +59,6 @@ import com.vaadin.ui.TextArea;
 import com.vaadin.ui.TextField;
 import com.vaadin.ui.UI;
 import com.vaadin.ui.VerticalLayout;
-import com.vaadin.ui.Window;
 import com.vaadin.ui.components.colorpicker.ColorChangeEvent;
 import com.vaadin.ui.components.colorpicker.ColorChangeListener;
 import com.vaadin.ui.components.colorpicker.ColorPickerGradient;
@@ -115,8 +113,8 @@ public class CreateUpdateSoftwareTypeLayout extends CustomComponent implements C
     private TextField typeName;
     private TextField typeKey;
     private TextArea typeDesc;
-    private Button saveTag;
+    // private Button saveTag;
-    private Button discardTag;
+    // private Button discardTag;
     private Button tagColorPreviewBtn;
     private OptionGroup createOptiongroup;
     private OptionGroup assignOptiongroup;
@@ -131,7 +129,7 @@ public class CreateUpdateSoftwareTypeLayout extends CustomComponent implements C
     private Slider redSlider;
     private Slider greenSlider;
     private Slider blueSlider;
-    private Window swTypeWindow;
+    private CommonDialogWindow swTypeWindow;
     protected boolean tagPreviewBtnClicked = false;
     private VerticalLayout comboLayout;
     private VerticalLayout sliders;
@@ -151,6 +149,8 @@ public class CreateUpdateSoftwareTypeLayout extends CustomComponent implements C
         addListeners();
     }
 
+    // TODO MR WINDOW
+
     private void createComponents() {
         createTypeStr = i18n.get("label.create.type");
         updateTypeStr = i18n.get("label.update.type");
@@ -188,13 +188,18 @@ public class CreateUpdateSoftwareTypeLayout extends CustomComponent implements C
         typeNameComboBox.addStyleName(SPUIDefinitions.FILTER_TYPE_COMBO_STYLE);
         typeNameComboBox.setImmediate(true);
 
-        saveTag = SPUIComponentProvider.getButton(SPUIDefinitions.NEW_SW_TYPE_SAVE, "", "", "", true, FontAwesome.SAVE,
+        // saveTag =
-                SPUIButtonStyleSmallNoBorder.class);
+        // SPUIComponentProvider.getButton(SPUIDefinitions.NEW_SW_TYPE_SAVE, "",
-        saveTag.addStyleName(ValoTheme.BUTTON_BORDERLESS);
+        // "", "", true, FontAwesome.SAVE,
-
+        // SPUIButtonStyleSmallNoBorder.class);
-        discardTag = SPUIComponentProvider.getButton(SPUIDefinitions.NEW_TARGET_TAG_DISRACD, "", "",
+        // saveTag.addStyleName(ValoTheme.BUTTON_BORDERLESS);
-                "discard-button-style", true, FontAwesome.TIMES, SPUIButtonStyleSmallNoBorder.class);
+        //
-        discardTag.addStyleName(ValoTheme.BUTTON_BORDERLESS);
+        // discardTag =
+        // SPUIComponentProvider.getButton(SPUIDefinitions.NEW_TARGET_TAG_DISRACD,
+        // "", "",
+        // "discard-button-style", true, FontAwesome.TIMES,
+        // SPUIButtonStyleSmallNoBorder.class);
+        // discardTag.addStyleName(ValoTheme.BUTTON_BORDERLESS);
 
         tagColorPreviewBtn = new Button();
         tagColorPreviewBtn.setId(SPUIComponetIdProvider.TAG_COLOR_PREVIEW_ID);
@@ -252,17 +257,20 @@ public class CreateUpdateSoftwareTypeLayout extends CustomComponent implements C
         colorLabelLayout.addComponents(colorLabel, tagColorPreviewBtn);
         fieldLayout.addComponent(colorLabelLayout);
 
-        final HorizontalLayout buttonLayout = new HorizontalLayout();
+        // final HorizontalLayout buttonLayout = new HorizontalLayout();
-        buttonLayout.addComponent(saveTag);
+        // buttonLayout.addComponent(saveTag);
-        buttonLayout.addComponent(discardTag);
+        // buttonLayout.addComponent(discardTag);
-        buttonLayout.setComponentAlignment(discardTag, Alignment.BOTTOM_RIGHT);
+        // buttonLayout.setComponentAlignment(discardTag,
-        buttonLayout.setComponentAlignment(saveTag, Alignment.BOTTOM_LEFT);
+        // Alignment.BOTTOM_RIGHT);
-        buttonLayout.addStyleName("window-style");
+        // buttonLayout.setComponentAlignment(saveTag, Alignment.BOTTOM_LEFT);
-        buttonLayout.setWidth("152px");
+        // buttonLayout.addStyleName("window-style");
+        // buttonLayout.setWidth("152px");
+
+        // TODO MR WINDOW
 
         final VerticalLayout fieldButtonLayout = new VerticalLayout();
         fieldButtonLayout.addComponent(fieldLayout);
-        fieldButtonLayout.addComponent(buttonLayout);
+        // fieldButtonLayout.addComponent(buttonLayout);
 
         mainLayout = new HorizontalLayout();
         mainLayout.addComponent(fieldButtonLayout);
@@ -271,8 +279,6 @@ public class CreateUpdateSoftwareTypeLayout extends CustomComponent implements C
     }
 
     private void addListeners() {
-        saveTag.addClickListener(event -> save());
-        discardTag.addClickListener(event -> discard());
         colorSelect.addColorChangeListener(this);
         selPreview.addColorChangeListener(this);
         tagColorPreviewBtn.addClickListener(event -> previewButtonClicked());
@@ -281,13 +287,11 @@ public class CreateUpdateSoftwareTypeLayout extends CustomComponent implements C
         slidersValueChangeListeners();
     }
 
-    public Window getWindow() {
+    public CommonDialogWindow getWindow() {
         reset();
         swTypeWindow = SPUIComponentProvider.getWindow(i18n.get("caption.add.type"), null,
-                SPUIDefinitions.CREATE_UPDATE_WINDOW);
+                SPUIDefinitions.CREATE_UPDATE_WINDOW, this, event -> save(), event -> discard());
-        swTypeWindow.setContent(this);
         return swTypeWindow;
-
     }
 
     /**

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/colorPicker/ColorPickerConstants.java

@@ -0,0 +1,9 @@
+package org.eclipse.hawkbit.ui.colorPicker;
+
+import com.vaadin.shared.ui.colorpicker.Color;
+
+public class ColorPickerConstants {
+
+    public static final String DEFAULT_COLOR = "rgb(44,151,32)";
+    public static final Color START_COLOR = new Color(0, 146, 58);
+}

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/colorPicker/ColorPickerHelper.java

@@ -0,0 +1,63 @@
+package org.eclipse.hawkbit.ui.colorPicker;
+
+import org.eclipse.hawkbit.ui.management.tag.SpColorPickerPreview;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+
+import com.vaadin.shared.ui.colorpicker.Color;
+import com.vaadin.ui.Slider.ValueOutOfBoundsException;
+
+public class ColorPickerHelper {
+
+    private static final Logger LOG = LoggerFactory.getLogger(ColorPickerHelper.class);
+
+    /**
+     * Get color picked value in string.
+     *
+     * @return String of color picked value.
+     */
+    public static String getColorPickedString(final SpColorPickerPreview preview) {
+        return "rgb(" + preview.getColor().getRed() + "," + preview.getColor().getGreen() + ","
+                + preview.getColor().getBlue() + ")";
+    }
+
+    /**
+     * Covert RGB code to {@Color}.
+     *
+     * @param value
+     *            RGB vale
+     * @return Color
+     */
+    public static Color rgbToColorConverter(final String value) {
+        if (!value.startsWith("rgb")) {
+            return null;
+        }
+        // RGB color format rgb/rgba(255,255,255,0.1)
+        final String[] colors = value.substring(value.indexOf('(') + 1, value.length() - 1).split(",");
+        final int red = Integer.parseInt(colors[0]);
+        final int green = Integer.parseInt(colors[1]);
+        final int blue = Integer.parseInt(colors[2]);
+        if (colors.length > 3) {
+            final int alpha = (int) (Double.parseDouble(colors[3]) * 255d);
+            return new Color(red, green, blue, alpha);
+        } else {
+            return new Color(red, green, blue);
+        }
+    }
+
+    public static void setRgbSliderValues(final ColorPickerLayout colorPickerLayout) {
+        try {
+            final double redColorValue = colorPickerLayout.getSelectedColor().getRed();
+            colorPickerLayout.getRedSlider().setValue(new Double(redColorValue));
+            final double blueColorValue = colorPickerLayout.getSelectedColor().getBlue();
+            colorPickerLayout.getBlueSlider().setValue(new Double(blueColorValue));
+            final double greenColorValue = colorPickerLayout.getSelectedColor().getGreen();
+            colorPickerLayout.getGreenSlider().setValue(new Double(greenColorValue));
+        } catch (final ValueOutOfBoundsException e) {
+            LOG.error("Unable to set RGB color value to " + colorPickerLayout.getSelectedColor().getRed() + ","
+                    + colorPickerLayout.getSelectedColor().getGreen() + ","
+                    + colorPickerLayout.getSelectedColor().getBlue(), e);
+        }
+    }
+
+}

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/colorPicker/ColorPickerLayout.java

@@ -0,0 +1,137 @@
+package org.eclipse.hawkbit.ui.colorPicker;
+
+import java.util.HashSet;
+import java.util.Set;
+
+import org.eclipse.hawkbit.ui.common.CoordinatesToColor;
+import org.eclipse.hawkbit.ui.management.tag.SpColorPickerPreview;
+
+import com.vaadin.shared.ui.colorpicker.Color;
+import com.vaadin.ui.AbstractColorPicker.Coordinates2Color;
+import com.vaadin.ui.Slider;
+import com.vaadin.ui.VerticalLayout;
+import com.vaadin.ui.components.colorpicker.ColorPickerGradient;
+import com.vaadin.ui.components.colorpicker.ColorSelector;
+
+public class ColorPickerLayout extends VerticalLayout {
+
+    private static final long serialVersionUID = -7025970080613796692L;
+
+    /**
+     * Local Instance of ColorPickerPreview.
+     */
+    private SpColorPickerPreview selPreview;
+
+    private ColorPickerGradient colorSelect;
+    private Set<ColorSelector> selectors;
+    private Color selectedColor;
+
+    /** RGB color converter. */
+    private final Coordinates2Color rgbConverter = new CoordinatesToColor();
+
+    private Slider redSlider;
+    private Slider greenSlider;
+    private Slider blueSlider;
+
+    private final VerticalLayout sliders = new VerticalLayout();
+
+    public ColorPickerLayout() {
+
+        init();
+
+        setStyleName("rgb-vertical-layout");
+        addComponent(selPreview);
+        addComponent(colorSelect);
+    }
+
+    public void init() {
+
+        selectors = new HashSet<>();
+        selectedColor = getDefaultColor();
+        selPreview = new SpColorPickerPreview(selectedColor);
+
+        colorSelect = new ColorPickerGradient("rgb-gradient", rgbConverter);
+        colorSelect.setColor(selectedColor);
+        colorSelect.setWidth("220px");
+
+        redSlider = createRGBSlider("", "red");
+        greenSlider = createRGBSlider("", "green");
+        blueSlider = createRGBSlider("", "blue");
+
+        sliders.addComponents(redSlider, greenSlider, blueSlider);
+        selectors.add(colorSelect);
+    }
+
+    public Slider createRGBSlider(final String caption, final String styleName) {
+        final Slider slider = new Slider(caption, 0, 255);
+        slider.setImmediate(true);
+        slider.setWidth("150px");
+        slider.addStyleName(styleName);
+        return slider;
+    }
+
+    public SpColorPickerPreview getSelPreview() {
+        return selPreview;
+    }
+
+    public void setSelPreview(final SpColorPickerPreview selPreview) {
+        this.selPreview = selPreview;
+    }
+
+    public ColorPickerGradient getColorSelect() {
+        return colorSelect;
+    }
+
+    public void setColorSelect(final ColorPickerGradient colorSelect) {
+        this.colorSelect = colorSelect;
+    }
+
+    public Set<ColorSelector> getSelectors() {
+        return selectors;
+    }
+
+    public Color getSelectedColor() {
+        return selectedColor;
+    }
+
+    public void setSelectedColor(final Color selectedColor) {
+        this.selectedColor = selectedColor;
+    }
+
+    public Coordinates2Color getRgbConverter() {
+        return rgbConverter;
+    }
+
+    public Color getDefaultColor() {
+        return new Color(44, 151, 32);
+    }
+
+    public Slider getRedSlider() {
+        return redSlider;
+    }
+
+    public void setRedSlider(final Slider redSlider) {
+        this.redSlider = redSlider;
+    }
+
+    public Slider getGreenSlider() {
+        return greenSlider;
+    }
+
+    public void setGreenSlider(final Slider greenSlider) {
+        this.greenSlider = greenSlider;
+    }
+
+    public Slider getBlueSlider() {
+        return blueSlider;
+    }
+
+    public void setBlueSlider(final Slider blueSlider) {
+        this.blueSlider = blueSlider;
+    }
+
+    public VerticalLayout getSliders() {
+        return sliders;
+    }
+
+}

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/common/CommonDialogWindow.java

@@ -2,105 +2,126 @@ package org.eclipse.hawkbit.ui.common;
 
 import org.apache.commons.lang3.StringUtils;
 import org.eclipse.hawkbit.ui.components.SPUIComponentProvider;
-import org.eclipse.hawkbit.ui.decorators.SPUIButtonStyleSmallNoBorder;
+import org.eclipse.hawkbit.ui.decorators.SPUIButtonStyleBorderWithIcon;
 import org.eclipse.hawkbit.ui.utils.SPUIComponetIdProvider;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
+import org.springframework.stereotype.Service;
 
 import com.vaadin.server.FontAwesome;
+import com.vaadin.ui.AbstractOrderedLayout;
 import com.vaadin.ui.Alignment;
 import com.vaadin.ui.Button;
 import com.vaadin.ui.Button.ClickListener;
-import com.vaadin.ui.FormLayout;
+import com.vaadin.ui.Component;
 import com.vaadin.ui.HorizontalLayout;
 import com.vaadin.ui.Link;
 import com.vaadin.ui.VerticalLayout;
 import com.vaadin.ui.Window;
 
-public class CommonDialog extends Window {
+@Service
+public class CommonDialogWindow extends Window {
 
     private static final long serialVersionUID = -1321949234316858703L;
 
-    private static final Logger LOGGER = LoggerFactory.getLogger(CommonDialog.class);
+    private static final Logger LOG = LoggerFactory.getLogger(CommonDialogWindow.class);
 
     private final VerticalLayout mainLayout = new VerticalLayout();
 
-    private FormLayout formLayout = new FormLayout();
+    private String caption;
+
+    private Component content;
+
+    private String helpLink;
 
     private Button saveButton;
 
     private Button cancelButton;
 
-    public CommonDialog() {
+    public CommonDialogWindow() {
 
-        mainLayout.addComponent(formLayout);
+        init(null, null);
-        mainLayout.addComponent(createActionButtonsLayout());
-        setContent(mainLayout);
-
-        setResizable(false);
-        center();
     }
 
-    public CommonDialog(final String title, final FormLayout form, final String helpLink) {
+    public CommonDialogWindow(final String caption, final Component content, final String helpLink,
+            final ClickListener saveButtonClickListener, final ClickListener cancelButtonClickListener) {
 
-        if (formLayout != null) {
+        this.caption = caption;
-            formLayout = form;
+        this.content = content;
+        this.helpLink = helpLink;
+
+        if (null == content) {
+            // TODO
+            // throw Exception
+        }
+        init(saveButtonClickListener, cancelButtonClickListener);
+    }
+
+    public void init(final ClickListener saveButtonClickListener, final ClickListener cancelButtonClickListener) {
+
+        if (content instanceof AbstractOrderedLayout) {
+            ((AbstractOrderedLayout) content).setSpacing(true);
+            ((AbstractOrderedLayout) content).setMargin(true);
         }
-        formLayout.setSpacing(true);
-        formLayout.setMargin(true);
 
         if (StringUtils.isNotEmpty(helpLink)) {
             mainLayout.addComponent(createLinkToHelp(helpLink));
         }
-        mainLayout.addComponent(formLayout);
+        if (null != content) {
-        mainLayout.addComponent(createActionButtonsLayout());
+            mainLayout.addComponent(content);
+        }
+        final HorizontalLayout buttonLayout = createActionButtonsLayout(saveButtonClickListener,
+                cancelButtonClickListener);
+        mainLayout.addComponent(buttonLayout);
+        mainLayout.setComponentAlignment(buttonLayout, Alignment.MIDDLE_CENTER);
 
-        setCaption(title);
+        setSizeUndefined();
+        setCaption(caption);
         setContent(mainLayout);
         setResizable(false);
         center();
+        setModal(true);
     }
 
-    private HorizontalLayout createActionButtonsLayout() {
+    private HorizontalLayout createActionButtonsLayout(final ClickListener saveButtonClickListener,
+            final ClickListener cancelButtonClickListener) {
 
         final HorizontalLayout hlayout = new HorizontalLayout();
         hlayout.setSpacing(true);
 
-        saveButton = SPUIComponentProvider.getButton(SPUIComponetIdProvider.SYSTEM_CONFIGURATION_SAVE, "", "", "", true,
+        saveButton = SPUIComponentProvider.getButton(SPUIComponetIdProvider.SYSTEM_CONFIGURATION_SAVE, "save", "", "",
-                FontAwesome.SAVE, SPUIButtonStyleSmallNoBorder.class);
+                true, FontAwesome.SAVE, SPUIButtonStyleBorderWithIcon.class);
-        saveButton.setCaption("save");
+        if (null != saveButtonClickListener) {
-        // saveButton.setDescription(i18n.get("configuration.savebutton.tooltip"));
+            saveButton.addClickListener(saveButtonClickListener);
+        } else {
+            LOG.warn("No ClickListener for saveButton specified");
+        }
         hlayout.addComponent(saveButton);
         hlayout.setComponentAlignment(saveButton, Alignment.MIDDLE_LEFT);
 
-        cancelButton = SPUIComponentProvider.getButton(SPUIComponetIdProvider.SYSTEM_CONFIGURATION_CANCEL, "", "", "",
+        cancelButton = SPUIComponentProvider.getButton(SPUIComponetIdProvider.SYSTEM_CONFIGURATION_CANCEL, "cancel", "",
-                true, FontAwesome.UNDO, SPUIButtonStyleSmallNoBorder.class);
+                "", true, FontAwesome.TIMES, SPUIButtonStyleBorderWithIcon.class);
-        cancelButton.setCaption("cancel");
+        if (null != cancelButtonClickListener) {
-        // cancelButton.setDescription(i18n.get("configuration.cancellbutton.tooltip"));
+            cancelButton.addClickListener(cancelButtonClickListener);
+        } else {
+            LOG.warn("No ClickListener for cancelButton specified");
+        }
         hlayout.addComponent(cancelButton);
         hlayout.setComponentAlignment(cancelButton, Alignment.MIDDLE_RIGHT);
 
         return hlayout;
     }
 
-    public void setSaveButtonClickListener(final ClickListener clickListener) {
+    public void setSaveButtonEnabled(final boolean enabled) {
-        saveButton.addClickListener(clickListener);
+        saveButton.setEnabled(enabled);
     }
 
-    public void setCancelButtonClickListener(final ClickListener clickListener) {
+    public void setCancelButtonEnabled(final boolean enabled) {
-        cancelButton.addClickListener(clickListener);
+        cancelButton.setEnabled(enabled);
     }
 
     private Link createLinkToHelp(final String link) {
         return SPUIComponentProvider.getHelpLink(link);
     }
 
-    public FormLayout getFormLayout() {
-        return formLayout;
-    }
-
-    public void setFormLayout(final FormLayout formLayout) {
-        this.formLayout = formLayout;
-    }
-
 }

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/components/SPUIComponentProvider.java

@@ -14,6 +14,7 @@ import java.util.Map;
 import org.apache.commons.lang3.StringUtils;
 import org.eclipse.hawkbit.repository.model.BaseEntity;
 import org.eclipse.hawkbit.repository.model.DistributionSet;
+import org.eclipse.hawkbit.ui.common.CommonDialogWindow;
 import org.eclipse.hawkbit.ui.common.UserDetailsFormatter;
 import org.eclipse.hawkbit.ui.decorators.SPUIButtonDecorator;
 import org.eclipse.hawkbit.ui.decorators.SPUIComboBoxDecorator;
@@ -32,8 +33,10 @@ import com.vaadin.server.FontAwesome;
 import com.vaadin.server.Resource;
 import com.vaadin.shared.ui.label.ContentMode;
 import com.vaadin.ui.Button;
+import com.vaadin.ui.Button.ClickListener;
 import com.vaadin.ui.CheckBox;
 import com.vaadin.ui.ComboBox;
+import com.vaadin.ui.Component;
 import com.vaadin.ui.HorizontalLayout;
 import com.vaadin.ui.Label;
 import com.vaadin.ui.Link;
@@ -137,6 +140,24 @@ public final class SPUIComponentProvider {
         return SPUILabelDecorator.getDeocratedLabel(name, type);
     }
 
+    /**
+     * Get window component.
+     * 
+     * @param caption
+     *            window caption
+     * @param id
+     *            window id
+     * @param type
+     *            type of window
+     * @return Window
+     */
+    public static CommonDialogWindow getWindow(final String caption, final String id, final String type,
+            final Component content, final ClickListener saveButtonClickListener,
+            final ClickListener cancelButtonClickListener) {
+        return SPUIWindowDecorator.getDeocratedWindow(caption, id, type, content, saveButtonClickListener,
+                cancelButtonClickListener);
+    }
+
     /**
      * Get window component.
      * 

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/decorators/SPUIButtonStyleBorderWithIcon.java

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2015 Bosch Software Innovations GmbH and others.
+ *
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * which accompanies this distribution, and is available at
+ * http://www.eclipse.org/legal/epl-v10.html
+ */
+package org.eclipse.hawkbit.ui.decorators;
+
+import com.vaadin.server.Resource;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.themes.ValoTheme;
+
+public class SPUIButtonStyleBorderWithIcon implements SPUIButtonDecorator {
+
+    /**
+     * Style for button: Primary.
+     */
+
+    @Override
+    public Button decorate(final Button button, final String style, final boolean setStyle, final Resource icon) {
+
+        // Set Style
+        if (null != style) {
+            if (setStyle) {
+                button.setStyleName(style);
+            } else {
+                button.addStyleName(style);
+            }
+        }
+        button.addStyleName(ValoTheme.LABEL_SMALL);
+        button.setSizeFull();
+
+        // Set icon
+        if (null != icon) {
+            button.setIcon(icon);
+        }
+        return button;
+    }
+
+}

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/decorators/SPUIWindowDecorator.java

@@ -8,9 +8,12 @@
  */
 package org.eclipse.hawkbit.ui.decorators;
 
+import org.eclipse.hawkbit.ui.common.CommonDialogWindow;
 import org.eclipse.hawkbit.ui.utils.SPUIDefinitions;
 import org.eclipse.hawkbit.ui.utils.SPUIStyleDefinitions;
 
+import com.vaadin.ui.Button.ClickListener;
+import com.vaadin.ui.Component;
 import com.vaadin.ui.Window;
 
 /**
@@ -28,6 +31,38 @@ public final class SPUIWindowDecorator {
 
     }
 
+    /**
+     * Decorates window based on type.
+     * 
+     * @param caption
+     *            window caption
+     * @param id
+     *            window id
+     * @param type
+     *            window type
+     * @return Window
+     */
+    public static CommonDialogWindow getDeocratedWindow(final String caption, final String id, final String type,
+            final Component content, final ClickListener saveButtonClickListener,
+            final ClickListener CancelButtonClickListener) {
+        // TODO helpLink
+        final CommonDialogWindow window = new CommonDialogWindow(caption, content, null, saveButtonClickListener,
+                CancelButtonClickListener);
+        if (null != id) {
+            window.setId(id);
+        }
+        if (SPUIDefinitions.CONFIRMATION_WINDOW.equals(type)) {
+            window.setDraggable(false);
+            window.setClosable(true);
+            window.addStyleName(SPUIStyleDefinitions.CONFIRMATION_WINDOW_CAPTION);
+
+        } else if (SPUIDefinitions.CREATE_UPDATE_WINDOW.equals(type)) {
+            window.setDraggable(true);
+            window.setClosable(true);
+        }
+        return window;
+    }
+
     /**
      * Decorates window based on type.
      * 

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/distributions/disttype/CreateUpdateDistSetTypeLayout.java

@@ -9,41 +9,35 @@
 package org.eclipse.hawkbit.ui.distributions.disttype;
 
 import java.util.ArrayList;
-import java.util.HashSet;
 import java.util.List;
 import java.util.Set;
 
 import org.eclipse.hawkbit.repository.DistributionSetManagement;
 import org.eclipse.hawkbit.repository.DistributionSetRepository;
 import org.eclipse.hawkbit.repository.SoftwareManagement;
-import org.eclipse.hawkbit.repository.SpPermissionChecker;
 import org.eclipse.hawkbit.repository.model.DistributionSetType;
 import org.eclipse.hawkbit.repository.model.SoftwareModuleType;
 import org.eclipse.hawkbit.ui.UiProperties;
-import org.eclipse.hawkbit.ui.common.CoordinatesToColor;
+import org.eclipse.hawkbit.ui.colorPicker.ColorPickerConstants;
+import org.eclipse.hawkbit.ui.colorPicker.ColorPickerHelper;
 import org.eclipse.hawkbit.ui.common.DistributionSetTypeBeanQuery;
 import org.eclipse.hawkbit.ui.common.PopupWindowHelp;
 import org.eclipse.hawkbit.ui.components.SPUIComponentProvider;
 import org.eclipse.hawkbit.ui.decorators.SPUIButtonStyleSmallNoBorder;
 import org.eclipse.hawkbit.ui.distributions.event.DistributionSetTypeEvent;
 import org.eclipse.hawkbit.ui.distributions.event.DistributionSetTypeEvent.DistributionSetTypeEnum;
-import org.eclipse.hawkbit.ui.management.tag.SpColorPickerPreview;
+import org.eclipse.hawkbit.ui.management.tag.CreateUpdateTagLayout;
 import org.eclipse.hawkbit.ui.utils.HawkbitCommonUtil;
-import org.eclipse.hawkbit.ui.utils.I18N;
 import org.eclipse.hawkbit.ui.utils.SPUIComponetIdProvider;
 import org.eclipse.hawkbit.ui.utils.SPUIDefinitions;
 import org.eclipse.hawkbit.ui.utils.SPUILabelDefinitions;
-import org.eclipse.hawkbit.ui.utils.SPUIStyleDefinitions;
-import org.eclipse.hawkbit.ui.utils.UINotification;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.data.domain.PageRequest;
 import org.vaadin.addons.lazyquerycontainer.BeanQueryFactory;
 import org.vaadin.addons.lazyquerycontainer.LazyQueryContainer;
-import org.vaadin.spring.events.EventBus;
 
-import com.google.common.base.Strings;
 import com.vaadin.data.Item;
 import com.vaadin.data.Property.ValueChangeEvent;
 import com.vaadin.data.Property.ValueChangeListener;
@@ -53,29 +47,21 @@ import com.vaadin.server.Page;
 import com.vaadin.shared.ui.colorpicker.Color;
 import com.vaadin.spring.annotation.SpringComponent;
 import com.vaadin.spring.annotation.ViewScope;
-import com.vaadin.ui.AbstractColorPicker.Coordinates2Color;
 import com.vaadin.ui.AbstractSelect.ItemDescriptionGenerator;
 import com.vaadin.ui.Alignment;
 import com.vaadin.ui.Button;
+import com.vaadin.ui.Button.ClickEvent;
 import com.vaadin.ui.CheckBox;
-import com.vaadin.ui.ComboBox;
 import com.vaadin.ui.Component;
-import com.vaadin.ui.CustomComponent;
 import com.vaadin.ui.HorizontalLayout;
 import com.vaadin.ui.Label;
 import com.vaadin.ui.OptionGroup;
-import com.vaadin.ui.Slider;
-import com.vaadin.ui.Slider.ValueOutOfBoundsException;
 import com.vaadin.ui.Table;
 import com.vaadin.ui.TextArea;
 import com.vaadin.ui.TextField;
-import com.vaadin.ui.UI;
 import com.vaadin.ui.VerticalLayout;
-import com.vaadin.ui.Window;
 import com.vaadin.ui.components.colorpicker.ColorChangeEvent;
 import com.vaadin.ui.components.colorpicker.ColorChangeListener;
-import com.vaadin.ui.components.colorpicker.ColorPickerGradient;
-import com.vaadin.ui.components.colorpicker.ColorPickerPreview;
 import com.vaadin.ui.components.colorpicker.ColorSelector;
 import com.vaadin.ui.themes.ValoTheme;
 
@@ -84,7 +70,7 @@ import com.vaadin.ui.themes.ValoTheme;
  */
 @SpringComponent
 @ViewScope
-public class CreateUpdateDistSetTypeLayout extends CustomComponent implements ColorChangeListener, ColorSelector {
+public class CreateUpdateDistSetTypeLayout extends CreateUpdateTagLayout implements ColorChangeListener, ColorSelector {
 
     private static final long serialVersionUID = -5169398523815877767L;
     private static final Logger LOG = LoggerFactory.getLogger(CreateUpdateDistSetTypeLayout.class);
@@ -95,19 +81,6 @@ public class CreateUpdateDistSetTypeLayout extends CustomComponent implements Co
     private static final String DIST_TYPE_DESCRIPTION = "description";
     private static final String DIST_TYPE_MANDATORY = "mandatory";
     private static final String STAR = " * ";
-    protected static final String DEFAULT_COLOR = "rgb(44,151,32)";
-
-    @Autowired
-    private I18N i18n;
-
-    @Autowired
-    private transient EventBus.SessionEventBus eventBus;
-
-    @Autowired
-    private SpPermissionChecker permChecker;
-
-    @Autowired
-    private transient UINotification uiNotification;
 
     @Autowired
     private transient SoftwareManagement softwareManagement;
@@ -121,59 +94,24 @@ public class CreateUpdateDistSetTypeLayout extends CustomComponent implements Co
     @Autowired
     private transient UiProperties uiProperties;
 
-    /**
-     * Instance of ColorPickerPreview.
-     */
-    private SpColorPickerPreview selPreview;
-
     private String createDistTypeStr;
     private String updateDistTypeStr;
     private Label createDistType;
     private Label updateDistType;
     private Label comboLabel;
-    private Label madatoryLabel;
-    private Label colorLabel;
-    private TextField typeName;
     private TextField typeKey;
-    private TextArea typeDesc;
-    private Button saveDistSetType;
-    private Button discardDistSetType;
-    private Button tagColorPreviewBtn;
-    private OptionGroup createOptiongroup;
-    private ComboBox typeNameComboBox;
 
-    private Color selectedColor;
-    private ColorPickerGradient colorSelect;
-    private Slider redSlider;
-    private Slider greenSlider;
-    private Slider blueSlider;
-    private Window distTypeWindow;
-    private VerticalLayout comboLayout;
-    private VerticalLayout sliders;
-    private VerticalLayout colorPickerLayout;
     private VerticalLayout sliderLayout;
     private HorizontalLayout colorLayout;
     private HorizontalLayout distTypeSelectLayout;
-    private Set<ColorSelector> selectors;
     private Table sourceTable;
     private Table selectedTable;
 
     private IndexedContainer selectedTablecontainer;
     private IndexedContainer sourceTablecontainer;
 
-    /** RGB color converter. */
+    @Override
-    private final Coordinates2Color rgbConverter = new CoordinatesToColor();
+    protected void createRequiredComponents() {
-
-    /**
-     * Initialize the dist type tag details layout.
-     */
-    public void init() {
-        createComponents();
-        buildLayout();
-        addListeners();
-    }
-
-    private void createComponents() {
         createDistTypeStr = i18n.get("label.create.type");
         updateDistTypeStr = i18n.get("label.update.type");
         createDistType = SPUIComponentProvider.getLabel(createDistTypeStr, null);
@@ -181,115 +119,61 @@ public class CreateUpdateDistSetTypeLayout extends CustomComponent implements Co
         comboLabel = SPUIComponentProvider.getLabel(i18n.get("label.choose.type"), null);
         madatoryLabel = getMandatoryLabel();
 
-        typeName = SPUIComponentProvider.getTextField(i18n.get("textfield.name"), "",
+        tagName = SPUIComponentProvider.getTextField(i18n.get("textfield.name"), "",
                 ValoTheme.TEXTFIELD_TINY + " " + SPUIDefinitions.DIST_SET_TYPE_NAME, true, "",
                 i18n.get("textfield.name"), true, SPUILabelDefinitions.TEXT_FIELD_MAX_LENGTH);
-        typeName.setId(SPUIDefinitions.NEW_DISTRIBUTION_TYPE_NAME);
+        tagName.setId(SPUIDefinitions.NEW_DISTRIBUTION_TYPE_NAME);
 
         typeKey = SPUIComponentProvider.getTextField(i18n.get("textfield.key"), "",
                 ValoTheme.TEXTFIELD_TINY + " " + SPUIDefinitions.DIST_SET_TYPE_KEY, true, "", i18n.get("textfield.key"),
                 true, SPUILabelDefinitions.TEXT_FIELD_MAX_LENGTH);
         typeKey.setId(SPUIDefinitions.NEW_DISTRIBUTION_TYPE_KEY);
 
-        typeDesc = SPUIComponentProvider.getTextArea(i18n.get("textfield.description"), "",
+        tagDesc = SPUIComponentProvider.getTextArea(i18n.get("textfield.description"), "",
                 ValoTheme.TEXTFIELD_TINY + " " + SPUIDefinitions.DIST_SET_TYPE_DESC, false, "",
                 i18n.get("textfield.description"), SPUILabelDefinitions.TEXT_AREA_MAX_LENGTH);
 
-        typeDesc.setId(SPUIDefinitions.NEW_DISTRIBUTION_TYPE_DESC);
+        tagDesc.setId(SPUIDefinitions.NEW_DISTRIBUTION_TYPE_DESC);
-        typeDesc.setImmediate(true);
+        tagDesc.setImmediate(true);
-        typeDesc.setNullRepresentation("");
+        tagDesc.setNullRepresentation("");
 
-        typeNameComboBox = SPUIComponentProvider.getComboBox(i18n.get("label.combobox.type"), "", "", null, null, false,
+        tagNameComboBox = SPUIComponentProvider.getComboBox(i18n.get("label.combobox.type"), "", "", null, null, false,
                 "", i18n.get("label.combobox.type"));
-        typeNameComboBox.setId(SPUIDefinitions.NEW_DISTRIBUTION_SET_TYPE_NAME_COMBO);
+        tagNameComboBox.setId(SPUIDefinitions.NEW_DISTRIBUTION_SET_TYPE_NAME_COMBO);
-        typeNameComboBox.addStyleName(SPUIDefinitions.FILTER_TYPE_COMBO_STYLE);
+        tagNameComboBox.addStyleName(SPUIDefinitions.FILTER_TYPE_COMBO_STYLE);
-        typeNameComboBox.setImmediate(true);
+        tagNameComboBox.setImmediate(true);
-        typeNameComboBox.setPageLength(SPUIDefinitions.DIST_TYPE_SIZE);
+        tagNameComboBox.setPageLength(SPUIDefinitions.DIST_TYPE_SIZE);
 
         colorLabel = SPUIComponentProvider.getLabel(i18n.get("label.choose.type.color"), null);
         colorLabel.addStyleName(SPUIDefinitions.COLOR_LABEL_STYLE);
 
         tagColorPreviewBtn = new Button();
         tagColorPreviewBtn.setId(SPUIComponetIdProvider.TAG_COLOR_PREVIEW_ID);
-        getPreviewButtonColor(DEFAULT_COLOR);
+        getPreviewButtonColor(ColorPickerConstants.DEFAULT_COLOR);
         tagColorPreviewBtn.setStyleName("tag-color-preview");
 
-        saveDistSetType = SPUIComponentProvider.getButton(SPUIDefinitions.NEW_DIST_SET_TYPE_SAVE, "", "", "", true,
+        getPreviewButtonColor(ColorPickerConstants.DEFAULT_COLOR);
-                FontAwesome.SAVE, SPUIButtonStyleSmallNoBorder.class);
+        ColorPickerHelper.setRgbSliderValues(getColorPickerLayout());
-        saveDistSetType.addStyleName(ValoTheme.BUTTON_BORDERLESS);
-
-        discardDistSetType = SPUIComponentProvider.getButton(SPUIDefinitions.NEW_DIST_SET_TYPE_COLSE, "", "",
-                "discard-button-style", true, FontAwesome.TIMES, SPUIButtonStyleSmallNoBorder.class);
-        discardDistSetType.addStyleName(ValoTheme.BUTTON_BORDERLESS);
-
-        getPreviewButtonColor(DEFAULT_COLOR);
-
-        selectors = new HashSet<>();
-        selectedColor = new Color(44, 151, 32);
-        selPreview = new SpColorPickerPreview(selectedColor);
-
-        colorSelect = new ColorPickerGradient("rgb-gradient", rgbConverter);
-        colorSelect.setColor(selectedColor);
-        colorSelect.setWidth("220px");
-
-        redSlider = createRGBSlider("", "red");
-        greenSlider = createRGBSlider("", "green");
-        blueSlider = createRGBSlider("", "blue");
-        setRgbSliderValues(selectedColor);
 
         createUpdateOptionGroup();
-
     }
 
-    private void buildLayout() {
+    @Override
-        colorPickerLayout = new VerticalLayout();
+    protected void buildLayout() {
-        colorPickerLayout.setSpacing(true);
+
-        colorPickerLayout.addStyleName("color-picker-layout");
+        super.buildLayout();
-        colorPickerLayout.addStyleName("color-picker-layout-ds-type");
+        getFormLayout().addComponent(typeKey, 4);
+
         distTypeSelectLayout = createTwinColumnLayout();
 
-        sliders = new VerticalLayout();
-        sliders.addComponents(redSlider, greenSlider, blueSlider);
-
-        selectors.add(colorSelect);
-
-        comboLayout = new VerticalLayout();
-        final VerticalLayout fieldLayout = new VerticalLayout();
-        fieldLayout.setSpacing(true);
-        fieldLayout.setMargin(false);
-        fieldLayout.addComponent(createOptiongroup);
-        fieldLayout.addComponent(madatoryLabel);
-        fieldLayout.addComponent(comboLayout);
-        fieldLayout.addComponent(typeName);
-        fieldLayout.addComponent(typeKey);
-        fieldLayout.addComponent(typeDesc);
-
-        final VerticalLayout colorPreviewGradientLayout = new VerticalLayout();
-        colorPreviewGradientLayout.addComponent(selPreview);
-        colorPreviewGradientLayout.addComponent(colorSelect);
-        colorPreviewGradientLayout.setComponentAlignment(selPreview, Alignment.MIDDLE_CENTER);
-        colorPreviewGradientLayout.setComponentAlignment(selPreview, Alignment.MIDDLE_CENTER);
-
-        colorPickerLayout.addComponent(colorPreviewGradientLayout);
-        colorPickerLayout.setComponentAlignment(colorPreviewGradientLayout, Alignment.MIDDLE_CENTER);
-
-        final HorizontalLayout buttonLayout = new HorizontalLayout();
-        buttonLayout.addComponent(saveDistSetType);
-        buttonLayout.addComponent(discardDistSetType);
-        buttonLayout.setComponentAlignment(discardDistSetType, Alignment.BOTTOM_RIGHT);
-        buttonLayout.setComponentAlignment(saveDistSetType, Alignment.BOTTOM_LEFT);
-        buttonLayout.setImmediate(true);
-        buttonLayout.addStyleName("window-style");
-        buttonLayout.setSizeFull();
-
         final HorizontalLayout mainLayout = new HorizontalLayout();
         final VerticalLayout twinTableLayout = new VerticalLayout();
         twinTableLayout.setSizeFull();
         twinTableLayout.addComponent(distTypeSelectLayout);
 
-        mainLayout.addComponent(fieldLayout);
+        mainLayout.addComponent(getFormLayout());
         mainLayout.addComponent(twinTableLayout);
-       
+
         colorLayout = new HorizontalLayout();
         sliderLayout = new VerticalLayout();
         final HorizontalLayout chooseColorLayout = new HorizontalLayout();
@@ -303,9 +187,6 @@ public class CreateUpdateDistSetTypeLayout extends CustomComponent implements Co
         mainWindowLayout.addComponent(new PopupWindowHelp(uiProperties.getLinks().getDocumentation().getRoot()));
         mainWindowLayout.addComponent(mainLayout);
         mainWindowLayout.addComponent(colorLayout);
-        mainWindowLayout.addComponent(buttonLayout);
-        setCompositionRoot(mainWindowLayout);
-        typeName.focus();
     }
 
     private HorizontalLayout createTwinColumnLayout() {
@@ -505,122 +386,33 @@ public class CreateUpdateDistSetTypeLayout extends CustomComponent implements Co
         }
     }
 
-    public Window getWindow() {
-        reset();
-        distTypeWindow = SPUIComponentProvider.getWindow(i18n.get("caption.add.type"), null,
-                SPUIDefinitions.CREATE_UPDATE_WINDOW);
-        distTypeWindow.setContent(this);
-        return distTypeWindow;
-
-    }
-
-    private Label getMandatoryLabel() {
-        final Label label = new Label(i18n.get("label.mandatory.field"));
-        label.setStyleName(SPUIStyleDefinitions.SP_TEXTFIELD_ERROR + " " + ValoTheme.LABEL_SMALL);
-        return label;
-    }
-
-    private Slider createRGBSlider(final String caption, final String styleName) {
-        final Slider slider = new Slider(caption, 0, 255);
-        slider.setImmediate(true);
-        slider.setWidth("150px");
-        slider.addStyleName(styleName);
-        return slider;
-    }
-
-    private void setRgbSliderValues(final Color color) {
-        try {
-            final double redColorValue = color.getRed();
-            redSlider.setValue(new Double(redColorValue));
-            final double blueColorValue = color.getBlue();
-            blueSlider.setValue(new Double(blueColorValue));
-            final double greenColorValue = color.getGreen();
-            greenSlider.setValue(new Double(greenColorValue));
-        } catch (final ValueOutOfBoundsException e) {
-            LOG.error("Unable to set RGB color value to " + color.getRed() + "," + color.getGreen() + ","
-                    + color.getBlue(), e);
-        }
-    }
-
-    /**
-     * Dynamic styles for window.
-     *
-     * @param top
-     *            int value
-     * @param marginLeft
-     *            int value
-     */
-    private void getPreviewButtonColor(final String color) {
-        Page.getCurrent().getJavaScript().execute(HawkbitCommonUtil.getPreviewButtonColorScript(color));
-    }
-
-    private void createUpdateOptionGroup() {
-        final List<String> optionValues = new ArrayList<>();
-        if (permChecker.hasCreateDistributionPermission()) {
-            optionValues.add(createDistType.getValue());
-        }
-        if (permChecker.hasUpdateDistributionPermission()) {
-            optionValues.add(updateDistType.getValue());
-        }
-        createOptionGroupByValues(optionValues);
-    }
-
-    private void createOptionGroupByValues(final List<String> typeOptions) {
-        createOptiongroup = new OptionGroup("", typeOptions);
-        createOptiongroup.setId(SPUIDefinitions.CREATE_OPTION_GROUP_DISTRIBUTION_SET_TYPE_ID);
-        createOptiongroup.addStyleName(ValoTheme.OPTIONGROUP_SMALL);
-        createOptiongroup.addStyleName("custom-option-group");
-        createOptiongroup.setNullSelectionAllowed(false);
-        createOptiongroup.setCaption(null);
-        if (!typeOptions.isEmpty()) {
-            createOptiongroup.select(typeOptions.get(0));
-        }
-    }
-
     private void addListeners() {
-        saveDistSetType.addClickListener(event -> save());
+        getColorPickerLayout().getColorSelect().addColorChangeListener(this);
-        discardDistSetType.addClickListener(event -> discard());
+        getColorPickerLayout().getSelPreview().addColorChangeListener(this);
-        colorSelect.addColorChangeListener(this);
-        selPreview.addColorChangeListener(this);
         tagColorPreviewBtn.addClickListener(event -> previewButtonClicked());
-        createOptiongroup.addValueChangeListener(event -> createOptionValueChanged(event));
+        optiongroup.addValueChangeListener(event -> createOptionValueChanged(event));
-        typeNameComboBox.addValueChangeListener(event -> typeNameChosen(event));
+        tagNameComboBox.addValueChangeListener(event -> typeNameChosen(event));
         slidersValueChangeListeners();
     }
 
-    private void save() {
+    // private void save() {
-        if (mandatoryValuesPresent()) {
+    // if (mandatoryValuesPresent()) {
-            final DistributionSetType existingDistTypeByKey = distributionSetManagement
+    // final DistributionSetType existingDistTypeByKey =
-                    .findDistributionSetTypeByKey(typeKey.getValue());
+    // distributionSetManagement
-            final DistributionSetType existingDistTypeByName = distributionSetManagement
+    // .findDistributionSetTypeByKey(typeKey.getValue());
-                    .findDistributionSetTypeByName(typeName.getValue());
+    // final DistributionSetType existingDistTypeByName =
-            if (createOptiongroup.getValue().equals(createDistTypeStr)) {
+    // distributionSetManagement
-                if (!checkIsDuplicateByKey(existingDistTypeByKey) && !checkIsDuplicate(existingDistTypeByName)) {
+    // .findDistributionSetTypeByName(tagName.getValue());
-                    crateNewDistributionSetType();
+    // if (createOptiongroup.getValue().equals(createDistTypeStr)) {
-                }
+    // if (!checkIsDuplicateByKey(existingDistTypeByKey) &&
-            } else {
+    // !checkIsDuplicate(existingDistTypeByName)) {
-                updateDistributionSetType(existingDistTypeByKey);
+    // crateNewDistributionSetType();
-            }
+    // }
-        }
+    // } else {
-    }
+    // updateDistributionSetType(existingDistTypeByKey);
-
+    // }
-    private Boolean mandatoryValuesPresent() {
+    // }
-        if (Strings.isNullOrEmpty(typeName.getValue())) {
+    // }
-            if (createOptiongroup.getValue().equals(createDistTypeStr)) {
-
-                uiNotification.displayValidationError(SPUILabelDefinitions.MISSING_TYPE_NAME_KEY);
-            }
-            if (createOptiongroup.getValue().equals(updateDistTypeStr)) {
-                if (null == typeNameComboBox.getValue()) {
-                    uiNotification.displayValidationError(i18n.get("message.error.missing.typename"));
-                } else {
-                    uiNotification.displayValidationError(SPUILabelDefinitions.MISSING_TAG_NAME);
-                }
-            }
-            return Boolean.FALSE;
-        }
-        return Boolean.TRUE;
-    }
 
     private Boolean checkIsDuplicate(final DistributionSetType existingDistType) {
         if (existingDistType != null) {
@@ -640,24 +432,15 @@ public class CreateUpdateDistSetTypeLayout extends CustomComponent implements Co
         return Boolean.FALSE;
     }
 
-    private void closeWindow() {
-        distTypeWindow.close();
-        UI.getCurrent().removeWindow(distTypeWindow);
-    }
-
-    private void discard() {
-        UI.getCurrent().removeWindow(distTypeWindow);
-    }
-
     /**
      * Create new DistSet Type tag.
      */
     @SuppressWarnings("unchecked")
     private void crateNewDistributionSetType() {
-        final String colorPicked = getColorPickedSting();
+        final String colorPicked = ColorPickerHelper.getColorPickedString(getColorPickerLayout().getSelPreview());
-        final String typeNameValue = HawkbitCommonUtil.trimAndNullIfEmpty(typeName.getValue());
+        final String typeNameValue = HawkbitCommonUtil.trimAndNullIfEmpty(tagName.getValue());
         final String typeKeyValue = HawkbitCommonUtil.trimAndNullIfEmpty(typeKey.getValue());
-        final String typeDescValue = HawkbitCommonUtil.trimAndNullIfEmpty(typeDesc.getValue());
+        final String typeDescValue = HawkbitCommonUtil.trimAndNullIfEmpty(tagDesc.getValue());
         final List<Long> itemIds = (List<Long>) selectedTable.getItemIds();
         if (null != typeNameValue && null != typeKeyValue && null != itemIds && !itemIds.isEmpty()) {
             DistributionSetType newDistType = new DistributionSetType(typeKeyValue, typeNameValue, typeDescValue);
@@ -699,9 +482,9 @@ public class CreateUpdateDistSetTypeLayout extends CustomComponent implements Co
     @SuppressWarnings("unchecked")
     private void updateDistributionSetType(final DistributionSetType existingType) {
         final List<Long> itemIds = (List<Long>) selectedTable.getItemIds();
-        final String typeNameValue = HawkbitCommonUtil.trimAndNullIfEmpty(typeName.getValue());
+        final String typeNameValue = HawkbitCommonUtil.trimAndNullIfEmpty(tagName.getValue());
         final String typeKeyValue = HawkbitCommonUtil.trimAndNullIfEmpty(typeKey.getValue());
-        final String typeDescValue = HawkbitCommonUtil.trimAndNullIfEmpty(typeDesc.getValue());
+        final String typeDescValue = HawkbitCommonUtil.trimAndNullIfEmpty(tagDesc.getValue());
         /* remove all SW Module Types before update SW Module Types */
         final DistributionSetType updateDistSetType = removeSWModuleTypesFromDistSetType(existingType.getName());
 
@@ -726,7 +509,7 @@ public class CreateUpdateDistSetTypeLayout extends CustomComponent implements Co
                     }
                 }
             }
-            updateDistSetType.setColour(getColorPickedSting());
+            updateDistSetType.setColour(ColorPickerHelper.getColorPickedString(getColorPickerLayout().getSelPreview()));
             distributionSetManagement.updateDistributionSetType(updateDistSetType);
             uiNotification
                     .displaySuccess(i18n.get("message.update.success", new Object[] { updateDistSetType.getName() }));
@@ -757,104 +540,70 @@ public class CreateUpdateDistSetTypeLayout extends CustomComponent implements Co
         return distSetType;
     }
 
-    /**
-     * Get color picked value in string.
-     *
-     * @return String of color picked value.
-     */
-    private String getColorPickedSting() {
-        return "rgb(" + getSelPreview().getColor().getRed() + "," + getSelPreview().getColor().getGreen() + ","
-                + getSelPreview().getColor().getBlue() + ")";
-    }
-
-    /**
-     * Color view.
-     * 
-     * @return ColorPickerPreview as UI
-     */
-    public ColorPickerPreview getSelPreview() {
-        return selPreview;
-    }
-
     /**
      * Open color picker on click of preview button. Auto select the color based
      * on target tag if already selected.
      */
-    private void previewButtonClicked() {
+    // private void previewButtonClicked() {
-        final String selectedOption = (String) createOptiongroup.getValue();
+    // final String selectedOption = (String) createOptiongroup.getValue();
-        if (null != selectedOption && selectedOption.equalsIgnoreCase(updateDistTypeStr)
+    // if (null != selectedOption &&
-                && null != typeNameComboBox.getValue()) {
+    // selectedOption.equalsIgnoreCase(updateDistTypeStr)
-
+    // && null != typeNameComboBox.getValue()) {
-            final DistributionSetType existedDistType = distributionSetManagement
+    //
-                    .findDistributionSetTypeByKey(typeNameComboBox.getValue().toString());
+    // final DistributionSetType existedDistType = distributionSetManagement
-            if (null != existedDistType) {
+    // .findDistributionSetTypeByKey(typeNameComboBox.getValue().toString());
-                selectedColor = existedDistType.getColour() != null ? rgbToColorConverter(existedDistType.getColour())
+    // if (null != existedDistType) {
-                        : rgbToColorConverter(DEFAULT_COLOR);
+    // getColorPickerLayout().setSelectedColor(existedDistType.getColour() !=
-            } else {
+    // null
-                selectedColor = rgbToColorConverter(DEFAULT_COLOR);
+    // ? ColorPickerHelper.rgbToColorConverter(existedDistType.getColour())
-            }
+    // :
-
+    // ColorPickerHelper.rgbToColorConverter(ColorPickerConstants.DEFAULT_COLOR));
-        }
+    // } else {
-        selPreview.setColor(selectedColor);
+    // getColorPickerLayout()
-        sliderLayout.addComponent(sliders);
+    // .setSelectedColor(ColorPickerHelper.rgbToColorConverter(ColorPickerConstants.DEFAULT_COLOR));
-        colorLayout.addComponent(colorPickerLayout);
+    // }
-        colorLayout.setComponentAlignment(colorPickerLayout, Alignment.MIDDLE_CENTER);
+    // }
-    }
+    // getColorPickerLayout().getSelPreview().setColor(getColorPickerLayout().getSelectedColor());
-
+    // sliderLayout.addComponent(sliders);
-    /**
+    // colorLayout.addComponent(getColorPickerLayout());
-     * Covert RGB code to {@Color}.
+    // colorLayout.setComponentAlignment(getColorPickerLayout(),
-     * 
+    // Alignment.MIDDLE_CENTER);
-     * @param value
+    // }
-     *            RGB vale
-     * @return Color
-     */
-    protected Color rgbToColorConverter(final String value) {
-        if (value.startsWith("rgb")) {
-            final String[] colors = value.substring(value.indexOf('(') + 1, value.length() - 1).split(",");
-            final int red = Integer.parseInt(colors[0]);
-            final int green = Integer.parseInt(colors[1]);
-            final int blue = Integer.parseInt(colors[2]);
-            if (colors.length > 3) {
-                final int alpha = (int) (Double.parseDouble(colors[3]) * 255d);
-                return new Color(red, green, blue, alpha);
-            } else {
-                return new Color(red, green, blue);
-            }
-        }
-        return null;
-    }
 
     /**
      * Value change listeners implementations of sliders.
      */
     private void slidersValueChangeListeners() {
-        redSlider.addValueChangeListener(new ValueChangeListener() {
+        getColorPickerLayout().getRedSlider().addValueChangeListener(new ValueChangeListener() {
             private static final long serialVersionUID = -8336732883300920839L;
 
             @Override
             public void valueChange(final ValueChangeEvent event) {
                 final double red = (Double) event.getProperty().getValue();
-                final Color newColor = new Color((int) red, selectedColor.getGreen(), selectedColor.getBlue());
+                final Color newColor = new Color((int) red, getColorPickerLayout().getSelectedColor().getGreen(),
+                        getColorPickerLayout().getSelectedColor().getBlue());
                 setColorToComponents(newColor);
             }
         });
-        greenSlider.addValueChangeListener(new ValueChangeListener() {
+        getColorPickerLayout().getGreenSlider().addValueChangeListener(new ValueChangeListener() {
             private static final long serialVersionUID = 1236358037711775663L;
 
             @Override
             public void valueChange(final ValueChangeEvent event) {
                 final double green = (Double) event.getProperty().getValue();
-                final Color newColor = new Color(selectedColor.getRed(), (int) green, selectedColor.getBlue());
+                final Color newColor = new Color(getColorPickerLayout().getSelectedColor().getRed(), (int) green,
+                        getColorPickerLayout().getSelectedColor().getBlue());
                 setColorToComponents(newColor);
             }
         });
-        blueSlider.addValueChangeListener(new ValueChangeListener() {
+        getColorPickerLayout().getBlueSlider().addValueChangeListener(new ValueChangeListener() {
             private static final long serialVersionUID = 8466370744686043947L;
 
             @Override
             public void valueChange(final ValueChangeEvent event) {
                 final double blue = (Double) event.getProperty().getValue();
-                final Color newColor = new Color(selectedColor.getRed(), selectedColor.getGreen(), (int) blue);
+                final Color newColor = new Color(getColorPickerLayout().getSelectedColor().getRed(),
+                        getColorPickerLayout().getSelectedColor().getGreen(), (int) blue);
                 setColorToComponents(newColor);
             }
         });
@@ -862,9 +611,9 @@ public class CreateUpdateDistSetTypeLayout extends CustomComponent implements Co
 
     private void setColorToComponents(final Color newColor) {
         setColor(newColor);
-        colorSelect.setColor(newColor);
+        getColorPickerLayout().getColorSelect().setColor(newColor);
         getPreviewButtonColor(newColor.getCSS());
-        createDynamicStyleForComponents(typeName, typeKey, typeDesc, newColor.getCSS());
+        createDynamicStyleForComponents(tagName, typeKey, tagDesc, newColor.getCSS());
     }
 
     /**
@@ -874,13 +623,13 @@ public class CreateUpdateDistSetTypeLayout extends CustomComponent implements Co
      * @param tagDesc
      * @param taregtTagColor
      */
-    private void createDynamicStyleForComponents(final TextField typeName, final TextField typeKey,
+    private void createDynamicStyleForComponents(final TextField tagName, final TextField typeKey,
             final TextArea typeDesc, final String typeTagColor) {
-        typeName.removeStyleName(SPUIDefinitions.TYPE_NAME);
+        tagName.removeStyleName(SPUIDefinitions.TYPE_NAME);
         typeKey.removeStyleName(SPUIDefinitions.TYPE_KEY);
         typeDesc.removeStyleName(SPUIDefinitions.TYPE_DESC);
         getDistributionDynamicStyles(typeTagColor);
-        typeName.addStyleName(TYPE_NAME_DYNAMIC_STYLE);
+        tagName.addStyleName(TYPE_NAME_DYNAMIC_STYLE);
         typeKey.addStyleName(TYPE_NAME_DYNAMIC_STYLE);
         typeDesc.addStyleName(TYPE_DESC_DYNAMIC_STYLE);
     }
@@ -926,22 +675,24 @@ public class CreateUpdateDistSetTypeLayout extends CustomComponent implements Co
     /**
      * reset the components.
      */
-    private void reset() {
+    @Override
-        typeName.setEnabled(true);
+    protected void reset() {
-        typeName.clear();
+        tagName.setEnabled(true);
+        tagName.clear();
         typeKey.clear();
-        typeDesc.clear();
+        tagDesc.clear();
-        colorLayout.removeComponent(colorPickerLayout);
+        colorLayout.removeComponent(getColorPickerLayout());
-        sliderLayout.removeComponent(sliders);
+        sliderLayout.removeComponent(getColorPickerLayout().getSliders());
         restoreComponentStyles();
         comboLayout.removeComponent(comboLabel);
-        comboLayout.removeComponent(typeNameComboBox);
+        comboLayout.removeComponent(tagNameComboBox);
         selectedTable.removeAllItems();
         getSourceTableData();
-        createOptiongroup.select(createDistTypeStr);
+        optiongroup.select(createDistTypeStr);
-        selectedColor = new Color(44, 151, 32);
-        selPreview.setColor(selectedColor);
 
+        // Default green color
+        getColorPickerLayout().setSelectedColor(getColorPickerLayout().getDefaultColor());
+        getColorPickerLayout().getSelPreview().setColor(getColorPickerLayout().getSelectedColor());
     }
 
     /**
@@ -952,45 +703,46 @@ public class CreateUpdateDistSetTypeLayout extends CustomComponent implements Co
      */
     private void createOptionValueChanged(final ValueChangeEvent event) {
         if ("Update Type".equals(event.getProperty().getValue())) {
-            typeName.clear();
+            tagName.clear();
-            typeDesc.clear();
+            tagDesc.clear();
             typeKey.clear();
             selectedTable.getContainerDataSource().removeAllItems();
             getSourceTableData();
 
             typeKey.setEnabled(false);
-            typeName.setEnabled(false);
+            tagName.setEnabled(false);
             distTypeSelectLayout.setEnabled(false);
-            populateTypeNameCombo();
+            populateTagNameCombo();
             comboLayout.addComponent(comboLabel);
-            comboLayout.addComponent(typeNameComboBox);
+            comboLayout.addComponent(tagNameComboBox);
         } else {
             typeKey.setEnabled(true);
-            typeName.setEnabled(true);
+            tagName.setEnabled(true);
-            saveDistSetType.setEnabled(true);
+            window.setSaveButtonEnabled(true);
             distTypeSelectLayout.setEnabled(true);
-            typeName.clear();
+            tagName.clear();
-            typeDesc.clear();
+            tagDesc.clear();
             typeKey.clear();
             selectedTable.setEnabled(true);
             selectedTable.getContainerDataSource().removeAllItems();
             sourceTable.getContainerDataSource().removeAllItems();
             getSourceTableData();
             comboLayout.removeComponent(comboLabel);
-            comboLayout.removeComponent(typeNameComboBox);
+            comboLayout.removeComponent(tagNameComboBox);
         }
         restoreComponentStyles();
-        getPreviewButtonColor(DEFAULT_COLOR);
+        getPreviewButtonColor(ColorPickerConstants.DEFAULT_COLOR);
-        selPreview.setColor(rgbToColorConverter(DEFAULT_COLOR));
+        getColorPickerLayout().getSelPreview()
+                .setColor(ColorPickerHelper.rgbToColorConverter(ColorPickerConstants.DEFAULT_COLOR));
     }
 
     /**
      * Populate DistributionSet Type name combo.
      */
-    public void populateTypeNameCombo() {
+    @Override
-        typeNameComboBox.setContainerDataSource(getDistSetTypeLazyQueryContainer());
+    public void populateTagNameCombo() {
-        typeNameComboBox.setItemCaptionPropertyId(SPUILabelDefinitions.VAR_NAME);
+        tagNameComboBox.setContainerDataSource(getDistSetTypeLazyQueryContainer());
-
+        tagNameComboBox.setItemCaptionPropertyId(SPUILabelDefinitions.VAR_NAME);
     }
 
     /**
@@ -1016,18 +768,18 @@ public class CreateUpdateDistSetTypeLayout extends CustomComponent implements Co
     }
 
     private void resetTypeFields() {
-        typeName.setEnabled(false);
+        tagName.setEnabled(false);
         typeKey.setEnabled(false);
-        typeName.clear();
+        tagName.clear();
         typeKey.clear();
-        typeDesc.clear();
+        tagDesc.clear();
         restoreComponentStyles();
         selectedTable.removeAllItems();
         getSourceTableData();
         restoreComponentStyles();
-        getPreviewButtonColor(DEFAULT_COLOR);
+        getPreviewButtonColor(ColorPickerConstants.DEFAULT_COLOR);
-        selPreview.setColor(rgbToColorConverter(DEFAULT_COLOR));
+        getColorPickerLayout().getSelPreview()
-
+                .setColor(ColorPickerHelper.rgbToColorConverter(ColorPickerConstants.DEFAULT_COLOR));
     }
 
     /**
@@ -1038,24 +790,24 @@ public class CreateUpdateDistSetTypeLayout extends CustomComponent implements Co
      *            as the selected tag from combo
      */
     private void setTypeTagCombo(final String distSetTypeSelected) {
-        typeName.setValue(distSetTypeSelected);
+        tagName.setValue(distSetTypeSelected);
         getSourceTableData();
         selectedTable.getContainerDataSource().removeAllItems();
         final DistributionSetType selectedTypeTag = fetchDistributionSetType(distSetTypeSelected);
         if (null != selectedTypeTag) {
-            typeDesc.setValue(selectedTypeTag.getDescription());
+            tagDesc.setValue(selectedTypeTag.getDescription());
             typeKey.setValue(selectedTypeTag.getKey());
 
             if (distributionSetRepository.countByType(selectedTypeTag) <= 0) {
                 distTypeSelectLayout.setEnabled(true);
                 selectedTable.setEnabled(true);
-                saveDistSetType.setEnabled(true);
+                window.setSaveButtonEnabled(true);
             } else {
                 uiNotification.displayValidationError(
                         selectedTypeTag.getName() + "  " + i18n.get("message.error.dist.set.type.update"));
                 distTypeSelectLayout.setEnabled(false);
                 selectedTable.setEnabled(false);
-                saveDistSetType.setEnabled(false);
+                window.setSaveButtonEnabled(false);
             }
             for (final SoftwareModuleType swModuleType : selectedTypeTag.getOptionalModuleTypes()) {
                 addTargetTableforUpdate(swModuleType, false);
@@ -1066,16 +818,18 @@ public class CreateUpdateDistSetTypeLayout extends CustomComponent implements Co
             }
 
             if (null == selectedTypeTag.getColour()) {
-                selectedColor = new Color(44, 151, 32);
+                getColorPickerLayout()
-                selPreview.setColor(selectedColor);
+                        .setSelectedColor(ColorPickerHelper.rgbToColorConverter(ColorPickerConstants.DEFAULT_COLOR));
-                colorSelect.setColor(selectedColor);
+                getColorPickerLayout().getSelPreview().setColor(getColorPickerLayout().getSelectedColor());
-                createDynamicStyleForComponents(typeName, typeKey, typeDesc, DEFAULT_COLOR);
+                getColorPickerLayout().getColorSelect().setColor(getColorPickerLayout().getSelectedColor());
-                getPreviewButtonColor(DEFAULT_COLOR);
+                createDynamicStyleForComponents(tagName, typeKey, tagDesc, ColorPickerConstants.DEFAULT_COLOR);
+                getPreviewButtonColor(ColorPickerConstants.DEFAULT_COLOR);
             } else {
-                selectedColor = rgbToColorConverter(selectedTypeTag.getColour());
+                getColorPickerLayout()
-                selPreview.setColor(selectedColor);
+                        .setSelectedColor(ColorPickerHelper.rgbToColorConverter(selectedTypeTag.getColour()));
-                colorSelect.setColor(selectedColor);
+                getColorPickerLayout().getSelPreview().setColor(getColorPickerLayout().getSelectedColor());
-                createDynamicStyleForComponents(typeName, typeKey, typeDesc, selectedTypeTag.getColour());
+                getColorPickerLayout().getColorSelect().setColor(getColorPickerLayout().getSelectedColor());
+                createDynamicStyleForComponents(tagName, typeKey, tagDesc, selectedTypeTag.getColour());
                 getPreviewButtonColor(selectedTypeTag.getColour());
             }
         }
@@ -1109,14 +863,13 @@ public class CreateUpdateDistSetTypeLayout extends CustomComponent implements Co
         if (color == null) {
             return;
         }
-        selectedColor = color;
+        getColorPickerLayout().setSelectedColor(color);
-        selPreview.setColor(selectedColor);
+        getColorPickerLayout().getSelPreview().setColor(getColorPickerLayout().getSelectedColor());
-        final String colorPickedPreview = selPreview.getColor().getCSS();
+        final String colorPickedPreview = getColorPickerLayout().getSelPreview().getColor().getCSS();
-        if (typeName.isEnabled() && null != colorSelect) {
+        if (tagName.isEnabled() && null != getColorPickerLayout().getColorSelect()) {
-            createDynamicStyleForComponents(typeName, typeKey, typeDesc, colorPickedPreview);
+            createDynamicStyleForComponents(tagName, typeKey, tagDesc, colorPickedPreview);
-            colorSelect.setColor(selPreview.getColor());
+            getColorPickerLayout().getColorSelect().setColor(getColorPickerLayout().getSelPreview().getColor());
         }
-
     }
 
     /*
@@ -1140,14 +893,15 @@ public class CreateUpdateDistSetTypeLayout extends CustomComponent implements Co
     @Override
     public void colorChanged(final ColorChangeEvent event) {
         setColor(event.getColor());
-        for (final ColorSelector select : selectors) {
+        for (final ColorSelector select : getColorPickerLayout().getSelectors()) {
-            if (!event.getSource().equals(select) && select.equals(this) && !select.getColor().equals(selectedColor)) {
+            if (!event.getSource().equals(select) && select.equals(this)
-                select.setColor(selectedColor);
+                    && !select.getColor().equals(getColorPickerLayout().getSelectedColor())) {
+                select.setColor(getColorPickerLayout().getSelectedColor());
             }
         }
-        setRgbSliderValues(selectedColor);
+        ColorPickerHelper.setRgbSliderValues(getColorPickerLayout());
         getPreviewButtonColor(event.getColor().getCSS());
-        createDynamicStyleForComponents(typeName, typeKey, typeDesc, event.getColor().getCSS());
+        createDynamicStyleForComponents(tagName, typeKey, tagDesc, event.getColor().getCSS());
 
     }
 
@@ -1155,13 +909,66 @@ public class CreateUpdateDistSetTypeLayout extends CustomComponent implements Co
      * reset the tag name and tag description component border color.
      */
     private void restoreComponentStyles() {
-        typeName.removeStyleName(TYPE_NAME_DYNAMIC_STYLE);
+        tagName.removeStyleName(TYPE_NAME_DYNAMIC_STYLE);
-        typeDesc.removeStyleName(TYPE_DESC_DYNAMIC_STYLE);
+        tagDesc.removeStyleName(TYPE_DESC_DYNAMIC_STYLE);
         typeKey.removeStyleName(TYPE_NAME_DYNAMIC_STYLE);
-        typeName.addStyleName(SPUIDefinitions.DIST_SET_TYPE_NAME);
+        tagName.addStyleName(SPUIDefinitions.DIST_SET_TYPE_NAME);
-        typeDesc.addStyleName(SPUIDefinitions.DIST_SET_TYPE_DESC);
+        tagDesc.addStyleName(SPUIDefinitions.DIST_SET_TYPE_DESC);
         typeKey.addStyleName(SPUIDefinitions.DIST_SET_TYPE_KEY);
-        getPreviewButtonColor(DEFAULT_COLOR);
+        getPreviewButtonColor(ColorPickerConstants.DEFAULT_COLOR);
+    }
+
+    @Override
+    protected void save(final ClickEvent event) {
+        if (mandatoryValuesPresent()) {
+            final DistributionSetType existingDistTypeByKey = distributionSetManagement
+                    .findDistributionSetTypeByKey(typeKey.getValue());
+            final DistributionSetType existingDistTypeByName = distributionSetManagement
+                    .findDistributionSetTypeByName(tagName.getValue());
+            if (optiongroup.getValue().equals(createDistTypeStr)) {
+                if (!checkIsDuplicateByKey(existingDistTypeByKey) && !checkIsDuplicate(existingDistTypeByName)) {
+                    crateNewDistributionSetType();
+                }
+            } else {
+                updateDistributionSetType(existingDistTypeByKey);
+            }
+        }
+    }
+
+    @Override
+    protected void setTagDetails(final String tagSelected) {
+        // TODO Auto-generated method stub
+
+    }
+
+    @Override
+    public void createWindow() {
+        reset();
+        window = SPUIComponentProvider.getWindow(i18n.get("caption.add.type"), null,
+                SPUIDefinitions.CREATE_UPDATE_WINDOW, this, event -> save(event), event -> discard(event));
+    }
+
+    private void createUpdateOptionGroup() {
+        final List<String> optionValues = new ArrayList<>();
+        if (permChecker.hasCreateDistributionPermission()) {
+            optionValues.add(createDistType.getValue());
+        }
+        if (permChecker.hasUpdateDistributionPermission()) {
+            optionValues.add(updateDistType.getValue());
+        }
+        createOptionGroupByValues(optionValues);
+    }
+
+    private void createOptionGroupByValues(final List<String> typeOptions) {
+        optiongroup = new OptionGroup("", typeOptions);
+        optiongroup.setId(SPUIDefinitions.CREATE_OPTION_GROUP_DISTRIBUTION_SET_TYPE_ID);
+        optiongroup.addStyleName(ValoTheme.OPTIONGROUP_SMALL);
+        optiongroup.addStyleName("custom-option-group");
+        optiongroup.setNullSelectionAllowed(false);
+        optiongroup.setCaption(null);
+        if (!typeOptions.isEmpty()) {
+            optiongroup.select(typeOptions.get(0));
+        }
     }
 
 }

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/distributions/disttype/DSTypeFilterHeader.java

@@ -62,7 +62,6 @@ public class DSTypeFilterHeader extends AbstractFilterHeader {
         final Window addUpdateWindow = createUpdateDistSetTypeLayout.getWindow();
         UI.getCurrent().addWindow(addUpdateWindow);
         addUpdateWindow.setVisible(Boolean.TRUE);
-
     }
 
     @Override

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/management/dstable/DistributionAddUpdateWindowLayout.java

@@ -23,11 +23,11 @@ import org.eclipse.hawkbit.repository.model.DistributionSet;
 import org.eclipse.hawkbit.repository.model.DistributionSetType;
 import org.eclipse.hawkbit.repository.model.TenantMetaData;
 import org.eclipse.hawkbit.ui.UiProperties;
+import org.eclipse.hawkbit.ui.common.CommonDialogWindow;
 import org.eclipse.hawkbit.ui.common.DistributionSetTypeBeanQuery;
 import org.eclipse.hawkbit.ui.common.PopupWindowHelp;
 import org.eclipse.hawkbit.ui.common.table.BaseEntityEventType;
 import org.eclipse.hawkbit.ui.components.SPUIComponentProvider;
-import org.eclipse.hawkbit.ui.decorators.SPUIButtonStyleSmallNoBorder;
 import org.eclipse.hawkbit.ui.management.event.DistributionTableEvent;
 import org.eclipse.hawkbit.ui.management.event.DragEvent;
 import org.eclipse.hawkbit.ui.utils.HawkbitCommonUtil;
@@ -49,21 +49,17 @@ import com.vaadin.data.Property.ValueChangeEvent;
 import com.vaadin.data.Property.ValueChangeListener;
 import com.vaadin.event.FieldEvents.TextChangeEvent;
 import com.vaadin.event.FieldEvents.TextChangeListener;
-import com.vaadin.server.FontAwesome;
 import com.vaadin.spring.annotation.SpringComponent;
 import com.vaadin.spring.annotation.ViewScope;
 import com.vaadin.ui.Alignment;
-import com.vaadin.ui.Button;
 import com.vaadin.ui.CheckBox;
 import com.vaadin.ui.ComboBox;
 import com.vaadin.ui.Component;
-import com.vaadin.ui.HorizontalLayout;
 import com.vaadin.ui.Label;
 import com.vaadin.ui.TextArea;
 import com.vaadin.ui.TextField;
 import com.vaadin.ui.UI;
 import com.vaadin.ui.VerticalLayout;
-import com.vaadin.ui.Window;
 import com.vaadin.ui.themes.ValoTheme;
 
 /**
@@ -99,8 +95,8 @@ public class DistributionAddUpdateWindowLayout extends VerticalLayout {
     @Autowired
     private transient UiProperties uiProperties;
 
-    private Button saveDistributionBtn;
+    // private Button saveDistributionBtn;
-    private Button discardDistributionBtn;
+    // private Button discardDistributionBtn;
     private TextField distNameTextField;
     private TextField distVersionTextField;
     private Label madatoryLabel;
@@ -109,7 +105,7 @@ public class DistributionAddUpdateWindowLayout extends VerticalLayout {
     private ComboBox distsetTypeNameComboBox;
     private boolean editDistribution = Boolean.FALSE;
     private Long editDistId;
-    private Window addDistributionWindow;
+    private CommonDialogWindow addDistributionWindow;
     private String originalDistName;
     private String originalDistVersion;
     private String originalDistDescription;
@@ -133,13 +129,16 @@ public class DistributionAddUpdateWindowLayout extends VerticalLayout {
 
     private void buildLayout() {
         /* action button layout ( save & discard ) */
-        final HorizontalLayout buttonsLayout = new HorizontalLayout();
+        // final HorizontalLayout buttonsLayout = new HorizontalLayout();
-        buttonsLayout.setSizeFull();
+        // buttonsLayout.setSizeFull();
-        buttonsLayout.setStyleName("dist-buttons-horz-layout");
+        // buttonsLayout.setStyleName("dist-buttons-horz-layout");
-        buttonsLayout.addComponents(saveDistributionBtn, discardDistributionBtn);
+        // buttonsLayout.addComponents(saveDistributionBtn,
-        buttonsLayout.setComponentAlignment(saveDistributionBtn, Alignment.BOTTOM_LEFT);
+        // discardDistributionBtn);
-        buttonsLayout.setComponentAlignment(discardDistributionBtn, Alignment.BOTTOM_RIGHT);
+        // buttonsLayout.setComponentAlignment(saveDistributionBtn,
-        buttonsLayout.addStyleName("window-style");
+        // Alignment.BOTTOM_LEFT);
+        // buttonsLayout.setComponentAlignment(discardDistributionBtn,
+        // Alignment.BOTTOM_RIGHT);
+        // buttonsLayout.addStyleName("window-style");
 
         /*
          * The main layout of the window contains mandatory info, textboxes
@@ -150,12 +149,12 @@ public class DistributionAddUpdateWindowLayout extends VerticalLayout {
         setSizeUndefined();
         addComponents(new PopupWindowHelp(uiProperties.getLinks().getDocumentation().getRoot()), madatoryLabel,
                 distsetTypeNameComboBox, distNameTextField, distVersionTextField, descTextArea, reqMigStepCheckbox);
-        
+
-        addComponent(buttonsLayout);
+        // addComponent(buttonsLayout);
         setComponentAlignment(madatoryLabel, Alignment.MIDDLE_LEFT);
         distNameTextField.focus();
-        
+
-     }
+    }
 
     /**
      * Create required UI components.
@@ -193,15 +192,20 @@ public class DistributionAddUpdateWindowLayout extends VerticalLayout {
         reqMigStepCheckbox.addStyleName(ValoTheme.CHECKBOX_SMALL);
         reqMigStepCheckbox.setId(SPUIComponetIdProvider.DIST_ADD_MIGRATION_CHECK);
 
-        /* save or update button */
+        // /* save or update button */
-        saveDistributionBtn = SPUIComponentProvider.getButton(SPUIComponetIdProvider.DIST_ADD_SAVE, "", "", "", true,
+        // saveDistributionBtn =
-                FontAwesome.SAVE, SPUIButtonStyleSmallNoBorder.class);
+        // SPUIComponentProvider.getButton(SPUIComponetIdProvider.DIST_ADD_SAVE,
-        saveDistributionBtn.addClickListener(event -> saveDistribution());
+        // "", "", "", true,
-
+        // FontAwesome.SAVE, SPUIButtonStyleSmallNoBorder.class);
-        /* close button */
+        // saveDistributionBtn.addClickListener(event -> saveDistribution());
-        discardDistributionBtn = SPUIComponentProvider.getButton(SPUIComponetIdProvider.DIST_ADD_DISCARD, "", "", "",
+        //
-                true, FontAwesome.TIMES, SPUIButtonStyleSmallNoBorder.class);
+        // /* close button */
-        discardDistributionBtn.addClickListener(event -> discardDistribution());
+        // discardDistributionBtn =
+        // SPUIComponentProvider.getButton(SPUIComponetIdProvider.DIST_ADD_DISCARD,
+        // "", "", "",
+        // true, FontAwesome.TIMES, SPUIButtonStyleSmallNoBorder.class);
+        // discardDistributionBtn.addClickListener(event ->
+        // discardDistribution());
     }
 
     /**
@@ -224,7 +228,7 @@ public class DistributionAddUpdateWindowLayout extends VerticalLayout {
     }
 
     private void enableSaveButton() {
-        saveDistributionBtn.setEnabled(true);
+        addDistributionWindow.setSaveButtonEnabled(true);
     }
 
     private DistributionSetType getDefaultDistributionSetType() {
@@ -234,7 +238,7 @@ public class DistributionAddUpdateWindowLayout extends VerticalLayout {
     }
 
     private void disableSaveButton() {
-        saveDistributionBtn.setEnabled(false);
+        addDistributionWindow.setSaveButtonEnabled(false);
     }
 
     private void saveDistribution() {
@@ -422,7 +426,9 @@ public class DistributionAddUpdateWindowLayout extends VerticalLayout {
         distsetTypeNameComboBox.removeStyleName(SPUIStyleDefinitions.SP_COMBOFIELD_ERROR);
         descTextArea.clear();
         reqMigStepCheckbox.clear();
-        saveDistributionBtn.setEnabled(true);
+        if (addDistributionWindow != null) {
+            addDistributionWindow.setSaveButtonEnabled(true);
+        }
         removeListeners();
         changedComponents.clear();
     }
@@ -504,7 +510,7 @@ public class DistributionAddUpdateWindowLayout extends VerticalLayout {
     public void populateValuesOfDistribution(final Long editDistId) {
         this.editDistId = editDistId;
         editDistribution = Boolean.TRUE;
-        saveDistributionBtn.setEnabled(false);
+        addDistributionWindow.setSaveButtonEnabled(false);
         final DistributionSet distSet = distributionSetManagement.findDistributionSetByIdWithDetails(editDistId);
         if (distSet != null) {
             distNameTextField.setValue(distSet.getName());
@@ -526,13 +532,13 @@ public class DistributionAddUpdateWindowLayout extends VerticalLayout {
         }
     }
 
-    public Window getWindow() {
+    public CommonDialogWindow getWindow() {
         eventBus.publish(this, DragEvent.HIDE_DROP_HINT);
         populateRequiredComponents();
         resetComponents();
         addDistributionWindow = SPUIComponentProvider.getWindow(i18n.get("caption.add.new.dist"), null,
-                SPUIDefinitions.CREATE_UPDATE_WINDOW);
+                SPUIDefinitions.CREATE_UPDATE_WINDOW, this, event -> saveDistribution(),
-        addDistributionWindow.setContent(this);
+                event -> discardDistribution());
         return addDistributionWindow;
     }
 

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/management/dstag/CreateUpdateDistributionTagLayoutWindow.java

@@ -8,33 +8,26 @@
  */
 package org.eclipse.hawkbit.ui.management.dstag;
 
-import java.util.ArrayList;
+import static org.apache.commons.lang3.StringUtils.isNotEmpty;
+
 import java.util.List;
 
 import org.eclipse.hawkbit.eventbus.event.DistributionSetTagCreatedBulkEvent;
 import org.eclipse.hawkbit.eventbus.event.DistributionSetTagDeletedEvent;
 import org.eclipse.hawkbit.eventbus.event.DistributionSetTagUpdateEvent;
 import org.eclipse.hawkbit.repository.model.DistributionSetTag;
-import org.eclipse.hawkbit.ui.components.SPUIComponentProvider;
+import org.eclipse.hawkbit.ui.colorPicker.ColorPickerConstants;
+import org.eclipse.hawkbit.ui.colorPicker.ColorPickerHelper;
 import org.eclipse.hawkbit.ui.management.tag.CreateUpdateTagLayout;
-import org.eclipse.hawkbit.ui.management.tag.SpColorPickerPreview;
-import org.eclipse.hawkbit.ui.utils.HawkbitCommonUtil;
 import org.eclipse.hawkbit.ui.utils.SPUIDefinitions;
 import org.eclipse.hawkbit.ui.utils.SPUILabelDefinitions;
-import org.eclipse.hawkbit.ui.utils.UINotification;
-import org.springframework.beans.factory.annotation.Autowired;
 import org.vaadin.spring.events.EventScope;
 import org.vaadin.spring.events.annotation.EventBusListenerMethod;
 
-import com.google.common.base.Strings;
-import com.vaadin.shared.ui.colorpicker.Color;
 import com.vaadin.spring.annotation.SpringComponent;
 import com.vaadin.spring.annotation.VaadinSessionScope;
 import com.vaadin.ui.Button.ClickEvent;
-import com.vaadin.ui.OptionGroup;
 import com.vaadin.ui.UI;
-import com.vaadin.ui.Window;
-import com.vaadin.ui.themes.ValoTheme;
 
 /**
  *
@@ -43,247 +36,12 @@ import com.vaadin.ui.themes.ValoTheme;
 @SpringComponent
 @VaadinSessionScope
 public class CreateUpdateDistributionTagLayoutWindow extends CreateUpdateTagLayout {
+
     private static final long serialVersionUID = 444276149954167545L;
 
-    @Autowired
-    private transient UINotification uiNotification;
-
-    private static final String MISSING_TAG_NAME = "message.error.missing.tagname";
     private static final String TARGET_TAG_NAME_DYNAMIC_STYLE = "new-target-tag-name";
     private static final String MSG_TEXTFIELD_NAME = "textfield.name";
 
-    private Window distTagWindow;
-
-    public Window getWindow() {
-        reset();
-        distTagWindow = SPUIComponentProvider.getWindow(i18n.get("caption.add.tag"), null,
-                SPUIDefinitions.CREATE_UPDATE_WINDOW);
-        distTagWindow.setContent(this);
-        return distTagWindow;
-
-    }
-
-    @Override
-    protected void populateTagNameCombo() {
-        tagNameComboBox.removeAllItems();
-        final List<DistributionSetTag> distTagNameList = tagManagement.findAllDistributionSetTags();
-        distTagNameList.forEach(value -> tagNameComboBox.addItem(value.getName()));
-    }
-
-    /**
-     * Update DistributionTag.
-     */
-    @Override
-    public void save(final ClickEvent event) {
-        if (mandatoryValuesPresent()) {
-            final DistributionSetTag existingDistTag = tagManagement.findDistributionSetTag(tagName.getValue());
-            if (optiongroup.getValue().equals(createTagNw)) {
-                if (!checkIsDuplicate(existingDistTag)) {
-                    crateNewTag();
-                }
-            } else {
-
-                updateTag(existingDistTag);
-            }
-        }
-    }
-
-    /**
-     * Create new tag.
-     */
-    private void crateNewTag() {
-
-        final String colorPicked = getColorPickedSting();
-        final String tagNameValue = HawkbitCommonUtil.trimAndNullIfEmpty(tagName.getValue());
-        final String tagDescValue = HawkbitCommonUtil.trimAndNullIfEmpty(tagDesc.getValue());
-
-        if (null != tagNameValue) {
-            DistributionSetTag newDistTag = new DistributionSetTag(tagNameValue);
-            if (null != tagDescValue) {
-                newDistTag.setDescription(tagDescValue);
-            }
-            newDistTag.setColour(new Color(0, 146, 58).getCSS());
-            if (colorPicked != null) {
-                newDistTag.setColour(colorPicked);
-            }
-            newDistTag = tagManagement.createDistributionSetTag(newDistTag);
-            uiNotification.displaySuccess(i18n.get("message.save.success", new Object[] { newDistTag.getName() }));
-            resetDistTagValues();
-
-        } else {
-            uiNotification.displayValidationError(i18n.get(MISSING_TAG_NAME));
-
-        }
-
-    }
-
-    /**
-     * update tag.
-     */
-    private void updateTag(final DistributionSetTag distObj) {
-        final String nameUpdateValue = HawkbitCommonUtil.trimAndNullIfEmpty(tagName.getValue());
-        final String descUpdateValue = HawkbitCommonUtil.trimAndNullIfEmpty(tagDesc.getValue());
-
-        if (null != nameUpdateValue) {
-            distObj.setName(nameUpdateValue);
-            distObj.setDescription(null != descUpdateValue ? descUpdateValue : null);
-            // update target tag with color selected
-            distObj.setColour(getColorPickedSting());
-            tagManagement.updateDistributionSetTag(distObj);
-            uiNotification.displaySuccess(i18n.get("message.update.success", new Object[] { distObj.getName() }));
-            closeWindow();
-        } else {
-            uiNotification.displayValidationError(i18n.get("message.tag.update.mandatory"));
-        }
-
-    }
-
-    private void closeWindow() {
-        distTagWindow.close();
-        UI.getCurrent().removeWindow(distTagWindow);
-    }
-
-    /**
-     * RESET.
-     * 
-     * @param event
-     */
-    @Override
-    public void discard(final ClickEvent event) {
-        distTagWindow.setVisible(false);
-        UI.getCurrent().removeWindow(distTagWindow);
-        resetDistTagValues();
-    }
-
-    /**
-     * Get color picked value in string.
-     *
-     * @return String of color picked value.
-     */
-    private String getColorPickedSting() {
-        return "rgb(" + getSelPreview().getColor().getRed() + "," + getSelPreview().getColor().getGreen() + ","
-                + getSelPreview().getColor().getBlue() + ")";
-    }
-
-    /**
-     * Color view.
-     * 
-     * @return ColorPickerPreview as UI
-     */
-    public SpColorPickerPreview getSelPreview() {
-        return selPreview;
-    }
-
-    /**
-     * RESET.
-     */
-    private void resetDistTagValues() {
-        tagName.removeStyleName(TARGET_TAG_NAME_DYNAMIC_STYLE);
-        tagName.addStyleName(SPUIDefinitions.NEW_TARGET_TAG_NAME);
-        tagName.setValue("");
-        tagName.setInputPrompt(i18n.get(MSG_TEXTFIELD_NAME));
-        setColor(new Color(0, 146, 58));
-        distTagWindow.setVisible(false);
-        tagPreviewBtnClicked = false;
-        UI.getCurrent().removeWindow(distTagWindow);
-    }
-
-    /*
-     * (non-Javadoc)
-     * 
-     * @see hawkbit.server.ui.management.CreateUpdateTagLayout#createOptionGroup
-     * ()
-     */
-    @Override
-    protected void createOptionGroup() {
-        final List<String> optionValues = new ArrayList<>();
-        if (permChecker.hasCreateDistributionPermission()) {
-            optionValues.add(createTag.getValue());
-        }
-        if (permChecker.hasUpdateDistributionPermission()) {
-            optionValues.add(updateTag.getValue());
-        }
-
-        createOptionGroup(optionValues);
-    }
-
-    private void createOptionGroup(final List<String> tagOptions) {
-        optiongroup = new OptionGroup("", tagOptions);
-        optiongroup.setCaption(null);
-        optiongroup.addStyleName(ValoTheme.OPTIONGROUP_SMALL);
-        optiongroup.addStyleName("custom-option-group");
-        optiongroup.setNullSelectionAllowed(false);
-        if (!tagOptions.isEmpty()) {
-            optiongroup.select(tagOptions.get(0));
-        }
-    }
-
-    /**
-     * 
-     * @return
-     */
-    private Boolean mandatoryValuesPresent() {
-        if (Strings.isNullOrEmpty(tagName.getValue())) {
-            if (optiongroup.getValue().equals(createTagNw)) {
-                uiNotification.displayValidationError(SPUILabelDefinitions.MISSING_TAG_NAME);
-            }
-            if (optiongroup.getValue().equals(updateTagNw)) {
-                if (null == tagNameComboBox.getValue()) {
-                    uiNotification.displayValidationError(i18n.get("message.error.missing.tagname"));
-                } else {
-                    uiNotification.displayValidationError(SPUILabelDefinitions.MISSING_TAG_NAME);
-                }
-            }
-            return Boolean.FALSE;
-        }
-        return Boolean.TRUE;
-    }
-
-    /**
-     * Select tag & set tag name & tag desc values corresponding to selected
-     * tag.
-     * 
-     * @param targetTagSelected
-     *            as the selected tag from combo
-     */
-    @Override
-    public void setTagDetails(final String distTagSelected) {
-        tagName.setValue(distTagSelected);
-        final DistributionSetTag selectedDistTag = tagManagement.findDistributionSetTag(distTagSelected);
-        if (null != selectedDistTag) {
-            tagDesc.setValue(selectedDistTag.getDescription());
-            if (null == selectedDistTag.getColour()) {
-                selectedColor = new Color(44, 151, 32);
-                selPreview.setColor(selectedColor);
-                colorSelect.setColor(selectedColor);
-                createDynamicStyleForComponents(tagName, tagDesc, DEFAULT_COLOR);
-                getPreviewButtonColor(DEFAULT_COLOR);
-            } else {
-                selectedColor = rgbToColorConverter(selectedDistTag.getColour());
-                selPreview.setColor(selectedColor);
-                colorSelect.setColor(selectedColor);
-                createDynamicStyleForComponents(tagName, tagDesc, selectedDistTag.getColour());
-                getPreviewButtonColor(selectedDistTag.getColour());
-            }
-        }
-    }
-
-    /**
-     * Checking Tag already existed or not.
-     * 
-     * @param existingDistTag
-     * @return
-     */
-
-    private Boolean checkIsDuplicate(final DistributionSetTag existingDistTag) {
-        if (existingDistTag != null) {
-            uiNotification.displayValidationError(
-                    i18n.get("message.tag.duplicate.check", new Object[] { existingDistTag.getName() }));
-            return Boolean.TRUE;
-        }
-        return Boolean.FALSE;
-    }
-
     @EventBusListenerMethod(scope = EventScope.SESSION)
     // Exception squid:S1172 - event not needed
     @SuppressWarnings({ "squid:S1172" })
@@ -305,4 +63,104 @@ public class CreateUpdateDistributionTagLayoutWindow extends CreateUpdateTagLayo
         populateTagNameCombo();
     }
 
+    @Override
+    protected void populateTagNameCombo() {
+        tagNameComboBox.removeAllItems();
+        final List<DistributionSetTag> distTagNameList = tagManagement.findAllDistributionSetTags();
+        distTagNameList.forEach(value -> tagNameComboBox.addItem(value.getName()));
+    }
+
+    /**
+     * Update DistributionTag.
+     */
+    @Override
+    public void save(final ClickEvent event) {
+        if (mandatoryValuesPresent()) {
+            final DistributionSetTag existingDistTag = tagManagement.findDistributionSetTag(tagName.getValue());
+            if (optiongroup.getValue().equals(createTagNw)) {
+                if (!checkIsDuplicate(existingDistTag)) {
+                    crateNewTag();
+                }
+            } else {
+
+                updateExistingTag(existingDistTag);
+            }
+        }
+    }
+
+    /**
+     * Create new tag.
+     */
+    protected void crateNewTag() {
+        super.createNewTag();
+        if (isNotEmpty(getTagNameValue())) {
+            DistributionSetTag newDistTag = new DistributionSetTag(getTagNameValue());
+            if (isNotEmpty(getTagDescValue())) {
+                newDistTag.setDescription(getTagDescValue());
+            }
+            newDistTag.setColour(ColorPickerConstants.START_COLOR.getCSS());
+            if (isNotEmpty(getColorPicked())) {
+                newDistTag.setColour(getColorPicked());
+            }
+            newDistTag = tagManagement.createDistributionSetTag(newDistTag);
+            displaySuccess(newDistTag.getName());
+            resetDistTagValues();
+        } else {
+            displayValidationError(i18n.get(SPUILabelDefinitions.MISSING_TAG_NAME));
+        }
+    }
+
+    /**
+     * RESET.
+     * 
+     * @param event
+     */
+    @Override
+    public void discard(final ClickEvent event) {
+        super.discard(event);
+        resetDistTagValues();
+    }
+
+    /**
+     * RESET.
+     */
+    private void resetDistTagValues() {
+        tagName.removeStyleName(TARGET_TAG_NAME_DYNAMIC_STYLE);
+        tagName.addStyleName(SPUIDefinitions.NEW_TARGET_TAG_NAME);
+        tagName.setValue("");
+        tagName.setInputPrompt(i18n.get(MSG_TEXTFIELD_NAME));
+        setColor(ColorPickerConstants.START_COLOR);
+        getWindow().setVisible(false);
+        tagPreviewBtnClicked = false;
+        UI.getCurrent().removeWindow(getWindow());
+    }
+
+    /**
+     * Select tag & set tag name & tag desc values corresponding to selected
+     * tag.
+     * 
+     * @param distTagSelected
+     *            as the selected tag from combo
+     */
+    @Override
+    public void setTagDetails(final String distTagSelected) {
+        tagName.setValue(distTagSelected);
+        final DistributionSetTag selectedDistTag = tagManagement.findDistributionSetTag(distTagSelected);
+        if (null != selectedDistTag) {
+            tagDesc.setValue(selectedDistTag.getDescription());
+            if (null == selectedDistTag.getColour()) {
+                setTagColor(getColorPickerLayout().getDefaultColor(), ColorPickerConstants.DEFAULT_COLOR);
+            } else {
+                setTagColor(ColorPickerHelper.rgbToColorConverter(selectedDistTag.getColour()),
+                        selectedDistTag.getColour());
+            }
+        }
+    }
+
+    @Override
+    protected void createRequiredComponents() {
+        super.createRequiredComponents();
+        createOptionGroup(permChecker.hasCreateDistributionPermission(), permChecker.hasUpdateDistributionPermission());
+    }
+
 }

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/management/tag/CreateUpdateTagLayout.java

@@ -8,52 +8,53 @@
  */
 package org.eclipse.hawkbit.ui.management.tag;
 
-import java.util.HashSet;
+import java.util.ArrayList;
-import java.util.Set;
+import java.util.List;
 
 import javax.annotation.PreDestroy;
 
 import org.eclipse.hawkbit.repository.SpPermissionChecker;
 import org.eclipse.hawkbit.repository.TagManagement;
 import org.eclipse.hawkbit.repository.model.DistributionSetTag;
+import org.eclipse.hawkbit.repository.model.Tag;
 import org.eclipse.hawkbit.repository.model.TargetTag;
 import org.eclipse.hawkbit.ui.UiProperties;
-import org.eclipse.hawkbit.ui.common.CoordinatesToColor;
+import org.eclipse.hawkbit.ui.colorPicker.ColorPickerConstants;
-import org.eclipse.hawkbit.ui.common.PopupWindowHelp;
+import org.eclipse.hawkbit.ui.colorPicker.ColorPickerHelper;
+import org.eclipse.hawkbit.ui.colorPicker.ColorPickerLayout;
+import org.eclipse.hawkbit.ui.common.CommonDialogWindow;
 import org.eclipse.hawkbit.ui.components.SPUIComponentProvider;
-import org.eclipse.hawkbit.ui.decorators.SPUIButtonStyleSmallNoBorder;
 import org.eclipse.hawkbit.ui.utils.HawkbitCommonUtil;
 import org.eclipse.hawkbit.ui.utils.I18N;
 import org.eclipse.hawkbit.ui.utils.SPUIComponetIdProvider;
 import org.eclipse.hawkbit.ui.utils.SPUIDefinitions;
 import org.eclipse.hawkbit.ui.utils.SPUILabelDefinitions;
 import org.eclipse.hawkbit.ui.utils.SPUIStyleDefinitions;
+import org.eclipse.hawkbit.ui.utils.UINotification;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.vaadin.spring.events.EventBus;
 
+import com.google.common.base.Strings;
 import com.vaadin.data.Property.ValueChangeEvent;
 import com.vaadin.data.Property.ValueChangeListener;
-import com.vaadin.server.FontAwesome;
 import com.vaadin.server.Page;
 import com.vaadin.shared.ui.colorpicker.Color;
-import com.vaadin.ui.AbstractColorPicker.Coordinates2Color;
 import com.vaadin.ui.Alignment;
 import com.vaadin.ui.Button;
 import com.vaadin.ui.ComboBox;
 import com.vaadin.ui.CustomComponent;
+import com.vaadin.ui.FormLayout;
 import com.vaadin.ui.HorizontalLayout;
 import com.vaadin.ui.Label;
 import com.vaadin.ui.OptionGroup;
-import com.vaadin.ui.Slider;
-import com.vaadin.ui.Slider.ValueOutOfBoundsException;
 import com.vaadin.ui.TextArea;
 import com.vaadin.ui.TextField;
+import com.vaadin.ui.UI;
 import com.vaadin.ui.VerticalLayout;
 import com.vaadin.ui.components.colorpicker.ColorChangeEvent;
 import com.vaadin.ui.components.colorpicker.ColorChangeListener;
-import com.vaadin.ui.components.colorpicker.ColorPickerGradient;
 import com.vaadin.ui.components.colorpicker.ColorSelector;
 import com.vaadin.ui.themes.ValoTheme;
 
@@ -63,14 +64,16 @@ import com.vaadin.ui.themes.ValoTheme;
 public abstract class CreateUpdateTagLayout extends CustomComponent implements ColorChangeListener, ColorSelector {
     private static final long serialVersionUID = 4229177824620576456L;
     private static final Logger LOG = LoggerFactory.getLogger(CreateUpdateTagLayout.class);
-    protected static final String DEFAULT_COLOR = "rgb(44,151,32)";
     private static final String TAG_NAME_DYNAMIC_STYLE = "new-tag-name";
     private static final String TAG_DESC_DYNAMIC_STYLE = "new-tag-desc";
     private static final String TAG_DYNAMIC_STYLE = "tag-color-preview";
+    protected static final String MESSAGE_ERROR_MISSING_TAGNAME = "message.error.missing.tagname";
 
     protected String createTagNw;
     protected String updateTagNw;
 
+    protected CommonDialogWindow window;
+
     @Autowired
     private transient UiProperties uiProperties;
 
@@ -85,43 +88,38 @@ public abstract class CreateUpdateTagLayout extends CustomComponent implements C
 
     @Autowired
     protected SpPermissionChecker permChecker;
-    /**
-     * Local Instance of ColorPickerPreview.
-     */
-    protected SpColorPickerPreview selPreview;
 
-    protected Label createTag;
+    @Autowired
-    protected Label updateTag;
+    protected transient UINotification uiNotification;
+
+    private final FormLayout formLayout = new FormLayout();
+
     private Label comboLabel;
-    private Label colorLabel;
+    protected Label colorLabel;
-    private Label madatoryLabel;
+    protected Label madatoryLabel;
     protected TextField tagName;
     protected TextArea tagDesc;
-    private Button saveTag;
+    protected Button tagColorPreviewBtn;
-    private Button discardTag;
+    protected OptionGroup optiongroup = new OptionGroup();
-    private Button tagColorPreviewBtn;
-    protected OptionGroup optiongroup;
     protected ComboBox tagNameComboBox;
 
-    protected ColorPickerGradient colorSelect;
+    protected final VerticalLayout comboLayout = new VerticalLayout();
-    private Set<ColorSelector> selectors;
+    private final ColorPickerLayout colorPickerLayout = new ColorPickerLayout();
-    protected Color selectedColor;
+    private final HorizontalLayout mainLayout = new HorizontalLayout();
-
+    final VerticalLayout contentLayout = new VerticalLayout();
-    private Slider redSlider;
-    private Slider greenSlider;
-    private Slider blueSlider;
-
-    private VerticalLayout comboLayout;
-    private VerticalLayout sliders;
-    private VerticalLayout colorPickerLayout;
-    private HorizontalLayout mainLayout;
-    private VerticalLayout fieldLayout;
-
-    /** RGB color converter. */
-    private final Coordinates2Color rgbConverter = new CoordinatesToColor();
 
     protected boolean tagPreviewBtnClicked = false;
 
+    private String colorPicked;
+    private String tagNameValue;
+    private String tagDescValue;
+
+    protected void createWindow() {
+        reset();
+        setWindow(SPUIComponentProvider.getWindow(i18n.get("caption.add.tag"), null,
+                SPUIDefinitions.CREATE_UPDATE_WINDOW, this, event -> save(event), event -> discard(event)));
+    }
+
     /**
      * Save new tag / update new tag.
      *
@@ -134,12 +132,9 @@ public abstract class CreateUpdateTagLayout extends CustomComponent implements C
      *
      * @param event
      */
-    protected abstract void discard(final Button.ClickEvent event);
+    protected void discard(final Button.ClickEvent event) {
-
+        UI.getCurrent().removeWindow(window);
-    /**
+    }
-     * create option group with Create tag/Update tag based on permissions.
-     */
-    protected abstract void createOptionGroup();
 
     /**
      * Populate target name combo.
@@ -152,9 +147,11 @@ public abstract class CreateUpdateTagLayout extends CustomComponent implements C
      * Init the layout.
      */
     public void init() {
+
         createRequiredComponents();
-        addListeners();
         buildLayout();
+        createWindow();
+        addListeners();
         eventBus.subscribe(this);
     }
 
@@ -163,11 +160,9 @@ public abstract class CreateUpdateTagLayout extends CustomComponent implements C
         eventBus.unsubscribe(this);
     }
 
-    private void createRequiredComponents() {
+    protected void createRequiredComponents() {
         createTagNw = i18n.get("label.create.tag");
         updateTagNw = i18n.get("label.update.tag");
-        createTag = SPUIComponentProvider.getLabel(createTagNw, null);
-        updateTag = SPUIComponentProvider.getLabel(i18n.get("label.update.tag"), null);
         comboLabel = SPUIComponentProvider.getLabel(i18n.get("label.choose.tag"), null);
         madatoryLabel = getMandatoryLabel();
         colorLabel = SPUIComponentProvider.getLabel(i18n.get("label.choose.tag.color"), null);
@@ -178,103 +173,57 @@ public abstract class CreateUpdateTagLayout extends CustomComponent implements C
                 SPUILabelDefinitions.TEXT_FIELD_MAX_LENGTH);
         tagName.setId(SPUIDefinitions.NEW_TARGET_TAG_NAME);
 
-        tagDesc = SPUIComponentProvider.getTextArea(null, "", ValoTheme.TEXTFIELD_TINY + " " + SPUIDefinitions.TAG_DESC,
+        tagDesc = SPUIComponentProvider.getTextArea(i18n.get("textfield.description"), "",
-                false, "", i18n.get("textfield.description"), SPUILabelDefinitions.TEXT_AREA_MAX_LENGTH);
+                ValoTheme.TEXTFIELD_TINY + " " + SPUIDefinitions.TAG_DESC, false, "", i18n.get("textfield.description"),
+                SPUILabelDefinitions.TEXT_AREA_MAX_LENGTH);
 
         tagDesc.setId(SPUIDefinitions.NEW_TARGET_TAG_DESC);
         tagDesc.setImmediate(true);
         tagDesc.setNullRepresentation("");
 
-        tagNameComboBox = SPUIComponentProvider.getComboBox(i18n.get("label.combobox.tag"), "", "", null, null, false,
+        tagNameComboBox = SPUIComponentProvider.getComboBox(null, "", "", null, null, false, "",
-                "", i18n.get("label.combobox.tag"));
+                i18n.get("label.combobox.tag"));
         tagNameComboBox.addStyleName(SPUIDefinitions.FILTER_TYPE_COMBO_STYLE);
         tagNameComboBox.setImmediate(true);
 
-        saveTag = SPUIComponentProvider.getButton(SPUIDefinitions.NEW_TARGET_TAG_SAVE, "", "", "", true,
-                FontAwesome.SAVE, SPUIButtonStyleSmallNoBorder.class);
-        saveTag.addStyleName(ValoTheme.BUTTON_BORDERLESS);
-
-        discardTag = SPUIComponentProvider.getButton(SPUIDefinitions.NEW_TARGET_TAG_DISRACD, "", "",
-                "discard-button-style", true, FontAwesome.TIMES, SPUIButtonStyleSmallNoBorder.class);
-        discardTag.addStyleName(ValoTheme.BUTTON_BORDERLESS);
-
         tagColorPreviewBtn = new Button();
         tagColorPreviewBtn.setId(SPUIComponetIdProvider.TAG_COLOR_PREVIEW_ID);
-        getPreviewButtonColor(DEFAULT_COLOR);
+        getPreviewButtonColor(ColorPickerConstants.DEFAULT_COLOR);
         tagColorPreviewBtn.setStyleName(TAG_DYNAMIC_STYLE);
 
-        selectors = new HashSet<>();
+        ColorPickerHelper.setRgbSliderValues(colorPickerLayout);
-        selectedColor = new Color(44, 151, 32);
-        selPreview = new SpColorPickerPreview(selectedColor);
-
-        colorSelect = new ColorPickerGradient("rgb-gradient", rgbConverter);
-        colorSelect.setColor(selectedColor);
-        colorSelect.setWidth("220px");
-
-        redSlider = createRGBSlider("", "red");
-        greenSlider = createRGBSlider("", "green");
-        blueSlider = createRGBSlider("", "blue");
-        setRgbSliderValues(selectedColor);
-
-        createOptionGroup();
-
     }
 
-    private void buildLayout() {
+    protected void buildLayout() {
-        comboLayout = new VerticalLayout();
-
-        sliders = new VerticalLayout();
-        sliders.addComponents(redSlider, greenSlider, blueSlider);
-
-        selectors.add(colorSelect);
-
-        colorPickerLayout = new VerticalLayout();
-        colorPickerLayout.setStyleName("rgb-vertical-layout");
-        colorPickerLayout.addComponent(selPreview);
-        colorPickerLayout.addComponent(colorSelect);
-
-        fieldLayout = new VerticalLayout();
-        fieldLayout.setSpacing(false);
-        fieldLayout.setMargin(false);
-        fieldLayout.setWidth("100%");
-        fieldLayout.setHeight(null);
-        fieldLayout.addComponent(optiongroup);
-        fieldLayout.addComponent(comboLayout);
-        fieldLayout.addComponent(madatoryLabel);
-        fieldLayout.addComponent(tagName);
-        fieldLayout.addComponent(tagDesc);
 
         final HorizontalLayout colorLabelLayout = new HorizontalLayout();
+        colorLabelLayout.setMargin(false);
         colorLabelLayout.addComponents(colorLabel, tagColorPreviewBtn);
-        fieldLayout.addComponent(colorLabelLayout);
 
-        final HorizontalLayout buttonLayout = new HorizontalLayout();
+        formLayout.addComponent(optiongroup);
-        buttonLayout.addComponent(saveTag);
+        formLayout.addComponent(comboLayout);
-        buttonLayout.addComponent(discardTag);
+        formLayout.addComponent(madatoryLabel);
-        buttonLayout.setComponentAlignment(discardTag, Alignment.BOTTOM_RIGHT);
+        formLayout.addComponent(tagName);
-        buttonLayout.setComponentAlignment(saveTag, Alignment.BOTTOM_LEFT);
+        formLayout.addComponent(tagDesc);
-        buttonLayout.addStyleName("window-style");
+        formLayout.addStyleName("form-lastrow");
-        buttonLayout.setWidth("152px");
+        formLayout.setSizeFull();
 
-        final VerticalLayout fieldButtonLayout = new VerticalLayout();
+        contentLayout.addComponent(formLayout);
-        fieldButtonLayout.addComponent(new PopupWindowHelp(uiProperties.getLinks().getDocumentation().getRoot()));
+        contentLayout.addComponent(colorLabelLayout);
-        fieldButtonLayout.addComponent(fieldLayout);
+        contentLayout.setComponentAlignment(formLayout, Alignment.MIDDLE_CENTER);
-        fieldButtonLayout.addComponent(buttonLayout);
+        contentLayout.setComponentAlignment(colorLabelLayout, Alignment.MIDDLE_LEFT);
-        fieldButtonLayout.setComponentAlignment(buttonLayout, Alignment.BOTTOM_CENTER);
+        contentLayout.setSizeFull();
 
-        mainLayout = new HorizontalLayout();
         mainLayout.setSizeFull();
-        mainLayout.addComponent(fieldButtonLayout);
+        mainLayout.addComponent(contentLayout);
 
         setCompositionRoot(mainLayout);
         tagName.focus();
     }
 
     private void addListeners() {
-        saveTag.addClickListener(event -> save(event));
+        colorPickerLayout.getColorSelect().addColorChangeListener(this);
-        discardTag.addClickListener(event -> discard(event));
+        colorPickerLayout.getSelPreview().addColorChangeListener(this);
-        colorSelect.addColorChangeListener(this);
-        selPreview.addColorChangeListener(this);
         tagColorPreviewBtn.addClickListener(event -> previewButtonClicked());
         optiongroup.addValueChangeListener(event -> optionValueChanged(event));
         tagNameComboBox.addValueChangeListener(event -> tagNameChosen(event));
@@ -285,11 +234,11 @@ public abstract class CreateUpdateTagLayout extends CustomComponent implements C
      * Open color picker on click of preview button. Auto select the color based
      * on target tag if already selected.
      */
-    private void previewButtonClicked() {
+    protected void previewButtonClicked() {
         if (!tagPreviewBtnClicked) {
             setColor();
-            selPreview.setColor(selectedColor);
+            colorPickerLayout.getSelPreview().setColor(colorPickerLayout.getSelectedColor());
-            fieldLayout.addComponent(sliders);
+            contentLayout.addComponent(colorPickerLayout.getSliders());
             mainLayout.addComponent(colorPickerLayout);
             mainLayout.setComponentAlignment(colorPickerLayout, Alignment.BOTTOM_CENTER);
         }
@@ -303,7 +252,8 @@ public abstract class CreateUpdateTagLayout extends CustomComponent implements C
         }
 
         if (tagNameComboBox.getValue() == null) {
-            selectedColor = rgbToColorConverter(DEFAULT_COLOR);
+            colorPickerLayout
+                    .setSelectedColor(ColorPickerHelper.rgbToColorConverter(ColorPickerConstants.DEFAULT_COLOR));
             return;
         }
 
@@ -312,40 +262,18 @@ public abstract class CreateUpdateTagLayout extends CustomComponent implements C
         if (targetTagSelected == null) {
             final DistributionSetTag distTag = tagManagement
                     .findDistributionSetTag(tagNameComboBox.getValue().toString());
-            selectedColor = distTag.getColour() != null ? rgbToColorConverter(distTag.getColour())
+            colorPickerLayout.setSelectedColor(
-                    : rgbToColorConverter(DEFAULT_COLOR);
+                    distTag.getColour() != null ? ColorPickerHelper.rgbToColorConverter(distTag.getColour())
+                            : ColorPickerHelper.rgbToColorConverter(ColorPickerConstants.DEFAULT_COLOR));
         } else {
-            selectedColor = targetTagSelected.getColour() != null ? rgbToColorConverter(targetTagSelected.getColour())
+            colorPickerLayout.setSelectedColor(targetTagSelected.getColour() != null
-                    : rgbToColorConverter(DEFAULT_COLOR);
+                    ? ColorPickerHelper.rgbToColorConverter(targetTagSelected.getColour())
+                    : ColorPickerHelper.rgbToColorConverter(ColorPickerConstants.DEFAULT_COLOR));
         }
 
     }
 
-    /**
+    protected Label getMandatoryLabel() {
-     * Covert RGB code to {@Color}.
-     *
-     * @param value
-     *            RGB vale
-     * @return Color
-     */
-    protected Color rgbToColorConverter(final String value) {
-        if (!value.startsWith("rgb")) {
-            return null;
-        }
-        // RGB color format rgb/rgba(255,255,255,0.1)
-        final String[] colors = value.substring(value.indexOf('(') + 1, value.length() - 1).split(",");
-        final int red = Integer.parseInt(colors[0]);
-        final int green = Integer.parseInt(colors[1]);
-        final int blue = Integer.parseInt(colors[2]);
-        if (colors.length > 3) {
-            final int alpha = (int) (Double.parseDouble(colors[3]) * 255d);
-            return new Color(red, green, blue, alpha);
-        } else {
-            return new Color(red, green, blue);
-        }
-    }
-
-    private Label getMandatoryLabel() {
         final Label label = new Label(i18n.get("label.mandatory.field"));
         label.setStyleName(SPUIStyleDefinitions.SP_TEXTFIELD_ERROR + " " + ValoTheme.LABEL_SMALL);
         return label;
@@ -366,12 +294,11 @@ public abstract class CreateUpdateTagLayout extends CustomComponent implements C
 
         tagDesc.clear();
         restoreComponentStyles();
-        fieldLayout.removeComponent(sliders);
+        // fieldLayout.removeComponent(colorPickerLayout.getSliders());
         mainLayout.removeComponent(colorPickerLayout);
-        selectedColor = new Color(44, 151, 32);
+        colorPickerLayout.setSelectedColor(colorPickerLayout.getDefaultColor());
-        selPreview.setColor(selectedColor);
+        colorPickerLayout.getSelPreview().setColor(colorPickerLayout.getSelectedColor());
         tagPreviewBtnClicked = false;
-
     }
 
     /**
@@ -381,6 +308,7 @@ public abstract class CreateUpdateTagLayout extends CustomComponent implements C
      *            ValueChangeEvent
      */
     private void optionValueChanged(final ValueChangeEvent event) {
+
         if ("Update Tag".equals(event.getProperty().getValue())) {
             tagName.clear();
             tagDesc.clear();
@@ -399,14 +327,14 @@ public abstract class CreateUpdateTagLayout extends CustomComponent implements C
         }
         // close the color picker layout
         tagPreviewBtnClicked = false;
-        // reset the selected color - Set defualt color
+        // reset the selected color - Set default color
         restoreComponentStyles();
-        getPreviewButtonColor(DEFAULT_COLOR);
+        getPreviewButtonColor(ColorPickerConstants.DEFAULT_COLOR);
-        selPreview.setColor(rgbToColorConverter(DEFAULT_COLOR));
+        colorPickerLayout.getSelPreview()
+                .setColor(ColorPickerHelper.rgbToColorConverter(ColorPickerConstants.DEFAULT_COLOR));
         // remove the sliders and color picker layout
-        fieldLayout.removeComponent(sliders);
+        // fieldLayout.removeComponent(colorPickerLayout.getSliders());
         mainLayout.removeComponent(colorPickerLayout);
-
     }
 
     /**
@@ -421,14 +349,14 @@ public abstract class CreateUpdateTagLayout extends CustomComponent implements C
         // hide target name combo
         comboLayout.removeComponent(comboLabel);
         comboLayout.removeComponent(tagNameComboBox);
-        fieldLayout.removeComponent(sliders);
+        contentLayout.removeComponent(colorPickerLayout.getSliders());
         mainLayout.removeComponent(colorPickerLayout);
 
         optiongroup.select(createTagNw);
 
         // Default green color
-        selectedColor = new Color(44, 151, 32);
+        colorPickerLayout.setSelectedColor(colorPickerLayout.getDefaultColor());
-        selPreview.setColor(selectedColor);
+        colorPickerLayout.getSelPreview().setColor(colorPickerLayout.getSelectedColor());
         tagPreviewBtnClicked = false;
     }
 
@@ -439,12 +367,13 @@ public abstract class CreateUpdateTagLayout extends CustomComponent implements C
     @Override
     public void colorChanged(final ColorChangeEvent event) {
         setColor(event.getColor());
-        for (final ColorSelector select : selectors) {
+        for (final ColorSelector select : colorPickerLayout.getSelectors()) {
-            if (!event.getSource().equals(select) && select.equals(this) && !select.getColor().equals(selectedColor)) {
+            if (!event.getSource().equals(select) && select.equals(this)
-                select.setColor(selectedColor);
+                    && !select.getColor().equals(colorPickerLayout.getSelectedColor())) {
+                select.setColor(colorPickerLayout.getSelectedColor());
             }
         }
-        setRgbSliderValues(selectedColor);
+        ColorPickerHelper.setRgbSliderValues(colorPickerLayout);
         getPreviewButtonColor(event.getColor().getCSS());
         createDynamicStyleForComponents(tagName, tagDesc, event.getColor().getCSS());
     }
@@ -461,28 +390,6 @@ public abstract class CreateUpdateTagLayout extends CustomComponent implements C
         Page.getCurrent().getJavaScript().execute(HawkbitCommonUtil.getPreviewButtonColorScript(color));
     }
 
-    private Slider createRGBSlider(final String caption, final String styleName) {
-        final Slider slider = new Slider(caption, 0, 255);
-        slider.setImmediate(true);
-        slider.setWidth("150px");
-        slider.addStyleName(styleName);
-        return slider;
-    }
-
-    private void setRgbSliderValues(final Color color) {
-        try {
-            final double redColorValue = color.getRed();
-            redSlider.setValue(new Double(redColorValue));
-            final double blueColorValue = color.getBlue();
-            blueSlider.setValue(new Double(blueColorValue));
-            final double greenColorValue = color.getGreen();
-            greenSlider.setValue(new Double(greenColorValue));
-        } catch (final ValueOutOfBoundsException e) {
-            LOG.error("Unable to set RGB color value to " + color.getRed() + "," + color.getGreen() + ","
-                    + color.getBlue(), e);
-        }
-    }
-
     /**
      * Set tag name and desc field border color based on chosen color.
      *
@@ -507,7 +414,7 @@ public abstract class CreateUpdateTagLayout extends CustomComponent implements C
         tagDesc.removeStyleName(TAG_DESC_DYNAMIC_STYLE);
         tagName.addStyleName(SPUIDefinitions.TAG_NAME);
         tagDesc.addStyleName(SPUIDefinitions.TAG_DESC);
-        getPreviewButtonColor(DEFAULT_COLOR);
+        getPreviewButtonColor(ColorPickerConstants.DEFAULT_COLOR);
     }
 
     /**
@@ -531,56 +438,44 @@ public abstract class CreateUpdateTagLayout extends CustomComponent implements C
         if (color == null) {
             return;
         }
-        selectedColor = color;
+        colorPickerLayout.setSelectedColor(color);
-        selPreview.setColor(selectedColor);
+        colorPickerLayout.getSelPreview().setColor(colorPickerLayout.getSelectedColor());
-        final String colorPickedPreview = selPreview.getColor().getCSS();
+        final String colorPickedPreview = colorPickerLayout.getSelPreview().getColor().getCSS();
-        if (tagName.isEnabled() && null != colorSelect) {
+        if (tagName.isEnabled() && null != colorPickerLayout.getColorSelect()) {
             createDynamicStyleForComponents(tagName, tagDesc, colorPickedPreview);
-            colorSelect.setColor(selPreview.getColor());
+            colorPickerLayout.getColorSelect().setColor(colorPickerLayout.getSelPreview().getColor());
         }
     }
 
-    /**
+    protected void closeWindow() {
-     * Value change listeners implementations of sliders.
+        window.close();
-     */
+        UI.getCurrent().removeWindow(window);
-    private void slidersValueChangeListeners() {
-        redSlider.addValueChangeListener(new ValueChangeListener() {
-            private static final long serialVersionUID = -8336732888800920839L;
-
-            @Override
-            public void valueChange(final ValueChangeEvent event) {
-                final double red = (Double) event.getProperty().getValue();
-                final Color newColor = new Color((int) red, selectedColor.getGreen(), selectedColor.getBlue());
-                setColorToComponents(newColor);
-            }
-        });
-        greenSlider.addValueChangeListener(new ValueChangeListener() {
-            private static final long serialVersionUID = 1236358037766775663L;
-
-            @Override
-            public void valueChange(final ValueChangeEvent event) {
-                final double green = (Double) event.getProperty().getValue();
-                final Color newColor = new Color(selectedColor.getRed(), (int) green, selectedColor.getBlue());
-                setColorToComponents(newColor);
-            }
-        });
-        blueSlider.addValueChangeListener(new ValueChangeListener() {
-            private static final long serialVersionUID = 8466370763686043947L;
-
-            @Override
-            public void valueChange(final ValueChangeEvent event) {
-                final double blue = (Double) event.getProperty().getValue();
-                final Color newColor = new Color(selectedColor.getRed(), selectedColor.getGreen(), (int) blue);
-                setColorToComponents(newColor);
-            }
-        });
     }
 
-    private void setColorToComponents(final Color newColor) {
+    /**
-        setColor(newColor);
+     * create option group with Create tag/Update tag based on permissions.
-        colorSelect.setColor(newColor);
+     */
-        getPreviewButtonColor(newColor.getCSS());
+    protected void createOptionGroup(final boolean hasCreatePermission, final boolean hasUpdatePersmission) {
-        createDynamicStyleForComponents(tagName, tagDesc, newColor.getCSS());
+        final List<String> optionValues = new ArrayList<>();
+        if (hasCreatePermission) {
+            optionValues.add(createTagNw);
+        }
+        if (hasUpdatePersmission) {
+            optionValues.add(updateTagNw);
+        }
+        createOptionGroup(optionValues);
+    }
+
+    protected void createOptionGroup(final List<String> tagOptions) {
+        optiongroup = new OptionGroup("", tagOptions);
+        optiongroup.setCaption("Select Action");
+        optiongroup.addStyleName(ValoTheme.OPTIONGROUP_SMALL);
+        optiongroup.addStyleName("custom-option-group");
+
+        optiongroup.setNullSelectionAllowed(false);
+        if (!tagOptions.isEmpty()) {
+            optiongroup.select(tagOptions.get(0));
+        }
     }
 
     @Override
@@ -591,4 +486,168 @@ public abstract class CreateUpdateTagLayout extends CustomComponent implements C
     public void removeColorChangeListener(final ColorChangeListener listener) {
     }
 
+    public ColorPickerLayout getColorPickerLayout() {
+        return colorPickerLayout;
+    }
+
+    public CommonDialogWindow getWindow() {
+        reset();
+        return window;
+    }
+
+    public void setWindow(final CommonDialogWindow window) {
+        this.window = window;
+    }
+
+    /**
+     * Value change listeners implementations of sliders.
+     */
+    private void slidersValueChangeListeners() {
+        colorPickerLayout.getRedSlider().addValueChangeListener(new ValueChangeListener() {
+            private static final long serialVersionUID = -8336732888800920839L;
+
+            @Override
+            public void valueChange(final ValueChangeEvent event) {
+                final double red = (Double) event.getProperty().getValue();
+                final Color newColor = new Color((int) red, colorPickerLayout.getSelectedColor().getGreen(),
+                        colorPickerLayout.getSelectedColor().getBlue());
+                setColorToComponents(newColor);
+            }
+        });
+        colorPickerLayout.getGreenSlider().addValueChangeListener(new ValueChangeListener() {
+            private static final long serialVersionUID = 1236358037766775663L;
+
+            @Override
+            public void valueChange(final ValueChangeEvent event) {
+                final double green = (Double) event.getProperty().getValue();
+                final Color newColor = new Color(colorPickerLayout.getSelectedColor().getRed(), (int) green,
+                        colorPickerLayout.getSelectedColor().getBlue());
+                setColorToComponents(newColor);
+            }
+        });
+        colorPickerLayout.getBlueSlider().addValueChangeListener(new ValueChangeListener() {
+            private static final long serialVersionUID = 8466370763686043947L;
+
+            @Override
+            public void valueChange(final ValueChangeEvent event) {
+                final double blue = (Double) event.getProperty().getValue();
+                final Color newColor = new Color(colorPickerLayout.getSelectedColor().getRed(),
+                        colorPickerLayout.getSelectedColor().getGreen(), (int) blue);
+                setColorToComponents(newColor);
+            }
+        });
+    }
+
+    private void setColorToComponents(final Color newColor) {
+        setColor(newColor);
+        colorPickerLayout.getColorSelect().setColor(newColor);
+        getPreviewButtonColor(newColor.getCSS());
+        createDynamicStyleForComponents(tagName, tagDesc, newColor.getCSS());
+    }
+
+    /**
+     * Create new tag.
+     */
+    protected void createNewTag() {
+        colorPicked = ColorPickerHelper.getColorPickedString(colorPickerLayout.getSelPreview());
+        tagNameValue = HawkbitCommonUtil.trimAndNullIfEmpty(tagName.getValue());
+        tagDescValue = HawkbitCommonUtil.trimAndNullIfEmpty(tagDesc.getValue());
+    }
+
+    /**
+     * update tag.
+     */
+    protected void updateExistingTag(final Tag targetObj) {
+        final String nameUpdateValue = HawkbitCommonUtil.trimAndNullIfEmpty(tagName.getValue());
+        final String descUpdateValue = HawkbitCommonUtil.trimAndNullIfEmpty(tagDesc.getValue());
+
+        if (null != nameUpdateValue) {
+            targetObj.setName(nameUpdateValue);
+            targetObj.setDescription(null != descUpdateValue ? descUpdateValue : null);
+            targetObj.setColour(ColorPickerHelper.getColorPickedString(colorPickerLayout.getSelPreview()));
+            if (targetObj instanceof TargetTag) {
+                tagManagement.updateTargetTag((TargetTag) targetObj);
+            } else if (targetObj instanceof DistributionSetTag) {
+                tagManagement.updateDistributionSetTag((DistributionSetTag) targetObj);
+            }
+            uiNotification.displaySuccess(i18n.get("message.update.success", new Object[] { targetObj.getName() }));
+            closeWindow();
+        } else {
+            uiNotification.displayValidationError(i18n.get("message.tag.update.mandatory"));
+        }
+    }
+
+    protected void displaySuccess(final String tagName) {
+        uiNotification.displaySuccess(i18n.get("message.save.success", new Object[] { tagName }));
+    }
+
+    protected void displayValidationError(final String errorMessage) {
+        uiNotification.displayValidationError(errorMessage);
+    }
+
+    protected void setTagColor(final Color selectedColor, final String previewColor) {
+        getColorPickerLayout().setSelectedColor(selectedColor);
+        getColorPickerLayout().getSelPreview().setColor(getColorPickerLayout().getSelectedColor());
+        getColorPickerLayout().getColorSelect().setColor(getColorPickerLayout().getSelectedColor());
+        createDynamicStyleForComponents(tagName, tagDesc, previewColor);
+        getPreviewButtonColor(previewColor);
+    }
+
+    /**
+     * 
+     * @return
+     */
+    protected Boolean mandatoryValuesPresent() {
+        if (Strings.isNullOrEmpty(tagName.getValue())) {
+            if (optiongroup.getValue().equals(createTagNw)) {
+                displayValidationError(SPUILabelDefinitions.MISSING_TAG_NAME);
+            }
+            if (optiongroup.getValue().equals(updateTagNw)) {
+                if (null == tagNameComboBox.getValue()) {
+                    displayValidationError(i18n.get(MESSAGE_ERROR_MISSING_TAGNAME));
+                } else {
+                    displayValidationError(SPUILabelDefinitions.MISSING_TAG_NAME);
+                }
+            }
+            return Boolean.FALSE;
+        }
+        return Boolean.TRUE;
+    }
+
+    protected Boolean checkIsDuplicate(final Tag existingTag) {
+        if (existingTag != null) {
+            displayValidationError(i18n.get("message.tag.duplicate.check", new Object[] { existingTag.getName() }));
+            return Boolean.TRUE;
+        }
+        return Boolean.FALSE;
+    }
+
+    public String getColorPicked() {
+        return colorPicked;
+    }
+
+    public void setColorPicked(final String colorPicked) {
+        this.colorPicked = colorPicked;
+    }
+
+    public String getTagNameValue() {
+        return tagNameValue;
+    }
+
+    public void setTagNameValue(final String tagNameValue) {
+        this.tagNameValue = tagNameValue;
+    }
+
+    public String getTagDescValue() {
+        return tagDescValue;
+    }
+
+    public void setTagDescValue(final String tagDescValue) {
+        this.tagDescValue = tagDescValue;
+    }
+
+    public FormLayout getFormLayout() {
+        return formLayout;
+    }
+
 }

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/management/targettable/TargetAddUpdateWindowLayout.java

@@ -15,6 +15,7 @@ import org.eclipse.hawkbit.repository.TargetManagement;
 import org.eclipse.hawkbit.repository.model.Target;
 import org.eclipse.hawkbit.repository.model.TargetIdName;
 import org.eclipse.hawkbit.ui.UiProperties;
+import org.eclipse.hawkbit.ui.common.CommonDialogWindow;
 import org.eclipse.hawkbit.ui.common.PopupWindowHelp;
 import org.eclipse.hawkbit.ui.common.table.BaseEntityEventType;
 import org.eclipse.hawkbit.ui.components.SPUIComponentProvider;
@@ -37,9 +38,11 @@ import com.vaadin.event.FieldEvents.TextChangeListener;
 import com.vaadin.server.FontAwesome;
 import com.vaadin.spring.annotation.SpringComponent;
 import com.vaadin.spring.annotation.VaadinSessionScope;
+import com.vaadin.ui.AbstractOrderedLayout;
 import com.vaadin.ui.Alignment;
 import com.vaadin.ui.Button;
 import com.vaadin.ui.CustomComponent;
+import com.vaadin.ui.FormLayout;
 import com.vaadin.ui.HorizontalLayout;
 import com.vaadin.ui.Label;
 import com.vaadin.ui.TextArea;
@@ -79,12 +82,12 @@ public class TargetAddUpdateWindowLayout extends CustomComponent {
     private TextField nameTextField;
     private TextArea descTextArea;
     private Label madatoryLabel;
-    private Button saveTarget;
+//    private Button saveTarget;
-    private Button discardTarget;
+//    private Button discardTarget;
     private boolean editTarget = Boolean.FALSE;
     private String controllerId;
     private VerticalLayout mainLayout;
-    private Window addTargetWindow;
+    private CommonDialogWindow addTargetWindow;
 
     private String oldTargetName;
     private String oldTargetDesc;
@@ -100,7 +103,6 @@ public class TargetAddUpdateWindowLayout extends CustomComponent {
         /* register all listeners related to the Window */
         addListeners();
         setCompositionRoot(mainLayout);
-
     }
 
     private void createRequiredComponents() {
@@ -124,25 +126,26 @@ public class TargetAddUpdateWindowLayout extends CustomComponent {
         madatoryLabel = new Label(i18n.get("label.mandatory.field"));
         madatoryLabel.setStyleName(SPUIStyleDefinitions.SP_TEXTFIELD_ERROR + " " + ValoTheme.LABEL_SMALL);
 
-        /* save or update button */
+//        /* save or update button */
-        saveTarget = SPUIComponentProvider.getButton(SPUIDefinitions.NEW_TARGET_SAVE, "", "", "", true,
+//        saveTarget = SPUIComponentProvider.getButton(SPUIDefinitions.NEW_TARGET_SAVE, "", "", "", true,
-                FontAwesome.SAVE, SPUIButtonStyleSmallNoBorder.class);
+//                FontAwesome.SAVE, SPUIButtonStyleSmallNoBorder.class);
-        saveTarget.addClickListener(event -> saveTargetListner());
+//        saveTarget.addClickListener(event -> saveTargetListner());
 
-        /* close button */
+//        /* close button */
-        discardTarget = SPUIComponentProvider.getButton(SPUIDefinitions.NEW_TARGET_DISCARD, "", "", "", true,
+//        discardTarget = SPUIComponentProvider.getButton(SPUIDefinitions.NEW_TARGET_DISCARD, "", "", "", true,
-                FontAwesome.TIMES, SPUIButtonStyleSmallNoBorder.class);
+//                FontAwesome.TIMES, SPUIButtonStyleSmallNoBorder.class);
-        discardTarget.addClickListener(event -> discardTargetListner());
+//        discardTarget.addClickListener(event -> discardTargetListner());
     }
 
     private void buildLayout() {
         /* action button layout (save & dicard) */
-        final HorizontalLayout buttonsLayout = new HorizontalLayout();
+//        final HorizontalLayout buttonsLayout = new HorizontalLayout();
-        buttonsLayout.setSizeFull();
+//        buttonsLayout.setSizeFull();
-        buttonsLayout.addComponents(saveTarget, discardTarget);
+//        buttonsLayout.addComponents(saveTarget, discardTarget);
-        buttonsLayout.setComponentAlignment(saveTarget, Alignment.BOTTOM_LEFT);
+//        buttonsLayout.setComponentAlignment(saveTarget, Alignment.BOTTOM_LEFT);
-        buttonsLayout.setComponentAlignment(discardTarget, Alignment.BOTTOM_RIGHT);
+//        buttonsLayout.setComponentAlignment(discardTarget, Alignment.BOTTOM_RIGHT);
-        buttonsLayout.addStyleName("window-style");
+//        buttonsLayout.addStyleName("window-style");
+        
         /*
          * The main layout of the window contains mandatory info, textboxes
          * (controller Id, name & description) and action buttons layout
@@ -151,13 +154,21 @@ public class TargetAddUpdateWindowLayout extends CustomComponent {
         mainLayout.setSpacing(Boolean.TRUE);
         mainLayout.addStyleName("lay-color");
         mainLayout.setSizeUndefined();
-        mainLayout.addComponent(new PopupWindowHelp(uiProperties.getLinks().getDocumentation().getRoot()));
+//        mainLayout.addComponent(new PopupWindowHelp(uiProperties.getLinks().getDocumentation().getRoot()));
-        mainLayout.addComponent(madatoryLabel);
+//        mainLayout.addComponent(madatoryLabel);
-        mainLayout.setComponentAlignment(madatoryLabel, Alignment.MIDDLE_LEFT);
+//        mainLayout.setComponentAlignment(madatoryLabel, Alignment.MIDDLE_LEFT);
+
+        FormLayout formLayout = new FormLayout();
+        formLayout.addComponent(madatoryLabel);
+        formLayout.addComponent(controllerIDTextField);
+        formLayout.addComponent(nameTextField);
+        formLayout.addComponent(descTextArea);
+        mainLayout.addComponent(formLayout);
+        
         if (Boolean.TRUE.equals(editTarget)) {
             madatoryLabel.setVisible(Boolean.FALSE);
         }
-        mainLayout.addComponents(madatoryLabel, controllerIDTextField, nameTextField, descTextArea, buttonsLayout);
+//        mainLayout.addComponents(madatoryLabel, controllerIDTextField, nameTextField, descTextArea, buttonsLayout);
         nameTextField.focus();
     }
 
@@ -179,9 +190,9 @@ public class TargetAddUpdateWindowLayout extends CustomComponent {
             @Override
             public void textChange(final TextChangeEvent event) {
                 if (event.getText().equals(oldTargetName) && descTextArea.getValue().equals(oldTargetDesc)) {
-                    saveTarget.setEnabled(false);
+                    addTargetWindow.setSaveButtonEnabled(false);
                 } else {
-                    saveTarget.setEnabled(true);
+                    addTargetWindow.setSaveButtonEnabled(true);
                 }
 
             }
@@ -200,14 +211,14 @@ public class TargetAddUpdateWindowLayout extends CustomComponent {
             @Override
             public void textChange(final TextChangeEvent event) {
                 if (event.getText().equals(oldTargetDesc) && nameTextField.getValue().equals(oldTargetName)) {
-                    saveTarget.setEnabled(false);
+                    addTargetWindow.setSaveButtonEnabled(false);
                 } else {
-                    saveTarget.setEnabled(true);
+                    addTargetWindow.setSaveButtonEnabled(true);
                 }
 
             }
         });
-    }
+    } 
 
     /**
      * Update the Target if modified.
@@ -271,8 +282,7 @@ public class TargetAddUpdateWindowLayout extends CustomComponent {
     public Window getWindow() {
         eventBus.publish(this, DragEvent.HIDE_DROP_HINT);
         addTargetWindow = SPUIComponentProvider.getWindow(i18n.get("caption.add.new.target"), null,
-                SPUIDefinitions.CREATE_UPDATE_WINDOW);
+                SPUIDefinitions.CREATE_UPDATE_WINDOW, this, event -> saveTargetListner(),event -> discardTargetListner());
-        addTargetWindow.setContent(this);
         return addTargetWindow;
     }
 
@@ -335,7 +345,7 @@ public class TargetAddUpdateWindowLayout extends CustomComponent {
         if (target.getDescription() != null) {
             descTextArea.setValue(target.getDescription());
         }
-        saveTarget.setEnabled(Boolean.FALSE);
+        addTargetWindow.setSaveButtonEnabled(Boolean.FALSE);
 
         oldTargetDesc = descTextArea.getValue();
         oldTargetName = nameTextField.getValue();

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/management/targettable/TargetBulkUpdateWindowLayout.java

@@ -19,7 +19,6 @@ import org.eclipse.hawkbit.repository.DeploymentManagement;
 import org.eclipse.hawkbit.repository.TargetManagement;
 import org.eclipse.hawkbit.repository.model.DistributionSetIdName;
 import org.eclipse.hawkbit.ui.UiProperties;
-import org.eclipse.hawkbit.ui.common.PopupWindowHelp;
 import org.eclipse.hawkbit.ui.components.SPUIComponentProvider;
 import org.eclipse.hawkbit.ui.decorators.SPUIButtonStyleSmallNoBorder;
 import org.eclipse.hawkbit.ui.management.dstable.DistributionBeanQuery;
@@ -45,6 +44,7 @@ import com.vaadin.server.FontAwesome;
 import com.vaadin.shared.ui.combobox.FilteringMode;
 import com.vaadin.spring.annotation.SpringComponent;
 import com.vaadin.spring.annotation.ViewScope;
+import com.vaadin.ui.Alignment;
 import com.vaadin.ui.Button;
 import com.vaadin.ui.ComboBox;
 import com.vaadin.ui.CustomComponent;
@@ -280,14 +280,12 @@ public class TargetBulkUpdateWindowLayout extends CustomComponent {
 
         final HorizontalLayout uploaderLayout = new HorizontalLayout();
         uploaderLayout.addComponent(bulkUploader);
-        // uploaderLayout.addComponent(linkToSystemConfigHelp);
+        uploaderLayout.addComponent(linkToSystemConfigHelp);
-        // uploaderLayout.setComponentAlignment(linkToSystemConfigHelp,
+        uploaderLayout.setComponentAlignment(linkToSystemConfigHelp, Alignment.BOTTOM_RIGHT);
-        // Alignment.BOTTOM_RIGHT);
+        uploaderLayout.setExpandRatio(bulkUploader, 1.0F);
-        // uploaderLayout.setExpandRatio(bulkUploader, 1.0F);
         uploaderLayout.setSizeFull();
-        mainLayout.addComponents(captionLayout,
+        mainLayout.addComponents(captionLayout, dsNamecomboBox, descTextArea, tokenVerticalLayout, descTextArea,
-                new PopupWindowHelp(uiproperties.getLinks().getDocumentation().getDeploymentView()), dsNamecomboBox,
+                progressBar, targetsCountLabel, uploaderLayout);
-                descTextArea, tokenVerticalLayout, descTextArea, progressBar, targetsCountLabel, uploaderLayout);
     }
 
     /**

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/management/targettag/CreateUpdateTargetTagLayout.java

@@ -1,268 +0,0 @@
-/**
- * Copyright (c) 2015 Bosch Software Innovations GmbH and others.
- *
- * All rights reserved. This program and the accompanying materials
- * are made available under the terms of the Eclipse Public License v1.0
- * which accompanies this distribution, and is available at
- * http://www.eclipse.org/legal/epl-v10.html
- */
-package org.eclipse.hawkbit.ui.management.targettag;
-
-import java.util.ArrayList;
-import java.util.List;
-
-import org.eclipse.hawkbit.eventbus.event.TargetTagCreatedBulkEvent;
-import org.eclipse.hawkbit.eventbus.event.TargetTagDeletedEvent;
-import org.eclipse.hawkbit.eventbus.event.TargetTagUpdateEvent;
-import org.eclipse.hawkbit.repository.model.TargetTag;
-import org.eclipse.hawkbit.ui.components.SPUIComponentProvider;
-import org.eclipse.hawkbit.ui.management.tag.CreateUpdateTagLayout;
-import org.eclipse.hawkbit.ui.management.tag.SpColorPickerPreview;
-import org.eclipse.hawkbit.ui.utils.HawkbitCommonUtil;
-import org.eclipse.hawkbit.ui.utils.SPUIDefinitions;
-import org.eclipse.hawkbit.ui.utils.SPUILabelDefinitions;
-import org.eclipse.hawkbit.ui.utils.UINotification;
-import org.springframework.beans.factory.annotation.Autowired;
-import org.vaadin.spring.events.EventScope;
-import org.vaadin.spring.events.annotation.EventBusListenerMethod;
-
-import com.google.common.base.Strings;
-import com.vaadin.shared.ui.colorpicker.Color;
-import com.vaadin.spring.annotation.SpringComponent;
-import com.vaadin.spring.annotation.ViewScope;
-import com.vaadin.ui.Button.ClickEvent;
-import com.vaadin.ui.OptionGroup;
-import com.vaadin.ui.UI;
-import com.vaadin.ui.Window;
-import com.vaadin.ui.themes.ValoTheme;
-
-/**
- *
- *
- */
-@SpringComponent
-@ViewScope
-public class CreateUpdateTargetTagLayout extends CreateUpdateTagLayout {
-
-    private static final long serialVersionUID = 2446682350481560235L;
-
-    @Autowired
-    private transient UINotification uiNotification;
-
-    private Window targetTagWindow;
-
-    @Override
-    protected void createOptionGroup() {
-        final List<String> optionValues = new ArrayList<>();
-        if (permChecker.hasCreateTargetPermission()) {
-            optionValues.add(createTag.getValue());
-        }
-        if (permChecker.hasUpdateTargetPermission()) {
-            optionValues.add(updateTag.getValue());
-        }
-
-        createOptionGroup(optionValues);
-    }
-
-    private void createOptionGroup(final List<String> tagOptions) {
-        optiongroup = new OptionGroup("", tagOptions);
-        optiongroup.setCaption(null);
-        optiongroup.addStyleName(ValoTheme.OPTIONGROUP_SMALL);
-        optiongroup.addStyleName("custom-option-group");
-
-        optiongroup.setNullSelectionAllowed(false);
-        if (!tagOptions.isEmpty()) {
-            optiongroup.select(tagOptions.get(0));
-        }
-    }
-
-    public Window getWindow() {
-        reset();
-        targetTagWindow = SPUIComponentProvider.getWindow(i18n.get("caption.add.tag"), null,
-                SPUIDefinitions.CREATE_UPDATE_WINDOW);
-        targetTagWindow.setContent(this);
-        return targetTagWindow;
-
-    }
-
-    @EventBusListenerMethod(scope = EventScope.SESSION)
-    // Exception squid:S1172 - event not needed
-    @SuppressWarnings({ "squid:S1172" })
-    void onEventTargetTagCreated(final TargetTagCreatedBulkEvent event) {
-        populateTagNameCombo();
-    }
-
-    @EventBusListenerMethod(scope = EventScope.SESSION)
-    // Exception squid:S1172 - event not needed
-    @SuppressWarnings({ "squid:S1172" })
-    void onEventTargetDeletedEvent(final TargetTagDeletedEvent event) {
-        populateTagNameCombo();
-    }
-
-    @EventBusListenerMethod(scope = EventScope.SESSION)
-    // Exception squid:S1172 - event not needed
-    @SuppressWarnings({ "squid:S1172" })
-    void onEventTargetTagUpdateEvent(final TargetTagUpdateEvent event) {
-        populateTagNameCombo();
-    }
-
-    /**
-     * Populate target name combo.
-     */
-    @Override
-    public void populateTagNameCombo() {
-        tagNameComboBox.removeAllItems();
-        final List<TargetTag> trgTagNameList = tagManagement.findAllTargetTags();
-        trgTagNameList.forEach(value -> tagNameComboBox.addItem(value.getName()));
-    }
-
-    /**
-     * Select tag & set tag name & tag desc values corresponding to selected
-     * tag.
-     * 
-     * @param targetTagSelected
-     *            as the selected tag from combo
-     */
-    @Override
-    public void setTagDetails(final String targetTagSelected) {
-        tagName.setValue(targetTagSelected);
-        final TargetTag selectedTargetTag = tagManagement.findTargetTag(targetTagSelected);
-        if (null != selectedTargetTag) {
-            tagDesc.setValue(selectedTargetTag.getDescription());
-            if (null == selectedTargetTag.getColour()) {
-                selectedColor = new Color(44, 151, 32);
-                selPreview.setColor(selectedColor);
-                colorSelect.setColor(selectedColor);
-                createDynamicStyleForComponents(tagName, tagDesc, DEFAULT_COLOR);
-                getPreviewButtonColor(DEFAULT_COLOR);
-            } else {
-                selectedColor = rgbToColorConverter(selectedTargetTag.getColour());
-                selPreview.setColor(selectedColor);
-                colorSelect.setColor(selectedColor);
-                createDynamicStyleForComponents(tagName, tagDesc, selectedTargetTag.getColour());
-                getPreviewButtonColor(selectedTargetTag.getColour());
-            }
-        }
-    }
-
-    @Override
-    public void save(final ClickEvent event) {
-        if (mandatoryValuesPresent()) {
-            final TargetTag existingTag = tagManagement.findTargetTag(tagName.getValue());
-            if (optiongroup.getValue().equals(createTagNw)) {
-                if (!checkIsDuplicate(existingTag)) {
-                    createNewTag();
-                }
-            } else {
-
-                updateTag(existingTag);
-            }
-        }
-    }
-
-    private Boolean checkIsDuplicate(final TargetTag existingTag) {
-        if (existingTag != null) {
-            uiNotification.displayValidationError(
-                    i18n.get("message.tag.duplicate.check", new Object[] { existingTag.getName() }));
-            return Boolean.TRUE;
-        }
-        return Boolean.FALSE;
-    }
-
-    private Boolean mandatoryValuesPresent() {
-        if (Strings.isNullOrEmpty(tagName.getValue())) {
-            if (optiongroup.getValue().equals(createTagNw)) {
-                uiNotification.displayValidationError(SPUILabelDefinitions.MISSING_TAG_NAME);
-            }
-            if (optiongroup.getValue().equals(updateTagNw)) {
-                if (null == tagNameComboBox.getValue()) {
-                    uiNotification.displayValidationError(i18n.get("message.error.missing.tagname"));
-                } else {
-                    uiNotification.displayValidationError(SPUILabelDefinitions.MISSING_TAG_NAME);
-                }
-            }
-            return Boolean.FALSE;
-        }
-        return Boolean.TRUE;
-    }
-
-    /**
-     * Create new tag.
-     */
-    private void createNewTag() {
-        final String colorPicked = getColorPickedString();
-        final String tagNameValue = HawkbitCommonUtil.trimAndNullIfEmpty(tagName.getValue());
-        final String tagDescValue = HawkbitCommonUtil.trimAndNullIfEmpty(tagDesc.getValue());
-        if (null != tagNameValue) {
-            TargetTag newTargetTag = new TargetTag(tagNameValue);
-            if (null != tagDescValue) {
-                newTargetTag.setDescription(tagDescValue);
-            }
-            newTargetTag.setColour(new Color(0, 146, 58).getCSS());
-            if (colorPicked != null) {
-                newTargetTag.setColour(colorPicked);
-            }
-            newTargetTag = tagManagement.createTargetTag(newTargetTag);
-            uiNotification.displaySuccess(i18n.get("message.save.success", new Object[] { newTargetTag.getName() }));
-            closeWindow();
-        } else {
-            uiNotification.displayValidationError(i18n.get("message.error.missing.tagname"));
-
-        }
-    }
-
-    /**
-     * update tag.
-     */
-    private void updateTag(final TargetTag targetObj) {
-        final String nameUpdateValue = HawkbitCommonUtil.trimAndNullIfEmpty(tagName.getValue());
-        final String descUpdateValue = HawkbitCommonUtil.trimAndNullIfEmpty(tagDesc.getValue());
-
-        if (null != nameUpdateValue) {
-            targetObj.setName(nameUpdateValue);
-            targetObj.setDescription(null != descUpdateValue ? descUpdateValue : null);
-            targetObj.setColour(getColorPickedString());
-            tagManagement.updateTargetTag(targetObj);
-            uiNotification.displaySuccess(i18n.get("message.update.success", new Object[] { targetObj.getName() }));
-            closeWindow();
-        } else {
-            uiNotification.displayValidationError(i18n.get("message.tag.update.mandatory"));
-        }
-
-    }
-
-    private void closeWindow() {
-        targetTagWindow.close();
-        UI.getCurrent().removeWindow(targetTagWindow);
-    }
-
-    /**
-     * remove target tab window.
-     * 
-     * @param event
-     */
-    @Override
-    public void discard(final ClickEvent event) {
-        UI.getCurrent().removeWindow(targetTagWindow);
-    }
-
-    /**
-     * Get color picked value in string.
-     *
-     * @return String of color picked value.
-     */
-    private String getColorPickedString() {
-        return "rgb(" + getSelPreview().getColor().getRed() + "," + getSelPreview().getColor().getGreen() + ","
-                + getSelPreview().getColor().getBlue() + ")";
-    }
-
-    /**
-     * Color view.
-     * 
-     * @return ColorPickerPreview as UI
-     */
-    public SpColorPickerPreview getSelPreview() {
-        return selPreview;
-    }
-
-}

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/management/targettag/CreateUpdateTargetTagLayoutWindow.java

@@ -0,0 +1,135 @@
+/**
+ * Copyright (c) 2015 Bosch Software Innovations GmbH and others.
+ *
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * which accompanies this distribution, and is available at
+ * http://www.eclipse.org/legal/epl-v10.html
+ */
+package org.eclipse.hawkbit.ui.management.targettag;
+
+import static org.apache.commons.lang3.StringUtils.isNotEmpty;
+
+import java.util.List;
+
+import org.eclipse.hawkbit.eventbus.event.TargetTagCreatedBulkEvent;
+import org.eclipse.hawkbit.eventbus.event.TargetTagDeletedEvent;
+import org.eclipse.hawkbit.eventbus.event.TargetTagUpdateEvent;
+import org.eclipse.hawkbit.repository.model.TargetTag;
+import org.eclipse.hawkbit.ui.colorPicker.ColorPickerConstants;
+import org.eclipse.hawkbit.ui.colorPicker.ColorPickerHelper;
+import org.eclipse.hawkbit.ui.management.tag.CreateUpdateTagLayout;
+import org.vaadin.spring.events.EventScope;
+import org.vaadin.spring.events.annotation.EventBusListenerMethod;
+
+import com.vaadin.spring.annotation.SpringComponent;
+import com.vaadin.spring.annotation.ViewScope;
+import com.vaadin.ui.Button.ClickEvent;
+
+/**
+ *
+ *
+ */
+@SpringComponent
+@ViewScope
+public class CreateUpdateTargetTagLayoutWindow extends CreateUpdateTagLayout {
+
+    private static final long serialVersionUID = 2446682350481560235L;
+
+    @EventBusListenerMethod(scope = EventScope.SESSION)
+    // Exception squid:S1172 - event not needed
+    @SuppressWarnings({ "squid:S1172" })
+    void onEventTargetTagCreated(final TargetTagCreatedBulkEvent event) {
+        populateTagNameCombo();
+    }
+
+    @EventBusListenerMethod(scope = EventScope.SESSION)
+    // Exception squid:S1172 - event not needed
+    @SuppressWarnings({ "squid:S1172" })
+    void onEventTargetDeletedEvent(final TargetTagDeletedEvent event) {
+        populateTagNameCombo();
+    }
+
+    @EventBusListenerMethod(scope = EventScope.SESSION)
+    // Exception squid:S1172 - event not needed
+    @SuppressWarnings({ "squid:S1172" })
+    void onEventTargetTagUpdateEvent(final TargetTagUpdateEvent event) {
+        populateTagNameCombo();
+    }
+
+    /**
+     * Populate target name combo.
+     */
+    @Override
+    public void populateTagNameCombo() {
+        tagNameComboBox.removeAllItems();
+        final List<TargetTag> trgTagNameList = tagManagement.findAllTargetTags();
+        trgTagNameList.forEach(value -> tagNameComboBox.addItem(value.getName()));
+    }
+
+    /**
+     * Select tag & set tag name & tag desc values corresponding to selected
+     * tag.
+     * 
+     * @param targetTagSelected
+     *            as the selected tag from combo
+     */
+    @Override
+    public void setTagDetails(final String targetTagSelected) {
+        tagName.setValue(targetTagSelected);
+        final TargetTag selectedTargetTag = tagManagement.findTargetTag(targetTagSelected);
+        if (null != selectedTargetTag) {
+            tagDesc.setValue(selectedTargetTag.getDescription());
+            if (null == selectedTargetTag.getColour()) {
+                setTagColor(getColorPickerLayout().getDefaultColor(), ColorPickerConstants.DEFAULT_COLOR);
+            } else {
+                setTagColor(ColorPickerHelper.rgbToColorConverter(selectedTargetTag.getColour()),
+                        selectedTargetTag.getColour());
+            }
+        }
+    }
+
+    @Override
+    public void save(final ClickEvent event) {
+        if (mandatoryValuesPresent()) {
+            final TargetTag existingTag = tagManagement.findTargetTag(tagName.getValue());
+            if (optiongroup.getValue().equals(createTagNw)) {
+                if (!checkIsDuplicate(existingTag)) {
+                    createNewTag();
+                }
+            } else {
+                updateExistingTag(existingTag);
+            }
+        }
+    }
+
+    /**
+     * Create new tag.
+     */
+    @Override
+    protected void createNewTag() {
+        super.createNewTag();
+        if (isNotEmpty(getTagNameValue())) {
+            TargetTag newTargetTag = new TargetTag(getTagNameValue());
+            if (isNotEmpty(getTagDescValue())) {
+                newTargetTag.setDescription(getTagDescValue());
+            }
+            newTargetTag.setColour(ColorPickerConstants.START_COLOR.getCSS());
+            if (isNotEmpty(getColorPicked())) {
+                newTargetTag.setColour(getColorPicked());
+            }
+            newTargetTag = tagManagement.createTargetTag(newTargetTag);
+            displaySuccess(newTargetTag.getName());
+            closeWindow();
+        } else {
+            displayValidationError(i18n.get(MESSAGE_ERROR_MISSING_TAGNAME));
+        }
+    }
+
+    @Override
+    protected void createRequiredComponents() {
+        super.createRequiredComponents();
+        createOptionGroup(permChecker.hasCreateTargetPermission(), permChecker.hasUpdateTargetPermission());
+    }
+
+}

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/management/targettag/MultipleTargetFilter.java

@@ -62,7 +62,7 @@ public class MultipleTargetFilter extends Accordion implements SelectedTabChange
     private CustomTargetTagFilterButtonClick customTargetTagFilterButtonClick;
 
     @Autowired
-    private CreateUpdateTargetTagLayout createUpdateTargetTagLayout;
+    private CreateUpdateTargetTagLayoutWindow createUpdateTargetTagLayout;
 
     @Autowired
     private SpPermissionChecker permChecker;

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/management/targettag/TargetTagFilterHeader.java

@@ -34,7 +34,7 @@ public class TargetTagFilterHeader extends AbstractFilterHeader {
     private I18N i18n;
 
     @Autowired
-    private CreateUpdateTargetTagLayout createUpdateTargetTagLayout;
+    private CreateUpdateTargetTagLayoutWindow createUpdateTargetTagLayout;
 
     @Autowired
     private ManagementUIState managementUIState;

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/rollout/rollout/AddUpdateRolloutWindowLayout.java

@@ -27,7 +27,6 @@ import org.eclipse.hawkbit.repository.model.RolloutGroup.RolloutGroupErrorCondit
 import org.eclipse.hawkbit.repository.model.RolloutGroup.RolloutGroupSuccessAction;
 import org.eclipse.hawkbit.repository.model.RolloutGroup.RolloutGroupSuccessCondition;
 import org.eclipse.hawkbit.ui.UiProperties;
-import org.eclipse.hawkbit.ui.common.CommonDialog;
 import org.eclipse.hawkbit.ui.components.SPUIComponentProvider;
 import org.eclipse.hawkbit.ui.decorators.SPUIButtonStyleSmallNoBorder;
 import org.eclipse.hawkbit.ui.filtermanagement.TargetFilterBeanQuery;
@@ -61,7 +60,7 @@ import com.vaadin.spring.annotation.ViewScope;
 import com.vaadin.ui.Alignment;
 import com.vaadin.ui.Button;
 import com.vaadin.ui.ComboBox;
-import com.vaadin.ui.FormLayout;
+import com.vaadin.ui.CustomComponent;
 import com.vaadin.ui.HorizontalLayout;
 import com.vaadin.ui.Label;
 import com.vaadin.ui.Link;
@@ -80,7 +79,7 @@ import com.vaadin.ui.themes.ValoTheme;
  */
 @SpringComponent
 @ViewScope
-public class AddUpdateRolloutWindowLayout extends CommonDialog {
+public class AddUpdateRolloutWindowLayout extends CustomComponent {
 
     private static final long serialVersionUID = 2999293468801479916L;
 
@@ -152,23 +151,12 @@ public class AddUpdateRolloutWindowLayout extends CommonDialog {
 
     private TextArea targetFilterQuery;
 
-    public AddUpdateRolloutWindowLayout() {
-        super();
-    }
-
-    public AddUpdateRolloutWindowLayout(final String title, final FormLayout form, final String helpLink) {
-        super(title, form, helpLink);
-    }
-
     /**
      * Create components and layout.
      */
     public void init() {
-        // createRequiredComponents();
+        createRequiredComponents();
-        // buildLayout();
+        buildLayout();
-        setCaption(i18n.get("caption.configure.rollout"));
-        initForm();
-        resetFields();
     }
 
     public Window getWindow() {
@@ -219,38 +207,26 @@ public class AddUpdateRolloutWindowLayout extends CommonDialog {
         mainLayout.addComponents(madatoryLabel, rolloutName, distributionSet, getTargetFilterLayout(),
                 getGroupDetailsLayout(), getTriggerThresoldLayout(), getErrorThresholdLayout(), description,
                 actionTypeOptionGroupLayout, linkToHelp, getSaveDiscardButtonLayout());
-
-        mainLayout.addComponent(new Label("TEST TEST TEST"));
         mainLayout.setComponentAlignment(linkToHelp, Alignment.BOTTOM_RIGHT);
-<<<<<<< HEAD
-=======
         setCompositionRoot(mainLayout);
->>>>>>> refs/heads/master
         rolloutName.focus();
     }
 
     private HorizontalLayout getGroupDetailsLayout() {
-        createGroupSizeLabel();
-        createNoOfGroupsField();
         final HorizontalLayout groupLayout = new HorizontalLayout();
         groupLayout.setCaption(i18n.get("prompt.number.of.groups"));
         groupLayout.setSizeFull();
         groupLayout.addComponents(noOfGroups, groupSizeLabel);
-        groupLayout.setExpandRatio(noOfGroups, 3.0F);
+        groupLayout.setExpandRatio(noOfGroups, 1.0F);
-        groupLayout.setExpandRatio(groupSizeLabel, 1.0F);
         groupLayout.setComponentAlignment(groupSizeLabel, Alignment.MIDDLE_LEFT);
         return groupLayout;
     }
 
     private HorizontalLayout getErrorThresholdLayout() {
-        createErrorThreshold();
-        createErrorThresholdOptionGroup();
         final HorizontalLayout errorThresoldLayout = new HorizontalLayout();
         errorThresoldLayout.setSizeFull();
         errorThresoldLayout.addComponents(errorThreshold, errorThresholdOptionGroup);
-        errorThresoldLayout.setExpandRatio(errorThreshold, 3.0F);
+        errorThresoldLayout.setExpandRatio(errorThreshold, 1.0F);
-        errorThresoldLayout.setExpandRatio(errorThresholdOptionGroup, 1.0F);
-        errorThresoldLayout.setCaption(i18n.get("prompt.error.threshold"));
         return errorThresoldLayout;
     }
 
@@ -266,22 +242,18 @@ public class AddUpdateRolloutWindowLayout extends CommonDialog {
     }
 
     private HorizontalLayout getTriggerThresoldLayout() {
-        createTriggerThresold();
         final HorizontalLayout triggerThresholdLayout = new HorizontalLayout();
         triggerThresholdLayout.setCaption(i18n.get("prompt.tigger.thresold"));
         triggerThresholdLayout.setSizeFull();
-        final Label percentSymbol = getPercentHintLabel();
+        triggerThresholdLayout.addComponents(triggerThreshold, getPercentHintLabel());
-        triggerThresholdLayout.addComponents(triggerThreshold, percentSymbol);
         triggerThresholdLayout.setExpandRatio(triggerThreshold, 1.0F);
-        triggerThresholdLayout.setExpandRatio(percentSymbol, 5.0F);
-
         return triggerThresholdLayout;
     }
 
     private Label getPercentHintLabel() {
         final Label percentSymbol = new Label("%");
         percentSymbol.addStyleName(ValoTheme.LABEL_TINY + " " + ValoTheme.LABEL_BOLD);
-        percentSymbol.setSizeFull();
+        percentSymbol.setSizeUndefined();
         return percentSymbol;
     }
 
@@ -295,24 +267,6 @@ public class AddUpdateRolloutWindowLayout extends CommonDialog {
         return buttonsLayout;
     }
 
-    private void initForm() {
-
-        getFormLayout().addComponent(createRolloutNameField());
-        getFormLayout().addComponent(createDistributionSetCombo());
-        populateDistributionSet();
-        getFormLayout().addComponent(createTargetFilterQueryCombo());
-        populateTargetFilterQuery();
-        getFormLayout().addComponent(getGroupDetailsLayout());
-        getFormLayout().addComponent(getTriggerThresoldLayout());
-        getFormLayout().addComponent(getErrorThresholdLayout());
-        getFormLayout().addComponent(createDescription());
-        getFormLayout().addComponent(actionTypeOptionGroupLayout);
-        actionTypeOptionGroupLayout.selectDefaultOption();
-
-        // getFormLayout().addComponent(createTotalTargetsLabel());
-        // getFormLayout().addComponent(createTargetFilterQuery());
-    }
-
     private void createRequiredComponents() {
         madatoryLabel = createMandatoryLabel();
         rolloutName = createRolloutNameField();
@@ -322,12 +276,12 @@ public class AddUpdateRolloutWindowLayout extends CommonDialog {
         targetFilterQueryCombo = createTargetFilterQueryCombo();
         populateTargetFilterQuery();
 
-        // noOfGroups = createNoOfGroupsField();
+        noOfGroups = createNoOfGroupsField();
-        // groupSizeLabel = createGroupSizeLabel();
+        groupSizeLabel = createGroupSizeLabel();
-        // triggerThreshold = createTriggerThresold();
+        triggerThreshold = createTriggerThresold();
-        // errorThreshold = createErrorThresold();
+        errorThreshold = createErrorThresold();
-        // description = createDescription();
+        description = createDescription();
-        // errorThresholdOptionGroup = createErrorThresholdOptionGroup();
+        errorThresholdOptionGroup = createErrorThresholdOptionGroup();
         setDefaultSaveStartGroupOption();
         saveRolloutBtn = createSaveButton();
         discardRollloutBtn = createDiscardButton();
@@ -341,12 +295,13 @@ public class AddUpdateRolloutWindowLayout extends CommonDialog {
 
     }
 
-    private void createGroupSizeLabel() {
+    private Label createGroupSizeLabel() {
-        groupSizeLabel = SPUIComponentProvider.getLabel("", SPUILabelDefinitions.SP_LABEL_SIMPLE);
+        final Label groupSize = SPUIComponentProvider.getLabel("", SPUILabelDefinitions.SP_LABEL_SIMPLE);
-        groupSizeLabel.addStyleName(ValoTheme.LABEL_TINY + " " + "rollout-target-count-message");
+        groupSize.addStyleName(ValoTheme.LABEL_TINY + " " + "rollout-target-count-message");
-        groupSizeLabel.setImmediate(true);
+        groupSize.setImmediate(true);
-        groupSizeLabel.setVisible(false);
+        groupSize.setVisible(false);
-        groupSizeLabel.setSizeUndefined();
+        groupSize.setSizeUndefined();
+        return groupSize;
     }
 
     private TextArea createTargetFilterQuery() {
@@ -370,17 +325,17 @@ public class AddUpdateRolloutWindowLayout extends CommonDialog {
         return targetCountLabel;
     }
 
-    private void createErrorThresholdOptionGroup() {
+    private OptionGroup createErrorThresholdOptionGroup() {
-        errorThresholdOptionGroup = new OptionGroup();
+        final OptionGroup errorThresoldOptions = new OptionGroup();
         for (final ERRORTHRESOLDOPTIONS option : ERRORTHRESOLDOPTIONS.values()) {
-            errorThresholdOptionGroup.addItem(option.getValue());
+            errorThresoldOptions.addItem(option.getValue());
         }
-        errorThresholdOptionGroup.setId(SPUIComponetIdProvider.ROLLOUT_ERROR_THRESOLD_OPTION_ID);
+        errorThresoldOptions.setId(SPUIComponetIdProvider.ROLLOUT_ERROR_THRESOLD_OPTION_ID);
-        errorThresholdOptionGroup.addStyleName(ValoTheme.OPTIONGROUP_HORIZONTAL);
+        errorThresoldOptions.addStyleName(ValoTheme.OPTIONGROUP_HORIZONTAL);
-        errorThresholdOptionGroup.addStyleName(SPUIStyleDefinitions.ROLLOUT_OPTION_GROUP);
+        errorThresoldOptions.addStyleName(SPUIStyleDefinitions.ROLLOUT_OPTION_GROUP);
-        errorThresholdOptionGroup.setSizeUndefined();
+        errorThresoldOptions.setSizeUndefined();
-        errorThresholdOptionGroup.addValueChangeListener(event -> onErrorThresoldOptionChange(event));
+        errorThresoldOptions.addValueChangeListener(event -> onErrorThresoldOptionChange(event));
-        setDefaultSaveStartGroupOption();
+        return errorThresoldOptions;
     }
 
     private void onErrorThresoldOptionChange(final ValueChangeEvent event) {
@@ -395,15 +350,15 @@ public class AddUpdateRolloutWindowLayout extends CommonDialog {
     }
 
     private ComboBox createTargetFilterQueryCombo() {
-        targetFilterQueryCombo = SPUIComponentProvider.getComboBox(i18n.get("prompt.target.filter"), "", "", null, null,
+        final ComboBox targetFilter = SPUIComponentProvider.getComboBox(null, "", "", null, null, true, "",
-                true, "", i18n.get("prompt.target.filter"));
+                i18n.get("prompt.target.filter"));
-        targetFilterQueryCombo.setImmediate(true);
+        targetFilter.setImmediate(true);
-        targetFilterQueryCombo.setPageLength(7);
+        targetFilter.setPageLength(7);
-        targetFilterQueryCombo.setItemCaptionPropertyId(SPUILabelDefinitions.VAR_NAME);
+        targetFilter.setItemCaptionPropertyId(SPUILabelDefinitions.VAR_NAME);
-        targetFilterQueryCombo.setId(SPUIComponetIdProvider.ROLLOUT_TARGET_FILTER_COMBO_ID);
+        targetFilter.setId(SPUIComponetIdProvider.ROLLOUT_TARGET_FILTER_COMBO_ID);
-        targetFilterQueryCombo.setSizeFull();
+        targetFilter.setSizeFull();
-        targetFilterQueryCombo.addValueChangeListener(event -> onTargetFilterChange());
+        targetFilter.addValueChangeListener(event -> onTargetFilterChange());
-        return targetFilterQueryCombo;
+        return targetFilter;
     }
 
     private void onTargetFilterChange() {
@@ -634,41 +589,47 @@ public class AddUpdateRolloutWindowLayout extends CommonDialog {
     }
 
     private TextArea createDescription() {
-        description = SPUIComponentProvider.getTextArea(i18n.get("textfield.description"), "text-area-style",
+        final TextArea descriptionField = SPUIComponentProvider.getTextArea(i18n.get("textfield.description"),
-                ValoTheme.TEXTFIELD_TINY, false, null, i18n.get("textfield.description"),
+                "text-area-style", ValoTheme.TEXTFIELD_TINY, false, null, i18n.get("textfield.description"),
                 SPUILabelDefinitions.TEXT_AREA_MAX_LENGTH);
-        description.setId(SPUIComponetIdProvider.ROLLOUT_DESCRIPTION_ID);
+        descriptionField.setId(SPUIComponetIdProvider.ROLLOUT_DESCRIPTION_ID);
-        description.setNullRepresentation(HawkbitCommonUtil.SP_STRING_EMPTY);
+        descriptionField.setNullRepresentation(HawkbitCommonUtil.SP_STRING_EMPTY);
-        description.setSizeFull();
+        descriptionField.setSizeFull();
-        return description;
+        return descriptionField;
     }
 
-    private void createErrorThreshold() {
+    private TextField createErrorThresold() {
-        errorThreshold = SPUIComponentProvider.getTextField(null, "", ValoTheme.TEXTFIELD_TINY, false, null,
+        final TextField errorField = SPUIComponentProvider.getTextField(i18n.get("prompt.error.threshold"), "",
-                i18n.get("prompt.error.threshold"), true, SPUILabelDefinitions.TEXT_FIELD_MAX_LENGTH);
+                ValoTheme.TEXTFIELD_TINY, true, null, i18n.get("prompt.error.threshold"), true,
-        errorThreshold.addValidator(new ThresholdFieldValidator());
+                SPUILabelDefinitions.TEXT_FIELD_MAX_LENGTH);
-        errorThreshold.setId(SPUIComponetIdProvider.ROLLOUT_ERROR_THRESOLD_ID);
+        errorField.addValidator(new ThresholdFieldValidator());
-        errorThreshold.setMaxLength(7);
+        errorField.setId(SPUIComponetIdProvider.ROLLOUT_ERROR_THRESOLD_ID);
-        errorThreshold.setSizeFull();
+        errorField.setMaxLength(7);
+        errorField.setSizeFull();
+        return errorField;
     }
 
-    private void createTriggerThresold() {
+    private TextField createTriggerThresold() {
-        triggerThreshold = SPUIComponentProvider.getTextField(null, "", ValoTheme.TEXTFIELD_TINY, false, null,
+        final TextField thresholdField = SPUIComponentProvider.getTextField(i18n.get("prompt.tigger.thresold"), "",
-                i18n.get("prompt.tigger.thresold"), true, SPUILabelDefinitions.TEXT_FIELD_MAX_LENGTH);
+                ValoTheme.TEXTFIELD_TINY, true, null, i18n.get("prompt.tigger.thresold"), true,
-        triggerThreshold.setId(SPUIComponetIdProvider.ROLLOUT_TRIGGER_THRESOLD_ID);
+                SPUILabelDefinitions.TEXT_FIELD_MAX_LENGTH);
-        triggerThreshold.addValidator(new ThresholdFieldValidator());
+        thresholdField.setId(SPUIComponetIdProvider.ROLLOUT_TRIGGER_THRESOLD_ID);
-        triggerThreshold.setSizeFull();
+        thresholdField.addValidator(new ThresholdFieldValidator());
-        triggerThreshold.setMaxLength(3);
+        thresholdField.setSizeFull();
+        thresholdField.setMaxLength(3);
+        return thresholdField;
     }
 
-    private void createNoOfGroupsField() {
+    private TextField createNoOfGroupsField() {
-        noOfGroups = SPUIComponentProvider.getTextField(null, "", ValoTheme.TEXTFIELD_TINY, false, null,
+        final TextField noOfGroupsField = SPUIComponentProvider.getTextField(i18n.get("prompt.number.of.groups"), "",
-                i18n.get("prompt.number.of.groups"), true, SPUILabelDefinitions.TEXT_FIELD_MAX_LENGTH);
+                ValoTheme.TEXTFIELD_TINY, true, null, i18n.get("prompt.number.of.groups"), true,
-        noOfGroups.setId(SPUIComponetIdProvider.ROLLOUT_NO_OF_GROUPS_ID);
+                SPUILabelDefinitions.TEXT_FIELD_MAX_LENGTH);
-        noOfGroups.addValidator(new GroupNumberValidator());
+        noOfGroupsField.setId(SPUIComponetIdProvider.ROLLOUT_NO_OF_GROUPS_ID);
-        noOfGroups.setSizeFull();
+        noOfGroupsField.addValidator(new GroupNumberValidator());
-        noOfGroups.setMaxLength(3);
+        noOfGroupsField.setSizeFull();
-        noOfGroups.addValueChangeListener(evevt -> onGroupNumberChange());
+        noOfGroupsField.setMaxLength(3);
+        noOfGroupsField.addValueChangeListener(evevt -> onGroupNumberChange());
+        return noOfGroupsField;
     }
 
     private void onGroupNumberChange() {
@@ -681,14 +642,14 @@ public class AddUpdateRolloutWindowLayout extends CommonDialog {
     }
 
     private ComboBox createDistributionSetCombo() {
-        distributionSet = SPUIComponentProvider.getComboBox(i18n.get("prompt.distribution.set"), "", "", null, null,
+        final ComboBox dsSet = SPUIComponentProvider.getComboBox(i18n.get("prompt.distribution.set"), "", "", null,
-                true, "", i18n.get("prompt.distribution.set"));
+                null, true, "", i18n.get("prompt.distribution.set"));
-        distributionSet.setImmediate(true);
+        dsSet.setImmediate(true);
-        distributionSet.setPageLength(7);
+        dsSet.setPageLength(7);
-        distributionSet.setItemCaptionPropertyId(SPUILabelDefinitions.VAR_NAME);
+        dsSet.setItemCaptionPropertyId(SPUILabelDefinitions.VAR_NAME);
-        distributionSet.setId(SPUIComponetIdProvider.ROLLOUT_DS_ID);
+        dsSet.setId(SPUIComponetIdProvider.ROLLOUT_DS_ID);
-        distributionSet.setSizeFull();
+        dsSet.setSizeFull();
-        return distributionSet;
+        return dsSet;
     }
 
     private void populateDistributionSet() {
@@ -706,12 +667,12 @@ public class AddUpdateRolloutWindowLayout extends CommonDialog {
     }
 
     private TextField createRolloutNameField() {
-        rolloutName = SPUIComponentProvider.getTextField(i18n.get("textfield.name"), "", ValoTheme.TEXTFIELD_TINY, true,
+        final TextField rolloutNameField = SPUIComponentProvider.getTextField(i18n.get("textfield.name"), "",
-                null, i18n.get("textfield.name"), true, SPUILabelDefinitions.TEXT_FIELD_MAX_LENGTH);
+                ValoTheme.TEXTFIELD_TINY, true, null, i18n.get("textfield.name"), true,
-        rolloutName.setId(SPUIComponetIdProvider.ROLLOUT_NAME_FIELD_ID);
+                SPUILabelDefinitions.TEXT_FIELD_MAX_LENGTH);
-        rolloutName.setSizeFull();
+        rolloutNameField.setId(SPUIComponetIdProvider.ROLLOUT_NAME_FIELD_ID);
-
+        rolloutNameField.setSizeFull();
-        return rolloutName;
+        return rolloutNameField;
     }
 
     private Label createMandatoryLabel() {

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/rollout/rollout/RolloutListGrid.java

@@ -96,8 +96,8 @@ public class RolloutListGrid extends AbstractGrid {
     @Autowired
     private transient RolloutManagement rolloutManagement;
 
-    @Autowired
+    // @Autowired
-    private AddUpdateRolloutWindowLayout addUpdateRolloutWindow;
+    private final AddUpdateRolloutWindowLayout addUpdateRolloutWindow = new AddUpdateRolloutWindowLayout();
 
     @Autowired
     private UINotification uiNotification;
@@ -110,7 +110,6 @@ public class RolloutListGrid extends AbstractGrid {
 
     private transient Map<RolloutStatus, StatusFontIcon> statusIconMap = new EnumMap<>(RolloutStatus.class);
 
-
     /**
      * Handles the RolloutEvent to refresh Grid.
      *

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/rollout/rollout/RolloutListHeader.java

@@ -15,6 +15,7 @@ import org.eclipse.hawkbit.ui.common.grid.AbstractGridHeader;
 import org.eclipse.hawkbit.ui.components.SPUIComponentProvider;
 import org.eclipse.hawkbit.ui.rollout.event.RolloutEvent;
 import org.eclipse.hawkbit.ui.rollout.state.RolloutUIState;
+import org.eclipse.hawkbit.ui.utils.I18N;
 import org.eclipse.hawkbit.ui.utils.SPUIComponetIdProvider;
 import org.eclipse.hawkbit.ui.utils.SPUIDefinitions;
 import org.eclipse.hawkbit.ui.utils.SPUILabelDefinitions;
@@ -27,6 +28,7 @@ import com.vaadin.ui.Button.ClickEvent;
 import com.vaadin.ui.HorizontalLayout;
 import com.vaadin.ui.Label;
 import com.vaadin.ui.UI;
+import com.vaadin.ui.Window;
 
 /**
  * 
@@ -47,6 +49,9 @@ public class RolloutListHeader extends AbstractGridHeader {
     @Autowired
     private transient EventBus.SessionEventBus eventBus;
 
+    @Autowired
+    private I18N i18n;
+
     @Autowired
     private AddUpdateRolloutWindowLayout addUpdateRolloutWindow;
 
@@ -54,6 +59,7 @@ public class RolloutListHeader extends AbstractGridHeader {
     @PostConstruct
     protected void init() {
         super.init();
+        addUpdateRolloutWindow.init();
     }
 
     @Override
@@ -89,11 +95,11 @@ public class RolloutListHeader extends AbstractGridHeader {
 
     @Override
     protected void addNewItem(final ClickEvent event) {
-        addUpdateRolloutWindow.init();
         addUpdateRolloutWindow.resetComponents();
-        addUpdateRolloutWindow.init();
+        final Window addTargetWindow = addUpdateRolloutWindow.getWindow();
-        UI.getCurrent().addWindow(addUpdateRolloutWindow);
+        UI.getCurrent().addWindow(addTargetWindow);
-        addUpdateRolloutWindow.setVisible(Boolean.TRUE);
+        addTargetWindow.setVisible(Boolean.TRUE);
+
     }
 
     @Override

hawkbit-ui/src/main/resources/VAADIN/themes/hawkbit/customstyles/common.scss

@@ -288,4 +288,13 @@
 	font-style:normal;
 	font-weight:normal;
   }
+  
+  .hawkbit [class*="margin-bottom"] > tbody > [class*="lastrow"] > td {
+	padding-bottom: 12px !important;
+  }
+  
+  .form-lastrow {
+	padding-bottom: 12px !important;
+  }
+  
 }

hawkbit-ui/src/main/resources/VAADIN/themes/hawkbit/customstyles/popup-common.scss

@@ -11,8 +11,8 @@
 
   //Color picker layout position adjustment
   .rgb-vertical-layout {
-    margin-top: 100px !important;
+ //   margin-top: 100px !important;
-    padding-bottom: 50px;
+    padding-bottom: 12px;
   }
 
   //Discard icon in create/update popup

hawkbit-ui/src/main/resources/VAADIN/themes/hawkbit/customstyles/table-content.scss

@@ -133,6 +133,7 @@
   //Create/update popup footer button layout style
   .window-style {
     margin-bottom: 4px !important;
+    margin-top: 4px !important;
   }
 
   //Table details style