From f8d04d0a8a8f676a9647f98d791829cd1250dfbe Mon Sep 17 00:00:00 2001
From: Tolulope Adetula <31691737+Tooluloope@users.noreply.github.com>
Date: Mon, 20 Mar 2023 08:06:28 +0000
Subject: [PATCH] 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
---
 .../ListV2/Listv2_regression_fix_spec.js      | 29 +++++++++++++++++++
 app/client/src/constants/WidgetConstants.tsx  |  1 +
 app/client/src/widgets/withWidgetProps.tsx    |  8 ++++-
 3 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/ListV2/Listv2_regression_fix_spec.js

diff --git a/app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/ListV2/Listv2_regression_fix_spec.js b/app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/ListV2/Listv2_regression_fix_spec.js
new file mode 100644
index 0000000000..1968989d5f
--- /dev/null
+++ b/app/client/cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/ListV2/Listv2_regression_fix_spec.js
@@ -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 });
+  });
+});
diff --git a/app/client/src/constants/WidgetConstants.tsx b/app/client/src/constants/WidgetConstants.tsx
index 5b630eb5ac..9dac0987bd 100644
--- a/app/client/src/constants/WidgetConstants.tsx
+++ b/app/client/src/constants/WidgetConstants.tsx
@@ -151,6 +151,7 @@ export const WIDGET_DSL_STRUCTURE_PROPS = {
   children: true,
   requiresFlatWidgetChildren: true,
   hasMetaWidgets: true,
+  isMetaWidget: true,
   parentId: true,
   referencedWidgetId: true,
   topRow: true,
diff --git a/app/client/src/widgets/withWidgetProps.tsx b/app/client/src/widgets/withWidgetProps.tsx
index 911f903e4e..817aea58fc 100644
--- a/app/client/src/widgets/withWidgetProps.tsx
+++ b/app/client/src/widgets/withWidgetProps.tsx
@@ -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: {