Data widgets v3.0 (#1496)

Author: iobuhov

.github/workflows/BuildJobs.yml

@@ -98,7 +98,7 @@ jobs:
         strategy:
             matrix:
                 os: [ubuntu-latest, windows-latest]
-                target: [build, release]
+                target: [release]
 
         steps:
             - name: Checkout

automation/run-e2e/lib/dev.mjs

@@ -14,10 +14,12 @@ export async function dev() {
 
     const parseArgsOptions = {
         string: ["browser"],
-        boolean: ["with-preps"],
+        boolean: ["with-preps", "update-project", "setup-project"],
         default: {
             browser: "chromium",
-            "with-preps": false
+            "with-preps": false,
+            "update-project": true,
+            "setup-project": false
         },
         configuration: {
             // https://github.com/yargs/yargs-parser#boolean-negation
@@ -33,9 +35,11 @@ export async function dev() {
     process.env.PATH += `${delimiter}${packageBinariesPath}`;
     const options = parseArgs(process.argv.slice(2), parseArgsOptions);
 
-    if (options.withPreps) {
+    if (options.withPreps || options.setupProject) {
         // Download test project from github
         await setupTestProject();
+    }
+    if (options.withPreps || options.updateProject) {
         // Run update project hook
         await updateTestProject();
 
@@ -51,12 +55,10 @@ export async function dev() {
 
         await enquirer.prompt({
             type: "confirm",
-            name: "__ingore__",
+            name: "__ignore__",
             result: () => "continue",
             message: "Press Enter to continue"
         });
-    } else {
-        console.log(c.yellow("Skip preparations"));
     }
 
     const url = process.env.URL ?? "http://127.0.0.1:8080";

packages/modules/data-widgets/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Breaking changes
+
+- We removing grid wide filtering in favor of new, in widget, configuration for more flexible filtering.
+
 ## [2.32.1] DataWidgets - 2025-05-28
 
 ### [2.30.6] Datagrid

packages/modules/data-widgets/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/data-widgets",
     "moduleName": "Data Widgets",
-    "version": "2.32.1",
+    "version": "3.0.0",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "license": "Apache-2.0",
     "private": true,

packages/pluggableWidgets/accessibility-helper-web/package.json

@@ -40,6 +40,9 @@
         "update-changelog": "rui-update-changelog-widget",
         "verify": "rui-verify-package-format"
     },
+    "dependencies": {
+        "@mendix/widget-plugin-component-kit": "workspace:*"
+    },
     "devDependencies": {
         "@mendix/automation-utils": "workspace:*",
         "@mendix/eslint-config-web-widgets": "workspace:*",

packages/pluggableWidgets/area-chart-web/package.json

@@ -39,6 +39,7 @@
     },
     "dependencies": {
         "@mendix/shared-charts": "workspace:*",
+        "@mendix/widget-plugin-component-kit": "workspace:*",
         "classnames": "^2.3.2",
         "plotly.js-dist-min": "^3.0.0"
     },

packages/pluggableWidgets/badge-button-web/package.json

@@ -42,6 +42,7 @@
         "verify": "rui-verify-package-format"
     },
     "dependencies": {
+        "@mendix/widget-plugin-component-kit": "workspace:*",
         "classnames": "^2.3.2"
     },
     "devDependencies": {

packages/pluggableWidgets/badge-web/package.json

@@ -42,6 +42,7 @@
         "verify": "rui-verify-package-format"
     },
     "dependencies": {
+        "@mendix/widget-plugin-component-kit": "workspace:*",
         "classnames": "^2.3.2"
     },
     "devDependencies": {

packages/pluggableWidgets/bar-chart-web/package.json

@@ -39,6 +39,7 @@
     },
     "dependencies": {
         "@mendix/shared-charts": "workspace:*",
+        "@mendix/widget-plugin-component-kit": "workspace:*",
         "classnames": "^2.3.2",
         "plotly.js-dist-min": "^3.0.0"
     },

packages/pluggableWidgets/bubble-chart-web/package.json

@@ -39,6 +39,7 @@
     },
     "dependencies": {
         "@mendix/shared-charts": "workspace:*",
+        "@mendix/widget-plugin-component-kit": "workspace:*",
         "classnames": "^2.3.2",
         "plotly.js-dist-min": "^3.0.0"
     },

packages/pluggableWidgets/carousel-web/package.json

@@ -42,6 +42,7 @@
         "verify": "rui-verify-package-format"
     },
     "dependencies": {
+        "@mendix/widget-plugin-component-kit": "workspace:*",
         "@types/react-test-renderer": "^18.0.7",
         "classnames": "^2.3.2",
         "react-test-renderer": "^18.2.0",

packages/pluggableWidgets/charts-web/package.json

@@ -58,7 +58,9 @@
         "@mendix/heatmap-chart-web": "workspace:*",
         "@mendix/line-chart-web": "workspace:*",
         "@mendix/pie-doughnut-chart-web": "workspace:*",
-        "@mendix/time-series-chart-web": "workspace:*"
+        "@mendix/time-series-chart-web": "workspace:*",
+        "@mendix/widget-plugin-component-kit": "workspace:*",
+        "@mendix/widget-plugin-platform": "workspace:*"
     },
     "devDependencies": {
         "@mendix/automation-utils": "workspace:*",

packages/pluggableWidgets/column-chart-web/package.json

@@ -41,6 +41,7 @@
     },
     "dependencies": {
         "@mendix/shared-charts": "workspace:*",
+        "@mendix/widget-plugin-component-kit": "workspace:*",
         "classnames": "^2.3.2",
         "plotly.js-dist-min": "^3.0.0"
     },

packages/pluggableWidgets/custom-chart-web/package.json

@@ -45,7 +45,9 @@
     },
     "dependencies": {
         "@mendix/shared-charts": "workspace:*",
+        "@mendix/widget-plugin-component-kit": "workspace:*",
         "@mendix/widget-plugin-mobx-kit": "workspace:*",
+        "@mendix/widget-plugin-platform": "workspace:*",
         "classnames": "^2.3.2",
         "plotly.js-dist-min": "^3.0.0"
     },

packages/pluggableWidgets/datagrid-date-filter-web/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/datagrid-date-filter-web",
     "widgetName": "DatagridDateFilter",
-    "version": "2.11.3",
+    "version": "3.0.0",
     "description": "",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "license": "Apache-2.0",
@@ -23,7 +23,7 @@
     },
     "testProject": {
         "githubUrl": "https://github.com/mendix/testProjects",
-        "branchName": "datagrid-date-filter-web/main"
+        "branchName": "datagrid-date-filter-web/data-widgets-3.0"
     },
     "scripts": {
         "build": "pluggable-widgets-tools build:ts",

packages/pluggableWidgets/datagrid-date-filter-web/src/DatagridDateFilter.editorConfig.ts

@@ -1,3 +1,4 @@
+import { hidePropertiesIn, hidePropertyIn, Properties } from "@mendix/pluggable-widgets-tools";
 import {
     betweenIcon,
     betweenIconDark,
@@ -23,22 +24,23 @@ import {
 import {
     ContainerProps,
     ImageProps,
+    structurePreviewPalette,
     StructurePreviewProps,
-    text,
-    structurePreviewPalette
+    text
 } from "@mendix/widget-plugin-platform/preview/structure-preview-api";
-import { hidePropertiesIn, hidePropertyIn, Properties } from "@mendix/pluggable-widgets-tools";
 
 import { DatagridDateFilterPreviewProps, DefaultFilterEnum } from "../typings/DatagridDateFilterProps";
 
-export function getProperties(
-    values: DatagridDateFilterPreviewProps,
-    defaultProperties: Properties,
-    platform: "web" | "desktop"
-): Properties {
+export function getProperties(values: DatagridDateFilterPreviewProps, defaultProperties: Properties): Properties {
     if (!values.adjustable) {
         hidePropertyIn(defaultProperties, values, "screenReaderButtonCaption");
     }
+
+    if (values.attrChoice === "auto") {
+        hidePropertyIn(defaultProperties, values, "attributes");
+        hidePropertyIn(defaultProperties, {} as { linkedDs: unknown }, "linkedDs");
+    }
+
     if (values.defaultFilter !== "between") {
         hidePropertiesIn(defaultProperties, values, [
             "defaultStartDate",
@@ -49,13 +51,7 @@ export function getProperties(
     } else {
         hidePropertiesIn(defaultProperties, values, ["defaultValue", "valueAttribute"]);
     }
-    if (platform === "web") {
-        if (!values.advanced) {
-            hidePropertiesIn(defaultProperties, values, ["onChange", "valueAttribute"]);
-        }
-    } else {
-        hidePropertyIn(defaultProperties, values, "advanced");
-    }
+
     return defaultProperties;
 }
 

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

@@ -1,13 +1,22 @@
+import { withFilterAPI } from "@mendix/widget-plugin-filtering/helpers/withFilterAPI";
 import { withPreloader } from "@mendix/widget-plugin-platform/hoc/withPreloader";
 import { createElement, ReactElement } from "react";
 import { DatagridDateFilterContainerProps } from "../typings/DatagridDateFilterProps";
-import { Container } from "./components/DateFilterContainer";
-import { withDateFilterAPI } from "./hocs/withDateFilterAPI";
+import { DateFilterContainer } from "./components/DateFilterContainer";
+import { withLinkedDateStore } from "./hocs/withLinkedDateStore";
+import { withParentProvidedDateStore } from "./hocs/withParentProvidedDateStore";
 import { isLoadingDefaultValues } from "./utils/widget-utils";
 
-const container = withPreloader(Container, isLoadingDefaultValues);
-const Widget = withDateFilterAPI(container);
+const Container = withPreloader(DateFilterContainer, isLoadingDefaultValues);
+
+const FilterAuto = withParentProvidedDateStore(Container);
+
+const FilterLinked = withFilterAPI(withLinkedDateStore(Container));
 
 export default function DatagridDateFilter(props: DatagridDateFilterContainerProps): ReactElement | null {
-    return <Widget {...props} />;
+    if (props.attrChoice === "auto") {
+        return <FilterAuto {...props} />;
+    }
+
+    return <FilterLinked {...props} />;
 }

packages/pluggableWidgets/datagrid-date-filter-web/src/DatagridDateFilter.xml

@@ -8,9 +8,32 @@
     <properties>
         <propertyGroup caption="General">
             <propertyGroup caption="General">
-                <property key="advanced" type="boolean" defaultValue="false">
-                    <caption>Enable advanced options</caption>
+                <property key="attrChoice" type="enumeration" defaultValue="auto">
+                    <caption>Filter attributes</caption>
                     <description />
+                    <enumerationValues>
+                        <enumerationValue key="auto">Auto</enumerationValue>
+                        <enumerationValue key="linked">Custom</enumerationValue>
+                    </enumerationValues>
+                </property>
+                <property key="linkedDs" type="datasource" isLinked="true" isList="true">
+                    <caption>Datasource to Filter</caption>
+                    <description />
+                </property>
+                <property key="attributes" type="object" isList="true" required="false">
+                    <caption>Attributes</caption>
+                    <description>Select the attributes that the end-user may use for filtering.</description>
+                    <properties>
+                        <propertyGroup caption="General">
+                            <property key="attribute" type="attribute" dataSource="../linkedDs" isMetaData="true" required="true">
+                                <caption>Attribute</caption>
+                                <description />
+                                <attributeTypes>
+                                    <attributeType name="DateTime" />
+                                </attributeTypes>
+                            </property>
+                        </propertyGroup>
+                    </properties>
                 </property>
                 <property key="defaultValue" type="expression" required="false">
                     <caption>Default value</caption>

packages/pluggableWidgets/datagrid-date-filter-web/src/components/DateFilterContainer.tsx

@@ -12,7 +12,7 @@ interface ContainerProps extends DatagridDateFilterContainerProps {
     parentChannelName?: string;
 }
 
-export const Container: (props: ContainerProps) => React.ReactElement = observer(function Container(props) {
+export const DateFilterContainer: (props: ContainerProps) => React.ReactElement = observer(function Container(props) {
     const staticProps = useSetup({
         defaultEndValue: props.defaultEndDate?.value,
         defaultFilter: props.defaultFilter,