feat: use react table to render resources subpage #313
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
karrui
changed the title
There was a problem hiding this comment.
what do we feel about using a bottom up approach to building the types rather than using a top-down approach (everything is using ResourceTableData) here - i think this is cos we haven't locked in the types yet so i think it's ok for now
i think the Datatable component here might still be doing abit too much here, it feels like we're trying to export a big component that can do everything and i think allowing a bit more flexibility might make more sense here cos it feels like a thin wrapper anw
| @@ -39,7 +39,7 @@ export function CmsSidebarContainer({ | |||
| {sidebar} | |||
| </Box> | |||
| </GridItem> | |||
| <GridItem as="main" area="main"> | |||
| <GridItem as="main" area="main" overflow="hidden"> | |||
There was a problem hiding this comment.
@sehyunidaaa - seekign input on this!
| {isFetching && ( | ||
| <> | ||
| <Flex | ||
| // white alpha to denote loading | ||
| bg="whiteAlpha.800" | ||
| bottom={0} | ||
| left={0} | ||
| p="1rem" | ||
| pos="absolute" | ||
| right={0} | ||
| top={0} | ||
| zIndex="1" | ||
| /> | ||
| <Flex | ||
| bottom={0} | ||
| flex={1} | ||
| left={0} | ||
| pos="fixed" | ||
| right={0} | ||
| top={0} | ||
| w="100vw" | ||
| zIndex={2} | ||
| > | ||
| <Box m="auto"> | ||
| <Spinner /> | ||
| </Box> | ||
| </Flex> | ||
| </> | ||
| )} |
There was a problem hiding this comment.
this component has to care about loading states but actually what i feel is the right abstraction here would be for the component here to only care about rendering the table and not care about loading.
Suspense feels like a good fit here, we can omit hte isLoading and it'll still fit nicely! wdyt?
There was a problem hiding this comment.
cannot use suspense. We do not want the full fallback. We want to show the previous items in the table still, which suspense will not do (since it will swap out the current rendered table items with the suspense item completely).
That is also the reason why data fetching is still done with useQuery and not useSuspenseQuery.
The loading state is a semi-transparent overlay.
apps/studio/src/features/dashboard/components/ResourceTable/LastEditCell.tsx
Show resolved
Hide resolved
| if (date === "folder") { | ||
| return ( | ||
| <Text as="span" textStyle="caption-2"> | ||
| - | ||
| </Text> | ||
| ) | ||
| } |
There was a problem hiding this comment.
alternatives we can consider:
- showing last edited time of direct child pages
- showing last edited time of all child pages + folder
i think here just using - is actually good enough but just cc @sehyunidaaa if you care. i think using - is actually really good for me and i hate 2 + dislike 1.
apps/studio/src/features/dashboard/components/ResourceTable/ResourceTableMenu.tsx
Show resolved
Hide resolved
karrui
force-pushed
the
add_sidebar_for_sidelist_page
branch
from
8d4f6ad
to
abf3a12
Compare
karrui
force-pushed
the
use_react_table_to_render_resource_table
branch
from
9d9ddee
to
50c12df
Compare
There was a problem hiding this comment.
lgtm! some points which i didn't agree with initially but landed on a good middle ground fokr the future:
- presenting a powerful API for data-table makes sense here because our use-case here is very narrow. we don't foresee this component changing anytime soon so ok to just hide stuff inside here.
Suspensewon't quite work here because the loading state which we want to show is dependent on the current data, whichSuspensedoesn't handle well (it wants afallbackcomponent).
again, nbd on both points - lgtm!
Merge activity
|
karrui
force-pushed
the
add_sidebar_for_sidelist_page
branch
from
1ba97f9
to
8c21103
Compare
karrui
force-pushed
the
use_react_table_to_render_resource_table
branch
from
ef041c2
to
fea224b
Compare
when getLayout uses loginstate hook it can fail to render if not in this order
karrui
force-pushed
the
use_react_table_to_render_resource_table
branch
from
fea224b
to
56b7c08
Compare
This update introduces a new 'Datatable' component implementation that replaces the prior 'DashboardTable.'
Also update implementation to fit design.
The 'Datatable' leverages the '@tanstack/react-table' library to enhance data table capabilities. It includes features like pagination, loading states, empty placeholders, and customizable cells and headers. Additionally, the PR updates various related file components and ensures that the project dependencies are aligned with these changes.