---
phase: 13-add-remaining-rclone-remotes
plan: 04
subsystem: ui
tags: [react, react-hook-form, zod, rclone, wizard, form-rendering]

# Dependency graph
requires:
  - phase: 13-add-remaining-rclone-remotes/13-01
    provides: BACKEND_REGISTRY with 18 backends, auto-generated BACKEND_SCHEMAS
  - phase: 13-add-remaining-rclone-remotes/13-02
    provides: GdriveAuthToggle, OAuthInstructions components
  - phase: 13-add-remaining-rclone-remotes/13-03
    provides: category-grouped searchable BackendSelectionStep
provides:
  - RemoteConfigStep supports all 18 backends with correct auth handling per type
  - backendLabel derived from registry (no manual duplication)
  - renderBackendFields() switch function for clean multi-branch rendering
  - 6 new tests for new backend form rendering (gdrive, dropbox, ftp, webdav, smb, http)
affects: [RemoteConfigStep, end-to-end wizard flow for new backends]

# Tech tracking
tech-stack:
  added: []
  patterns:
    - "renderBackendFields() switch function: clean multi-branch form rendering instead of nested ternaries"
    - "backendLabel from Object.fromEntries(BACKEND_REGISTRY) - derived, not duplicated"
    - "getByLabelText selectors use partial regex (not anchored ^$) to handle TextFieldMD3 required * suffix"

key-files:
  created: []
  modified:
    - src/components/wizard/RemoteConfigStep.tsx
    - src/components/wizard/RemoteConfigStep.test.tsx

key-decisions:
  - "renderBackendFields() switch statement instead of nested ternaries - 7 branches requires readable structure"
  - "backendLabel derived via Object.fromEntries(BACKEND_REGISTRY) eliminates manual displayName maintenance"
  - "Test label selectors use partial regex (/host/i not /^host$/i) - TextFieldMD3 appends required * in label text"

patterns-established:
  - "Switch-based form branch pattern: renderBackendFields(backendType, register, errors) returns JSX for that type"
  - "getByLabelText partial regex: when fields are required, TextFieldMD3 adds * to label text - use /label text/i not /^label text$/i"

requirements-completed: [REMOTE-05]

# Metrics
duration: 15min
completed: 2026-04-01
---

# Phase 13 Plan 04: RemoteConfigStep Full Backend Integration Summary

**RemoteConfigStep wired for all 18 backends: GdriveAuthToggle for gdrive, OAuthInstructions for onedrive/dropbox/box/pcloud, generic FieldRenderer loop for all others, with registry-derived backendLabel**

## Performance

- **Duration:** ~15 min
- **Started:** 2026-04-01T16:50:00Z
- **Completed:** 2026-04-01T17:00:00Z
- **Tasks:** 3 of 3
- **Files modified:** 2

## Accomplishments
- Replaced manual `backendLabel` record with `Object.fromEntries(BACKEND_REGISTRY)` derivation
- Refactored 3-branch ternary into `renderBackendFields()` switch function (7 branches + default)
- Added gdrive branch: GdriveAuthToggle + generic loop for non-auth fields (root_folder_id)
- Added onedrive branch: OAuthInstructions + generic loop
- Added dropbox, box, pcloud branches: each with OAuthInstructions + generic loop
- Default case handles remaining backends: azure-files, swift, ftp, webdav, smb, http, seafile, s3, s3-compatible, gcs, b2
- 6 new tests added for new backend form rendering — all 282 tests pass

## Task Commits

Each task was committed atomically:

1. **Task 1: Wire all new backends into RemoteConfigStep** - `d0c00f7` (feat)
2. **Task 2: Add tests for new backend form rendering** - `2c596c9` (test)
3. **Task 3: Visual verification** - approved by user (2026-04-01)

## Files Created/Modified
- `src/components/wizard/RemoteConfigStep.tsx` - Refactored with switch-based renderBackendFields(), registry-derived backendLabel, imports for GdriveAuthToggle and OAuthInstructions
- `src/components/wizard/RemoteConfigStep.test.tsx` - 6 new test cases for gdrive, dropbox, ftp, webdav, smb, http backends

## Decisions Made
- `renderBackendFields()` switch statement chosen over nested ternaries — 7 branches makes ternary chains unreadable
- `backendLabel` derived from registry via `Object.fromEntries` — eliminates the manual duplication risk (Pitfall 2 in research)
- Test label selectors use partial regex (e.g. `/host/i` not `/^host$/i`) because `TextFieldMD3` appends a `*` span to required field labels, making exact-anchor matches fail

## Deviations from Plan

### Auto-fixed Issues

**1. [Rule 1 - Bug] Test label selectors fixed for TextFieldMD3 required field suffix**
- **Found during:** Task 2 (TDD RED phase)
- **Issue:** Plan specified tests like `getByLabelText(/^host$/i)` but TextFieldMD3 renders required field labels as "Host*" (with a `<span>*</span>`), so anchored regex `/^host$/i` fails to match the full label text
- **Fix:** Changed anchored patterns (`/^host$/i`) to non-anchored partial patterns (`/host/i`) in all affected test assertions
- **Files modified:** src/components/wizard/RemoteConfigStep.test.tsx
- **Verification:** All 6 new tests pass; full suite 282/282 green
- **Committed in:** 2c596c9 (Task 2 commit)

---

**Total deviations:** 1 auto-fixed (Rule 1 - Bug)
**Impact on plan:** Minor selector correction needed for test compatibility with existing TextFieldMD3 pattern. No scope creep.

## Issues Encountered
None beyond the test selector adjustment documented above.

## User Setup Required
None - no external service configuration required.

## Next Phase Readiness
- All 3 tasks complete: all 18 backends render correct forms
- Task 3 (visual verification) approved by user
- Phase 13 is fully complete — all 18 backends functional end-to-end

---
*Phase: 13-add-remaining-rclone-remotes*
*Completed: 2026-04-01*