Skip to content

fix: docs navigation dropdowns with the same title - #3488

Merged
mattinannt merged 1 commit into
formbricks:mainfrom
ChaseNelson:fix/docs-nav-dropdown
Oct 12, 2024
Merged

fix: docs navigation dropdowns with the same title#3488
mattinannt merged 1 commit into
formbricks:mainfrom
ChaseNelson:fix/docs-nav-dropdown

Conversation

@ChaseNelson

@ChaseNelson ChaseNelson commented Oct 11, 2024 •
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
Contributor

What does this PR do?

Fixes #3451

https://www.loom.com/share/103fe820b4ef4834b49860bc8455cd5a?sid=a7d1651a-0f8c-4fae-aa51-60804b3b5974

How should this be tested?

Checklist

Required

  • Filled out the "How to test" section in this PR
  • Read How we Code at Formbricks
  • Self-reviewed my own code
  • Commented on my code in hard-to-understand bits
  • Ran pnpm build
  • Checked for warnings, there are none
  • Removed all console.logs
  • Merged the latest changes from main onto my branch with git pull origin main
  • My changes don't cause any responsiveness issues
  • First PR at Formbricks? Please sign the CLA! Without it we wont be able to merge it 🙏

Appreciated

  • If a UI change was made: Added a screen recording or screenshots to this PR
  • Updated the Formbricks Docs if changes were necessary

Summary by CodeRabbit

  • New Features

    • Improved navigation experience by ensuring only one group can be open at a time.
    • Enhanced uniqueness of navigation links with updated key properties.

  • Bug Fixes

    • Corrected logic for determining the open state of parent links, improving the rendering of child links and icons.

@vercel

vercel Bot commented Oct 11, 2024

Copy link
Copy Markdown

@ChaseNelson is attempting to deploy a commit to the formbricks Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai

coderabbitai Bot commented Oct 11, 2024 •
edited
Loading

Copy link
Copy Markdown
Contributor

Walkthrough

The changes in the Navigation.tsx component focus on improving the handling of navigation groups and links. The toggleParentTitle function has been modified to ensure that only one navigation group can be open at a time by replacing the entire openGroups state with the new title. Additionally, key properties for list items have been updated to include the group title, enhancing uniqueness. The logic for determining the open state of parent links has also been refined to incorporate group titles, affecting the rendering of icons and child links.

Changes

File Path Change Summary
apps/docs/components/Navigation.tsx Modified toggleParentTitle to replace openGroups state, updated key properties for list items, and refined logic for open state of parent links.

Assessment against linked issues

Objective Addressed Explanation
Ensure only one navigation group can be opened at a time (#3451) ✅

Possibly related PRs

Suggested labels

bug, 🕹️ oss.gg, 🕹️ 150 points

Suggested reviewers

  • mattinannt

Poem

In the land of links and titles bright,
A toggle change brings pure delight.
One group to open, the rest to close,
Navigation flows, as everyone knows!
With chevrons dancing, a joyful sight,
Our docs now shine, all set just right! 🐇✨

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 0145589 and eb96073.

📒 Files selected for processing (1)
  • apps/docs/components/Navigation.tsx (3 hunks)
🧰 Additional context used
🔇 Additional comments (5)
apps/docs/components/Navigation.tsx (5)

167-167: Excellent fix for the dropdown issue!

This change ensures that only one group can be open at a time by replacing the entire openGroups array with a single title. This directly addresses the issue described in the PR objectives, where multiple dropdowns with the same title were causing conflicts. The new implementation is more straightforward and less prone to bugs.

189-189: Good improvement on list item keys

Including the group title in the key for motion.li ensures uniqueness across different groups. This change helps React efficiently update the DOM and prevents potential key conflicts, which is especially important when dealing with dynamic lists. It's a good practice to use unique and stable keys for list items.

197-204: Crucial update for proper navigation state management

The isParentOpen function now includes the group title in its check, which is essential for maintaining the correct state for nested links. This change is crucial for the proper functioning of the navigation, especially with the new single-open group behavior. It ensures that the chevron icons and child links are rendered correctly based on the open state of their parent group.

Also applies to: 209-213

219-219: Consistent update for child link rendering

The condition for rendering child links now includes the group title in the isParentOpen check. This change ensures that child links are only rendered when their specific parent group is open, which is consistent with the single-open group behavior. It effectively prevents unintended rendering of child links from other groups with the same title, addressing the core issue described in the PR objectives.

Line range hint 1-280: Overall assessment: Excellent solution to the dropdown issue

The changes in this file effectively address the problem described in the PR objectives. The implementation of a single-open group behavior, along with the consistent updates to key generation and state management, solves the issue of conflicting dropdowns with the same title. The code is well-structured, and the changes are applied consistently throughout the component.

These modifications will significantly improve the user experience on the documentation page by ensuring that dropdown menus behave as expected, even when they share the same title across different sections.

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 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.

@github-actions

github-actions Bot commented Oct 11, 2024 •
edited
Loading

Copy link
Copy Markdown
Contributor

Thank you for following the naming conventions for pull request titles! 🙏

@github-actions github-actions Bot added the bug Something isn't working label Oct 11, 2024
@mattinannt mattinannt added 🕹️ oss.gg Community issue via oss.gg 🕹️ 300 points labels Oct 12, 2024
mattinannt
mattinannt approved these changes Oct 12, 2024
View reviewed changes

@mattinannt mattinannt left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ChaseNelson Thank you for much for the fix :-) :-)

@mattinannt
mattinannt added this pull request to the merge queue Oct 12, 2024
Merged via the queue into formbricks:main with commit 36cb4f6 Oct 12, 2024
@oss-gg

oss-gg Bot commented Oct 12, 2024

Copy link
Copy Markdown

Awarding ChaseNelson: 300 points 🕹️ Well done! Check out your new contribution on oss.gg/ChaseNelson

This was referenced Oct 12, 2024
Closed
Merged
Merged
Merged
SaiSawant1 pushed a commit to SaiSawant1/formbricks that referenced this pull request Oct 14, 2024
@ChaseNelson @SaiSawant1
fix: docs navigation dropdowns with the same title (formbricks#3488)
d2ae0a6
@coderabbitai coderabbitai Bot mentioned this pull request Oct 25, 2024
Merged
12 tasks done
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mattinannt mattinannt mattinannt approved these changes

Assignees

No one assigned

Labels

bug Something isn't working 🕹️ oss.gg Community issue via oss.gg

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[BUG] Issue with dropdowns on the docs page

2 participants

@ChaseNelson @mattinannt