[WC-1054]: refresh on interval for data grid 2 (#179)

Author: r0b1n

packages/pluggableWidgets/datagrid-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+-   We added _Refresh time_ setting to Datagrid, this allows automatic data refresh.
+
 ### Changed
 
 -   We improved structure preview of the widget in Studio Pro 9.20 and above.

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

@@ -42,6 +42,14 @@ export default function Datagrid(props: DatagridContainerProps): ReactElement {
         }
     }, [props.datasource, props.configurationAttribute, filtered]);
 
+    useEffect(() => {
+        if (props.refreshInterval > 0) {
+            setTimeout(() => {
+                props.datasource.reload();
+            }, props.refreshInterval * 1000);
+        }
+    }, [props.datasource, props.refreshInterval]);
+
     const setPage = useCallback(
         computePage => {
             const newPage = computePage(currentPage);

packages/pluggableWidgets/datagrid-web/src/Datagrid.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>
             </propertyGroup>
             <propertyGroup caption="Columns">
                 <property key="columns" type="object" isList="true">

packages/pluggableWidgets/datagrid-web/typings/DatagridProps.d.ts

@@ -74,6 +74,7 @@ export interface DatagridContainerProps {
     tabIndex?: number;
     advanced: boolean;
     datasource: ListValue;
+    refreshInterval: number;
     columns: ColumnsType[];
     columnsFilterable: boolean;
     pageSize: number;
@@ -105,6 +106,7 @@ export interface DatagridPreviewProps {
     readOnly: boolean;
     advanced: boolean;
     datasource: {} | { type: string } | null;
+    refreshInterval: number | null;
     columns: ColumnsPreviewType[];
     columnsFilterable: boolean;
     pageSize: number | null;