Fix formatting for Date objects in the grid (#2984)

mui · Dec 11, 2023 · b025f81 · b025f81
1 parent c2be3d9
commit b025f81
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 13 deletions.
diff --git a/packages/toolpad-components/src/DataGrid.tsx b/packages/toolpad-components/src/DataGrid.tsx
@@ -311,6 +311,10 @@ function dateValueGetter({ value }: GridValueGetterParams<any, any>): Date | und
     return undefined;
   }
 
+  if (value instanceof Date) {
+    return value;
+  }
+
   if (typeof value === 'number') {
     return new Date(value);
   }
@@ -430,22 +434,22 @@ export function parseColumns(columns: SerializableGridColumns): GridColDef[] {
       };
     }
 
-    if (column.type === 'date' && column.dateFormat) {
+    if (column.type === 'date') {
       const format = createDateFormat(column.dateFormat);
       return {
         ...customType,
         ...column,
         valueFormatter: ({ value }) => {
           try {
             return format.format(value);
-          } catch (err) {
-            return 'Invalid';
+          } catch {
+            return 'Invalid Date';
           }
         },
       };
     }
 
-    if (column.type === 'dateTime' && column.dateTimeFormat) {
+    if (column.type === 'dateTime') {
       const format = createDateFormat(column.dateTimeFormat);
       return {
         ...customType,
@@ -454,7 +458,7 @@ export function parseColumns(columns: SerializableGridColumns): GridColDef[] {
           try {
             return format.format(value);
           } catch {
-            return 'Invalid';
+            return 'Invalid Date';
           }
         },
       };

diff --git a/packages/toolpad-core/src/jsBrowserRuntime.tsx b/packages/toolpad-core/src/jsBrowserRuntime.tsx
@@ -16,7 +16,7 @@ function createBrowserRuntime(): JsRuntime {
     (iframe.contentWindow as any).__SCOPE = globalScope;
     (iframe.contentWindow as any).console = window.console;
 
-    return (iframe.contentWindow as any).eval(`
+    const result = (iframe.contentWindow as any).eval(`
       (() => {
         // See https://tc39.es/ecma262/multipage/global-object.html#sec-global-object
         const ecmaGlobals = new Set([ 'globalThis', 'Infinity', 'NaN', 'undefined', 'eval', 'isFinite', 'isNaN', 'parseFloat', 'parseInt', 'decodeURI', 'decodeURIComponent', 'encodeURI', 'encodeURIComponent', 'AggregateError', 'Array', 'ArrayBuffer', 'BigInt', 'BigInt64Array', 'BigUint64Array', 'Boolean', 'DataView', 'Date', 'Error', 'EvalError', 'FinalizationRegistry', 'Float32Array', 'Float64Array', 'Function', 'Int8Array', 'Int16Array', 'Int32Array', 'Map', 'Number', 'Object', 'Promise', 'Proxy', 'RangeError', 'ReferenceError', 'RegExp', 'Set', 'SharedArrayBuffer', 'String', 'Symbol', 'SyntaxError', 'TypeError', 'Uint8Array', 'Uint8ClampedArray', 'Uint16Array', 'Uint32Array', 'URIError', 'WeakMap', 'WeakRef', 'WeakSet', 'Atomics', 'JSON', 'Math', 'Reflect' ]);
@@ -50,6 +50,12 @@ function createBrowserRuntime(): JsRuntime {
         }
       })()
     `);
+
+    if (typeof result?.then === 'function') {
+      return Promise.resolve(result).then((value) => window.structuredClone(value));
+    }
+
+    return window.structuredClone(result);
   }
 
   function evaluateExpression(

diff --git a/test/integration/data-grid/basic.spec.ts b/test/integration/data-grid/basic.spec.ts
@@ -75,4 +75,5 @@ test('Date columns', async ({ page }) => {
   await expect(cellLocator(canvasGridLocator, 2, 3)).toHaveText('Invalid Date');
   await expect(cellLocator(canvasGridLocator, 2, 4)).toHaveText('Invalid Date');
   await expect(cellLocator(canvasGridLocator, 2, 5)).toHaveText('1/1/1970');
+  await expect(cellLocator(canvasGridLocator, 2, 6)).toHaveText('1/1/1970');
 });
diff --git a/test/integration/data-grid/fixture-basic/toolpad/application.yml b/test/integration/data-grid/fixture-basic/toolpad/application.yml
@@ -0,0 +1,3 @@
+apiVersion: v1
+kind: application
+spec: {}
diff --git a/test/integration/data-grid/fixture-basic/toolpad/pages/dateColumns/page.yml b/test/integration/data-grid/fixture-basic/toolpad/pages/dateColumns/page.yml
@@ -1,7 +1,8 @@
+# yaml-language-server: $schema=https://raw.githubusercontent.com/mui/mui-toolpad/v0.1.40/docs/schemas/v1/definitions.json#properties/Page
+
 apiVersion: v1
 kind: page
 spec:
-  id: h0FFFmL
   title: columns
   content:
     - component: DataGrid
@@ -21,10 +22,20 @@ spec:
             width: 129
           - field: date5
             type: date
+          - field: date6
+            type: date
         rows:
-          - date1: 2023-04-01
-            date2: 1234567
-            date3: not a date
-            date4: foo 1900
-            date5: '1234567'
+          $$jsExpression: |
+            [
+              {
+                date1: '2023-04-01',
+                date2: 1234567,
+                date3: 'not a date',
+                date4: 'foo 1900',
+                date5: '1234567',
+                date6: new Date(1234567),
+              },
+            ]
   display: shell
+  alias:
+    - h0FFFmL
diff --git a/test/integration/data-grid/fixture-basic/toolpad/pages/page1/page.yml b/test/integration/data-grid/fixture-basic/toolpad/pages/page1/page.yml
@@ -1,7 +1,8 @@
+# yaml-language-server: $schema=https://raw.githubusercontent.com/mui/mui-toolpad/v0.1.40/docs/schemas/v1/definitions.json#properties/Page
+
 apiVersion: v1
 kind: page
 spec:
-  id: 331kqzd
   title: Page 1
   content:
     - component: PageRow
@@ -60,3 +61,5 @@ spec:
       query:
         function: getUsers
         kind: local
+  alias:
+    - 331kqzd