[Task] Combine Query Editor and Api Editor form components #36154

hetunandu · 2024-09-06T08:50:28Z

Without changing anything internally about the forms, this new component would just create the single entry point for the forms. This would mean we could include this inside the new combined Plugin Action Editor.

## Description Extracted certain parts of the `CommonEditorForm` to be re used in the new modular approach. The left out areas are not part of the form (Toolbar or Response) and other presentational logic. As a test, API Editor is being rendered. Post this, I will be extracting out the transformation logic in forms and place them, refactor and re organise it. EE PR for testing: appsmithorg/appsmith-ee#5179 Parts of #36154 ## 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/10939684892> > Commit: b2a2209 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10939684892&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.Datasource` > Spec: > <hr>Thu, 19 Sep 2024 11:45:15 UTC  ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No  ## Summary by CodeRabbit ## Release Notes - **New Features** - Introduced `APIEditorForm` for editing API actions, enhancing user interaction. - Added `CommonEditorForm`, `InfoFields`, `RequestTabs`, and `HintMessages` components for improved API action management. - Enhanced `DatasourceConfig` for managing key-value pairs related to data sources. - **Improvements** - Streamlined the API editor interface by removing unnecessary components and simplifying logic. - Improved tab management with a custom hook for better user experience. - Added support for predefined HTTP methods in the `GraphQLEditorForm`. - Enhanced rendering logic in `RestAPIForm` to always display the `PostBodyData` component. - **Bug Fixes** - Removed deprecated functions and selectors related to the API right pane tab management. - **Chores** - Refactored imports for better organization and clarity across components.

## Description Passes the correct states for the Common Editor form in the Plugin Action Form. - Uses a hook to pass the form states as already implemented - Uses helper functions to get the header and params count from the said state - As a side effect I can remove these from the original implementation since the invocation is now in the common `RequestTabs` components - Updates the `changeActionCall` hook to only be called if the action changes - Updates the tests to reflect this EE PR to track tests: appsmithorg/appsmith-ee#5217 Parts of #36154 ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No  ## Summary by CodeRabbit ## Release Notes - **New Features** - Introduced a custom hook for streamlined retrieval of action-related values in forms. - Added utility functions for counting valid headers and parameters. - **Improvements** - Simplified component interfaces by removing unnecessary properties related to headers and parameters. - Enhanced type safety for header and parameter properties. - Refined tab rendering logic for better user experience. - **Bug Fixes** - Adjusted logic to ensure actions are dispatched only on changes to action IDs. - **Documentation** - Updated relevant documentation to reflect changes in component props and functionalities.

## Description Extracted certain parts of the `CommonEditorForm` to be re used in the new modular approach. The left out areas are not part of the form (Toolbar or Response) and other presentational logic. As a test, API Editor is being rendered. Post this, I will be extracting out the transformation logic in forms and place them, refactor and re organise it. EE PR for testing: https://github.com/appsmithorg/appsmith-ee/pull/5179 Parts of appsmithorg#36154 ## 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/10939684892> > Commit: b2a2209 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10939684892&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.Datasource` > Spec: > <hr>Thu, 19 Sep 2024 11:45:15 UTC  ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No  ## Summary by CodeRabbit ## Release Notes - **New Features** - Introduced `APIEditorForm` for editing API actions, enhancing user interaction. - Added `CommonEditorForm`, `InfoFields`, `RequestTabs`, and `HintMessages` components for improved API action management. - Enhanced `DatasourceConfig` for managing key-value pairs related to data sources. - **Improvements** - Streamlined the API editor interface by removing unnecessary components and simplifying logic. - Improved tab management with a custom hook for better user experience. - Added support for predefined HTTP methods in the `GraphQLEditorForm`. - Enhanced rendering logic in `RestAPIForm` to always display the `PostBodyData` component. - **Bug Fixes** - Removed deprecated functions and selectors related to the API right pane tab management. - **Chores** - Refactored imports for better organization and clarity across components.

## Description Passes the correct states for the Common Editor form in the Plugin Action Form. - Uses a hook to pass the form states as already implemented - Uses helper functions to get the header and params count from the said state - As a side effect I can remove these from the original implementation since the invocation is now in the common `RequestTabs` components - Updates the `changeActionCall` hook to only be called if the action changes - Updates the tests to reflect this EE PR to track tests: https://github.com/appsmithorg/appsmith-ee/pull/5217 Parts of appsmithorg#36154 ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No  ## Summary by CodeRabbit ## Release Notes - **New Features** - Introduced a custom hook for streamlined retrieval of action-related values in forms. - Added utility functions for counting valid headers and parameters. - **Improvements** - Simplified component interfaces by removing unnecessary properties related to headers and parameters. - Enhanced type safety for header and parameter properties. - Refined tab rendering logic for better user experience. - **Bug Fixes** - Adjusted logic to ensure actions are dispatched only on changes to action IDs. - **Documentation** - Updated relevant documentation to reflect changes in component props and functionalities.

Nikhil-Nandagopal added the Task A simple Todo label Sep 6, 2024

hetunandu self-assigned this Sep 6, 2024

hetunandu added the IDE Product Issues related to the IDE Product label Sep 6, 2024

hetunandu added this to the Action Redesign :: Modularisation milestone Sep 6, 2024

github-actions bot added the IDE Pod Issues that new developers face while exploring the IDE label Sep 6, 2024

hetunandu mentioned this issue Sep 12, 2024

[Task]: Modularise Plugin Action Editor #34324

Closed

4 tasks

hetunandu mentioned this issue Sep 19, 2024

chore: [Plugin Action Editor] CommonEditorForm #36380

Merged

2 tasks

ankitakinger mentioned this issue Sep 20, 2024

[EPIC]: Actions redesign #34663

Open

hetunandu mentioned this issue Sep 24, 2024

chore: [Plugin Action Form] Common Editor State #36512

Merged

2 tasks

hetunandu mentioned this issue Oct 4, 2024

chore: [Plugin Action Editor] Query forms in Plugin Action Form #36684

Merged

2 tasks

hetunandu closed this as completed in #36684 Oct 4, 2024

hetunandu closed this as completed in 4f70e6d Oct 4, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Task] Combine Query Editor and Api Editor form components #36154

[Task] Combine Query Editor and Api Editor form components #36154

hetunandu commented Sep 6, 2024 •

edited

Loading

[Task] Combine Query Editor and Api Editor form components #36154

[Task] Combine Query Editor and Api Editor form components #36154

Comments

hetunandu commented Sep 6, 2024 • edited Loading

hetunandu commented Sep 6, 2024 •

edited

Loading