[WC-3162] DG: Add auto-select first row

packages/pluggableWidgets/datagrid-web/CHANGELOG.md

@@ -9,6 +9,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Added
 
 - We added configurable selection count visibility and clear selection button label template for improved row selection management.
+- We added the possiblity to configure the first row of a DataGrid to be auto-selected on first load, facilitating master-detail views.
+
+### Fixed
 
 - We fixed an issue where missing consistency checks for the captions were causing runtime errors instead of in Studio Pro
 

packages/pluggableWidgets/datagrid-web/src/Datagrid.editorConfig.ts

@@ -165,6 +165,10 @@ function hideSelectionProperties(defaultProperties: Properties, values: Datagrid
         hidePropertyIn(defaultProperties, values, "itemSelectionMode");
     }
 
+    if (itemSelection !== "Single") {
+        hidePropertyIn(defaultProperties, values, "selectFirstRow");
+    }
+
     if (itemSelection !== "Multi" || itemSelectionMethod !== "checkbox") {
         hidePropertyIn(defaultProperties, values, "showSelectAllToggle");
     }

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

@@ -38,7 +38,8 @@ const Container = observer((props: Props): ReactElement => {
         props.itemSelection,
         props.datasource,
         props.onSelectionChange,
-        props.keepSelection ? "always keep" : "always clear"
+        props.keepSelection || props.selectFirstRow ? "always keep" : "always clear",
+        props.selectFirstRow
     );
 
     const selectActionHelper = useSelectActionHelper(props, selectionHelper);

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

@@ -37,6 +37,10 @@
                         <enumerationValue key="rowClick">Row click</enumerationValue>
                     </enumerationValues>
                 </property>
+                <property key="selectFirstRow" type="boolean" defaultValue="false">
+                    <caption>Auto select first row</caption>
+                    <description>Automatically select the first row</description>
+                </property>
                 <property key="itemSelectionMode" type="enumeration" defaultValue="clear">
                     <caption>Toggle on click</caption>
                     <description>Defines item selection behavior.</description>

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

@@ -95,6 +95,7 @@ export interface DatagridContainerProps {
     refreshInterval: number;
     itemSelection?: SelectionSingleValue | SelectionMultiValue;
     itemSelectionMethod: ItemSelectionMethodEnum;
+    selectFirstRow: boolean;
     itemSelectionMode: ItemSelectionModeEnum;
     showSelectAllToggle: boolean;
     keepSelection: boolean;
@@ -149,6 +150,7 @@ export interface DatagridPreviewProps {
     refreshInterval: number | null;
     itemSelection: "None" | "Single" | "Multi";
     itemSelectionMethod: ItemSelectionMethodEnum;
+    selectFirstRow: boolean;
     itemSelectionMode: ItemSelectionModeEnum;
     showSelectAllToggle: boolean;
     keepSelection: boolean;

packages/shared/widget-plugin-grid/src/selection/helpers.ts

@@ -343,17 +343,40 @@ export function useSelectionHelper(
     selection: SelectionSingleValue | SelectionMultiValue | undefined,
     dataSource: ListValue,
     onSelectionChange: ActionValue | undefined,
-    keepSelection: Parameters<typeof selectionStateHandler>[0]
+    keepSelection: Parameters<typeof selectionStateHandler>[0],
+    selectFirstRow?: boolean
 ): SelectionHelper | undefined {
     const prevObjectListRef = useRef<ObjectItem[]>([]);
     const firstLoadDone = useRef(false);
+    const hasAutoSelected = useRef(false);
     useState(() => {
         if (selection) {
             selection.setKeepSelection(selectionStateHandler(keepSelection));
         }
     });
     firstLoadDone.current ||= dataSource?.status !== "loading";
 
+    useEffect(() => {
+        if (
+            selectFirstRow &&
+            dataSource.status === "available" &&
+            dataSource.items &&
+            dataSource.items.length > 0 &&
+            selection &&
+            selection.type === "Single" &&
+            !selection.selection &&
+            !hasAutoSelected.current
+        ) {
+            setTimeout(() => {
+                if (!selection.selection) {
+                    const firstItem = dataSource.items![0];
+                    selection.setSelection(firstItem);
+                    hasAutoSelected.current = true;
+                }
+            }, 100);
+        }
+    }, [dataSource.status, dataSource.items, selectFirstRow, selection]);
+
     useEffect(() => {
         const prevObjectList = prevObjectListRef.current;
         const current = selection?.selection ?? [];