[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,