From 3d10db4e06e2ecc762829c38abab0fd2b382d3f7 Mon Sep 17 00:00:00 2001
From: Jacques Ikot <jacquesikot@gmail.com>
Date: Wed, 10 Jan 2024 10:47:07 +0100
Subject: [PATCH 01/22] remove testid from ForkTemplate modal

---
 app/client/src/pages/Templates/ForkTemplate.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/app/client/src/pages/Templates/ForkTemplate.tsx b/app/client/src/pages/Templates/ForkTemplate.tsx
index f70acdef3362..334542efdc50 100644
--- a/app/client/src/pages/Templates/ForkTemplate.tsx
+++ b/app/client/src/pages/Templates/ForkTemplate.tsx
@@ -57,10 +57,7 @@ function ForkTemplate({
       <Modal onOpenChange={closeModal} open={showForkModal}>
         <ModalContent style={{ width: "640px" }}>
           <ModalHeader>{createMessage(CHOOSE_WHERE_TO_FORK)}</ModalHeader>
-          <ModalBody
-            data-testid="t--fork-template-modal"
-            style={{ overflow: "unset", paddingBottom: "4px" }}
-          >
+          <ModalBody style={{ overflow: "unset", paddingBottom: "4px" }}>
             <Select
               dropdownMatchSelectWidth
               getPopupContainer={(triggerNode) => triggerNode.parentNode}

From e8d2ef06116870c7573bdce2afa505ead901472b Mon Sep 17 00:00:00 2001
From: Jacques Ikot <jacquesikot@gmail.com>
Date: Thu, 18 Apr 2024 05:56:24 +0100
Subject: [PATCH 02/22] add 4 cypress test cases for building blocks

---
 .../ExplorerTests/Building_Blocks.ts          | 164 ++++++++++++++++++
 1 file changed, 164 insertions(+)
 create mode 100644 app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Building_Blocks.ts

diff --git a/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Building_Blocks.ts b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Building_Blocks.ts
new file mode 100644
index 000000000000..5b2329c5bbbf
--- /dev/null
+++ b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Building_Blocks.ts
@@ -0,0 +1,164 @@
+import { featureFlagIntercept } from "../../../../support/Objects/FeatureFlags";
+import {
+  entityExplorer,
+  agHelper,
+} from "../../../../support/Objects/ObjectsCore";
+
+const commonlocators = require("../../../../locators/commonlocators.json");
+
+// Taken from here appsmith/app/client/src/constants/WidgetConstants.tsx
+const MAX_BUILDING_BLOCKS_TO_DISPLAY = 9;
+
+describe(
+  "Building blocks explorer tests",
+  {
+    tags: ["@tag.IDE", "@tag.Widget"],
+  },
+  () => {
+    it("1. Building blocks tag is visible and open by default", () => {
+      featureFlagIntercept({ release_drag_drop_building_blocks_enabled: true });
+      agHelper
+        .GetElement(`${entityExplorer._widgetTagBuildingBlocks}`)
+        .each(($widgetTag) => {
+          const widgetsInThisTag: string[] = [];
+          cy.wrap($widgetTag)
+            .find(entityExplorer._widgetCardTitle)
+            .each(($widgetName) => {
+              const value = $widgetName.text();
+              widgetsInThisTag.push(value);
+            })
+            .then(() => {
+              expect(widgetsInThisTag).to.have.length.gt(1);
+            });
+        });
+    });
+
+    it("2. If widgets are more than 9, see more button should be visible", () => {
+      featureFlagIntercept({ release_drag_drop_building_blocks_enabled: true });
+      let widgetsInThisTag: string[] = [];
+
+      agHelper
+        .GetElement(`${entityExplorer._widgetTagBuildingBlocks}`)
+        .each(($widgetTag) => {
+          cy.wrap($widgetTag)
+            .find(entityExplorer._widgetCardTitle)
+            .each(($widgetName) => {
+              const value = $widgetName.text();
+              widgetsInThisTag.push(value);
+            });
+        });
+
+      if (widgetsInThisTag.length > MAX_BUILDING_BLOCKS_TO_DISPLAY) {
+        cy.get(entityExplorer._widgetSeeMoreButton).should("be.visible");
+      }
+    });
+
+    it("3. Should not show the 'See More' button if widgets are less than 9", () => {
+      featureFlagIntercept({ release_drag_drop_building_blocks_enabled: true });
+
+      // Array to store the names of widgets found
+      const widgetsInThisTag: string[] = [];
+
+      // Find and iterate over each widget card title within the specified tag
+      cy.get(entityExplorer._widgetTagBuildingBlocks)
+        .find(entityExplorer._widgetCardTitle)
+        .each(($widgetName) => {
+          // Extract the text of each widget title
+          const value = $widgetName.text().trim();
+          widgetsInThisTag.push(value);
+        })
+        .then(() => {
+          // After collecting widget names, assert based on the count
+          if (widgetsInThisTag.length < MAX_BUILDING_BLOCKS_TO_DISPLAY) {
+            // If less than 9 widgets, ensure the 'See More' button does not exist
+            cy.get(entityExplorer._widgetSeeMoreButton).should("not.exist");
+          } else {
+            // If 9 or more widgets, ensure the 'See More' button exists
+            cy.get(entityExplorer._widgetSeeMoreButton).should("exist");
+          }
+        });
+    });
+
+    it("4. Clicking on 'See More' button should show all widgets, and 'See Less' should show max 9 widgets", () => {
+      featureFlagIntercept({ release_drag_drop_building_blocks_enabled: true });
+
+      let widgetsInThisTag: string[] = [];
+
+      // Get all building blocks before attempting to click "See More"
+      cy.get(entityExplorer._widgetTagBuildingBlocks)
+        .each(($widgetTag) => {
+          cy.wrap($widgetTag)
+            .find(entityExplorer._widgetCardTitle)
+            .each(($widgetName) => {
+              const value = $widgetName.text().trim();
+              widgetsInThisTag.push(value);
+            });
+        })
+        .then(() => {
+          // Check if there are fewer than 9 widgets
+          if (widgetsInThisTag.length < MAX_BUILDING_BLOCKS_TO_DISPLAY) {
+            // No need to click "See More" if there are already fewer than 9 widgets
+            cy.get(entityExplorer._widgetSeeMoreButton).should("not.exist");
+          } else {
+            // Click the "See More" button for each widget tag
+            cy.get(entityExplorer._widgetTagsList).each(($widgetTag) => {
+              cy.wrap($widgetTag)
+                .find(entityExplorer._widgetSeeMoreButton)
+                .should("exist")
+                .click({ force: true });
+            });
+          }
+
+          // Get all building blocks after attempting to click "See More"
+          let widgetsInThisTagAfterSeeMore: string[] = [];
+          cy.get(entityExplorer._widgetTagBuildingBlocks)
+            .each(($widgetTag) => {
+              cy.wrap($widgetTag)
+                .find(entityExplorer._widgetCardTitle)
+                .each(($widgetName) => {
+                  const value = $widgetName.text().trim();
+                  widgetsInThisTagAfterSeeMore.push(value);
+                });
+            })
+            .then(() => {
+              // Assert that the number of widgets after potentially clicking "See More" is correct
+              expect(widgetsInThisTagAfterSeeMore.length).to.be.greaterThan(
+                widgetsInThisTag.length,
+              );
+            });
+
+          // Click the same "See More" button again to simulate "See Less"
+          cy.get(entityExplorer._widgetTagsList).each(($widgetTag) => {
+            cy.wrap($widgetTag)
+              .find(entityExplorer._widgetSeeMoreButton)
+              .should("exist") // Check if the button still exists (now interpreted as "See Less")
+              .click({ force: true });
+          });
+
+          // Get all building blocks after clicking "See Less"
+          let widgetsInThisTagAfterSeeLess: string[] = [];
+          cy.get(entityExplorer._widgetTagBuildingBlocks)
+            .each(($widgetTag) => {
+              cy.wrap($widgetTag)
+                .find(entityExplorer._widgetCardTitle)
+                .each(($widgetName) => {
+                  const value = $widgetName.text().trim();
+                  widgetsInThisTagAfterSeeLess.push(value);
+                });
+            })
+            .then(() => {
+              // Assert that the number of widgets after clicking "See Less" is back to original count
+              expect(widgetsInThisTagAfterSeeLess.length).to.equal(
+                widgetsInThisTag.length,
+              );
+            });
+        });
+    });
+
+    // it("5. Should drag building block to canvas", () => {
+    //   cy.get(commonlocators.entityExplorersearch).should("be.visible");
+    //   cy.get(commonlocators.entityExplorersearch).clear().type("form");
+    //   cy.dragAndDropToCanvas("buildingblock", { x: 700, y: 30 });
+    // });
+  },
+);

From 922e49ee3aa2dfe6eefcea2ceb8ea6f39df5db4f Mon Sep 17 00:00:00 2001
From: Jacques Ikot <jacquesikot@gmail.com>
Date: Mon, 29 Apr 2024 11:27:20 +0100
Subject: [PATCH 03/22] create base PR

---
 .../Regression/ClientSide/ExplorerTests/Building_Blocks.ts  | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Building_Blocks.ts b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Building_Blocks.ts
index 5b2329c5bbbf..85669cff47f2 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Building_Blocks.ts
+++ b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Building_Blocks.ts
@@ -154,11 +154,5 @@ describe(
             });
         });
     });
-
-    // it("5. Should drag building block to canvas", () => {
-    //   cy.get(commonlocators.entityExplorersearch).should("be.visible");
-    //   cy.get(commonlocators.entityExplorersearch).clear().type("form");
-    //   cy.dragAndDropToCanvas("buildingblock", { x: 700, y: 30 });
-    // });
   },
 );

From cc3da8a104a4fba4bacfc300bcc2bec6dd51ffdc Mon Sep 17 00:00:00 2001
From: Jacques Ikot <jacquesikot@gmail.com>
Date: Tue, 30 Apr 2024 11:26:23 +0100
Subject: [PATCH 04/22] push changes to rahul

---
 ...uilding_Blocks.ts => Drag_Drop_Building_Blocks_spec.ts} | 7 +++++++
 1 file changed, 7 insertions(+)
 rename app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/{Building_Blocks.ts => Drag_Drop_Building_Blocks_spec.ts} (94%)

diff --git a/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Building_Blocks.ts b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
similarity index 94%
rename from app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Building_Blocks.ts
rename to app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
index 85669cff47f2..f0339f0c0e78 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Building_Blocks.ts
+++ b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
@@ -154,5 +154,12 @@ describe(
             });
         });
     });
+
+    it.only("5. Should drop widget on canvas", () => {
+      featureFlagIntercept({ release_drag_drop_building_blocks_enabled: true });
+      cy.get(commonlocators.entityExplorersearch).should("be.visible");
+      cy.get(commonlocators.entityExplorersearch).clear().type("form");
+      cy.dragAndDropToCanvas("buildingblock", { x: 10, y: 10 });
+    });
   },
 );

From 0ce8f9ba03bf30b79dadf7f6369b642bbea6b018 Mon Sep 17 00:00:00 2001
From: Jacques Ikot <jacquesikot@gmail.com>
Date: Wed, 1 May 2024 08:12:29 +0100
Subject: [PATCH 05/22] added test case for drag and drop BB on canvas

---
 .../ExplorerTests/Drag_Drop_Building_Blocks_spec.ts   | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
index f0339f0c0e78..7716f88d7888 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
+++ b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
@@ -2,6 +2,7 @@ import { featureFlagIntercept } from "../../../../support/Objects/FeatureFlags";
 import {
   entityExplorer,
   agHelper,
+  assertHelper,
 } from "../../../../support/Objects/ObjectsCore";
 
 const commonlocators = require("../../../../locators/commonlocators.json");
@@ -155,11 +156,13 @@ describe(
         });
     });
 
-    it.only("5. Should drop widget on canvas", () => {
+    it.only("5. Should drag and drop building block on canvas", () => {
       featureFlagIntercept({ release_drag_drop_building_blocks_enabled: true });
-      cy.get(commonlocators.entityExplorersearch).should("be.visible");
-      cy.get(commonlocators.entityExplorersearch).clear().type("form");
-      cy.dragAndDropToCanvas("buildingblock", { x: 10, y: 10 });
+      cy.dragAndDropToCanvas("buildingblock", { x: 600, y: 80 });
+      assertHelper.AssertNetworkStatus(
+        "/applications/import/partial/block",
+        200,
+      );
     });
   },
 );

From 8ad615e5b7e2aba9cea4001a7376a2aa5079c38f Mon Sep 17 00:00:00 2001
From: Jacques Ikot <jacquesikot@gmail.com>
Date: Wed, 1 May 2024 08:19:56 +0100
Subject: [PATCH 06/22] add new test tag

---
 .../ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
index 7716f88d7888..fcf97aa86397 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
+++ b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
@@ -13,7 +13,7 @@ const MAX_BUILDING_BLOCKS_TO_DISPLAY = 9;
 describe(
   "Building blocks explorer tests",
   {
-    tags: ["@tag.IDE", "@tag.Widget"],
+    tags: ["@tag.IDE", "@tag.Widget", "@tag.Templates"],
   },
   () => {
     it("1. Building blocks tag is visible and open by default", () => {

From 60a0982cd1746acbe1852fc9ae29ccf0141be009 Mon Sep 17 00:00:00 2001
From: Jacques Ikot <jacquesikot@gmail.com>
Date: Wed, 1 May 2024 10:09:41 +0100
Subject: [PATCH 07/22] remove assert

---
 .../ExplorerTests/Drag_Drop_Building_Blocks_spec.ts           | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
index fcf97aa86397..66ba71c0b951 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
+++ b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
@@ -159,10 +159,6 @@ describe(
     it.only("5. Should drag and drop building block on canvas", () => {
       featureFlagIntercept({ release_drag_drop_building_blocks_enabled: true });
       cy.dragAndDropToCanvas("buildingblock", { x: 600, y: 80 });
-      assertHelper.AssertNetworkStatus(
-        "/applications/import/partial/block",
-        200,
-      );
     });
   },
 );

From b33c48b5b011268974bf4b4bcba5b774066be7fa Mon Sep 17 00:00:00 2001
From: Jacques Ikot <jacquesikot@gmail.com>
Date: Fri, 10 May 2024 06:25:28 +0100
Subject: [PATCH 08/22] setup changes for dropping block

---
 .../Drag_Drop_Building_Blocks_spec.ts         | 103 +++++++++++++-----
 1 file changed, 76 insertions(+), 27 deletions(-)

diff --git a/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
index 66ba71c0b951..33c71d4e30e0 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
+++ b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
@@ -2,10 +2,9 @@ import { featureFlagIntercept } from "../../../../support/Objects/FeatureFlags";
 import {
   entityExplorer,
   agHelper,
-  assertHelper,
 } from "../../../../support/Objects/ObjectsCore";
 
-const commonlocators = require("../../../../locators/commonlocators.json");
+const explorerLocators = require("../../../../locators/explorerlocators.json");
 
 // Taken from here appsmith/app/client/src/constants/WidgetConstants.tsx
 const MAX_BUILDING_BLOCKS_TO_DISPLAY = 9;
@@ -22,7 +21,8 @@ describe(
         .GetElement(`${entityExplorer._widgetTagBuildingBlocks}`)
         .each(($widgetTag) => {
           const widgetsInThisTag: string[] = [];
-          cy.wrap($widgetTag)
+          agHelper
+            .GetElement($widgetTag)
             .find(entityExplorer._widgetCardTitle)
             .each(($widgetName) => {
               const value = $widgetName.text();
@@ -41,7 +41,8 @@ describe(
       agHelper
         .GetElement(`${entityExplorer._widgetTagBuildingBlocks}`)
         .each(($widgetTag) => {
-          cy.wrap($widgetTag)
+          agHelper
+            .GetElement($widgetTag)
             .find(entityExplorer._widgetCardTitle)
             .each(($widgetName) => {
               const value = $widgetName.text();
@@ -50,7 +51,10 @@ describe(
         });
 
       if (widgetsInThisTag.length > MAX_BUILDING_BLOCKS_TO_DISPLAY) {
-        cy.get(entityExplorer._widgetSeeMoreButton).should("be.visible");
+        agHelper.AssertElementVisibility(
+          entityExplorer._widgetSeeMoreButton,
+          true,
+        );
       }
     });
 
@@ -61,7 +65,8 @@ describe(
       const widgetsInThisTag: string[] = [];
 
       // Find and iterate over each widget card title within the specified tag
-      cy.get(entityExplorer._widgetTagBuildingBlocks)
+      agHelper
+        .GetElement(`${entityExplorer._widgetTagBuildingBlocks}`)
         .find(entityExplorer._widgetCardTitle)
         .each(($widgetName) => {
           // Extract the text of each widget title
@@ -72,10 +77,16 @@ describe(
           // After collecting widget names, assert based on the count
           if (widgetsInThisTag.length < MAX_BUILDING_BLOCKS_TO_DISPLAY) {
             // If less than 9 widgets, ensure the 'See More' button does not exist
-            cy.get(entityExplorer._widgetSeeMoreButton).should("not.exist");
+            agHelper.AssertElementVisibility(
+              entityExplorer._widgetSeeMoreButton,
+              false,
+            );
           } else {
             // If 9 or more widgets, ensure the 'See More' button exists
-            cy.get(entityExplorer._widgetSeeMoreButton).should("exist");
+            agHelper.AssertElementVisibility(
+              entityExplorer._widgetSeeMoreButton,
+              true,
+            );
           }
         });
     });
@@ -86,9 +97,12 @@ describe(
       let widgetsInThisTag: string[] = [];
 
       // Get all building blocks before attempting to click "See More"
-      cy.get(entityExplorer._widgetTagBuildingBlocks)
+      // cy.get(entityExplorer._widgetTagBuildingBlocks)
+      agHelper
+        .GetElement(`${entityExplorer._widgetTagBuildingBlocks}`)
         .each(($widgetTag) => {
-          cy.wrap($widgetTag)
+          agHelper
+            .GetElement($widgetTag)
             .find(entityExplorer._widgetCardTitle)
             .each(($widgetName) => {
               const value = $widgetName.text().trim();
@@ -99,22 +113,32 @@ describe(
           // Check if there are fewer than 9 widgets
           if (widgetsInThisTag.length < MAX_BUILDING_BLOCKS_TO_DISPLAY) {
             // No need to click "See More" if there are already fewer than 9 widgets
-            cy.get(entityExplorer._widgetSeeMoreButton).should("not.exist");
+            // cy.get(entityExplorer._widgetSeeMoreButton).should("not.exist");
+            agHelper.AssertElementVisibility(
+              entityExplorer._widgetSeeMoreButton,
+              false,
+            );
           } else {
             // Click the "See More" button for each widget tag
-            cy.get(entityExplorer._widgetTagsList).each(($widgetTag) => {
-              cy.wrap($widgetTag)
-                .find(entityExplorer._widgetSeeMoreButton)
-                .should("exist")
-                .click({ force: true });
-            });
+            agHelper
+              .GetElement(entityExplorer._widgetTagsList)
+              .each(($widgetTag) => {
+                agHelper
+                  .GetElement($widgetTag)
+                  .find(entityExplorer._widgetSeeMoreButton)
+                  .should("exist")
+                  .click({ force: true });
+              });
           }
 
           // Get all building blocks after attempting to click "See More"
           let widgetsInThisTagAfterSeeMore: string[] = [];
-          cy.get(entityExplorer._widgetTagBuildingBlocks)
+          // cy.get(entityExplorer._widgetTagBuildingBlocks)
+          agHelper
+            .GetElement(`${entityExplorer._widgetTagBuildingBlocks}`)
             .each(($widgetTag) => {
-              cy.wrap($widgetTag)
+              agHelper
+                .GetElement($widgetTag)
                 .find(entityExplorer._widgetCardTitle)
                 .each(($widgetName) => {
                   const value = $widgetName.text().trim();
@@ -129,18 +153,23 @@ describe(
             });
 
           // Click the same "See More" button again to simulate "See Less"
-          cy.get(entityExplorer._widgetTagsList).each(($widgetTag) => {
-            cy.wrap($widgetTag)
-              .find(entityExplorer._widgetSeeMoreButton)
-              .should("exist") // Check if the button still exists (now interpreted as "See Less")
-              .click({ force: true });
-          });
+          agHelper
+            .GetElement(entityExplorer._widgetTagsList)
+            .each(($widgetTag) => {
+              agHelper
+                .GetElement($widgetTag)
+                .find(entityExplorer._widgetSeeMoreButton)
+                .should("exist") // Check if the button still exists (now interpreted as "See Less")
+                .click({ force: true });
+            });
 
           // Get all building blocks after clicking "See Less"
           let widgetsInThisTagAfterSeeLess: string[] = [];
-          cy.get(entityExplorer._widgetTagBuildingBlocks)
+          agHelper
+            .GetElement(entityExplorer._widgetTagBuildingBlocks)
             .each(($widgetTag) => {
-              cy.wrap($widgetTag)
+              agHelper
+                .GetElement($widgetTag)
                 .find(entityExplorer._widgetCardTitle)
                 .each(($widgetName) => {
                   const value = $widgetName.text().trim();
@@ -159,6 +188,26 @@ describe(
     it.only("5. Should drag and drop building block on canvas", () => {
       featureFlagIntercept({ release_drag_drop_building_blocks_enabled: true });
       cy.dragAndDropToCanvas("buildingblock", { x: 600, y: 80 });
+      // const x = 600;
+      // const y = 80;
+      // const selector = `.t--widget-card-draggable-building-blocks-edit`;
+      // cy.wait(500);
+      // cy.get(selector)
+      //   .first()
+      //   .trigger("dragstart", { force: true })
+      //   .trigger("mousemove", x, y, { force: true });
+
+      // const option = {
+      //   eventConstructor: "MouseEvent",
+      //   scrollBehavior: false,
+      // } as any;
+
+      // cy.get(explorerLocators.dropHere)
+      //   .trigger("mousemove", x, y, option)
+      //   .trigger("mousemove", x, y, option)
+      //   .trigger("mouseup", x, y, option);
+      // cy.wait(500);
+      // cy.assertPageSave();
     });
   },
 );

From 7aca7b90c9e78c046b4bf421a63ff2953980cf9c Mon Sep 17 00:00:00 2001
From: Jacques Ikot <jacquesikot@gmail.com>
Date: Sun, 12 May 2024 19:39:09 +0100
Subject: [PATCH 09/22] add test for droppin and failing blocks

---
 .../Drag_Drop_Building_Blocks_spec.ts         | 102 +++++++++++++-----
 .../pages/Editor/widgetSidebar/WidgetCard.tsx |   3 +-
 2 files changed, 78 insertions(+), 27 deletions(-)

diff --git a/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
index 33c71d4e30e0..d81a66f90b39 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
+++ b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
@@ -1,13 +1,15 @@
+import { initialEntityCountForExplorerTag } from "../../../../../src/constants/WidgetConstants";
 import { featureFlagIntercept } from "../../../../support/Objects/FeatureFlags";
 import {
   entityExplorer,
   agHelper,
 } from "../../../../support/Objects/ObjectsCore";
+import { PageLeftPane } from "../../../../support/Pages/EditorNavigation";
+import explorerLocators from "../../../../locators/explorerlocators.json";
 
-const explorerLocators = require("../../../../locators/explorerlocators.json");
-
-// Taken from here appsmith/app/client/src/constants/WidgetConstants.tsx
-const MAX_BUILDING_BLOCKS_TO_DISPLAY = 9;
+const MAX_BUILDING_BLOCKS_TO_DISPLAY = initialEntityCountForExplorerTag[
+  "Building Blocks"
+] as number;
 
 describe(
   "Building blocks explorer tests",
@@ -185,29 +187,77 @@ describe(
         });
     });
 
-    it.only("5. Should drag and drop building block on canvas", () => {
+    it("5. Should drag and drop building block on canvas", () => {
+      featureFlagIntercept({ release_drag_drop_building_blocks_enabled: true });
+      // primary api call for dropping building blocks on canvas
+      cy.intercept("POST", "/api/v1/applications/import/partial/block").as(
+        "blockImport",
+      );
+      const x = 600;
+      const y = 80;
+      // select this specific building block so the test works on release
+      const selector = `.t--widget-card-draggable-buildingblock-viewdata`;
+      cy.wait(500);
+      cy.get(selector)
+        .first()
+        .trigger("dragstart", { force: true })
+        .trigger("mousemove", x, y, { force: true });
+
+      const option = {
+        eventConstructor: "MouseEvent",
+        scrollBehavior: false,
+      } as any;
+
+      cy.get(explorerLocators.dropHere)
+        .trigger("mousemove", x, y, option)
+        .trigger("mousemove", x, y, option)
+        .trigger("mouseup", x, y, option);
+
+      // check that loading skeleton is present
+      PageLeftPane.assertPresence("loading_view_data");
+      cy.wait("@blockImport").then(() => {
+        cy.assertPageSave();
+        // check that the main container of the block has been added to the canvas
+        PageLeftPane.assertPresence("con_viewData");
+      });
+    });
+
+    it("6. Should remove skeleton loader if /block API request fails", () => {
       featureFlagIntercept({ release_drag_drop_building_blocks_enabled: true });
-      cy.dragAndDropToCanvas("buildingblock", { x: 600, y: 80 });
-      // const x = 600;
-      // const y = 80;
-      // const selector = `.t--widget-card-draggable-building-blocks-edit`;
-      // cy.wait(500);
-      // cy.get(selector)
-      //   .first()
-      //   .trigger("dragstart", { force: true })
-      //   .trigger("mousemove", x, y, { force: true });
-
-      // const option = {
-      //   eventConstructor: "MouseEvent",
-      //   scrollBehavior: false,
-      // } as any;
-
-      // cy.get(explorerLocators.dropHere)
-      //   .trigger("mousemove", x, y, option)
-      //   .trigger("mousemove", x, y, option)
-      //   .trigger("mouseup", x, y, option);
-      // cy.wait(500);
-      // cy.assertPageSave();
+
+      // simluating a failure in the /block API request
+      cy.intercept("POST", "/api/v1/applications/import/partial/block", {
+        statusCode: 500,
+        delay: 1000,
+        body: {},
+      }).as("blockImport");
+
+      const x = 600;
+      const y = 80;
+      // select this specific building block so the test works on release
+      const selector = `.t--widget-card-draggable-buildingblock-viewdata`;
+      cy.wait(500);
+      cy.get(selector)
+        .first()
+        .trigger("dragstart", { force: true })
+        .trigger("mousemove", x, y, { force: true });
+
+      const option = {
+        eventConstructor: "MouseEvent",
+        scrollBehavior: false,
+      } as any;
+
+      cy.get(explorerLocators.dropHere)
+        .trigger("mousemove", x, y, option)
+        .trigger("mousemove", x, y, option)
+        .trigger("mouseup", x, y, option);
+
+      // check that loading skeleton is present
+      PageLeftPane.assertPresence("loading_view_data");
+      cy.wait("@blockImport").then(() => {
+        // check that the main container of the block has been added to the canvas
+        PageLeftPane.assertAbsence("loading_view_data");
+      });
     });
   },
 );
diff --git a/app/client/src/pages/Editor/widgetSidebar/WidgetCard.tsx b/app/client/src/pages/Editor/widgetSidebar/WidgetCard.tsx
index b6eba65f17e4..a4c721c023e2 100644
--- a/app/client/src/pages/Editor/widgetSidebar/WidgetCard.tsx
+++ b/app/client/src/pages/Editor/widgetSidebar/WidgetCard.tsx
@@ -84,7 +84,8 @@ function WidgetCardComponent({
   onDragStart?: (e: any) => void;
 }) {
   const type = `${details.type.split("_").join("").toLowerCase()}`;
-  const className = `t--widget-card-draggable t--widget-card-draggable-${type}`;
+  const displayName = details.displayName.split(" ").join("").toLowerCase();
+  const className = `t--widget-card-draggable t--widget-card-draggable-${type} ${details.type === BUILDING_BLOCK_EXPLORER_TYPE ? `t--widget-card-draggable-${type}-${displayName}` : ""}`;
   const { ThumbnailCmp } = details;
 
   return (

From a0d47c88145201e126b995160a6a85995d02ca58 Mon Sep 17 00:00:00 2001
From: Jacques Ikot <jacquesikot@gmail.com>
Date: Sun, 12 May 2024 19:49:46 +0100
Subject: [PATCH 10/22] update sample block to view data

---
 .../Drag_Drop_Building_Blocks_spec.ts         | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
index d81a66f90b39..000677c6788b 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
+++ b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
@@ -6,11 +6,18 @@ import {
 } from "../../../../support/Objects/ObjectsCore";
 import { PageLeftPane } from "../../../../support/Pages/EditorNavigation";
 import explorerLocators from "../../../../locators/explorerlocators.json";
+import { sample } from "lodash";
 
 const MAX_BUILDING_BLOCKS_TO_DISPLAY = initialEntityCountForExplorerTag[
   "Building Blocks"
 ] as number;
 
+const samepleBuildingBlockData = {
+  skeletonLoaderName: "loading_edit_data",
+  mainContainerName: "con_main",
+  selector: ".t--widget-card-draggable-buildingblock-editdata",
+};
+
 describe(
   "Building blocks explorer tests",
   {
@@ -196,7 +203,7 @@ describe(
       const x = 600;
       const y = 80;
       // select this specific building block so the test works on release
-      const selector = `.t--widget-card-draggable-buildingblock-viewdata`;
+      const selector = samepleBuildingBlockData.selector;
       cy.wait(500);
       cy.get(selector)
         .first()
@@ -214,11 +221,11 @@ describe(
         .trigger("mouseup", x, y, option);
 
       // check that loading skeleton is present
-      PageLeftPane.assertPresence("loading_view_data");
+      PageLeftPane.assertPresence(samepleBuildingBlockData.skeletonLoaderName);
       cy.wait("@blockImport").then(() => {
         cy.assertPageSave();
         // check that the main container of the block has been added to the canvas
-        PageLeftPane.assertPresence("con_viewData");
+        PageLeftPane.assertPresence(samepleBuildingBlockData.mainContainerName);
       });
     });
 
@@ -235,7 +242,7 @@ describe(
       const x = 600;
       const y = 80;
       // select this specific building block so the test works on release
-      const selector = `.t--widget-card-draggable-buildingblock-viewdata`;
+      const selector = samepleBuildingBlockData.selector;
       cy.wait(500);
       cy.get(selector)
         .first()
@@ -253,10 +260,10 @@ describe(
         .trigger("mouseup", x, y, option);
 
       // check that loading skeleton is present
-      PageLeftPane.assertPresence("loading_view_data");
+      PageLeftPane.assertPresence(samepleBuildingBlockData.skeletonLoaderName);
       cy.wait("@blockImport").then(() => {
         // check that the main container of the block has been added to the canvas
-        PageLeftPane.assertAbsence("loading_view_data");
+        PageLeftPane.assertAbsence(samepleBuildingBlockData.skeletonLoaderName);
       });
     });
   },

From b6b81df6ca09a22edfb72cac0ab961e301e5374e Mon Sep 17 00:00:00 2001
From: Jacques Ikot <jacquesikot@gmail.com>
Date: Mon, 13 May 2024 03:08:05 +0100
Subject: [PATCH 11/22] fix before each issue

---
 .../Drag_Drop_Building_Blocks_spec.ts         | 56 ++++++++++---------
 1 file changed, 31 insertions(+), 25 deletions(-)

diff --git a/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
index 000677c6788b..5d815ba8ab01 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
+++ b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
@@ -3,16 +3,16 @@ import { featureFlagIntercept } from "../../../../support/Objects/FeatureFlags";
 import {
   entityExplorer,
   agHelper,
+  homePage,
 } from "../../../../support/Objects/ObjectsCore";
 import { PageLeftPane } from "../../../../support/Pages/EditorNavigation";
 import explorerLocators from "../../../../locators/explorerlocators.json";
-import { sample } from "lodash";
 
 const MAX_BUILDING_BLOCKS_TO_DISPLAY = initialEntityCountForExplorerTag[
   "Building Blocks"
 ] as number;
 
-const samepleBuildingBlockData = {
+const sampleBuildingBlockData = {
   skeletonLoaderName: "loading_edit_data",
   mainContainerName: "con_main",
   selector: ".t--widget-card-draggable-buildingblock-editdata",
@@ -24,6 +24,12 @@ describe(
     tags: ["@tag.IDE", "@tag.Widget", "@tag.Templates"],
   },
   () => {
+    beforeEach(() => {
+      homePage.NavigateToHome();
+      homePage.CreateNewWorkspace("Test Workspace");
+      homePage.CreateAppInWorkspace("Test Workspace");
+    });
+
     it("1. Building blocks tag is visible and open by default", () => {
       featureFlagIntercept({ release_drag_drop_building_blocks_enabled: true });
       agHelper
@@ -156,7 +162,7 @@ describe(
             })
             .then(() => {
               // Assert that the number of widgets after potentially clicking "See More" is correct
-              expect(widgetsInThisTagAfterSeeMore.length).to.be.greaterThan(
+              expect(widgetsInThisTagAfterSeeMore.length).to.be.at.least(
                 widgetsInThisTag.length,
               );
             });
@@ -194,16 +200,20 @@ describe(
         });
     });
 
-    it("5. Should drag and drop building block on canvas", () => {
+    it("5. Should remove skeleton loader if /block API request fails", () => {
       featureFlagIntercept({ release_drag_drop_building_blocks_enabled: true });
-      // primary api call for dropping building blocks on canvas
-      cy.intercept("POST", "/api/v1/applications/import/partial/block").as(
-        "blockImport",
-      );
+
+      // simluating a failure in the /block API request
+      cy.intercept("POST", "/api/v1/applications/import/partial/block", {
+        statusCode: 500,
+        delay: 1000,
+        body: {},
+      }).as("blockImport");
+
       const x = 600;
       const y = 80;
       // select this specific building block so the test works on release
-      const selector = samepleBuildingBlockData.selector;
+      const selector = sampleBuildingBlockData.selector;
       cy.wait(500);
       cy.get(selector)
         .first()
@@ -221,28 +231,23 @@ describe(
         .trigger("mouseup", x, y, option);
 
       // check that loading skeleton is present
-      PageLeftPane.assertPresence(samepleBuildingBlockData.skeletonLoaderName);
+      PageLeftPane.assertPresence(sampleBuildingBlockData.skeletonLoaderName);
       cy.wait("@blockImport").then(() => {
-        cy.assertPageSave();
-        // check that the main container of the block has been added to the canvas
-        PageLeftPane.assertPresence(samepleBuildingBlockData.mainContainerName);
+        // check that the skeleton loader has been removed
+        PageLeftPane.assertAbsence(sampleBuildingBlockData.skeletonLoaderName);
       });
     });
 
-    it("6. Should remove skeleton loader if /block API request fails", () => {
+    it("6. Should drag and drop building block on canvas", () => {
       featureFlagIntercept({ release_drag_drop_building_blocks_enabled: true });
-
-      // simluating a failure in the /block API request
-      cy.intercept("POST", "/api/v1/applications/import/partial/block", {
-        statusCode: 500,
-        delay: 1000,
-        body: {},
-      }).as("blockImport");
-
+      // primary api call for dropping building blocks on canvas
+      cy.intercept("POST", "/api/v1/applications/import/partial/block").as(
+        "blockImport",
+      );
       const x = 600;
       const y = 80;
       // select this specific building block so the test works on release
-      const selector = samepleBuildingBlockData.selector;
+      const selector = sampleBuildingBlockData.selector;
       cy.wait(500);
       cy.get(selector)
         .first()
@@ -260,10 +265,11 @@ describe(
         .trigger("mouseup", x, y, option);
 
       // check that loading skeleton is present
-      PageLeftPane.assertPresence(samepleBuildingBlockData.skeletonLoaderName);
+      PageLeftPane.assertPresence(sampleBuildingBlockData.skeletonLoaderName);
       cy.wait("@blockImport").then(() => {
+        cy.assertPageSave();
         // check that the main container of the block has been added to the canvas
-        PageLeftPane.assertAbsence(samepleBuildingBlockData.skeletonLoaderName);
+        PageLeftPane.assertPresence(sampleBuildingBlockData.mainContainerName);
       });
     });
   },

From 029e18937038caf534750b92297d8d94c03f6ebd Mon Sep 17 00:00:00 2001
From: Jacques Ikot <jacquesikot@gmail.com>
Date: Mon, 13 May 2024 07:12:13 +0100
Subject: [PATCH 12/22] remove test for dailing /blobk api

---
 .../Drag_Drop_Building_Blocks_spec.ts         | 46 +------------------
 1 file changed, 1 insertion(+), 45 deletions(-)

diff --git a/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
index 5d815ba8ab01..b6d978b18649 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
+++ b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
@@ -24,12 +24,6 @@ describe(
     tags: ["@tag.IDE", "@tag.Widget", "@tag.Templates"],
   },
   () => {
-    beforeEach(() => {
-      homePage.NavigateToHome();
-      homePage.CreateNewWorkspace("Test Workspace");
-      homePage.CreateAppInWorkspace("Test Workspace");
-    });
-
     it("1. Building blocks tag is visible and open by default", () => {
       featureFlagIntercept({ release_drag_drop_building_blocks_enabled: true });
       agHelper
@@ -200,45 +194,7 @@ describe(
         });
     });
 
-    it("5. Should remove skeleton loader if /block API request fails", () => {
-      featureFlagIntercept({ release_drag_drop_building_blocks_enabled: true });
-
-      // simluating a failure in the /block API request
-      cy.intercept("POST", "/api/v1/applications/import/partial/block", {
-        statusCode: 500,
-        delay: 1000,
-        body: {},
-      }).as("blockImport");
-
-      const x = 600;
-      const y = 80;
-      // select this specific building block so the test works on release
-      const selector = sampleBuildingBlockData.selector;
-      cy.wait(500);
-      cy.get(selector)
-        .first()
-        .trigger("dragstart", { force: true })
-        .trigger("mousemove", x, y, { force: true });
-
-      const option = {
-        eventConstructor: "MouseEvent",
-        scrollBehavior: false,
-      } as any;
-
-      cy.get(explorerLocators.dropHere)
-        .trigger("mousemove", x, y, option)
-        .trigger("mousemove", x, y, option)
-        .trigger("mouseup", x, y, option);
-
-      // check that loading skeleton is present
-      PageLeftPane.assertPresence(sampleBuildingBlockData.skeletonLoaderName);
-      cy.wait("@blockImport").then(() => {
-        // check that the skeleton loader has been removed
-        PageLeftPane.assertAbsence(sampleBuildingBlockData.skeletonLoaderName);
-      });
-    });
-
-    it("6. Should drag and drop building block on canvas", () => {
+    it("5. Should drag and drop building block on canvas", () => {
       featureFlagIntercept({ release_drag_drop_building_blocks_enabled: true });
       // primary api call for dropping building blocks on canvas
       cy.intercept("POST", "/api/v1/applications/import/partial/block").as(

From c05dcbb5954b49fa4448064f08fc765232d9121d Mon Sep 17 00:00:00 2001
From: Jacques Ikot <jacquesikot@gmail.com>
Date: Mon, 13 May 2024 09:41:38 +0100
Subject: [PATCH 13/22] fix tests on release

---
 .../ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
index b6d978b18649..4d1c18b0b2f0 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
+++ b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
@@ -3,7 +3,6 @@ import { featureFlagIntercept } from "../../../../support/Objects/FeatureFlags";
 import {
   entityExplorer,
   agHelper,
-  homePage,
 } from "../../../../support/Objects/ObjectsCore";
 import { PageLeftPane } from "../../../../support/Pages/EditorNavigation";
 import explorerLocators from "../../../../locators/explorerlocators.json";

From d679225f17c7448bf1a0b00981cb96d8480e49db Mon Sep 17 00:00:00 2001
From: Jacques Ikot <jacquesikot@gmail.com>
Date: Wed, 15 May 2024 03:22:47 +0100
Subject: [PATCH 14/22] allow first building block to be dropped in test

---
 .../Drag_Drop_Building_Blocks_spec.ts         | 37 +++++++++++++------
 1 file changed, 26 insertions(+), 11 deletions(-)

diff --git a/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
index 4d1c18b0b2f0..cf5532aa6552 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
+++ b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
@@ -11,12 +11,6 @@ const MAX_BUILDING_BLOCKS_TO_DISPLAY = initialEntityCountForExplorerTag[
   "Building Blocks"
 ] as number;
 
-const sampleBuildingBlockData = {
-  skeletonLoaderName: "loading_edit_data",
-  mainContainerName: "con_main",
-  selector: ".t--widget-card-draggable-buildingblock-editdata",
-};
-
 describe(
   "Building blocks explorer tests",
   {
@@ -201,8 +195,8 @@ describe(
       );
       const x = 600;
       const y = 80;
-      // select this specific building block so the test works on release
-      const selector = sampleBuildingBlockData.selector;
+      // select the first building block in the list
+      const selector = ".t--widget-card-draggable-buildingblock";
       cy.wait(500);
       cy.get(selector)
         .first()
@@ -220,11 +214,32 @@ describe(
         .trigger("mouseup", x, y, option);
 
       // check that loading skeleton is present
-      PageLeftPane.assertPresence(sampleBuildingBlockData.skeletonLoaderName);
+      let buildingBlockName: string; // get the display name of the first building block
+      agHelper
+        .GetElement(entityExplorer._widgetTagBuildingBlocks)
+        .each(($widgetTag) => {
+          agHelper
+            .GetElement($widgetTag)
+            .find(entityExplorer._widgetCardTitle)
+            .each(($widgetName, index) => {
+              const value = $widgetName.text();
+              if (index === 0) {
+                buildingBlockName = value;
+              }
+            })
+            .then(() => {
+              PageLeftPane.assertPresence(
+                `loading_${buildingBlockName.toLowerCase().replace(/ /g, "_")}`,
+              );
+            });
+        });
       cy.wait("@blockImport").then(() => {
         cy.assertPageSave();
-        // check that the main container of the block has been added to the canvas
-        PageLeftPane.assertPresence(sampleBuildingBlockData.mainContainerName);
+        // check that the widgets are present on the canvas
+        agHelper.AssertElementVisibility('[data-testid="t--ide-list"]');
+        agHelper
+          .GetElement('[data-testid="t--ide-list"] .t--entity-item')
+          .should("have.length.greaterThan", 0);
       });
     });
   },

From 0d7683dfca0a8e754374cb9f8e17b6b5d81023f4 Mon Sep 17 00:00:00 2001
From: Jacques Ikot <jacquesikot@gmail.com>
Date: Wed, 15 May 2024 23:10:32 +0100
Subject: [PATCH 15/22] add and remove skeleton widget with no reflow base

---
 .../src/ce/constants/ReduxActionConstants.tsx |  2 +
 .../entityReducers/canvasWidgetsReducer.ts    | 50 +++++++++++++++++++
 .../canvasWidgetsStructureReducer.ts          | 20 ++++++++
 .../BuildingBlockAdditionSagas.ts             | 47 ++++++++---------
 .../sagas/CanvasSagas/DraggingCanvasSagas.ts  |  2 +-
 app/client/src/sagas/WidgetDeletionSagas.ts   | 20 ++++++++
 6 files changed, 114 insertions(+), 27 deletions(-)

diff --git a/app/client/src/ce/constants/ReduxActionConstants.tsx b/app/client/src/ce/constants/ReduxActionConstants.tsx
index 6d8aaf340ae7..4dc4e33fb3e0 100644
--- a/app/client/src/ce/constants/ReduxActionConstants.tsx
+++ b/app/client/src/ce/constants/ReduxActionConstants.tsx
@@ -248,6 +248,8 @@ const ActionTypes = {
   WIDGET_DELETE: "WIDGET_DELETE",
   WIDGET_BULK_DELETE: "WIDGET_BULK_DELETE",
   WIDGET_SINGLE_DELETE: "WIDGET_SINGLE_DELETE",
+  ADD_LOCAL_SKELETON_LOADER: "ADD_LOCAL_SKELETON_LOADER",
+  REMOVE_LOCAL_SKELETON_LOADER: "REMOVE_LOCAL_SKELETON_LOADER",
   SHOW_PROPERTY_PANE: "SHOW_PROPERTY_PANE",
   UPDATE_CANVAS_LAYOUT: "UPDATE_CANVAS_LAYOUT",
   UPDATE_WIDGET_PROPERTY_REQUEST: "UPDATE_WIDGET_PROPERTY_REQUEST",
diff --git a/app/client/src/reducers/entityReducers/canvasWidgetsReducer.ts b/app/client/src/reducers/entityReducers/canvasWidgetsReducer.ts
index 1e0afcbff829..e96b860da3df 100644
--- a/app/client/src/reducers/entityReducers/canvasWidgetsReducer.ts
+++ b/app/client/src/reducers/entityReducers/canvasWidgetsReducer.ts
@@ -69,6 +69,56 @@ const canvasWidgetsReducer = createImmerReducer(initialState, {
     }
     return widgets;
   },
+
+  [ReduxActionTypes.ADD_LOCAL_SKELETON_LOADER]: (
+    state: CanvasWidgetsReduxState,
+    action: ReduxAction<{
+      updatedWidgets: {
+        [widgetId: string]: FlattenedWidgetProps;
+      };
+    }>,
+  ) => {
+    const updatedLayoutDiffs = diff(state, action.payload.updatedWidgets);
+    if (!updatedLayoutDiffs) return state;
+
+    const listOfUpdatedWidgets = getUpdatedWidgetLists(updatedLayoutDiffs);
+
+    for (const widgetId of listOfUpdatedWidgets) {
+      const updatedWidget = action.payload.updatedWidgets[widgetId];
+      if (updatedWidget) {
+        state[widgetId] = updatedWidget;
+      }
+    }
+
+    const canvasWidgetHeightsToUpdate: Record<string, number> =
+      getCanvasWidgetHeightsToUpdate(listOfUpdatedWidgets, state);
+
+    for (const widgetId in canvasWidgetHeightsToUpdate) {
+      state[widgetId] = {
+        ...state[widgetId],
+        bottomRow: canvasWidgetHeightsToUpdate[widgetId],
+      };
+    }
+  },
+
+  [ReduxActionTypes.REMOVE_LOCAL_SKELETON_LOADER]: (
+    state: CanvasWidgetsReduxState,
+    action: ReduxAction<{
+      updatedWidgets: {
+        [widgetId: string]: FlattenedWidgetProps;
+      };
+    }>,
+  ) => {
+    const updatedLayoutDiffs = diff(state, action.payload.updatedWidgets);
+    if (!updatedLayoutDiffs) return state;
+
+    const listOfUpdatedWidgets = getUpdatedWidgetLists(updatedLayoutDiffs);
+
+    for (const widgetId of listOfUpdatedWidgets) {
+      delete state[widgetId];
+    }
+  },
+
   [ReduxActionTypes.UPDATE_LAYOUT]: (
     state: CanvasWidgetsReduxState,
     action: ReduxAction<UpdateCanvasPayload>,
diff --git a/app/client/src/reducers/entityReducers/canvasWidgetsStructureReducer.ts b/app/client/src/reducers/entityReducers/canvasWidgetsStructureReducer.ts
index b7b9021edc33..83b50b28add4 100644
--- a/app/client/src/reducers/entityReducers/canvasWidgetsStructureReducer.ts
+++ b/app/client/src/reducers/entityReducers/canvasWidgetsStructureReducer.ts
@@ -40,6 +40,26 @@ const canvasWidgetsStructureReducer = createImmerReducer(initialState, {
   ) => {
     return denormalize("0", action.payload.widgets);
   },
+  [ReduxActionTypes.ADD_LOCAL_SKELETON_LOADER]: (
+    state: CanvasWidgetsStructureReduxState,
+    action: ReduxAction<{
+      updatedWidgets: {
+        [widgetId: string]: FlattenedWidgetProps;
+      };
+    }>,
+  ) => {
+    return denormalize("0", action.payload.updatedWidgets);
+  },
+  [ReduxActionTypes.REMOVE_LOCAL_SKELETON_LOADER]: (
+    state: CanvasWidgetsStructureReduxState,
+    action: ReduxAction<{
+      updatedWidgets: {
+        [widgetId: string]: FlattenedWidgetProps;
+      };
+    }>,
+  ) => {
+    return denormalize("0", action.payload.updatedWidgets);
+  },
   [ReduxActionTypes.UPDATE_LAYOUT]: (
     state: CanvasWidgetsStructureReduxState,
     action: ReduxAction<UpdateCanvasPayload>,
diff --git a/app/client/src/sagas/BuildingBlockSagas/BuildingBlockAdditionSagas.ts b/app/client/src/sagas/BuildingBlockSagas/BuildingBlockAdditionSagas.ts
index 5231fc5874f2..48cc29309d47 100644
--- a/app/client/src/sagas/BuildingBlockSagas/BuildingBlockAdditionSagas.ts
+++ b/app/client/src/sagas/BuildingBlockSagas/BuildingBlockAdditionSagas.ts
@@ -79,6 +79,7 @@ import type { JSCollection } from "entities/JSCollection";
 import type { WidgetDraggingUpdateParams } from "layoutSystems/common/canvasArenas/ArenaTypes";
 import type { DragDetails } from "reducers/uiReducers/dragResizeReducer";
 import { race } from "redux-saga/effects";
+import { removeSkeletonLoaderFromCanvas } from "sagas/WidgetDeletionSagas";
 import { getBuildingBlockDragStartTimestamp } from "selectors/buildingBlocksSelectors";
 import {
   getCurrentApplicationId,
@@ -90,7 +91,7 @@ import { saveBuildingBlockWidgetsToStore } from ".";
 import { addWidgetAndMoveWidgetsSaga } from "../CanvasSagas/DraggingCanvasSagas";
 import { validateResponse } from "../ErrorSagas";
 import { postPageAdditionSaga } from "../TemplatesSagas";
-import { addChildSaga } from "../WidgetAdditionSagas";
+import { getUpdateDslAfterCreatingChild } from "../WidgetAdditionSagas";
 import { calculateNewWidgetPosition } from "../WidgetOperationSagas";
 import { getDragDetails, getWidgetByName } from "../selectors";
 
@@ -173,6 +174,22 @@ function* runNewlyCreatedActions(actions: string[]) {
   }
 }
 
+export function* addBuildingBlockSkeletonLoaderToCanvas(
+  addSkeletonAction: ReduxAction<WidgetAddChild>,
+) {
+  const updatedWidgets: {
+    [widgetId: string]: FlattenedWidgetProps;
+  } = yield call(getUpdateDslAfterCreatingChild, addSkeletonAction.payload);
+
+  yield put({
+    type: ReduxActionTypes.ADD_LOCAL_SKELETON_LOADER,
+    payload: {
+      updatedWidgets,
+      widgets: updatedWidgets,
+    },
+  });
+}
+
 export function* loadBuildingBlocksIntoApplication(
   buildingBlockWidget: WidgetAddChild,
   skeletonLoaderId: string,
@@ -192,16 +209,6 @@ export function* loadBuildingBlocksIntoApplication(
       type: ReduxActionTypes.DRAGGING_BUILDING_BLOCK_TO_CANVAS_INIT,
     });
 
-    // makes sure updateAndSaveLayout completes first for initial skeletonWidget addition
-    const saveResult: unknown = yield race({
-      success: take(ReduxActionTypes.SAVE_PAGE_SUCCESS),
-      failure: take(ReduxActionErrorTypes.SAVE_PAGE_ERROR),
-    });
-
-    if (typeof saveResult === "object" && "failure" in saveResult!) {
-      throw new Error("Save page failed");
-    }
-
     const response: ApiResponse<ImportBuildingBlockToApplicationResponse> =
       yield call(addBuildingBlockActionsToApplication, dragDetails);
     const isValid: boolean = yield validateResponse(response);
@@ -210,15 +217,7 @@ export function* loadBuildingBlocksIntoApplication(
       yield saveBuildingBlockWidgetsToStore(response);
 
       // remove skeleton loader just before pasting the building block
-      yield put({
-        type: WidgetReduxActionTypes.WIDGET_SINGLE_DELETE,
-        payload: {
-          widgetId: skeletonLoaderId,
-          parentId: MAIN_CONTAINER_WIDGET_ID,
-          disallowUndo: true,
-          isShortcut: false,
-        },
-      });
+      yield removeSkeletonLoaderFromCanvas(skeletonLoaderId);
 
       yield pasteBuildingBlockWidgetsSaga({
         top: topRow,
@@ -327,15 +326,11 @@ export function* addBuildingBlockToCanvasSaga(
     buildingblockName,
   });
 
-  yield call(addChildSaga, addSkeletonWidgetAction);
-  const skeletonWidget: FlattenedWidgetProps = yield select(
-    getWidgetByName,
-    skeletonWidgetName,
-  );
+  yield call(addBuildingBlockSkeletonLoaderToCanvas, addSkeletonWidgetAction);
   yield call(
     loadBuildingBlocksIntoApplication,
     addEntityAction.payload,
-    skeletonWidget.widgetId,
+    addEntityAction.payload.newWidgetId,
   );
 }
 
diff --git a/app/client/src/sagas/CanvasSagas/DraggingCanvasSagas.ts b/app/client/src/sagas/CanvasSagas/DraggingCanvasSagas.ts
index c15e445fc0ef..38b534dbc97c 100644
--- a/app/client/src/sagas/CanvasSagas/DraggingCanvasSagas.ts
+++ b/app/client/src/sagas/CanvasSagas/DraggingCanvasSagas.ts
@@ -204,7 +204,7 @@ export function* addWidgetAndMoveWidgetsSaga(
   }
 }
 
-function* addWidgetAndMoveWidgets(
+export function* addWidgetAndMoveWidgets(
   newWidget: WidgetAddChild,
   draggedBlocksToUpdate: WidgetDraggingUpdateParams[],
   canvasId: string,
diff --git a/app/client/src/sagas/WidgetDeletionSagas.ts b/app/client/src/sagas/WidgetDeletionSagas.ts
index 9dfb8110c997..dd84bd9008fb 100644
--- a/app/client/src/sagas/WidgetDeletionSagas.ts
+++ b/app/client/src/sagas/WidgetDeletionSagas.ts
@@ -212,6 +212,26 @@ function* getUpdatedDslAfterDeletingWidget(widgetId: string, parentId: string) {
   }
 }
 
+export function* removeSkeletonLoaderFromCanvas(widgetId: string) {
+  const updatedObj: UpdatedDSLPostDelete = yield call(
+    getUpdatedDslAfterDeletingWidget,
+    widgetId,
+    "0",
+  );
+
+  if (updatedObj) {
+    const { finalWidgets } = updatedObj;
+    const finalData: CanvasWidgetsReduxState = finalWidgets;
+
+    yield put({
+      type: ReduxActionTypes.REMOVE_LOCAL_SKELETON_LOADER,
+      payload: {
+        updatedWidgets: finalData,
+      },
+    });
+  }
+}
+
 function* deleteSaga(deleteAction: ReduxAction<WidgetDelete>) {
   try {
     let { parentId, widgetId } = deleteAction.payload;

From b9b2b618fdf8b948ae4c240e9ebcea1c17043886 Mon Sep 17 00:00:00 2001
From: Jacques Ikot <jacquesikot@gmail.com>
Date: Wed, 15 May 2024 23:23:43 +0100
Subject: [PATCH 16/22] Revert "add and remove skeleton widget with no reflow
 base"

This reverts commit 0d7683dfca0a8e754374cb9f8e17b6b5d81023f4.
---
 .../src/ce/constants/ReduxActionConstants.tsx |  2 -
 .../entityReducers/canvasWidgetsReducer.ts    | 50 -------------------
 .../canvasWidgetsStructureReducer.ts          | 20 --------
 .../BuildingBlockAdditionSagas.ts             | 47 +++++++++--------
 .../sagas/CanvasSagas/DraggingCanvasSagas.ts  |  2 +-
 app/client/src/sagas/WidgetDeletionSagas.ts   | 20 --------
 6 files changed, 27 insertions(+), 114 deletions(-)

diff --git a/app/client/src/ce/constants/ReduxActionConstants.tsx b/app/client/src/ce/constants/ReduxActionConstants.tsx
index 4dc4e33fb3e0..6d8aaf340ae7 100644
--- a/app/client/src/ce/constants/ReduxActionConstants.tsx
+++ b/app/client/src/ce/constants/ReduxActionConstants.tsx
@@ -248,8 +248,6 @@ const ActionTypes = {
   WIDGET_DELETE: "WIDGET_DELETE",
   WIDGET_BULK_DELETE: "WIDGET_BULK_DELETE",
   WIDGET_SINGLE_DELETE: "WIDGET_SINGLE_DELETE",
-  ADD_LOCAL_SKELETON_LOADER: "ADD_LOCAL_SKELETON_LOADER",
-  REMOVE_LOCAL_SKELETON_LOADER: "REMOVE_LOCAL_SKELETON_LOADER",
   SHOW_PROPERTY_PANE: "SHOW_PROPERTY_PANE",
   UPDATE_CANVAS_LAYOUT: "UPDATE_CANVAS_LAYOUT",
   UPDATE_WIDGET_PROPERTY_REQUEST: "UPDATE_WIDGET_PROPERTY_REQUEST",
diff --git a/app/client/src/reducers/entityReducers/canvasWidgetsReducer.ts b/app/client/src/reducers/entityReducers/canvasWidgetsReducer.ts
index e96b860da3df..1e0afcbff829 100644
--- a/app/client/src/reducers/entityReducers/canvasWidgetsReducer.ts
+++ b/app/client/src/reducers/entityReducers/canvasWidgetsReducer.ts
@@ -69,56 +69,6 @@ const canvasWidgetsReducer = createImmerReducer(initialState, {
     }
     return widgets;
   },
-
-  [ReduxActionTypes.ADD_LOCAL_SKELETON_LOADER]: (
-    state: CanvasWidgetsReduxState,
-    action: ReduxAction<{
-      updatedWidgets: {
-        [widgetId: string]: FlattenedWidgetProps;
-      };
-    }>,
-  ) => {
-    const updatedLayoutDiffs = diff(state, action.payload.updatedWidgets);
-    if (!updatedLayoutDiffs) return state;
-
-    const listOfUpdatedWidgets = getUpdatedWidgetLists(updatedLayoutDiffs);
-
-    for (const widgetId of listOfUpdatedWidgets) {
-      const updatedWidget = action.payload.updatedWidgets[widgetId];
-      if (updatedWidget) {
-        state[widgetId] = updatedWidget;
-      }
-    }
-
-    const canvasWidgetHeightsToUpdate: Record<string, number> =
-      getCanvasWidgetHeightsToUpdate(listOfUpdatedWidgets, state);
-
-    for (const widgetId in canvasWidgetHeightsToUpdate) {
-      state[widgetId] = {
-        ...state[widgetId],
-        bottomRow: canvasWidgetHeightsToUpdate[widgetId],
-      };
-    }
-  },
-
-  [ReduxActionTypes.REMOVE_LOCAL_SKELETON_LOADER]: (
-    state: CanvasWidgetsReduxState,
-    action: ReduxAction<{
-      updatedWidgets: {
-        [widgetId: string]: FlattenedWidgetProps;
-      };
-    }>,
-  ) => {
-    const updatedLayoutDiffs = diff(state, action.payload.updatedWidgets);
-    if (!updatedLayoutDiffs) return state;
-
-    const listOfUpdatedWidgets = getUpdatedWidgetLists(updatedLayoutDiffs);
-
-    for (const widgetId of listOfUpdatedWidgets) {
-      delete state[widgetId];
-    }
-  },
-
   [ReduxActionTypes.UPDATE_LAYOUT]: (
     state: CanvasWidgetsReduxState,
     action: ReduxAction<UpdateCanvasPayload>,
diff --git a/app/client/src/reducers/entityReducers/canvasWidgetsStructureReducer.ts b/app/client/src/reducers/entityReducers/canvasWidgetsStructureReducer.ts
index 83b50b28add4..b7b9021edc33 100644
--- a/app/client/src/reducers/entityReducers/canvasWidgetsStructureReducer.ts
+++ b/app/client/src/reducers/entityReducers/canvasWidgetsStructureReducer.ts
@@ -40,26 +40,6 @@ const canvasWidgetsStructureReducer = createImmerReducer(initialState, {
   ) => {
     return denormalize("0", action.payload.widgets);
   },
-  [ReduxActionTypes.ADD_LOCAL_SKELETON_LOADER]: (
-    state: CanvasWidgetsStructureReduxState,
-    action: ReduxAction<{
-      updatedWidgets: {
-        [widgetId: string]: FlattenedWidgetProps;
-      };
-    }>,
-  ) => {
-    return denormalize("0", action.payload.updatedWidgets);
-  },
-  [ReduxActionTypes.REMOVE_LOCAL_SKELETON_LOADER]: (
-    state: CanvasWidgetsStructureReduxState,
-    action: ReduxAction<{
-      updatedWidgets: {
-        [widgetId: string]: FlattenedWidgetProps;
-      };
-    }>,
-  ) => {
-    return denormalize("0", action.payload.updatedWidgets);
-  },
   [ReduxActionTypes.UPDATE_LAYOUT]: (
     state: CanvasWidgetsStructureReduxState,
     action: ReduxAction<UpdateCanvasPayload>,
diff --git a/app/client/src/sagas/BuildingBlockSagas/BuildingBlockAdditionSagas.ts b/app/client/src/sagas/BuildingBlockSagas/BuildingBlockAdditionSagas.ts
index 48cc29309d47..5231fc5874f2 100644
--- a/app/client/src/sagas/BuildingBlockSagas/BuildingBlockAdditionSagas.ts
+++ b/app/client/src/sagas/BuildingBlockSagas/BuildingBlockAdditionSagas.ts
@@ -79,7 +79,6 @@ import type { JSCollection } from "entities/JSCollection";
 import type { WidgetDraggingUpdateParams } from "layoutSystems/common/canvasArenas/ArenaTypes";
 import type { DragDetails } from "reducers/uiReducers/dragResizeReducer";
 import { race } from "redux-saga/effects";
-import { removeSkeletonLoaderFromCanvas } from "sagas/WidgetDeletionSagas";
 import { getBuildingBlockDragStartTimestamp } from "selectors/buildingBlocksSelectors";
 import {
   getCurrentApplicationId,
@@ -91,7 +90,7 @@ import { saveBuildingBlockWidgetsToStore } from ".";
 import { addWidgetAndMoveWidgetsSaga } from "../CanvasSagas/DraggingCanvasSagas";
 import { validateResponse } from "../ErrorSagas";
 import { postPageAdditionSaga } from "../TemplatesSagas";
-import { getUpdateDslAfterCreatingChild } from "../WidgetAdditionSagas";
+import { addChildSaga } from "../WidgetAdditionSagas";
 import { calculateNewWidgetPosition } from "../WidgetOperationSagas";
 import { getDragDetails, getWidgetByName } from "../selectors";
 
@@ -174,22 +173,6 @@ function* runNewlyCreatedActions(actions: string[]) {
   }
 }
 
-export function* addBuildingBlockSkeletonLoaderToCanvas(
-  addSkeletonAction: ReduxAction<WidgetAddChild>,
-) {
-  const updatedWidgets: {
-    [widgetId: string]: FlattenedWidgetProps;
-  } = yield call(getUpdateDslAfterCreatingChild, addSkeletonAction.payload);
-
-  yield put({
-    type: ReduxActionTypes.ADD_LOCAL_SKELETON_LOADER,
-    payload: {
-      updatedWidgets,
-      widgets: updatedWidgets,
-    },
-  });
-}
-
 export function* loadBuildingBlocksIntoApplication(
   buildingBlockWidget: WidgetAddChild,
   skeletonLoaderId: string,
@@ -209,6 +192,16 @@ export function* loadBuildingBlocksIntoApplication(
       type: ReduxActionTypes.DRAGGING_BUILDING_BLOCK_TO_CANVAS_INIT,
     });
 
+    // makes sure updateAndSaveLayout completes first for initial skeletonWidget addition
+    const saveResult: unknown = yield race({
+      success: take(ReduxActionTypes.SAVE_PAGE_SUCCESS),
+      failure: take(ReduxActionErrorTypes.SAVE_PAGE_ERROR),
+    });
+
+    if (typeof saveResult === "object" && "failure" in saveResult!) {
+      throw new Error("Save page failed");
+    }
+
     const response: ApiResponse<ImportBuildingBlockToApplicationResponse> =
       yield call(addBuildingBlockActionsToApplication, dragDetails);
     const isValid: boolean = yield validateResponse(response);
@@ -217,7 +210,15 @@ export function* loadBuildingBlocksIntoApplication(
       yield saveBuildingBlockWidgetsToStore(response);
 
       // remove skeleton loader just before pasting the building block
-      yield removeSkeletonLoaderFromCanvas(skeletonLoaderId);
+      yield put({
+        type: WidgetReduxActionTypes.WIDGET_SINGLE_DELETE,
+        payload: {
+          widgetId: skeletonLoaderId,
+          parentId: MAIN_CONTAINER_WIDGET_ID,
+          disallowUndo: true,
+          isShortcut: false,
+        },
+      });
 
       yield pasteBuildingBlockWidgetsSaga({
         top: topRow,
@@ -326,11 +327,15 @@ export function* addBuildingBlockToCanvasSaga(
     buildingblockName,
   });
 
-  yield call(addBuildingBlockSkeletonLoaderToCanvas, addSkeletonWidgetAction);
+  yield call(addChildSaga, addSkeletonWidgetAction);
+  const skeletonWidget: FlattenedWidgetProps = yield select(
+    getWidgetByName,
+    skeletonWidgetName,
+  );
   yield call(
     loadBuildingBlocksIntoApplication,
     addEntityAction.payload,
-    addEntityAction.payload.newWidgetId,
+    skeletonWidget.widgetId,
   );
 }
 
diff --git a/app/client/src/sagas/CanvasSagas/DraggingCanvasSagas.ts b/app/client/src/sagas/CanvasSagas/DraggingCanvasSagas.ts
index 38b534dbc97c..c15e445fc0ef 100644
--- a/app/client/src/sagas/CanvasSagas/DraggingCanvasSagas.ts
+++ b/app/client/src/sagas/CanvasSagas/DraggingCanvasSagas.ts
@@ -204,7 +204,7 @@ export function* addWidgetAndMoveWidgetsSaga(
   }
 }
 
-export function* addWidgetAndMoveWidgets(
+function* addWidgetAndMoveWidgets(
   newWidget: WidgetAddChild,
   draggedBlocksToUpdate: WidgetDraggingUpdateParams[],
   canvasId: string,
diff --git a/app/client/src/sagas/WidgetDeletionSagas.ts b/app/client/src/sagas/WidgetDeletionSagas.ts
index dd84bd9008fb..9dfb8110c997 100644
--- a/app/client/src/sagas/WidgetDeletionSagas.ts
+++ b/app/client/src/sagas/WidgetDeletionSagas.ts
@@ -212,26 +212,6 @@ function* getUpdatedDslAfterDeletingWidget(widgetId: string, parentId: string) {
   }
 }
 
-export function* removeSkeletonLoaderFromCanvas(widgetId: string) {
-  const updatedObj: UpdatedDSLPostDelete = yield call(
-    getUpdatedDslAfterDeletingWidget,
-    widgetId,
-    "0",
-  );
-
-  if (updatedObj) {
-    const { finalWidgets } = updatedObj;
-    const finalData: CanvasWidgetsReduxState = finalWidgets;
-
-    yield put({
-      type: ReduxActionTypes.REMOVE_LOCAL_SKELETON_LOADER,
-      payload: {
-        updatedWidgets: finalData,
-      },
-    });
-  }
-}
-
 function* deleteSaga(deleteAction: ReduxAction<WidgetDelete>) {
   try {
     let { parentId, widgetId } = deleteAction.payload;

From 791f542554a400fba3ed391a0c06e69d809b1739 Mon Sep 17 00:00:00 2001
From: Jacques Ikot <jacquesikot@gmail.com>
Date: Wed, 15 May 2024 23:26:14 +0100
Subject: [PATCH 17/22] revert changes

---
 .../ExplorerTests/Drag_Drop_Building_Blocks_spec.ts       | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
index cf5532aa6552..6c747fe1dd74 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
+++ b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
@@ -197,8 +197,9 @@ describe(
       const y = 80;
       // select the first building block in the list
       const selector = ".t--widget-card-draggable-buildingblock";
-      cy.wait(500);
-      cy.get(selector)
+      agHelper.Sleep(500);
+      agHelper
+        .GetElement(selector)
         .first()
         .trigger("dragstart", { force: true })
         .trigger("mousemove", x, y, { force: true });
@@ -208,7 +209,8 @@ describe(
         scrollBehavior: false,
       } as any;
 
-      cy.get(explorerLocators.dropHere)
+      agHelper
+        .GetElement(explorerLocators.dropHere)
         .trigger("mousemove", x, y, option)
         .trigger("mousemove", x, y, option)
         .trigger("mouseup", x, y, option);

From 2b8f502295794aff1c5ecb267139ab02f5955364 Mon Sep 17 00:00:00 2001
From: Jacques Ikot <jacquesikot@gmail.com>
Date: Fri, 17 May 2024 11:12:31 +0100
Subject: [PATCH 18/22] fix .each redundancy

---
 .../ExplorerTests/Drag_Drop_Building_Blocks_spec.ts | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
index 6c747fe1dd74..e0f6bfbad26b 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
+++ b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
@@ -219,17 +219,14 @@ describe(
       let buildingBlockName: string; // get the display name of the first building block
       agHelper
         .GetElement(entityExplorer._widgetTagBuildingBlocks)
-        .each(($widgetTag) => {
+        .first()
+        .then(($widgetTag) => {
           agHelper
             .GetElement($widgetTag)
             .find(entityExplorer._widgetCardTitle)
-            .each(($widgetName, index) => {
-              const value = $widgetName.text();
-              if (index === 0) {
-                buildingBlockName = value;
-              }
-            })
-            .then(() => {
+            .first()
+            .then(($widgetName) => {
+              buildingBlockName = $widgetName.text();
               PageLeftPane.assertPresence(
                 `loading_${buildingBlockName.toLowerCase().replace(/ /g, "_")}`,
               );

From 0a9bd7251b0f674c88cc033dd6010180560a8875 Mon Sep 17 00:00:00 2001
From: Jacques Ikot <jacquesikot@gmail.com>
Date: Fri, 17 May 2024 11:31:59 +0100
Subject: [PATCH 19/22] exculde for airgap and extract bb selector to testId

---
 .../ExplorerTests/Drag_Drop_Building_Blocks_spec.ts      | 9 +++++++--
 app/client/src/pages/Editor/widgetSidebar/WidgetCard.tsx | 4 +++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
index e0f6bfbad26b..f26f0e342c08 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
+++ b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
@@ -14,7 +14,12 @@ const MAX_BUILDING_BLOCKS_TO_DISPLAY = initialEntityCountForExplorerTag[
 describe(
   "Building blocks explorer tests",
   {
-    tags: ["@tag.IDE", "@tag.Widget", "@tag.Templates"],
+    tags: [
+      "@tag.IDE",
+      "@tag.Widget",
+      "@tag.Templates",
+      "@tag.excludeForAirgap",
+    ],
   },
   () => {
     it("1. Building blocks tag is visible and open by default", () => {
@@ -187,7 +192,7 @@ describe(
         });
     });
 
-    it("5. Should drag and drop building block on canvas", () => {
+    it.only("5. Should drag and drop building block on canvas", () => {
       featureFlagIntercept({ release_drag_drop_building_blocks_enabled: true });
       // primary api call for dropping building blocks on canvas
       cy.intercept("POST", "/api/v1/applications/import/partial/block").as(
diff --git a/app/client/src/pages/Editor/widgetSidebar/WidgetCard.tsx b/app/client/src/pages/Editor/widgetSidebar/WidgetCard.tsx
index a4c721c023e2..082b4c2b4b0f 100644
--- a/app/client/src/pages/Editor/widgetSidebar/WidgetCard.tsx
+++ b/app/client/src/pages/Editor/widgetSidebar/WidgetCard.tsx
@@ -85,13 +85,15 @@ function WidgetCardComponent({
 }) {
   const type = `${details.type.split("_").join("").toLowerCase()}`;
   const displayName = details.displayName.split(" ").join("").toLowerCase();
-  const className = `t--widget-card-draggable t--widget-card-draggable-${type} ${details.type === BUILDING_BLOCK_EXPLORER_TYPE ? `t--widget-card-draggable-${type}-${displayName}` : ""}`;
+  const className = `t--widget-card-draggable t--widget-card-draggable-${type}`;
+  const explorerTestId = `t--widget-card-draggable-${type}-${displayName}`;
   const { ThumbnailCmp } = details;
 
   return (
     <Wrapper
       className={className}
       data-guided-tour-id={`widget-card-${type}`}
+      data-testid={explorerTestId}
       draggable
       id={`widget-card-draggable-${type}`}
       onDragStart={onDragStart}

From f99d7144006be43f3711650ff9b4c69c42f624bf Mon Sep 17 00:00:00 2001
From: Jacques Ikot <jacquesikot@gmail.com>
Date: Fri, 17 May 2024 13:03:19 +0100
Subject: [PATCH 20/22] remove var

---
 app/client/src/pages/Editor/widgetSidebar/WidgetCard.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/client/src/pages/Editor/widgetSidebar/WidgetCard.tsx b/app/client/src/pages/Editor/widgetSidebar/WidgetCard.tsx
index 082b4c2b4b0f..7f55878f92dd 100644
--- a/app/client/src/pages/Editor/widgetSidebar/WidgetCard.tsx
+++ b/app/client/src/pages/Editor/widgetSidebar/WidgetCard.tsx
@@ -86,14 +86,13 @@ function WidgetCardComponent({
   const type = `${details.type.split("_").join("").toLowerCase()}`;
   const displayName = details.displayName.split(" ").join("").toLowerCase();
   const className = `t--widget-card-draggable t--widget-card-draggable-${type}`;
-  const explorerTestId = `t--widget-card-draggable-${type}-${displayName}`;
   const { ThumbnailCmp } = details;
 
   return (
     <Wrapper
       className={className}
       data-guided-tour-id={`widget-card-${type}`}
-      data-testid={explorerTestId}
+      data-testid={`t--widget-card-draggable-${type}-${displayName}`}
       draggable
       id={`widget-card-draggable-${type}`}
       onDragStart={onDragStart}

From ea02ee19f0f0536acd1b630b1e0a500ba2e5192c Mon Sep 17 00:00:00 2001
From: Jacques Ikot <jacquesikot@gmail.com>
Date: Fri, 17 May 2024 14:06:09 +0100
Subject: [PATCH 21/22] remove testid

---
 app/client/src/pages/Editor/widgetSidebar/WidgetCard.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/client/src/pages/Editor/widgetSidebar/WidgetCard.tsx b/app/client/src/pages/Editor/widgetSidebar/WidgetCard.tsx
index 7f55878f92dd..b6eba65f17e4 100644
--- a/app/client/src/pages/Editor/widgetSidebar/WidgetCard.tsx
+++ b/app/client/src/pages/Editor/widgetSidebar/WidgetCard.tsx
@@ -84,7 +84,6 @@ function WidgetCardComponent({
   onDragStart?: (e: any) => void;
 }) {
   const type = `${details.type.split("_").join("").toLowerCase()}`;
-  const displayName = details.displayName.split(" ").join("").toLowerCase();
   const className = `t--widget-card-draggable t--widget-card-draggable-${type}`;
   const { ThumbnailCmp } = details;
 
@@ -92,7 +91,6 @@ function WidgetCardComponent({
     <Wrapper
       className={className}
       data-guided-tour-id={`widget-card-${type}`}
-      data-testid={`t--widget-card-draggable-${type}-${displayName}`}
       draggable
       id={`widget-card-draggable-${type}`}
       onDragStart={onDragStart}

From 07eaa5e8e92a2ac5fb740cd3646140d1b28ae468 Mon Sep 17 00:00:00 2001
From: Jacques Ikot <jacquesikot@gmail.com>
Date: Fri, 17 May 2024 18:11:59 +0100
Subject: [PATCH 22/22] remove focued test

---
 .../ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
index f26f0e342c08..b2a50cb6f6a9 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
+++ b/app/client/cypress/e2e/Regression/ClientSide/ExplorerTests/Drag_Drop_Building_Blocks_spec.ts
@@ -192,7 +192,7 @@ describe(
         });
     });
 
-    it.only("5. Should drag and drop building block on canvas", () => {
+    it("5. Should drag and drop building block on canvas", () => {
       featureFlagIntercept({ release_drag_drop_building_blocks_enabled: true });
       // primary api call for dropping building blocks on canvas
       cy.intercept("POST", "/api/v1/applications/import/partial/block").as(