feat(service-portal): Revert modal upgrade #16080
Conversation
This reverts commit 6bfcab3.
WalkthroughThe changes involve the refactoring of modal components within the service portal. The existing Changes
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
Documentation and Community
|
thorkellmani
added
the
deprecated:automerge
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #16080 +/- ##
=======================================
Coverage 36.66% 36.66%
=======================================
Files 6748 6748
Lines 138720 138720
Branches 39403 39403
=======================================
Hits 50862 50862
Misses 87858 87858
Flags with carried forward coverage won't be shown. Click here to find out more.
Continue to review full report in Codecov by Sentry.
|
Datadog ReportAll test runs ✅ 3 Total Test Services: 0 Failed, 2 Passed Test Services
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range and nitpick comments (1)
libs/service-portal/health/src/components/RegisterModal/RegisterModal.css.ts (1)
3-11: Consider using a more responsivemaxWidthvalue.The fixed
maxWidthof '55.5rem' may not be optimal for all screen sizes. Consider using a more responsive value, such as a percentage or a CSS variable, to ensure the modal adapts better to different screen sizes.
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (7)
- libs/service-portal/core/src/components/Modal/Modal.css.ts (0 hunks)
- libs/service-portal/core/src/components/Modal/Modal.tsx (2 hunks)
- libs/service-portal/health/src/components/RegisterModal/RegisterModal.css.ts (1 hunks)
- libs/service-portal/health/src/components/RegisterModal/RegisterModal.tsx (1 hunks)
- libs/service-portal/health/src/components/RegisterModal/index.ts (1 hunks)
- libs/service-portal/health/src/screens/DentistRegistration/DentistRegistration.tsx (4 hunks)
- libs/service-portal/health/src/screens/HealthCenterRegistration/HealthCenterRegistration.tsx (3 hunks)
Files not reviewed due to no reviewable changes (1)
- libs/service-portal/core/src/components/Modal/Modal.css.ts
Files skipped from review due to trivial changes (1)
- libs/service-portal/health/src/components/RegisterModal/index.ts
Additional context used
Path-based instructions (5)
libs/service-portal/core/src/components/Modal/Modal.tsx (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/service-portal/health/src/components/RegisterModal/RegisterModal.css.ts (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/service-portal/health/src/components/RegisterModal/RegisterModal.tsx (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/service-portal/health/src/screens/DentistRegistration/DentistRegistration.tsx (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/service-portal/health/src/screens/HealthCenterRegistration/HealthCenterRegistration.tsx (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
Biome
libs/service-portal/health/src/screens/DentistRegistration/DentistRegistration.tsx
[error] 166-166: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
Additional comments not posted (18)
libs/service-portal/health/src/components/RegisterModal/RegisterModal.css.ts (5)
13-16: LGTM!The
modalGridStyleobject effectively establishes a grid layout for the modal's content with well-balanced column fractions.
18-20: LGTM!The
modalGridContentStyleobject correctly positions the modal's content in the second column of the grid, aligning with the defined grid template.
22-24: LGTM!The
modalGridImageStyleobject effectively centers the modal's image within its grid cell, ensuring proper alignment.
26-31: LGTM!The
closeModalButtonStyleobject effectively positions the close button in the top-right corner of the modal and sets the appropriate cursor style for user interaction.
33-37: LGTM!The
modalGridButtonGroupobject effectively organizes buttons within the modal in a flexible row layout with a consistent gap between buttons, enhancing usability.libs/service-portal/core/src/components/Modal/Modal.tsx (2)
1-3: Imports adhere to reusability and TypeScript guidelines.The imports are sourced from a reusable library, use named imports for effective tree-shaking, and leverage TypeScript for type definitions. This aligns with the additional instructions provided.
31-31: Modal close logic is correct.The
handleOnVisibilityChangefunction correctly calls theonCloseModalcallback when the modal is not visible. The logic is straightforward and has no apparent issues.libs/service-portal/health/src/components/RegisterModal/RegisterModal.tsx (4)
1-99: LGTM! TheRegisterModalcomponent is well-implemented and follows best practices.The component provides a clear and user-friendly interface for registering with a health center by selecting a doctor. It effectively utilizes the
useLocalehook for internationalization and follows a modular structure with a clear separation of concerns.
1-99: Verify the reusability of the component across different NextJS apps.The
RegisterModalcomponent seems to be designed in a reusable manner, with a clear set of props that can be easily integrated into different parts of the application. However, please ensure that the component can be seamlessly used across different NextJS apps without any dependencies on the specific app's context or state.
15-24: Effective use of TypeScript for defining props.The component effectively utilizes TypeScript by defining the props using a type alias
RegisterModalProps. This ensures type safety and provides clear documentation for the component's expected inputs.
1-99: Ensure that the component is tree-shakable and can be effectively bundled.The component seems to be well-structured and modular, which should allow for effective tree-shaking and bundling. However, please verify that the component and its dependencies are properly exported and imported to ensure optimal bundling and minimize the final bundle size.
libs/service-portal/health/src/screens/DentistRegistration/DentistRegistration.tsx (4)
16-16: LGTM!The import statement is correct and adheres to the reusability guideline for the
libsdirectory.
25-25: LGTM!The import statement is correct and adheres to the reusability guideline for the
libsdirectory.
161-184: LGTM!The
RegisterModalcomponent is correctly rendered and configured based on the component state. The code segment adheres to the reusability guideline for thelibsdirectory.Tools
Biome
[error] 166-166: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
222-234: LGTM!The
Buttoncomponent is correctly rendered and configured based on the component state. TheonClickprop correctly updates theselectedDentiststate with the current dentist's data.The static analysis hint is a false positive, as the
selectedDentiststate is always set with an object containing theidandnameproperties. No changes are needed.libs/service-portal/health/src/screens/HealthCenterRegistration/HealthCenterRegistration.tsx (3)
29-29: LGTM!The import statement for the
RegisterModalcomponent looks good. It follows the correct naming convention and is imported from the expected local path.
240-254: LGTM!The usage of the
RegisterModalcomponent looks good:
- The modal's visibility is correctly controlled by the
selectedHealthCenterstate.- The modal's title and description are dynamically populated using the
formatMessagefunction, providing context-specific information.- The
onClosehandler correctly resets the necessary states when the modal is closed.- The
onAccepthandler appropriately invokes thehandleHealthCenterTransferfunction to initiate the registration process.- The
healthCenterDoctorsprop allows the modal to display the list of doctors associated with the selected health center.
309-323: LGTM!The usage of the
Buttoncomponent within the table cell looks good:
- The button's visibility is correctly controlled by the
hoverIdstate, ensuring it is only visible when the corresponding table row is hovered.- The
onClickhandler appropriately sets theselectedHealthCenterstate with the necessary information (idandname) of the selected health center.- The button's label is dynamically populated using the
formatMessagefunction, providing a localized label for the button.
This reverts commit 6bfcab3.
This reverts commit 6bfcab3. Co-authored-by: Þorkell Máni Þorkelsson <[email protected]>
This reverts commit 6bfcab3.
What
Why
Checklist:
Summary by CodeRabbit
Release Notes
New Features
RegisterModalcomponent for user registration with health centers, simplifying the registration process.RegisterModal, enhancing its visual appeal and usability.Improvements
Modalcomponent by removing unnecessary props and state management, focusing on a more streamlined design.Bug Fixes
These changes enhance user experience and streamline the registration process within the application.