kobotoolbox / kpi / 20091690171

81%

master: 76%

push

github

feat(gallery): paginated modal for images DEV-1212 (#6521)

### 📣 Summary

Project → Data → Gallery images now open images in a modal with
prev/next pagination.

### 💭 Notes

A separate issue of "Load more" loading empty pages is fixed separately
- see #6522.

Changes here:
- Added modal handling actions and updated the reducer
- Added Mantine modal for viewing the image
- Switching to Mantine components for some things
- Loading next page of submissions after reaching last image in
currently loaded submissions
- Using total submissions count in modal's `x of y` counter
- Changed page size to 20 to ease out the load

### 👀 Preview steps

Note that there is a bug in pagination
(https://linear.app/kobotoolbox/issue/DEV-1364/gallery-pagination-works-in-confusing-matter)
that will be fixed by #6522

1. ℹ️ have an account and a project with `image` question
2. make 21+ submissions with images
3. go to Project → Data → Gallery
4. 🔴 [on main] notice clicking image opens raw image
5. 🟢 [on PR] notice clicking image opens modal with next/prev buttons
6. click last image (20th)
7. click next button
8. 🟢 notice next button changes into spinner
9. after next page of submissions loads, 21st image is being displayed
in modal

---------

Co-authored-by: Anji Tong <ollejna@gmail.com>

7171 of 11258 branches covered (63.7%)

27694 of 34061 relevant lines covered (81.31%)

1.6 hits per line