fix: starter building blocks on canvas removes existing queries and JS objects #32629

rahulbarwal · 2024-04-12T05:27:24Z

Description

Root cause:
The original intention of the building blocks on canvas was to serve a new user on their very first app.
Looking at (good) usage of this feature, we turned it on for all pages on all apps.
Now, an experienced user don't always start with UI and thats when we hit this issue.

Additionally, this was a tech debt we had to repay and this PR takes that opportunity to get rid of hack of using add a page from template for this feature and uses proper PIE based API to support his.

Fixes #32573
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.Templates"

🔍 Cypress test results

Tip

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

Summary by CodeRabbit

New Features
- Introduced functionality for importing starter building blocks into applications, including layout positioning and action triggers upon successful import.
- Added new actions and selectors in Redux for managing current forking building block names.
Refactor
- Updated the handling of template names and constants for better consistency and use within the app.
- Simplified event handling and variable naming in several components for improved code clarity and performance.
Bug Fixes
- Adjusted analytics and event data handling to ensure accurate tracking and functionality.
Tests
- Updated Cypress E2E tests to reflect changes in functionality and removed outdated test cases.

coderabbitai · 2024-04-12T05:27:31Z

Walkthrough

The code changes aim to streamline the integration and management of building blocks within applications. Key updates include introducing new actions and selectors for handling building blocks, refining component behaviors for consistency, and adding functionalities for importing and managing building blocks efficiently. These changes are designed to enhance user interactions and optimize backend processes related to building blocks.

Changes

File Path	Change Summary
`app/client/src/actions/templateActions.ts` `app/client/src/reducers/uiReducers/templateReducer.ts` `app/client/src/ce/constants/ReduxActionConstants.tsx` `app/client/src/selectors/templatesSelectors.tsx`	Introducing functionalities to manage forking building block names in the Redux store.
`app/client/src/constants/TemplatesConstants.tsx`	Refactoring constants for template names, affecting how names are accessed and utilized.
`app/client/src/layoutSystems/common/dropTarget/starterBuildingBlocks/index.tsx` `app/client/src/pages/Editor/Explorer/Datasources/DatasourceStarterLayoutPrompt.tsx`	Updating component behaviors and variable names for consistency and enhancing analytics logging.
`app/client/src/pages/Templates/TemplatesModal/PageSelection.tsx`	Modifying dynamic value assignment based on template properties.
`app/client/src/sagas/BuildingBlocksSagas.ts`	Introducing comprehensive functionalities for importing and managing building blocks, including API interactions and widget handling.
`app/client/cypress/e2e/Regression/ClientSide/Templates/BuildingBlocks/StarterBuildingBlocksOnCanvas_spec.ts`	Adjusting and removing specific test cases related to building blocks functionality.

Assessment against linked issues

Objective	Addressed	Explanation
Enable drag-and-drop functionality for building blocks on the canvas. [#31314]	❌	While the PR enhances building block handling, specific implementation of drag-and-drop functionality is not explicitly mentioned.
Address critical issue of existing queries and JS objects being deleted when adding building blocks. [#32573]	❌	The changes do not directly address preventing the deletion of existing queries and JS objects as reported in the linked issue.
Enhance backend operations for adding queries, JavaScript, and datasources. [#31315]	❌	Although backend improvements are suggested, detailed specifics on queries, JavaScript, and datasources integration are not explicitly reflected in the changes.

Possibly related issues

[Feature]: Improve Partial Import Export (PIE) API to allow adding building blocks to apps. #31315: The backend operations enhancements in this PR might indirectly relate to the backend improvements needed for adding queries, JavaScript, and datasources as mentioned in this issue.
[Feature]: Implement Drag-and-Drop Functionality for Building Blocks with Loading State #31314: The updates to building block handling in the UI and potentially the backend could align with the objectives of improving user experience with building blocks on the canvas outlined in this issue.

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.

rahulbarwal

/build-deploy-preview skip-tests=true

coderabbitai

Actionable comments posted: 1

coderabbitai · 2024-04-12T05:35:42Z

app/client/src/sagas/TemplatesSagas.ts

+      const buildingBlockDsl = JSON.parse(response.data.widgetDsl);
+      const buildingBlockWidgets = buildingBlockDsl.children;
+      const flattenedBlockWidgets = buildingBlockWidgets.map(
+        (widget: WidgetProps) => flattenDSL(widget),
+      );

-      // 3. Rename the template page to clicked from page
-      yield fork(renameStarterTemplatePageToDefault, templatePageIds[0]);
+      const widgetsToPasteInCanvas: CopiedWidgetData[] = yield all(
+        flattenedBlockWidgets.map(
+          (widget: FlattenedWidgetProps, index: number) => {
+            let widgetPositionInfo: WidgetLayoutPositionInfo | null = null;
+            if (
+              widget.parentId &&
+              layoutSystemType === LayoutSystemTypes.ANVIL
+            ) {
+              widgetPositionInfo = getWidgetLayoutMetaInfo(
+                allWidgets[widget?.parentId]?.layout[0] ?? null,
+                widget.widgetId,
+              );
+            }
+            return {
+              hierarchy: getWidgetHierarchy(
+                buildingBlockWidgets[index].type,
+                buildingBlockWidgets[index].widgetId,
+              ),
+              list: Object.values(widget)
+                .map((obj) => ({ ...obj }))
+                .reverse(),
+              parentId: MAIN_CONTAINER_WIDGET_ID,
+              widgetId: buildingBlockWidgets[index].widgetId,
+              widgetPositionInfo,
+            };
+          },


Optimize the mapping and processing of widgets in apiCallForForkBuildingBlockToApplication. The current implementation involves multiple mappings and transformations which could be simplified or optimized to improve performance, especially if the number of widgets is large.

rahulbarwal · 2024-04-12T08:24:15Z

/build-deploy-preview skip-tests=true

github-actions · 2024-04-12T08:24:38Z

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

github-actions · 2024-04-12T08:38:06Z

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

…o bugfix/32573-bb-on-canvas-removes-existing-queries-jsobjects

rahulbarwal · 2024-04-16T05:26:17Z

/build-deploy-preview skip-tests=true

github-actions · 2024-04-16T05:26:37Z

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

github-actions · 2024-04-16T05:41:04Z

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

This reverts commit a4d9767.

…o bugfix/32573-bb-on-canvas-removes-existing-queries-jsobjects

rahulbarwal · 2024-04-22T10:02:32Z

/build-deploy-preview skip-tests=true

github-actions · 2024-04-22T10:02:58Z

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

github-actions · 2024-04-22T10:16:49Z

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

…o bugfix/32573-bb-on-canvas-removes-existing-queries-jsobjects

rahulbarwal · 2024-04-23T07:40:46Z

/ci-test-limit runId=8782108653

github-actions · 2024-04-23T07:41:22Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/8796659667.
Cypress dashboard
PR: #32629.

ApekshaBhosale · 2024-04-23T07:58:40Z

/ci-test-limit

ApekshaBhosale · 2024-04-23T07:58:43Z

/ci-test-limit

github-actions · 2024-04-23T07:59:12Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/8796862131.
Cypress dashboard
PR: #32629.

github-actions · 2024-04-23T07:59:14Z

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/8796862702.
Cypress dashboard
PR: #32629.

github-actions · 2024-04-23T08:21:49Z

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

github-actions · 2024-04-23T08:23:45Z

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

This reverts commit eb2d5e1.

Refactor migration helper method to separate class

74fd648

rahulbarwal self-assigned this Apr 12, 2024

rahulbarwal requested a review from jacquesikot April 12, 2024 05:27

rahulbarwal added Bug Something isn't working Templates Pod Issues related to Templates Building blocks Building blocks on cavas, on templates listing or drag and drop of building blocks. labels Apr 12, 2024

rahulbarwal commented Apr 12, 2024

View reviewed changes

github-actions bot added Critical This issue needs immediate attention. Drop everything else Needs Triaging Needs attention from maintainers to triage Production Templates Issues related to templates labels Apr 12, 2024

coderabbitai bot reviewed Apr 12, 2024

View reviewed changes

rahulbarwal added the ok-to-test Required label for CI label Apr 15, 2024

rahulbarwal added 4 commits April 15, 2024 09:57

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

b7382f1

…o bugfix/32573-bb-on-canvas-removes-existing-queries-jsobjects

Separates building blocks sags from the template sagas

ecdb7cf

Removes template pagename, as it is no longer required.

e372d6a

Removes hard coded name and puts individual template ids and names.

c751a25

rahulbarwal requested a review from ayushpahwa as a code owner April 15, 2024 12:19

rahulbarwal added ok-to-test Required label for CI and removed ok-to-test Required label for CI labels Apr 15, 2024

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

14fe0b7

…o bugfix/32573-bb-on-canvas-removes-existing-queries-jsobjects

rahulbarwal added ok-to-test Required label for CI and removed ok-to-test Required label for CI labels Apr 16, 2024

rahulbarwal added 2 commits April 22, 2024 09:59

Revert "Refactor StarterBuildingBlocksOnCanvas_spec.ts file"

b2a6406

This reverts commit a4d9767.

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

e053c4d

…o bugfix/32573-bb-on-canvas-removes-existing-queries-jsobjects

rahulbarwal dismissed jacquesikot’s stale review via e053c4d April 22, 2024 04:51

rahulbarwal added ok-to-test Required label for CI and removed ok-to-test Required label for CI labels Apr 22, 2024

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

32c77b0

…o bugfix/32573-bb-on-canvas-removes-existing-queries-jsobjects

rahulbarwal added ok-to-test Required label for CI and removed ok-to-test Required label for CI labels Apr 22, 2024

github-actions bot removed the Stale label Apr 22, 2024

rahulbarwal added 3 commits April 23, 2024 13:07

Uses assertHelper utility instead of cy commands.

8798b3e

Update limited-tests.txt file path in Cypress configuration

eb2d5e1

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

5f7f0fd

…o bugfix/32573-bb-on-canvas-removes-existing-queries-jsobjects

github-actions bot added the Stale label Apr 23, 2024

rahulbarwal added ok-to-test Required label for CI and removed ok-to-test Required label for CI labels Apr 23, 2024

Revert "Update limited-tests.txt file path in Cypress configuration"

3f48903

This reverts commit eb2d5e1.

jacquesikot approved these changes Apr 23, 2024

View reviewed changes

rahulbarwal merged commit 7c40343 into release Apr 23, 2024
13 checks passed

rahulbarwal deleted the bugfix/32573-bb-on-canvas-removes-existing-queries-jsobjects branch April 23, 2024 10:35

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: starter building blocks on canvas removes existing queries and JS objects #32629

fix: starter building blocks on canvas removes existing queries and JS objects #32629

rahulbarwal commented Apr 12, 2024 •

edited by github-actions bot

Loading

coderabbitai bot commented Apr 12, 2024 •

edited

Loading

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (`.coderabbit.yaml`)

Documentation and Community

rahulbarwal left a comment

coderabbitai bot left a comment

coderabbitai bot Apr 12, 2024

rahulbarwal commented Apr 12, 2024

github-actions bot commented Apr 12, 2024

github-actions bot commented Apr 12, 2024

rahulbarwal commented Apr 16, 2024

github-actions bot commented Apr 16, 2024

github-actions bot commented Apr 16, 2024

rahulbarwal commented Apr 22, 2024

github-actions bot commented Apr 22, 2024

github-actions bot commented Apr 22, 2024

rahulbarwal commented Apr 23, 2024

github-actions bot commented Apr 23, 2024

ApekshaBhosale commented Apr 23, 2024

ApekshaBhosale commented Apr 23, 2024

github-actions bot commented Apr 23, 2024

github-actions bot commented Apr 23, 2024

github-actions bot commented Apr 23, 2024

github-actions bot commented Apr 23, 2024

fix: starter building blocks on canvas removes existing queries and JS objects #32629

fix: starter building blocks on canvas removes existing queries and JS objects #32629

Conversation

rahulbarwal commented Apr 12, 2024 • edited by github-actions bot Loading

Description

Automation

🔍 Cypress test results

Summary by CodeRabbit

coderabbitai bot commented Apr 12, 2024 • edited Loading

Walkthrough

Changes

Assessment against linked issues

Possibly related issues

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (.coderabbit.yaml)

Documentation and Community

rahulbarwal left a comment

Choose a reason for hiding this comment

coderabbitai bot left a comment

Choose a reason for hiding this comment

coderabbitai bot Apr 12, 2024

Choose a reason for hiding this comment

rahulbarwal commented Apr 12, 2024

github-actions bot commented Apr 12, 2024

github-actions bot commented Apr 12, 2024

rahulbarwal commented Apr 16, 2024

github-actions bot commented Apr 16, 2024

github-actions bot commented Apr 16, 2024

rahulbarwal commented Apr 22, 2024

github-actions bot commented Apr 22, 2024

github-actions bot commented Apr 22, 2024

rahulbarwal commented Apr 23, 2024

github-actions bot commented Apr 23, 2024

ApekshaBhosale commented Apr 23, 2024

ApekshaBhosale commented Apr 23, 2024

github-actions bot commented Apr 23, 2024

github-actions bot commented Apr 23, 2024

github-actions bot commented Apr 23, 2024

github-actions bot commented Apr 23, 2024

rahulbarwal commented Apr 12, 2024 •

edited by github-actions bot

Loading

coderabbitai bot commented Apr 12, 2024 •

edited

Loading

CodeRabbit Configration File (`.coderabbit.yaml`)