## Description
- Add support for [ Scss
syntax](https://sass-lang.com/documentation/syntax/) in the custom
widget builder style tab.
- Change the css editor title to style. Since we now support the SCSS
syntax as well.
#### PR fixes following issue(s)
Fixes#28614
#### Media
> A video or a GIF is preferred. when using Loom, don’t embed because it
looks like it’s a GIF. instead, just link to the video
>
>
#### Type of change
- New feature (non-breaking change which adds functionality)
>
>
>
## Testing
>
#### How Has This Been Tested?
> Please describe the tests that you ran to verify your changes. Also
list any relevant details for your test configuration.
> Delete anything that is not relevant
- [x] Manual
- [ ] JUnit
- [x] Jest
- [ ] Cypress
>
>
#### Test Plan
> Add Testsmith test cases links that relate to this PR
>
>
#### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)
>
>
>
## Checklist:
#### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag
#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Added SCSS syntax support and CSS variables usage in tooltips.
- Introduced styled components for better styling consistency across the
app.
- Enhanced the Custom Widget Builder with improved error message styling
and tooltip content rendering.
- **Bug Fixes**
- Refined warning message conditions to reduce unnecessary warnings.
- Ensured the `selectedTab` is always valid in the Custom Widget
Builder's `TabLayout`.
- **Refactor**
- Updated function and component names for clarity and consistency
(e.g., `CSSEditor` to `StyleEditor`, `getBabelError` to `getError`).
- Restructured CSS styles for better layout and presentation in the
Custom Widget Builder.
- **Chores**
- Removed unused CSS class definitions and adjusted existing ones for
optimization.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Description
This PR's adds the custom widget.
#### PR fixes following issue(s)
Fixes#28607Fixes#28610Fixes#28615Fixes#28608Fixes#28612
> if no issue exists, please create an issue and ask the maintainers
about this first
>
>
#### Media
> A video or a GIF is preferred. when using Loom, don’t embed because it
looks like it’s a GIF. instead, just link to the video
>
>
#### Type of change
- New feature (non-breaking change which adds functionality)
>
>
>
## Testing
>
#### How Has This Been Tested?
> Please describe the tests that you ran to verify your changes. Also
list any relevant details for your test configuration.
> Delete anything that is not relevant
- [ ] Manual
- [ ] JUnit
- [x] Jest
- [x] Cypress
>
>
#### Test Plan
> Add Testsmith test cases links that relate to this PR
>
>
#### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)
>
>
>
## Checklist:
#### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [x] PR is being merged under a feature flag
#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced search functionality with a wildcard option for unmatched
widget searches.
- Added new routes for custom widget editing.
- Implemented additional editor modes for HTML and CSS.
- Created new code templates and help components for custom widget
builders.
- Enhanced property controls with new button controls for custom widget
editing.
- Updated theming interfaces and constants for better theming support.
- Added the CustomWidget component for embedding custom widgets in
iframes.
- Expanded widgets library to include the CustomWidget.
- **Enhancements**
- Improved `CodeEditor` with additional modes, props, and resize
behavior.
- Enhanced `PropertyPaneControlConfig` interface with dynamic
dependencies and additional properties.
- Refined custom widget scripts with communication channel and event
handling.
- **Bug Fixes**
- Fixed visibility logic for the `ExternalWidget` card.
- **Documentation**
- Added new messages and documentation links for custom widget features.
- **Tests**
- Implemented new Cypress tests for custom widget default components and
property pane interactions.
- Updated workspace commands in Cypress tests.
- **Refactor**
- Streamlined `PropertyControl` state management and editing functions.
- Refactored code editor hint helper logic.
- **Style**
- Added `borderLess` prop to style components without borders.
- **Chores**
- Updated constants and messages related to custom widget features.
- Adjusted webpack configuration to ignore specific module warnings.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
* Scaffolding for undo-redo
* undo redo working Poc commit
* memory performance improvements by diffing
* dont run update on undo/redo"
* merging widget postion update and canvas bottom row update into one dsl update.
* fix tabs widget
* Visible updates per undo redo action (#6838)
Co-authored-by: Rahul R <rahulramesha@Rahuls-MacBook-Pro.local>
* resize atomic operation
* fix switch control state issue
* disallow undo/redo for snipping and comment mode
* disallow undo/redo for snipping and comment mode
* fix color picker issue in undo/redo
* add test for replayDSL
* option control fix, adding logs
* minor position change undo redo updates
* add test cases for replayHelpers
* property Upade visual change
* remove unused code
* global hot key jest test for undo redo
* Fixing batch updates on property change..
* add tests for toggle control in property pane
* unwanted utils.
* add tests for text control
* add tests for deletion
* add tests for dropping a new widget
* adding jest test for replayUtils
* add move widget tests
* add tests for color picker control
* add analytics for undo/redo
* add analytics for undo/redo
* tab addition atomic
* cypress tests for propertyPane, toasts and radiowidget optionControl
* replayDSL end of redo stack fix
* property update changes
* menu option control debounce input
* color picker empty undo fix
* fix cypress tests
* widget add/remove atomic
* revert alternative approach to handle atomic operations
* update replayDSL test
* add some comments
* addressing review comments
* flash color for property pane controls
* Fixing adding of tabs widget as well.
* code review comments.
* merging widget postion update and canvas bottom row update into one dsl update.
* fix ordering of tabs property control
* meta property update canvas min height.
* fixing failed specs.
* Fixing entity explorer update on deleting tab from entity explorer.
* address review comments and minor property update changes
* fixing failing tests
* merge conflicts
* changes to cater widget api.
* fix suggested widget table issue
* draggable list for undo redo
* fix widget name focus
* excluding canvas updates.
* fixing codeEditor update on propertySection collapse
* fixed failing test case
Co-authored-by: Abhinav Jha <abhinav@appsmith.com>
Co-authored-by: Rahul R <rahulramesha@Rahuls-MacBook-Pro.local>
Co-authored-by: root <root@DESKTOP-9GENCK0.localdomain>
Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com>
Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro.local>
