appsmith feat: wrap widgets into a component which listens to content height changes

Description

Problem We know that some of our widgets are dynamic, take for example CheckboxGroup widget, we can add and remove options from the property pane or hook its data to an API. How can we know how much this widget wants to grow in height?
Solution What if we wrap each widget in a simple div whose height is auto, so now this div will always have height equal to the widget's height, whatever widget wants to grow or shrink the height of this div will be equal to that. What about the changes in height? We used ResizeObserver on this simple div which keep sending us updates whenever a widget wants to change it's height. And then we send these updates to our updateDynamicHeight store actions from the BaseWidget.
Features
This component is very simple, accepts 3 props, maxDynamicHeight, isAutoWithLimits and onHeightUpdate.
maxDynamic this is used only when isAutoWithLimits is enabled, and adds 2 containers to the div while the inner one sends the height updates and the outer one checks if the max is less than the expected height of the widget, in that case it scrolls.
onHeightUpdate is a callback function sent from BaseWidget, which actually calls the updateDynamicHeight action.

Type of change

New feature (non-breaking change which adds functionality)

How Has This Been Tested?

Written a complimentary DynamicHeightContainer.test.tsx which includes some jest test suite to test the functionality of the DynamicHeightContainer.tsx.

Checklist:

[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

Oct 19 '22 18:10 ankurrsinghal

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

Name	Status	Preview	Updated
appsmith	✅ Ready (Inspect)	Visit Preview	Oct 31, 2022 at 10:35AM (UTC)

Oct 19 '22 18:10 vercel[bot]

/ok-to-test sha=dd12eb3

Oct 19 '22 18:10 ankurrsinghal

/ok-to-test sha=de40677

Oct 19 '22 18:10 ankurrsinghal

@ankurrsinghal I really like the PR's description. It explains what we've done here. The checklist from the PR template is missing. Can we use the template and add all the current contents into the description section of the template?

Oct 19 '22 18:10 riodeuno

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/3284160072. Workflow: Appsmith External Integration Test Workflow. Commit: dd12eb3. PR: 17729. Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-63465d4789020c7ac296d08d?pr=17729&runId=3284160072_1

Oct 19 '22 18:10 github-actions[bot]

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/3284160485. Workflow: Appsmith External Integration Test Workflow. Commit: de40677. PR: 17729. Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-63465d4789020c7ac296d08d?pr=17729&runId=3284160485_1

Oct 19 '22 18:10 github-actions[bot]

Unable to find test scripts. Please add necessary tests to the PR.

Oct 19 '22 18:10 github-actions[bot]

Unable to find test scripts. Please add necessary tests to the PR.

Oct 19 '22 18:10 github-actions[bot]

@ankurrsinghal I really like the PR's description. It explains what we've done here. The checklist from the PR template is missing. Can we use the template and add all the current contents into the description section of the template?

Done

Oct 19 '22 19:10 ankurrsinghal

Please checkout the updates I've made in this component in this PR here: #17686

The reason for this, is that when we get a new min or max dynamic height, we need to make sure we need to run the updateDynamicHeight to make sure that the changes are reflected in the UI.

Did the corresponding updates!

Oct 19 '22 19:10 ankurrsinghal

/ok-to-test sha=31c9ed4

Oct 19 '22 19:10 ankurrsinghal

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/3284519342. Workflow: Appsmith External Integration Test Workflow. Commit: 31c9ed4. PR: 17729. Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-63465d4789020c7ac296d08d?pr=17729&runId=3284519342_1

Oct 19 '22 20:10 github-actions[bot]