Skip to content

[WEB-2182] chore: user favorites improvement#5318

Merged
SatishGandham merged 9 commits intopreviewfrom
chore-user-favorites-improvement
Aug 7, 2024
Merged

[WEB-2182] chore: user favorites improvement#5318
SatishGandham merged 9 commits intopreviewfrom
chore-user-favorites-improvement

Conversation

@anmolsinghbhatia
Copy link
Collaborator

@anmolsinghbhatia anmolsinghbhatia commented Aug 7, 2024

Changes:

This PR includes following changes:

  • Improved spacing and active state for user favorites in the app sidebar.
  • Added a tooltip for create folders in user favorites within the app sidebar.
  • Enhanced the favorite item icon and refactored the related code.
  • Introduced an empty state for favorites.
  • Updated the project identifiers message.

Reference:

[WEB-2182]

Media:

Before After
WEB-2182 (1) (1) WEB-2182 (2) (2)

Summary by CodeRabbit

Summary by CodeRabbit

  • New Features

    • Introduced a new type for logo properties, allowing favorites to represent visual elements more flexibly.
    • Enhanced the FavoriteItem component to support conditional rendering of logos and icons.
    • Added tooltips to icons in the FavoritesMenu for improved user context.
    • Implemented rendering logic for empty favorites lists in the FavoritesMenu.
    • Updated tooltips in the CreateProjectForm and ProjectDetailsForm components for improved clarity.
  • Bug Fixes

    • Streamlined the logic for icon selection in the FavoriteItem component, improving maintainability.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Aug 7, 2024

Warning

Rate limit exceeded

@anmolsinghbhatia has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 20 minutes and 14 seconds before requesting another review.

How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

Commits

Files that changed from the base of the PR and between 8287ce5 and bb05366.

Walkthrough

The recent updates enhance the functionality of favorite items by introducing a new type for logo properties and refining the rendering logic of the FavoriteItem component. This allows for better visual representation through icons and logos. Additionally, tooltips have been added to improve user interaction, promoting a more intuitive experience across various components.

Changes

Files Change Summary
packages/types/src/favorite/favorite.d.ts Added TLogoProps type for logo properties and included logo_props in IFavorite to enhance logo representation.
web/core/components/workspace/sidebar/favorites/favorite-item.tsx Replaced switch-case with an object-based approach for icon rendering; added conditional rendering for logos and adjusted imports for the Logo component.
web/core/components/workspace/sidebar/favorites/favorites-menu.tsx Wrapped FolderPlus icon in a Tooltip for improved user experience, keeping existing functionality intact. Adjusted rendering logic for empty favorites.
web/core/components/project/create-project-form.tsx Simplified tooltip text by removing the example, focusing on the primary functionality.
web/core/components/project/form.tsx Updated tooltip text by removing the example phrase, enhancing clarity while maintaining the same functionality.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Sidebar
    participant FavoriteItem
    participant Logo

    User->>Sidebar: Hover over FolderPlus icon
    Sidebar->>User: Display Tooltip ("Create folder")
    User->>FavoriteItem: Request favorite items
    FavoriteItem->>FavoriteItem: Determine icon or logo
    alt Logo exists
        FavoriteItem->>Logo: Render logo
    else No logo
        FavoriteItem->>Icons: Render default icon
    end
Loading

🐰 In fields so bright and wide,
A logo's charm we now abide.
With icons dancing, side by side,
A tooltip's whisper, our joy can't hide!
So hop along, let's take a ride,
In favorites' glow, we take great pride! 🌟


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>.
    • 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 generate interesting stats about this repository and render them as a table.
    • @coderabbitai show all the console.log statements in this repository.
    • @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 as 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.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

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.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 0

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 806eae0 and 638529b.

Files selected for processing (3)
  • packages/types/src/favorite/favorite.d.ts (1 hunks)
  • web/core/components/workspace/sidebar/favorites/favorite-item.tsx (2 hunks)
  • web/core/components/workspace/sidebar/favorites/favorites-menu.tsx (1 hunks)
Additional comments not posted (5)
packages/types/src/favorite/favorite.d.ts (2)

1-11: Define TLogoProps with clear documentation.

The new type TLogoProps is well-defined, allowing for either an emoji or an icon. Consider adding comments to describe the purpose of each property for better maintainability.


19-19: Add logo_props to IFavorite with clear documentation.

The addition of logo_props to IFavorite is consistent with the new type definition. Ensure that the usage of this property is well-documented throughout the codebase.

web/core/components/workspace/sidebar/favorites/favorites-menu.tsx (1)

137-145: Add tooltip for "Create folder" functionality.

The addition of the Tooltip component for the "Create folder" functionality is a good enhancement for user experience. Ensure that the tooltip content remains relevant and helpful.

web/core/components/workspace/sidebar/favorites/favorite-item.tsx (2)

12-20: Import Logo component for rendering logos.

The import of the Logo component from @plane/ui is necessary for the new logo rendering logic. Ensure that the Logo component is correctly implemented and tested.


63-83: Enhance icon rendering logic with conditional logo rendering.

The new object-based approach for icon rendering is more maintainable. The conditional rendering of the Logo component based on logo_props is a valuable addition. Ensure that the Logo component handles all possible values of logo_props correctly.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 0

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 638529b and 63ff1a9.

Files selected for processing (1)
  • web/core/components/workspace/sidebar/favorites/favorites-menu.tsx (2 hunks)
Files skipped from review as they are similar to previous changes (1)
  • web/core/components/workspace/sidebar/favorites/favorites-menu.tsx

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 0

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 63ff1a9 and 7a23def.

Files selected for processing (3)
  • web/core/components/project/create-project-form.tsx (1 hunks)
  • web/core/components/project/form.tsx (1 hunks)
  • web/core/components/workspace/sidebar/favorites/favorite-item.tsx (4 hunks)
Files skipped from review due to trivial changes (2)
  • web/core/components/project/create-project-form.tsx
  • web/core/components/project/form.tsx
Files skipped from review as they are similar to previous changes (1)
  • web/core/components/workspace/sidebar/favorites/favorite-item.tsx

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 0

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 7a23def and 8287ce5.

Files selected for processing (1)
  • packages/types/src/favorite/favorite.d.ts (1 hunks)
Files skipped from review as they are similar to previous changes (1)
  • packages/types/src/favorite/favorite.d.ts

@SatishGandham SatishGandham merged commit 598846a into preview Aug 7, 2024
@SatishGandham SatishGandham deleted the chore-user-favorites-improvement branch August 7, 2024 09:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants