Redesigned Past Symptoms / Past Diagnoses and Medication History Tabs #2 #14655
Conversation
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughPer-date historical records are now collapsible and auto-expand the first five groups; table cell Tailwind styling was simplified with conditional highlighting for selected "created_by" cells; diagnosis and symptom history rows now show an Avatar plus name. Tests assert success notifications after submissions. Changes
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
There was a problem hiding this comment.
Pull request overview
This PR implements a collapsible date grouping interface for historical records in the Past Symptoms/Diagnoses and Medication History tabs. The changes improve the UI by allowing users to expand/collapse date groups and add avatar displays for record creators.
Key Changes:
- Added collapsible functionality to date-grouped historical records with the first 5 date groups expanded by default
- Enhanced the "recorded by" field with avatar display alongside the user's name
- Refactored CSS class names from pseudo-selector syntax to utility class format
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
src/components/Questionnaire/QuestionTypes/SymptomQuestion.tsx |
Added Avatar component to display profile pictures alongside user names in the recorded_by field |
src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx |
Added Avatar component to display profile pictures alongside user names in the recorded_by field |
src/components/HistoricalRecordSelector/index.tsx |
Implemented collapsible date groups with expand/collapse state management and updated CSS classes |
src/components/HistoricalRecordSelector/RecordItem.tsx |
Updated CSS classes for styling and modified background color logic for selected states |
| className={ | ||
| "border border-gray-200 bg-gray-50 [&:nth-last-child(1)]:rounded-r-md w-12" | ||
| "border border-gray-200 bg-gray-50 nth-2:rounded-l-md nth-last-1:rounded-r-md min-w-[150px]" | ||
| } |
There was a problem hiding this comment.
The CSS classes nth-2:rounded-l-md and nth-last-1:rounded-r-md appear to be custom variants that may not exist in the Tailwind CSS configuration. Standard Tailwind uses pseudo-class variants like first:, last:, or arbitrary variants like [&:nth-child(2)]:. Verify these classes are properly configured in your Tailwind config, otherwise use the standard [&:nth-child(2)]:rounded-l-md and [&:last-child]:rounded-r-md syntax.
| activeTypeConfig.expandableFields.length > 0 && ( | ||
| <TableHead | ||
| className={ | ||
| "border border-gray-200 bg-gray-50 nth-last-1:rounded-r-md w-12" |
There was a problem hiding this comment.
The CSS class nth-last-1:rounded-r-md appears to be a custom variant that may not exist in the Tailwind CSS configuration. Verify this class is properly configured, otherwise use the standard [&:last-child]:rounded-r-md or last:rounded-r-md syntax.
| "p-2 text-sm whitespace-pre-wrap border border-gray-200 min-w-[150px]", | ||
| "nth-2:rounded-l-md", | ||
| "nth-last-1:rounded-r-md", |
There was a problem hiding this comment.
The CSS classes nth-2:rounded-l-md and nth-last-1:rounded-r-md appear to be custom variants that may not exist in the Tailwind CSS configuration. Verify these classes are properly configured, otherwise use the standard [&:nth-child(2)]:rounded-l-md and [&:last-child]:rounded-r-md syntax.
| "nth-2:rounded-l-md", | ||
| "nth-last-1:rounded-r-md", | ||
| isSelected && field.key === "created_by" | ||
| ? "bg-emerald-100!" |
There was a problem hiding this comment.
The exclamation mark in bg-emerald-100! is non-standard Tailwind syntax. Use the ! prefix for important modifier: !bg-emerald-100. Additionally, the conditional logic should handle the created_by field differently only when selected, but it's unclear why this field needs special treatment compared to other fields.
| ? "bg-emerald-100!" | |
| ? "!bg-emerald-100" |
| <TableCell | ||
| className={ | ||
| "p-2 w-12 text-sm border border-gray-200 bg-white [&:nth-child(even)]:bg-gray-100 [&:nth-last-child(1)]:rounded-r-md" | ||
| "p-2 w-12 text-sm border border-gray-200 bg-white even:bg-gray-100 nth-last-1:rounded-r-md" |
There was a problem hiding this comment.
The CSS class nth-last-1:rounded-r-md appears to be a custom variant that may not exist in the Tailwind CSS configuration. Verify this class is properly configured, otherwise use the standard [&:last-child]:rounded-r-md or last:rounded-r-md syntax.
🎭 Playwright Test ResultsStatus: ✅ Passed
📊 Detailed results are available in the playwright-final-report artifact. Run: #3110 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
tests/facility/patient/encounter/structuredQuestions/diagnosis.spec.ts(1 hunks)tests/facility/patient/encounter/structuredQuestions/symptom.spec.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (7)
**/*.{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
Useinterfacefor defining object types in TypeScript
Avoid explicitanytype 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 usinganytype; 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 thequeryandmutateutilities 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
UseuseQueryhook withqueryKeyandqueryFnparameters, wherequeryFnwraps the API route with thequery()utility
UseuseMutationhook withmutationFnparameter wrapping API routes with themutate()utility, and implementonSuccesscallbacks to invalidate related queries
Support path parameters in TanStack Query using thepathParamsoption in query/mutate utilities
Support query parameters in TanStack Query using thequeryParamsoption in query/mutate utilities
Use thesilent: trueoption to suppress global error notifications when custom error handling is needed
**/*.{ts,tsx}: Use TypeScript with strict mode and ES2022 target
Useinterfacefor defining object types
Avoid explicitanytypes and maint...
Files:
tests/facility/patient/encounter/structuredQuestions/diagnosis.spec.tstests/facility/patient/encounter/structuredQuestions/symptom.spec.ts
**/*.{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:
tests/facility/patient/encounter/structuredQuestions/diagnosis.spec.tstests/facility/patient/encounter/structuredQuestions/symptom.spec.ts
**/*
📄 CodeRabbit inference engine (CLAUDE.md)
Use 2-space indentation
Files:
tests/facility/patient/encounter/structuredQuestions/diagnosis.spec.tstests/facility/patient/encounter/structuredQuestions/symptom.spec.ts
**/*.ts
📄 CodeRabbit inference engine (.cursor/rules/02-coding-standards.mdc)
Use camelCase for utility file names (e.g.,
useAuth.ts)
Files:
tests/facility/patient/encounter/structuredQuestions/diagnosis.spec.tstests/facility/patient/encounter/structuredQuestions/symptom.spec.ts
**/*.spec.ts
📄 CodeRabbit inference engine (.cursor/rules/02-coding-standards.mdc)
**/*.spec.ts: Write E2E tests in Playwright following https://playwright.dev/docs/writing-tests
Write meaningful test descriptions
Files:
tests/facility/patient/encounter/structuredQuestions/diagnosis.spec.tstests/facility/patient/encounter/structuredQuestions/symptom.spec.ts
**/*.{tsx,ts}
📄 CodeRabbit inference engine (.cursor/rules/04-ui-components.mdc)
**/*.{tsx,ts}: Use Shadcn UI components as the primary component library
Follow the component documentation for proper usage
Customize components using Tailwind CSS
UsenavigateanduseRedirectfrom raviger for navigation and redirects
Use Tailwind's responsive classes and follow mobile-first approach
Implement proper ARIA attributes for accessibility
Ensure keyboard navigation works in components
Define component props using TypeScript interfaces
Use translation keys fromsrc/Locale/for internationalization
Support RTL languages in components
Use proper date/time formatting for multiple language support
Files:
tests/facility/patient/encounter/structuredQuestions/diagnosis.spec.tstests/facility/patient/encounter/structuredQuestions/symptom.spec.ts
**/*.{ts,tsx,js,jsx,json,css,scss,html}
📄 CodeRabbit inference engine (AGENTS.md)
Use 2-space indentation
Files:
tests/facility/patient/encounter/structuredQuestions/diagnosis.spec.tstests/facility/patient/encounter/structuredQuestions/symptom.spec.ts
🧠 Learnings (11)
📓 Common learnings
Learnt from: hrit2773
Repo: ohcnetwork/care_fe PR: 11922
File: cypress/pageObject/Patients/PatientEncounter.ts:140-164
Timestamp: 2025-05-19T16:41:44.446Z
Learning: The PatientEncounter class in Cypress tests intentionally uses different element targeting strategies: `position: "first"` for allergies and `position: "last"` for symptoms and diagnoses, reflecting the different UI behaviors of these components.
📚 Learning: 2024-11-18T10:48:08.500Z
Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 9145
File: cypress/e2e/patient_spec/PatientConsultationCreation.cy.ts:93-94
Timestamp: 2024-11-18T10:48:08.500Z
Learning: In `cypress/e2e/patient_spec/PatientConsultationCreation.cy.ts`, bed capacity verification assertions after patient admission are already being performed elsewhere, so adding them here is unnecessary.
Applied to files:
tests/facility/patient/encounter/structuredQuestions/diagnosis.spec.tstests/facility/patient/encounter/structuredQuestions/symptom.spec.ts
📚 Learning: 2024-12-05T04:20:20.231Z
Learnt from: nihal467
Repo: ohcnetwork/care_fe PR: 9301
File: cypress/e2e/facility_spec/FacilityLocation.cy.ts:220-220
Timestamp: 2024-12-05T04:20:20.231Z
Learning: In `FacilityLocation.cy.ts`, ensure not to suggest adding success message verifications if they are already present in the test steps.
Applied to files:
tests/facility/patient/encounter/structuredQuestions/diagnosis.spec.tstests/facility/patient/encounter/structuredQuestions/symptom.spec.ts
📚 Learning: 2025-11-25T13:50:46.407Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/careui.instructions.md:0-0
Timestamp: 2025-11-25T13:50:46.407Z
Learning: Applies to src/CAREUI/**/*.{test,spec}.{ts,tsx} : Implement comprehensive testing in CAREUI components including accessibility and medical workflow scenarios
Applied to files:
tests/facility/patient/encounter/structuredQuestions/diagnosis.spec.tstests/facility/patient/encounter/structuredQuestions/symptom.spec.ts
📚 Learning: 2024-11-18T10:46:56.270Z
Learnt from: Jacobjeevan
Repo: ohcnetwork/care_fe PR: 9145
File: cypress/e2e/facility_spec/FacilityHomepage.cy.ts:229-317
Timestamp: 2024-11-18T10:46:56.270Z
Learning: In `cypress/e2e/facility_spec/FacilityHomepage.cy.ts`, when verifying the bed capacity badge reflection, the badge remains the same during multiple actions and only updates after a bed is attached to a patient during consultation. Therefore, it's appropriate to keep the test case consolidated rather than splitting it into smaller tests.
Applied to files:
tests/facility/patient/encounter/structuredQuestions/diagnosis.spec.tstests/facility/patient/encounter/structuredQuestions/symptom.spec.ts
📚 Learning: 2025-11-25T13:50:10.786Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-25T13:50:10.786Z
Learning: Applies to src/{Utils,types,providers}/**/*.{ts,tsx} : Document medical data flows, validation requirements, and healthcare workflows with clinical reasoning in API and utility code comments
Applied to files:
tests/facility/patient/encounter/structuredQuestions/diagnosis.spec.ts
📚 Learning: 2025-05-19T16:41:44.446Z
Learnt from: hrit2773
Repo: ohcnetwork/care_fe PR: 11922
File: cypress/pageObject/Patients/PatientEncounter.ts:140-164
Timestamp: 2025-05-19T16:41:44.446Z
Learning: The PatientEncounter class in Cypress tests intentionally uses different element targeting strategies: `position: "first"` for allergies and `position: "last"` for symptoms and diagnoses, reflecting the different UI behaviors of these components.
Applied to files:
tests/facility/patient/encounter/structuredQuestions/diagnosis.spec.tstests/facility/patient/encounter/structuredQuestions/symptom.spec.ts
📚 Learning: 2025-11-20T09:48:26.486Z
Learnt from: yash-learner
Repo: ohcnetwork/care_fe PR: 14108
File: tests/facility/settings/activityDefinitions/activityDefinitionCreate.spec.ts:86-147
Timestamp: 2025-11-20T09:48:26.486Z
Learning: In tests/facility/settings/activityDefinitions/activityDefinitionCreate.spec.ts, detailed verification of selected values (e.g., code from value sets) in the detail view is intentionally deferred to the list spec, as the creation test focuses on the happy path and basic verification only.
Applied to files:
tests/facility/patient/encounter/structuredQuestions/diagnosis.spec.tstests/facility/patient/encounter/structuredQuestions/symptom.spec.ts
📚 Learning: 2024-12-04T18:58:47.241Z
Learnt from: kihan2518B
Repo: ohcnetwork/care_fe PR: 8956
File: cypress/e2e/facility_spec/FacilityCreation.cy.ts:261-261
Timestamp: 2024-12-04T18:58:47.241Z
Learning: In `cypress/e2e/facility_spec/FacilityCreation.cy.ts`, the test case titled "Create a new facility with no bed and doctor capacity" includes steps to select bed types and specializations before validation. This is done intentionally to verify that error messages are shown properly when no capacity is specified.
Applied to files:
tests/facility/patient/encounter/structuredQuestions/diagnosis.spec.tstests/facility/patient/encounter/structuredQuestions/symptom.spec.ts
📚 Learning: 2025-11-25T13:51:23.408Z
Learnt from: CR
Repo: ohcnetwork/care_fe PR: 0
File: .github/instructions/context.instructions.md:0-0
Timestamp: 2025-11-25T13:51:23.408Z
Learning: Applies to src/context/**/*.{test,spec}.{ts,tsx} : Verify audit trail completeness in context tests
Applied to files:
tests/facility/patient/encounter/structuredQuestions/symptom.spec.ts
📚 Learning: 2025-12-05T19:05:40.902Z
Learnt from: pratyush07-hub
Repo: ohcnetwork/care_fe PR: 14651
File: src/components/Questionnaire/QuestionTypes/EncounterQuestion.tsx:252-257
Timestamp: 2025-12-05T19:05:40.902Z
Learning: In healthcare components handling discharge status (like EncounterQuestion.tsx), maintainers implement defense-in-depth by adding early-return guards in change handlers (e.g., `if (isDischarged) return;`) even when the UI control is also disabled, to ensure business-critical immutability rules are enforced at multiple layers and protect against edge cases like browser extensions or unexpected UI library behavior.
Applied to files:
tests/facility/patient/encounter/structuredQuestions/symptom.spec.ts
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
- GitHub Check: build
- GitHub Check: Redirect rules - care-ohc
- GitHub Check: Header rules - care-ohc
- GitHub Check: Pages changed - care-ohc
- GitHub Check: Test
- GitHub Check: CodeQL-Build
| await expect( | ||
| page.getByText("Questionnaire submitted successfully"), | ||
| ).toBeVisible(); | ||
|
|
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Success toast assertion makes the duplicate-diagnosis flow more robust
Asserting "Questionnaire submitted successfully" right after the initial submit tightens the precondition for the duplicate check and aligns this test with the primary diagnosis flow.
If you want the locator to be more consistent with the later duplicate-notification check and resilient to other places using the same text, you could scope it to the notifications region (optional):
- await expect(
- page.getByText("Questionnaire submitted successfully"),
- ).toBeVisible();
+ await expect(
+ page
+ .getByRole("region", { name: "Notifications alt+T" })
+ .getByRole("listitem")
+ .filter({ hasText: "Questionnaire submitted successfully" }),
+ ).toBeVisible();🤖 Prompt for AI Agents
In tests/facility/patient/encounter/structuredQuestions/diagnosis.spec.ts around
lines 148 to 151, the test should assert that the success toast appears
immediately after the first submit to ensure the duplicate-diagnosis flow starts
from a confirmed submission; add an expectation for the "Questionnaire submitted
successfully" toast right after the initial submit. For robustness, scope the
locator to the notifications region (e.g., target a notifications container then
find the text) so the assertion is resilient to the same message appearing
elsewhere, then proceed with the existing duplicate-notification check.
| await expect( | ||
| page.getByText("Questionnaire submitted successfully"), | ||
| ).toBeVisible(); | ||
|
|
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Success toast assertion correctly tightens the duplicate-symptom scenario
The new expectation confirms the initial symptom submission succeeded before you reload and attempt the duplicate, which makes the test’s assumptions explicit and consistent with the diagnosis tests.
Optionally, you can mirror the notifications scoping used for the duplicate message for extra resilience:
- await expect(
- page.getByText("Questionnaire submitted successfully"),
- ).toBeVisible();
+ await expect(
+ page
+ .getByRole("region", { name: "Notifications alt+T" })
+ .getByRole("listitem")
+ .filter({ hasText: "Questionnaire submitted successfully" }),
+ ).toBeVisible();📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| await expect( | |
| page.getByText("Questionnaire submitted successfully"), | |
| ).toBeVisible(); | |
| await expect( | |
| page | |
| .getByRole("region", { name: "Notifications alt+T" }) | |
| .getByRole("listitem") | |
| .filter({ hasText: "Questionnaire submitted successfully" }), | |
| ).toBeVisible(); |
🤖 Prompt for AI Agents
tests/facility/patient/encounter/structuredQuestions/symptom.spec.ts lines
129-132: add an explicit assertion that the success notification ("Questionnaire
submitted successfully") is visible before reloading and attempting the
duplicate submission (you already added this expectation); to harden the test,
locate the toast using the same notification-scoping pattern used for the
duplicate-message assertion (e.g. scope by the notifications container or
role/status) rather than a global text search so the check is resilient to other
UI messages.
1 participant
Proposed Changes
Fixes #14116
Expanded StateCollapsed StateTagging: @ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
New Features
Style
Tests
✏️ Tip: You can customize this high-level summary in your review settings.