Resolved Edit resource category form and charge item definition edit form bug #15099

Sreyas62 · 2026-01-11T19:12:03Z

Proposed Changes

Fixes #15068

Consolidated the two useEffects that handles both create and edit modes based on isOpen state, eliminating the race condition that caused form reset on second open.
Added shouldDirty: true flag so the form properly tracks changes in slug values, enabling the Update button in ChargeItemDefinitionForm.
Find and fixed similar issue in ProductKnowledgeForm and ResourceCategoryForm

Recording.2026-01-12.003029.mp4

Tagging: @ohcnetwork/care-fe-code-reviewers

Merge Checklist

Add specs that demonstrate the bug or test the new feature.
Update product documentation.
Ensure that UI text is placed in I18n files.
Prepare a screenshot or demo video for the changelog entry and attach it to the issue.
Request peer reviews.
Complete QA on mobile devices.
Complete QA on desktop devices.
Add or update Playwright tests for related changes

Summary by CodeRabbit

Bug Fixes
- Consolidated form initialization for create/edit sheets so fields reset or populate only when the sheet opens, preventing stale state.
- Slug inputs now mark changes as “dirty” so validation and change tracking run reliably during edits.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

…orm bug

netlify · 2026-01-11T19:12:10Z

✅ Deploy Preview for care-ohc ready!

Name	Link
🔨 Latest commit	`3d5084c`
🔍 Latest deploy log	https://app.netlify.com/projects/care-ohc/deploys/6964e0cd4824510008da5cfa
😎 Deploy Preview	https://deploy-preview-15099.preview.ohc.network
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

coderabbitai · 2026-01-11T19:12:16Z

Walkthrough

Consolidates ResourceCategoryForm initialization into one effect triggered when the sheet opens (handles create vs edit) and updates slug sanitization handlers in three forms to set the slug field as dirty so validation and dirty state propagate on edits.

Changes

Cohort / File(s)	Summary
Form Initialization Consolidation `src/components/Common/ResourceCategoryForm.tsx`	Merges separate effects into a single effect that runs when the sheet is open; initializes form fields from `categoryData` in edit mode and resets to defaults in create mode. Adds `shouldDirty: true` when updating `slug_value` during edits.
Slug Dirty State Marking `src/pages/Facility/settings/chargeItemDefinitions/ChargeItemDefinitionForm.tsx`, `src/pages/Facility/settings/productKnowledge/ProductKnowledgeForm.tsx`	When sanitizing slug input, `form.setValue` now includes `shouldDirty: true` so the slug field is marked dirty and validation/diff state updates during edits.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main changes: fixes for edit form bugs in resource category and charge item definition forms.
Description check	✅ Passed	The description includes issue reference, clear explanation of changes, and links to video demonstration. However, it marks some merge checklist items as incomplete (product documentation, I18n, Playwright tests).
Linked Issues check	✅ Passed	The PR addresses all objectives from issue #15068: fixes form reset race condition in ResourceCategoryForm, enables dirty-state tracking for slug edits in ChargeItemDefinitionForm, and applies the pattern to ProductKnowledgeForm.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the bugs identified in #15068. No unrelated modifications were introduced.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

📜 Recent review details

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1d22267 and 3d5084c.

📒 Files selected for processing (1)

src/components/Common/ResourceCategoryForm.tsx

🧰 Additional context used

📓 Path-based instructions (13)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{ts,tsx}: Write concise, technical TypeScript code with accurate examples
Use TypeScript for all code; prefer interfaces over types
Avoid enums; use maps instead
Use TanStack Query for data fetching from the API along with query and mutate utilities for the queryFn and mutationFn
Use raviger for routing

**/*.{ts,tsx}: Use TypeScript with strict mode and ES2022 target
Use interface for defining object types in TypeScript
Avoid explicit any type in TypeScript
Use proper nullability annotations in TypeScript types
Use dedicated error handlers and TypeScript strict null checks

**/*.{ts,tsx}: Use TypeScript for all new code
Prefer interfaces over types for object definitions in TypeScript
Avoid using any type; use proper type definitions in TypeScript
Use type inference where possible in TypeScript
Use TanStack Query for API data management
Prefer React Context for global state management

**/*.{ts,tsx}: Use TanStack Query with the query and mutate utilities from @/Utils/request/
Use appropriate query keys following the resource pattern for TanStack Query
Leverage TanStack Query built-in features for pagination and debouncing
Implement proper error handling using the global error handler for TanStack Query operations
Use useQuery hook with queryKey and queryFn parameters, where queryFn wraps the API route with the query() utility
Use useMutation hook with mutationFn parameter wrapping API routes with the mutate() utility, and implement onSuccess callbacks to invalidate related queries
Support path parameters in TanStack Query using the pathParams option in query/mutate utilities
Support query parameters in TanStack Query using the queryParams option in query/mutate utilities
Use the silent: true option to suppress global error notifications when custom error handling is needed

**/*.{ts,tsx}: Use TypeScript with strict mode and ES2022 target
Use interface for defining object types
Avoid explicit any types and maint...

Files:

src/components/Common/ResourceCategoryForm.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{ts,tsx,js,jsx}: Use functional and declarative programming patterns; avoid classes
Prefer iteration and modularization over code duplication
Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
Use the "function" keyword for pure functions
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements

**/*.{ts,tsx,js,jsx}: Use path aliases for imports from src (@/*)
Use double quotes for strings
Semicolons are required at end of statements
Order imports as: 3rd-party → library → CAREUI → UI → components → hooks → utils → relative
Use PascalCase for component and class names
Use camelCase for variable and function names

**/*.{ts,tsx,js,jsx}: Use path aliases @/* for imports from src directory
Use double quotes for strings
Require semicolons at end of statements
Order imports: 3rd-party → library → CAREUI → UI → components → hooks → utils → relative
Use PascalCase for component and class names
Use camelCase for variable and function names

Files:

src/components/Common/ResourceCategoryForm.tsx

**/*.{tsx,jsx}

📄 CodeRabbit inference engine (.cursorrules)

Use declarative JSX

Files:

src/components/Common/ResourceCategoryForm.tsx

src/**/*.{ts,tsx}