fix: render only the currently open detached widgets.

[marks0351]

Description

[!TIP]
Add a TL;DR when the description is longer than 500 words or extremely technical (helps the content, marketing, and DevRel team).

Please also include relevant motivation and context. List any dependencies that are required for this change. Add links to Notion, Figma or any other documents that might be relevant to the PR.

Fixes #Issue Number
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"

:mag: Cypress test results

[!TIP] 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/8880951419 Commit: 44e332505e9d2f6ff346e2f83e6e1f2a23e74855 Cypress dashboard url: Click here!

Communication

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

• [ ] Yes
• [x] No

Summary by CodeRabbit

• New Features
  • Introduced a new component for rendering detached child widgets within the Anvil layout system.
• Refactor
  • Updated the handling and rendering process of detached widgets across various components in the Anvil system.
• Bug Fixes
  • Adjusted selector logic to correctly retrieve and manage detached widget states.

[coderabbitai[bot]]

Walkthrough

Walkthrough

The update involves significant changes to enhance the management and rendering of detached widgets in the Anvil layout system. These changes aim to streamline the process, introduce new components for handling detached widgets, and update selectors to support the revamped functionality.

Changes

File Path	Summary
.../anvil/common/hooks/detachedWidgetHooks.ts	Refactored handling and rendering of detached widgets, updated imports.
.../anvil/integrations/modalSelectors.ts	Modified to handle detached widgets instead of open modals.
.../anvil/viewer/canvas/AnvilDetachedWidgets.tsx	Introduced a new component for rendering detached widgets.
.../anvil/viewer/canvas/AnvilViewerCanvas.tsx	Updated to use AnvilDetachedWidgets for rendering detached widgets.
.../sagas/selectors.tsx	Added function to retrieve IDs for detached widgets.
.../ce/reducers/index.tsx	Added a new type import and updated AppState interface.
.../ce/reducers/uiReducers/index.tsx	Added an import statement and updated uiReducerObject with a new reducer.
.../anvil/integrations/actions/actionTypes.ts	Added new action types to the AnvilReduxActionTypes enum.
.../anvil/integrations/actions/detachedWidgetActions.ts	Introduced actions for managing detached widgets.
.../anvil/integrations/reducers/anvilDetachedWidgetsReducer.ts	Introduced a reducer for detached widgets state management.
.../anvil/integrations/sagas/anvilDetachedWidgetSagas.ts	Introduced sagas for detached widgets management.
.../anvil/integrations/sagas/index.ts	Updated sagas to include anvilDetachedWidgetSagas.
.../anvil/integrations/sagas/pasteSagas.ts	Refactored function and updated usage for Anvil layout check.
.../anvil/integrations/sagas/utils.ts	Added a function for conditional saga calling based on layout type.

Possibly related issues

• appsmithorg/appsmith#30769: The changes in this PR align with the objectives of developing a UI module for rendering widgets within the Anvil layout. The enhancements in managing detached widgets, introducing new components, and ensuring dynamic rendering capabilities support the goals outlined in the GitHub issue.

---

Recent Review Details

Configuration used: CodeRabbit UI Review profile: CHILL

Commits

Files that changed from the base of the PR and between 44e332505e9d2f6ff346e2f83e6e1f2a23e74855 and b68ad19c09f768b99d28b72626ceefaa1b79056d.

Files selected for processing (10)

• app/client/src/ce/reducers/index.tsx (2 hunks)
• app/client/src/ce/reducers/uiReducers/index.tsx (2 hunks)
• app/client/src/layoutSystems/anvil/integrations/actions/actionTypes.ts (1 hunks)
• app/client/src/layoutSystems/anvil/integrations/actions/detachedWidgetActions.ts (1 hunks)
• app/client/src/layoutSystems/anvil/integrations/modalSelectors.ts (1 hunks)
• app/client/src/layoutSystems/anvil/integrations/reducers/anvilDetachedWidgetsReducer.ts (1 hunks)
• app/client/src/layoutSystems/anvil/integrations/sagas/anvilDetachedWidgetSagas.ts (1 hunks)
• app/client/src/layoutSystems/anvil/integrations/sagas/index.ts (2 hunks)
• app/client/src/layoutSystems/anvil/integrations/sagas/pasteSagas.ts (3 hunks)
• app/client/src/layoutSystems/anvil/integrations/sagas/utils.ts (1 hunks)

Files skipped from review as they are similar to previous changes (1)

• app/client/src/layoutSystems/anvil/integrations/modalSelectors.ts

Additional comments not posted (9)

app/client/src/layoutSystems/anvil/integrations/actions/detachedWidgetActions.ts (1)

3-21: The action creators for detached widgets are correctly implemented following Redux best practices.

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

Line range hint 8-17: The integration of anvilDetachedWidgetSagas into the saga middleware is correctly implemented.

app/client/src/layoutSystems/anvil/integrations/reducers/anvilDetachedWidgetsReducer.ts (1)

7-36: The anvilDetachedWidgetsReducer is correctly implemented using immer for immutable state updates and handles all related actions appropriately.

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

13-46: The sagas for handling detached widget actions are correctly implemented and integrated using appropriate saga effects (takeEvery, takeLatest).

app/client/src/layoutSystems/anvil/integrations/actions/actionTypes.ts (1)

43-45: The addition of new action types for detached widgets is correctly implemented and appropriately categorized within the AnvilReduxActionTypes enum.

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

Line range hint 26-128: The integration of callSagaOnlyForAnvil in the pasteSagas root saga is correctly implemented, ensuring that paste operations are limited to the Anvil layout.

app/client/src/ce/reducers/uiReducers/index.tsx (1)

Line range hint 53-108: The integration of anvilDetachedWidgetsReducer into the uiReducerObject is correctly implemented, ensuring it is part of the Redux store for managing detached widgets.

app/client/src/ce/reducers/index.tsx (2)

84-84: Ensure that the AnvilDetachedWidgetsReduxState type is properly defined in the specified path.

---

150-150: Ensure that the AnvilDetachedWidgetsReduxState is properly integrated into the AppState interface and that all related actions, selectors, and components are updated to use this new state slice.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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]

/build-deploy-preview skip-tests=true

[github-actions[bot]]

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

[github-actions[bot]]

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

[riodeuno]

@marks0351 This PR a little hard to review. There are a few things, the rationale behind which I donot understand.

I have a few questions, but before that would you mind elaborating on what we've changed and why we've done so, in the PR description, or in a related issue?

[marks0351]

@marks0351 This PR a little hard to review. There are a few things, the rationale behind which I donot understand.

I have a few questions, but before that would you mind elaborating on what we've changed and why we've done so, in the PR description, or in a related issue?

My bad, have updated the PR description, let me know if that helps.