codeant-ai-for-open-source[bot] commented on code in PR #38563:
URL: https://github.com/apache/superset/pull/38563#discussion_r2917628114
##########
superset-frontend/packages/superset-ui-core/src/components/TableCollection/utils.tsx:
##########
@@ -91,7 +91,7 @@ export function mapColumns<T extends object>(
return columns.map(column => {
const { isSorted, isSortedDesc } = getSortingInfo(headerGroups, column.id);
return {
- title: column.Header,
+ title: column.Header as ReactNode,
Review Comment:
**Suggestion:** The `title` field passed to the Ant Design table columns
uses `column.Header` directly, but in `react-table` this can be a render
function rather than a React node; passing the function itself as a React child
will cause React runtime errors ("Functions are not valid as a React child")
instead of rendering the intended header label, so this should use
`column.render('Header')` to correctly support both string/ReactNode and
functional headers. [logic error]
<details>
<summary><b>Severity Level:</b> Critical 🚨</summary>
```mdx
- ❌ Bulk-select header crashes in ListView table mode.
- ❌ TableCollection breaks with any functional react-table Header.
- ⚠️ Users lose select-all checkbox on affected list views.
```
</details>
```suggestion
title: column.render('Header') as ReactNode,
```
<details>
<summary><b>Steps of Reproduction ✅ </b></summary>
```mdx
1. Note in `src/components/ListView/ListView.tsx` lines 145–158 that
`bulkSelectColumnConfig` defines a `Header` as a render function returning a
`<Checkbox>`:
`Header: ({ getToggleAllRowsSelectedProps }: any) => (<Checkbox ... />)`.
2. In `src/components/ListView/utils.ts` lines 188–205 and 249–275,
`useListViewState`
receives `bulkSelectColumnConfig` and, when `bulkSelectMode` is truthy,
builds
`columnsWithSelect` by prepending this config to the regular `columns` array
and passes it
into `useTable` from `react-table`, producing `headerGroups` and `columns`
whose `Header`
for the bulk-select column is still that function.
3. In `src/components/ListView/ListView.tsx` lines 269–323 and 492–526,
`ListView` calls
`useListViewState` and, when `viewMode === 'table'`, renders
`<TableCollection ...>`
passing `headerGroups`, `rows`, and `columns` from the react-table instance,
so the
bulk-select column with functional `Header` flows into `TableCollection`.
4. In `packages/superset-ui-core/src/components/TableCollection/index.tsx`
lines 159–183
and 289–323, `TableCollection` calls `mapColumns(columns, headerGroups,
columnsForWrapText)` from `./utils` and feeds the result as `columns` into
the Ant Design
`<Table>` wrapper; in `utils.tsx` lines 86–105 and specifically line 94,
`mapColumns` sets
`title: column.Header as ReactNode`, so for the bulk-select column `title`
becomes a
function, which React 18 will try to render as a child in a `<th>` and
trigger the runtime
error "Functions are not valid as a React child" instead of rendering the
checkbox header.
```
</details>
<details>
<summary><b>Prompt for AI Agent 🤖 </b></summary>
```mdx
This is a comment left during a code review.
**Path:**
superset-frontend/packages/superset-ui-core/src/components/TableCollection/utils.tsx
**Line:** 94:94
**Comment:**
*Logic Error: The `title` field passed to the Ant Design table columns
uses `column.Header` directly, but in `react-table` this can be a render
function rather than a React node; passing the function itself as a React child
will cause React runtime errors ("Functions are not valid as a React child")
instead of rendering the intended header label, so this should use
`column.render('Header')` to correctly support both string/ReactNode and
functional headers.
Validate the correctness of the flagged issue. If correct, How can I resolve
this? If you propose a fix, implement it and please make it concise.
```
</details>
<a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F38563&comment_hash=1ce55649f111df2a3b55989a1880d005f27553807d0d08c1f9f7c316ccaa383b&reaction=like'>👍</a>
| <a
href='https://app.codeant.ai/feedback?pr_url=https%3A%2F%2Fgithub.com%2Fapache%2Fsuperset%2Fpull%2F38563&comment_hash=1ce55649f111df2a3b55989a1880d005f27553807d0d08c1f9f7c316ccaa383b&reaction=dislike'>👎</a>
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
