kobotoolbox / kpi / 18312716124

81%

master: 76%

push

github

fix(formBuilder): matrix not keeping order of rows DEV-804 (#6295)

### 📣 Summary

Fixes issue when Matrix wasn't respecting the order in which the rows or
the options of "Select one" or "Select many" responses were added.
Doesn't work retroactively on existing forms.

### 💭 Notes

This was hard to debug and figure out, so at some point I migrated file
to TypeScript to make things easier. It was easier indeed :) I haven't
found the real reason why this happens, seems to be some `immutable`
related thing. Inspired by some old discussion by Alex and Josh, I added
`order` property to the choices and am sorting things with it before
rendering. This means the fix unfortunately doesn't work for existing
forms.

Besides migrating to TS, I did few smaller refactors and fixed multiple
tiny issues. This definitely deserves even more love, but I had to draw
a line somewhere 💔

### 👀 Preview steps

1. ℹ️ have an account and a project
2. Open project in Form Builder
3. Add matrix question
4. Create at least 7 rows (I recommend some easy to notice name "r1",
"r2", "r3", …)
5. Set one column to "Select one" or "Select many" response type 
6. Add at least 7 choices to the column response (also easy to notice
name)
7. Save form and reload browser
8. 🔴 [on main] notice that the order of rows and choices is different
9. 🟢 [on PR] notice that the order is intact

6963 of 10976 branches covered (63.44%)

26821 of 33051 relevant lines covered (81.15%)

1.6 hits per line