feat: convert gallery and fix tests

Author: iobuhov

packages/pluggableWidgets/datagrid-date-filter-web/src/components/__tests__/DatagridDateFilter.spec.tsx

@@ -73,8 +73,7 @@ describe("Date Filter", () => {
                         hasError: false,
                         value: { type: "direct", store: dateFilterStore }
                     },
-                    filterObserver: {} as ObservableFilterHost,
-                    sharedInitFilter: []
+                    filterObserver: {} as ObservableFilterHost
                 };
 
                 (window as any)["com.mendix.widgets.web.filterable.filterContext.v2"] = createContext<FilterAPI | null>(
@@ -168,8 +167,7 @@ describe("Date Filter", () => {
                         hasError: false,
                         value: { type: "direct", store: dateFilterStore }
                     },
-                    filterObserver: {} as ObservableFilterHost,
-                    sharedInitFilter: []
+                    filterObserver: {} as ObservableFilterHost
                 };
 
                 (window as any)["com.mendix.widgets.web.filterable.filterContext.v2"] = createContext<FilterAPI | null>(
@@ -223,8 +221,7 @@ describe("Date Filter", () => {
                     hasError: false,
                     value: { type: "direct", store: dateFilterStore }
                 },
-                filterObserver: {} as ObservableFilterHost,
-                sharedInitFilter: []
+                filterObserver: {} as ObservableFilterHost
             };
 
             (window as any)["com.mendix.widgets.web.filterable.filterContext.v2"] = createContext<FilterAPI | null>(
@@ -264,8 +261,7 @@ describe("Date Filter", () => {
                     hasError: false,
                     value: { type: "direct", store: dateFilterStore }
                 },
-                filterObserver: {} as ObservableFilterHost,
-                sharedInitFilter: []
+                filterObserver: {} as ObservableFilterHost
             };
 
             (window as any)["com.mendix.widgets.web.filterable.filterContext.v2"] = createContext<FilterAPI | null>(

packages/pluggableWidgets/datagrid-number-filter-web/src/components/__tests__/DatagridNumberFilter.spec.tsx

@@ -53,8 +53,7 @@ const setContext = (store: NumberInputFilterStore) => {
             hasError: false,
             value: { type: "direct", store }
         },
-        filterObserver: {} as ObservableFilterHost,
-        sharedInitFilter: []
+        filterObserver: {} as ObservableFilterHost
     };
     (window as any)["com.mendix.widgets.web.filterable.filterContext.v2"] = createContext<FilterAPI>(filterAPI);
 };

packages/pluggableWidgets/datagrid-text-filter-web/src/components/__tests__/DatagridTextFilter.spec.tsx

@@ -50,8 +50,7 @@ const setContext = (store: StringInputFilterStore) => {
             hasError: false,
             value: { type: "direct", store }
         },
-        filterObserver: {} as ObservableFilterHost,
-        sharedInitFilter: []
+        filterObserver: {} as ObservableFilterHost
     };
     (window as any)["com.mendix.widgets.web.filterable.filterContext.v2"] = createContext<FilterAPI>(filterAPI);
 };

packages/pluggableWidgets/gallery-web/src/controllers/QueryParamsController.ts

@@ -1,65 +1,54 @@
-import { compactArray, fromCompactArray, isAnd } from "@mendix/filter-commons/condition-utils";
-import { CustomFilterHost } from "@mendix/widget-plugin-filtering/stores/generic/CustomFilterHost";
 import { DatasourceController } from "@mendix/widget-plugin-grid/query/DatasourceController";
 import { disposeBatch } from "@mendix/widget-plugin-mobx-kit/disposeBatch";
 import { ReactiveController, ReactiveControllerHost } from "@mendix/widget-plugin-mobx-kit/reactive-controller";
-import { SortStoreHost } from "@mendix/widget-plugin-sorting/stores/SortStoreHost";
-import { ListValue } from "mendix";
+import { SortInstruction } from "@mendix/widget-plugin-sorting/types/store";
+
 import { FilterCondition } from "mendix/filters";
-import { makeAutoObservable, reaction } from "mobx";
+import { reaction } from "mobx";
+
+interface ObservableFilterStore {
+    filter: FilterCondition | undefined;
+}
+
+interface ObservableSortStore {
+    sortOrder: SortInstruction[] | undefined;
+}
 
 export class QueryParamsController implements ReactiveController {
     private readonly _query: DatasourceController;
-    private readonly _filters: CustomFilterHost;
-    private readonly _sort: SortStoreHost;
+    private readonly _filtersHost: ObservableFilterStore;
+    private readonly _sortHost: ObservableSortStore;
 
     constructor(
         host: ReactiveControllerHost,
         query: DatasourceController,
-        filters: CustomFilterHost,
-        sort: SortStoreHost
+        filters: ObservableFilterStore,
+        sort: ObservableSortStore
     ) {
         host.addController(this);
 
         this._query = query;
-        this._filters = filters;
-        this._sort = sort;
-
-        makeAutoObservable(this, { setup: false });
-    }
-
-    private get _derivedSortOrder(): ListValue["sortOrder"] {
-        return this._sort.sortOrder;
-    }
-
-    private get _derivedFilter(): FilterCondition {
-        return compactArray(this._filters.conditions);
+        this._filtersHost = filters;
+        this._sortHost = sort;
     }
 
     setup(): () => void {
         const [add, disposeAll] = disposeBatch();
         add(
             reaction(
-                () => this._derivedSortOrder,
+                () => this._sortHost.sortOrder,
                 sortOrder => this._query.setSortOrder(sortOrder),
                 { fireImmediately: true }
             )
         );
         add(
             reaction(
-                () => this._derivedFilter,
+                () => this._filtersHost.filter,
                 filter => this._query.setFilter(filter),
                 { fireImmediately: true }
             )
         );
 
         return disposeAll;
     }
-
-    unzipFilter(filter?: FilterCondition): Array<FilterCondition | undefined> {
-        if (!filter || !isAnd(filter)) {
-            return [];
-        }
-        return fromCompactArray(filter);
-    }
 }

packages/pluggableWidgets/gallery-web/src/stores/GalleryStore.ts

@@ -1,4 +1,5 @@
 import { createContextWithStub, FilterAPI } from "@mendix/widget-plugin-filtering/context";
+import { CombinedFilter } from "@mendix/widget-plugin-filtering/stores/generic/CombinedFilter";
 import { CustomFilterHost } from "@mendix/widget-plugin-filtering/stores/generic/CustomFilterHost";
 import { DatasourceController } from "@mendix/widget-plugin-grid/query/DatasourceController";
 import { PaginationController } from "@mendix/widget-plugin-grid/query/PaginationController";
@@ -67,16 +68,17 @@ export class GalleryStore extends BaseControllerHost {
 
         this._filtersHost = new CustomFilterHost();
 
+        const combinedFilter = new CombinedFilter(this, { stableKey: spec.name, inputs: [this._filtersHost] });
+
         this._sortHost = new SortStoreHost({
             initSort: spec.gate.props.datasource.sortOrder
         });
 
-        const paramCtrl = new QueryParamsController(this, this._query, this._filtersHost, this._sortHost);
+        new QueryParamsController(this, this._query, combinedFilter, this._sortHost);
 
         this.filterAPI = createContextWithStub({
             filterObserver: this._filtersHost,
-            parentChannelName: this.id,
-            sharedInitFilter: paramCtrl.unzipFilter(spec.gate.props.datasource.filter)
+            parentChannelName: this.id
         });
 
         this.sortAPI = {
@@ -93,6 +95,8 @@ export class GalleryStore extends BaseControllerHost {
         if (useStorage) {
             this.initPersistentStorage(spec, spec.gate);
         }
+
+        combinedFilter.hydrate(spec.gate.props.datasource.filter);
     }
 
     initPersistentStorage(props: StaticProps, gate: GalleryPropsGate): void {