feat: WIP - Add DynamicContainerWidget (#22796)

[iamenrique]

Description

• Work In Progress - Looking for feedback and guidance
• I'm creating a DynamicContainerWidget to allow my users to select different layouts.
• Not sure if this is the right approach to resolve this need. I'm having problems defining the width/height of each section's contents.

Please, let me know if progress so far is correct. @dilippitchika @riodeuno @Nikhil-Nandagopal

Fixes #22796

Media
https://watch.screencastify.com/v/svt9jNI7ZHTxyzWcRzy3

Type of change

Please delete options that are not relevant.

• New feature (non-breaking change which adds functionality)
• This change requires a documentation update

How Has This Been Tested?

• Manual

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

[welcome]

Welcome to the Appsmith community! Thank you for your first pull request and making this project better. 🤗 Please make sure that you raise a review request so your code change does not go unnoticed.

[dilippitchika]

@iamenrique can you explain what is the problem you are trying to solve with this widget?

[iamenrique]

@dilippitchika What I try to do is what I described in this thread a couple of days ago:
https://discord.com/channels/725602949748752515/1100552199475576954

I need the following layouts in my page:

• 100% + a slide out/overlay
• 33% / 66% + the slide out/overlay
• 25% / 50% / 25%

I plan to have a single widget in each section, and that widget should take the whole space of the container (height and width).

Unless you suggest a different approach, I'd try to solve it via a DynamicContainerWidget. Drop one of those in my page, extend it to take the whole page width and enough height, and place my contents in the sections. Currently it's using a blueprint to have the 3 Containers, each one with a Text widget (display "Panel A/B/C" respectively.

[dilippitchika]

@iamenrique checked the discord as well, but i have more questions

1. Why do your users need to toggle and see different views?
   -> "If the user decides to focus on the detail card widget, it can click on a toggle button to change the 70/30 layout to be 50/50 or even 30/70." - Did your users ask for this dynamic behavior? What is the data they look at that prompted them to ask this new dynamic split?
2. What prompted you to add the new widget? Is it a non-negotiable feature to adopt Appsmith in your organisation? If yes, then we would like to talk to you and understand more.

[dilippitchika]

CC @andreevanatasha

[iamenrique]

@dilippitchika I'm happy to answer.

1. This is like a Master Detail UI. Left section (section A) is a Table/List of resources. Right section (section B) is a custom detail component with charts and other visualizations where the user can drop items dragged from section A. Plus, there's a third section (section C) that can be in overlay mode (to hide and show) or be pinned to become a 25/50/25 layout. Section C is a detail of the selected row in A. B shows data of several items, but also depends on A's selected row to do some UI customization. Section B can be set as the "secondary" or "primary" component in the working area, that's why the user should be able to toggle the layout mode.
2. I couldn't find another way to do what I described above. Wrapping all that logic in a widget is the only way I know without messing with the whole product or the canvas. We are planning to adopt Appsmith for other reasons, and I don't really need to push this feature to the core product. I can just keep mine on my end and don't think of it as a generic widget but something tailor-made for my company.

[dilippitchika]

Hey @iamenrique i still don't understand the need for having quite this dynamic master detail pattern. I get that once you select something in the master, the focus should be on the detail and that is why it should change dynamically. But having 3 layouts, overlays etc doesn't make sense to me yet.

Nevertheless, we think it's better if you fork a version of Appsmith and add the widget there so that you can use it but i don't think we can add and maintain the widget right now. We will soon open anyone to contribute custom widget #2033 so that you can add this widget without forking.

Really appreciate your contribution, we will launch our custom widgets feature soon.