Commit Graph

12 Commits

Author SHA1 Message Date
Preet Sidhu
c396fc5499
feat: Add copy paste functionality for Anvil. (#30217)
## Description

1. Copy paste functionality for Anvil.
2. Handle automatic creation of sections and zones based on different
scenarios.
3. Handle space distribution on paste.

#### 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
- [ ] Jest
- [ ] Cypress

## 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
- [ ] My changes generate no new warnings
- [ ] 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
- [ ] 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 a new paste functionality for widgets within the Anvil
layout system.

- **Improvements**
  - Refined widget movement logic to accommodate different canvas types.
- Expanded widget pasting capabilities with additional checks and
operations.

- **Bug Fixes**
- Addressed potential issues with dragging blocks by ensuring existence
checks before mapping.

- **Refactor**
- Streamlined sagas for widget operations to better align with the Anvil
layout system.
- Consolidated widget position utility functions for more efficient
layout management.

- **User Interface**
- Implemented user-friendly error messaging for paste operations that
fail.

- **Documentation**
- Updated messages and constants to support new paste functionality and
error handling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com>
2024-01-24 21:55:08 +05:30
Valera Melnikov
10a98f9563
fix: use wds tokens in sections and zones (#30479)
## Description
- Added tokens to the anvil config
- Removed redundant functions for calculating widget sizes
- I cleaned the widget configs
- Added a zero-state to the input component
- Optimised the responsiveness of the action group component


https://github.com/appsmithorg/appsmith/assets/11555074/e9e0513a-cf3f-42ef-b960-820bb4980858

#### PR fixes following issue(s)
Fixes #29507 

#### Type of change
> Please delete options that are not relevant.
- Bug fix (non-breaking change which fixes an issue)
- New feature (non-breaking change which adds functionality)
- Chore (housekeeping or task changes that don't impact user perception)

## 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
- [ ] 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
- [x] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] 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
- [ ] 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**
- Enhanced `MenuItem` display with additional text attribute for better
accessibility.
- Improved user interaction with `TextArea` and `TextInput` components
through more effective handling of default and read-only states.
- Extended `Flex` component to include click event handling
capabilities.
- Refined `ActionGroup` styling and dynamic sizing for a more polished
UI experience.

- **Enhancements**
- Updated `Button` styling to ensure consistency across different screen
sizes.
- Optimized layout and styling of `Menu` items for improved visual
hierarchy and responsiveness.

- **Refactor**
- Simplified `WidgetProvider` and `AnvilEditorWidget` configurations for
more streamlined layout management.
- Refined `ZoneColumn` rendering for better alignment with layout system
principles.

- **Bug Fixes**
- Fixed minimum width calculation in `useZoneMinWidth` hook to ensure
correct layout behavior.
- Corrected `AnvilDSLTransformer` padding value for consistent widget
spacing.

- **Documentation**
- Removed redundant Storybook addon to streamline developer experience.

- **Style**
- Adjusted CSS for various components to align with updated design
system standards.

- **Tests**
- Updated widget property pane configuration tests for better coverage
and reliability.

- **Chores**
- Cleaned up unused imports and methods across multiple widget
components for improved code maintenance.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-01-24 11:02:42 +03:00
Pawan Kumar
302ecb6a1c
feat: Tabler Icons (#30248)
Fixes #28443
Fixes #27866 

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

- **New Features**
- Introduced `IconSelectControlV2` for enhanced icon selection with
keyboard navigation and state updates.
- Added new `iconStyle` theme property for users to define icon styles
globally.
- Implemented dynamic icon loading with fallback options, improving icon
management.

- **Enhancements**
- Simplified icon usage across various components like `Button`,
`IconButton`, `Menu`, `ModalHeader`, `TextInput`, and more by directly
using icon names.
- Enhanced `Tag` component to use a generic `Icon` component for the
remove action.
  
- **Style Updates**
- Added CSS classes for resizing, boundary display, and pointer event
handling.
  - Updated icon size definitions using CSS custom properties.

- **Bug Fixes**
- Fixed icon-related issues in `Button`, `ActionGroup`, `Menu`, and
`TextInput` components to ensure proper icon display.

- **Documentation**
- Updated storybook and test cases to reflect new icon selection and
usage.

- **Refactor**
- Refactored theme and token management to include `iconStyle` for
consistent icon theming.
- Refined the `ButtonGroupWidget` and `MenuButtonWidget` to use the new
icon selection mechanism.

- **Chores**
- Cleaned up unused icon imports and components across the codebase to
streamline the icon system.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-01-19 11:54:44 +03:00
Abhinav Jha
e05313c943
feat: Anvil themeing and Anvil vertical alignment (#29907)
## Description
This PR adds the features of proper vertical alignment and themeing to
Anvil.
- A separate `Container` component is created for Anvil, that is used as
the layer on top of which the themeing tokens are applied.
- A default `min-height` is set using tokens for all widgets in Anvil. 
- Anvil now stops considering any `min-height` configurations provided
by the widgets. It is the widgets responsibility to take care of their
own heights, and Anvil will accommodate them -- no matter the height.
- Table widget's default height is now set to the min height that was
configured for it earlier.
- `AnvilFlexComponent` now has `overflow:visible` to allow the shadows
for zones and sections to not be cut-off.
- All widgets are aligned center vertically by default. This will apply
if they're smaller than the set `min-height`
- Zones and Sections have elevation styles applied suing the `Container`
component mentioned above.
- Zones and Sections don't have any styling property other than
`Background`, we'll add more as we understand more about the product.
   

> Conditional vertical margin applied to widgets.
> If in a row of widgets (.aligned-widget-row), one of the widgets has a
label ([data-field-label-wrapper]), then
> all widgets (.anvil-widget-wrapper) in the row other than the widget
with the label, will shift down using the
> margin-block-start property. This is to ensure that the widgets are
aligned vertically.
> The value of the margin-block-start property is calculated based on
the spacing tokens used by the labels in input
>     like components
> 

#### PR fixes following issue(s)
Fixes #29073 
Fixes #28591
Fixes #28592 
Fixes #28593


#### Media
![Screenshot 2023-12-28 at 3 55
05 AM](https://github.com/appsmithorg/appsmith/assets/103687/30b04bc7-62af-40af-9f4c-50774bec3fdf)


#### Type of change
- New feature (non-breaking change which adds functionality)
## Testing
#### How Has This Been Tested?
- [x] Manual
- [ ] JUnit
- [ ] Jest
- [ ] Cypress

#### Test Plan

#### Issues raised during DP testing
## Checklist:
#### Dev activity
- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] 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**
- Introduced conditional vertical margins for widgets to ensure
alignment within rows.
- Added a new `Container` component for thematic elevation styles in
Anvil widgets.
- Implemented elevation style options and semantic background settings
for Section and Zone widgets.

- **Enhancements**
- Improved visual layout and alignment of AnvilFlexComponent with
updated styling properties.
- Added `className` properties to various layout components for enhanced
CSS targeting.

- **Style**
- Updated widget styles to accommodate new background and elevation
features.

- **Refactor**
	- Simplified padding logic in WDSParagraphWidget.
	- Streamlined dimensions calculation in WDSTableWidget.

- **Documentation**
- Renamed sections in property panes to better reflect background
styling options.

- **Chores**
- Added `Elevations` enum to manage elevation values consistently across
components.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2023-12-29 08:41:05 +05:30
Valera Melnikov
1249330f91
feat: implement WDS components and tokenst at header of table widget (#28977)
## Description
Implement WDS components and tokenst at header of table widget

#### PR fixes following issue(s)
Fixes #28391 

#### Media

https://github.com/appsmithorg/appsmith/assets/11555074/456babee-ff8f-4771-8867-f44ae5bbe236

#### 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
- [ ] Jest
- [ ] Cypress

## 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
- [x] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] 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
- [ ] PR is being merged under a feature flag
2023-11-22 10:34:48 +03:00
Preet Sidhu
cf764a9b40
chore: add configuration for large and small widgets (#28671)
## Description

Use case - Widgets need to be distinguished as large or small in Anvil.

1. Add property ``isLargeWidget`` to ``AnvilConfig`` interface.
2. Update AnvilConfig for all widget. Especially, WDS widgets.

#### Type of change
- Chore (housekeeping or task changes that don't impact user perception)

## 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
- [ ] Jest
- [ ] Cypress


## 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
- [ ] 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
- [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

---------

Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com>
2023-11-14 10:55:48 +05:30
Valera Melnikov
e32ce4c18e
feat: add currency to wds table (#28747)
## Description
- Copy currency functionality of Table widget to WDS. [Original
PR](https://github.com/appsmithorg/appsmith/pull/27819).
- Fix imports
2023-11-10 14:27:28 +03:00
balajisoundar
694b17062b
feat: Table widget currency column (#27819)
## Description
Adds a new currency column type on the table widget.

#### PR fixes following issue(s)
Fixes #5632 
> 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
- [x] Manual
- [ ] JUnit
- [ ] Jest
- [x] Cypress
>
>
#### Test Plan
> https://github.com/appsmithorg/TestSmith/issues/2447
>
>
#### 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
- [x] 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
- [ ] 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
2023-11-06 11:05:26 +05:30
Ashok Kumar M
5cb06ee6e5
fix: Hacky fixes to make table work in Anvil Safari (#28417)
> Pull Request Template
>
> Use this template to quickly create a well written pull request.
Delete all quotes before creating the pull request.
>
## Description
In this PR we are making few hacky changes to WDS Table widget to make
it work in safari as well as function as expected in all browsers.
Table widget current version is a copied version of Fixed layout so it
expects dimensions to be set unlike other WDS widgets so adding
dimensions in a hacky way.
In safari simple bar css doesnt see to work well, they overflow and
cover all other widgets. @jsartisan and I tried to understand the issue,
but for now making the wrapper position: sticky for some reason works.
so adding that as well.

All these fixes are hacky so that we get a usable Anvil Edito, but they
are safe coz WDS widgets are not used anywhere except Anvil and Anvil is
under a feature flag.

#### PR fixes following issue(s)
Fixes # (issue number)
> 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
> Please delete options that are not relevant.
- Bug fix (non-breaking change which fixes an issue)
- New feature (non-breaking change which adds functionality)
- Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- Chore (housekeeping or task changes that don't impact user perception)
- This change requires a documentation update
>
>
>
## 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
- [ ] 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
- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] 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
2023-10-27 14:33:42 +05:30
Preet Sidhu
159a26fb6e
chore: Add MutuationObserver to track changes in positions of widgets and layouts. (#28315) 2023-10-24 07:37:06 -04:00
Rishabh Rathod
68df2a18a6
chore: CE changes for module input autocomplete (#28221) 2023-10-20 17:02:24 +05:30
Valera Melnikov
5ba9790e9e
chore: fork table widget (#28116)
## Description
Fork table widget for further WDS improvements.
2023-10-17 12:54:38 +03:00