chore: move caption error to warning category, add <...> fallback for empty

While this check is still helpful, this check might go wrong in a scenario with
multiple languages involved. Prevent this check from showstopping app from
running by switching this check to a warning.
Also fix warnings in tests

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]
 
+### Fixed
+
+- We changed the severity for missing column captions from error to warning
+
 ## [2.30.3] - 2025-03-20
 
 ### Fixed

packages/pluggableWidgets/datagrid-web/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@mendix/datagrid-web",
     "widgetName": "Datagrid",
-    "version": "2.30.3",
+    "version": "2.30.4",
     "description": "",
     "copyright": "© Mendix Technology BV 2025. All rights reserved.",
     "license": "Apache-2.0",

packages/pluggableWidgets/datagrid-web/src/components/ColumnSelector.tsx

@@ -112,7 +112,7 @@ export function ColumnSelector(props: ColumnSelectorProps): ReactElement {
                             onChange={onChangeStub}
                         />
                         <label htmlFor={`${props.id}_checkbox_toggle_${index}`} style={{ pointerEvents: "none" }}>
-                            {column.header}
+                            {column.header.trim() || "<...>"}
                         </label>
                     </li>
                 ) : null;

packages/pluggableWidgets/datagrid-web/src/components/__tests__/ColumnSelector.spec.tsx

@@ -1,5 +1,5 @@
 import { createElement } from "react";
-import { render, screen } from "@testing-library/react";
+import { act, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import "@testing-library/jest-dom";
 import { ColumnSelector, ColumnSelectorProps } from "../ColumnSelector";
@@ -20,7 +20,9 @@ describe("Column Selector", () => {
             expect(document.body).toHaveFocus();
 
             const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
-            await user.click(screen.getByRole("button"));
+            await act(async () => {
+                await user.click(screen.getByRole("button"));
+            });
 
             const element = document.querySelector(".column-selectors");
             expect(element?.classList.contains("overflow")).toBe(false);
@@ -31,9 +33,11 @@ describe("Column Selector", () => {
             expect(document.body).toHaveFocus();
 
             const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
-            await user.click(screen.getByRole("button"));
+            await act(async () => {
+                await user.click(screen.getByRole("button"));
+            });
 
-            jest.runOnlyPendingTimers();
+            jest.advanceTimersByTime(100);
 
             const items = screen.getAllByRole("menuitem");
             expect(items[0]).toHaveFocus();
@@ -44,16 +48,20 @@ describe("Column Selector", () => {
             expect(document.body).toHaveFocus();
 
             const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
-            await user.click(screen.getByRole("button"));
+            await act(async () => {
+                await user.click(screen.getByRole("button"));
+            });
 
-            jest.runOnlyPendingTimers();
+            jest.advanceTimersByTime(100);
 
             const items = screen.getAllByRole("menuitem");
             expect(items[0]).toHaveFocus();
 
-            await user.tab({ shift: true });
+            await act(async () => {
+                await user.tab({ shift: true });
+            });
 
-            jest.runOnlyPendingTimers();
+            jest.advanceTimersByTime(100);
 
             expect(screen.getByRole("button")).toHaveFocus();
         });
@@ -81,17 +89,24 @@ describe("Column Selector", () => {
             expect(document.body).toHaveFocus();
 
             const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
-            await user.click(screen.getByRole("button"));
-
-            jest.runOnlyPendingTimers();
+            await act(async () => {
+                await user.click(screen.getByRole("button"));
+            });
+            jest.advanceTimersByTime(100);
 
             const items = screen.getAllByRole("menuitem");
             expect(items[0]).toHaveFocus();
-            await user.tab();
-            expect(items[1]).toHaveFocus();
-            await user.tab();
 
-            jest.runOnlyPendingTimers();
+            await act(async () => {
+                await user.tab();
+            });
+            jest.advanceTimersByTime(100);
+
+            expect(items[1]).toHaveFocus();
+            await act(async () => {
+                await user.tab();
+            });
+            jest.advanceTimersByTime(100);
 
             expect(screen.getByRole("button")).toHaveFocus();
         });
@@ -130,19 +145,26 @@ describe("Column Selector", () => {
             expect(document.body).toHaveFocus();
 
             const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
-            await user.click(screen.getByRole("button"));
 
-            jest.runOnlyPendingTimers();
+            await act(async () => {
+                await user.click(screen.getByRole("button"));
+            });
+            jest.advanceTimersByTime(100);
 
             const items = screen.getAllByRole("menuitem");
             expect(items).toHaveLength(3);
             expect(items[0]).toHaveFocus();
 
-            await user.tab();
-            expect(items[1]).toHaveFocus();
-            await user.keyboard("{Escape}");
+            await act(async () => {
+                await user.tab();
+            });
+            jest.advanceTimersByTime(100);
 
-            jest.runOnlyPendingTimers();
+            expect(items[1]).toHaveFocus();
+            await act(async () => {
+                await user.keyboard("{Escape}");
+            });
+            jest.advanceTimersByTime(100);
 
             expect(screen.getByRole("button")).toHaveFocus();
         });

packages/pluggableWidgets/datagrid-web/src/consistency-check.ts

@@ -111,6 +111,7 @@ const checkHidableSettings = (
     if (values.columnsHidable && column.hidable !== "no" && !column.header) {
         return {
             property: columnPropPath("hidable", index),
+            severity: "warning",
             message:
                 "A caption is required if 'Can hide' is Yes or Yes, hidden by default. This can be configured under 'Column capabilities' in the column item properties"
         };

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

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="Datagrid" version="2.30.3" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="Datagrid" version="2.30.4" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="Datagrid.xml" />
         </widgetFiles>