From b64d5c83384b315688bbccd7d2c81857f8d9955a Mon Sep 17 00:00:00 2001 From: Rahul Barwal Date: Mon, 12 Aug 2024 17:24:19 +0530 Subject: [PATCH] fix: drag and drop issue in list widget (#35622) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Description This pull request fixes an issue where the error count was not being properly checked when a list widget was dropped. * Reverts a previous commit(#35221). * Include changes to the test file and the widget creation functions to ensure that the error count is correctly checked when a list widget is dragged and dropped. Fixes #35578 _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.All" ### :mag: Cypress test results > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: > Commit: 07f3abcff845eb4d350fc9af235d6ed076257264 > Cypress dashboard. > Tags: `@tag.All` > Spec: >
Mon, 12 Aug 2024 11:35:20 UTC ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No ## Summary by CodeRabbit - **New Features** - Improved drag-and-drop functionality for list widgets. - **Bug Fixes** - Enhanced clarity and organization of test cases for better logical flow. - **Chores** - Simplified widget ID generation across several components, improving consistency in the application. --- .../ListV2/Listv2_BasicClientSideData_spec.js | 14 ++++++++++---- .../anvil/utils/layouts/update/sectionUtils.ts | 4 +--- .../anvil/utils/layouts/update/zoneUtils.ts | 2 +- .../anvil/utils/sectionOperationUtils.ts | 2 +- .../src/pages/Editor/widgetSidebar/WidgetCard.tsx | 5 +---- 5 files changed, 14 insertions(+), 13 deletions(-) diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/ListV2/Listv2_BasicClientSideData_spec.js b/app/client/cypress/e2e/Regression/ClientSide/Widgets/ListV2/Listv2_BasicClientSideData_spec.js index 23c6acab5351..b35dc5683c7c 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/ListV2/Listv2_BasicClientSideData_spec.js +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/ListV2/Listv2_BasicClientSideData_spec.js @@ -36,14 +36,20 @@ describe( _.agHelper.SaveLocalStorageCache(); }); - it("1. shows correct number of items", () => { + it("1. Test drag and drop of list widget", () => { + // to avoid such issues in future: https://github.com/appsmithorg/appsmith/issues/35578 + cy.dragAndDropToCanvas("listwidgetv2", { x: 200, y: 200 }); + _.debuggerHelper.AssertErrorCount(0); + }); + + it("2. shows correct number of items", () => { _.agHelper.AddDsl("Listv2/simpleList"); cy.get(publishLocators.containerWidget).should("have.length", 3); cy.get(publishLocators.imageWidget).should("have.length", 3); cy.get(publishLocators.textWidget).should("have.length", 6); }); - it("2. shows correct text from binding", () => { + it("3. shows correct text from binding", () => { cy.get(publishLocators.containerWidget).each(($containerEl, index) => { cy.wrap($containerEl) .find(publishLocators.textWidget) @@ -56,7 +62,7 @@ describe( }); }); - it("3. retains input values when pages are switched", () => { + it("4. retains input values when pages are switched", () => { _.agHelper.AddDsl("Listv2/simpleListWithInputAndButton"); cy.get(publishLocators.inputWidget).should("have.length", 2); @@ -119,7 +125,7 @@ describe( }); }); - it("4. Reset pageNo when serverside pagination is enabled", () => { + it("5. Reset pageNo when serverside pagination is enabled", () => { cy.get(`${widgetSelector("List1")} .rc-pagination-item-3`).click({ force: true, }); diff --git a/app/client/src/layoutSystems/anvil/utils/layouts/update/sectionUtils.ts b/app/client/src/layoutSystems/anvil/utils/layouts/update/sectionUtils.ts index 0a94f1981c24..54fd4b7fe702 100644 --- a/app/client/src/layoutSystems/anvil/utils/layouts/update/sectionUtils.ts +++ b/app/client/src/layoutSystems/anvil/utils/layouts/update/sectionUtils.ts @@ -25,9 +25,7 @@ export function* createSectionAndAddWidget( /** * Step 1: Create Section widget. */ - const widgetId: string = generateReactKey({ - prefix: "section-", - }); + const widgetId: string = generateReactKey(); const updatedWidgets: CanvasWidgetsReduxState = yield addNewAnvilWidgetToDSL( allWidgets, { diff --git a/app/client/src/layoutSystems/anvil/utils/layouts/update/zoneUtils.ts b/app/client/src/layoutSystems/anvil/utils/layouts/update/zoneUtils.ts index 760265e2a45a..96ece0e14b2c 100644 --- a/app/client/src/layoutSystems/anvil/utils/layouts/update/zoneUtils.ts +++ b/app/client/src/layoutSystems/anvil/utils/layouts/update/zoneUtils.ts @@ -34,7 +34,7 @@ export function* createZoneAndAddWidgets( /** * Create Zone widget. */ - const widgetId: string = generateReactKey({ prefix: "zone-" }); + const widgetId: string = generateReactKey(); const updatedWidgets: CanvasWidgetsReduxState = yield addNewAnvilWidgetToDSL( allWidgets, { diff --git a/app/client/src/layoutSystems/anvil/utils/sectionOperationUtils.ts b/app/client/src/layoutSystems/anvil/utils/sectionOperationUtils.ts index d4ad1440f3d0..8a1c83732efa 100644 --- a/app/client/src/layoutSystems/anvil/utils/sectionOperationUtils.ts +++ b/app/client/src/layoutSystems/anvil/utils/sectionOperationUtils.ts @@ -169,7 +169,7 @@ export function* addNewZonesToSection( // TODO: Fix this the next time the file is edited // eslint-disable-next-line @typescript-eslint/no-explicit-any const newWidget: any = { - newWidgetId: generateReactKey({ prefix: "zone-" }), + newWidgetId: generateReactKey(), parentId: sectionWidget.widgetId, type: anvilWidgets.ZONE_WIDGET, }; diff --git a/app/client/src/pages/Editor/widgetSidebar/WidgetCard.tsx b/app/client/src/pages/Editor/widgetSidebar/WidgetCard.tsx index f120fd8afac1..94dbeeef66cd 100644 --- a/app/client/src/pages/Editor/widgetSidebar/WidgetCard.tsx +++ b/app/client/src/pages/Editor/widgetSidebar/WidgetCard.tsx @@ -132,13 +132,10 @@ function WidgetCard(props: CardProps) { widgetName: props.details.displayName, }); } - setDraggingNewWidget && setDraggingNewWidget(true, { ...props.details, - widgetId: generateReactKey({ - prefix: props.details.type === "ZONE_WIDGET" ? "zone-" : "component-", - }), + widgetId: generateReactKey(), }); };