feat(widget-plugin-grid): move showRefreshIndicator to DatasourceController

Author: samuelreichert

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

@@ -146,8 +146,7 @@ export function preview(props: DatagridPreviewProps): ReactElement {
             isFetchingNextBatch={false}
             loadingType="spinner"
             columnsLoading={false}
-            refreshIndicator={props.refreshIndicator}
-            refreshInterval={props.refreshInterval ?? 0}
+            showRefreshIndicator={false}
         />
     );
 }

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

@@ -123,8 +123,7 @@ const Container = observer((props: Props): ReactElement => {
             isLoading={props.datasource.status === "loading"}
             loadingType={props.loadingType}
             columnsLoading={!columnsStore.loaded}
-            refreshIndicator={props.refreshIndicator}
-            refreshInterval={props.refreshInterval}
+            showRefreshIndicator={rootStore.loaderCtrl.showRefreshIndicator}
         />
     );
 });

packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx

@@ -71,8 +71,7 @@ export interface WidgetProps<C extends GridColumn, T extends ObjectItem = Object
     isFetchingNextBatch: boolean;
     loadingType: LoadingTypeEnum;
     columnsLoading: boolean;
-    refreshIndicator: boolean;
-    refreshInterval: number;
+    showRefreshIndicator: boolean;
 
     // Helpers
     cellEventsController: EventsController;
@@ -135,8 +134,7 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
         paging,
         pagingPosition,
         preview,
-        refreshIndicator,
-        refreshInterval,
+        showRefreshIndicator,
         selectActionHelper,
         setPage,
         visibleColumns
@@ -167,8 +165,6 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
 
     const selectionEnabled = selectActionHelper.selectionType !== "None";
 
-    const showRefreshIndicator = refreshIndicator && refreshInterval > 1 && props.isLoading && !props.isFirstLoad;
-
     return (
         <Fragment>
             {showTopBar && <WidgetTopBar>{pagination}</WidgetTopBar>}

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

@@ -3,7 +3,7 @@ import { computed, makeObservable } from "mobx";
 type DerivedLoaderControllerSpec = {
     exp: { exporting: boolean };
     cols: { loaded: boolean };
-    query: { isFetchingNextBatch: boolean; isFirstLoad: boolean; isRefreshing: boolean };
+    query: { isFetchingNextBatch: boolean; isFirstLoad: boolean; isRefreshing: boolean; showRefreshIndicator: boolean };
 };
 
 export class DerivedLoaderController {
@@ -35,4 +35,8 @@ export class DerivedLoaderController {
     get isRefreshing(): boolean {
         return this.spec.query.isRefreshing;
     }
+
+    get showRefreshIndicator(): boolean {
+        return this.spec.query.showRefreshIndicator;
+    }
 }

packages/pluggableWidgets/datagrid-web/src/utils/test-utils.tsx

@@ -110,8 +110,7 @@ export function mockWidgetProps(): WidgetProps<GridColumn, ObjectItem> {
         isFetchingNextBatch: false,
         loadingType: "spinner",
         columnsLoading: false,
-        refreshIndicator: false,
-        refreshInterval: 0,
+        showRefreshIndicator: false,
         focusController: new FocusTargetController(
             new PositionController(),
             new VirtualGridLayout(1, columns.length, 10)

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

@@ -10,11 +10,11 @@ class TestControllerHost extends BaseControllerHost {}
 describe("DatasourceController loading states", () => {
     let controller: DatasourceController;
     let datasource: ListValue;
-    let provider: GateProvider<{ datasource: ListValue }>;
+    let provider: GateProvider<{ datasource: ListValue; refreshIndicator: boolean; refreshInterval: number }>;
 
     beforeEach(() => {
         const host = new TestControllerHost();
-        provider = new GateProvider({ datasource: list.loading() });
+        provider = new GateProvider({ datasource: list.loading(), refreshIndicator: false, refreshInterval: 0 });
         host.setup();
         controller = new DatasourceController(host, { gate: provider.gate });
         controller.setup();
@@ -23,7 +23,7 @@ describe("DatasourceController loading states", () => {
     describe("when datasource is loading", () => {
         beforeEach(() => {
             datasource = list.loading();
-            provider.setProps({ datasource });
+            provider.setProps({ datasource, refreshIndicator: false, refreshInterval: 0 });
         });
 
         it("isFirstLoad returns true by default", () => {
@@ -37,11 +37,11 @@ describe("DatasourceController loading states", () => {
         });
 
         it("isRefreshing is true after refresh call", () => {
-            provider.setProps({ datasource: list(0) });
+            provider.setProps({ datasource: list(0), refreshIndicator: false, refreshInterval: 0 });
             expect(provider.gate.props.datasource.status).toBe("available");
             controller.refresh();
             expect(controller.isRefreshing).toBe(true);
-            provider.setProps({ datasource: list.loading() });
+            provider.setProps({ datasource: list.loading(), refreshIndicator: false, refreshInterval: 0 });
             expect(provider.gate.props.datasource.status).toBe("loading");
             expect(controller.isRefreshing).toBe(true);
             expect(controller.isFirstLoad).toBe(false);
@@ -57,7 +57,7 @@ describe("DatasourceController loading states", () => {
     describe("when datasource is not loading", () => {
         beforeEach(() => {
             datasource = list(0);
-            provider.setProps({ datasource });
+            provider.setProps({ datasource, refreshIndicator: false, refreshInterval: 0 });
         });
 
         it("All loading states return false", () => {

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

@@ -5,7 +5,7 @@ import { action, autorun, computed, IComputedValue, makeAutoObservable, when } f
 import { QueryController } from "./query-controller";
 import { disposeBatch } from "@mendix/widget-plugin-mobx-kit/disposeBatch";
 
-type Gate = DerivedPropsGate<{ datasource: ListValue }>;
+type Gate = DerivedPropsGate<{ datasource: ListValue; refreshIndicator: boolean; refreshInterval: number }>;
 
 type DatasourceControllerSpec = { gate: Gate };
 
@@ -114,6 +114,11 @@ 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();