Fix: Address and Map icon alignment #9722

abhimanyurajeesh · 2025-01-04T02:25:04Z

Proposed Changes

Visual Changes Explanation (User Interface Side)

When the changes were made to the renderGeoOrganizations function, the following updates were reflected on the UI (User Interface) side:

✅ Before Changes:

Full Hierarchy Shown: The entire organizational hierarchy was displayed.
Arrow Separators (→): Arrows were used between every level to show a clear parent-child relationship.
Example Display:
    Region A → Region B → Region C

✅ After Changes (New UI Behavior):

Only Last Two Items Displayed: Now, only the last two elements in the organizational hierarchy are shown instead of the full hierarchy.
Arrow Removed: The arrow (→) separators have been completely removed for a cleaner look.
Space Between Items: A small space (&nbsp;) has been added between the last two items for better readability.
Example Display Now:
    Region B Region C (Only the last two with a space, no arrow)

@ohcnetwork/care-fe-code-reviewers

Merge Checklist

Add specs that demonstrate bug / test a new feature.
Update product documentation.
Ensure that UI text is kept in I18n files.
Prep screenshot or demo video for changelog entry, and attach it to issue.
Request for Peer Reviews
Completion of QA

Summary by CodeRabbit

Style
- Adjusted layout and spacing of organization details and MapPin icon
- Improved visual presentation of facility home component
Refactor
- Modified rendering logic for organization details
- Optimized display of organization information

netlify · 2025-01-04T02:25:28Z

✅ Deploy Preview for care-ohc ready!

Name	Link
🔨 Latest commit	`a791d21`
🔍 Latest deploy log	https://app.netlify.com/sites/care-ohc/deploys/67789c03b9e8f40008c44567
😎 Deploy Preview	https://deploy-preview-9722--care-ohc.netlify.app
📱 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 site configuration.

coderabbitai · 2025-01-04T02:26:58Z

Walkthrough

The pull request introduces modifications to the FacilityHome.tsx component, focusing on the renderGeoOrganizations function. The changes involve creating a new filteredDetails variable by manipulating the parentDetails array, ensuring only the last two elements are retained. The rendering logic has been updated to use a flex class for improved layout control, and the MapPin icon's margin has been adjusted from mt-1 to mt-3 to modify its vertical spacing.

Changes

File	Change Summary
`src/components/Facility/FacilityHome.tsx`	- Modified `renderGeoOrganizations` function to create `filteredDetails` - Updated rendering logic with `flex` class - Adjusted `MapPin` icon margin from `mt-1` to `mt-3`

Possibly related PRs

Add function to authorize user to register patient #9000: Modifies FacilityHome.tsx with a new user authorization function for patient registration
Fix: Duplicate network requests in Patient Details page #9297: Addresses duplicate network requests in Patient Details page
fix: DateInput and Actions button not optimised for mobile viewports #9432: Adjusts layout and functionality of buttons in PatientHome.tsx
Fix: PatientNoteCard Text Overflowing and Current Address #9609: Resolves text overflow issues in PatientNoteCard component

Suggested labels

tested, reviewed

Suggested reviewers

rithviknishad
Jacobjeevan

Poem

🐰 A Rabbit's Ode to Layout Delight

Flex and margins, dancing just right,
Two details slice, a visual might,
MapPin leaps with a margin so bold,
In FacilityHome, a story untold!
Code hops, UI gleams with glee 🌟

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?

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

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)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (2)

src/components/Facility/FacilityHome.tsx (2)
85-92: Avoid mutating the parentDetails array in place.

The usage of parentDetails.reverse() mutates the original array, which can lead to unexpected side effects if parentDetails is used elsewhere. To keep your code predictable, consider using a copy of the array before reversing:
-  const filteredDetails = parentDetails
-    .reverse()
-    .concat({
+  const reversedDetails = [...parentDetails].reverse();
+  const filteredDetails = reversedDetails.concat({
     label: getOrgLevelLabel(geoOrg.org_type, geoOrg.level_cache),
     value: geoOrg.name,
   })
   .slice(-2);
93-100: Consider a more robust or i18n-friendly separator.

Using a raw   can be a quick solution, but you may want to externalize or parametrize the separator for better i18n support or improved consistency. For instance, you could store a separator constant or use a translation string. This also makes it easier to replace the separator in the future if design requirements change.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 68c4c3d and a791d21.

📒 Files selected for processing (1)

src/components/Facility/FacilityHome.tsx (2 hunks)

🔇 Additional comments (1)

src/components/Facility/FacilityHome.tsx (1)

291-291: Verify the increased vertical spacing with mt-3.

Raising the margin from mt-1 to mt-3 may create extra blank space on small devices. Double-check the UI on different screen sizes to ensure it aligns with intended designs.

bodhish · 2025-01-04T15:03:53Z

src/components/Facility/FacilityHome.tsx

-        )}
-      </span>
-    ));
+    .slice(-2);


The LSG structure of a state/country can vary, we can't choose to trim it.
We should render everything.

oh okay will make the necessary changes for the same

@bodhish

FORMAT 1

OR

FORMAT 2

i think format 1, but orgs reversed would look good!

Also, add justify-between the phone number and address

github-actions · 2025-01-05T11:00:53Z

👋 Hi, @abhimanyurajeesh,
Conflicts have been detected against the base branch. Please rebase your branch against the base branch.

This message is automatically generated by prince-chrismc/label-merge-conflicts-action so don't hesitate to report issues/improvements there.

updated UI for address

a791d21

abhimanyurajeesh requested a review from a team as a code owner January 4, 2025 02:25

coderabbitai bot reviewed Jan 4, 2025

View reviewed changes

bodhish requested changes Jan 4, 2025

View reviewed changes

bodhish added the changes required label Jan 4, 2025

github-actions bot added the merge conflict pull requests with merge conflict label Jan 5, 2025

abhimanyurajeesh closed this Jan 5, 2025

abhimanyurajeesh deleted the UIimprovement branch January 5, 2025 11:34

abhimanyurajeesh restored the UIimprovement branch January 5, 2025 12:04

abhimanyurajeesh deleted the UIimprovement branch January 5, 2025 12:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix: Address and Map icon alignment #9722

Fix: Address and Map icon alignment #9722

abhimanyurajeesh commented Jan 4, 2025 •

edited

Loading

netlify bot commented Jan 4, 2025 •

edited

Loading

coderabbitai bot commented Jan 4, 2025 •

edited

Loading

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

coderabbitai bot left a comment

bodhish Jan 4, 2025

abhimanyurajeesh Jan 4, 2025

abhimanyurajeesh Jan 4, 2025 •

edited

Loading

rithviknishad Jan 5, 2025 •

edited

Loading

github-actions bot commented Jan 5, 2025

Fix: Address and Map icon alignment #9722

Fix: Address and Map icon alignment #9722

Conversation

abhimanyurajeesh commented Jan 4, 2025 • edited Loading

Proposed Changes

Merge Checklist

Summary by CodeRabbit

netlify bot commented Jan 4, 2025 • edited Loading

✅ Deploy Preview for care-ohc ready!

coderabbitai bot commented Jan 4, 2025 • edited Loading

Walkthrough

Changes

Possibly related PRs

Suggested labels

Suggested reviewers

Poem

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

coderabbitai bot left a comment

Choose a reason for hiding this comment

bodhish Jan 4, 2025

Choose a reason for hiding this comment

abhimanyurajeesh Jan 4, 2025

Choose a reason for hiding this comment

abhimanyurajeesh Jan 4, 2025 • edited Loading

Choose a reason for hiding this comment

rithviknishad Jan 5, 2025 • edited Loading

Choose a reason for hiding this comment

github-actions bot commented Jan 5, 2025

abhimanyurajeesh commented Jan 4, 2025 •

edited

Loading

netlify bot commented Jan 4, 2025 •

edited

Loading

coderabbitai bot commented Jan 4, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

abhimanyurajeesh Jan 4, 2025 •

edited

Loading

rithviknishad Jan 5, 2025 •

edited

Loading