Commit Graph

1 Commits

Author SHA1 Message Date
Hetu Nandu
5d5d9f4212
feat: JS Editor Toolbar (#36921)
## Description

Adds the redesigned toolbar in the JS editor experience. This change is
behind a feature flag.

You would notice that there is a lot of repeated code, it is an
intentional choice to repeat code instead of refactor and reuse as we
essentially want to do a re design and not include any change in logic.
All new components are created using the same logic blocks / components
and just wrapped with our new design. This makes us debug issues during
the transition easy and eventual removal of the old code much easier


Fixes #36920

## Automation

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

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/11402542722>
> Commit: e61000b5229a934e4d264849401ca630691b87cb
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11402542722&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.JS`
> Spec:
> <hr>Fri, 18 Oct 2024 11:41:43 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Release Notes

- **New Features**
- Introduced a new JavaScript editor settings configuration for enhanced
customization.
  - Added a custom React hook to manage application state effectively.
- Launched the `JSEditorToolbar` component, consolidating editing
functionalities.
- New components for JavaScript function execution and settings
management, including `JSFunctionRun` and `JSFunctionSettings`.
- Added the `ToolbarSettingsPopover` component for improved settings
management in the toolbar.
- Enhanced the JavaScript editor with a feature flag for action
redesign.

- **Bug Fixes**
- Improved rendering logic based on feature flags in the context menu
and toolbar.

- **Tests**
- Implemented new test suites for various components to ensure
functionality and rendering accuracy.

- **Chores**
- Cleaned up imports and constants, streamlining the codebase for better
maintainability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-10-18 17:47:25 +05:30