kobotoolbox / kpi / 22861727720

82%

master: 76%

push

github

feat(formHistory): create and use infinite scroll component DEV-37 DEV-1796 (#6784)

### 📣 Summary

Change Project → Form → Form History component to operate on new
endpoint and use infinte scroll. We also include undeployed version in
the list, so users now can clone them too.

### 💭 Notes

Changes here:
- Created `InfiniteScrollTrigger.tsx` component that is a nice way to
have inifinite scroll in any scrollable container thanks to
`useIntersection` hook
- Added sticky header option to `UniversalTable` through `maxHeight`
prop (useful for infinite scroll)
- Added optional bottom content area to `UniversalTable` so that
`InfiniteScrollTrigger` could be put in there and do its magic
- Created a new `FormHistory.tsx` component to replace code that was
rendering list of deployed versions at `formLanding.js` - it is using
all the new things and orval to get data, plus `useInfiniteQuery` hook
that makes all the infinite scrolling much easier. It also uses
`UniversalTableCore`, not `UniversalTable`, because we handle query
ourselves.
- Form history now displays undeployed versions too, and now users can
clone them. Because of limitations and pagination of results
- Removed old code from `formLanding.js`
- Added new `reload` icon

Also note, this PR introduces an universal way to handle infinite
scrolling with react-query in the codebase. It should serve as an
example. If things are not perfectly clear or if we need more comments,
or storybook story, please point this out to me :)

### 👀 Preview steps

Infinite scrolling and things just work:

1. ℹ️ have an account and a project with 15-18 versions
2. Go To Project → Form
3. Toggle "Show full history"
4. 🟢 Notice that a table appears with ~10 items being visible. Last item
is not entirely visible. There is a scrollbar.
5. Scroll down to the bottom of the table
6. 🟢 Notice that (for a split second most probably) a spinner appears
and then more rows are added to the table
7. Scroll down to the bottom of the ta... (continued)

7536 of 11616 branches covered (64.88%)

28926 of 35224 relevant lines covered (82.12%)

1.62 hits per line