feat: Space redistribution UX upgrade and implicit space distribution #30242

marks0351 · 2024-01-11T11:29:57Z

Pull Request Template

Use this template to quickly create a well written pull request. Delete all quotes before creating the pull request.

Description

In this PR, we are implementing two features

When space distribution is happening via the implicit/explicit method, distribution handle is attracted to the nearest node once mouse pointer is near to it.

Screen.Recording.2024-01-22.at.1.03.01.PM.mov

Implicit space distribution, space distribution can also be done via section/zone property pane.

Screen.Recording.2024-01-18.at.8.23.31.PM.mov

PR fixes following issue(s)

Fixes # (issue number)

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

Media

A video or a GIF is preferred. when using Loom, don’t embed because it looks like it’s a GIF. instead, just link to the video

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)
Chore (housekeeping or task changes that don't impact user perception)
This change requires a documentation update

Testing

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Also list any relevant details for your test configuration.
Delete anything that is not relevant

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

Speedbreak features have been covered
Test plan covers all impacted features and areas of interest
Test plan has been peer reviewed by project stakeholders and other QA members
Manually tested functionality on DP
We had an implementation alignment call with stakeholders post QA Round 2
Cypress test cases have been added and approved by SDET/manual QA
Added Test Plan Approved label after Cypress tests were reviewed
Added Test Plan Approved label after JUnit tests were reviewed

Summary by CodeRabbit

New Features
- Introduced a new Section Splitter Control for enhanced space distribution within property pane sections.
- Added a Zone Stepper Control to manage zone counts through a user-friendly interface.
Enhancements
- Improved feature flag logic for more consistent user experience.
- Refined space distribution with new constants and utility functions for Anvil layout system.
- Streamlined Anvil editor widget structure for better performance and simplicity.
User Interface
- Implemented new property pane sections for SectionWidget and ZoneWidget to improve user interaction and configuration options.
Bug Fixes
- Fixed feature flag retrieval behavior to ensure correct feature access.
Refactor
- Optimized selectors and hooks for better maintainability and readability.
- Updated import paths and renamed modules for clearer codebase navigation.

…o feat/magnetic-distribution

This reverts commit 401746f.

This reverts commit 9e6bcb1.

marks0351 · 2024-01-11T11:30:28Z

/build-deploy-preview skip-tests=true

github-actions · 2024-01-11T11:30:53Z

Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/7488128175.
Workflow: On demand build Docker image and deploy preview.
skip-tests: true.
env: ``.
PR: 30242.
recreate: .

github-actions · 2024-01-11T11:43:15Z

Deploy-Preview-URL: https://ce-30242.dp.appsmith.com

…o feat/magnetic-distribution

marks0351 · 2024-01-17T09:32:18Z

/build-deploy-preview skip-tests=true

marks0351 · 2024-01-17T09:36:28Z

/build-deploy-preview skip-tests=true

github-actions · 2024-01-17T09:36:52Z

Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/7553740012.
Workflow: On demand build Docker image and deploy preview.
skip-tests: true.
env: ``.
PR: 30242.
recreate: .

github-actions · 2024-01-17T09:53:22Z

Deploy-Preview-URL: https://ce-30242.dp.appsmith.com

marks0351 · 2024-01-17T10:50:08Z

/build-deploy-preview skip-tests=true

github-actions · 2024-01-17T10:50:29Z

Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/7554605624.
Workflow: On demand build Docker image and deploy preview.
skip-tests: true.
env: ``.
PR: 30242.
recreate: .

github-actions · 2024-01-17T11:03:40Z

Deploy-Preview-URL: https://ce-30242.dp.appsmith.com

marks0351 · 2024-01-18T14:22:12Z

/build-deploy-preview skip-tests=true

github-actions · 2024-01-18T14:22:35Z

Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/7571379507.
Workflow: On demand build Docker image and deploy preview.
skip-tests: true.
env: ``.
PR: 30242.
recreate: .

github-actions · 2024-01-18T14:35:29Z

Deploy-Preview-URL: https://ce-30242.dp.appsmith.com

marks0351 · 2024-01-18T17:20:50Z

/build-deploy-preview skip-tests=true

github-actions · 2024-01-18T17:21:12Z

Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/7573671098.
Workflow: On demand build Docker image and deploy preview.
skip-tests: true.
env: ``.
PR: 30242.
recreate: .

github-actions · 2024-01-18T17:32:59Z

Deploy-Preview-URL: https://ce-30242.dp.appsmith.com

albinAppsmith · 2024-01-22T09:58:34Z

@marks0351 ADS part looks good.

prsidhu · 2024-01-22T19:35:46Z

...utSystems/anvil/sectionSpaceDistributor/propertyPane/PropertyPaneSectionSpaceDistributor.tsx

+  border-radius: 3px;
+  background-color: var(--ads-v2-color-bg);
+  flex-shrink: 1;
+  height: 34px;


@marks0351 Could this be a relative size? (100% or something)

have moved height to section instead of zone. 👍🏽

prsidhu

Looks good!

Please remove the hard coding for Anvil.

This reverts commit 0981679.

marks0351 · 2024-01-23T05:24:11Z

/ok-to-test tags="tag.PropertyPane"

github-actions · 2024-01-23T05:24:36Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/7621432048.
Workflow: Appsmith External Integration Test Workflow.
Tags: tag.PropertyPane.

github-actions · 2024-01-23T05:52:25Z

Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/7621432048.
Commit: ``.
Cypress dashboard: Click here!
The following are new failures, please fix them before merging the PR:

cypress/e2e/Regression/ClientSide/Git/GitSync/SwitchBranches_spec.js
cypress/e2e/Regression/ServerSide/GenerateCRUD/MySQL2_Spec.ts

To know the list of identified flaky tests - Refer here

github-actions · 2024-01-23T06:05:22Z

Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/7621432048.
Commit: ``.
Cypress dashboard: Click here!
The following are new failures, please fix them before merging the PR:

cypress/e2e/Regression/ClientSide/Git/GitSync/SwitchBranches_spec.js
cypress/e2e/Regression/ServerSide/GenerateCRUD/MySQL2_Spec.ts

To know the list of identified flaky tests - Refer here

github-actions · 2024-01-23T06:41:54Z

Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/7621432048.
Commit: ``.
Cypress dashboard: Click here!
The following are new failures, please fix them before merging the PR:

cypress/e2e/Regression/ServerSide/GenerateCRUD/MySQL2_Spec.ts

To know the list of identified flaky tests - Refer here

github-actions · 2024-01-23T06:56:28Z

Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/7621432048.
Commit: ``.
Cypress dashboard: Click here!
The following are new failures, please fix them before merging the PR:

cypress/e2e/Regression/ServerSide/GenerateCRUD/MySQL2_Spec.ts

To know the list of identified flaky tests - Refer here

…o feat/magnetic-distribution

marks0351 · 2024-01-23T08:36:55Z

/ok-to-test tags="tag.PropertyPane"

github-actions · 2024-01-23T08:37:20Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/7623059187.
Workflow: Appsmith External Integration Test Workflow.
Tags: tag.PropertyPane.

github-actions · 2024-01-23T09:07:44Z

Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/7623059187.
Commit: ``.
Cypress dashboard: Click here!
The following are new failures, please fix them before merging the PR:

cypress/e2e/Regression/ClientSide/Git/GitSync/SwitchBranches_spec.js
cypress/e2e/Regression/ServerSide/GenerateCRUD/MySQL2_Spec.ts

To know the list of identified flaky tests - Refer here

github-actions · 2024-01-23T09:26:48Z

Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/7623059187.
Commit: ``.
Cypress dashboard: Click here!
The following are new failures, please fix them before merging the PR:

cypress/e2e/Regression/ServerSide/GenerateCRUD/MySQL2_Spec.ts

To know the list of identified flaky tests - Refer here

marks0351 · 2024-01-23T10:02:13Z

/ok-to-test tags="@tag.PropertyPane"

github-actions · 2024-01-23T10:02:41Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/7624026397.
Workflow: Appsmith External Integration Test Workflow.
Tags: @tag.PropertyPane.

github-actions · 2024-01-23T10:29:09Z

Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/7624026397.
Commit: ``.
Cypress dashboard: Click here!
The following are new failures, please fix them before merging the PR:

cypress/e2e/Regression/ServerSide/OnLoadTests/JSOnLoad1_Spec.ts

To know the list of identified flaky tests - Refer here

github-actions · 2024-01-23T10:43:55Z

Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/7624026397.
Commit: ``.
Cypress dashboard: Click here!
The following are new failures, please fix them before merging the PR:

cypress/e2e/Regression/ServerSide/OnLoadTests/JSOnLoad1_Spec.ts

To know the list of identified flaky tests - Refer here

github-actions · 2024-01-23T11:07:34Z

Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/7624026397.
Commit: ``.
Cypress dashboard: Click here!
The following are new failures, please fix them before merging the PR:

cypress/e2e/Regression/ServerSide/OnLoadTests/JSOnLoad1_Spec.ts

To know the list of identified flaky tests - Refer here

…o feat/magnetic-distribution

marks0351 · 2024-01-23T15:13:40Z

/ok-to-test tags="@tag.PropertyPane"

github-actions · 2024-01-23T15:14:05Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/7627834384.
Workflow: Appsmith External Integration Test Workflow.
Tags: @tag.PropertyPane.

github-actions · 2024-01-23T15:59:24Z

Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/7627834384.
Commit: ``.
Cypress dashboard url: Click here!
All cypress tests have passed 🎉🎉🎉

marks0351 added 6 commits December 29, 2023 19:58

chore: add magnetic attraction at column stops.

401746f

Merge branch 'release' of https://github.com/appsmithorg/appsmith int…

6ba4c1c

…o feat/magnetic-distribution

chore: enabling anvil by default

0981679

Revert "chore: add magnetic attraction at column stops."

9e6bcb1

This reverts commit 401746f.

first cut version magnetic UX

a594d7e

This reverts commit 9e6bcb1.

chore: adjust magnet range

3ff1f6f

marks0351 added 3 commits January 17, 2024 11:18

chore: remove resizing layer

c851bb4

Merge branch 'release' of https://github.com/appsmithorg/appsmith int…

8eabacf

…o feat/magnetic-distribution

feat: sticky ux for space distribution.

caf22c1

fix: adjusting animation timings.

a8efa99

marks0351 added 2 commits January 18, 2024 18:23

feat: first cut implicit zone redistribution.

6c2489f

fix: fixing bugs in safari

dfbaa62

fix: add active hover for splitter and update zone label for solo zones.

28ec1c8

feat: adding sections properties to zones as well.

f670ec1

prsidhu reviewed Jan 22, 2024

View reviewed changes

marks0351 added 2 commits January 23, 2024 10:49

fix: set height of section mock instead of zone mock.

1d6df4a

Revert "chore: enabling anvil by default"

a2cff63

This reverts commit 0981679.

marks0351 dismissed albinAppsmith’s stale review via a2cff63 January 23, 2024 05:20

Merge branch 'release' of https://github.com/appsmithorg/appsmith int…

d09b9d8

…o feat/magnetic-distribution

Merge branch 'release' of https://github.com/appsmithorg/appsmith int…

be4b147

…o feat/magnetic-distribution

marks0351 requested a review from prsidhu January 23, 2024 18:32

prsidhu approved these changes Jan 24, 2024

View reviewed changes

marks0351 merged commit 6b2c79f into release Jan 24, 2024
15 checks passed

marks0351 deleted the feat/magnetic-distribution branch January 24, 2024 02:26

feat: Space redistribution UX upgrade and implicit space distribution #30242

feat: Space redistribution UX upgrade and implicit space distribution #30242

Conversation

marks0351 commented Jan 11, 2024 • edited by coderabbitai bot Loading

Description

PR fixes following issue(s)

Media

Type of change

Testing

How Has This Been Tested?

Test Plan

Issues raised during DP testing

Checklist:

Dev activity

QA activity:

Summary by CodeRabbit

marks0351 commented Jan 11, 2024

github-actions bot commented Jan 11, 2024

github-actions bot commented Jan 11, 2024

marks0351 commented Jan 17, 2024

marks0351 commented Jan 17, 2024

github-actions bot commented Jan 17, 2024

github-actions bot commented Jan 17, 2024

marks0351 commented Jan 17, 2024

github-actions bot commented Jan 17, 2024

github-actions bot commented Jan 17, 2024

marks0351 commented Jan 18, 2024

github-actions bot commented Jan 18, 2024

github-actions bot commented Jan 18, 2024

marks0351 commented Jan 18, 2024

github-actions bot commented Jan 18, 2024

github-actions bot commented Jan 18, 2024

albinAppsmith commented Jan 22, 2024

prsidhu Jan 22, 2024

Choose a reason for hiding this comment

marks0351 Jan 23, 2024

Choose a reason for hiding this comment

prsidhu left a comment

Choose a reason for hiding this comment

marks0351 commented Jan 23, 2024

github-actions bot commented Jan 23, 2024

github-actions bot commented Jan 23, 2024

github-actions bot commented Jan 23, 2024

github-actions bot commented Jan 23, 2024

github-actions bot commented Jan 23, 2024

marks0351 commented Jan 23, 2024

github-actions bot commented Jan 23, 2024

github-actions bot commented Jan 23, 2024

github-actions bot commented Jan 23, 2024

marks0351 commented Jan 23, 2024

github-actions bot commented Jan 23, 2024

github-actions bot commented Jan 23, 2024

github-actions bot commented Jan 23, 2024

github-actions bot commented Jan 23, 2024

marks0351 commented Jan 23, 2024

github-actions bot commented Jan 23, 2024

github-actions bot commented Jan 23, 2024

marks0351 commented Jan 11, 2024 •

edited by coderabbitai bot

Loading