Handle no option available case when local body returns empty response

[mohanrajnambe]

Proposed Changes

• Fixes Dropdown collapse when no data for local body #7355
• disable the select menu and override the placeholder with "No options available" in local body dropdown

@coronasafe/care-fe-code-reviewers @coronasafe/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

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
care-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 8, 2024 6:53am

[netlify]

✅ Deploy Preview for care-egov-staging ready!

Name	Link
🔨 Latest commit	80a9ef1
🔍 Latest deploy log	https://app.netlify.com/sites/care-egov-staging/deploys/660852f99cdf1600073902a4
😎 Deploy Preview	https://deploy-preview-7359--care-egov-staging.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.

[rithviknishad]

Wouldn't this be better if we moved this logic to the Select Menu component itself so it'd be applicable in all use cases?

[mohanrajnambe]

That is a holistic approach. Let me update the PR accordingly!

[vercel]

@mohanrajnambe is attempting to deploy a commit to the Open Healthcare Network Team on Vercel.

A member of the Team first needs to authorize it.

[mohanrajnambe]

Wouldn't this be better if we moved this logic to the Select Menu component itself so it'd be applicable in all use cases?

Since the logic of either disabling or the placeholder text 'No options available' relies on the length of the option, taking that into selectmenu component is not viable unless we bring in a new prop to configure that again. So, 'options.length' is a good to have in the component which is utilising the SelectFormField(SelectMenuV2)

LMK your thoughts

[rithviknishad]

But options.length is accessible inside SelectMenu component too right, and since we need to make the behaviour same across the platform, it'd require changes to be made in all the references and not ideal.

[mohanrajnambe]

I understand that we are trying to handle it in the root.

Validating the options.length for placeholder text will lead to display 'No options available' instead of 'Choose of an option' at the first render.

Here we bring data based on some other action. (for eg. based on what city is selected)

If we rely on options.length in the selectMenu itself, we loose the 'choose an option' placeholder initially and tend to display the 'no option available'. This is not the right way. Either we should handle it at where we use the component
or
Another approach to handle this is to move away from showing 'no option available' in the placeholder. Rather displaying an option when the selectmenu is clicked as 'no option available'(disabled thereby cannot select this as well).

We can disable the selectmenu based on option.length but the user will not know why it is disabled.

[rithviknishad]

For the placeholder, simply show "Choose an option" if options.length > 0 else show "No options" and disable the component.

[github-actions]

Hi, This pr has been automatically marked as stale because it has not had any recent activity. It will be automatically closed if no further activity occurs for 7 more days. Thank you for your contributions.

[github-actions]

👋 Hi, @mohanrajnambe,
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.

[mohanrajnambe]

When we have options loaded for State select, is displays the provided placeholder.
When the State select is not chosen, other dependent District select is disabled with No options placeholder

@rithviknishad

[mohanrajnambe]

@rithviknishad
I have merged develop into this issue branch. But still the merge-conflicts label stays in this PR whereas when I compare it states that it can be merged

Any thoughts?

[rithviknishad]

LGTM

[nihal467]

LGTM

[github-actions]

@mohanrajnambe Your efforts have helped advance digital healthcare and TeleICU systems. 🚀 Thank you for taking the time out to make CARE better. We hope you continue to innovate and contribute; your impact is immense! 🙌