Phase 2: Secret Create/Edit Forms (Implements #193) #198

kevalyq · 2025-11-22T08:27:39Z

📋 Summary

Implements Issue #193 - Phase 2 of Secret Management UI: Create and Edit Forms

✨ What's New

Components

SecretForm - Reusable form component with:
- All secret fields (title*, username, password, URL, notes)
- Password show/hide toggle
- Client-side validation
- Loading states & error display
- 8 tests ✅

Pages

SecretCreate (/secrets/new) - Create new secrets with navigation to detail view on success (4 tests ✅)
SecretEdit (/secrets/:id/edit) - Edit existing secrets with prefilled values (4 tests ✅)

API Service

createSecret() - POST /api/v1/secrets
updateSecret() - PATCH /api/v1/secrets/{id}
Comprehensive error handling (ApiError with 401/403/404/422)
12 tests ✅

Routing

/secrets/new → SecretCreate
/secrets/:id/edit → SecretEdit

📊 Testing

28 new tests (all passing)
API tests: 12
Component tests: 8
Page tests: 8

✅ Quality Checks

TypeScript: ✅ No errors
ESLint: ✅ Passed with --max-warnings 0
REUSE 3.3: ✅ Compliant
Pre-push hooks: ✅ All passed

🔗 Related

Implements Phase 2: Secret Create/Edit Forms #193
Depends on Phase 1 (Phase 1: Secret List & Detail View (Read-Only UI) #192) - already merged
Depends on Backend API ([EPIC] Secret Management System (Password Vault) api#173) - already merged

📝 Notes

Advanced features (password generator, strength indicator, tag autocomplete, date picker) deferred to follow-up PRs to keep scope manageable.

🚀 Next Steps

CI checks
Self-review
Code review
Manual testing

- Add reusable SecretForm component with validation - Add SecretCreate page for new secrets - Add SecretEdit page for updating existing secrets - Extend secretApi with createSecret() and updateSecret() - Add routes: /secrets/new, /secrets/:id/edit - 28 new tests (all passing) - TypeScript & ESLint clean Implements #193

codecov · 2025-11-22T08:28:41Z

Codecov Report

❌ Patch coverage is 88.60759% with 18 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
src/pages/Secrets/SecretEdit.tsx	85.24%	9 Missing ⚠️
src/pages/Secrets/SecretCreate.tsx	80.00%	6 Missing ⚠️
src/services/secretApi.ts	90.00%	2 Missing ⚠️
src/components/SecretForm.tsx	97.29%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

- Add test for 422 validation error display in SecretCreate - Add test for load error in SecretEdit - Add test for 422 validation errors in SecretEdit - Add tests for form field changes and notes field in SecretForm - Improve error handling to support both ApiError instances and error objects - Add form role attribute for better test accessibility Coverage improvements: - SecretCreate: 75% → 85%+ - SecretEdit: 67% → 85%+ - SecretForm: 80% → 90%+

Copilot

Pull request overview

This PR implements Phase 2 of the Secret Management UI, adding create and edit functionality for secrets. It builds upon the previously merged Phase 1 (list and detail views) by introducing a reusable SecretForm component, dedicated create/edit pages, and corresponding API service methods for createSecret and updateSecret. The implementation follows React best practices with functional components, proper TypeScript typing, comprehensive test coverage (28 tests), and appropriate error handling patterns consistent with the existing codebase.

Key Changes:

Reusable SecretForm component with validation, password visibility toggle, and loading states
SecretCreate and SecretEdit pages with proper navigation and error handling
API service methods (createSecret, updateSecret) with input validation and error handling
Routing integration for /secrets/new and /secrets/:id/edit

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/services/secretApi.ts	Added `CreateSecretRequest` and `UpdateSecretRequest` type definitions, plus `createSecret()` and `updateSecret()` API methods with input validation and comprehensive error handling
src/services/secretApi.create.test.ts	12 tests covering create/update operations including success cases, validation errors (422), authorization errors (401/403), and 404 errors
src/components/SecretForm.tsx	Reusable form component with all secret fields, password show/hide toggle, client-side validation, and loading states
src/components/SecretForm.test.tsx	8 tests covering form rendering, validation, submission, initial values, password toggle, and error display
src/pages/Secrets/SecretCreate.tsx	Create page with form submission, error handling, and navigation to detail view on success
src/pages/Secrets/SecretCreate.test.tsx	4 tests covering form rendering, successful creation, error handling, and cancel navigation
src/pages/Secrets/SecretEdit.tsx	Edit page with secret loading, prefilled form (password intentionally excluded), error handling, and navigation
src/pages/Secrets/SecretEdit.test.tsx	4 tests covering secret loading, successful updates, error handling, cancel navigation, and validation errors
src/App.tsx	Added routes for `/secrets/new` and `/secrets/:id/edit` with proper route ordering

src/pages/Secrets/SecretEdit.tsx

src/pages/Secrets/SecretCreate.tsx

src/pages/Secrets/SecretEdit.tsx

src/components/SecretForm.tsx

src/pages/Secrets/SecretEdit.tsx

- Extract validation error formatting to errorUtils - Fix field clearing bug in SecretEdit (use !== undefined) - Simplify button label logic in SecretForm (remove fragile regex) - Clarify password behavior comment Addresses 5 Copilot code review comments from PR #198

- Update SecretForm test to expect 'Create...' instead of 'Creating...' - Update SecretEdit test to expect empty strings for cleared url/notes fields - Reflects changes from Copilot review fixes

- Add test for missing ID in SecretEdit - Add test for non-ApiError when loading secret - Add test to verify empty password is not sent - Add test for non-ApiError with validation format (SecretEdit and SecretCreate) - Improves patch coverage from 86.70% to target 87.88%

The test 'should handle non-ApiError when loading' was redundant with existing test 'should display error when loading fails' at line 197. Both tested the same scenario: Network error shows 'Failed to load secret'. Also fixed mock usage in coverage tests to use mockResolvedValue instead of mockResolvedValueOnce for consistency with other tests.

- Add Phase 1 (Secret List & Detail Views, PR #197) - Add Phase 2 (Secret Create/Edit Forms, PR #198) - Add Phase 3 (File Attachments UI, PR #200) - Update README.md with Secret Management feature section - Update Epic #191 with completed phases (60% progress) All phases merged on 22.11.2025 with 87.95% test coverage. Part of: #191

Phase 1: #192 (issue) → #197 (PR) Phase 2: #193 (issue) → #198 (PR) Phase 3: #194 (issue) → #200 (PR) Addresses Copilot review comments.

* chore: format SecretForm.enhanced.test.tsx * docs: Add Secret Management Phase 1-3 documentation - Add Phase 1 (Secret List & Detail Views, PR #197) - Add Phase 2 (Secret Create/Edit Forms, PR #198) - Add Phase 3 (File Attachments UI, PR #200) - Update README.md with Secret Management feature section - Update Epic #191 with completed phases (60% progress) All phases merged on 22.11.2025 with 87.95% test coverage. Part of: #191 * fix: Correct PR numbers in CHANGELOG.md Phase 1: #192 (issue) → #197 (PR) Phase 2: #193 (issue) → #198 (PR) Phase 3: #194 (issue) → #200 (PR) Addresses Copilot review comments.

kevalyq added the large-pr-approved Approved large PR (boilerplate/templates that cannot be split) label Nov 22, 2025

kevalyq requested a review from Copilot November 22, 2025 08:41

Copilot started reviewing on behalf of kevalyq November 22, 2025 08:42 View session

kevalyq marked this pull request as ready for review November 22, 2025 08:43

Copilot finished reviewing on behalf of kevalyq November 22, 2025 08:45

Copilot AI reviewed Nov 22, 2025

View reviewed changes

kevalyq added 4 commits November 22, 2025 09:51

test: fix tests for updated button label and field clearing behavior

dfb685f

- Update SecretForm test to expect 'Create...' instead of 'Creating...' - Update SecretEdit test to expect empty strings for cleared url/notes fields - Reflects changes from Copilot review fixes

kevalyq merged commit 334352c into main Nov 22, 2025
16 checks passed

kevalyq deleted the feat/secret-create-edit-forms branch November 22, 2025 09:20

This was referenced Nov 22, 2025

feat: Enhanced Secret Forms - Password Generator, Strength Indicator, Tag Input, Expiration Picker (Phase 2 Advanced Features) #199

Merged

[EPIC] Secret Management Frontend (Password Vault UI) #191

Closed

kevalyq mentioned this pull request Nov 22, 2025

docs: Add Secret Management Phase 1-3 documentation #201

Merged

7 tasks

kevalyq added a commit that referenced this pull request Nov 22, 2025

fix: Correct PR numbers in CHANGELOG.md

7ebf77e

Phase 1: #192 (issue) → #197 (PR) Phase 2: #193 (issue) → #198 (PR) Phase 3: #194 (issue) → #200 (PR) Addresses Copilot review comments.

kevalyq mentioned this pull request Nov 25, 2025

[EPIC] Secret Management System (Password Vault) SecPal/api#173

Closed

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Phase 2: Secret Create/Edit Forms (Implements #193) #198

Phase 2: Secret Create/Edit Forms (Implements #193) #198

Uh oh!

kevalyq commented Nov 22, 2025

Uh oh!

codecov bot commented Nov 22, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Phase 2: Secret Create/Edit Forms (Implements #193) #198

Phase 2: Secret Create/Edit Forms (Implements #193) #198

Uh oh!

Conversation

kevalyq commented Nov 22, 2025

📋 Summary

✨ What's New

Components

Pages

API Service

Routing

📊 Testing

✅ Quality Checks

🔗 Related

📝 Notes

🚀 Next Steps

Uh oh!

codecov bot commented Nov 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

codecov bot commented Nov 22, 2025 •

edited

Loading