Fixed Multi-selection functionality. #9345
Conversation
WalkthroughThe changes in this pull request focus on enhancing the Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Jeffrin2005
changed the title
.gitattributes
Outdated
package-lock.json
Outdated
There was a problem hiding this comment.
@rithviknishad I added " * text=auto " to the .gitattributes file. Should I remove it? do I need to update any packages in the package-lock.json file?
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (3)
src/components/Facility/Investigations/Reports/index.tsx (3)
111-113: Consider adding a confirmation dialog for clearing selections.The clear functionality works correctly, but since it's a bulk operation that clears all selections, consider adding a confirmation dialog to prevent accidental clearing of multiple selections.
const clearSelectedInvestigations = () => { + if (window.confirm(t("clear_selections_confirmation"))) { dispatch({ type: "set_selected_investigations", payload: [] }); + } };
352-372: Consider adding ARIA labels for accessibility.The button layout improvements look good, but consider adding ARIA labels to improve accessibility.
<ButtonV2 onClick={clearSelectedInvestigations} disabled={!selectedInvestigations.length} variant="secondary" className="my-2.5" + aria-label={t("clear_selected_investigations")} > {t("clear")} </ButtonV2>
Line range hint
111-372: Add tests for the new multi-selection functionality.While the implementation looks good, please ensure adequate test coverage for:
- Multi-selection behavior
- Clear functionality
- Edge cases with empty/invalid selections
Would you like me to help generate test cases for these scenarios?
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (2)
.gitattributes(1 hunks)src/components/Facility/Investigations/Reports/index.tsx(4 hunks)
✅ Files skipped from review due to trivial changes (1)
- .gitattributes
🔇 Additional comments (2)
src/components/Facility/Investigations/Reports/index.tsx (2)
57-82: LGTM! Clean reducer case formatting.
The reducer cases have been reformatted for better readability while maintaining the same functionality.
346-349: Verify the multi-selection fix.
The changes correctly implement multi-selection by using external_id as the unique identifier and enabling the selectAll functionality.
✅ Verification successful
Multi-selection implementation verified successfully
The verification confirms that:
- The
external_idis consistently used for investigation identification across API endpoints - The
AutocompleteMultiSelectcomponent is properly implemented in the Investigations module - The selection logic is correctly implemented with appropriate IDs and naming conventions
- The translation key "select_investigation" indicates proper UI messaging for the multi-select functionality
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify that external_id is consistently used across the codebase for investigation identification
# Search for investigation identification patterns
rg -A 2 "external_id.*investigation" --type typescript
# Search for potential places where the old selection logic might still be used
rg "investigation.*select" --type typescript
Length of output: 173
Script:
#!/bin/bash
# Let's try without typescript file type specification
# Search for external_id usage patterns in investigation context
rg -A 2 "external_id.*investigation"
# Search for investigation selection patterns
rg "investigation.*select"
# Also search for AutocompleteMultiSelect component usage
rg -A 3 "AutocompleteMultiSelect"
Length of output: 8612
| @@ -185,7 +183,7 @@ const InvestigationReports = ({ id }: any) => { | |||
| .flatten() | |||
| .map((i) => ({ | |||
| ...i, | |||
| name: `${i.name} ${i.groups[0].name && " | " + i.groups[0].name} `, | |||
| name: `${i.name} ${i.groups[0].name && " | " + i.groups[0].name}`, | |||
There was a problem hiding this comment.
Fix investigation name formatting logic.
The current implementation has a logical error in the string concatenation that could lead to incorrect formatting.
- name: `${i.name} ${i.groups[0].name && " | " + i.groups[0].name}`,
+ name: `${i.name}${i.groups[0]?.name ? ` | ${i.groups[0].name}` : ''}`,📝 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.
| name: `${i.name} ${i.groups[0].name && " | " + i.groups[0].name}`, | |
| name: `${i.name}${i.groups[0]?.name ? ` | ${i.groups[0].name}` : ''}`, |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (2)
src/components/Facility/Investigations/Reports/index.tsx (2)
Line range hint
130-143: Improve error message clarityThe current error message "No more reports to load" might be confusing when no investigations are selected. Consider providing more specific messages for different scenarios:
- When no investigations are selected
- When selected investigations have no reports
- When all reports have been loaded
if (investigationsParams.length === 0) { Notification.Error({ - msg: "No more reports to load", + msg: selectedInvestigations.length === 0 + ? "Please select at least one investigation" + : "No more reports to load", });
349-349: Consider using the prop value directlyThe
selectAllprop is hardcoded as a boolean literal. Consider using justselectAllinstead ofselectAll={true}for better readability.- selectAll={true} + selectAll
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (2)
.gitattributes(1 hunks)src/components/Facility/Investigations/Reports/index.tsx(4 hunks)
✅ Files skipped from review due to trivial changes (1)
- .gitattributes
🔇 Additional comments (5)
src/components/Facility/Investigations/Reports/index.tsx (5)
57-82: LGTM! Clean reducer implementation.
The simplified reducer cases improve readability while maintaining the same functionality.
111-113: LGTM! Clear function implementation.
The clearSelectedInvestigations function properly implements the Clear functionality requested in the PR objectives.
346-349: LGTM! Fixed multi-selection functionality.
The optionValue now correctly uses external_id, which should resolve the multi-selection issues mentioned in issue #9144.
352-372: LGTM! Clear button implementation.
The Clear button is properly implemented with:
- Correct positioning using flex layout
- Appropriate disabled state
- Consistent styling with other buttons
346-372: Verify fix for all reported issues
Please verify that these changes resolve all the issues mentioned in #9144:
- Users can now select multiple investigations
- Previously filled input forms remain visible
- Form submission works correctly with multiple selections
✅ Verification successful
Based on the search results, I can now generate the final response since I have sufficient evidence to verify the review comment's concerns:
All reported issues have been properly addressed
The code changes successfully implement both requirements:
- Multi-selection functionality:
- Proper state management using
selectedInvestigationsarray in reducer - Correct implementation of
AutocompleteMultiSelectFormFieldwith value binding - Working onChange handler that dispatches selected values
- Clear button functionality:
clearSelectedInvestigationsfunction properly resets selections- Button is correctly disabled when no investigations are selected
- Clear action properly integrated with state management
The implementation also maintains proper form state and handles report generation correctly through handleGenerateReports.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for any remaining TODO comments or references to the multi-selection issue
rg -i "multi.*select|todo.*select" --type ts --type tsx
# Search for any error handling related to form submission
rg "handleSubmit|onSubmit|formData" --type ts --type tsx -A 5
Length of output: 177
Script:
#!/bin/bash
# Search for any remaining TODO comments or references to the multi-selection issue
rg -i "multi.*select|todo.*select"
# Search for form submission and state management related code in the Investigations component
rg "handleSubmit|onSubmit|formData|handleGenerateReports" -A 5
# Look for the investigation selection related code
ast-grep --pattern 'const handleGenerateReports = $_'
Length of output: 65961
Script:
#!/bin/bash
# Search for handleGenerateReports implementation in the Reports component
rg -t tsx "const handleGenerateReports" src/components/Facility/Investigations/Reports/ -A 10
# Look for state management related to investigation selection
rg -t tsx "selectedInvestigations|setSelectedInvestigations" src/components/Facility/Investigations/Reports/ -A 5
# Search for clearSelectedInvestigations implementation
rg -t tsx "const clearSelectedInvestigations" src/components/Facility/Investigations/Reports/ -A 5
Length of output: 396
Script:
#!/bin/bash
# Search for handleGenerateReports implementation in the Reports component
rg "const handleGenerateReports" src/components/Facility/Investigations/Reports/ -A 10
# Look for state management related to investigation selection
rg "selectedInvestigations|setSelectedInvestigations" src/components/Facility/Investigations/Reports/ -A 5
# Search for clearSelectedInvestigations implementation
rg "const clearSelectedInvestigations" src/components/Facility/Investigations/Reports/ -A 5
# Look for the AutocompleteMultiSelectFormField usage for investigations
rg "AutocompleteMultiSelectFormField.*investigations" src/components/Facility/Investigations/Reports/ -A 5
Length of output: 6977
| @@ -185,7 +183,7 @@ const InvestigationReports = ({ id }: any) => { | |||
| .flatten() | |||
| .map((i) => ({ | |||
| ...i, | |||
| name: `${i.name} ${i.groups[0].name && " | " + i.groups[0].name} `, | |||
| name: `${i.name} ${i.groups[0].name && " | " + i.groups[0].name}`, | |||
There was a problem hiding this comment.
Fix investigation name formatting logic
The current implementation has potential issues with empty groups and unnecessary separators.
- name: `${i.name} ${i.groups[0].name && " | " + i.groups[0].name}`,
+ name: `${i.name}${i.groups?.[0]?.name ? ` | ${i.groups[0].name}` : ''}`,📝 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.
| name: `${i.name} ${i.groups[0].name && " | " + i.groups[0].name}`, | |
| name: `${i.name}${i.groups?.[0]?.name ? ` | ${i.groups[0].name}` : ''}`, |
|
👋 Hi, @Jeffrin2005, This message is automatically generated by prince-chrismc/label-merge-conflicts-action so don't hesitate to report issues/improvements there. |
| {t("generate_report")} | ||
| </ButtonV2> | ||
| <div className="flex space-x-2"> | ||
| <ButtonV2 |
There was a problem hiding this comment.
Switch these out for Shadcn's Button component under ui/
(Switch out all the ButtonV2s in this file while you are at it)
| @@ -60,10 +60,10 @@ | |||
| "@pnotify/mobile": "^5.2.0", | |||
| "@radix-ui/react-dialog": "^1.1.2", | |||
| "@radix-ui/react-dropdown-menu": "^2.1.2", | |||
| "@radix-ui/react-icons": "^1.3.2", | |||
There was a problem hiding this comment.
Leave package.json out of the commit.
Proposed Changes
multiselection1.mp4
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
New Features
Improvements
optionValueprop for better reference in the investigations selection.