XWIKI-22318: 'Is enabled' Notifications Custom filter doesn't keep it's value after page refresh

  * Refactor FilterBoolean so that it's closer to the implementation of
    FilterList since they share same principle of using selectize
  * Cover the usecase inside the integration test

(cherry picked from commit b568134f)

xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-test/xwiki-platform-livedata-test-docker/src/test/it/org/xwiki/livedata/test/ui/LiveDataIT.java

@@ -29,6 +29,7 @@
 import org.junit.jupiter.api.Order;
 import org.junit.jupiter.api.Test;
 import org.openqa.selenium.By;
+import org.openqa.selenium.WebElement;
 import org.testcontainers.shaded.com.fasterxml.jackson.core.JsonProcessingException;
 import org.testcontainers.shaded.com.fasterxml.jackson.databind.ObjectMapper;
 import org.testcontainers.shaded.com.fasterxml.jackson.databind.node.ArrayNode;
@@ -260,6 +261,17 @@ void livedataLivetableTableLayout(TestUtils testUtils, TestReference testReferen
         assertEquals(1, tableLayout.countRows());
         tableLayout.assertRow(NAME_COLUMN, NAME_LYNDA);
 
+        // Refresh the page and ensure the filter is still there
+        testUtils.getDriver().navigate().refresh();
+        tableLayout.waitUntilReady();
+        liveDataElement.waitUntilReady();
+
+        WebElement isActiveFilter = tableLayout.getFilter(IS_ACTIVE_COLUMN);
+        assertEquals("1", isActiveFilter.getAttribute("value"));
+        assertEquals(1, tableLayout.countRows());
+        tableLayout.assertRow(NAME_COLUMN, NAME_LYNDA);
+
+        suggestInputElement = new SuggestInputElement(isActiveFilter);
         suggestInputElement.clear();
         suggestInputElement.sendKeys(Boolean.FALSE.toString());
         suggestInputElement.waitForSuggestions();

xwiki-platform-core/xwiki-platform-livedata/xwiki-platform-livedata-webjar/src/main/vue/filters/FilterBoolean.vue

@@ -21,12 +21,14 @@
 
 <!-- BooleanFilter is a custom filter that allow to filter boolean values. -->
 <template>
-  <select :value="filterValue" class="xwiki-selectize livedata-selectize filter-boolean" ref="input"
-    :aria-label="$t('livedata.filter.boolean.label')">
-    <option value=""></option>
-    <option :value="trueValue">{{ $t('livedata.displayer.boolean.true') }}</option>
-    <option :value="falseValue">{{ $t('livedata.displayer.boolean.false') }}</option>
-  </select>
+  <span v-if="isReady">
+    <select :value="filterEntry.value" class="xwiki-selectize livedata-selectize filter-boolean" ref="input"
+      :aria-label="$t('livedata.filter.boolean.label')">
+      <option value=""></option>
+      <option :value="trueValue">{{ $t('livedata.displayer.boolean.true') }}</option>
+      <option :value="falseValue">{{ $t('livedata.displayer.boolean.false') }}</option>
+    </select>
+  </span>
 </template>
 
 
@@ -42,40 +44,64 @@ export default {
 
   data() {
     return {
-      filterValue: undefined
+      isReady: false
     }
   },
 
   computed: {
+    // Current value of the filter entry.
+    value () {
+      return this.filterEntry.value;
+    },
     trueValue() {
       return Object.prototype.hasOwnProperty.call(this.config, 'trueValue') ? this.config.trueValue : 'true';
     },
     falseValue() {
       return Object.prototype.hasOwnProperty.call(this.config, 'falseValue') ? this.config.falseValue : 'false';
+    },
+    // Settings used when creating the selectize widget.
+    selectizeSettings () {
+      let options = this.config.options || [];
+      return  {
+        // Allow free text because we want to support the contains and startsWith operators.
+        create: false,
+        // Take the list of (initial) options from the filter configuration. This list will be extended with the results
+        // obtained from the configured search URL.
+        options,
+        // Limit the selection to a single value because:
+        // * selecting multiple values increases the height of the filter row when table layout is used
+        // * constraint (filter) values should be strings; this isn't a limitation of the live data model, but using
+        //   arrays or complex objects make it difficult to express the filter in the REST URL used to fetch the live
+        //   data or in the live data macro parameters
+        // * the user can still add more values by adding more constraints from the advanced filtering panel
+        maxItems: 1,
+        onChange: value => {
+          if (this.$refs.input.selectize.items.length === 0) {
+            // When no values are selected, simply remove the filter.
+            this.removeFilter();
+          } else if (value !== this.value) {
+            this.applyFilter(value);
+          }
+        },
+      };
     }
   },
 
   watch: {
-    filterValue(newValue, oldValue) {
-      if (this.$refs.input.selectize.items.length === 0) {
-        // When no values are selected, simply remove the filter.
-        this.removeFilter();
-      } else if (newValue !== oldValue) {
-        $(this.$refs.input).val(newValue).trigger('change');
-        this.applyFilter(newValue);
-      }
-    },
+    value (newValue) {
+      $(this.$refs.input).val(newValue).trigger('change');
+    }
   },
 
   // Create the selectize widget.
   async mounted() {
     // Wait for the translations to be loaded, otherwise the true / false option label might be displayed untranslated.
     await this.logic.translationsLoaded();
-    $(this.$refs.input).xwikiSelectize({
-      onChange: value => {
-        this.filterValue = value;
-      },
-    });
+    this.isReady = true;
+    // It is important to wait for the next tick to be sure that the input reference is available in the dom, for
+    // selectize to be able to enhance it.
+    await this.$nextTick();
+    $(this.$refs.input).xwikiSelectize(this.selectizeSettings);
   },
 
   // Destroy the selectize widget.