fix: miscellaneous fixes to table components #610
Conversation
|
Visit the preview URL for this PR (updated for commit a101fce): https://jump-math-staging--pr610-carissa-fix-search-b-b1k0j8ac.web.app (expires Mon, 06 Nov 2023 05:26:18 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: c42d8d0d853b05885664a2dd73f8245f4333ae51 |
| return ( | ||
| <Center __css={styles}> | ||
| <MessageContainer | ||
| image={DisplayStudentsIllustration} |
There was a problem hiding this comment.
not the most fitting image, but i don't think we have another design for this
There was a problem hiding this comment.
Fair! Let's add a backlog ticket to ask design for a better image, but I'm fine with keeping this image for the mvp
jfdoming
left a comment
jfdoming
left a comment
There was a problem hiding this comment.
Great! Just a couple of minor comments and one larger question about accessibility
| </PaginationPrevious> | ||
| )} | ||
| <PaginationPageGroup align="center" isInline> | ||
| <HStack align="center"> |
There was a problem hiding this comment.
In order to maintain semantic HTML I think we should use the library's built-in components (according to here the component already sets isInline so we sidestep the deprecation), or else duplicate all the other props that the library already sets.
| {filterMenuComponent} | ||
| </HStack> | ||
| <VStack py={4} spacing={6} w="full"> | ||
| {!noResults && ( |
There was a problem hiding this comment.
Just to make sure, have you checked that we never pass in filteredData.length for this prop anywhere? That would result in filters breaking the page, so you can probably just set the filters on every filter page to a combination with no results.
| filterMenuComponent={<FilterMenu filterProps={filterOptions} />} | ||
| nameOfTableItems="assessments" | ||
| noResults={isEmpty} | ||
| noResults={(data?.tests?.length ?? 0) === 0} |
There was a problem hiding this comment.
You could also just do !data?.tests?.length
| <SearchableTablePage | ||
| nameOfTableItems="assessments" | ||
| noResults={paginatedData.length === 0} | ||
| noResults={(data?.class?.testSessions?.length ?? 0) === 0} |
There was a problem hiding this comment.
Ditto
| noResults={(data?.class?.testSessions?.length ?? 0) === 0} | |
| noResults={!data?.class?.testSessions?.length} |
| <AdminTab | ||
| <SearchableTablePage | ||
| nameOfTableItems="teachers" | ||
| noResults={(teacherData?.teachers?.length ?? 0) === 0} |
There was a problem hiding this comment.
ditto
| noResults={(teacherData?.teachers?.length ?? 0) === 0} | |
| noResults={!teacherData?.teachers?.length} |
| return ( | ||
| <Center __css={styles}> | ||
| <MessageContainer | ||
| image={DisplayStudentsIllustration} |
There was a problem hiding this comment.
Fair! Let's add a backlog ticket to ask design for a better image, but I'm fine with keeping this image for the mvp
2 participants
Notion ticket link
N/A
Implementation description
AdminTabwithSearchableTablePageEmptyUsersMessagefor empty admin / teacher tableisInlinewithHStacksearchto SearchBar to clear input on tab switchSteps to test
What should reviewers focus on?
Checklist