chore: Removing usage of action right pane component

[ankitakinger]

Description

Removing usage of action right pane component to use Module inputs form directly as right pane on EE.

Fixes #36898

Automation

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

🔍 Cypress test results

Tip

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

---

Wed, 23 Oct 2024 08:15:44 UTC

Communication

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

• Yes
• No

Summary by CodeRabbit

• New Features

  • Simplified rendering of action sections in the CommonEditorForm and EditorJSONtoForm components by removing the ActionRightPane component.

• Bug Fixes

  • No bug fixes were implemented; overall functionality remains consistent.

• Refactor

  • Enhanced component structure for better direct manipulation of action sections.

[coderabbitai]

Walkthrough

The changes in this pull request involve the removal of the ActionRightPane component from two files, CommonEditorForm.tsx and EditorJSONtoForm.tsx. In both instances, the rendering of actionRightPaneAdditionSections is now done directly within the respective components, simplifying the structure. The overall functionality and logic of the components remain unchanged, with no alterations to props or state management.

Changes

File Path	Change Summary
app/client/src/pages/Editor/APIEditor/CommonEditorForm.tsx, app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx	Removed ActionRightPane component and directly rendered actionRightPaneAdditionSections. No changes to logic or props.

Assessment against linked issues

Objective	Addressed	Explanation
Handle module inputs form on the right-hand side (36898)	❌	The changes do not address the addition of a module inputs form.

Possibly related PRs

• chore: Plugin Action Editor Context #36187: Modifications to CommonEditorForm and EditorJSONtoForm by removing ActionRightPane, indicating a shared approach to simplifying component structure.
• chore: Move Toolbar to IDE #36214: Changes to PluginActionEditor components that may relate to the overall structure of the editor forms.
• chore: [Plugin Action Form] Common Editor State #36512: Modifications to CommonEditorForm regarding state management align with simplification efforts seen in this PR.
• chore: Moving action settings from editor form to toolbar  #36894: Relocation of action settings to the toolbar may connect with the user interface enhancements in this PR.

Suggested labels

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

Suggested reviewers

• AmanAgarwal041
• albinAppsmith

🎉 In the editor's realm, changes unfold,
The ActionRightPane now a story told.
Direct rendering brings clarity anew,
Simplifying the form, with a cleaner view.
In the code we trust, as we build and refine,
Here’s to progress, one line at a time! 🚀

---

📜 Recent review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 203b322 and e404221.

📒 Files selected for processing (2)

• app/client/src/pages/Editor/APIEditor/CommonEditorForm.tsx (1 hunks)
• app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx (1 hunks)

🧰 Additional context used

🔇 Additional comments (2)

app/client/src/pages/Editor/APIEditor/CommonEditorForm.tsx (1)

349-349: LGTM: Direct rendering of context value.

The removal of ActionRightPane wrapper and direct rendering of actionRightPaneAdditionSections aligns with the PR objective while maintaining the same functionality.

Let's verify the context usage:

app/client/src/pages/Editor/QueryEditor/EditorJSONtoForm.tsx (1)

379-379: LGTM! Verify styling consistency.

The direct rendering of actionRightPaneAdditionSections aligns with the PR objective to remove the ActionRightPane component.

Let's verify if any styles were dependent on the removed ActionRightPane component:

✅ Verification successful

The previous search might have failed due to case sensitivity or file pattern issues. Let's broaden our search to:

1. Find any references to ActionRightPane with surrounding context
2. Look for styled components or className usage in the file
3. Understand the component structure where actionRightPaneAdditionSections is rendered

This will help us verify if there are any styling dependencies or if the sections are properly wrapped in appropriate styling containers.

---

I've adjusted the search commands to:

1. Use correct ripgrep type filters for TypeScript/React files
2. Look for the component file and its context
3. Find the specific section where actionRightPaneAdditionSections is used

This should help us understand the styling context and verify if the removal of ActionRightPane wrapper maintains proper layout.

---

Let's simplify our approach by:

1. Searching for ActionRightPane references without type filters
2. Directly reading the component file content
3. Looking for any styled component files in the same directory

This should help us understand the styling context and verify the safety of removing the ActionRightPane wrapper.

---

Styling is properly maintained - change is safe

Based on the file content, the actionRightPaneAdditionSections is rendered within the Wrapper styled component alongside the main editor content, maintaining the layout structure. The removal of ActionRightPane doesn't impact styling as the sections are still properly contained within the styled layout components.

Key points from verification:

• actionRightPaneAdditionSections is rendered within <Wrapper> styled-component
• Layout structure with flex display is preserved
• No direct styling dependencies on ActionRightPane were found

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for any styled-components or CSS that might have targeted ActionRightPane
rg -g '*.{ts,tsx,css,scss}' --type-add 'css:*.{styled.ts,styled.tsx}' -l 'ActionRightPane'

Length of output: 90

---

Script:

#!/bin/bash
# Let's try a broader search for ActionRightPane in TypeScript/JavaScript files
rg -t ts -t tsx "ActionRightPane" -A 2 -B 2

# Also search for any styled components or CSS classes that might be related
rg -t ts -t tsx "styled\(['\"]div['\"]\)|className=" --context=2 "EditorJSONtoForm"

# Check the component's parent structure to understand styling context
ast-grep --pattern 'return (
  $$$
  {actionRightPaneAdditionSections}
  $$$
)'

Length of output: 269

---

Script:

#!/bin/bash
# Search for ActionRightPane references
rg "ActionRightPane" --type=typescript --type=javascriptreact --type=typescriptreact -A 2 -B 2

# Look for styled components and className usage in EditorJSONtoForm
rg "EditorJSONtoForm" --type=typescript --type=typescriptreact -A 5 -B 5

# Find the container structure around actionRightPaneAdditionSections
rg "actionRightPaneAdditionSections" --type=typescript --type=typescriptreact -A 5 -B 5

Length of output: 360

---

Script:

#!/bin/bash
# Basic search without file type filters
rg "ActionRightPane" -A 2 -B 2

# Search for the component file
fd "EditorJSONtoForm.tsx" | xargs cat

# Search for styled components in the same directory
fd ".*styled.*" -p "Editor/QueryEditor/"

Length of output: 12313

---

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.

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.

[ankitakinger]

/build-deploy-preview skip-tests=true

[github-actions]

Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/11475252727.
Workflow: On demand build Docker image and deploy preview.
skip-tests: true.
env: ``.
PR: 37020.
recreate: .

[github-actions]

Deploy-Preview-URL: https://ce-37020.dp.appsmith.com