fix: Invisible child widgets in List Widget (#21548)

## Description

The invisible widget seems to regress the List widget. This PR fixes
this by disabling Auto height Saga updates on the List widget Child
WIdgets.


Fixes #21519

## Type of change
- Bug fix (non-breaking change which fixes an issue)


## How Has This Been Tested?
- Cypress

### Test Plan
> https://github.com/appsmithorg/TestSmith/issues/2187

### 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
- [ ] PR is being merged under a feature flag


### QA activity:
- [x] Test plan has been approved by relevant developers
- [x] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test
This commit is contained in:
Tolulope Adetula 2023-03-20 08:06:28 +00:00 committed by GitHub
parent ea16f40f0c
commit f8d04d0a8a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 37 additions and 1 deletions

View File

@ -0,0 +1,29 @@
const widgetsPage = require("../../../../../locators/Widgets.json");
const publishPage = require("../../../../../locators/publishWidgetspage.json");
const widgetSelector = (name) => `[data-widgetname-cy="${name}"]`;
describe("List widget v2 Regression", () => {
it("1. List widget V2 with invisible widgets", () => {
cy.dragAndDropToCanvas("listwidgetv2", {
x: 300,
y: 300,
});
cy.openPropertyPaneByWidgetName("Text1", "textwidget");
cy.get(widgetsPage.toggleVisible).click({ force: true });
cy.testJsontext("visible", "false");
cy.PublishtheApp();
cy.get(`${widgetSelector("Text1")}`).should("not.exist");
cy.get(`${widgetSelector("List1")} div[type="CONTAINER_WIDGET"]`).each(
($el) => {
cy.wrap($el).click({ force: true });
cy.wrap($el)
.parent()
.should("have.css", "outline", "rgb(59, 130, 246) solid 1px");
},
);
cy.get(publishPage.backToEditor).click({ force: true });
});
});

View File

@ -151,6 +151,7 @@ export const WIDGET_DSL_STRUCTURE_PROPS = {
children: true,
requiresFlatWidgetChildren: true,
hasMetaWidgets: true,
isMetaWidget: true,
parentId: true,
referencedWidgetId: true,
topRow: true,

View File

@ -219,7 +219,13 @@ function withWidgetProps(WrappedWidget: typeof BaseWidget) {
// We don't render invisible widgets in view mode
if (shouldCollapseWidgetInViewOrPreviewMode) {
if (widgetProps.bottomRow !== widgetProps.topRow) {
// This flag (isMetaWidget) is used to prevent the Auto height saga from updating
// the List widget Child Widgets. Auto height is disabled in the List widget and
// this flag serves as a way to avoid any unintended changes to the child widget's height.
if (
widgetProps.bottomRow !== widgetProps.topRow &&
!widgetProps.isMetaWidget
) {
dispatch({
type: ReduxActionTypes.UPDATE_WIDGET_AUTO_HEIGHT,
payload: {