refactor: extract logic to grid plugin

Author: iobuhov

packages/shared/widget-plugin-grid/src/core/Datasource.service.ts

@@ -124,12 +124,12 @@ export class DatasourceService implements SetupComponent, QueryService {
                 // Subscribe to items to reschedule timer on items change
                 // eslint-disable-next-line @typescript-eslint/no-unused-expressions
                 this.items;
-                clearInterval(timerId);
+                clearTimeout(timerId);
                 timerId = window.setTimeout(() => this.backgroundRefresh(), this.refreshIntervalMs);
             });
             add(() => {
                 clearAutorun();
-                clearInterval(timerId);
+                clearTimeout(timerId);
             });
         }
 

packages/shared/widget-plugin-grid/src/core/__tests__/emptyStateWidgetsAtom.spec.ts

@@ -0,0 +1,80 @@
+import { DerivedGate, GateProvider } from "@mendix/widget-plugin-mobx-kit/main";
+import { autorun, computed, observable } from "mobx";
+import { ReactNode } from "react";
+import "../../utils/mobx-test-setup.js";
+import { emptyStateWidgetsAtom } from "../models/empty-state.model.js";
+
+describe("emptyStateWidgetsAtom", () => {
+    it("returns null when emptyPlaceholder is undefined", () => {
+        const gate = new DerivedGate({ props: { emptyPlaceholder: undefined } });
+        const itemsCount = computed(() => 0);
+        const atom = emptyStateWidgetsAtom(gate, itemsCount);
+
+        expect(atom.get()).toBe(null);
+    });
+
+    it("returns null when items count is greater than 0", () => {
+        const gate = new DerivedGate({ props: { emptyPlaceholder: "Empty state message" } });
+        const itemsCount = computed(() => 5);
+        const atom = emptyStateWidgetsAtom(gate, itemsCount);
+
+        expect(atom.get()).toBe(null);
+    });
+
+    it("returns null when items count is -1 (loading state)", () => {
+        const gate = new DerivedGate({ props: { emptyPlaceholder: "Empty state message" } });
+        const itemsCount = computed(() => -1);
+        const atom = emptyStateWidgetsAtom(gate, itemsCount);
+
+        expect(atom.get()).toBe(null);
+    });
+
+    it("returns emptyPlaceholder when both emptyPlaceholder is defined and itemsCount is exactly 0", () => {
+        const message = "Empty state message";
+        const gate = new DerivedGate({ props: { emptyPlaceholder: message } });
+        const itemsCount = computed(() => 0);
+        const atom = emptyStateWidgetsAtom(gate, itemsCount);
+
+        expect(atom.get()).toBe(message);
+    });
+
+    describe("reactive behavior", () => {
+        it("reacts to changes in both emptyPlaceholder and itemsCount", () => {
+            const gateProvider = new GateProvider({
+                emptyPlaceholder: undefined as ReactNode
+            });
+            const itemCountBox = observable.box(5);
+            const atom = emptyStateWidgetsAtom(gateProvider.gate, itemCountBox);
+            const values: ReactNode[] = [];
+
+            const dispose = autorun(() => values.push(atom.get()));
+
+            // Initial state: no placeholder, items > 0 → null
+            expect(values.at(-1)).toBe(null);
+
+            // Add placeholder but items count > 0 → still null
+            gateProvider.setProps({ emptyPlaceholder: "Empty message" });
+            expect(values.at(-1)).toBe(null);
+
+            // Set items count to 0 → should show placeholder
+            itemCountBox.set(0);
+            expect(values.at(-1)).toBe("Empty message");
+
+            // Remove placeholder while count is 0 → null
+            gateProvider.setProps({ emptyPlaceholder: undefined });
+            expect(values.at(-1)).toBe(null);
+
+            // Add different placeholder back with count still 0 → show new placeholder
+            gateProvider.setProps({ emptyPlaceholder: "No data available" });
+            expect(values.at(-1)).toBe("No data available");
+
+            // Increase count while placeholder exists → null
+            itemCountBox.set(3);
+            expect(values.at(-1)).toBe(null);
+
+            expect(values).toEqual([null, "Empty message", null, "No data available", null]);
+
+            dispose();
+        });
+    });
+});

packages/shared/widget-plugin-grid/src/core/__tests__/hasMoreItemsAtom.spec.ts

@@ -0,0 +1,25 @@
+import { GateProvider } from "@mendix/widget-plugin-mobx-kit/main";
+import { autorun } from "mobx";
+import { hasMoreItemsAtom } from "../models/datasource.model.js";
+
+describe("hasMoreItemsAtom", () => {
+    it("reacts to datasource hasMoreItems changes", () => {
+        const gateProvider = new GateProvider<{ datasource: { hasMoreItems?: boolean } }>({
+            datasource: { hasMoreItems: undefined }
+        });
+        const atom = hasMoreItemsAtom(gateProvider.gate);
+        const values: Array<boolean | undefined> = [];
+
+        autorun(() => values.push(atom.get()));
+
+        expect(values.at(0)).toBe(undefined);
+
+        gateProvider.setProps({ datasource: { hasMoreItems: true } });
+        gateProvider.setProps({ datasource: { hasMoreItems: false } });
+        gateProvider.setProps({ datasource: { hasMoreItems: true } });
+        gateProvider.setProps({ datasource: { hasMoreItems: undefined } });
+        gateProvider.setProps({ datasource: { hasMoreItems: false } });
+
+        expect(values).toEqual([undefined, true, false, true, undefined, false]);
+    });
+});

packages/shared/widget-plugin-grid/src/core/__tests__/isAllItemsPresentAtom.spec.ts

@@ -0,0 +1,68 @@
+import { autorun, computed, observable } from "mobx";
+import { isAllItemsPresent, isAllItemsPresentAtom } from "../models/datasource.model.js";
+
+import "../../utils/mobx-test-setup.js";
+
+describe("isAllItemsPresent", () => {
+    it("returns true when offset is 0 and hasMoreItems is false", () => {
+        expect(isAllItemsPresent(0, false)).toBe(true);
+    });
+
+    it("returns false when offset is 0 and hasMoreItems is true", () => {
+        expect(isAllItemsPresent(0, true)).toBe(false);
+    });
+
+    it("returns false when offset is 0 and hasMoreItems is undefined", () => {
+        expect(isAllItemsPresent(0, undefined)).toBe(false);
+    });
+
+    it("returns false when offset is greater than 0 and hasMoreItems is false", () => {
+        expect(isAllItemsPresent(10, false)).toBe(false);
+    });
+
+    it("returns false when offset is greater than 0 and hasMoreItems is true", () => {
+        expect(isAllItemsPresent(10, true)).toBe(false);
+    });
+
+    it("returns false when offset is greater than 0 and hasMoreItems is undefined", () => {
+        expect(isAllItemsPresent(10, undefined)).toBe(false);
+    });
+
+    it("returns false when offset is negative and hasMoreItems is false", () => {
+        expect(isAllItemsPresent(-1, false)).toBe(false);
+    });
+});
+
+describe("isAllItemsPresentAtom", () => {
+    it("reacts to changes in offset and hasMoreItems", () => {
+        const offsetState = observable.box(0);
+        const hasMoreItemsState = observable.box<boolean | undefined>(false);
+
+        const offsetComputed = computed(() => offsetState.get());
+        const hasMoreItemsComputed = computed(() => hasMoreItemsState.get());
+
+        const atom = isAllItemsPresentAtom(offsetComputed, hasMoreItemsComputed);
+        const values: boolean[] = [];
+
+        autorun(() => values.push(atom.get()));
+
+        expect(values.at(0)).toBe(true);
+
+        hasMoreItemsState.set(true);
+        expect(atom.get()).toBe(false);
+
+        offsetState.set(10);
+        expect(atom.get()).toBe(false);
+
+        hasMoreItemsState.set(false);
+        expect(atom.get()).toBe(false);
+
+        offsetState.set(0);
+        expect(atom.get()).toBe(true);
+
+        hasMoreItemsState.set(undefined);
+        expect(atom.get()).toBe(false);
+
+        expect(values).toEqual([true, false, true, false]);
+    });
+});

packages/shared/widget-plugin-grid/src/core/__tests__/isAllItemsSelected.spec.ts

@@ -0,0 +1,122 @@
+import { computed, configure, observable } from "mobx";
+import { isAllItemsSelected, isAllItemsSelectedAtom } from "../models/selection.model.js";
+
+describe("isAllItemsSelected", () => {
+    describe("when selectedCount is -1 (not in multi-selection mode)", () => {
+        it("returns false regardless of other parameters", () => {
+            expect(isAllItemsSelected(-1, 10, 100, true)).toBe(false);
+            expect(isAllItemsSelected(-1, 0, 0, true)).toBe(false);
+            expect(isAllItemsSelected(-1, 10, 100, false)).toBe(false);
+        });
+    });
+
+    describe("when totalCount is -1 and isAllItemsPresent is false", () => {
+        it("returns false even when selectedCount equals itemCount", () => {
+            expect(isAllItemsSelected(50, 50, -1, false)).toBe(false);
+        });
+
+        it("returns false when selectedCount is less than itemCount", () => {
+            expect(isAllItemsSelected(25, 50, -1, false)).toBe(false);
+        });
+
+        it("returns false when selectedCount is greater than itemCount", () => {
+            expect(isAllItemsSelected(75, 50, -1, false)).toBe(false);
+        });
+
+        it("returns false even when both selectedCount and itemCount are 0", () => {
+            expect(isAllItemsSelected(0, 0, -1, false)).toBe(false);
+        });
+    });
+
+    describe("edge cases", () => {
+        it("returns false when selectedCount is 0 and there are items", () => {
+            expect(isAllItemsSelected(0, 10, 100, true)).toBe(false);
+        });
+
+        it("handles case where itemCount exceeds totalCount (data inconsistency)", () => {
+            expect(isAllItemsSelected(100, 150, 100, true)).toBe(true);
+        });
+
+        it("handles negative itemCount edge case", () => {
+            expect(isAllItemsSelected(5, -1, 0, true)).toBe(false);
+        });
+
+        it("handles negative totalCount edge case", () => {
+            expect(isAllItemsSelected(5, 10, -1, true)).toBe(false);
+        });
+    });
+});
+
+describe("isAllItemsSelectedAtom", () => {
+    configure({
+        enforceActions: "never"
+    });
+
+    it("returns true when all items are selected based on totalCount", () => {
+        const selectedCount = computed(() => 100);
+        const itemCount = computed(() => 50);
+        const totalCount = computed(() => 100);
+        const isAllItemsPresent = computed(() => true);
+
+        const atom = isAllItemsSelectedAtom(selectedCount, itemCount, totalCount, isAllItemsPresent);
+        expect(atom.get()).toBe(true);
+    });
+
+    it("returns false when selectedCount is less than totalCount", () => {
+        const selectedCount = computed(() => 50);
+        const itemCount = computed(() => 50);
+        const totalCount = computed(() => 100);
+        const isAllItemsPresent = computed(() => true);
+
+        const atom = isAllItemsSelectedAtom(selectedCount, itemCount, totalCount, isAllItemsPresent);
+        expect(atom.get()).toBe(false);
+    });
+
+    it("returns true when all items selected with isAllItemsPresent", () => {
+        const selectedCount = computed(() => 50);
+        const itemCount = computed(() => 50);
+        const totalCount = computed(() => 0);
+        const isAllItemsPresent = computed(() => true);
+
+        const atom = isAllItemsSelectedAtom(selectedCount, itemCount, totalCount, isAllItemsPresent);
+        expect(atom.get()).toBe(true);
+    });
+
+    it("returns false when selectedCount is -1", () => {
+        const selectedCount = computed(() => -1);
+        const itemCount = computed(() => 10);
+        const totalCount = computed(() => 100);
+        const isAllItemsPresent = computed(() => true);
+
+        const atom = isAllItemsSelectedAtom(selectedCount, itemCount, totalCount, isAllItemsPresent);
+        expect(atom.get()).toBe(false);
+    });
+
+    it("updates reactively when selectedCount changes", () => {
+        const selectedCountBox = observable.box(50);
+        const itemCount = computed(() => 50);
+        const totalCount = computed(() => 100);
+        const isAllItemsPresent = computed(() => true);
+
+        const atom = isAllItemsSelectedAtom(selectedCountBox, itemCount, totalCount, isAllItemsPresent);
+
+        expect(atom.get()).toBe(false);
+
+        selectedCountBox.set(100);
+        expect(atom.get()).toBe(true);
+    });
+
+    it("updates reactively when totalCount changes", () => {
+        const totalCountBox = observable.box(100);
+        const selectedCount = computed(() => 50);
+        const itemCount = computed(() => 50);
+        const isAllItemsPresent = computed(() => true);
+
+        const atom = isAllItemsSelectedAtom(selectedCount, itemCount, totalCountBox, isAllItemsPresent);
+
+        expect(atom.get()).toBe(false);
+
+        totalCountBox.set(50);
+        expect(atom.get()).toBe(true);
+    });
+});

packages/shared/widget-plugin-grid/src/core/__tests__/isCurrentPageSelectedAtom.spec.ts

@@ -0,0 +1,77 @@
+import { configure, observable } from "mobx";
+import { isCurrentPageSelectedAtom } from "../models/selection.model.js";
+
+describe("isCurrentPageSelectedAtom", () => {
+    configure({
+        enforceActions: "never"
+    });
+
+    it("returns true when all current page items are selected", () => {
+        const gate = observable({
+            props: {
+                itemSelection: { type: "Multi" as const, selection: [{ id: "1" }, { id: "2" }] },
+                datasource: { items: [{ id: "1" }, { id: "2" }] }
+            }
+        });
+        const atom = isCurrentPageSelectedAtom(gate);
+        expect(atom.get()).toBe(true);
+    });
+
+    it("returns false when only some page items are selected", () => {
+        const gate = observable({
+            props: {
+                itemSelection: { type: "Multi" as const, selection: [{ id: "1" }] },
+                datasource: { items: [{ id: "1" }, { id: "2" }] }
+            }
+        });
+        const atom = isCurrentPageSelectedAtom(gate);
+        expect(atom.get()).toBe(false);
+    });
+
+    it("returns false when selection type is Single", () => {
+        const gate = observable({
+            props: {
+                itemSelection: { type: "Single" as const },
+                datasource: { items: [{ id: "1" }] }
+            }
+        });
+        const atom = isCurrentPageSelectedAtom(gate);
+        expect(atom.get()).toBe(false);
+    });
+
+    it("returns false when itemSelection is undefined", () => {
+        const gate = observable({
+            props: {
+                datasource: { items: [{ id: "1" }] }
+            }
+        });
+        const atom = isCurrentPageSelectedAtom(gate);
+        expect(atom.get()).toBe(false);
+    });
+
+    it("returns false when there are no items", () => {
+        const gate = observable({
+            props: {
+                itemSelection: { type: "Multi" as const, selection: [] },
+                datasource: { items: [] }
+            }
+        });
+        const atom = isCurrentPageSelectedAtom(gate);
+        expect(atom.get()).toBe(false);
+    });
+
+    it("updates reactively when selection changes", () => {
+        const gate = observable({
+            props: {
+                itemSelection: { type: "Multi" as const, selection: [{ id: "1" }] },
+                datasource: { items: [{ id: "1" }, { id: "2" }] }
+            }
+        });
+        const atom = isCurrentPageSelectedAtom(gate);
+
+        expect(atom.get()).toBe(false);
+
+        gate.props.itemSelection.selection.push({ id: "2" });
+        expect(atom.get()).toBe(true);
+    });
+});