Side menu: style fixes, small improvements and better Info Panel component props

[samejr]

Style fixes:

• Adds gap between buttons in the Switch Orgs sub menu
• Removes an unnecessary height class to the menu item button
• "Hobby", "Pro" badge looks a bit nicer

Improvements:

• Info Panel component takes a React Node 'accessory' which replaces the Link button previously there. All routes that use the Info Panel have been updated and type check passed.
• Made some consistency improvements to the button placements in the blank state Info Panel
• Made some copy improvements to the blank states
• Adds the word 'plan' to the Org menu plan names so they're consistent

Summary by CodeRabbit

• New Features
  • Introduced enhanced interactive buttons that now provide direct links for actions such as upgrading, deploying tasks, and accessing documentation.
• Style
  • Improved visual clarity with refined text, updated button appearances, and smoother transition effects across various components.
• Refactor
  • Streamlined component configurations for a more consistent interface and simplified navigation, resulting in an improved user experience.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 4563dbf

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

Walkthrough

This pull request applies a series of refactoring and UI enhancements across multiple components and routes within the web application. Several files now import additional hooks and components, and modifications have been made to the InfoPanel component by replacing the old link props with a more flexible accessory prop that utilizes the LinkButton. Other changes include updates to navigation components, styling adjustments, and minor import reorderings and conditional simplifications in server-side logic.

Changes

File(s)	Change Summary
apps/webapp/app/components/BlankStatePanels.tsx, apps/webapp/app/components/primitives/InfoPanel.tsx, apps/webapp/app/routes/_app.orgs.$organizationSlug.invite/route.tsx, .../apikeys/route.tsx, .../runs.$runParam/route.tsx, .../runs._index/route.tsx, .../schedules.$scheduleParam/route.tsx, .../settings.team/route.tsx, apps/webapp/app/routes/storybook.info-panel/route.tsx	Refactored InfoPanel usage by removing the to and buttonLabel props and introducing an accessory prop. The change integrates the LinkButton component in various contexts with updated styling and import adjustments.
apps/webapp/app/components/navigation/SideMenu.tsx, apps/webapp/app/components/navigation/SideMenuItem.tsx, apps/webapp/app/components/navigation/SideMenuSection.tsx	Updated navigation components: removed unnecessary icon imports, re-added or modified others, and adjusted class names (e.g., added transition effects, updated padding, and flex layouts) for improved layout consistency.
apps/webapp/app/presenters/v3/ScheduleListPresenter.server.ts	Simplified conditional logic in the call method and updated type imports to use the type keyword, streamlining schedule filtering functionality.
apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues/route.tsx, apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam/schedules/route.tsx, apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsx	Made route-level UI adjustments: increased table cell colSpan and wrapped messages in a Paragraph component for queues, reorganized icon imports for schedules, and introduced a new Header component with updated ClipboardField, InputGroup, and FormButtons styling in the settings route.

Sequence Diagram(s)

Loading

sequenceDiagram
    participant U as User
    participant IP as InfoPanel
    participant LB as LinkButton
    U->>IP: Render InfoPanel component
    IP->>IP: Check for accessory prop
    alt Accessory Prop Present
        IP->>LB: Render LinkButton as accessory
    else
        IP->>IP: Render default UI elements
    end
    IP-->>U: Display updated InfoPanel

Possibly related PRs

• Side help panel #1488: Enhancements to button components and InfoPanel integration align closely with these changes.
• New Help & Feedback menu and tab-selected styles #1374: Modifications in the Feedback component and conditional InfoPanel rendering show direct component-level relevance.
• Shortcut improvements #1573: Updates involving the LinkButton component’s shortcut property and accessory usage share a strong connection.

Suggested reviewers

• ericallam
• matt-aitken

Poem

I'm a rabbit hopping through lines of code,
Leaping through refactors on a bright new road,
Buttons now dance with a gentle sway,
InfoPanels shine in a brand new way,
With every commit, I cheer in delight,
Nibbling bugs away—oh, what a sight!
🐇💻

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c4e1364 and 4563dbf.

📒 Files selected for processing (16)

• apps/webapp/app/components/BlankStatePanels.tsx (9 hunks)
• apps/webapp/app/components/navigation/SideMenu.tsx (5 hunks)
• apps/webapp/app/components/navigation/SideMenuItem.tsx (1 hunks)
• apps/webapp/app/components/navigation/SideMenuSection.tsx (1 hunks)
• apps/webapp/app/components/primitives/InfoPanel.tsx (4 hunks)
• apps/webapp/app/presenters/v3/ScheduleListPresenter.server.ts (2 hunks)
• apps/webapp/app/routes/_app.orgs.$organizationSlug.invite/route.tsx (1 hunks)
• apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.apikeys/route.tsx (2 hunks)
• apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues/route.tsx (1 hunks)
• apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx (2 hunks)
• apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs._index/route.tsx (2 hunks)
• apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.schedules.$scheduleParam/route.tsx (1 hunks)
• apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.schedules/route.tsx (2 hunks)
• apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsx (2 hunks)
• apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.team/route.tsx (1 hunks)
• apps/webapp/app/routes/storybook.info-panel/route.tsx (8 hunks)

🧰 Additional context used

🧬 Code Definitions (2)

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues/route.tsx (1)

apps/webapp/app/components/primitives/Table.tsx (1)

• TableCell (193-270)

apps/webapp/app/components/navigation/SideMenu.tsx (1)

apps/webapp/app/components/primitives/Popover.tsx (1)

• PopoverTrigger (209-209)

⏰ Context from checks skipped due to timeout of 90000ms (4)

• GitHub Check: e2e / 🧪 CLI v3 tests (windows-latest - pnpm)
• GitHub Check: e2e / 🧪 CLI v3 tests (windows-latest - npm)
• GitHub Check: units / 🧪 Unit Tests
• GitHub Check: typecheck / typecheck

🔇 Additional comments (39)

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.apikeys/route.tsx (1)

146-146: Good styling improvement for upgrade button

Adding the leadingIconClassName to style the upgrade button icon in indigo makes it visually consistent with other upgrade buttons across the application.

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs._index/route.tsx (2)

36-36: Good addition of environment hooks

Adding the useEnvironment hook and the environment fetching functionality improves code organization and reusability.

Also applies to: 40-40

---

439-443: Improved InfoPanel implementation with accessory prop

The refactoring from using direct to and buttonLabel props to using the new accessory prop with a LinkButton aligns with the improved InfoPanel API and provides more flexibility.

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route.tsx (3)

153-155: Good visual hierarchy improvement

Adding a header with border styling provides better visual separation and hierarchy for the project settings section.

---

156-166: Improved form layout and spacing

The increased gap spacing and full-width input groups provide a more spacious and consistent layout. The updated clipboard field variant (medium instead of small) improves visibility of the important project reference.

---

183-194: Consistent button styling

Changing the button variant from primary to secondary is more appropriate for this action and maintains visual consistency with the application's button hierarchy.

apps/webapp/app/components/primitives/InfoPanel.tsx (1)

4-4: Great component API improvement

Replacing the specific to and buttonLabel props with a more flexible accessory prop is an excellent enhancement that:

1. Increases component flexibility by allowing any React node as an accessory
2. Simplifies the component implementation
3. Follows React's composition pattern
4. Makes the component more maintainable and adaptable to different use cases

This change properly addresses the PR objective of "better Info Panel component props."

Also applies to: 23-23, 33-33, 51-55

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.queues/route.tsx (2)

408-408: Correct table cell column span update.

The colSpan attribute has been properly updated from 5 to 6, which matches the number of columns in the table header (Name, Queued, Running, Release on waitpoint, Concurrency limit, and Pause/resume).

---

410-410: Improved text formatting with the Paragraph component.

Wrapping the "No queues found" text in a Paragraph component ensures consistent typography throughout the application.

apps/webapp/app/components/navigation/SideMenuItem.tsx (1)

59-59: Improved badge styling for better visual appearance.

The styling changes to the MenuCount component enhance its appearance with a more subtle rounded border instead of a fully rounded pill shape, and a semi-transparent background that better fits the UI's design language.

These style changes align with the PR objectives of improving the styling of the side menu components.

apps/webapp/app/routes/_app.orgs.$organizationSlug.invite/route.tsx (1)

156-160: Enhanced InfoPanel API with flexible accessory prop.

Replacing the hardcoded to and buttonLabel props with a more flexible accessory prop that accepts a React component provides better composability and more control over the button's appearance.

This change improves the InfoPanel component's API and aligns with the PR objective of implementing "better Info Panel component props".

apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.team/route.tsx (1)

229-233: Consistent InfoPanel API improvement.

This change mirrors the enhancement made in the invite route, replacing hardcoded button props with a flexible accessory prop containing a LinkButton component.

The consistent application of this pattern across multiple routes demonstrates a systematic approach to improving the UI component architecture.

apps/webapp/app/components/navigation/SideMenuSection.tsx (1)

32-32: Good enhancement adding transition effect to menu toggle.

Adding the transition class provides a smoother visual feedback during hover interactions, improving the overall user experience with the side menu toggle.

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.schedules.$scheduleParam/route.tsx (1)

360-364: Properly implemented the new accessory prop pattern.

The InfoPanel component has been updated to use the new accessory prop pattern with LinkButton, which provides better flexibility and consistent styling across the application.

apps/webapp/app/presenters/v3/ScheduleListPresenter.server.ts (3)

1-2: Good use of TypeScript's type imports.

Using the type keyword for imports that are only used as types improves code clarity and can lead to better tree-shaking in the build process.

---

5-6: Optimized imports for better code organization.

Removing unnecessary imports and adding only what's needed helps maintain clean code. The addition of CheckScheduleService and keeping only getLimit seems appropriate for the current implementation.

---

53-53:

✅ Verification successful

Verify the removal of 'environments' from hasFilters condition.

The condition has been simplified to no longer include environments in the hasFilters check. Please verify this is intentional behavior and won't affect filter functionality.

---

🏁 Script executed:

#!/bin/bash
# Check how environments were used in hasFilters before
git show HEAD^ -- apps/webapp/app/presenters/v3/ScheduleListPresenter.server.ts | grep -A 5 "hasFilters"

# Check if environments is being used elsewhere to determine filter state
rg "hasFilters.*environments" --type ts

Length of output: 409

---

Verified: The removal of the environments check in the hasFilters condition appears intentional.

• The previous commit included environments !== undefined in the filter check.
• The current code now only validates type, tasks, and (search !== undefined && search !== "").
• A repository-wide search confirmed that no other filter logic depends on environments.

This change seems deliberate and should not affect filter functionality.

apps/webapp/app/routes/storybook.info-panel/route.tsx (2)

14-14: Added import for LinkButton component.

Added the necessary import for the LinkButton component that's now used throughout the file.

---

34-38: Consistently updated all InfoPanel components to use the new accessory prop pattern.

The code has been cleanly refactored to use the new accessory prop pattern with LinkButton across all InfoPanel instances. This change provides better flexibility, consistency in styling, and improved component structure.

Also applies to: 49-53, 68-72, 82-86, 96-100, 110-114, 129-133

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.schedules/route.tsx (3)

1-1: LGTM: Import update for ArrowUpCircleIcon

The ArrowUpCircleIcon has been moved from the outline package to the solid package, which maintains a consistent icon style with the rest of the application.

---

6-6: Adding blank state components improves user experience

Adding imports for SchedulesNoneAttached and SchedulesNoPossibleTaskPanel from the BlankStatePanels module provides better guidance for users when no schedules are available.

---

49-49: LGTM: Reorganized imports for better code organization

The imports have been reorganized to maintain a logical grouping. This improves code readability without changing functionality.

Also applies to: 55-55, 64-65

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx (2)

26-26: LGTM: Added imports for connection status features

Added imports for DisconnectedIcon, useDevPresence, and ClipboardField to enhance connection status feedback to users.

Also applies to: 29-29, 35-35

---

405-409: Improved InfoPanel with accessory prop for better button placement

Refactored the upgrade button to use the new accessory prop pattern instead of direct button properties. This change improves component flexibility and consistency across the application.

apps/webapp/app/components/navigation/SideMenu.tsx (4)

61-61: LGTM: Streamlined imports

Reintroduced InlineCode import and consolidated Dialog component imports into a single line for better code organization.

Also applies to: 65-65

---

276-276: Improved plan naming consistency

Changed the plan designation from hardcoded "Free plan" to a more flexible approach that appends " plan" to the plan name. This ensures consistent naming across all plans and aligns with the PR objectives.

Also applies to: 322-323

---

445-446: Removed unnecessary height constraint from PopoverTrigger

Removed the h-7 class from the PopoverTrigger component, allowing it to size naturally based on its content.

---

469-469: Added gap between organization menu items

Changed the container class from just p-1 to flex flex-col gap-1 p-1, which adds spacing between the organization menu items. This improves readability and usability of the menu, addressing the PR objective of "adding a gap between buttons in the 'Switch Orgs' submenu."

apps/webapp/app/components/BlankStatePanels.tsx (11)

13-17: LGTM: Added imports for enhanced component functionality

Added imports for location, environment, organization, and project hooks along with EnvironmentSelector and TextLink components to enable more context-aware blank states.

Also applies to: 29-29, 35-35

---

81-94: Enhanced HasNoTasksDeployed with environment context and documentation link

Updated the panel to include the environment name in the title and added a documentation link as an accessory button. This provides clearer context and better guidance for users.

---

96-98: Improved text with TextLink component

Refactored plain text into a TextLink component, providing users with a clickable link to deployment documentation.

---

110-119: Added helpful documentation link to SchedulesNoPossibleTaskPanel

Added an accessory button that links to the scheduling documentation, providing users with direct access to helpful resources.

---

147-152: Refined button variants for better visual hierarchy

Changed button variants from primary/small to secondary/medium and docs/medium respectively, establishing a clearer visual hierarchy and better consistency across the UI.

Also applies to: 156-159

---

175-180: Added documentation link to BatchesNone panel

Added an accessory button that links to the batches documentation, improving user guidance.

---

195-208: Improved TestHasNoTasks with clearer title and action button

Updated the panel title to use more natural language ("You don't have any tasks to test") and added a direct "Create a task" button to guide users to the next step.

---

210-213: Enhanced guidance text with TextLink

Updated the text to provide clearer instructions and incorporated a TextLink component to make it easier for users to navigate to the Tasks page.

---

361-369: Improved button alignment in AlertsNoneDeployed

Changed the layout to use justify-between for better spacing between the documentation button and the action button, creating a cleaner interface.

---

391-404: Enhanced QueuesHasNoTasks panel with action button

Updated the panel title, styling, and added a "Create a task" button to provide users with a clear next step when no queues are available.

---

406-410: Improved guidance text with TextLink in QueuesHasNoTasks

Enhanced the explanation text with a TextLink component to make it easier for users to navigate to the Tasks page.

✨ Finishing Touches

• 📝 Generate Docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ 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 generate docstrings to generate docstrings for this 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.