kobotoolbox / kpi / 30097357955

82%

master: 76%

push

github

refactor(dataTable): mantineify table settings modal DEV-2062 (#7288)

### 📣 Summary

Migrated Table Settings modal to Mantine Modal, migrated the in-modal
component to TypeScript and made it a functional component that uses
Mantine components. Also fixed "Reset" button to use proper defaults.

### 💭 Notes

Changes here:
- Added a dedicated Mantine opener in `openTableSettingsModal.tsx`.
- Removed legacy code from `bigModal.js` and `constants.ts`.
- `TableSettings.tsx` is now a functional component in TypeScript.
- Kept Reflux `tableStore` to not limit the amount of changes in this PR
- Fixed null cleanup in `tableStore.ts` so reset values are properly
removed before saving.

### 👀 Preview steps

1. ℹ️ Have a project with submissions.
2. Go to Project → Data → Table.
3. Open "Display options" in top right.
4. Confirm the modal title is "Table display options" and the options
are identical as previously, just in the new Mantine-style.
5. Confirm "Show group names in table headers" is checked by default on
first open.
6. Click Reset.
7. Close the modal, then open it again.
8. Confirm "Show group names in table headers" is checked again after
reset.
9. Change one or more settings and click Save.
10. Reopen the modal and confirm saved values persist.

9480 of 12794 branches covered (74.1%)

30705 of 37529 relevant lines covered (81.82%)

5.51 hits per line