[WC-1716] Issue dg inf loop (#493)

Author: Illia Obukhau

packages/modules/data-widgets/package.json

@@ -1,7 +1,7 @@
 {
   "name": "data-widgets",
   "moduleName": "Data Widgets",
-  "version": "2.7.0",
+  "version": "2.7.1",
   "license": "Apache-2.0",
   "copyright": "© Mendix Technology BV 2023. All rights reserved.",
   "private": true,

packages/pluggableWidgets/datagrid-date-filter-web/CHANGELOG.md

@@ -6,6 +6,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   We fixed an issue with widget rendering and performance.
+
+### Breaking changes
+
+-   We introduce a breaking change that affects how widget is reacting on default value changes. Starting with this version, widget use the default value attribute only as an initial value, and any further changes to the default value attribute will be ignored.
+
 ## [2.4.2] - 2022-09-29
 
 ### Fixed

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

@@ -1,7 +1,7 @@
 {
   "name": "datagrid-date-filter-web",
   "widgetName": "DatagridDateFilter",
-  "version": "2.4.2",
+  "version": "2.5.0",
   "description": "",
   "copyright": "© Mendix Technology BV 2023. All rights reserved.",
   "private": true,

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

@@ -97,6 +97,10 @@ export default function DatagridDateFilter(props: DatagridDateFilterContainerPro
                     return <Alert bootstrapStyle="danger">{errorMessage}</Alert>;
                 }
 
+                if (isLoadingDefaultValues(props)) {
+                    return null;
+                }
+
                 return (
                     <FilterComponent
                         adjustable={props.adjustable}
@@ -245,3 +249,8 @@ function getFilterCondition(
             return lessThanOrEqual(filterAttribute, literal(new Date(addDays(dateValue, 1).getTime() - 1)));
     }
 }
+
+function isLoadingDefaultValues(props: DatagridDateFilterContainerProps): boolean {
+    const statusList = [props.defaultValue?.status, props.defaultStartDate?.status, props.defaultEndDate?.status];
+    return statusList.some(status => status === "loading");
+}

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

@@ -33,22 +33,6 @@ export function FilterComponent(props: FilterComponentProps): ReactElement {
     const [rangeValues, setRangeValues] = useState<RangeDateValue>([props.defaultStartDate, props.defaultEndDate]);
     const pickerRef = useRef<DatePickerComponent | null>(null);
 
-    useEffect(() => {
-        setValue(prev => {
-            if (prev?.toISOString() === props.defaultValue?.toISOString()) {
-                return prev;
-            }
-
-            return props.defaultValue;
-        });
-    }, [props.defaultValue]);
-
-    useEffect(() => {
-        if (props.defaultStartDate || props.defaultEndDate) {
-            setRangeValues([props.defaultStartDate, props.defaultEndDate]);
-        }
-    }, [props.defaultStartDate, props.defaultEndDate]);
-
     useEffect(() => {
         props.updateFilters?.(value, rangeValues, type);
     }, [value, rangeValues, type]);

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

@@ -102,17 +102,17 @@ describe("Date Filter", () => {
                     expect(screen.getByRole("textbox")).toHaveValue("01/01/2000");
                 });
 
-                it("sync value when defaultValue changes from undefined to date", async () => {
+                it("don't sync value when defaultValue changes from undefined to date", async () => {
                     // 946684800000 = 01.01.2000
                     const date = new Date(946684800000);
                     const { rerender } = render(<DatagridDateFilter {...commonProps} defaultValue={undefined} />);
                     expect(screen.getByRole("textbox")).toHaveValue("");
 
                     rerender(<DatagridDateFilter {...commonProps} defaultValue={dynamicValue<Date>(date)} />);
-                    expect(screen.getByRole("textbox")).toHaveValue("01/01/2000");
+                    expect(screen.getByRole("textbox")).toHaveValue("");
                 });
 
-                it("sync value when defaultValue changes from date to undefined", async () => {
+                it("don't sync value when defaultValue changes from date to undefined", async () => {
                     // 946684800000 = 01.01.2000
                     const date = new Date(946684800000);
                     const { rerender } = render(
@@ -121,7 +121,7 @@ describe("Date Filter", () => {
                     expect(screen.getByRole("textbox")).toHaveValue("01/01/2000");
 
                     rerender(<DatagridDateFilter {...commonProps} defaultValue={undefined} />);
-                    expect(screen.getByRole("textbox")).toHaveValue("");
+                    expect(screen.getByRole("textbox")).toHaveValue("01/01/2000");
                 });
             });
 

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

@@ -40,7 +40,7 @@ describe("Filter component", () => {
     });
 
     describe("with defaultValue", () => {
-        it("call updateFilters when defaultValue get new value", () => {
+        it("don't call updateFilters when defaultValue get new value", () => {
             const date = new Date(946684800000);
             const updateFilters = jest.fn();
             const { rerender } = render_fromTestingLibrary(
@@ -49,7 +49,7 @@ describe("Filter component", () => {
 
             // First time updateFilters is called on initial mount
             expect(updateFilters).toBeCalledTimes(1);
-            expect(updateFilters.mock.calls[0][0]).toBe(date);
+            expect(updateFilters).toHaveBeenLastCalledWith(date, [undefined, undefined], "equal");
 
             const nextValue = new Date(999999900000);
 
@@ -62,8 +62,8 @@ describe("Filter component", () => {
                 />
             );
 
-            expect(updateFilters).toBeCalledTimes(2);
-            expect(updateFilters.mock.calls[1][0]).toBe(nextValue);
+            expect(updateFilters).toBeCalledTimes(1);
+            expect(updateFilters).toHaveBeenLastCalledWith(date, [undefined, undefined], "equal");
         });
 
         it("don't call updateFilters when defaultValue get same value", () => {

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

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="DatagridDateFilter" version="2.4.2" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="DatagridDateFilter" version="2.5.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="DatagridDateFilter.xml" />
         </widgetFiles>

packages/pluggableWidgets/datagrid-dropdown-filter-web/CHANGELOG.md

@@ -6,6 +6,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   We fixed an issue with widget rendering and performance.
+
+### Breaking changes
+
+-   We introduce a breaking change that affects how widget is reacting on default value changes. Starting with this version, widget use the default value attribute only as an initial value, and any further changes to the default value attribute will be ignored.
+
 ## [2.3.0] - 2023-02-17
 
 ### Changed

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

@@ -1,7 +1,7 @@
 {
   "name": "datagrid-dropdown-filter-web",
   "widgetName": "DatagridDropdownFilter",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "",
   "copyright": "© Mendix Technology BV 2023. All rights reserved.",
   "private": true,

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.tsx

@@ -1,5 +1,5 @@
 import { useFilterContextValue } from "@mendix/pluggable-widgets-commons/components/web";
-import { createElement, ReactElement } from "react";
+import { createElement, Fragment, ReactElement } from "react";
 import { DatagridDropdownFilterContainerProps } from "../typings/DatagridDropdownFilterProps";
 import { EnumerationFilter } from "./components/EnumerationFilter";
 import { ErrorBox } from "./components/ErrorBox";
@@ -13,6 +13,10 @@ export default function DatagridDropdownFilter(props: DatagridDropdownFilterCont
         return <ErrorBox error={new OutOfProviderError()} />;
     }
 
+    if (props.defaultValue?.status === "loading") {
+        return <Fragment />;
+    }
+
     const Filter = context.value.associationProperties ? AssociationFilter : EnumerationFilter;
 
     return <Filter context={context.value} widgetProps={props} />;

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

@@ -64,6 +64,7 @@ export function FilterComponent(props: FilterComponentProps): ReactElement {
     const [selectedFilters, setSelectedFilters] = useState<FilterOption[]>([]);
     const [show, setShow] = useState(false);
     const [dropdownWidth, setDropdownWidth] = useState(0);
+    const { current: initialFilterValue } = useRef(defaultValue);
     const defaultValuesLoaded = useRef<boolean>(false);
 
     const componentRef = useRef<HTMLDivElement>(null);
@@ -108,8 +109,8 @@ export function FilterComponent(props: FilterComponentProps): ReactElement {
     useEffect(() => {
         if (!defaultValuesLoaded.current && options.length > 0) {
             if (multiSelect) {
-                if (defaultValue) {
-                    const initialOptions = defaultValue
+                if (initialFilterValue) {
+                    const initialOptions = initialFilterValue
                         .split(",")
                         .map(value => options.find(option => option.value === value))
                         .filter(Boolean) as FilterOption[];
@@ -121,7 +122,7 @@ export function FilterComponent(props: FilterComponentProps): ReactElement {
                 }
             } else {
                 // We want to add empty option caption
-                const initialOption = options.find(option => option.value === defaultValue) ?? options[0];
+                const initialOption = options.find(option => option.value === initialFilterValue) ?? options[0];
 
                 setValueInput(initialOption?.caption ?? "");
                 setSelectedFilters(prev => {
@@ -134,7 +135,7 @@ export function FilterComponent(props: FilterComponentProps): ReactElement {
             }
             defaultValuesLoaded.current = true;
         }
-    }, [defaultValue, emptyOptionCaption, multiSelect, options, setMultiSelectFilters]);
+    }, [initialFilterValue, emptyOptionCaption, multiSelect, options, setMultiSelectFilters]);
 
     useEffect(() => {
         const emptyOption = multiSelect
@@ -155,7 +156,7 @@ export function FilterComponent(props: FilterComponentProps): ReactElement {
 
         // Resets the option to reload default values
         defaultValuesLoaded.current = false;
-    }, [emptyOptionCaption, multiSelect, optionsProp, defaultValue]);
+    }, [emptyOptionCaption, multiSelect, optionsProp, initialFilterValue]);
 
     // This side effect meant to sync filter value with parents
     // But, because updateFilters is might be "unstable" function

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/components/__tests__/DataGridDropdownFilter.spec.tsx

@@ -109,7 +109,7 @@ describe("Dropdown Filter", () => {
                     expect(screen.getByRole("textbox")).toHaveValue("enum_value_1");
                 });
 
-                it("sync defaultValue with state when defaultValue changes from undefined to string", async () => {
+                it("don't sync defaultValue with state when defaultValue changes from undefined to string", async () => {
                     const { rerender } = render(
                         <DatagridDropdownFilter
                             {...commonProps}
@@ -145,11 +145,11 @@ describe("Dropdown Filter", () => {
                     );
 
                     await waitFor(() => {
-                        expect(screen.getByRole("textbox")).toHaveValue("enum_value_1");
+                        expect(screen.getByRole("textbox")).toHaveValue("");
                     });
                 });
 
-                it("sync defaultValue with state when defaultValue changes from string to undefined", async () => {
+                it("don't sync defaultValue with state when defaultValue changes from string to undefined", async () => {
                     mockCtx(["xyz", "abc"]);
                     const { rerender } = render(
                         <DatagridDropdownFilter
@@ -184,7 +184,7 @@ describe("Dropdown Filter", () => {
                     );
 
                     await waitFor(() => {
-                        expect(screen.getByRole("textbox")).toHaveValue("");
+                        expect(screen.getByRole("textbox")).toHaveValue("xyz");
                     });
                 });
             });

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="DatagridDropdownFilter" version="2.3.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="DatagridDropdownFilter" version="2.4.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="DatagridDropdownFilter.xml" />
         </widgetFiles>

packages/pluggableWidgets/datagrid-number-filter-web/CHANGELOG.md

@@ -6,6 +6,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   We fixed an issue with widget rendering and performance.
+
+### Breaking changes
+
+-   We introduce a breaking change that affects how widget is reacting on default value changes. Starting with this version, widget use the default value attribute only as an initial value, and any further changes to the default value attribute will be ignored.
+
 ## [2.3.1] - 2022-08-11
 
 ### Fixed

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

@@ -1,7 +1,7 @@
 {
   "name": "datagrid-number-filter-web",
   "widgetName": "DatagridNumberFilter",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "description": "",
   "copyright": "© Mendix Technology BV 2023. All rights reserved.",
   "private": true,

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

@@ -8,8 +8,8 @@ export function preview(props: DatagridNumberFilterPreviewProps): ReactElement {
         <FilterComponent
             adjustable={props.adjustable}
             className={props.className}
-            defaultFilter={props.defaultFilter}
-            delay={props.delay ?? 500}
+            initialFilterType={props.defaultFilter}
+            inputChangeDelay={props.delay ?? 500}
             placeholder={props.placeholder}
             screenReaderButtonCaption={props.screenReaderButtonCaption}
             screenReaderInputCaption={props.screenReaderInputCaption}

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

@@ -1,6 +1,5 @@
 import { createElement, ReactElement, useRef } from "react";
 import { DatagridNumberFilterContainerProps, DefaultFilterEnum } from "../typings/DatagridNumberFilterProps";
-
 import { FilterComponent } from "./components/FilterComponent";
 import { Alert, FilterType, getFilterDispatcher, generateUUID } from "@mendix/pluggable-widgets-commons/components/web";
 import { Big } from "big.js";
@@ -75,26 +74,26 @@ export default function DatagridNumberFilter(props: DatagridNumberFilterContaine
                     return <Alert bootstrapStyle="danger">{errorMessage}</Alert>;
                 }
 
+                if (props.defaultValue?.status === "loading") {
+                    return null;
+                }
+
                 return (
                     <FilterComponent
                         adjustable={props.adjustable}
                         className={props.class}
-                        defaultFilter={defaultFilter?.type ?? props.defaultFilter}
-                        delay={props.delay}
+                        initialFilterType={defaultFilter?.type ?? props.defaultFilter}
+                        initialFilterValue={defaultFilter?.value ?? props.defaultValue?.value}
+                        inputChangeDelay={props.delay}
                         id={id.current}
                         placeholder={props.placeholder?.value}
                         screenReaderButtonCaption={props.screenReaderButtonCaption?.value}
                         screenReaderInputCaption={props.screenReaderInputCaption?.value}
                         styles={props.style}
                         tabIndex={props.tabIndex}
                         updateFilters={(value: Big | undefined, type: DefaultFilterEnum): void => {
-                            if (
-                                (value && !props.valueAttribute?.value?.eq(value)) ||
-                                value !== props.valueAttribute?.value
-                            ) {
-                                props.valueAttribute?.setValue(value);
-                                props.onChange?.execute();
-                            }
+                            props.valueAttribute?.setValue(value);
+                            props.onChange?.execute();
                             const conditions = attributes
                                 ?.map(attribute => getFilterCondition(attribute, value, type))
                                 .filter((filter): filter is FilterCondition => filter !== undefined);
@@ -104,7 +103,6 @@ export default function DatagridNumberFilter(props: DatagridNumberFilterContaine
                                 filterType: FilterType.NUMBER
                             });
                         }}
-                        value={defaultFilter?.value ?? props.defaultValue?.value}
                     />
                 );
             }}