chore: introduce wide filter api

Author: iobuhov

packages/pluggableWidgets/datagrid-web/src/Datagrid.editorConfig.ts

@@ -74,21 +74,6 @@ export function getProperties(
                 "hidable"
             ]);
         }
-
-        if (!column.filterAssociation) {
-            hideNestedPropertiesIn(defaultProperties, values, "columns", index, [
-                "filterAssociationOptions",
-                "filterAssociationOptionLabel",
-                "fetchOptionsLazy",
-                "filterCaptionType",
-                "filterAssociationOptionLabelAttr"
-            ]);
-        }
-        if (column.filterCaptionType === "attribute") {
-            hidePropertyIn(defaultProperties, values, "columns", index, "filterAssociationOptionLabel");
-        } else {
-            hidePropertyIn(defaultProperties, values, "columns", index, "filterAssociationOptionLabelAttr");
-        }
     });
     if (values.pagination === "buttons") {
         hidePropertyIn(defaultProperties, values, "showNumberOfRows");
@@ -209,11 +194,6 @@ export const getPreview = (
                   draggable: false,
                   dynamicText: "Dynamic text",
                   filter: { widgetCount: 0, renderer: () => null },
-                  filterAssociation: "",
-                  filterAssociationOptionLabel: "",
-                  filterAssociationOptionLabelAttr: "",
-                  filterAssociationOptions: {},
-                  filterCaptionType: "attribute",
                   header: "Column",
                   hidable: "no",
                   resizable: false,
@@ -227,8 +207,7 @@ export const getPreview = (
                   minWidth: "auto",
                   minWidthLimit: 100,
                   allowEventPropagation: true,
-                  exportValue: "",
-                  fetchOptionsLazy: true
+                  exportValue: ""
               }
           ];
     const columns = rowLayout({

packages/pluggableWidgets/datagrid-web/src/Datagrid.editorPreview.tsx

@@ -35,11 +35,7 @@ const initColumns: ColumnsPreviewType[] = [
         draggable: false,
         dynamicText: "Dynamic Text",
         filter: { renderer: () => <div />, widgetCount: 0 },
-        filterAssociation: "",
-        filterAssociationOptionLabel: "",
-        filterAssociationOptionLabelAttr: "",
-        filterAssociationOptions: {},
-        filterCaptionType: "expression",
+
         header: "Column",
         hidable: "no",
         resizable: false,
@@ -53,8 +49,7 @@ const initColumns: ColumnsPreviewType[] = [
         minWidth: "auto",
         minWidthLimit: 100,
         allowEventPropagation: true,
-        exportValue: "",
-        fetchOptionsLazy: true
+        exportValue: ""
     }
 ];
 

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

@@ -82,7 +82,7 @@ const Container = observer((props: Props): ReactElement => {
             headerTitle={props.filterSectionTitle?.value}
             headerContent={
                 props.filtersPlaceholder && (
-                    <WidgetHeaderContext selectionHelper={selectionHelper} filtersStore={rootStore.headerFiltersStore}>
+                    <WidgetHeaderContext selectionHelper={selectionHelper} rootStore={rootStore}>
                         {props.filtersPlaceholder}
                     </WidgetHeaderContext>
                 )

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

@@ -16,15 +16,11 @@ interface WidgetHeaderContextProps {
 const SelectionContext = getGlobalSelectionContext();
 const FilterContext = getGlobalFilterContextObject();
 
-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 {
+    const selectionContext = useCreateSelectionContextValue(props.selectionHelper);
     return (
-        <FilterContext.Provider value={null}>
-            <SelectionStatusProvider selectionHelper={props.selectionHelper}>{props.children}</SelectionStatusProvider>
+        <FilterContext.Provider value={props.rootStore.autonomousFilterAPI}>
+            <SelectionContext.Provider value={selectionContext}>{props.children}</SelectionContext.Provider>
         </FilterContext.Provider>
     );
 }

packages/pluggableWidgets/datagrid-web/src/consistency-check.ts

@@ -4,13 +4,7 @@ import { ColumnsPreviewType, DatagridPreviewProps } from "../typings/DatagridPro
 export function check(values: DatagridPreviewProps): Problem[] {
     const errors: Problem[] = [];
 
-    const columnChecks = [
-        checkAssociationSettings,
-        checkFilteringSettings,
-        checkDisplaySettings,
-        checkSortingSettings,
-        checkHidableSettings
-    ];
+    const columnChecks = [checkFilteringSettings, checkDisplaySettings, checkSortingSettings, checkHidableSettings];
 
     values.columns.forEach((column: ColumnsPreviewType, index) => {
         for (const check of columnChecks) {
@@ -28,33 +22,33 @@ export function check(values: DatagridPreviewProps): Problem[] {
 
 const columnPropPath = (prop: string, index: number): string => `columns/${index + 1}/${prop}`;
 
-const checkAssociationSettings = (
-    values: DatagridPreviewProps,
-    column: ColumnsPreviewType,
-    index: number
-): Problem | undefined => {
-    if (!values.columnsFilterable) {
-        return;
-    }
-
-    if (!column.filterAssociation) {
-        return;
-    }
-
-    if (column.filterCaptionType === "expression" && !column.filterAssociationOptionLabel) {
-        return {
-            property: columnPropPath("filterAssociationOptionLabel", index),
-            message: `A caption is required when using associations. Please set 'Option caption' property for column (${column.header})`
-        };
-    }
-
-    if (column.filterCaptionType === "attribute" && !column.filterAssociationOptionLabelAttr) {
-        return {
-            property: columnPropPath("filterAssociationOptionLabelAttr", index),
-            message: `A caption is required when using associations. Please set 'Option caption' property for column (${column.header})`
-        };
-    }
-};
+// const checkAssociationSettings = (
+//     values: DatagridPreviewProps,
+//     column: ColumnsPreviewType,
+//     index: number
+// ): Problem | undefined => {
+//     if (!values.columnsFilterable) {
+//         return;
+//     }
+
+//     if (!column.filterAssociation) {
+//         return;
+//     }
+
+//     if (column.filterCaptionType === "expression" && !column.filterAssociationOptionLabel) {
+//         return {
+//             property: columnPropPath("filterAssociationOptionLabel", index),
+//             message: `A caption is required when using associations. Please set 'Option caption' property for column (${column.header})`
+//         };
+//     }
+
+//     if (column.filterCaptionType === "attribute" && !column.filterAssociationOptionLabelAttr) {
+//         return {
+//             property: columnPropPath("filterAssociationOptionLabelAttr", index),
+//             message: `A caption is required when using associations. Please set 'Option caption' property for column (${column.header})`
+//         };
+//     }
+// };
 
 const checkFilteringSettings = (
     values: DatagridPreviewProps,
@@ -65,7 +59,7 @@ const checkFilteringSettings = (
         return;
     }
 
-    if (!column.attribute && !column.filterAssociation) {
+    if (!column.attribute) {
         return {
             property: columnPropPath("attribute", index),
             message: `An attribute or reference is required when filtering is enabled. Please select 'Attribute' or 'Reference' property for column (${column.header})`

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

@@ -1,5 +1,5 @@
+import { createContextWithStub, FilterAPI } from "@mendix/widget-plugin-filtering/context";
 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";
@@ -30,7 +30,7 @@ export class RootGridStore extends BaseControllerHost {
     exportProgressCtrl: ProgressStore;
     loaderCtrl: DerivedLoaderController;
     paginationCtrl: PaginationController;
-    customFilters: FilterObserver;
+    readonly autonomousFilterAPI: FilterAPI;
 
     private gate: Gate;
 
@@ -46,8 +46,12 @@ export class RootGridStore extends BaseControllerHost {
             filtersChannelName: `datagrid/${generateUUID()}`
         };
         const customFilterHost = new CustomFilterHost();
-        this.customFilters = customFilterHost;
         const query = new DatasourceController(this, { gate });
+        this.autonomousFilterAPI = createContextWithStub({
+            filterObserver: customFilterHost,
+            sharedInitFilter,
+            parentChannelName: this.staticInfo.filtersChannelName
+        });
         const columns = (this.columnsStore = new ColumnGroupStore(props, this.staticInfo, columnsInitFilter, {
             customFilterHost,
             sharedInitFilter

packages/shared/widget-plugin-filtering/src/context.ts

@@ -55,3 +55,17 @@ export function useFilterAPI(): Result<FilterAPI, APIError> {
 
 /** @deprecated This hook is renamed, use `useFilterAPI` instead. */
 export const useFilterContextValue = useFilterAPI;
+
+export function createContextWithStub(options: {
+    filterObserver: FilterObserver;
+    parentChannelName: string;
+    sharedInitFilter: Array<FilterCondition | undefined>;
+}): FilterAPI {
+    return {
+        version: 3,
+        parentChannelName: options.parentChannelName,
+        provider: value(PROVIDER_STUB),
+        filterObserver: options.filterObserver,
+        sharedInitFilter: options.sharedInitFilter
+    };
+}