refactor: remove header filter

Author: iobuhov

packages/pluggableWidgets/datagrid-web/src/Datagrid.xml

@@ -121,44 +121,6 @@
                                 <returnType type="Boolean" />
                             </property>
                         </propertyGroup>
-                        <propertyGroup caption="Drop-down filter settings">
-                            <property key="filterAssociation" type="association" selectableObjects="filterAssociationOptions" required="false" dataSource="../datasource">
-                                <caption>Entity</caption>
-                                <description>Set the entity to enable filtering over association with the Drop-down filter widget.</description>
-                                <associationTypes>
-                                    <associationType name="Reference" />
-                                    <associationType name="ReferenceSet" />
-                                </associationTypes>
-                            </property>
-                            <property key="filterAssociationOptions" type="datasource" isList="true" required="false">
-                                <caption>Selectable objects</caption>
-                                <description>The options to show in the Drop-down filter widget.</description>
-                            </property>
-                            <property key="fetchOptionsLazy" type="boolean" defaultValue="true">
-                                <caption>Use lazy load</caption>
-                                <description>Lazy loading enables faster data grid loading, but with personalization enabled, value restoration will be limited.</description>
-                            </property>
-                            <property key="filterCaptionType" type="enumeration" defaultValue="expression">
-                                <caption>Option caption type</caption>
-                                <description />
-                                <enumerationValues>
-                                    <enumerationValue key="attribute">Attribute</enumerationValue>
-                                    <enumerationValue key="expression">Expression</enumerationValue>
-                                </enumerationValues>
-                            </property>
-                            <property key="filterAssociationOptionLabel" type="expression" dataSource="filterAssociationOptions" required="false">
-                                <caption>Option caption</caption>
-                                <description />
-                                <returnType type="String" />
-                            </property>
-                            <property key="filterAssociationOptionLabelAttr" type="attribute" dataSource="filterAssociationOptions" required="false">
-                                <caption>Option caption</caption>
-                                <description />
-                                <attributeTypes>
-                                    <attributeType name="String" />
-                                </attributeTypes>
-                            </property>
-                        </propertyGroup>
                         <propertyGroup caption="Column capabilities">
                             <property key="sortable" type="boolean" defaultValue="true">
                                 <caption>Can sort</caption>

packages/pluggableWidgets/datagrid-web/src/components/WidgetHeaderContext.tsx

@@ -1,35 +1,31 @@
 import { getGlobalFilterContextObject } from "@mendix/widget-plugin-filtering/context";
-import { HeaderFiltersStore } from "@mendix/widget-plugin-filtering/stores/generic/HeaderFiltersStore";
 import {
     getGlobalSelectionContext,
     SelectionHelper,
     useCreateSelectionContextValue
 } from "@mendix/widget-plugin-grid/selection";
 import { createElement, memo, ReactElement, ReactNode } from "react";
+import { RootGridStore } from "../helpers/state/RootGridStore";
 
 interface WidgetHeaderContextProps {
     children?: ReactNode;
-    filtersStore: HeaderFiltersStore;
     selectionHelper?: SelectionHelper;
+    rootStore: RootGridStore;
 }
 
 const SelectionContext = getGlobalSelectionContext();
 const FilterContext = getGlobalFilterContextObject();
 
-function FilterAPIProvider(props: { filtersStore: HeaderFiltersStore; children?: ReactNode }): ReactElement {
-    return <FilterContext.Provider value={props.filtersStore.context}>{props.children}</FilterContext.Provider>;
-}
-
 function SelectionStatusProvider(props: { selectionHelper?: SelectionHelper; children?: ReactNode }): ReactElement {
     const value = useCreateSelectionContextValue(props.selectionHelper);
     return <SelectionContext.Provider value={value}>{props.children}</SelectionContext.Provider>;
 }
 
 function HeaderContainer(props: WidgetHeaderContextProps): ReactElement {
     return (
-        <FilterAPIProvider filtersStore={props.filtersStore}>
+        <FilterContext.Provider value={null}>
             <SelectionStatusProvider selectionHelper={props.selectionHelper}>{props.children}</SelectionStatusProvider>
-        </FilterAPIProvider>
+        </FilterContext.Provider>
     );
 }
 

packages/pluggableWidgets/datagrid-web/src/helpers/state/RootGridStore.ts

@@ -1,4 +1,5 @@
 import { CustomFilterHost } from "@mendix/widget-plugin-filtering/stores/generic/CustomFilterHost";
+import { FilterObserver } from "@mendix/widget-plugin-filtering/typings/FilterObserver";
 import { BaseControllerHost } from "@mendix/widget-plugin-mobx-kit/BaseControllerHost";
 import { disposeBatch } from "@mendix/widget-plugin-mobx-kit/disposeBatch";
 import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/props-gate";
@@ -29,6 +30,7 @@ export class RootGridStore extends BaseControllerHost {
     exportProgressCtrl: ProgressStore;
     loaderCtrl: DerivedLoaderController;
     paginationCtrl: PaginationController;
+    customFilters: FilterObserver;
 
     private gate: Gate;
 
@@ -44,6 +46,7 @@ export class RootGridStore extends BaseControllerHost {
             filtersChannelName: `datagrid/${generateUUID()}`
         };
         const customFilterHost = new CustomFilterHost();
+        this.customFilters = customFilterHost;
         const query = new DatasourceController(this, { gate });
         const columns = (this.columnsStore = new ColumnGroupStore(props, this.staticInfo, columnsInitFilter, {
             customFilterHost,

packages/pluggableWidgets/datagrid-web/src/helpers/state/column/ColumnFilterStore.tsx

@@ -1,23 +1,22 @@
 import { FilterAPI, getGlobalFilterContextObject } from "@mendix/widget-plugin-filtering/context";
-import { RefFilterStore, RefFilterStoreProps } from "@mendix/widget-plugin-filtering/stores/picker/RefFilterStore";
-import { StaticSelectFilterStore } from "@mendix/widget-plugin-filtering/stores/picker/StaticSelectFilterStore";
+import { StaticSelectFilterStore } from "@mendix/widget-plugin-dropdown-filter/stores/StaticSelectFilterStore";
 import { InputFilterStore, attrgroupFilterStore } from "@mendix/widget-plugin-filtering/stores/input/store-utils";
-import { ensure } from "@mendix/widget-plugin-platform/utils/ensure";
+import { FilterData } from "@mendix/filter-commons/typings/settings";
+import { value } from "@mendix/widget-plugin-filtering/result-meta";
+import { FilterObserver } from "@mendix/widget-plugin-filtering/typings/FilterObserver";
+import { disposeBatch } from "@mendix/widget-plugin-mobx-kit/disposeBatch";
+import { ListAttributeListValue, ListAttributeValue } from "mendix";
 import { FilterCondition } from "mendix/filters";
-import { ListAttributeValue, ListAttributeListValue } from "mendix";
-import { action, computed, makeObservable } from "mobx";
+import { computed, makeObservable } from "mobx";
 import { ReactNode, createElement } from "react";
 import { ColumnsType } from "../../../../typings/DatagridProps";
 import { StaticInfo } from "../../../typings/static-info";
-import { FilterData } from "@mendix/widget-plugin-filtering/typings/settings";
-import { value } from "@mendix/widget-plugin-filtering/result-meta";
-import { disposeFx } from "@mendix/widget-plugin-filtering/mobx-utils";
-import { FilterObserver } from "@mendix/widget-plugin-filtering/typings/FilterObserver";
+
 export interface IColumnFilterStore {
     renderFilterWidgets(): ReactNode;
 }
 
-type FilterStore = InputFilterStore | StaticSelectFilterStore | RefFilterStore;
+type FilterStore = InputFilterStore | StaticSelectFilterStore;
 
 const { Provider } = getGlobalFilterContextObject();
 
@@ -33,61 +32,20 @@ export class ColumnFilterStore implements IColumnFilterStore {
         this._filterStore = this.createFilterStore(props, dsViewState);
         this._context = this.createContext(this._filterStore, info);
 
-        makeObservable<this, "_updateStore">(this, {
-            _updateStore: action,
-            condition2: computed,
-            updateProps: action
+        makeObservable<this>(this, {
+            condition: computed
         });
     }
 
     setup(): () => void {
-        const [disposers, dispose] = disposeFx();
+        const [add, disposeAll] = disposeBatch();
         if (this._filterStore && "setup" in this._filterStore) {
-            disposers.push(this._filterStore.setup());
-        }
-        return dispose;
-    }
-
-    updateProps(props: ColumnsType): void {
-        this._widget = props.filter;
-        this._updateStore(props);
-    }
-
-    private _updateStore(props: ColumnsType): void {
-        const store = this._filterStore;
-
-        if (store === null) {
-            return;
-        }
-
-        if (store.storeType === "refselect") {
-            store.updateProps(this.toRefselectProps(props));
-        } else if (isListAttributeValue(props.attribute)) {
-            store.updateProps([props.attribute]);
+            add(this._filterStore.setup());
         }
-    }
-
-    private toRefselectProps(props: ColumnsType): RefFilterStoreProps {
-        const searchAttrId = props.filterAssociationOptionLabelAttr?.id;
-        const caption =
-            props.filterCaptionType === "expression"
-                ? ensure(props.filterAssociationOptionLabel, errorMessage("filterAssociationOptionLabel"))
-                : ensure(props.filterAssociationOptionLabelAttr, errorMessage("filterAssociationOptionLabelAttr"));
-
-        return {
-            ref: ensure(props.filterAssociation, errorMessage("filterAssociation")),
-            datasource: ensure(props.filterAssociationOptions, errorMessage("filterAssociationOptions")),
-            searchAttrId,
-            fetchOptionsLazy: props.fetchOptionsLazy,
-            caption
-        };
+        return disposeAll;
     }
 
     private createFilterStore(props: ColumnsType, dsViewState: FilterCondition | null): FilterStore | null {
-        if (props.filterAssociation) {
-            return new RefFilterStore(this.toRefselectProps(props), dsViewState);
-        }
-
         if (isListAttributeValue(props.attribute)) {
             return attrgroupFilterStore(props.attribute.type, [props.attribute], dsViewState);
         }
@@ -112,7 +70,7 @@ export class ColumnFilterStore implements IColumnFilterStore {
         return <Provider value={this._context}>{this._widget}</Provider>;
     }
 
-    get condition2(): FilterCondition | undefined {
+    get condition(): FilterCondition | undefined {
         return this._filterStore ? this._filterStore.condition : undefined;
     }
 
@@ -135,9 +93,6 @@ const isListAttributeValue = (
     return !!(attribute && attribute.isList === false);
 };
 
-const errorMessage = (propName: string): string =>
-    `Can't map ColumnsType to AssociationProperties: ${propName} is undefined`;
-
 export interface ObserverBag {
     customFilterHost: FilterObserver;
     sharedInitFilter: Array<FilterCondition | undefined>;

packages/pluggableWidgets/datagrid-web/typings/DatagridProps.d.ts

@@ -4,7 +4,7 @@
  * @author Mendix Widgets Framework Team
  */
 import { ComponentType, CSSProperties, ReactNode } from "react";
-import { ActionValue, DynamicValue, EditableValue, ListValue, ListActionValue, ListAttributeValue, ListAttributeListValue, ListExpressionValue, ListReferenceValue, ListReferenceSetValue, ListWidgetValue, SelectionSingleValue, SelectionMultiValue } from "mendix";
+import { ActionValue, DynamicValue, EditableValue, ListValue, ListActionValue, ListAttributeValue, ListAttributeListValue, ListExpressionValue, ListWidgetValue, SelectionSingleValue, SelectionMultiValue } from "mendix";
 import { Big } from "big.js";
 
 export type ItemSelectionMethodEnum = "checkbox" | "rowClick";
@@ -15,8 +15,6 @@ export type LoadingTypeEnum = "spinner" | "skeleton";
 
 export type ShowContentAsEnum = "attribute" | "dynamicText" | "customContent";
 
-export type FilterCaptionTypeEnum = "attribute" | "expression";
-
 export type HidableEnum = "yes" | "hidden" | "no";
 
 export type WidthEnum = "autoFill" | "autoFit" | "manual";
@@ -35,12 +33,6 @@ export interface ColumnsType {
     tooltip?: ListExpressionValue<string>;
     filter?: ReactNode;
     visible: DynamicValue<boolean>;
-    filterAssociation?: ListReferenceValue | ListReferenceSetValue;
-    filterAssociationOptions?: ListValue;
-    fetchOptionsLazy: boolean;
-    filterCaptionType: FilterCaptionTypeEnum;
-    filterAssociationOptionLabel?: ListExpressionValue<string>;
-    filterAssociationOptionLabelAttr?: ListAttributeValue<string>;
     sortable: boolean;
     resizable: boolean;
     draggable: boolean;
@@ -81,12 +73,6 @@ export interface ColumnsPreviewType {
     tooltip: string;
     filter: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };
     visible: string;
-    filterAssociation: string;
-    filterAssociationOptions: {} | { caption: string } | { type: string } | null;
-    fetchOptionsLazy: boolean;
-    filterCaptionType: FilterCaptionTypeEnum;
-    filterAssociationOptionLabel: string;
-    filterAssociationOptionLabelAttr: string;
     sortable: boolean;
     resizable: boolean;
     draggable: boolean;

packages/shared/filter-commons/package.json

@@ -32,7 +32,7 @@
         "test": "jest"
     },
     "dependencies": {
-        "mendix": "^10.16.49747"
+        "mendix": "^10.21.64362"
     },
     "peerDependencies": {
         "mobx": "6.12.3",