Fix custom components for id cells (#3459)

packages/toolpad-studio-components/src/DataGrid.tsx

@@ -483,18 +483,16 @@ export function parseColumns(columns: SerializableGridColumns): GridColDef[] {
   return columns.map(({ type: colType, ...column }) => {
     const isIdColumn = column.field === 'id';
 
+    let baseColumn: Omit<GridColDef, 'field'> = { editable: true };
+
     if (isIdColumn) {
-      return {
-        ...column,
-        type: getNarrowedColType(colType),
+      baseColumn = {
+        ...baseColumn,
         editable: false,
-        hide: true,
         renderCell: ({ row, value }) => (row[DRAFT_ROW_MARKER] ? '' : value),
       };
     }
 
-    let baseColumn: Omit<GridColDef, 'field'> = { editable: true };
-
     if (colType) {
       baseColumn = { ...baseColumn, ...CUSTOM_COLUMN_TYPES[colType], ...column };
     }

test/integration/data-grid/custom.spec.ts

@@ -28,6 +28,9 @@ test('Code component cell', async ({ page }) => {
     ),
   ).toBeVisible();
   await expect(editorModel.pageRoot.getByText('field: "customField"')).toBeVisible();
+
+  // Can use cusom component for id field
+  await expect(editorModel.pageRoot.getByText('[id:0]')).toBeVisible();
 });
 
 test('Code component column selector', async ({ page }) => {

test/integration/data-grid/fixture-custom/toolpad/application.yml

@@ -0,0 +1,3 @@
+apiVersion: v1
+kind: application
+spec: {}

test/integration/data-grid/fixture-custom/toolpad/components/Debug.tsx

@@ -0,0 +1,31 @@
+import { createComponent } from '@toolpad/studio/browser';
+import * as React from 'react';
+
+export interface Props {
+  value: any;
+  field: any;
+  row: any;
+}
+
+function Test({ value, field }: Props) {
+  return (
+    <div>
+      [{field}:{value}]
+    </div>
+  );
+}
+
+export default createComponent(Test, {
+  argTypes: {
+    value: {
+      type: 'object',
+    },
+    row: {
+      type: 'object',
+    },
+    field: {
+      type: 'string',
+      defaultValue: 'Field name',
+    },
+  },
+});

test/integration/data-grid/fixture-custom/toolpad/pages/page/page.yml

@@ -1,21 +1,26 @@
+# yaml-language-server: $schema=https://raw.githubusercontent.com/mui/mui-toolpad/v0.1.54/docs/schemas/v1/definitions.json#properties/Page
+
 apiVersion: v1
 kind: page
 spec:
-  id: g1b3uhe
   title: page
   content:
-    - component: PageRow
-      name: pageRow
-      children:
-        - component: DataGrid
-          name: dataGrid
-          props:
-            rows:
-              $$jsExpression: |
-                [{ hiddenField: true, customField: { test: "value" } }]
-            columns:
-              - type: codeComponent
-                field: customField
-                codeComponent: Test
-                width: 639
-            density: comfortable
+    - component: DataGrid
+      name: dataGrid
+      layout:
+        columnSize: 1
+      props:
+        rows:
+          $$jsExpression: |
+            [{ hiddenField: true, customField: { test: "value" } }]
+        columns:
+          - type: codeComponent
+            field: customField
+            codeComponent: Test
+            width: 639
+          - field: id
+            type: codeComponent
+            codeComponent: Debug
+        density: comfortable
+  alias:
+    - g1b3uhe

test/playwright/localTest.ts

@@ -74,6 +74,8 @@ async function getTestFixtureTempDir(
   { template, setup }: ProjectConfig = {},
 ) {
   const tmpTestDir = path.resolve(currentDirectory, `./.tmp-test-dir-${workerInfo.parallelIndex}`);
+  // Clean up leftover from previous run, if necessary
+  await fs.rm(tmpTestDir, { recursive: true, force: true });
   await fs.mkdir(tmpTestDir);
   // Each test runs in its own temporary folder to avoid race conditions when running tests in parallel.
   // It also avoids mutating the source code of the fixture while running the test.