ui: Make item selection during creation smoother (#2878)

Rollout creation and target assignment easier with full lazy loading

- Use a ComboBox to be able to search through items
- Ensure all items are displayed

Signed-off-by: Mohamed Belaouad <mohamed.belaouad@wattsense.com>

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/view/RolloutView.java

@@ -25,6 +25,7 @@ import com.vaadin.flow.component.Text;
 import com.vaadin.flow.component.button.Button;
 import com.vaadin.flow.component.button.ButtonVariant;
 import com.vaadin.flow.component.checkbox.Checkbox;
+import com.vaadin.flow.component.combobox.ComboBox;
 import com.vaadin.flow.component.datetimepicker.DateTimePicker;
 import com.vaadin.flow.component.dependency.Uses;
 import com.vaadin.flow.component.formlayout.FormLayout;
@@ -283,8 +284,8 @@ public class RolloutView extends TableView<MgmtRolloutResponseBody, Long> {
     private static class CreateDialog extends Utils.BaseDialog<Void> {
 
         private final TextField name;
-        private final Select<MgmtDistributionSet> distributionSet;
+        private final ComboBox<MgmtDistributionSet> distributionSet;
-        private final Select<MgmtTargetFilterQuery> targetFilter;
+        private final ComboBox<MgmtTargetFilterQuery> targetFilter;
         private final TextArea description;
         private final Select<MgmtActionType> actionType;
         private final DateTimePicker forceTime = new DateTimePicker("Force Time");
@@ -301,27 +302,21 @@ public class RolloutView extends TableView<MgmtRolloutResponseBody, Long> {
 
             name = Utils.textField("Name", this::readyToCreate);
             name.focus();
-            distributionSet = new Select<>(
+            distributionSet = Utils.nameComboBox(
                     "Distribution Set",
                     this::readyToCreate,
-                    Optional.ofNullable(
+                    query -> hawkbitClient.getDistributionSetRestApi()
-                            hawkbitClient.getDistributionSetRestApi()
+                            .getDistributionSets(query.getFilter().orElse(null), query.getOffset(), query.getPageSize(), Constants.NAME_ASC)
-                                    .getDistributionSets(null, 0, 30, Constants.CREATED_AT_DESC)
+                            .getBody().getContent().stream());
-                                    .getBody())
-                            .map(body -> body.getContent().toArray(new MgmtDistributionSet[0]))
-                            .orElseGet(() -> new MgmtDistributionSet[0]));
             distributionSet.setRequiredIndicatorVisible(true);
             distributionSet.setItemLabelGenerator(distributionSetO -> distributionSetO.getName() + ":" + distributionSetO.getVersion());
             distributionSet.setWidthFull();
-            targetFilter = new Select<>(
+            targetFilter = Utils.nameComboBox(
                     "Target Filter",
                     this::readyToCreate,
-                    Optional.ofNullable(
+                    query -> hawkbitClient.getTargetFilterQueryRestApi()
-                            hawkbitClient.getTargetFilterQueryRestApi()
+                            .getFilters(query.getFilter().orElse(null), query.getOffset(), query.getPageSize(), Constants.NAME_ASC, null)
-                                    .getFilters(null, 0, 30, Constants.NAME_ASC, null)
+                            .getBody().getContent().stream());
-                                    .getBody())
-                            .map(body -> body.getContent().toArray(new MgmtTargetFilterQuery[0]))
-                            .orElseGet(() -> new MgmtTargetFilterQuery[0]));
             targetFilter.setRequiredIndicatorVisible(true);
             targetFilter.setItemLabelGenerator(MgmtTargetFilterQuery::getName);
             targetFilter.setWidthFull();

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/view/TargetView.java

@@ -843,7 +843,7 @@ public class TargetView extends TableView<TargetView.TargetWithDs, String> {
 
     private static class AssignDialog extends Utils.BaseDialog<Void> {
 
-        private final Select<MgmtDistributionSet> distributionSet;
+        private final ComboBox<MgmtDistributionSet> distributionSet;
         private final Select<MgmtActionType> actionType;
         private final DateTimePicker forceTime = new DateTimePicker("Force Time");
         private final Button assign = new Button("Assign");
@@ -851,16 +851,12 @@ public class TargetView extends TableView<TargetView.TargetWithDs, String> {
         private AssignDialog(final HawkbitMgmtClient hawkbitClient, Set<TargetWithDs> selectedTargets) {
             super("Assign Distribution Set");
 
-            distributionSet = new Select<>(
+            distributionSet = Utils.nameComboBox(
                     "Distribution Set",
                     this::readyToAssign,
-                    Optional.ofNullable(
+                    query -> hawkbitClient.getDistributionSetRestApi()
-                            hawkbitClient.getDistributionSetRestApi()
+                            .getDistributionSets(query.getFilter().orElse(null), query.getOffset(), query.getPageSize(), Constants.NAME_ASC)
-                                    .getDistributionSets(null, 0, 500, Constants.CREATED_AT_DESC)
+                            .getBody().getContent().stream());
-                                    .getBody())
-                            .map(body -> body.getContent().toArray(new MgmtDistributionSet[0]))
-                            .orElseGet(() -> new MgmtDistributionSet[0])
-            );
             distributionSet.setRequiredIndicatorVisible(true);
             distributionSet.setItemLabelGenerator(distributionSetO -> distributionSetO.getName() + ":" + distributionSetO.getVersion());
             distributionSet.setWidthFull();

hawkbit-ui/src/main/java/org/eclipse/hawkbit/ui/view/util/Utils.java

@@ -35,6 +35,7 @@ import com.vaadin.flow.component.UI;
 import com.vaadin.flow.component.Unit;
 import com.vaadin.flow.component.button.Button;
 import com.vaadin.flow.component.button.ButtonVariant;
+import com.vaadin.flow.component.combobox.ComboBox;
 import com.vaadin.flow.component.confirmdialog.ConfirmDialog;
 import com.vaadin.flow.component.datetimepicker.DateTimePicker;
 import com.vaadin.flow.component.dialog.Dialog;
@@ -51,6 +52,7 @@ import com.vaadin.flow.component.shared.Tooltip;
 import com.vaadin.flow.component.textfield.NumberField;
 import com.vaadin.flow.component.textfield.TextField;
 import com.vaadin.flow.data.provider.QuerySortOrder;
+import com.vaadin.flow.data.provider.CallbackDataProvider.FetchCallback;
 import com.vaadin.flow.data.provider.SortDirection;
 import com.vaadin.flow.data.renderer.ComponentRenderer;
 import com.vaadin.flow.data.renderer.LocalDateTimeRenderer;
@@ -67,6 +69,8 @@ public class Utils {
         // prevent initialization
     }
 
+    public static final String COMBO_NAME_ALLOWED_CHARS = "[0-9a-zA-Z-_./]";
+
     public static TextField textField(final String label) {
         return textField(label, null);
     }
@@ -99,6 +103,16 @@ public class Utils {
         return numberField;
     }
 
+    public static <T> ComboBox<T> nameComboBox(
+            final String label,
+            final Consumer<HasValue.ValueChangeEvent<T>> changeListener,
+            final FetchCallback<T, String> listHandler) {
+        final ComboBox<T> combo = new ComboBox<T>(label, changeListener::accept);
+        combo.setAllowedCharPattern(Utils.COMBO_NAME_ALLOWED_CHARS);
+        combo.setItemsWithFilterConverter(listHandler, nameFilter -> "name==*" + nameFilter + "*");
+        return combo;
+    }
+
     @SuppressWarnings("java:S119") // better readability
     public static <T, ID> HorizontalLayout addRemoveControls(
             final Function<SelectionGrid<T, ID>, CompletionStage<Void>> addHandler,