chore: git tag - add chevron menu to package editor by brayn003 · Pull Request #39870 · appsmithorg/appsmith

brayn003 · 2025-03-23T21:29:24Z

Description

Adds chevron menu to package editor

Automation

/ok-to-test tags="@tag.Git"

🔍 Cypress test results

Tip

🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/14023181461
Commit: f427da9
Cypress dashboard.
Tags: @tag.Git
Spec:

Sun, 23 Mar 2025 22:27:03 UTC

Communication

Should the DevRel and Marketing teams inform users about this change?

Yes
No

Summary by CodeRabbit

New Features
- Introduced a new Price Tag icon to expand the design system’s visual assets.
- Enhanced deployment menu behavior by conditionally showing or hiding options based on Git connection status and permissions.
- Updated the header deployment interface to provide streamlined access, where clicking a deployment option now opens the link in a new tab.

coderabbitai · 2025-03-23T21:29:32Z

Walkthrough

This pull request adds a new dynamically imported icon, PriceTagIcon, to the design system and updates the icon lookup mapping. It also modifies deployment-related components by introducing Git connection state hooks in the DeployMenuItemsView and refactoring header components: renaming DeployLinkButton to ChevronMenu with streamlined props and a click handler. The header now replaces DeployLinkButtonDialog with ChevronMenu, ensuring the deployment link behavior is maintained with improved control flow.

Changes

File(s)	Change Summary
`app/client/.../Icon/Icon.provider.tsx`	Added new `PriceTagIcon` using dynamic import from `remixicon-react` and updated `ICON_LOOKUP` with key `pricetag`.
`app/client/.../DeployMenuItemsView.tsx`, `app/client/.../Header/ChevronMenu.tsx`, `app/client/.../Header/index.tsx`	Introduced Git connection hooks in DeployMenuItemsView for conditional rendering. Refactored deployment components by renaming and restructuring props in ChevronMenu, adding a click handler to open the deploy link, and replacing DeployLinkButtonDialog in Header.

Sequence Diagram(s)

sequenceDiagram
    participant DMV as DeployMenuItemsView
    participant Git as Git Hooks (useConnected, useGitContext)
    DMV->>Git: Check connection state (isConnected, isConnectPermitted)
    alt isConnected OR !isConnectPermitted
        DMV->>DMV: Return null (do not render menu items)
    else
        DMV->>DMV: Render deployment menu items
    end

sequenceDiagram
    participant User as User
    participant CM as ChevronMenu
    participant Browser as Web Browser
    User->>CM: Click on deployment menu
    CM->>CM: Execute handleClickOnLatestDeployed callback
    CM->>Browser: Open deployLink in new tab

Possibly related PRs

chore: Update JS Editor Run designs #36998: Involves modifications to the icon management system, including updates to the ICON_LOOKUP.
chore: Updating the function icon on JS editor #37340: Also adds a new icon and updates the ICON_LOOKUP object in Icon.provider.tsx, relating closely to the new PriceTagIcon addition.

Suggested labels

Enhancement, IDE Product, Task, Git Product, ok-to-test, IDE Pod, skip-changelog

Suggested reviewers

ashit-rath
ankitakinger

Poem

In the code's realm, fresh icons appear,
A price tag emerges, dynamic and clear.
Git hooks whisper, "render or hide,"
While menus evolve with a smoother ride.
Click and deploy — a new flow to explore,
CodeRabbit’s magic opens the door!
🚀✨

📜 Recent review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 37b4aca and f427da9.

📒 Files selected for processing (4)

app/client/packages/design-system/ads/src/Icon/Icon.provider.tsx (2 hunks)
app/client/src/git/components/DeployMenuItems/DeployMenuItemsView.tsx (2 hunks)
app/client/src/pages/AppIDE/layouts/components/Header/ChevronMenu.tsx (4 hunks)
app/client/src/pages/AppIDE/layouts/components/Header/index.tsx (2 hunks)

🧰 Additional context used

🧬 Code Definitions (1)

app/client/src/pages/AppIDE/layouts/components/Header/index.tsx (1)

app/client/src/pages/AppIDE/layouts/components/Header/ChevronMenu.tsx (1)

ChevronMenu (51-87)

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

GitHub Check: perform-test / client-build / client-build
GitHub Check: perform-test / rts-build / build
GitHub Check: perform-test / server-build / server-unit-tests
GitHub Check: client-unit-tests / client-unit-tests
GitHub Check: client-prettier / prettier-check
GitHub Check: client-lint / client-lint
GitHub Check: client-build / client-build
GitHub Check: client-check-cyclic-deps / check-cyclic-dependencies
GitHub Check: chromatic-deployment
GitHub Check: storybook-tests
GitHub Check: chromatic-deployment

🔇 Additional comments (14)

app/client/src/git/components/DeployMenuItems/DeployMenuItemsView.tsx (3)

6-7: New hook imports for Git connection state

Good addition of hook imports to manage Git connection state, making the component more responsive to user's connection status.

16-18: Hook implementation for connection status

Proper implementation of the hooks to track connection status and permissions.

26-28: Conditional early return for better performance

Good addition of early return based on connection status, which prevents unnecessary rendering when the menu item shouldn't be displayed.

app/client/packages/design-system/ads/src/Icon/Icon.provider.tsx (2)

584-586: New PriceTagIcon added

Added PriceTag3LineIcon from remixicon-react library following the established pattern.

1498-1498: Icon lookup mapping updated

Added pricetag to the ICON_LOOKUP mapping, making the new icon available throughout the application.

app/client/src/pages/AppIDE/layouts/components/Header/index.tsx (2)

67-67: Import ChevronMenu component

Replaced DeployLinkButtonDialog with ChevronMenu import, aligning with the PR objective to add a chevron menu to the package editor.

262-262: Replace DeployLinkButtonDialog with ChevronMenu

Updated to use the new ChevronMenu component while maintaining the same functionality by passing the deployLink prop correctly.

app/client/src/pages/AppIDE/layouts/components/Header/ChevronMenu.tsx (7)

14-14: Import useGitModEnabled hook

Added import for the useGitModEnabled hook for conditional Git feature rendering.

47-49: Simplified props interface

Good refactoring of the interface from Props to ChevronMenuProps, simplifying it to just include the deployLink property.

51-51: Renamed component from DeployLinkButton to ChevronMenu

Renamed component to better reflect its purpose and functionality in the UI.

57-61: Added handleClickOnLatestDeployed callback

Good implementation of the click handler with proper dependency array. The handler correctly opens the deployLink in a new tab.

75-75: Simplified conditional rendering

Improved conditional rendering logic for Git features, now only checking if Anvil is enabled.

78-78: Updated click handler

Updated to use the new handleClickOnLatestDeployed callback function.

89-89: Updated default export to match new component name

Export updated to reflect the component name change from DeployLinkButton to ChevronMenu.

✨ 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

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

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.

## Description - Adds chevron menu to package editor ## Automation /ok-to-test tags="@tag.Git" ### 🔍 Cypress test results  > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/14023181461> > Commit: f427da9 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=14023181461&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.Git` > Spec: > <hr>Sun, 23 Mar 2025 22:27:03 UTC  ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No  ## Summary by CodeRabbit - **New Features** - Introduced a new Price Tag icon to expand the design system’s visual assets. - Enhanced deployment menu behavior by conditionally showing or hiding options based on Git connection status and permissions. - Updated the header deployment interface to provide streamlined access, where clicking a deployment option now opens the link in a new tab.

chore: simplifying header chevron menu

f427da9

brayn003 requested a review from a team as a code owner March 23, 2025 21:29

brayn003 self-assigned this Mar 23, 2025

brayn003 added the ok-to-test Required label for CI label Mar 23, 2025

github-actions bot added the skip-changelog Adding this label to a PR prevents it from being listed in the changelog label Mar 23, 2025

brayn003 requested a review from ashit-rath March 23, 2025 21:31

ashit-rath approved these changes Mar 24, 2025

View reviewed changes

KelvinOm approved these changes Mar 24, 2025

View reviewed changes

brayn003 merged commit 781fe27 into release Mar 24, 2025
55 checks passed

brayn003 deleted the chore/git-tag-4 branch March 24, 2025 08:42

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: git tag - add chevron menu to package editor#39870

chore: git tag - add chevron menu to package editor#39870
brayn003 merged 1 commit intoreleasefrom
chore/git-tag-4

brayn003 commented Mar 23, 2025 •

edited by github-actions bot

Loading

Uh oh!

coderabbitai bot commented Mar 23, 2025 •

edited

Loading

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

Documentation and Community

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

brayn003 commented Mar 23, 2025 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Automation

🔍 Cypress test results

Communication

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Mar 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Possibly related PRs

Suggested labels

Suggested reviewers

Poem

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

Documentation and Community

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

brayn003 commented Mar 23, 2025 •

edited by github-actions bot

Loading

coderabbitai bot commented Mar 23, 2025 •

edited

Loading