refactor(Table): Use our custom Table component in views #32964
+458
−352
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Based on your review schedule, I'll hold off on reviewing this PR until it's marked as ready for review. If you'd like me to take a look now, comment
|
CornyKon
approved these changes
Apr 4, 2025
msyavuz
force-pushed
the
msyavuz/refactor/use-ant-tables
branch
from
f45860f to
118eaef
Compare
msyavuz
requested review from
sadpandajoe,
geido,
eschutho,
rusackas,
betodealmeida and
mistercrunch
as code owners
dosubot
bot
added
change:frontend
![korbit-ai[bot]](https://avatars.githubusercontent.com/in/322216?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review by Korbit AI
Korbit automatically attempts to detect when you fix issues in new commits.
| Category | Issue | Status |
|---|---|---|
 |
Missing Enum Documentation ▹ view | 🧠 Not in scope |
|
Missing documentation for complex row selection logic ▹ view | 🧠 Not in scope |
Files scanned
| File Path | Reviewed |
|---|---|
| superset-frontend/src/components/TableView/TableView.stories.tsx | ✅ |
| superset-frontend/src/SqlLab/components/EstimateQueryCostButton/index.tsx | ✅ |
| superset-frontend/src/features/roles/RoleListEditModal.tsx | ✅ |
| superset-frontend/src/features/allEntities/AllEntitiesTable.tsx | ✅ |
| superset-frontend/src/components/TableCollection/utils.tsx | ✅ |
| superset-frontend/src/components/TableView/TableView.tsx | ✅ |
| superset-frontend/src/pages/ExecutionLogList/index.tsx | ✅ |
| superset-frontend/src/components/AlteredSliceTag/index.tsx | ✅ |
| superset-frontend/src/components/Datasource/ChangeDatasourceModal.tsx | ✅ |
| superset-frontend/src/pages/CssTemplateList/index.tsx | ✅ |
| superset-frontend/src/SqlLab/components/QueryTable/index.tsx | ✅ |
| superset-frontend/src/pages/AnnotationLayerList/index.tsx | ✅ |
| superset-frontend/src/pages/AnnotationList/index.tsx | ✅ |
| superset-frontend/src/pages/Tags/index.tsx | ✅ |
| superset-frontend/src/pages/RowLevelSecurityList/index.tsx | ✅ |
| superset-frontend/src/components/Table/index.tsx | ✅ |
| superset-frontend/src/pages/RolesList/index.tsx | ✅ |
| superset-frontend/src/components/TableCollection/index.tsx | ✅ |
| superset-frontend/src/components/ListView/ListView.tsx | ✅ |
| superset-frontend/src/pages/QueryHistoryList/index.tsx | ✅ |
| superset-frontend/src/pages/AlertReportList/index.tsx | ✅ |
| superset-frontend/src/pages/SavedQueryList/index.tsx | ✅ |
| superset-frontend/src/pages/DashboardList/index.tsx | ✅ |
| superset-frontend/src/pages/DatabaseList/index.tsx | ✅ |
| superset-frontend/src/pages/ChartList/index.tsx | ✅ |
| superset-frontend/src/pages/DatasetList/index.tsx | ✅ |
Explore our documentation to understand the languages and file types we support and the files we ignore.
Need a new review? Comment
/korbit-reviewon this PR and I'll review your latest changes.Korbit Guide: Usage and Customization
Interacting with Korbit
- You can manually ask Korbit to review your PR using the
/korbit-reviewcommand in a comment at the root of your PR.- You can ask Korbit to generate a new PR description using the
/korbit-generate-pr-descriptioncommand in any comment on your PR.- Too many Korbit comments? I can resolve all my comment threads if you use the
/korbit-resolvecommand in any comment on your PR.- On any given comment that Korbit raises on your pull request, you can have a discussion with Korbit by replying to the comment.
- Help train Korbit to improve your reviews by giving a 👍 or 👎 on the comments Korbit posts.
Customizing Korbit
- Check out our docs on how you can make Korbit work best for you and your team.
- Customize Korbit for your organization through the Korbit Console.
Feedback and Support
Comment on lines
+449
to
+455
| toggleRowSelected={(rowId, value) => { | ||
| const row = rows.find(r => r.id === rowId); | ||
| if (row) { | ||
| prepareRow(row); | ||
| row.toggleRowSelected(value); | ||
| } | ||
| }} |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
Comment on lines
50
to
54
| export enum TableSize { | ||
| Small = 'small', | ||
| Middle = 'middle', | ||
| Large = 'large', | ||
| } |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
geido
reviewed
Apr 7, 2025
There was a problem hiding this comment.
Items from manual testing:
- Can we try loading the spinner on the content of the table?
- Should we move
TableCollectioninsideTable? In general, I feel components that are based off of the same base components and that are just extending them should live in the same parent component directory. For instance, we haveCheckboxandIndeterminateCheckboxthat live far apart in thesrc/componentsdirectory and one might not even notice. - I noticed we still have instances of pure tables in the codebase. I believe this PR is the right opportunity to get rid of all of them and just use Ant Design Table.
| @@ -32,299 +33,131 @@ interface TableCollectionProps { | |||
| loading: boolean; | |||
| highlightRowId?: number; | |||
| columnsForWrapText?: string[]; | |||
| setSortBy?: (updater: SortingRule<any>[]) => void; | |||
| bulkSelectEnabled?: boolean; | |||
| selectedFlatRows?: any[]; | |||
| @@ -32,299 +33,131 @@ interface TableCollectionProps { | |||
| loading: boolean; | |||
| highlightRowId?: number; | |||
| columnsForWrapText?: string[]; | |||
| setSortBy?: (updater: SortingRule<any>[]) => void; | |||
There was a problem hiding this comment.
Do we have a better type than any?
| id: sorter.field, | ||
| desc: sorter.order === 'descend', | ||
| }, | ||
| ] as SortingRule<any>[]); |
There was a problem hiding this comment.
Check for a better type definition
| : 'ascend' | ||
| : undefined, | ||
| sorter: !column.disableSortBy, | ||
| render: (val: any, record: any): ReactNode => { |
There was a problem hiding this comment.
Let's check for a better solution all these any
superset-frontend/src/pages/SavedQueryList/SavedQueryList.test.tsx
Outdated
Show resolved
Hide resolved
Co-authored-by: Geido <60598000+geido@users.noreply.github.com>
….tsx Co-authored-by: Geido <60598000+geido@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
SUMMARY
Right now html table is used in various ListViews styled by tables.less. This pr aims to refactor those tables into using our custom Table component instead.
BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
Before dashboards:
After dashboards:
Before charts:
After charts:
TESTING INSTRUCTIONS
Run the testing suite/Check list views
ADDITIONAL INFORMATION