(WIP): Auto height instant update

[riodeuno]

Description

• [ ] Display the auto height updates during drag and resize, instead of after drop.

Fixes # (issue)

if no issue exists, please create an issue and ask the maintainers about this first

Media

https://user-images.githubusercontent.com/103687/208754409-dc2a7058-7fb2-477a-a1c4-562ab3b120c9.mov

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)
• This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions, so we can reproduce. Please also list any relevant details for your test configuration. Delete anything that is not important

• Manual
• 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:

• [ ] Test plan has been approved by relevant developers
• [ ] 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

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
appsmith	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Feb 2, 2023 at 4:20PM (UTC)

[SatishGandham]

/perf-test Testing performance infra, ignore.

[github-actions[bot]]

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/3764339506. Workflow: Performance Tests Workflow. Commit: ``. PR: 19082. Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=19082&runId=3764339506_1

[riodeuno]

@rahulramesha @marks0351 @kamakshibhat-appsmith @Sripriya93 This is now ready for QA and review.

[riodeuno]

/ok-to-test sha=093649e

[github-actions[bot]]

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/3980833355. Workflow: Appsmith External Integration Test Workflow. Commit: 093649e. PR: 19082. Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=19082&runId=3980833355_1

[riodeuno]

/ok-to-test sha=bbaa131

[github-actions[bot]]

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/3981044185. Workflow: Appsmith External Integration Test Workflow. Commit: bbaa131. PR: 19082. Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=19082&runId=3981044185_1

[Sripriya93]

Observations @riodeuno

1. Container as parent and tabs widget inside it, and when we drag a checkbox to go to the bottom tabs and container are both not resizing

https://user-images.githubusercontent.com/104895602/214274093-4c713200-eb89-4684-80b8-1978c26d7e4c.mp4

2. Tabs widget when we resize any widget inside it, we are seeing the dotted border of the tabs to be slightly above the actual size of the tabs

https://user-images.githubusercontent.com/104895602/214275855-38be1515-74a1-4224-bc0e-135e6b81a854.mp4

3. Canvas has a gap at the bottom when we drag and drop any widget in it.

4. Container as parent and tabs widget inside it, and when we drag a smaller widget to the bottom, we are able to see the scroll goes up a bit and reduces in height and when we drop the height enlarges to fit the widget.

https://user-images.githubusercontent.com/104895602/214284257-3607d8ab-6993-45e5-b662-4988d7a537a3.mp4

[riodeuno]

@Sripriya93 Thank you for spotting these issues, I'll push fixes for this by tomorrow.

[Sripriya93]

@riodeuno - Continuation from the above

5. Map widget have issue with displaying the map itself

6. Able to see a huge space below Modal widget when we drag and drop it

https://user-images.githubusercontent.com/104895602/214363663-8e48648b-0fcf-4090-8887-62236d24e4ea.mp4

7. Modal widget collapses when we DnD a Tab widget inside it. (Also happens with JSON form, Switch group & stat box (When we move it a bit after placing it inside the Modal), )

https://user-images.githubusercontent.com/104895602/214364624-f9fbc640-e36c-4268-84b0-c4b70528088f.mp4

8. For Modal widget, we are seeing a scroll overriding the border of the widget.

9. Stat box inside Modal widget when we try to move it inside the Modal we are not able to see the position or the highlight of where the widget is placed at that moment

https://user-images.githubusercontent.com/104895602/214368362-329ca407-d2bf-430d-9221-aac1271f9eea.mp4

10. Tabs widget, unnecessarily gets expand when we try to drop any widget inside the child widget, and then returning to the original height after the drop

https://user-images.githubusercontent.com/104895602/214370642-4e75f0ff-3360-408f-8c61-5287c3bdc6f7.mp4

11. Issue with Camera widget, size of the screen inside the camera is small

12. Progress widget is blank

[riodeuno]

@marks0351 @rahulramesha This is once again ready for review.

[riodeuno]

@kamakshibhat-appsmith @Sripriya93 This is ready for QA with the fixes for the known issues.

[riodeuno]

/ok-to-test sha=2243f98

[github-actions[bot]]

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/4015556380. Workflow: Appsmith External Integration Test Workflow. Commit: 2243f98. PR: 19082. Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=19082&runId=4015556380_1

[github-actions[bot]]

The following are new failures, please fix them before merging the PR

[github-actions[bot]]

The following are new failures, please fix them before merging the PR cypress/integration/Regression_TestSuite/Application/CommunityIssues_Spec.ts cypress/integration/Regression_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_DragAndDropWidget_spec.js cypress/integration/Regression_TestSuite/ClientSideTests/Git/GitSync/RegenerateSSHKey_spec.js cypress/integration/Regression_TestSuite/ClientSideTests/IDE/Command_Click_Navigation_spec.js cypress/integration/Regression_TestSuite/ClientSideTests/OtherUIFeatures/Resize_spec.js cypress/integration/Regression_TestSuite/ClientSideTests/Templates/Fork_Template_Existing_app_spec.js cypress/integration/Regression_TestSuite/ClientSideTests/ThemingTests/Theme_Default_spec.js cypress/integration/Regression_TestSuite/ClientSideTests/ThemingTests/Theme_FormWidget_spec.js cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/Container_spec.js cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/Filepicker/FilePickerV2_Widget_reset_spec.js cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/Form/FormWidget_spec.js cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/List/List4_spec.js cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/Modal_spec.js cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/Tab/Tab_new_scenario_spec.js cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/Tab/Tab_spec.js cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/WidgetCanvas_spec.js

[Sripriya93]

@riodeuno here are the issues found today

1. Large space below the Modal widget is still seen (Already discussed please ignore)

2. White space seen below canvas, Is it expected?

3. Tabs widget, unnecessarily gets expand when we try to drop any widget inside the child widget, and then returning to the expected height after the drop, because of this when we put tabs widget inside container, we are not able to drop any widget at the bottom of the container, even if we scroll

4. When we have Tabs widget inside container and drop a widget inside Tab and scroll down in the container to place a widget at the bottom of the container, and move the mouse the tabs and container scroll back

https://user-images.githubusercontent.com/104895602/215035259-d7a80d30-7e16-4220-8878-9a43ad31f077.mp4

5. Slider are all Top aligned, in release they are center aligned

6. No signifiers seen in Modal widget

https://user-images.githubusercontent.com/104895602/215056189-1066cd61-fd8b-4068-be45-4f545f14cf1c.mp4

7. Scroll contents toggle not working for Forms widget, in Fixed height

8. When we have widgets inside Tabs in Fixed height and when toggle off Scroll contents, we are seeing the widgets inside them disappears

https://user-images.githubusercontent.com/104895602/215076893-c58972ea-85d3-4d26-80b9-5da860d95131.mp4

9. Scroll doesnt get smaller when we remove from the bottom of the canvas

10. Widgets at the corner of the Container and Form widget with Border radius as 1.5 rem, widgets at the corner are not respecting the border radius

11. In all container like widgets, in fixed height when resized to larger size after we drop two or three widgets, we arent able to drop another widget at the bottom of the widget

https://user-images.githubusercontent.com/104895602/215097699-9f8b2c4b-363e-4261-8fed-cf2ab9cb5c01.mp4

12. In fixed height in Modal widget scroll isnt working, so we are not able to place widgets

https://user-images.githubusercontent.com/104895602/215098588-60beff7e-9128-4c1f-a25f-37440b16d137.mp4

[riodeuno]

@Sripriya93 First of all, thanks for finding these issues. These are issues I would not have noticed, and thanks to you finding them, I have more confidence in this feature.

White space seen below canvas, Is it expected?

I need help replicating this issue. Please show me the steps to do this.

Tabs widget, unnecessarily gets expand when we try to drop any widget inside the child widget, and then returning to the expected height after the drop, because of this when we put tabs widget inside container, we are not able to drop any widget at the bottom of the container, even if we scroll

This is a direct consequence of auto height instant update. I will not be fixing this in this release. We need to go back to the drawing board to figure out a good approach here.

When we have Tabs widget inside container and drop a widget inside Tab and scroll down in the container to place a widget at the bottom of the container, and move the mouse the tabs and container scroll back

This happens because on focus, the widget name component shows up. This adds a small scroll.

Slider are all Top aligned, in release they are center aligned

Fixed

No signifiers seen in Modal widget

Fixed

Scroll contents toggle not working for Forms widget, in Fixed height

Fixed

When we have widgets inside Tabs in Fixed height and when toggle off Scroll contents, we are seeing the widgets inside them disappears

Fixed

Widgets at the corner of the Container and Form widget with Border radius as 1.5 rem, widgets at the corner are not respecting the border radius

Fixed

In all container like widgets, in fixed height when resized to larger size after we drop two or three widgets, we arent able to drop another widget at the bottom of the widget

I can't seem to replicate this. I believe the fixes for the above issues, must have fixed this, please let me know if this is consistently happening

In fixed height in Modal widget scroll isnt working, so we are not able to place widgets

Fixed

Scroll doesnt get smaller when we remove from the bottom of the canvas

Fixed

[riodeuno]

/ok-to-test sha=4e7c4c6

[github-actions[bot]]

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/4038926591. Workflow: Appsmith External Integration Test Workflow. Commit: 4e7c4c6. PR: 19082. Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=19082&runId=4038926591_1

[Sripriya93]

@riodeuno Thanks much, have retested the fixed issues and saw some issues mentioned below, will take a look at the PR again later today or tomorrow,

1. Container like widgets are not reflowing (At the beginning of the loom we would be able to see the white space after we DnD a container widget)

https://user-images.githubusercontent.com/104895602/215408669-cd4f68c7-6c6c-4cb5-8b26-16b853410db1.mp4

2. Widget jumps when we drag and drop while reflow

https://user-images.githubusercontent.com/104895602/215409520-a8574e59-2bd8-4e85-8dd0-754db54b808f.mp4

[riodeuno]

/ok-to-test sha=2e6dd04

[github-actions[bot]]

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/4047442602. Workflow: Appsmith External Integration Test Workflow. Commit: 2e6dd04. PR: 19082. Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=19082&runId=4047442602_1

[github-actions[bot]]

The following are new failures, please fix them before merging the PR

[github-actions[bot]]

The following are new failures, please fix them before merging the PR cypress/integration/Regression_TestSuite/ClientSideTests/Binding/BindButton_Text_WithRecaptcha_spec.js cypress/integration/Regression_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_DragAndDropWidget_spec.js cypress/integration/Regression_TestSuite/ClientSideTests/Linting/BasicLint_spec.ts cypress/integration/Regression_TestSuite/ClientSideTests/OtherUIFeatures/Resize_spec.js cypress/integration/Regression_TestSuite/ClientSideTests/ThemingTests/Theme_Default_spec.js cypress/integration/Regression_TestSuite/ClientSideTests/ThemingTests/Theme_FormWidget_spec.js cypress/integration/Regression_TestSuite/ClientSideTests/VisualTests/JSEditorComment_spec.js cypress/integration/Regression_TestSuite/ClientSideTests/VisualTests/WidgetsLayout_spec.js cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/Container_spec.js cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/Form/FormWidget_spec.js cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/List/List4_spec.js cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/Tab/Tab_spec.js cypress/integration/Regression_TestSuite/ClientSideTests/Widgets/WidgetCanvas_spec.js cypress/integration/Regression_TestSuite/ServerSideTests/OnLoadTests/JSOnLoad_cyclic_dependency_errors_spec.js

[marks0351]

PR looks good. let me know once all bugs are fixed, il approve it one last time.

[riodeuno]

@Sripriya93

Container like widgets are not reflowing

I noticed the same experience on release, so I will not be fixing this in this PR.

Widget jumps when we drag and drop while reflow

This is a consequence of the widget needing more height when the auto height is computed. This is also something which we won't be fixing in this PR. This needs a product discussion.

[riodeuno]

/ok-to-test sha=3890aa8

[github-actions[bot]]

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/4059426514. Workflow: Appsmith External Integration Test Workflow. Commit: 3890aa8. PR: 19082. Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=19082&runId=4059426514_1