[WC-3112]: Implement Gallery refresh interval

packages/pluggableWidgets/gallery-web/CHANGELOG.md

@@ -10,6 +10,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - We added configurable selection count visibility and clear selection button label template for improved row selection management.
 
+- We added a refresh intervel property, to allow defining an interval (in seconds) for refreshing the content in Gallery
+
 ### Fixed
 
 - We fixed an issue where setting the gallery gap to 0 caused an offset, which made the bottom border of items to dissapear.

packages/pluggableWidgets/gallery-web/src/Gallery.xml

@@ -16,6 +16,10 @@
                     <caption>Data source</caption>
                     <description />
                 </property>
+                <property key="refreshInterval" type="integer" defaultValue="0">
+                    <caption>Refresh time (in seconds)</caption>
+                    <description />
+                </property>
                 <property key="itemSelection" type="selection" dataSource="datasource">
                     <caption>Selection</caption>
                     <description />

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

@@ -1,23 +1,50 @@
-import { DatasourceController } from "@mendix/widget-plugin-grid/query/DatasourceController";
 import { computed, makeObservable } from "mobx";
 
+type DerivedLoaderControllerSpec = {
+    showSilentRefresh: boolean;
+    refreshIndicator: boolean;
+    query: {
+        isFetchingNextBatch: boolean;
+        isFirstLoad: boolean;
+        isRefreshing: boolean;
+        isSilentRefresh: boolean;
+    };
+};
+
 export class DerivedLoaderController {
-    constructor(
-        private datasourceController: DatasourceController,
-        private refreshIndicator: boolean
-    ) {
+    constructor(private spec: DerivedLoaderControllerSpec) {
         makeObservable(this, {
-            isRefreshing: computed,
-            showRefreshIndicator: computed
+            isFirstLoad: computed,
+            isFetchingNextBatch: computed,
+            isRefreshing: computed
         });
     }
 
+    get isFirstLoad(): boolean {
+        const { query } = this.spec;
+
+        return query.isFirstLoad;
+    }
+
+    get isFetchingNextBatch(): boolean {
+        return this.spec.query.isFetchingNextBatch;
+    }
+
     get isRefreshing(): boolean {
-        const { isSilentRefresh, isRefreshing } = this.datasourceController;
+        const { isSilentRefresh, isRefreshing } = this.spec.query;
+
+        if (this.spec.showSilentRefresh) {
+            return isSilentRefresh || isRefreshing;
+        }
+
         return !isSilentRefresh && isRefreshing;
     }
 
     get showRefreshIndicator(): boolean {
-        return this.refreshIndicator && this.isRefreshing;
+        if (!this.spec.refreshIndicator) {
+            return false;
+        }
+
+        return this.isRefreshing;
     }
 }

packages/pluggableWidgets/gallery-web/src/stores/GalleryStore.ts

@@ -37,6 +37,7 @@ interface StaticProps {
     storeFilters: boolean;
     storeSort: boolean;
     refreshIndicator: boolean;
+    refreshInterval: number;
 }
 
 export type GalleryPropsGate = DerivedPropsGate<DynamicProps>;
@@ -99,10 +100,14 @@ export class GalleryStore extends BaseControllerHost {
             host: this._sortHost
         };
 
-        this.loaderCtrl = new DerivedLoaderController(this._query, spec.refreshIndicator);
+        this.loaderCtrl = new DerivedLoaderController({
+            showSilentRefresh: spec.refreshInterval > 1,
+            refreshIndicator: spec.refreshIndicator,
+            query: this._query
+        });
 
         new RefreshController(this, {
-            delay: 0,
+            delay: spec.refreshInterval * 1000,
             query: this._query.derivedQuery
         });
 

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

@@ -58,7 +58,8 @@ export function createMockGalleryContext(): GalleryRootScope {
         storeSort: false,
         refreshIndicator: false,
         keepSelection: false,
-        selectionCountPosition: "bottom"
+        selectionCountPosition: "bottom",
+        refreshInterval: 0
     };
 
     // Create a proper gate provider and gate
@@ -76,7 +77,8 @@ export function createMockGalleryContext(): GalleryRootScope {
         stateStorageType: "localStorage",
         storeFilters: false,
         storeSort: false,
-        refreshIndicator: false
+        refreshIndicator: false,
+        refreshInterval: 0
     });
 
     const mockSelectHelper = new SelectActionHandler("None", undefined);

packages/pluggableWidgets/gallery-web/typings/GalleryProps.d.ts

@@ -29,6 +29,7 @@ export interface GalleryContainerProps {
     tabIndex?: number;
     filtersPlaceholder?: ReactNode;
     datasource: ListValue;
+    refreshInterval: number;
     itemSelection?: SelectionSingleValue | SelectionMultiValue;
     itemSelectionMode: ItemSelectionModeEnum;
     keepSelection: boolean;
@@ -76,6 +77,7 @@ export interface GalleryPreviewProps {
     translate: (text: string) => string;
     filtersPlaceholder: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };
     datasource: {} | { caption: string } | { type: string } | null;
+    refreshInterval: number | null;
     itemSelection: "None" | "Single" | "Multi";
     itemSelectionMode: ItemSelectionModeEnum;
     keepSelection: boolean;