feat: add attr check to widgets

Author: iobuhov

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

@@ -1,3 +1,4 @@
+import { withAttributeGuard } from "@mendix/widget-plugin-filtering/helpers/withAttributeGuard";
 import { withFilterAPI } from "@mendix/widget-plugin-filtering/helpers/withFilterAPI";
 import { withPreloader } from "@mendix/widget-plugin-platform/hoc/withPreloader";
 import { createElement, ReactElement } from "react";
@@ -11,7 +12,7 @@ const Container = withPreloader(DateFilterContainer, isLoadingDefaultValues);
 
 const FilterAuto = withParentProvidedDateStore(Container);
 
-const FilterLinked = withFilterAPI(withLinkedDateStore(Container));
+const FilterLinked = withAttributeGuard(withFilterAPI(withLinkedDateStore(Container)));
 
 export default function DatagridDateFilter(props: DatagridDateFilterContainerProps): ReactElement | null {
     if (props.attrChoice === "auto") {

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/components/AttrFilter.tsx

@@ -1,6 +1,7 @@
 import { EnumFilterContainer } from "@mendix/widget-plugin-dropdown-filter/containers/EnumFilterContainer";
 import { withFilterAPI } from "@mendix/widget-plugin-filtering/helpers/withFilterAPI";
 import { ReactElement, createElement } from "react";
+import { withAttrGuard } from "src/hocs/withAttrGuard";
 import { DatagridDropdownFilterContainerProps } from "../../typings/DatagridDropdownFilterProps";
 import { withLinkedEnumStore } from "../hocs/withLinkedEnumStore";
 import { withParentProvidedEnumStore } from "../hocs/withParentProvidedEnumStore";
@@ -16,7 +17,7 @@ export function AttrFilter(props: DatagridDropdownFilterContainerProps): ReactEl
 
 const AutoAttrFilter = withParentProvidedEnumStore(Connector);
 
-const LinkedAttrFilter = withFilterAPI(withLinkedEnumStore(Connector));
+const LinkedAttrFilter = withAttrGuard(withFilterAPI(withLinkedEnumStore(Connector)));
 
 function Connector(props: DatagridDropdownFilterContainerProps & EnumFilterProps): ReactElement {
     return (

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/components/RefFilter.tsx

@@ -1,8 +1,9 @@
+import { RefFilterContainer } from "@mendix/widget-plugin-dropdown-filter/containers/RefFilterContainer";
 import { createElement, ReactElement } from "react";
+import { withAttrGuard } from "src/hocs/withAttrGuard";
+import { DatagridDropdownFilterContainerProps } from "../../typings/DatagridDropdownFilterProps";
 import { withLinkedRefStore } from "../hocs/withLinkedRefStore";
-import { RefFilterContainer } from "@mendix/widget-plugin-dropdown-filter/containers/RefFilterContainer";
 import { RefFilterProps } from "./typings";
-import { DatagridDropdownFilterContainerProps } from "../../typings/DatagridDropdownFilterProps";
 
 function Connector(props: DatagridDropdownFilterContainerProps & RefFilterProps): ReactElement {
     return (
@@ -19,4 +20,4 @@ function Connector(props: DatagridDropdownFilterContainerProps & RefFilterProps)
     );
 }
 
-export const RefFilter = withLinkedRefStore(Connector);
+export const RefFilter = withAttrGuard(withLinkedRefStore(Connector));

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/hocs/withAttrGuard.tsx

@@ -0,0 +1,20 @@
+import { Alert } from "@mendix/widget-plugin-component-kit/Alert";
+import { FC, createElement } from "react";
+
+export function withAttrGuard<P extends { attr: { filterable: boolean } } | { refEntity: { filterable: boolean } }>(
+    Component: FC<P>
+): FC<P> {
+    return function AttrGuard(props) {
+        const meta = "attr" in props ? props.attr : props.refEntity;
+
+        if (!meta.filterable) {
+            return (
+                <Alert bootstrapStyle="danger">
+                    Only filterable attributes are allowed. The attributes in the current widget configuration is not
+                    filterable. Please change the widget configuration.
+                </Alert>
+            );
+        }
+        return <Component {...props} />;
+    };
+}

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

@@ -1,3 +1,4 @@
+import { withAttributeGuard } from "@mendix/widget-plugin-filtering/helpers/withAttributeGuard";
 import { withFilterAPI } from "@mendix/widget-plugin-filtering/helpers/withFilterAPI";
 import { withPreloader } from "@mendix/widget-plugin-platform/hoc/withPreloader";
 import { ReactElement, createElement } from "react";
@@ -11,7 +12,7 @@ const Container = withPreloader<DatagridNumberFilterContainerProps>(NumberFilter
 
 const FilterAuto = withParentProvidedNumberStore(Container);
 
-const FilterLinked = withFilterAPI(withLinkedNumberStore(Container));
+const FilterLinked = withAttributeGuard(withFilterAPI(withLinkedNumberStore(Container)));
 
 export default function DatagridNumberFilter(props: DatagridNumberFilterContainerProps): ReactElement {
     if (props.attrChoice === "auto") {

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

@@ -1,3 +1,4 @@
+import { withAttributeGuard } from "@mendix/widget-plugin-filtering/helpers/withAttributeGuard";
 import { withFilterAPI } from "@mendix/widget-plugin-filtering/helpers/withFilterAPI";
 import { withPreloader } from "@mendix/widget-plugin-platform/hoc/withPreloader";
 import { createElement, ReactElement } from "react";
@@ -11,7 +12,7 @@ const Container = withPreloader<DatagridTextFilterContainerProps>(TextFilterCont
 
 const FilterAuto = withParentProvidedStringStore(Container);
 
-const FilterLinked = withFilterAPI(withLinkedStringStore(Container));
+const FilterLinked = withAttributeGuard(withFilterAPI(withLinkedStringStore(Container)));
 
 export default function DatagridTextFilter(props: DatagridTextFilterContainerProps): ReactElement {
     if (props.attrChoice === "auto") {

packages/shared/widget-plugin-filtering/src/helpers/withAttributeGuard.tsx

@@ -0,0 +1,27 @@
+import { Alert } from "@mendix/widget-plugin-component-kit/Alert";
+import { FC, createElement, useMemo } from "react";
+
+interface RequiredProps {
+    attributes: Array<{
+        attribute: { filterable: boolean };
+    }>;
+}
+
+export function withAttributeGuard<P extends RequiredProps>(Component: FC<P>): FC<P> {
+    return function AttributesGuard(props) {
+        const isValid = useMemo(
+            () => props.attributes.every(({ attribute }) => attribute.filterable),
+            [props.attributes]
+        );
+
+        if (!isValid) {
+            return (
+                <Alert bootstrapStyle="danger">
+                    Only filterable attributes are allowed. One of the attributes in the current widget configuration is
+                    not filterable. Please change the widget configuration.
+                </Alert>
+            );
+        }
+        return <Component {...props} />;
+    };
+}