kobotoolbox / kpi / 26744392563 / 4

81%

master: 76%

push

github

refactor(frontend): remove react-tagsinput in favor of Mantine-powered in-house component DEV-2076 (#7089)

### 📣 Summary

Project and library tag inputs now use Kobo’s Mantine-based `TagsInput`,
which keeps tag editing working while removing the legacy
`react-tagsinput` dependency.

### 💭 Notes

Changes here:
- `jsapp/js/components/common/TagsInput.tsx`
- Added a shared Kobo wrapper around Mantine `TagsInput` with the
project default placeholder and split behavior.
- `jsapp/js/theme/kobo/TagsInput.ts`
- Wired `TagsInput` into the Kobo Mantine theme so it picks up Kobo
styling like the other wrapped Mantine components.
- `jsapp/js/components/common/TagsInput.stories.tsx`
- Added Storybook coverage, including a play test that adds a tag and
removes the last tag with keyboard interaction.
- `eslint.config.mjs`
- Added a restricted import rule so new code uses the Kobo wrapper
instead of importing Mantine `TagsInput` directly.
- `jsapp/js/components/RESTServices/RESTServicesForm.tsx`
- Replaced the old `KoboTagsInput` usage for subset fields and moved the
form to array-based tag handling.
- `jsapp/js/components/modalForms/LibraryAssetForm.tsx`
- Continued the TS migration work and switched library asset tags to the
new wrapped `TagsInput`.
- `jsapp/js/components/modalForms/AssetTagsForm.tsx`
- Replaced the old JS class component with a TypeScript functional
component, renamed it to PascalCase, and removed `observer()` because it
was no longer needed once session loading moved to explicit local state.
- `jsapp/js/components/bigModal/bigModal.js`
  - Updated the modal import to the new PascalCase `AssetTagsForm` file.
- `jsapp/js/components/common/koboTagsInput.tsx`
  - Removed the old `react-tagsinput` wrapper and its SCSS.
- `package.json` and `package-lock.json`
  - Removed `react-tagsinput` and `@types/react-tagsinput`.

### 👀 Preview steps

1. Log in and open any project.
2. Go to Project → Settings → REST Services.
3. Create a new REST service, or ed... (continued)

4486 of 11916 branches covered (37.65%)

18536 of 35635 relevant lines covered (52.02%)

0.52 hits per line