feat: use zone elevatedBackground evaluated values and upgrade space distribution ux of borderless zones. #33527

marks0351 · 2024-05-16T13:39:52Z

Description

In this PR we are making sure the evaluated values of elevatedBackground(prop that indicates if a section or zone if elevated) is used instead of the unevaluated value used so far.

For this we will need to refer to siblings as well, so fetching the data tree state and iterating to find all siblings is going to be underperformant.
Hence, creating a context for the editor alone which will collect all sections and zones current evaluated elevated background.

This context will be accessed by useAnvilDnDListenerStates and useAnvilDnDCompensators to decide compensators for a zone and section.

We have also enhanced space distribution UX.

during explicit ditribution(distribution via the handler inbetween zones on the canvas) all on canvas ui borders are not displayed except for zones that have switched off visual separation and at the start of the action we select the section widget.
during implicit distribution(distribution via the handler in the property pane)
- of section, the ux on the canvas remains the same, once the action is done the section widget is still selected.
- of zone, the ux on the canvas remains the same, once the action is done the zone widget remains selected.

Fixes #33369
Fixes #33212

or
Fixes Issue URL

Warning

If no issue exists, please create an issue first, and check with the maintainers if the issue is valid.

Automation

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

🔍 Cypress test results

Tip

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

Communication

Should the DevRel and Marketing teams inform users about this change?

Yes
No

… fetching all evaluated values.

marks0351 · 2024-05-16T14:44:42Z

/build-deploy-preview skip-tests=true

github-actions · 2024-05-16T14:45:05Z

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

github-actions · 2024-05-16T14:57:45Z

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

coderabbitai · 2024-05-17T09:12:08Z

Warning

Rate Limit Exceeded

@marks0351 has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 6 minutes and 37 seconds before requesting another review.

How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.
Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.
Please see our FAQ for further information.

Commits

Files that changed from the base of the PR and between d951f3b and 40a6bca.

Walkthrough

The recent updates aim to enhance widget elevation and space distribution features in the Anvil layout system. These changes introduce the elevatedBackground parameter, a new context provider for managing widget elevation, and improvements to space distribution logic for better visual guidance during widget redistribution.

Changes

Files/Directories	Change Summary
`useWidgetBorderStyles.ts`, `useAnvilWidgetStyles.ts`	Added `elevatedBackground` parameter to functions for widget styling.
`AnvilEditorFlexComponent.tsx`, `AnvilEditorWidgetOnion.tsx`	Incorporated `elevatedBackground` prop for component styling.
`AnvilEditorCanvas.tsx`	Introduced `AnvilWidgetElevationProvider` for managing widget elevation context.
`useAnvilWidgetElevationSetter.ts`	New hook to set widget elevation based on provided parameters.
`AnvilWidgetElevationProvider.tsx`	New context provider for managing widget elevation state.
`useAnvilDnDListenerStates.ts`	Integrated `useAnvilWidgetElevation` to manage widget elevation during drag-and-drop.
`selectors.ts`	Added `getWidgetsDistributingSpace` selector and modified `getAnvilSpaceDistributionStatus`.
`actions.ts`, `useSpaceDistributionEvents.ts`	Introduced actions and logic for managing space distribution events.
`types.ts`	Added `elevatedBackground` property to `AnvilFlexComponentProps` interface.
`dragResizeReducer.ts`	Updated state structure and reducer functions to manage space distribution.
`Container.tsx`	Utilized `useAnvilWidgetElevationSetter` to manage widget elevation.

Assessment against linked issues

Objective	Addressed	Explanation
Fix misaligned drop indicators (#33369)	✅
Highlight backgroundless zones during redistribution (#33212)	✅

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai generate interesting stats about this repository and render them as a table.
- @coderabbitai show all the console.log statements in this repository.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

marks0351 · 2024-05-17T09:13:31Z

/build-deploy-preview skip-tests=true

github-actions · 2024-05-17T09:13:52Z

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

github-actions · 2024-05-17T09:26:23Z

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

KelvinOm · 2024-05-17T09:24:20Z

app/client/src/layoutSystems/anvil/common/hooks/useWidgetBorderStyles.ts

@@ -37,11 +44,13 @@ export function useWidgetBorderStyles(widgetId: string, widgetType: string) {
  if (isPreviewMode) {
    return {};
  }
-
+  const isBorderLessZoneOfDistributingSection =


I don't quite understand semantics of this variable, could you rename it or add comment?

shoot. It should have been isBackgroundLessZoneOfDistributingSection to show border for those zones belonging to the current section that is distributing space and also whose backgorund is switched off, let me break this to two constants to make it more readable.

KelvinOm · 2024-05-17T09:26:34Z

app/client/src/layoutSystems/anvil/editor/canvas/providers/AnvilWidgetElevationProvider.tsx

+  useContext,
+} from "react";
+
+interface WidgetElevationObj {


Suggested change

interface WidgetElevationObj {

interface WidgetElevation {

…o fix/zone-elevation

marks0351 · 2024-05-20T05:21:45Z

/build-deploy-preview skip-tests=true

github-actions · 2024-05-20T05:22:05Z

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

github-actions · 2024-05-20T05:34:57Z

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

…o fix/zone-elevation

marks0351 · 2024-05-21T09:00:14Z

/build-deploy-preview skip-tests=true

github-actions · 2024-05-21T09:00:38Z

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

github-actions · 2024-05-21T09:13:52Z

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

…o fix/zone-elevation

marks0351 · 2024-05-21T09:25:31Z

/build-deploy-preview skip-tests=true

github-actions · 2024-05-21T09:25:51Z

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

github-actions · 2024-05-21T09:39:06Z

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

marks0351 · 2024-05-21T09:46:57Z

/build-deploy-preview skip-tests=true

github-actions · 2024-05-21T09:47:21Z

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

github-actions · 2024-05-21T10:02:07Z

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

marks0351 added 3 commits May 16, 2024 12:45

fix: get evaluated values of elevateBackground via context instead of…

38ba664

… fetching all evaluated values.

feat: add ux to show zone border of background less zones.

df9d278

adding actions for stop and update.

71c0354

marks0351 added the skip-changelog Adding this label to a PR prevents it from being listed in the changelog label May 16, 2024

github-actions bot added the Bug Something isn't working label May 16, 2024

chore: adding code comments

8d36f30

marks0351 marked this pull request as ready for review May 17, 2024 09:11

marks0351 requested a review from a team as a code owner May 17, 2024 09:11

github-actions bot removed Bug Something isn't working skip-changelog Adding this label to a PR prevents it from being listed in the changelog labels May 17, 2024

marks0351 requested a review from ramsaptami May 17, 2024 09:13

marks0351 requested a review from KelvinOm May 17, 2024 09:14

marks0351 added the ok-to-test Required label for CI label May 17, 2024

github-actions bot added the Bug Something isn't working label May 17, 2024

KelvinOm previously approved these changes May 17, 2024

View reviewed changes

marks0351 added 2 commits May 17, 2024 15:33

chore: adding code comments

1ea9289

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

d8764a5

…o fix/zone-elevation

marks0351 dismissed KelvinOm’s stale review via d8764a5 May 17, 2024 10:03

marks0351 added ok-to-test Required label for CI and removed ok-to-test Required label for CI labels May 17, 2024

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

6c8b9b5

…o fix/zone-elevation

marks0351 added ok-to-test Required label for CI and removed ok-to-test Required label for CI labels May 20, 2024

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

cdf4674

…o fix/zone-elevation

marks0351 added ok-to-test Required label for CI and removed ok-to-test Required label for CI labels May 21, 2024

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

d951f3b

…o fix/zone-elevation

fix: height css for empty modal wrapper.

40a6bca

marks0351 added ok-to-test Required label for CI and removed ok-to-test Required label for CI labels May 21, 2024

jsartisan approved these changes May 21, 2024

View reviewed changes

marks0351 merged commit 0767a37 into release May 21, 2024
42 checks passed

marks0351 deleted the fix/zone-elevation branch May 21, 2024 10:09

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: use zone elevatedBackground evaluated values and upgrade space distribution ux of borderless zones. #33527

feat: use zone elevatedBackground evaluated values and upgrade space distribution ux of borderless zones. #33527

marks0351 commented May 16, 2024 •

edited by github-actions bot

marks0351 commented May 16, 2024

github-actions bot commented May 16, 2024

github-actions bot commented May 16, 2024

coderabbitai bot commented May 17, 2024 •

edited

Rate Limit Exceeded

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (`.coderabbit.yaml`)

Documentation and Community

marks0351 commented May 17, 2024

github-actions bot commented May 17, 2024

github-actions bot commented May 17, 2024

KelvinOm May 17, 2024

marks0351 May 17, 2024

KelvinOm May 17, 2024

marks0351 commented May 20, 2024

github-actions bot commented May 20, 2024

github-actions bot commented May 20, 2024

marks0351 commented May 21, 2024

github-actions bot commented May 21, 2024

github-actions bot commented May 21, 2024

marks0351 commented May 21, 2024

github-actions bot commented May 21, 2024

github-actions bot commented May 21, 2024

marks0351 commented May 21, 2024

github-actions bot commented May 21, 2024

github-actions bot commented May 21, 2024

feat: use zone elevatedBackground evaluated values and upgrade space distribution ux of borderless zones. #33527

feat: use zone elevatedBackground evaluated values and upgrade space distribution ux of borderless zones. #33527

Conversation

marks0351 commented May 16, 2024 • edited by github-actions bot

Description

Automation

🔍 Cypress test results

Communication

marks0351 commented May 16, 2024

github-actions bot commented May 16, 2024

github-actions bot commented May 16, 2024

coderabbitai bot commented May 17, 2024 • edited

Rate Limit Exceeded

Walkthrough

Changes

Assessment against linked issues

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (.coderabbit.yaml)

Documentation and Community

marks0351 commented May 17, 2024

github-actions bot commented May 17, 2024

github-actions bot commented May 17, 2024

KelvinOm May 17, 2024

Choose a reason for hiding this comment

marks0351 May 17, 2024

Choose a reason for hiding this comment

KelvinOm May 17, 2024

Choose a reason for hiding this comment

marks0351 commented May 20, 2024

github-actions bot commented May 20, 2024

github-actions bot commented May 20, 2024

marks0351 commented May 21, 2024

github-actions bot commented May 21, 2024

github-actions bot commented May 21, 2024

marks0351 commented May 21, 2024

github-actions bot commented May 21, 2024

github-actions bot commented May 21, 2024

marks0351 commented May 21, 2024

github-actions bot commented May 21, 2024

github-actions bot commented May 21, 2024

marks0351 commented May 16, 2024 •

edited by github-actions bot

coderabbitai bot commented May 17, 2024 •

edited

CodeRabbit Configration File (`.coderabbit.yaml`)