add patient filter to token queue#16103
Open
Jacobjeevan wants to merge 2 commits intoohcnetwork:developfrom
Open
add patient filter to token queue#16103Jacobjeevan wants to merge 2 commits intoohcnetwork:developfrom
Jacobjeevan wants to merge 2 commits intoohcnetwork:developfrom
Conversation
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
WalkthroughAdded PatientIdentifierFilter component to ongoing queue search UI with composite query parameter handling including patient_filter and patient_name. Updated ServicePointsDropDown.tsx with adjusted responsive breakpoints, container sizing, and text truncation for improved layout handling of long names. Changes
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
Comment |
🚀 Preview Deployment Ready!🔗 Preview URL: https://pr-16103.care-preview-a7w.pages.dev 📱 Mobile Access: This preview will be automatically updated when you push new commits to this PR. |
Contributor
There was a problem hiding this comment.
Pull request overview
Adds patient identifier-based filtering to the token queue “Ongoing” view (supporting Patient QR / identifier selection), and adjusts queue header UI layout for better responsiveness.
Changes:
- Adds
PatientIdentifierFiltertoManageQueueOngoingTab, persisting selection in URL query params and sendingpatient_filterto the token list query. - Refactors the search/filter header layout to work better on smaller screens.
- Tweaks
ServicePointsDropDownto show more assigned service points by default and truncate long names.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| src/pages/Facility/queues/ManageQueueOngoingTab.tsx | Introduces patient identifier filter UI and forwards patient_filter into token list query params. |
| src/pages/Facility/queues/ServicePointsDropDown.tsx | Updates responsive layout and chip rendering for assigned service points. |
You can also share your feedback on Copilot code review. Take the survey.
Comment on lines
+104
to
+106
| delete qParams.patient_filter; | ||
| delete qParams.patient_name; | ||
| setQueryParams(qParams, { replace: true }); |
| <Button | ||
| variant="ghost" | ||
| className="rounded-l-none w-10 h-11 border border-gray-300 bg-white" | ||
| className="rounded-l-none w-10 h-9 border border-gray-300 bg-white" |
Comment on lines
+93
to
+103
| <PatientIdentifierFilter | ||
| onSelect={(patientId, patientName) => { | ||
| if (patientId && patientName) { | ||
| setQueryParams( | ||
| { | ||
| patient_filter: patientId, | ||
| patient_name: patientName, | ||
| }, | ||
| { overwrite: false, replace: true }, | ||
| ); | ||
| } else { |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/pages/Facility/queues/ManageQueueOngoingTab.tsx`:
- Around line 61-62: The component is persisting patient_name in qParams which
risks exposing PHI; update ManageQueueOngoingTab to stop reading/writing
patient_name to the URL—only keep patient_filter in qParams and move patient
display name into component/local state (e.g., useState) for rendering. Locate
where qParams is destructured (const { autoRefresh, search, patient_filter,
patient_name } = qParams) and remove patient_name from qParams usage, and change
any setQParams or URL update calls that include patient_name to only set
patient_filter. Ensure any UI that shows the patient's name reads from the new
local state and that local state is populated from the API response (summary or
selection) instead of the query string.
In `@src/pages/Facility/queues/ServicePointsDropDown.tsx`:
- Line 78: The loading skeleton height mismatches the final trigger button
(trigger uses className containing h-9 while the skeleton renders h-11), causing
layout shift; open the ServicePointsDropDown component and change the skeleton
element's height class from h-11 to h-9 so it matches the trigger button (also
verify any other skeleton/placeholder in ServicePointsDropDown uses h-9 and
update them to match the trigger's className).
- Line 21: The chips are fixed-width and the default visible count
(defaultServicePoints via useBreakpoints) is increased causing overflow on
narrow screens; change the defaultServicePoints fallback to a smaller value
(e.g., 2) and remove the hard `w-48` sizing on the chip elements in
ServicePointsDropDown, replacing it with responsive styling (e.g., flexible
width, max-w/full, flex-shrink and text-truncate or ellipsis) so chips wrap or
shrink on mobile; update any other occurrences around the component (the
useBreakpoints call and the chip JSX that currently uses `w-48`) to use the new
responsive classes.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 8e03499a-b38d-4d5d-a957-5bf45e9d8367
📒 Files selected for processing (2)
src/pages/Facility/queues/ManageQueueOngoingTab.tsxsrc/pages/Facility/queues/ServicePointsDropDown.tsx
Comment on lines
+61
to
62
| const { autoRefresh, search, patient_filter, patient_name } = qParams; | ||
| const { data: summary } = useQuery({ |
Contributor
There was a problem hiding this comment.
Avoid storing patient names in URL query params (PHI exposure risk).
Line 99 persists patient_name in the URL. In a healthcare flow, this can leak PHI via history, logs, analytics, and shared links. Keep only patient_filter in query params; keep display name in local state.
Proposed fix
const [qParams, setQueryParams] = useQueryParams();
- const { autoRefresh, search, patient_filter, patient_name } = qParams;
+ const { autoRefresh, search, patient_filter } = qParams;
+ const [selectedPatientName, setSelectedPatientName] = useState("");
<PatientIdentifierFilter
onSelect={(patientId, patientName) => {
if (patientId && patientName) {
+ setSelectedPatientName(patientName);
setQueryParams(
{
patient_filter: patientId,
- patient_name: patientName,
},
{ overwrite: false, replace: true },
);
} else {
- delete qParams.patient_filter;
- delete qParams.patient_name;
- setQueryParams(qParams, { replace: true });
+ setSelectedPatientName("");
+ const { patient_filter: _removed, ...nextParams } = qParams;
+ setQueryParams(nextParams, { replace: true });
}
}}
placeholder={t("filter_by_identifier")}
className="w-full sm:w-auto rounded-md h-9 text-gray-500 shadow-sm"
patientId={patient_filter}
- patientName={patient_name}
+ patientName={selectedPatientName}
/>Also applies to: 94-107, 112-113
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/pages/Facility/queues/ManageQueueOngoingTab.tsx` around lines 61 - 62,
The component is persisting patient_name in qParams which risks exposing PHI;
update ManageQueueOngoingTab to stop reading/writing patient_name to the
URL—only keep patient_filter in qParams and move patient display name into
component/local state (e.g., useState) for rendering. Locate where qParams is
destructured (const { autoRefresh, search, patient_filter, patient_name } =
qParams) and remove patient_name from qParams usage, and change any setQParams
or URL update calls that include patient_name to only set patient_filter. Ensure
any UI that shows the patient's name reads from the new local state and that
local state is populated from the API response (summary or selection) instead of
the query string.
| const { assignedServicePointIds, allServicePoints, toggleServicePoint } = | ||
| useQueueServicePoints(); | ||
| const defaultServicePoints = useBreakpoints({ default: 2, sm: 6 }); | ||
| const defaultServicePoints = useBreakpoints({ default: 4, sm: 6 }); |
Contributor
There was a problem hiding this comment.
Fixed-width chips plus higher default count can overflow mobile layouts.
Line 21 increases visible chips to 4 by default, and Line 54 forces each chip to w-48. On narrow screens this can overflow and hide content/actions.
Proposed fix
- const defaultServicePoints = useBreakpoints({ default: 4, sm: 6 });
+ const defaultServicePoints = useBreakpoints({ default: 2, sm: 4 });
- <div className="flex w-full sm:w-auto gap-1 rounded-r-none border border-r-0 border-gray-300 rounded-l-md p-1 bg-white">
+ <div className="flex w-full sm:w-auto gap-1 rounded-r-none border border-r-0 border-gray-300 rounded-l-md p-1 bg-white overflow-x-auto">
- className="flex w-48 items-center justify-center gap-1 border border-gray-300 py-0.5 px-1.5 rounded-sm bg-gray-50 whitespace-nowrap"
+ className="flex min-w-0 max-w-48 items-center justify-center gap-1 border border-gray-300 py-0.5 px-1.5 rounded-sm bg-gray-50"Also applies to: 38-38, 54-57
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/pages/Facility/queues/ServicePointsDropDown.tsx` at line 21, The chips
are fixed-width and the default visible count (defaultServicePoints via
useBreakpoints) is increased causing overflow on narrow screens; change the
defaultServicePoints fallback to a smaller value (e.g., 2) and remove the hard
`w-48` sizing on the chip elements in ServicePointsDropDown, replacing it with
responsive styling (e.g., flexible width, max-w/full, flex-shrink and
text-truncate or ellipsis) so chips wrap or shrink on mobile; update any other
occurrences around the component (the useBreakpoints call and the chip JSX that
currently uses `w-48`) to use the new responsive classes.
| <Button | ||
| variant="ghost" | ||
| className="rounded-l-none w-10 h-11 border border-gray-300 bg-white" | ||
| className="rounded-l-none w-10 h-9 border border-gray-300 bg-white" |
Contributor
There was a problem hiding this comment.
Loading state height no longer matches the final trigger button height.
Line 78 uses h-9, but the loading skeleton in this component still renders with h-11, causing a layout shift when data loads.
Proposed fix
- <Skeleton className="h-11 w-40 rounded-r-none rounded-l-md" />
- <Skeleton className="h-11 w-10 rounded-l-none rounded-r-md" />
+ <Skeleton className="h-9 w-40 rounded-r-none rounded-l-md" />
+ <Skeleton className="h-9 w-10 rounded-l-none rounded-r-md" />🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/pages/Facility/queues/ServicePointsDropDown.tsx` at line 78, The loading
skeleton height mismatches the final trigger button (trigger uses className
containing h-9 while the skeleton renders h-11), causing layout shift; open the
ServicePointsDropDown component and change the skeleton element's height class
from h-11 to h-9 so it matches the trigger button (also verify any other
skeleton/placeholder in ServicePointsDropDown uses h-9 and update them to match
the trigger's className).
🎭 Playwright Test ResultsStatus: ✅ Passed
📊 Detailed results are available in the playwright-final-report artifact. Run: #7370 |
|
@nihal467 looks fine |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Proposed Changes
Fixes #15842
Tagging: @ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
Release Notes
New Features
Style