DataViews: Adds a control to the views actions to switch layouts #55311
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
youknowriad
added
[Type] Experimental
youknowriad
commented
Oct 12, 2023
| } ) { | ||
| const columns = useMemo( () => { |
There was a problem hiding this comment.
Basically all the tanstack initialization have move to the "view-list.js" file instead because we don't need it in other views like Grid, Kanban...
There was a problem hiding this comment.
Why we don't need them in the other views? Do you think all the callbacks to change the view like sorting, per page, etc.. would be different in some way?
There was a problem hiding this comment.
Well, I'm not entirely sure what you want to reuse here? by callbacks you mean things like onChangeView( { perPage: value } ) something else? These are very small callbacks that don't need to be shared.
There was a problem hiding this comment.
I meant the callbacks like onColumnVisibilityChange etc.. that use onChangeView. But I guess the whole point here is that we define our own API with fields, etc.., use them with setView and that tanstack can probably be more useful only in list view, right?
There was a problem hiding this comment.
It's not by principle or something I'm fine reusing tanstack wherever I can, I'm just not seeing where it can be useful elsewhere. Let's move forward and see. Maybe I'm missing something.
youknowriad
commented
Oct 12, 2023
| paginationInfo, | ||
| options: { pageCount }, |
There was a problem hiding this comment.
This prop duplicated an info we already had in paginationInfo so I just removed it.
youknowriad
commented
Oct 12, 2023
| getPaginationRowModel: getPaginationRowModel(), | ||
| pageCount, | ||
| } ); | ||
| const ViewComponent = view.type === 'list' ? ViewList : ViewGrid; |
There was a problem hiding this comment.
Obviously we need something more advanced than this to switch view types, but this should work for now. (Like a ViewType registry)
youknowriad
commented
Oct 12, 2023
| return ( | ||
| <div className="dataviews-wrapper"> | ||
| <VStack spacing={ 4 }> | ||
| <HStack justify="space-between"> | ||
| <TextFilter onChange={ dataView.setGlobalFilter } /> | ||
| <TextFilter view={ view } onChangeView={ onChangeView } /> |
There was a problem hiding this comment.
I made this text filter independent of tanstack APIs.
youknowriad
commented
Oct 12, 2023
| actions={ actions } | ||
| data={ data } | ||
| isLoading={ isLoading } | ||
| /> | ||
| <Pagination |
There was a problem hiding this comment.
I made this text filter independent of tanstack APIs.
|
Size Change: +27 B (0%) Total Size: 1.65 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 1d22382. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/6496929082
|
mcsf
approved these changes
Oct 12, 2023
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.
Related #55083
What?
This PR adds a layout (view type) switcher to the view actions menu and updates the code to add an empty "grid view". The idea is that this PR forces us to make all the necessary refactoring that are necessary in order to support multiple layouts.
In a follow-up I'll work on the "grid view" itself to actually implement it.
Testing instructions