chore: Add common items in the Toolbar of AppPluginEditor

[hetunandu]

Description

Adds Copy / Move / Delete actions in the toolbar for AppPluginEditor

Fixes #35532

Automation

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

🔍 Cypress test results

Tip

🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/10877950328
Commit: 39aea09
Cypress dashboard.
Tags: @tag.Datasource
Spec:

---

Mon, 16 Sep 2024 05:58:25 UTC

Communication

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

• Yes
• No

Summary by CodeRabbit

• New Features

  • Introduced a new toolbar for executing plugin actions with analytics tracking.
  • Added a new interface for managing plugin actions, including options to copy, move, and delete actions.
  • Updated the toolbar to include a new action menu for enhanced user interaction.

• Bug Fixes

  • Ensured unique identification of menu items in the toolbar for better functionality.

[github-actions]

⚠️ Cyclic Dependency Check:

This PR has increased the number of cyclic dependencies by 1, when compared with the release branch.

Refer this document to identify the cyclic dependencies introduced by this PR.

[coderabbitai]

Walkthrough

The changes introduced in this pull request enhance the functionality of the plugin action toolbar by integrating analytics tracking and action dispatching. A new PluginActionMoreActions component has been added to manage plugin actions, allowing users to copy, move, and delete actions. The AppPluginActionToolbar component has been updated to use the new AppPluginActionMenu, improving the user interface. Overall, these modifications aim to provide a more interactive and user-friendly experience for managing plugin actions.

Changes

File	Change Summary
app/client/src/PluginActionEditor/components/PluginActionToolbar.tsx	Introduced handleRunClick for analytics tracking and action dispatching on "Run" button click.
app/client/src/ce/pages/Editor/AppPluginActionEditor/components/AppPluginActionToolbar.tsx	Replaced ConvertToModuleCTA with AppPluginActionMenu in menuContent prop.
app/client/src/ce/pages/Editor/AppPluginActionEditor/components/PluginActionMoreActions.tsx	Added PluginActionMoreActions component with sub-components for copying, moving, and deleting actions.

Assessment against linked issues

Objective	Addressed	Explanation
Create a customizable overflow menu (Task #35532)	✅

Possibly related PRs

• chore: Plugin Action Editor Context #36187: Introduces the usePluginActionContext hook, which is used in the PluginActionToolbar for managing plugin action states.
• chore: [Plugin Action Editor] Convert to Module #36305: Enhances the PluginActionToolbar with a menuContent prop, aligning with the changes made in this PR.

Poem

In the toolbar where actions play,
New features bloom, bright as day.
Copy, move, and delete with ease,
Plugin management, sure to please!
Analytics track each run and click,
A joyful update, quick and slick! 🎉

---

Recent review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

Commits

Files that changed from the base of the PR and between ba6fd9b and 39aea09.

Files selected for processing (3)

• app/client/src/PluginActionEditor/components/PluginActionToolbar.tsx (5 hunks)
• app/client/src/ce/pages/Editor/AppPluginActionEditor/components/AppPluginActionToolbar.tsx (1 hunks)
• app/client/src/ce/pages/Editor/AppPluginActionEditor/components/PluginActionMoreActions.tsx (1 hunks)

Additional comments not posted (11)

app/client/src/ce/pages/Editor/AppPluginActionEditor/components/AppPluginActionToolbar.tsx (2)

3-3: Great job importing the new component! 👍

The import statement for the AppPluginActionMenu component looks good. It's clear that this component is defined in the PluginActionMoreActions file in the same directory.

---

6-6: Excellent update to the toolbar menu content! 🌟

Replacing the ConvertToModuleCTA component with the AppPluginActionMenu component in the menuContent prop is a great way to enhance the toolbar functionality. This change aligns perfectly with the PR objective of adding common actions like copy, move, and delete to the toolbar.

Please ensure that the new AppPluginActionMenu component is thoroughly tested and provides the expected functionality. It's crucial to verify that users can interact with the new actions seamlessly and that the overall user experience is improved.

app/client/src/PluginActionEditor/components/PluginActionToolbar.tsx (4)

1-8: Great job importing the necessary dependencies!

The new imports are essential for the functionality being added to the component. They will allow the component to access the plugin action context, dispatch actions, log analytics events, and run plugin actions.

---

17-35: Excellent work implementing the handleRunClick function!

The function is well-structured and serves its purpose effectively. Here's what I like about it:

1. It logs an analytics event to track when the "Run" button is clicked, providing valuable insights into user behavior.
2. It captures relevant information about the action, plugin, and datasource, which can be useful for debugging and analysis.
3. It dispatches the runAction action to trigger the execution of the plugin action, enabling the desired functionality.
4. The use of useCallback and the specified dependencies ensure that the function is memoized and re-created only when necessary, optimizing performance.

Keep up the great work!

---

46-48: Good job updating the onClick event of the "Run" button!

By setting the onClick event to the handleRunClick function, you have successfully integrated the new functionality with the user interface. Now, when the user clicks the "Run" button, the handleRunClick function will be triggered, logging the analytics event and dispatching the runAction action.

---

Line range hint 56-70: Nice work adding the key prop to the Menu and MenuContent components!

Using the action.id as the value for the key prop is a smart choice. It ensures that each menu item is uniquely identified based on its associated action. This helps React efficiently update the menu items when there are changes, improving the overall performance of the component.

Moreover, by tying the key to the action.id, you maintain a clear association between the menu items and their respective actions, preventing any potential inconsistencies or bugs.

Well done!

app/client/src/ce/pages/Editor/AppPluginActionEditor/components/PluginActionMoreActions.tsx (5)

33-41: Excellent work, class!

The PageMenuItem component is a fine example of a reusable component. It takes the necessary props and renders a menu item with the page name. When selected, it correctly invokes the onSelect callback with the page ID. Well done!

---

43-78: Great implementation, students!

The Copy component is a well-structured and functional component. It correctly retrieves the necessary data using selectors and hooks, and defines a callback to dispatch the copyActionRequest action. The rendering logic is clean and utilizes the PageMenuItem component effectively. Keep up the good work!

---

80-125: Splendid work, everyone!

The Move component is a well-thought-out and functional component. It correctly retrieves the necessary data using selectors and filters out the current page. The moveActionToPage callback is properly defined to dispatch the moveActionRequest action. The rendering logic handles the case when there are no other pages to move to. Excellent job!

---

127-154: Fantastic implementation, class!

The Delete component handles the deletion of an action with a confirmation flow. It correctly retrieves the current action using the usePluginActionContext hook and defines a callback to dispatch the deleteAction action. The confirmDelete state is used effectively to manage the confirmation process. The rendering logic updates the label based on the state. Great work!

---

156-181: Outstanding work, students!

The AppPluginActionMenu component serves as the main component that composes the other components based on permissions. It correctly retrieves the current action and checks the necessary feature flags and user permissions. The rendering logic conditionally includes the Copy, Move, and Delete components based on the permissions. This is a well-structured and modular approach. Excellent job putting everything together!

---

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 generate interesting stats about this repository and render them as a table.
  -- @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.

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.