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 reliably reset or populate when a sheet opens, preventing stale or incorrect values.
- Slug input handling now marks manual/sanitized changes as “dirty,” ensuring validation and change tracking run consistently 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	`ba4de8f`
🔍 Latest deploy log	https://app.netlify.com/projects/care-ohc/deploys/696603b91ab99900088b5e3b
😎 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`	Replaces separate reset effects with a single effect running on sheet open / when `isEditing` or `categoryData` change; populates form from `categoryData` in edit mode and resets to defaults in create mode.
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_value` field is marked dirty and validation/diff state updates when edited.

🚥 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 clearly identifies the main bug being fixed and directly relates to the primary changes addressing form reset and slug edit tracking issues.
Description check	✅ Passed	The description provides clear context, references the linked issue, explains the consolidated effect approach and dirty flag addition, documents similar fixes applied, and includes QA artifacts.
Linked Issues check	✅ Passed	The PR fully addresses the two main requirements from #15068: fixing the form reset race condition via consolidated effects and enabling the Update button by adding shouldDirty flag to slug value updates.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing the reported bugs; modifications to three form components target the same root causes (consolidated effects and dirty flag for slug updates) identified in the linked issue.

_{✏️ 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

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

github-actions · 2026-01-11T19:15:38Z

🚀 Preview Deployment Ready!

Name	Details
🔗 Preview URL	https://5a5cc483.care-preview-a7w.pages.dev
📝 Commit	`ba4de8f`
🌐 Environment	`pr-15099`

This preview will be automatically updated when you push new commits to this PR.

Copilot

Pull request overview

This pull request resolves form state management issues in resource category, charge item definition, and product knowledge forms. The changes fix a bug where the Update button was not enabled when editing slug values, and consolidates useEffect logic to prevent race conditions during form resets.

Changes:

Added shouldDirty: true flag to slug field setValue calls across all three forms to properly track manual edits
Consolidated two separate useEffects in ResourceCategoryForm into a single effect that handles both create and edit modes based on the isOpen state

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File	Description
src/components/Common/ResourceCategoryForm.tsx	Merged two useEffects into one to eliminate race condition on form reset; added `shouldDirty: true` to slug input onChange handler
src/pages/Facility/settings/chargeItemDefinitions/ChargeItemDefinitionForm.tsx	Added `shouldDirty: true` to slug input onChange handler to enable Update button on manual edits
src/pages/Facility/settings/productKnowledge/ProductKnowledgeForm.tsx	Added `shouldDirty: true` to slug input onChange handler to enable Update button on manual edits

src/components/Common/ResourceCategoryForm.tsx

github-actions · 2026-01-11T19:29:06Z

🎭 Playwright Test Results

Status: ❌ Failed
Test Shards: 3

Metric	Count
Total Tests	251
✅ Passed	250
❌ Failed	1
⏭️ Skipped	0

📊 Detailed results are available in the playwright-final-report artifact.

_{Run: #4586}

src/components/Common/ResourceCategoryForm.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

coderabbitai

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In @src/components/Common/ResourceCategoryForm.tsx:
- Around line 99-118: The useEffect that calls form.reset (inside useEffect)
must include form in its dependency array; update the dependency list from
[isOpen, isEditing, categoryData] to include form as well so it becomes [isOpen,
isEditing, categoryData, form], keeping the existing gating logic (isOpen check)
and the same reset payload.

📜 Review details

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

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

📒 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}