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

packages/pluggableWidgets/datagrid-web/CHANGELOG.md

@@ -16,6 +16,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 the possiblity to configure the first row of a DataGrid to be auto-selected on first load, facilitating master-detail views.
+
 ### Fixed
 
 - The property panel now shows keep selection property when datagrid is set to single selection.

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

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

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

@@ -222,6 +222,10 @@
                         <enumerationValue key="rowClick">Row click</enumerationValue>
                     </enumerationValues>
                 </property>
+                <property key="autoSelect" 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/src/model/configs/Datagrid.config.ts

@@ -19,6 +19,7 @@ export interface DatagridConfig {
     settingsStorageEnabled: boolean;
     enableSelectAll: boolean;
     keepSelection: boolean;
+    autoSelect: boolean;
     pagingPosition: PagingPositionEnum;
     multiselectable: true | undefined;
     loadingType: LoadingTypeEnum;
@@ -48,6 +49,7 @@ export function datagridConfig(props: DatagridContainerProps): DatagridConfig {
         settingsStorageEnabled: isSettingsStorageEnabled(props),
         enableSelectAll: props.enableSelectAll,
         keepSelection: props.keepSelection,
+        autoSelect: props.autoSelect,
         pagingPosition: props.pagingPosition,
         multiselectable: isMultiselectable(props),
         loadingType: props.loadingType,

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

@@ -64,6 +64,7 @@ export function mockContainerProps(overrides?: Partial<DatagridContainerProps>):
         columnsResizable: true,
         columns: [column("Col1"), column("Col2")],
         itemSelectionMethod: "checkbox",
+        autoSelect: false,
         itemSelectionMode: "clear",
         enableSelectAll: false,
         keepSelection: false,

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

@@ -108,6 +108,7 @@ export interface DatagridContainerProps {
     filtersPlaceholder?: ReactNode;
     itemSelection?: SelectionSingleValue | SelectionMultiValue;
     itemSelectionMethod: ItemSelectionMethodEnum;
+    autoSelect: boolean;
     itemSelectionMode: ItemSelectionModeEnum;
     showSelectAllToggle: boolean;
     enableSelectAll: boolean;
@@ -167,6 +168,7 @@ export interface DatagridPreviewProps {
     filtersPlaceholder: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };
     itemSelection: "None" | "Single" | "Multi";
     itemSelectionMethod: ItemSelectionMethodEnum;
+    autoSelect: boolean;
     itemSelectionMode: ItemSelectionModeEnum;
     showSelectAllToggle: boolean;
     enableSelectAll: boolean;

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

@@ -9,7 +9,7 @@ import { MultiSelectionHelper, SingleSelectionHelper } from "./helpers";
 export function createSelectionHelper(
     host: SetupComponentHost,
     gate: DerivedPropsGate<SelectionDynamicProps>,
-    config: { keepSelection: boolean } = { keepSelection: false }
+    config: { keepSelection: boolean; autoSelect: boolean } = { keepSelection: false, autoSelect: false }
 ): SelectionHelperService {
     const { selection, datasource } = gate.props;
 
@@ -58,7 +58,24 @@ export function createSelectionHelper(
             );
             add(cleanup);
         }
+        if (helper.type === "Single" && config.autoSelect) {
+            const dispose = autorun(
+                () => {
+                    const { datasource } = gate.props;
+                    const firstItem = datasource.items?.[0];
 
+                    if (!firstItem) return;
+
+                    if (helper.isSelected(firstItem)) {
+                        dispose();
+                    } else {
+                        helper.reduceTo(firstItem);
+                    }
+                },
+                { delay: 100 }
+            );
+            add(dispose);
+        }
         return disposeAll;
     }
 

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

@@ -350,6 +350,7 @@ export function useSelectionHelper(
 ): SelectionHelper | undefined {
     const prevObjectListRef = useRef<ObjectItem[]>([]);
     const firstLoadDone = useRef(false);
+
     useState(() => {
         if (selection) {
             selection.setKeepSelection(selectionStateHandler(keepSelection));