kobotoolbox / kpi / 28599388330

81%

master: 76%

push

github

refactor(projectSettings): split files DEV-2214 (#7193)

### 💭 Notes

Split monolithic ProjectSettings component (1320 lines) into modular
structure with separate step components, shared utilities, comprehensive
tests, and Storybook stories.

The ProjectSettings component handles three contexts: creating new
projects, replacing project forms, and editing existing project
settings. This refactor breaks it into:

- **5 step components** (FormSource, ChooseTemplate, UploadFile,
ImportUrl, ProjectDetails)
- **Shared utilities** (types.ts, utils.ts, constants.ts with 19 unit
tests)
- **7 Storybook stories** covering all wizard steps and contexts
- **Mock infrastructure improvements** using assetFactory pattern for
templates

Main component reduced from 1320 to ~780 lines. No functional
changes—all three contexts work the same way they did before.

Changes here:

**New Directory Structure:**
- `jsapp/js/project/ProjectSettings/` - New home for everything
  - `ProjectSettings.tsx` - Main orchestrator component
  - `ProjectSettings.module.scss` - Moved from modalForms
  - `index.ts` - Public exports
  - `types.ts` - All TypeScript interfaces
  - `constants.ts` - STEPS constant with type-safe StepName, step titles
- `utils.ts` - Pure helper functions (validation, field initialization,
URI parsing)
- `utils.tests.ts` - 19 unit tests for validateProjectFields with helper
functions

**Step Components** (`steps/` directory):
- `StepFormSource.tsx` - 4 big source selection buttons
- `StepChooseTemplate.tsx` - Template browser with TemplatesList
- `StepUploadFile.tsx` - Dropzone for XLSForm upload
- `StepImportUrl.tsx` - URL input with validation
- `StepProjectDetails.tsx` - Large form with all metadata fields

**Shared Components** (`components/` directory):
- `BackButton.tsx` - Reusable back navigation button

**Storybook** (`ProjectSettings.stories.tsx`):
- 7 stories covering: ModalStep_ChooseSource,
ModalStep_BuildFromScratch, ModalStep_ChooseTemplate,
ModalStep... (continued)

9260 of 12600 branches covered (73.49%)

30213 of 37100 relevant lines covered (81.44%)

5.52 hits per line