UX Enhancement for Middleware Override Workflow #9358
Conversation
prefilled middleware displayed as message in asset congiguration, added new attributes `message` and `messageClass` to `FormFeild` component`
add fine default behaviour text in facility configuration page
|
Warning Rate limit exceeded@saikiranpatil has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 2 minutes and 17 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (1)
WalkthroughThe changes in this pull request involve modifications across several components to enhance the user interface by replacing tooltips with direct message displays in form fields. Specifically, the Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
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. |
![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 (1)
src/components/Assets/AssetType/HL7Monitor.tsx (1)
105-109: Consider enhancing message clarity and maintainabilityWhile the implementation works, consider these improvements:
- Use an enum or constant for the "asset" source type
- Structure the message text for better maintainability
+ const MIDDLEWARE_SOURCE = { + ASSET: "asset" + } as const; + + const getMiddlewareMessage = (source?: string) => { + return source && source !== MIDDLEWARE_SOURCE.ASSET + ? `Middleware hostname sourced from ${source}` + : undefined; + }; <TextFormField message={ - resolvedMiddleware?.source != "asset" - ? `Middleware hostname sourced from asset ${resolvedMiddleware?.source}` - : undefined + getMiddlewareMessage(resolvedMiddleware?.source) }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (7)
src/components/Assets/AssetType/HL7Monitor.tsx(1 hunks)src/components/CameraFeed/ConfigureCamera.tsx(1 hunks)src/components/Facility/AddLocationForm.tsx(1 hunks)src/components/Facility/FacilityConfigure.tsx(1 hunks)src/components/Facility/LocationManagement.tsx(5 hunks)src/components/Form/FormFields/FormField.tsx(2 hunks)src/components/Form/FormFields/Utils.ts(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- src/components/Facility/AddLocationForm.tsx
- src/components/Facility/FacilityConfigure.tsx
🔇 Additional comments (8)
src/components/Form/FormFields/Utils.ts (1)
23-23: LGTM: Type definitions for new message properties
The addition of message and messageClassName optional properties to FormFieldBaseProps provides a clean way to support the new messaging functionality while maintaining backward compatibility.
Also applies to: 27-27
src/components/Form/FormFields/FormField.tsx (2)
51-68: LGTM: Well-structured message component implementation
The FieldMessageText component follows established patterns and includes proper transition effects. The use of primary-400 color effectively distinguishes informative messages from error text.
95-98: LGTM: Clean integration of message component
The message component is properly integrated into the FormField component, maintaining consistency with the existing error text display pattern.
src/components/Assets/AssetType/HL7Monitor.tsx (1)
105-109: Verify consistent middleware source handling
Let's ensure the middleware source message implementation is consistent across all relevant components.
✅ Verification successful
Middleware source handling is consistent across components
The implementation is consistent with other components in the codebase:
- Both
ConfigureCamera.tsxandHL7Monitor.tsxuse the same pattern to display middleware source messages - Both check
resolvedMiddleware?.source != "asset"condition - Both provide informative messages about the source of middleware hostname
- Other middleware-related messages in
FacilityConfigure.tsxandAddLocationForm.tsxserve different purposes and don't need this specific source handling
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for other components that might need similar middleware source handling
rg -l "middleware.*source|resolvedMiddleware" --type ts --type tsx
# Look for existing message implementations in form fields
rg "message[=:].*middleware" --type ts --type tsx
Length of output: 176
Script:
#!/bin/bash
# Search for other components that might need similar middleware source handling
rg -t typescript -t javascriptreact -t typescriptreact -l "middleware.*source|resolvedMiddleware"
# Look for existing message implementations in form fields
rg -t typescript -t javascriptreact -t typescriptreact "message[=:].*middleware"
Length of output: 252
Script:
#!/bin/bash
# First, let's find all TypeScript and React files that might contain middleware source handling
fd -e ts -e tsx | xargs rg -l "middleware.*source|resolvedMiddleware"
# Then search for message implementations related to middleware
fd -e ts -e tsx | xargs rg "message[=:].*middleware"
Length of output: 510
Script:
#!/bin/bash
# Let's examine the middleware source handling in ConfigureCamera.tsx
rg -A 5 -B 5 "middleware.*source|resolvedMiddleware" src/components/CameraFeed/ConfigureCamera.tsx
# And check the specific implementation in HL7Monitor.tsx for comparison
rg -A 5 -B 5 "middleware.*source|resolvedMiddleware" src/components/Assets/AssetType/HL7Monitor.tsx
Length of output: 2218
src/components/Facility/LocationManagement.tsx (3)
30-30: LGTM: Clean implementation of facility middleware state management
The implementation properly handles facility middleware through well-typed props and efficient state management using React hooks.
Also applies to: 46-57
286-293: LGTM: Clear and informative middleware source display
The implementation effectively communicates the middleware source to users, aligning with the PR's UX enhancement goals.
298-298: LGTM: Well-structured middleware fallback logic
The implementation properly handles the middleware address display hierarchy, falling back to facility middleware when appropriate.
src/components/CameraFeed/ConfigureCamera.tsx (1)
154-161: LGTM: Improved middleware source visibility
The implementation effectively replaces tooltips with direct messages, improving user experience by making middleware source information immediately visible.
|
@ohcnetwork/care-fe-code-reviewers @nihal467 please review this PR |
|
I don't think the color scheme fits with rest of the UI 🤔 Plus, we should probably add the note as a badge on Location management page. I'll ping the design team in Slack for feedback. |
|
Let's also switch to using shadcn's input fields from the |
agreed, |
|
i also tried to change the color to gray (color used in few elements) as below, let me know if looks better |
@rithviknishad were the recent changes made as expected? |
| </p> | ||
| </span> | ||
| {!middleware_address && facilityMiddleware && ( | ||
| <span className="ml-2 mt-2 text-xs h-fit rounded-full border-2 border-primary-500 bg-primary-100 px-3 py-[3px]"> |
There was a problem hiding this comment.
Make use of the badge component (src/components/ui) here instead of custom logic.
As for the UI feedback, I'd wait for design team to respond.
Proposed Changes
Closes UX Enhancement for Middleware Override Workflow. #8335
Changes
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
New Features
Bug Fixes
Refactor
Chores