refactor: change flags

Author: iobuhov

packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx

@@ -1,22 +1,22 @@
+import { useOnResetFiltersEvent } from "@mendix/widget-plugin-external-events/hooks";
+import { useClickActionHelper } from "@mendix/widget-plugin-grid/helpers/ClickActionHelper";
+import { useFocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/useFocusTargetController";
 import { useSelectionHelper } from "@mendix/widget-plugin-grid/selection";
 import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
+import { observer } from "mobx-react-lite";
 import { ReactElement, ReactNode, createElement, useCallback, useMemo } from "react";
 import { DatagridContainerProps } from "../typings/DatagridProps";
 import { Cell } from "./components/Cell";
 import { Widget } from "./components/Widget";
 import { WidgetHeaderContext } from "./components/WidgetHeaderContext";
-import { useSelectActionHelper } from "./helpers/SelectActionHelper";
-import { useClickActionHelper } from "@mendix/widget-plugin-grid/helpers/ClickActionHelper";
+import { ProgressStore } from "./features/data-export/ProgressStore";
+import { useDataExport } from "./features/data-export/useDataExport";
 import { useCellEventsController } from "./features/row-interaction/CellEventsController";
 import { useCheckboxEventsController } from "./features/row-interaction/CheckboxEventsController";
-import { useFocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/useFocusTargetController";
-import { useOnResetFiltersEvent } from "@mendix/widget-plugin-external-events/hooks";
+import { useSelectActionHelper } from "./helpers/SelectActionHelper";
 import { IColumnGroupStore } from "./helpers/state/ColumnGroupStore";
-import { observer } from "mobx-react-lite";
 import { RootGridStore } from "./helpers/state/RootGridStore";
 import { useRootStore } from "./helpers/state/useRootStore";
-import { useDataExport } from "./features/data-export/useDataExport";
-import { ProgressStore } from "./features/data-export/ProgressStore";
 
 interface Props extends DatagridContainerProps {
     columnsStore: IColumnGroupStore;

packages/pluggableWidgets/datagrid-web/src/controllers/DerivedLoaderController.ts

@@ -1,9 +1,16 @@
 import { computed, makeObservable } from "mobx";
 
 type DerivedLoaderControllerSpec = {
+    showSilentRefresh: boolean;
+    refreshIndicator: boolean;
     exp: { exporting: boolean };
     cols: { loaded: boolean };
-    query: { isFetchingNextBatch: boolean; isFirstLoad: boolean; isRefreshing: boolean; showRefreshIndicator: boolean };
+    query: {
+        isFetchingNextBatch: boolean;
+        isFirstLoad: boolean;
+        isRefreshing: boolean;
+        isSilentRefresh: boolean;
+    };
 };
 
 export class DerivedLoaderController {
@@ -33,10 +40,20 @@ export class DerivedLoaderController {
     }
 
     get isRefreshing(): boolean {
-        return this.spec.query.isRefreshing;
+        const { isSilentRefresh, isRefreshing } = this.spec.query;
+
+        if (this.spec.showSilentRefresh) {
+            return isSilentRefresh || isRefreshing;
+        }
+
+        return !isSilentRefresh && isRefreshing;
     }
 
     get showRefreshIndicator(): boolean {
-        return this.spec.query.showRefreshIndicator;
+        if (!this.spec.refreshIndicator) {
+            return false;
+        }
+
+        return this.isRefreshing;
     }
 }

packages/pluggableWidgets/datagrid-web/src/helpers/state/RootGridStore.ts

@@ -74,6 +74,8 @@ export class RootGridStore extends BaseControllerHost {
         this.loaderCtrl = new DerivedLoaderController({
             exp: exportCtrl,
             cols: columns,
+            showSilentRefresh: props.refreshInterval > 1,
+            refreshIndicator: props.refreshIndicator,
             query
         });
     }

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

@@ -32,14 +32,14 @@ describe("DatasourceController loading states", () => {
 
         it("refresh has no effect if ds is loading", () => {
             expect(provider.gate.props.datasource.status).toBe("loading");
-            controller.refresh();
+            controller.backgroundRefresh();
             expect(controller.isRefreshing).toBe(false);
         });
 
         it("isRefreshing is true after refresh call", () => {
             provider.setProps({ datasource: list(0), refreshIndicator: false, refreshInterval: 0 });
             expect(provider.gate.props.datasource.status).toBe("available");
-            controller.refresh();
+            controller.backgroundRefresh();
             expect(controller.isRefreshing).toBe(true);
             provider.setProps({ datasource: list.loading(), refreshIndicator: false, refreshInterval: 0 });
             expect(provider.gate.props.datasource.status).toBe("loading");
@@ -67,7 +67,7 @@ describe("DatasourceController loading states", () => {
         });
 
         it("triggers refresh when called", () => {
-            controller.refresh();
+            controller.backgroundRefresh();
             expect(datasource.reload).toHaveBeenCalled();
         });
 

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

@@ -3,8 +3,8 @@ import { RefreshController } from "../query/RefreshController";
 
 describe("RefreshController", () => {
     let host: ReactiveControllerHost;
-    let queryHelper: { refresh: jest.Mock };
-    let atom: { get: () => { refresh: jest.Mock } };
+    let queryHelper: { backgroundRefresh: jest.Mock };
+    let atom: { get: () => { backgroundRefresh: jest.Mock } };
     let addControllerMock: jest.Mock;
 
     beforeEach(() => {
@@ -13,7 +13,7 @@ describe("RefreshController", () => {
             addController: addControllerMock
         } as unknown as ReactiveControllerHost;
         queryHelper = {
-            refresh: jest.fn()
+            backgroundRefresh: jest.fn()
         };
         atom = { get: () => queryHelper };
         jest.useFakeTimers();
@@ -40,7 +40,7 @@ describe("RefreshController", () => {
         expect(dispose).toBeInstanceOf(Function);
 
         jest.advanceTimersByTime(1000);
-        expect(queryHelper.refresh).toHaveBeenCalledTimes(1);
+        expect(queryHelper.backgroundRefresh).toHaveBeenCalledTimes(1);
     });
 
     it("should clear the timer when dispose is called", () => {
@@ -50,6 +50,6 @@ describe("RefreshController", () => {
 
         dispose!();
         jest.advanceTimersByTime(1000);
-        expect(queryHelper.refresh).not.toHaveBeenCalled();
+        expect(queryHelper.backgroundRefresh).not.toHaveBeenCalled();
     });
 });

packages/shared/widget-plugin-grid/src/query/DatasourceController.ts

@@ -1,20 +1,19 @@
+import { disposeBatch } from "@mendix/widget-plugin-mobx-kit/disposeBatch";
 import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/props-gate";
 import { ReactiveController, ReactiveControllerHost } from "@mendix/widget-plugin-mobx-kit/reactive-controller";
 import { ListValue, ValueStatus } from "mendix";
-import { action, autorun, computed, IComputedValue, makeAutoObservable, when } from "mobx";
+import { action, autorun, computed, IComputedValue, makeAutoObservable } from "mobx";
 import { QueryController } from "./query-controller";
-import { disposeBatch } from "@mendix/widget-plugin-mobx-kit/disposeBatch";
 
-type Gate = DerivedPropsGate<{ datasource: ListValue; refreshIndicator: boolean; refreshInterval: number }>;
+type Gate = DerivedPropsGate<{ datasource: ListValue }>;
 
 type DatasourceControllerSpec = { gate: Gate };
 
 export class DatasourceController implements ReactiveController, QueryController {
     private gate: Gate;
-    private refreshing = false;
+    private backgroundCheck = false;
     private fetching = false;
     private pageSize = Infinity;
-    private isLoaded = false;
 
     constructor(host: ReactiveControllerHost, spec: DatasourceControllerSpec) {
         host.addController(this);
@@ -39,31 +38,27 @@ export class DatasourceController implements ReactiveController, QueryController
     }
 
     private resetFlags(): void {
-        this.refreshing = false;
+        this.backgroundCheck = false;
         this.fetching = false;
     }
 
     private updateFlags(status: ValueStatus): void {
-        if (this.refreshing) {
-            this.setRefreshing(status === "loading");
+        if (this.backgroundCheck) {
+            this.setBackgroundCheck(status === "loading");
         }
         if (this.fetching) {
             this.setFetching(status === "loading");
         }
     }
 
-    private setRefreshing(value: boolean): void {
-        this.refreshing = value;
+    private setBackgroundCheck(value: boolean): void {
+        this.backgroundCheck = value;
     }
 
     private setFetching(value: boolean): void {
         this.fetching = value;
     }
 
-    private setIsLoaded(value: boolean): void {
-        this.isLoaded = value;
-    }
-
     private resetLimit(): void {
         this.datasource.setLimit(this.pageSize);
     }
@@ -77,11 +72,15 @@ export class DatasourceController implements ReactiveController, QueryController
     }
 
     get isFirstLoad(): boolean {
-        return !this.isLoaded;
+        return this.isDSLoading && this.datasource.items === undefined;
     }
 
     get isRefreshing(): boolean {
-        return this.refreshing;
+        return this.isDSLoading && this.datasource.items !== undefined;
+    }
+
+    get isSilentRefresh(): boolean {
+        return this.backgroundCheck;
     }
 
     get isFetchingNextBatch(): boolean {
@@ -114,20 +113,9 @@ export class DatasourceController implements ReactiveController, QueryController
         return computed(data);
     }
 
-    get showRefreshIndicator(): boolean {
-        const { refreshIndicator, refreshInterval } = this.gate.props;
-        return refreshIndicator && refreshInterval > 1 && this.isDSLoading && !this.isFirstLoad;
-    }
-
     setup(): () => void {
         const [add, disposeAll] = disposeBatch();
 
-        add(
-            when(
-                () => !this.isDSLoading,
-                () => this.setIsLoaded(true)
-            )
-        );
         add(
             autorun(() => {
                 // Always use actions to set flags to avoid subscribing to them
@@ -138,11 +126,11 @@ export class DatasourceController implements ReactiveController, QueryController
         return disposeAll;
     }
 
-    refresh(): void {
+    backgroundRefresh(): void {
         if (this.isDSLoading) {
             return;
         }
-        this.setRefreshing(true);
+        this.setBackgroundCheck(true);
         this.datasource.reload();
     }
 

packages/shared/widget-plugin-grid/src/query/RefreshController.ts

@@ -2,7 +2,7 @@ import { autoEffect } from "@mendix/widget-plugin-mobx-kit/autoEffect";
 import { ReactiveController, ReactiveControllerHost } from "@mendix/widget-plugin-mobx-kit/main";
 
 interface QueryHelper {
-    refresh(): void;
+    backgroundRefresh(): void;
 }
 
 interface ObservableAtom {
@@ -34,7 +34,7 @@ export class RefreshController implements ReactiveController {
 
     private scheduleRefresh(helper: QueryHelper, delay: number): () => void {
         const timerId = setTimeout(() => {
-            helper.refresh();
+            helper.backgroundRefresh();
         }, delay);
         return () => {
             clearTimeout(timerId);

packages/shared/widget-plugin-grid/src/query/query-controller.ts

@@ -12,7 +12,7 @@ type Members =
     | "hasMoreItems";
 
 export interface QueryController extends Pick<ListValue, Members> {
-    refresh(): void;
+    backgroundRefresh(): void;
     setPageSize(size: number): void;
     hasMoreItems: boolean;
     isFirstLoad: boolean;