kobotoolbox / kpi / 12295075756

81%

master: 76%

push

github

feat(UniversalTable): column pinning improvements TASK-1312 (#5338)

### 📣 Summary
Improve multiple pinned columns handling. Allow pinning columns to right
side. Improve pinned column styling based on table having horizontal
scrollbar. Add reusable `useViewportSize` and `useWindowEvent` hooks.
Add extensive story for testing the component, including left/right
column pinning, the amount of columns and much more.

### 💭 Notes
Both `useViewportSize` and `useWindowEvent` hooks were copied from
`@mantine/hooks`, retaining the original code as closely as possible. We
most possibly will use Mantine in near future, and we should replace
both with the ones from Mantine package.

Pinned columns have visual shadow to distinct them from other columns
(useful when scrolling table horizontally). That shadow is not being
added if table has no horizontal scrollbar.

@magicznyleszek this should be used in actions column added in
https://github.com/kobotoolbox/kpi/pull/5309 (should be always pinned to
right)

### 👀 Preview steps
Best way to test component changes:
1. run storybook locally
2. go to http://localhost:6006/?path=/docs/misc-universaltable--docs
3. 🟢 verify columns pinning works for all possible combinations - story
allows pinning one or two columns on both sides
4. 🟢 verify pinned columns have shadow only if table has lots of columns
(i.e. if there is horizontal scrollbar)
5. 🟢 verify all the other props of component work as expected

Verify that Organization Members table still works:
1. ℹ️ have multiple different users
2. for one of the users (e.g. "joe"), use
http://kf.kobo.local/admin/organizations/organization/ to add multiple
users into joe's organization
3. for one of the users (e.g. "sue") set the role to "admin"
4. enable "Multi-members override" for joe's organization
5. enable feature flag `mmosEnabled`
7. navigate to `#/account/organization/members` (as "joe")
8. 🟢 notice that the table works as previousl... (continued)

5749 of 9231 branches covered (62.28%)

21988 of 27350 relevant lines covered (80.39%)

0.8 hits per line