FIxes the container width on Collapse of sidebar #3010
Conversation
|
Note Currently processing new changes in this PR. This may take a few minutes, please wait... 📒 Files selected for processing (2)
WalkthroughThe pull request introduces changes to the Chat component's styling and testing in the user portal. The modifications focus on dynamically adjusting the main chat container's classes based on the sidebar's visibility state. A new test case is added to verify the class name changes, ensuring that the chat interface responds correctly when the drawer is opened or closed. Changes
Sequence DiagramsequenceDiagram
participant User
participant ChatComponent
participant Sidebar
User->>Sidebar: Click to collapse/expand
Sidebar->>ChatComponent: Update hideDrawer state
ChatComponent->>ChatComponent: Apply dynamic classes
ChatComponent->>UI: Render with expanded/contracted layout
Assessment against linked issues
Suggested reviewers
Poem
Tip You can make CodeRabbit's review more strict using the `assertive` profile, if that's what you prefer.Change the 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
|
Our Pull Request Approval ProcessThanks for contributing! Testing Your CodeRemember, your PRs won't be reviewed until these criteria are met:
Our policies make our code better. ReviewersDo not assign reviewers. Our Queue Monitors will review your PR and assign them.
Reviewing Your CodeYour reviewer(s) will have the following roles:
CONTRIBUTING.mdRead our CONTRIBUTING.md file. Most importantly:
Other
|
![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
🧹 Nitpick comments (3)
src/screens/UserPortal/Chat/Chat.tsx (1)
155-164: Consider refactoring the nested ternary expression and addressing indentation.While the dynamic class application is correct, the nested ternary can reduce readability. Using a more descriptive helper function or separate conditional checks could make the code clearer. Additionally, static analysis warns about inconsistent indentation at line 162. Please ensure that indentation is consistent to satisfy style guidelines.
155 <div 156 className={`d-flex flex-row ${styles.containerHeight} ${ 157 hideDrawer === null 158 ? '' 159 : hideDrawer 160 ? styles.expand 161 : styles.contract 162 }`} 163 data-testid="conditional-rendering" 164 > +// Example alternative for readability: +// const containerClass = () => { +// if (hideDrawer === null) return ''; +// return hideDrawer ? styles.expand : styles.contract; +// }; +// +// <div +// className={`d-flex flex-row ${styles.containerHeight} ${containerClass()}`} +// data-testid="conditional-rendering" +// >🧰 Tools
🪛 eslint
[error] 162-162: Delete
··(prettier/prettier)
src/screens/UserPortal/Chat/Chat.test.tsx (2)
1696-1696: Remove unnecessary whitespace.Static analysis flags an unexpected indentation at line 1696. This extra spacing should be removed to maintain code consistency.
🧰 Tools
🪛 eslint
[error] 1696-1696: Delete
··(prettier/prettier)
1754-1755: Remove trailing blank line.Static analysis suggests removing the extra blank line to adhere to the project's style guidelines and keep the file tidy.
🧰 Tools
🪛 eslint
[error] 1754-1755: Delete
⏎(prettier/prettier)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (2)
src/screens/UserPortal/Chat/Chat.test.tsx(2 hunks)src/screens/UserPortal/Chat/Chat.tsx(1 hunks)
🧰 Additional context used
🪛 eslint
src/screens/UserPortal/Chat/Chat.tsx
[error] 162-162: Delete ··
(prettier/prettier)
src/screens/UserPortal/Chat/Chat.test.tsx
[error] 1696-1696: Delete ··
(prettier/prettier)
[error] 1754-1755: Delete ⏎
(prettier/prettier)
🔇 Additional comments (1)
src/screens/UserPortal/Chat/Chat.test.tsx (1)
1697-1754: Good test coverage for class name changes.
This test verifies that the container's classes are updated as expected when the drawer is toggled. The step-by-step interactions ensure accurate validation of both styles.expand and styles.contract. The code is well-structured and easy to follow.
|
@palisadoes could you please let me know what changes should i make? |
|
Please submit your PRs against our Also if applicable, make sure your branch name is different from Closing. |
|
@palisadoes im not able to "chat" in develop-postgres. |
What kind of change does this PR introduce?
Bugfix
Issue Number:
Fixes #2994
Did you add tests for your changes?
Yes,
This is my first time writing Unit Test
Snapshots/Videos:
Solution.mp4
If relevant, did you update the documentation?
Summary
This PR improves the sidebar's interactivity by dynamically changing the container's className based on the hideDrawer state. It allows the sidebar to expand or collapse when the menu button is clicked, enhancing user experience.
Does this PR introduce a breaking change?
No
Other information
Have you read the contributing guide?
Yes
Summary by CodeRabbit