fix: paste widgets on a new page (#14295)

* paste widget on generate Page

* adding cypress tests

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/WidgetCopyPaste/WidgetCopyPaste_spec.js

@@ -2,6 +2,7 @@ const widgetsPage = require("../../../../locators/Widgets.json");
 const commonLocators = require("../../../../locators/commonlocators.json");
 const explorer = require("../../../../locators/explorerlocators.json");
 const dsl = require("../../../../fixtures/WidgetCopyPaste.json");
+const generatePage = require("../../../../locators/GeneratePage.json");
 
 describe("Widget Copy paste", function() {
   const modifierKey = Cypress.platform === "darwin" ? "meta" : "ctrl";
@@ -152,4 +153,17 @@ describe("Widget Copy paste", function() {
       .find(widgetsPage.listWidget)
       .should("have.length", 0);
   });
+
+  it("should be able to paste widget on the initial generate Page", function() {
+    cy.Createpage("NewPage", false);
+
+    //verify that it is in generate page
+    cy.get(generatePage.buildFromScratchActionCard).should("have.length", 1);
+
+    //paste
+    cy.get("body").type(`{${modifierKey}}{v}`);
+
+    //verify a pasted list widget
+    cy.get(widgetsPage.listWidget).should("have.length", 1);
+  });
 });

app/client/cypress/support/widgetCommands.js

@@ -716,7 +716,7 @@ Cypress.Commands.add("DeleteModal", () => {
     .click({ force: true });
 });
 
-Cypress.Commands.add("Createpage", (pageName) => {
+Cypress.Commands.add("Createpage", (pageName, navigateToCanvasPage = true) => {
   let pageId;
   cy.get(pages.AddPage)
     .first()
@@ -734,7 +734,9 @@ Cypress.Commands.add("Createpage", (pageName) => {
       pageidcopy = pageName;
       cy.wrap(pageId).as("currentPageId");
     }
-    cy.get(generatePage.buildFromScratchActionCard).click();
+    if (navigateToCanvasPage) {
+      cy.get(generatePage.buildFromScratchActionCard).click();
+    }
     cy.get("#loading").should("not.exist");
   });
 });

app/client/src/constants/routes.ts

@@ -74,6 +74,9 @@ export const matchViewerForkPath = (pathName: string) =>
   match(`${VIEWER_PATH_DEPRECATED}${VIEWER_FORK_PATH}`)(pathName);
 export const matchTemplatesPath = match(TEMPLATES_PATH);
 export const matchTemplatesIdPath = match(TEMPLATES_ID_PATH);
+export const matchGeneratePagePath = (pathName: string) =>
+  match(`${BUILDER_PATH}${GENERATE_TEMPLATE_PATH}`)(pathName) ||
+  match(`${BUILDER_PATH_DEPRECATED}${GENERATE_TEMPLATE_PATH}`)(pathName);
 
 export const addBranchParam = (branch: string) => {
   const url = new URL(window.location.href);

app/client/src/pages/Editor/GlobalHotKeys/GlobalHotKeys.tsx

@@ -50,7 +50,7 @@ import { getExplorerPinned } from "selectors/explorerSelector";
 import { setExplorerPinnedAction } from "actions/explorerActions";
 import { setIsGitSyncModalOpen } from "actions/gitSyncActions";
 import { GitSyncModalTab } from "entities/GitSync";
-import { matchBuilderPath } from "constants/routes";
+import { matchBuilderPath, matchGeneratePagePath } from "constants/routes";
 import { commentModeSelector } from "selectors/commentsSelectors";
 
 type Props = {
@@ -216,9 +216,14 @@ class GlobalHotKeys extends React.Component<Props> {
           group="Canvas"
           label="Paste Widget"
           onKeyDown={() => {
-            this.props.pasteCopiedWidget(
+            if (
-              this.props.getMousePosition() || { x: 0, y: 0 },
+              matchBuilderPath(window.location.pathname) ||
-            );
+              matchGeneratePagePath(window.location.pathname)
+            ) {
+              this.props.pasteCopiedWidget(
+                this.props.getMousePosition() || { x: 0, y: 0 },
+              );
+            }
           }}
         />
         <Hotkey

app/client/src/sagas/WidgetOperationSagas.tsx

@@ -139,6 +139,9 @@ import { reflow } from "reflow";
 import { getBottomMostRow } from "reflow/reflowUtils";
 import { flashElementsById } from "utils/helpers";
 import { getSlidingCanvasName } from "constants/componentClassNameConstants";
+import { matchGeneratePagePath } from "constants/routes";
+import { builderURL } from "RouteBuilder";
+import history from "utils/history";
 
 export function* resizeSaga(resizeAction: ReduxAction<WidgetResize>) {
   try {
@@ -1538,6 +1541,14 @@ function* pasteWidgetSaga(
 
   yield put(updateAndSaveLayout(reflowedWidgets));
 
+  if (
+    copiedWidgetGroups &&
+    copiedWidgetGroups.length > 0 &&
+    matchGeneratePagePath(window.location.pathname)
+  ) {
+    history.push(builderURL());
+  }
+
   yield put({
     type: ReduxActionTypes.RECORD_RECENTLY_ADDED_WIDGET,
     payload: newlyCreatedWidgetIds,