fix(ui): avoid sample data children column crash#28691
Conversation
|
Hi there 👋 Thanks for your contribution! The OpenMetadata team will review the PR shortly! Once it has been labeled as Let us know if you need any help! |
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
This PR addresses a rendering conflict when sample data contains a column named children by configuring the table to use an alternative nested-row key.
Changes:
- Added a
childrenColumnNameoverride to the sample data table to avoid collisions with achildrendata field. - Added a regression test to ensure sample data renders correctly when a column is named
children.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| openmetadata-ui/src/main/resources/ui/src/components/Database/SampleDataTable/SampleDataTable.component.tsx | Overrides the table’s children nesting key to prevent conflicts with a children column in sample data. |
| openmetadata-ui/src/main/resources/ui/src/components/Database/SampleDataTable/SampleDataTable.test.tsx | Adds coverage for the edge case where a sample-data column is named children. |
| it('Renders sample data when a column is named children', async () => { | ||
| (getSampleDataByTableId as jest.Mock).mockImplementationOnce(() => | ||
| Promise.resolve({ | ||
| ...MOCK_TABLE, | ||
| columns: [ | ||
| { ...MOCK_TABLE.columns[0], name: 'id' }, | ||
| { ...MOCK_TABLE.columns[1], name: 'children' }, | ||
| { ...MOCK_TABLE.columns[2], name: 'active' }, | ||
| ], | ||
| sampleData: { | ||
| columns: ['id', 'children', 'active'], | ||
| rows: [['1', false, true]], | ||
| }, | ||
| }) | ||
| ); | ||
|
|
||
| await act(async () => { | ||
| render(<SampleDataTable {...mockProps} />); | ||
| }); | ||
|
|
||
| expect(screen.getByText('children')).toBeInTheDocument(); | ||
| expect(screen.getByText('false')).toBeInTheDocument(); | ||
| expect(screen.getByText('true')).toBeInTheDocument(); | ||
| }); |
| const SAMPLE_DATA_CHILDREN_COLUMN_NAME = | ||
| '__openmetadata_sample_data_children__'; |
| </Space> | ||
|
|
||
| <TableComponent | ||
| childrenColumnName={SAMPLE_DATA_CHILDREN_COLUMN_NAME} |
Code Review ✅ ApprovedSets a unique childrenColumnName for the Sample Data table to prevent rendering crashes when column names conflict with Ant Design props. Regression coverage for the 'children' column naming conflict is included. OptionsDisplay: compact → Showing less information. Comment with these commands to change:
Was this helpful? React with 👍 / 👎 | Gitar |
Description
Fixes #28585.
The Sample Data table can receive user-defined column names, including
children. Ant Design treatschildrenas its default tree-data field, so a scalar sample value under that column can be interpreted as expandable row data and crash the table.This sets a non-conflicting
childrenColumnNameonly for the Sample Data table and adds regression coverage for rendering a sample column namedchildren.Tests
npm_config_cache=/tmp/openmetadata-npm-cache npx --yes prettier@2.8.8 --config './.prettierrc.yaml' --ignore-path './.prettierignore' --check src/components/Database/SampleDataTable/SampleDataTable.component.tsx src/components/Database/SampleDataTable/SampleDataTable.test.tsxgit diff --checkNot run locally:
yarn test src/components/Database/SampleDataTable/SampleDataTable.test.tsx --runInBandyarn lint:base src/components/Database/SampleDataTable/SampleDataTable.component.tsx src/components/Database/SampleDataTable/SampleDataTable.test.tsxThe full UI dependency install could not complete on this machine because it exhausted available local disk space.