refactor: improve naming and autoselect logic, update config position

Author: yordan-st

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

@@ -143,7 +143,7 @@ function hideSelectionProperties(defaultProperties: Properties, values: Datagrid
     }
 
     if (itemSelection !== "Single") {
-        hidePropertyIn(defaultProperties, values, "selectFirstRow");
+        hidePropertyIn(defaultProperties, values, "autoSelect");
     }
 
     if (itemSelection !== "Multi" || itemSelectionMethod !== "checkbox") {

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

@@ -33,7 +33,7 @@
                         <enumerationValue key="rowClick">Row click</enumerationValue>
                     </enumerationValues>
                 </property>
-                <property key="selectFirstRow" type="boolean" defaultValue="false">
+                <property key="autoSelect" type="boolean" defaultValue="false">
                     <caption>Auto select first row</caption>
                     <description>Automatically select the first row</description>
                 </property>
@@ -53,15 +53,6 @@
                     <caption>Keep selection</caption>
                     <description>If enabled, selected items will stay selected unless cleared by the user or a Nanoflow.</description>
                 </property>
-                <property key="selectionCountPosition" type="enumeration" defaultValue="bottom" required="true">
-                    <caption>Show selection count</caption>
-                    <description />
-                    <enumerationValues>
-                        <enumerationValue key="top">Top</enumerationValue>
-                        <enumerationValue key="bottom">Bottom</enumerationValue>
-                        <enumerationValue key="off">Off</enumerationValue>
-                    </enumerationValues>
-                </property>
                 <property key="clearSelectionButtonLabel" type="textTemplate" required="false">
                     <caption>Clear selection label</caption>
                     <description>Customize the label of the 'Clear section' button</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

@@ -7,6 +7,12 @@ import { ComponentType, CSSProperties, ReactNode } from "react";
 import { ActionValue, DynamicValue, EditableValue, ListValue, ListActionValue, ListAttributeValue, ListAttributeListValue, ListExpressionValue, ListWidgetValue, SelectionSingleValue, SelectionMultiValue } from "mendix";
 import { Big } from "big.js";
 
+export type ItemSelectionMethodEnum = "checkbox" | "rowClick";
+
+export type ItemSelectionModeEnum = "toggle" | "clear";
+
+export type LoadingTypeEnum = "spinner" | "skeleton";
+
 export type ShowContentAsEnum = "attribute" | "dynamicText" | "customContent";
 
 export type ExportTypeEnum = "default" | "number" | "date" | "boolean";
@@ -100,6 +106,15 @@ export interface DatagridContainerProps {
     tabIndex?: number;
     datasource: ListValue;
     refreshInterval: number;
+    itemSelection?: SelectionSingleValue | SelectionMultiValue;
+    itemSelectionMethod: ItemSelectionMethodEnum;
+    autoSelect: boolean;
+    itemSelectionMode: ItemSelectionModeEnum;
+    showSelectAllToggle: boolean;
+    keepSelection: boolean;
+    clearSelectionButtonLabel?: DynamicValue<string>;
+    loadingType: LoadingTypeEnum;
+    refreshIndicator: boolean;
     columns: ColumnsType[];
     columnsFilterable: boolean;
     onClickTrigger: OnClickTriggerEnum;
@@ -108,7 +123,6 @@ export interface DatagridContainerProps {
     filtersPlaceholder?: ReactNode;
     itemSelection?: SelectionSingleValue | SelectionMultiValue;
     itemSelectionMethod: ItemSelectionMethodEnum;
-    selectFirstRow: boolean;
     itemSelectionMode: ItemSelectionModeEnum;
     showSelectAllToggle: boolean;
     enableSelectAll: boolean;
@@ -160,6 +174,15 @@ export interface DatagridPreviewProps {
     translate: (text: string) => string;
     datasource: {} | { caption: string } | { type: string } | null;
     refreshInterval: number | null;
+    itemSelection: "None" | "Single" | "Multi";
+    itemSelectionMethod: ItemSelectionMethodEnum;
+    autoSelect: boolean;
+    itemSelectionMode: ItemSelectionModeEnum;
+    showSelectAllToggle: boolean;
+    keepSelection: boolean;
+    clearSelectionButtonLabel: string;
+    loadingType: LoadingTypeEnum;
+    refreshIndicator: boolean;
     columns: ColumnsPreviewType[];
     columnsFilterable: boolean;
     onClickTrigger: OnClickTriggerEnum;
@@ -168,7 +191,6 @@ export interface DatagridPreviewProps {
     filtersPlaceholder: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };
     itemSelection: "None" | "Single" | "Multi";
     itemSelectionMethod: ItemSelectionMethodEnum;
-    selectFirstRow: 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,15 @@ export function createSelectionHelper(
             );
             add(cleanup);
         }
-
+        if (helper.type === "Single" && config.autoSelect) {
+            const dispose = autorun(() => {
+                const firstItem = gate.props.datasource.items?.[0];
+                if (!firstItem) return;
+                helper.reduceTo(firstItem);
+                dispose();
+            });
+            add(dispose);
+        }
         return disposeAll;
     }