feat: team subnav

[waltergalvao]

Summary by CodeRabbit

Release Notes

• New Features

  • Introduced a new Subnav component for improved navigation.
  • Added a SubnavTeam component for team-specific navigation, featuring links to team members and insights.
  • Updated navigation links in the SubnavSettings component, including a new "Deployments" link with a "Soon" badge.

• Bug Fixes

  • Streamlined layout by removing unnecessary components and simplifying navigation logic in the TeamPage.

• Style

  • Added styles for the new Subnav component to enhance visual consistency.

• Chores

  • Adjusted import paths for better organization and accessibility of components.

[coderabbitai]

Walkthrough

The pull request introduces several updates across multiple components in the application. Key changes include the introduction of a new SubnavTeam component for team-specific navigation, modifications to the existing SubnavSettings component, and the addition of a Subnav component for general navigation. The import paths for components have been adjusted for clarity, and a new CSS module has been created for styling. Additionally, the layout of the TeamPage component has been simplified by removing tab navigation.

Changes

Files	Change Summary
apps/web/src/app/settings/components/subnav-settings/subnav-settings.tsx, apps/web/src/app/settings/page.tsx	Updated SubnavSettings component structure and navigation links, including the addition of a "Deployments" link. Adjusted import paths for clarity.
apps/web/src/app/teams/[id]/components/subnav-team/index.ts, apps/web/src/app/teams/[id]/components/subnav-team/subnav-team.tsx, apps/web/src/app/teams/[id]/page.tsx	Introduced SubnavTeam component for team navigation. Simplified TeamPage layout by removing tab navigation and integrating SubnavTeam.
apps/web/src/components/navbar/navbar.tsx	Modified Group component to prevent child elements from wrapping by setting the wrap property to "nowrap".
apps/web/src/components/subnav/index.ts, apps/web/src/components/subnav/subnav.module.css, apps/web/src/components/subnav/subnav.tsx	Added a new Subnav component with styling defined in a new CSS module. Introduced re-export for Subnav in the index file to streamline imports.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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.

[coderabbitai]

Actionable comments posted: 0

Outside diff range and nitpick comments (2)

apps/web/src/components/subnav/subnav.tsx (1)

1-20: The Subnav component structure looks good, but clarify the purpose of useSubnav hook.

The component is well structured and the usage of the Mantine Stack component for layout is appropriate. Rendering children inside the Stack and accepting additional props allows for good composition and customization.

However, the purpose of the useSubnav hook is unclear without more context. Could you please provide more details on what this hook does and why it's needed here? Adding comments to explain its functionality would be helpful for maintainability.

apps/web/src/app/settings/components/subnav-settings/subnav-settings.tsx (1)

Line range hint 19-99: Simplification of the navigation structure looks good!

The use of the Subnav component simplifies the layout and improves the organization of the navigation items. The removal of the style property for NavLink components suggests a more consistent styling approach.

The addition of the "Deployments" link with a "Soon" badge is a nice way to indicate an upcoming feature. Similarly, the disabled state of the "Members" and "Pull Request Size" links suggests that these features are not yet available.

Consider adding a tooltip or a more descriptive label to the disabled links to provide more context to the user about when these features might be available or what they entail.

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 98f2db3 and 37e516b.

Files selected for processing (9)

• apps/web/src/app/settings/components/subnav-settings/subnav-settings.tsx (3 hunks)
• apps/web/src/app/settings/page.tsx (1 hunks)
• apps/web/src/app/teams/[id]/components/subnav-team/index.ts (1 hunks)
• apps/web/src/app/teams/[id]/components/subnav-team/subnav-team.tsx (1 hunks)
• apps/web/src/app/teams/[id]/page.tsx (3 hunks)
• apps/web/src/components/navbar/navbar.tsx (1 hunks)
• apps/web/src/components/subnav/index.ts (1 hunks)
• apps/web/src/components/subnav/subnav.module.css (1 hunks)
• apps/web/src/components/subnav/subnav.tsx (1 hunks)

Files skipped from review due to trivial changes (1)

• apps/web/src/app/teams/[id]/components/subnav-team/index.ts

Additional comments not posted (10)

apps/web/src/components/subnav/index.ts (1)

1-1: LGTM!

The index file correctly exports the Subnav component from the ./subnav module. This simplifies the import path for consumers of the component.

apps/web/src/components/subnav/subnav.module.css (1)

1-5: LGTM!

The CSS styles for the .subnav class look good. Applying a border-radius of 4px to the anchor tags within the navigation will give them nicely rounded corners, which is a common and visually appealing design choice.

apps/web/src/app/settings/page.tsx (1)

3-3: LGTM!

The import path change improves the clarity and maintainability of the code by using a relative path within the same directory structure. The change does not affect the functionality or logic of the component.

apps/web/src/components/navbar/navbar.tsx (1)

20-20: Ensure usability on smaller screens.

The wrap="nowrap" property ensures that the navigation bar items remain on a single line, providing a consistent layout. This is a good change for maintaining a clean and organized navigation bar.

However, please consider the following:

• On smaller screens with limited horizontal space, the navigation items may overflow or be partially hidden due to the nowrap behavior.
• Ensure that the navigation bar remains usable and accessible on smaller screens, even with the nowrap behavior. Consider implementing responsive design techniques, such as hiding less important items or using a hamburger menu, to accommodate smaller screen sizes.

apps/web/src/app/settings/components/subnav-settings/subnav-settings.tsx (1)

1-13: LGTM!

The changes to the import statements are consistent with the component updates mentioned in the AI-generated summary. The removal of the useSubnav hook and the addition of the Subnav component suggest a change in the navigation structure, which aligns with the goal of simplifying the component layout.

apps/web/src/app/teams/[id]/components/subnav-team/subnav-team.tsx (1)

1-97: LGTM!

The SubnavTeam component is well-structured and follows best practices. It effectively utilizes external libraries for UI components and navigation. The component is properly typed and receives the necessary props. The navigation menu is divided into logical sections, and the NavLink components are configured correctly to handle active states and generate appropriate URLs.

The use of icons enhances the visual appeal of the navigation menu. The component also handles disabled features by displaying a "Soon" badge, providing a clear indication to the user.

Overall, the component is implemented correctly and should function as expected.

apps/web/src/app/teams/[id]/page.tsx (4)

10-10: LGTM!

The import statement for the Portal component is syntactically correct.

---

15-15: LGTM!

The import statement for Outlet and useParams from react-router-dom is syntactically correct.

---

23-27: LGTM!

The import statements for IconPencil, PageContainer, ResourceNotFound, useContextualActions, and SubnavTeam are syntactically correct.

---

Line range hint 77-116: The changes simplify the layout and improve readability.

The removal of tab navigation and the introduction of the SubnavTeam component within a portal result in a cleaner separation of concerns and a more straightforward layout. The PageTitle component's logic remains unchanged, and the Outlet component provides a placeholder for rendering child routes.

The margin adjustment of the Box component is a minor layout change that does not introduce any apparent issues.