kobotoolbox / kpi / 26487237129 / 10

82%

master: 76%

push

github

refactor(regionSelector): update and replace old region selector DEV-2103 (#7073)

### 📣 Summary
Updates the region selector UI in the automated
transcription/translation step

### 💭 Notes
Moved `RegionSelector` to use oravl-generated react query hooks instead
of `languageStore`. The stories for the old selector was broken, so I
added new ones and an integration test. Moved from a standalone css file
to mantine style props

### 👀 Preview steps
1. ℹ️ have an account and a project with an audio submission and access
to NLP
2. Ensure that automatic transX is enabled
3. Go to Transcriptions tab
4. Add a new transcription language (ex: French)
5. Click "automatic" button
8. 🟢 [on PR] notice that the region selector works the same:
    - The textbox to the left is readonly
- The textbox to the left is "clearable" (actually is a button that acts
as a back button)
    - The dropdown to the right is populated
    - The dropdown options are sorted the same as on main
    - Selecting an option works as expected
10. Open the console network tab
11. Click "create transcript"
13. 🟢 notice that the selected locale is present in the automated
transcription in the PATCH request:
<img width="356" height="232" alt="image"
src="https://github.com/user-attachments/assets/9fdc698b-60b7-40fc-8720-746f710d3983"
/>

10. Repeat steps 3-10 for Translations tab

7004 of 12455 branches covered (56.23%)

25475 of 37241 relevant lines covered (68.41%)

0.68 hits per line