displaying full names on hover for long names only #8972
Conversation
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
…hub.com/SwanandBhuskute/care_fe into issues/7787/displayOnlyLongNamesOnHover
|
@SwanandBhuskute Can you add links to example assets where the feature can be seen in action? Also attach Before and After Screenshots |
https://care.ohc.network/assets Before hovering: After hovering optional working video Recording.2024-11-04.195846.mp4 |
There was a problem hiding this comment.
- let's not use css when tailwind classes can achieve the same.
- have a look at how tooltip's shown in other places in care. We have a custom CSS class defined to show tooltips. Utilise those classes instead.
Line 36 in 5877d9b
so I should do changes in CAREUI.css file? |
No why? Just use those classes like how it's used in other places to show tooltips. |
…into issues/7787/displayOnlyLongNamesOnHover
…hub.com/SwanandBhuskute/care_fe into issues/7787/displayOnlyLongNamesOnHover
Using tooltip and tooltip-top classes so using tailwind only, to achieve same effect as earlier without extra style attribute inside |
|
@SwanandBhuskute you can use it in conjuction with |
WalkthroughThe changes made in the Changes
Assessment against linked issues
Poem
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 (
|
…into issues/7787/displayOnlyLongNamesOnHover
…hub.com/SwanandBhuskute/care_fe into issues/7787/displayOnlyLongNamesOnHover
@rithviknishad i have done as you said, kindly review |
![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/AssetsList.tsx (1)
Line range hint
89-142: Optimize error handling in QR code processingThe error handling can be improved by:
- Consolidating the loading state management
- Adding specific error types
- Improving error messages
Consider this refactor:
const accessAssetIdFromQR = async (assetURL: string) => { + const resetLoadingState = () => { + setIsLoading(false); + setIsScannerActive(false); + }; + try { setIsLoading(true); - setIsScannerActive(false); if (!isValidURL(assetURL)) { - setIsLoading(false); + resetLoadingState(); Notification.Error({ - msg: t("invalid_asset_id_msg"), + msg: t("invalid_qr_url_format"), }); return; } const params = parseQueryParams(assetURL); const assetId = params.asset || params.assetQR; if (assetId) { const { data } = await request(routes.listAssetQR, { pathParams: { qr_code_id: assetId }, }); if (!data) { - setIsLoading(false); + resetLoadingState(); Notification.Error({ - msg: t("invalid_asset_id_msg"), + msg: t("asset_qr_not_found"), }); return; } const { data: assetData } = await request(routes.listAssets, { query: { qr_code_id: assetId, limit: 1 }, }); if (assetData?.results.length === 1) { navigate( `/facility/${assetData.results[0].location_object.facility?.id}/assets/${assetData.results[0].id}`, ); } else { - setIsLoading(false); + resetLoadingState(); Notification.Error({ msg: t("asset_not_found_msg"), }); } } else { - setIsLoading(false); + resetLoadingState(); Notification.Error({ - msg: t("invalid_asset_id_msg"), + msg: t("missing_asset_id_in_qr"), }); } - } catch (err) { + } catch (err: unknown) { + resetLoadingState(); Notification.Error({ - msg: t("invalid_asset_id_msg"), + msg: err instanceof Error ? err.message : t("qr_processing_error"), }); - } finally { - setIsLoading(false); } };
|
LGTM |
|
@SwanandBhuskute 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! 🙌 |
Proposed Changes
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
New Features
Bug Fixes