Skip to content

Conversation

riodeuno
Copy link
Contributor

@riodeuno riodeuno commented Jul 22, 2024

Description

  • Multiple functions from widgetAdditionSaga have been removed from the flow when adding new Anvil widgets to Canvas
  • The removed functions have alternatives specific to Anvil

##Tasks

  • Move functions and cut down code run during Anvil widget addition flow
  • Cleanup code

Fixes #34896

Automation

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

🔍 Cypress test results

Tip

🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/10099580771
Commit: 50d9f03
Cypress dashboard.
Tags: @tag.All
Spec:


Thu, 25 Jul 2024 19:31:29 UTC

Communication

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

  • Yes
  • No

Summary by CodeRabbit

  • New Features

    • Introduced a new property to manage default widget properties for improved widget addition efficiency.
    • Enhanced the application’s capability to manage and display layout information dynamically for the main canvas.
    • Added new saga functions to facilitate the addition of widgets to the Anvil canvas, improving user interaction with suggested widgets.
  • Bug Fixes

    • Streamlined widget addition logic for better performance and maintainability in the Anvil canvas.
  • Refactor

    • Simplified and reorganized the saga functions related to widget addition, improving clarity and efficiency.
    • Replaced legacy functions with updated methods for handling widget properties and state management.
  • Documentation

    • Improved comments and descriptions in the code to clarify the new logic and functionality changes.

Copy link
Contributor

coderabbitai bot commented Jul 22, 2024

Walkthrough

The recent changes enhance the efficiency and clarity of the Anvil DSL by decoupling its widget addition flow from Fixed and Auto Layout systems. A new static property effectively manages default widget properties, while various utility functions have been refactored for better maintainability and performance. These updates streamline widget integration within the application, leading to improved organization and user experience.

Changes

Files Change Summary
app/client/src/WidgetProvider/factory/index.tsx Added widgetDefaultPropertiesMap to manage default widget properties more effectively.
app/client/src/layoutSystems/anvil/integrations/sagas/anvilDraggingSagas/*.test.ts Refactored imports for widget addition saga tests, indicating a reorganization of testing logic.
app/client/src/layoutSystems/anvil/integrations/sagas/anvilDraggingSagas/index.ts Removed several widget management functions; simplified addWidgetsSaga for better clarity.
app/client/src/layoutSystems/anvil/integrations/sagas/anvilWidgetAdditionSagas/*.ts Introduced new helper functions for widget addition, enhancing management capabilities.
app/client/src/widgets/*.ts Modified configuration logic for several widgets, streamlining settings and improving clarity.

Assessment against linked issues

Objective Addressed Explanation
Cleanup Anvil DSL by removing Fixed and Auto Layout references (#[34896])
Decouple widget addition flow from Fixed and Auto Layout (#[34896])
Streamline widget addition process and reduce complexity (#[34896])

Poem

In the land of widgets bright,
New flows dance with pure delight.
Properties managed, clutter shed,
Efficient paths, where once we tread.
Anvil sings, the code now flows,
In cleaner lines, innovation grows! ✨


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.
    • @coderabbitai help me debug CodeRabbit configuration file.

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 an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

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

CodeRabbit Configuration 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.

@riodeuno riodeuno changed the title WIP: Cleanup Anvil DSL chore: Remove unnecessary properties from being stored in Anvil DSLs Jul 23, 2024
@riodeuno riodeuno self-assigned this Jul 23, 2024
@github-actions github-actions bot added Anvil Pod Issue related to Anvil project Anvil team issues related to the new layout system anvil Task A simple Todo skip-changelog Adding this label to a PR prevents it from being listed in the changelog labels Jul 23, 2024
@riodeuno riodeuno marked this pull request as ready for review July 24, 2024 18:14
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

Outside diff range, codebase verification and nitpick comments (1)
app/client/src/layoutSystems/anvil/integrations/sagas/anvilWidgetAdditionSagas/helpers.ts (1)

29-29: Fix typo in comment.

There is a typo in the comment: "hydation" should be "hydration".

-  // For WDS_INLINE_BUTTONS_WIDGET, we want to hydation only to work when we add more items to the inline button group.
+  // For WDS_INLINE_BUTTONS_WIDGET, we want hydration only to work when we add more items to the inline button group.
Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

Commits

Files that changed from the base of the PR and between ae97421 and 5f4d092.

Files selected for processing (17)
  • app/client/src/WidgetProvider/factory/index.tsx (2 hunks)
  • app/client/src/layoutSystems/anvil/integrations/sagas/anvilDraggingSagas/anvilDraggingSagas.test.ts (2 hunks)
  • app/client/src/layoutSystems/anvil/integrations/sagas/anvilDraggingSagas/helpers.ts (1 hunks)
  • app/client/src/layoutSystems/anvil/integrations/sagas/anvilDraggingSagas/index.ts (3 hunks)
  • app/client/src/layoutSystems/anvil/integrations/sagas/anvilWidgetAdditionSagas/helpers.ts (1 hunks)
  • app/client/src/layoutSystems/anvil/integrations/sagas/anvilWidgetAdditionSagas/index.ts (1 hunks)
  • app/client/src/layoutSystems/anvil/integrations/sagas/index.ts (2 hunks)
  • app/client/src/layoutSystems/anvil/utils/layouts/update/mainCanvasLayoutUtils.ts (2 hunks)
  • app/client/src/layoutSystems/anvil/utils/layouts/update/sectionUtils.ts (3 hunks)
  • app/client/src/layoutSystems/anvil/utils/layouts/update/zoneUtils.ts (4 hunks)
  • app/client/src/layoutSystems/anvil/utils/sectionOperationUtils.ts (2 hunks)
  • app/client/src/layoutSystems/anvil/utils/widgetAdditionUtils.ts (2 hunks)
  • app/client/src/sagas/WidgetAdditionSagas.ts (5 hunks)
  • app/client/src/widgets/anvil/ZoneWidget/widget/config/defaultConfig.ts (1 hunks)
  • app/client/src/widgets/wds/WDSInputWidget/config/defaultsConfig.ts (1 hunks)
  • app/client/src/widgets/wds/WDSModalWidget/config/defaultsConfig.ts (1 hunks)
  • app/client/src/widgets/wds/WDSTableWidget/config/defaultsConfig.ts (1 hunks)
Files skipped from review due to trivial changes (1)
  • app/client/src/widgets/wds/WDSModalWidget/config/defaultsConfig.ts
Additional context used
Biome
app/client/src/layoutSystems/anvil/integrations/sagas/anvilWidgetAdditionSagas/index.ts

[error] 140-140: Avoid redundant double-negation.

It is not necessary to use double-negation when a value will already be coerced to a boolean.
Unsafe fix: Remove redundant double-negation

(lint/complexity/noExtraBooleanCast)

app/client/src/layoutSystems/anvil/integrations/sagas/anvilWidgetAdditionSagas/helpers.ts

[error] 105-105: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

Additional comments not posted (45)
app/client/src/widgets/wds/WDSInputWidget/config/defaultsConfig.ts (1)

9-9: Verify the implications of changing the version from 2 to 1.

Changing the version property from 2 to 1 might have broader implications on how the widget behaves or is rendered. Ensure that this change is backward compatible and does not introduce any regressions.

app/client/src/layoutSystems/anvil/integrations/sagas/index.ts (2)

17-17: LGTM! Ensure the new saga does not introduce side effects.

The code changes are approved.

However, ensure that the new saga does not introduce any unintended side effects or conflicts with existing sagas.


8-8: Ensure proper implementation and integration of anvilWidgetAdditionSagas.

The addition of anvilWidgetAdditionSagas modifies the control flow and allows it to run concurrently with existing sagas. Verify that this new saga is correctly implemented and integrated.

Verification successful

Let's correct the previous command and gather the necessary information to verify the implementation and integration of anvilWidgetAdditionSagas.


The implementation and integration of anvilWidgetAdditionSagas are correct.

The anvilWidgetAdditionSagas is properly defined and integrated into the saga system. It is imported and forked within the anvilSagas function, ensuring it runs concurrently with other sagas.

  • File: app/client/src/layoutSystems/anvil/integrations/sagas/index.ts
    • Line: 8
    • Details: The anvilWidgetAdditionSagas is imported and forked within the anvilSagas generator function.
  • File: app/client/src/layoutSystems/anvil/integrations/sagas/anvilWidgetAdditionSagas/index.ts
    • Details: The anvilWidgetAdditionSagas function is defined to handle specific action types using takeLatest.
Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the implementation and integration of `anvilWidgetAdditionSagas`.

# Test: Search for the implementation details of `anvilWidgetAdditionSagas`. Expect: Proper implementation and integration.
rg --type javascript -A 10 $'anvilWidgetAdditionSagas'

Length of output: 88


Script:

#!/bin/bash
# Description: Verify the implementation and integration of `anvilWidgetAdditionSagas`.

# Search for the implementation details of `anvilWidgetAdditionSagas`.
rg 'anvilWidgetAdditionSagas' -A 10

# Search for the import statements of `anvilWidgetAdditionSagas` to understand its integration.
rg 'import anvilWidgetAdditionSagas' -A 5

Length of output: 9138

app/client/src/layoutSystems/anvil/integrations/sagas/anvilDraggingSagas/helpers.ts (1)

1-32: Verify the performance and correctness of getMainCanvasLastRowHighlight.

The function getMainCanvasLastRowHighlight retrieves highlighting information for the last row in the main canvas layout. Ensure that the function performs efficiently and returns correct data.

app/client/src/widgets/wds/WDSTableWidget/config/defaultsConfig.ts (1)

39-39: Ensure compatibility with version change.

The version field in the defaultsConfig object has been changed from 2 to 1. This might affect how the application interprets the configuration settings. Ensure that this change does not introduce any incompatibilities or regressions.

app/client/src/widgets/anvil/ZoneWidget/widget/config/defaultConfig.ts (2)

46-60: Good job on handling modal widget hierarchy!

The new logic block correctly processes the widget hierarchy to determine if a widget is contained within a modal. This ensures that modal widgets do not display an elevated background by default, improving visual consistency.


33-34: Clarify the purpose of the parent parameter.

The comment questions the necessity of the parent parameter. Ensure that this parameter is indeed required or remove it if it is redundant.

Verification successful

Let's correct the file type and search for the usage of the parent parameter in TypeScript files to determine its necessity.


The parent parameter is necessary.

The parent parameter is used extensively across multiple files in the codebase, indicating its importance in the widget system. Removing it could lead to unintended consequences.

  • app/client/src/widgets/FormWidget/widget/index.tsx
  • app/client/src/widgets/wds/WDSModalWidget/config/defaultsConfig.ts
  • app/client/src/widgets/anvil/SectionWidget/widget/config/defaultConfig.ts
  • app/client/src/widgets/anvil/ZoneWidget/widget/config/defaultConfig.ts
  • app/client/src/widgets/StatboxWidget/widget/index.tsx
  • app/client/src/widgets/ListWidgetV2/widget/defaultProps.ts
  • app/client/src/widgets/ContainerWidget/widget/index.tsx
  • app/client/src/utils/WidgetPropsUtils.tsx
  • app/client/src/sagas/WidgetAdditionSagas.ts
  • app/client/src/sagas/WidgetBlueprintSagas.ts
  • app/client/src/sagas/CanvasSagas/DraggingCanvasSagas.ts
  • app/client/src/layoutSystems/autolayout/utils/heightUpdateUtils.ts
  • app/client/src/layoutSystems/anvil/utils/paste/mainCanvasPasteUtils.ts
  • app/client/src/layoutSystems/anvil/utils/paste/zonePasteUtils.ts
  • app/client/src/layoutSystems/anvil/utils/paste/sectionPasteUtils.ts
  • app/client/src/layoutSystems/anvil/utils/anvilChecksUtils.ts
  • app/client/src/layoutSystems/anvil/utils/paste/destinationUtils/index.ts
  • app/client/src/layoutSystems/anvil/utils/paste/utils.ts
  • app/client/src/layoutSystems/anvil/integrations/sagas/pasteSagas/index.ts
  • app/client/src/layoutSystems/anvil/integrations/sagas/anvilWidgetAdditionSagas/helpers.ts
  • app/client/src/WidgetProvider/factory/index.tsx
Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the usage of the `parent` parameter in the codebase to ensure it is necessary.

# Test: Search for the usage of the `parent` parameter. Expect: Relevant usage or redundancy.
rg --type python -A 5 $'parent: FlattenedWidgetProps'

Length of output: 85


Script:

#!/bin/bash
# Description: Verify the usage of the `parent` parameter in the codebase to ensure it is necessary.

# Test: Search for the usage of the `parent` parameter in TypeScript files.
rg --type ts -A 5 'parent: FlattenedWidgetProps'

Length of output: 14937

app/client/src/layoutSystems/anvil/utils/widgetAdditionUtils.ts (1)

1-1: Ensure the logic for creating widget payloads is refactored or relocated.

The getCreateWidgetPayload function has been removed. Ensure that the logic for creating widget payloads has been refactored or relocated appropriately to avoid any issues with widget instantiation.

app/client/src/layoutSystems/anvil/integrations/sagas/anvilDraggingSagas/index.ts (5)

Line range hint 1-17:
Good job on removing unused imports!

This helps in keeping the code clean and maintainable.


Line range hint 26-45:
Well-structured function with proper error handling!

The moveWidgetsSaga function is correctly implemented and handles errors appropriately.


Line range hint 47-68:
Good use of utility functions!

The handleWidgetMovement function is correctly implemented and uses appropriate utility functions.


Line range hint 70-98:
Great job on handling redundant zones!

The handleDeleteRedundantZones function is correctly implemented and uses appropriate utility functions.


Line range hint 100-104:
Nice simplification of the default export function!

This helps in keeping the code clean and maintainable.

app/client/src/layoutSystems/anvil/utils/layouts/update/mainCanvasLayoutUtils.ts (4)

Line range hint 1-16:
Necessary import added!

The import statement for addNewAnvilWidgetToDSL is necessary for the updated functionality.


29-37: Simplified function and improved performance!

The changes to addDetachedWidgetToMainCanvas simplify the function and improve performance by removing an intermediate function call.


Line range hint 39-92:
Well-structured function with appropriate utility functions!

The addWidgetsToMainCanvasLayout function is correctly implemented and uses appropriate utility functions.


Line range hint 153-170:
Good job on moving widgets to the main canvas!

The moveWidgetsToMainCanvas function is correctly implemented and uses appropriate utility functions.

app/client/src/layoutSystems/anvil/utils/sectionOperationUtils.ts (2)

Line range hint 1-17:
Necessary import added!

The import statement for getUpdatedListOfWidgetsAfterAddingNewWidget is necessary for the updated functionality.


Line range hint 161-176:
Improved widget management!

The changes to addNewZonesToSection indicate a shift in how new widgets are integrated into the existing widget structure, potentially improving the overall responsiveness or correctness of widget management within the application.

app/client/src/layoutSystems/anvil/utils/layouts/update/zoneUtils.ts (5)

Line range hint 26-44:
Good use of the new function addNewAnvilWidgetToDSL.

The changes improve readability and maintainability by using an object format for parameters.

However, ensure that the new function is correctly integrated and tested.

Verification successful

Good integration of the function addNewAnvilWidgetToDSL.

The function is consistently used across multiple modules, improving readability and maintainability. Ensure the function implementation in helpers.ts is correct.

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the integration of `addNewAnvilWidgetToDSL`.

# Test: Search for the function definition and its usage. Expect: Correct integration and usage.
rg --type ts -A 5 $'addNewAnvilWidgetToDSL'

Length of output: 7550


179-183: Good use of the new function addNewAnvilWidgetToDSL.

The changes improve readability and maintainability by using an object format for parameters.

However, ensure that the new function is correctly integrated and tested.

Verification successful

The integration of addNewAnvilWidgetToDSL appears to be consistent and correct across the codebase.

The function is imported and utilized in multiple files, maintaining a standardized approach. This enhances readability and maintainability.

  • Files with usage:
    • sectionUtils.ts
    • mainCanvasLayoutUtils.ts
    • index.ts
    • zoneUtils.ts

Ensure thorough testing to validate the functionality.

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the integration of `addNewAnvilWidgetToDSL`.

# Test: Search for the function definition and its usage. Expect: Correct integration and usage.
rg --type ts -A 5 $'addNewAnvilWidgetToDSL'

Length of output: 7550


Line range hint 64-65:
Verify the integration of updateDraggedWidgets.

Ensure that the changes in updateDraggedWidgets are correctly reflected in addWidgetsToZone.

Verification successful

Let's verify the integration of updateDraggedWidgets within zoneUtils.ts to ensure that the changes are correctly reflected.


Verify the integration of updateDraggedWidgets.

The integration of the updateDraggedWidgets function within zoneUtils.ts appears to be correct. The function is used to update the updatedWidgets variable, which is then used to update zoneProps.children. This indicates that the changes in updateDraggedWidgets are correctly reflected in its usage.

  • File: app/client/src/layoutSystems/anvil/utils/layouts/update/zoneUtils.ts
  • Lines: 10-15

Review Outcome: No issues found with the integration.

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the integration of `updateDraggedWidgets`.

# Test: Search for the function definition and its usage. Expect: Correct integration and usage.
rg --type ts -A 5 $'updateDraggedWidgets'

Length of output: 1248


Script:

#!/bin/bash
# Description: Extract full context of the `updateDraggedWidgets` call within `zoneUtils.ts`.

# Test: Display lines around the call to `updateDraggedWidgets` for detailed review.
rg --type ts -A 10 -B 10 'updateDraggedWidgets' app/client/src/layoutSystems/anvil/utils/layouts/update/zoneUtils.ts

Length of output: 1461


Line range hint 232-233:
Verify the integration of moveWidgetsToNewLayout.

Ensure that the changes in moveWidgetsToNewLayout are correctly reflected in moveWidgetsToZone.

Verification successful

Ensure the integration of moveWidgetsToNewLayout within moveWidgetsToZone

The integration appears to be correctly implemented. The function moveWidgetsToZone calls moveWidgetsToNewLayout when a large widget is present, ensuring the logic flows as intended.

  • File: app/client/src/layoutSystems/anvil/utils/layouts/update/zoneUtils.ts
    • Function Definition:
      export function* moveWidgetsToZone(
        allWidgets: CanvasWidgetsReduxState,
        movedWidgets: string[],
        highlight: AnvilHighlightInfo,
      ) {
        const widgets: CanvasWidgetsReduxState = { ...allWidgets };
        const draggedWidgets: WidgetLayoutProps[] = transformMovedWidgets(
          widgets,
          movedWidgets,
          highlight,
        );
        const isLargeWidgetPresent = draggedWidgets.some((each) =>
          isLargeWidget(each.widgetType),
        );
        if (isLargeWidgetPresent) {
          const canvasWidgets: CanvasWidgetsReduxState = yield call(
            moveWidgetsToNewLayout,
            widgets,
            movedWidgets,
            highlight,
          );
          return canvasWidgets;
        } else {
          const updatedWidgets = moveWidgets(allWidgets, movedWidgets, highlight);
          return updatedWidgets;
        }
      }

This confirms that moveWidgetsToZone correctly integrates the updated moveWidgetsToNewLayout.

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the integration of `moveWidgetsToNewLayout`.

# Test: Search for the function definition and its usage. Expect: Correct integration and usage.
rg --type ts -A 5 $'moveWidgetsToNewLayout'

Length of output: 1184


Script:

#!/bin/bash
# Description: Verify the integration of `moveWidgetsToNewLayout` in `moveWidgetsToZone`.

# Locate the definition of `moveWidgetsToZone` and its usage.
rg --type ts -A 10 $'function moveWidgetsToZone'

# Locate calls to `moveWidgetsToNewLayout` within `moveWidgetsToZone`.
rg --type ts -A 5 $'moveWidgetsToZone' | rg --type ts -A 5 $'moveWidgetsToNewLayout'

Length of output: 130


Script:

#!/bin/bash
# Description: Verify the integration of `moveWidgetsToNewLayout` in `moveWidgetsToZone`.

# Locate the definition of `moveWidgetsToZone`.
rg --type ts -A 10 'function moveWidgetsToZone'

# Locate calls to `moveWidgetsToNewLayout` within `moveWidgetsToZone`.
rg --type ts -A 10 'moveWidgetsToZone' | rg --type ts -A 10 'moveWidgetsToNewLayout'

Length of output: 132


Script:

#!/bin/bash
# Description: Verify the integration of `moveWidgetsToNewLayout` in `moveWidgetsToZone`.

# Locate the occurrences of `moveWidgetsToZone` and `moveWidgetsToNewLayout` with broader context.
rg --type ts -A 20 'moveWidgetsToZone'
rg --type ts -A 20 'moveWidgetsToNewLayout'

Length of output: 10841


Line range hint 194-195:
Verify the integration of addWidgetsToZone.

Ensure that the changes in addWidgetsToZone are correctly reflected in moveWidgetsToNewLayout.

app/client/src/layoutSystems/anvil/utils/layouts/update/sectionUtils.ts (4)

Line range hint 17-35:
Good use of the new function addNewAnvilWidgetToDSL.

The changes improve readability and maintainability by using an object format for parameters.

However, ensure that the new function is correctly integrated and tested.

Verification successful

Good use of the new function addNewAnvilWidgetToDSL.

The changes improve readability and maintainability by using an object format for parameters. The function appears to be correctly integrated across various parts of the codebase.

  • sectionUtils.ts: Correctly uses addNewAnvilWidgetToDSL.
  • zoneUtils.ts: Correctly uses addNewAnvilWidgetToDSL.
  • mainCanvasLayoutUtils.ts: Correctly uses addNewAnvilWidgetToDSL.
  • helpers.ts: Contains the function definition.

The integration seems to be thorough and consistent.

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the integration of `addNewAnvilWidgetToDSL`.

# Test: Search for the function definition and its usage. Expect: Correct integration and usage.
rg --type ts -A 5 $'addNewAnvilWidgetToDSL'

Length of output: 7550


Line range hint 263-264:
Verify the integration of addWidgetsToSection.

Ensure that the changes in addWidgetsToSection are correctly reflected in moveWidgetsToSection.

Verification successful

Let's verify the integration of the addWidgetsToSection function within the moveWidgetsToSection function. We need to ensure that the changes in addWidgetsToSection are correctly reflected in its usage.


Let's broaden our search to ensure we capture the definition and usage of moveWidgetsToSection accurately.


Verify the integration of addWidgetsToSection within moveWidgetsToSection.

The moveWidgetsToSection function correctly integrates the addWidgetsToSection function. The changes in addWidgetsToSection are reflected in its usage within moveWidgetsToSection, ensuring proper functionality.

  • Location of moveWidgetsToSection definition:

    • app/client/src/layoutSystems/anvil/utils/layouts/update/sectionUtils.ts
  • Location of moveWidgetsToSection usage:

    • app/client/src/layoutSystems/anvil/integrations/sagas/anvilDraggingSagas/index.ts
Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the integration of `addWidgetsToSection`.

# Test: Search for the function definition and its usage. Expect: Correct integration and usage.
rg --type ts -A 5 $'addWidgetsToSection'

Length of output: 3338


Script:

#!/bin/bash
# Description: Verify the integration of `addWidgetsToSection` within `moveWidgetsToSection`.

# Search for the definition and usage of `moveWidgetsToSection`.
rg --type ts -A 10 $'function moveWidgetsToSection'

Length of output: 52


Script:

#!/bin/bash
# Description: Verify the integration of `addWidgetsToSection` within `moveWidgetsToSection`.

# Search for the definition and usage of `moveWidgetsToSection`.
rg --type ts -A 20 'moveWidgetsToSection'

Length of output: 6621


Line range hint 145-146:
Verify the integration of addZoneToSection.

Ensure that the changes in addZoneToSection are correctly reflected in addWidgetsToSection.


96-100: Good use of the new function addNewAnvilWidgetToDSL.

The changes improve readability and maintainability by using an object format for parameters.

However, ensure that the new function is correctly integrated and tested.

app/client/src/layoutSystems/anvil/integrations/sagas/anvilDraggingSagas/anvilDraggingSagas.test.ts (1)

2-2: Verify the new import of addWidgetsSaga.

Ensure that the new import is correctly integrated and tested.

Also applies to: 36-36

Verification successful

The new import of addWidgetsSaga is correctly integrated and tested.

  • The addWidgetsSaga function is imported from ../anvilWidgetAdditionSagas.
  • It is used appropriately within the test file anvilDraggingSagas.test.ts.
  • The function is defined and utilized correctly within anvilWidgetAdditionSagas/index.ts.
Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the new import of `addWidgetsSaga`.

# Test: Search for the function definition and its usage. Expect: Correct integration and usage.
rg --type ts -A 5 $'addWidgetsSaga'

Length of output: 3965

app/client/src/layoutSystems/anvil/integrations/sagas/anvilWidgetAdditionSagas/index.ts (3)

163-208: LGTM!

The addWidgetsSaga function is well-structured and includes necessary error handling.


210-251: LGTM!

The addWidgetToGenericLayout function is well-structured and includes necessary operations.


253-261: LGTM!

The anvilWidgetAdditionSagas function is well-structured and correctly sets up the sagas.

app/client/src/layoutSystems/anvil/integrations/sagas/anvilWidgetAdditionSagas/helpers.ts (5)

69-83: LGTM!

The getUniqueWidgetName function is well-structured and includes necessary logic to ensure uniqueness.


93-114: LGTM!

The runBlueprintOperationsOnWidgets function is well-structured and includes necessary logic to handle blueprint operations.

Tools
Biome

[error] 105-105: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)


125-139: LGTM!

The addChildReferenceToParent function is well-structured and includes necessary logic to update the parent's children list.


149-201: LGTM!

The updateWidgetListWithNewWidget function is well-structured and includes necessary logic to handle widget addition.


212-248: LGTM!

The addNewAnvilWidgetToDSL function is well-structured and includes necessary logic to handle widget addition.

app/client/src/sagas/WidgetAdditionSagas.ts (5)

Line range hint 1-1:
Verify the impact of the removal of getWidgetSessionValues.

The removal of getWidgetSessionValues may impact the functionality of getChildWidgetProps. Ensure that the necessary properties are still being hydrated correctly.


Line range hint 1-1:
LGTM!

The generateChildWidgets function is well-structured and includes necessary logic to handle child widget generation.


Line range hint 1-1:
LGTM!

The getUpdateDslAfterCreatingChild function is well-structured and includes necessary logic to handle DSL updates.


Line range hint 1-1:
LGTM!

The addChildSaga function is well-structured and includes necessary error handling.


Line range hint 1-1:
LGTM!

The addNewTabChildSaga function is well-structured and includes necessary logic to handle tab child addition.

app/client/src/WidgetProvider/factory/index.tsx (3)

58-60: Good addition: widgetDefaultPropertiesMap

The introduction of widgetDefaultPropertiesMap is a smart move to manage default widget properties efficiently. By storing default properties for each widget type, it helps in reducing the number of properties passed during widget creation, thereby optimizing the DSL and preventing unnecessary clutter.


138-145: Clear and helpful comments

The comments explaining the purpose of widgetDefaultPropertiesMap are clear and provide valuable context. They effectively communicate the rationale behind using the map to optimize the widget addition process and reduce unnecessary properties in the DSL.


146-149: Good use of immutability with Object.freeze

The use of Object.freeze to set default properties in widgetDefaultPropertiesMap is commendable. It ensures that the default properties remain immutable, preventing any unintended modifications and maintaining the integrity of the widget configurations.

@riodeuno riodeuno added the ok-to-test Required label for CI label Jul 24, 2024
@riodeuno
Copy link
Contributor Author

@KelvinOm @znamenskii-ilia I'm adding some unit tests to this PR. It should be ready sometime today. I've requested for review a little earlier to provide enough time to review the main code.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 5f4d092 and c690e28.

Files selected for processing (1)
  • app/client/src/layoutSystems/anvil/integrations/sagas/anvilWidgetAdditionSagas/index.ts (1 hunks)
Files skipped from review as they are similar to previous changes (1)
  • app/client/src/layoutSystems/anvil/integrations/sagas/anvilWidgetAdditionSagas/index.ts

@riodeuno
Copy link
Contributor Author

/build-deploy-preview skip-tests=true

Copy link

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

Copy link

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

Copy link
Collaborator

@KelvinOm KelvinOm left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Our DSL has become much smaller and cleaner 👍

I left a few comments. I also analysed the new DSL structure and found few attributes that should not be there. Can we fix this now?

MainContainer

  • rightColumn
  • topRow
  • bottomRow
  • snapRows
  • minHeight
  • leftColumn
  • parentColumnSpace

Section

  • boxShadow
  • rows
  • columns
  • detachFromLayout
  • layoutStyle

Zone

  • flexGrow » should be renamed to spaceDistributed
  • detachFromLayout
  • layoutStyle
  • columns
  • rows
  • flexVerticalAlignment

For all Input like widgets

  • showStepArrows
  • labelPosition

For all widgets

  • responsiveBehavior
  • layoutStyle

@riodeuno
Copy link
Contributor Author

@KelvinOm Thanks for reviewing the list of properties.

MainContainer

I can't remove these properties in this PR. This needs a backend change where the backend now needs to be aware of which layout system we're serving and use a different template. Today, when creating a page the backend uses an existing template which was defined for Fixed mode.

Section and Zones

I've removed most of what you've suggested. I have no idea where flexGrow is coming from, doesn't seem to be coming from the widget addition flow. I'll look into this later.

All other widgets

These properties are coming from the default configuration of the widgets, we'll have to create a new PR after auditing and removing these properties from the widget configurations.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

Commits

Files that changed from the base of the PR and between c690e28 and 50d9f03.

Files selected for processing (7)
  • app/client/src/layoutSystems/anvil/integrations/sagas/anvilDraggingSagas/helpers.ts (1 hunks)
  • app/client/src/layoutSystems/anvil/integrations/sagas/anvilWidgetAdditionSagas/helpers.test.ts (1 hunks)
  • app/client/src/layoutSystems/anvil/integrations/sagas/anvilWidgetAdditionSagas/helpers.ts (1 hunks)
  • app/client/src/layoutSystems/anvil/layoutComponents/presets/sectionPreset.tsx (1 hunks)
  • app/client/src/layoutSystems/anvil/layoutComponents/presets/zonePreset.tsx (1 hunks)
  • app/client/src/widgets/anvil/SectionWidget/widget/config/defaultConfig.ts (1 hunks)
  • app/client/src/widgets/anvil/ZoneWidget/widget/config/defaultConfig.ts (3 hunks)
Files skipped from review due to trivial changes (2)
  • app/client/src/layoutSystems/anvil/layoutComponents/presets/sectionPreset.tsx
  • app/client/src/layoutSystems/anvil/layoutComponents/presets/zonePreset.tsx
Files skipped from review as they are similar to previous changes (3)
  • app/client/src/layoutSystems/anvil/integrations/sagas/anvilDraggingSagas/helpers.ts
  • app/client/src/layoutSystems/anvil/integrations/sagas/anvilWidgetAdditionSagas/helpers.ts
  • app/client/src/widgets/anvil/ZoneWidget/widget/config/defaultConfig.ts
Additional comments not posted (5)
app/client/src/widgets/anvil/SectionWidget/widget/config/defaultConfig.ts (1)

14-14: Verify the impact of property removals.

The properties boxShadow and detachFromLayout have been removed from the defaultConfig. Ensure that these properties are not required elsewhere in the codebase and that their removal does not affect the widget's functionality.

app/client/src/layoutSystems/anvil/integrations/sagas/anvilWidgetAdditionSagas/helpers.test.ts (4)

16-35: Test case for addChildReferenceToParent looks good!

The test case correctly verifies that a new child reference is added to the parent widget.


57-74: Test case for getUniqueWidgetName looks good!

The test case correctly verifies that a unique widget name is generated within the data tree.


77-116: Test case for runBlueprintOperationsOnWidgets looks good!

The test case correctly verifies that blueprint operations are executed on widgets as expected.


119-195: Test case for updateWidgetListWithNewWidget looks good!

The test case correctly verifies that the widget list is updated with a new widget as expected.

@riodeuno
Copy link
Contributor Author

/build-deploy-preview skip-tests=true

@riodeuno riodeuno added ok-to-test Required label for CI and removed ok-to-test Required label for CI labels Jul 25, 2024
Copy link

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

Copy link

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

@KelvinOm
Copy link
Collaborator

@KelvinOm Thanks for reviewing the list of properties.

MainContainer

I can't remove these properties in this PR. This needs a backend change where the backend now needs to be aware of which layout system we're serving and use a different template. Today, when creating a page the backend uses an existing template which was defined for Fixed mode.

Section and Zones

I've removed most of what you've suggested. I have no idea where flexGrow is coming from, doesn't seem to be coming from the widget addition flow. I'll look into this later.

All other widgets

These properties are coming from the default configuration of the widgets, we'll have to create a new PR after auditing and removing these properties from the widget configurations.

@riodeuno Could you create tasks in our backlog to ensure that we don't forget anything here?

@znamenskii-ilia znamenskii-ilia self-requested a review July 26, 2024 08:04
@riodeuno
Copy link
Contributor Author

@KelvinOm As suggested, I've created the following issues. #35207 and #35208.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Anvil Pod Issue related to Anvil project Anvil team issues related to the new layout system anvil ok-to-test Required label for CI skip-changelog Adding this label to a PR prevents it from being listed in the changelog Task A simple Todo
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Task]: Cleanup Anvil DSL
3 participants