chore: Updating generate page interaction to show it in a modal following the IDE 2.0 interaction pattern

app/client/cypress/e2e/Regression/ServerSide/GenerateCRUD/MySQL1_Spec.ts

@@ -47,6 +47,7 @@ describe(
         dataSources._dropdownOption,
         "worldCountryInfo",
       );
+      agHelper.GetNClick(dataSources._generatePageBtn);
 
       GenerateCRUDNValidateDeployPage("ABW", "Aruba", "North America", "Code");
 
@@ -93,6 +94,7 @@ describe(
       assertHelper.AssertNetworkStatus("@getDatasourceStructure"); //Making sure table dropdown is populated
       agHelper.GetNClick(dataSources._selectTableDropdown, 0, true);
       agHelper.GetNClickByContains(dataSources._dropdownOption, "customers");
+      agHelper.GetNClick(dataSources._generatePageBtn);
 
       GenerateCRUDNValidateDeployPage(
         "103",
@@ -110,6 +112,7 @@ describe(
     it("3. Generate CRUD page from datasource present in ACTIVE section", function () {
       EditorNavigation.SelectEntityByName(dsName, EntityType.Datasource);
       dataSources.SelectTableFromPreviewSchemaList("employees");
+      agHelper.GetNClick(dataSources._datasourceCardGeneratePageBtn);
 
       GenerateCRUDNValidateDeployPage(
         "1002",
@@ -311,9 +314,6 @@ describe(
       col3Text: string,
       jsonFromHeader: string,
     ) {
-      agHelper.GetNClick(
-        `${dataSources._generatePageBtn}, ${dataSources._datasourceCardGeneratePageBtn}`,
-      );
       assertHelper.AssertNetworkStatus("@replaceLayoutWithCRUDPage", 201);
       agHelper.AssertContains("Successfully generated a page");
       //assertHelper.AssertNetworkStatus("@getActions", 200);//Since failing sometimes

app/client/cypress/e2e/Regression/ServerSide/GenerateCRUD/MySQL2_Spec.ts

@@ -399,9 +399,7 @@ describe(
       col3Text: string,
       jsonFromHeader: string,
     ) {
-      agHelper.GetNClick(
-        `${dataSources._generatePageBtn}, ${dataSources._datasourceCardGeneratePageBtn}`,
-      );
+      agHelper.GetNClick(dataSources._datasourceCardGeneratePageBtn);
       assertHelper.AssertNetworkStatus("@replaceLayoutWithCRUDPage", 201);
       agHelper.AssertContains("Successfully generated a page");
       //assertHelper.AssertNetworkStatus("@getActions", 200);//Since failing sometimes

app/client/cypress/e2e/Regression/ServerSide/GenerateCRUD/Postgres1_Spec.ts

@@ -38,6 +38,7 @@ describe(
       assertHelper.AssertNetworkStatus("@getDatasourceStructure"); //Making sure table dropdown is populated
       agHelper.GetNClick(dataSources._selectTableDropdown, 0, true);
       agHelper.GetNClickByContains(dataSources._dropdownOption, "film");
+      agHelper.GetNClick(dataSources._generatePageBtn);
 
       GenerateCRUDNValidateDeployPage(
         "ACADEMY DINOSAUR",
@@ -86,6 +87,7 @@ describe(
       assertHelper.AssertNetworkStatus("@getDatasourceStructure"); //Making sure table dropdown is populated
       agHelper.GetNClick(dataSources._selectTableDropdown, 0, true);
       agHelper.GetNClickByContains(dataSources._dropdownOption, "suppliers");
+      agHelper.GetNClick(dataSources._generatePageBtn);
 
       GenerateCRUDNValidateDeployPage(
         "Exotic Liquids",
@@ -104,6 +106,7 @@ describe(
     it("3. Generate CRUD page from datasource present in ACTIVE section", function () {
       EditorNavigation.SelectEntityByName(dsName, EntityType.Datasource);
       dataSources.SelectTableFromPreviewSchemaList("public.orders");
+      agHelper.GetNClick(dataSources._datasourceCardGeneratePageBtn);
 
       GenerateCRUDNValidateDeployPage(
         "VINET",
@@ -135,9 +138,6 @@ describe(
       col3Text: string,
       jsonFromHeader: string,
     ) {
-      agHelper.GetNClick(
-        `${dataSources._generatePageBtn}, ${dataSources._datasourceCardGeneratePageBtn}`,
-      );
       assertHelper.AssertNetworkStatus("@replaceLayoutWithCRUDPage", 201);
       agHelper.AssertContains("Successfully generated a page");
       //assertHelper.AssertNetworkStatus("@getActions", 200);//Since failing sometimes

app/client/cypress/e2e/Regression/ServerSide/GenerateCRUD/S3_Spec.js

@@ -52,7 +52,7 @@ describe(
         200,
       );
 
-      agHelper.AssertContains("Generate from data");
+      agHelper.AssertContains("Generate page from data");
       agHelper.GetNClick(generatePage.selectTableDropdown);
       agHelper.GetNClickByContains(
         generatePage.dropdownOption,

app/client/src/ce/RouteBuilder.ts

@@ -1,8 +1,6 @@
 import {
   ADD_PATH,
   ADMIN_SETTINGS_PATH,
-  GEN_TEMPLATE_FORM_ROUTE,
-  GEN_TEMPLATE_URL,
   getViewerCustomPath,
   getViewerPath,
   TEMPLATES_PATH,
@@ -122,12 +120,6 @@ export const saasEditorApiIdURL = (
     }`,
   });
 
-export const generateTemplateFormURL = (props: URLBuilderParams): string =>
-  urlBuilder.build({
-    ...props,
-    suffix: `${GEN_TEMPLATE_URL}${GEN_TEMPLATE_FORM_ROUTE}`,
-  });
-
 export const onboardingCheckListUrl = (props: URLBuilderParams): string =>
   urlBuilder.build({
     ...props,

app/client/src/ce/constants/ReduxActionConstants.tsx

@@ -1070,6 +1070,17 @@ const CurlImportActionErrorTypes = {
   SUBMIT_CURL_FORM_ERROR: "SUBMIT_CURL_FORM_ERROR",
 };
 
+const GeneratePageActionTypes = {
+  SET_GENERATE_PAGE_MODAL_OPEN: "SET_GENERATE_PAGE_MODAL_OPEN",
+  SET_GENERATE_PAGE_MODAL_CLOSE: "SET_GENERATE_PAGE_MODAL_CLOSE",
+  SUBMIT_GENERATE_PAGE_FORM_INIT: "SUBMIT_GENERATE_PAGE_FORM_INIT",
+  SUBMIT_GENERATE_PAGE_FORM_SUCCESS: "SUBMIT_GENERATE_PAGE_FORM_SUCCESS",
+};
+
+const GeneratePageActionErrorTypes = {
+  SUBMIT_GENERATE_PAGE_FORM_ERROR: "SUBMIT_GENERATE_PAGE_FORM_ERROR",
+};
+
 const BatchUpdateActionTypes = {
   BATCHED_UPDATE: "BATCHED_UPDATE",
   EXECUTE_BATCH: "EXECUTE_BATCH",
@@ -1276,12 +1287,13 @@ export const ReduxActionTypes = {
   ...AppSettingsActionTypes,
   ...BatchUpdateActionTypes,
   ...BuildingBlocksActionTypes,
-  ...DatasourceEditorActionTypes,
   ...CurlImportActionTypes,
+  ...DatasourceEditorActionTypes,
   ...ErrorManagementActionTypes,
   ...ExplorerActionTypes,
   ...EvaluationActionTypes,
   ...FeatureFlagActionTypes,
+  ...GeneratePageActionTypes,
   ...GitActionTypes,
   ...HelpActionTypes,
   ...IDEActionTypes,
@@ -1324,6 +1336,7 @@ export const ReduxActionErrorTypes = {
   ...DatasourceEditorActionErrorTypes,
   ...EvaluationActionErrorTypes,
   ...FeatureFlagActionErrorTypes,
+  ...GeneratePageActionErrorTypes,
   ...GitActionErrorTypes,
   ...IDEActionErrorTypes,
   ...ImportExportActionErrorTypes,

app/client/src/ce/constants/messages.ts

@@ -752,7 +752,7 @@ export const BUILD_FROM_SCRATCH_ACTION_TITLE = () => "Build with drag & drop";
 
 export const GENERATE_PAGE_ACTION_TITLE = () => "Generate page with data";
 
-export const GENERATE_PAGE_FORM_TITLE = () => "Generate from data";
+export const GENERATE_PAGE_FORM_TITLE = () => "Generate page from data";
 
 export const GEN_CRUD_SUCCESS_MESSAGE = () =>
   "Hurray! Your application is ready for use.";

app/client/src/ce/constants/routes/appRoutes.ts

@@ -70,10 +70,6 @@ export const APP_LIBRARIES_EDITOR_PATH = `/libraries`;
 export const APP_PACKAGES_EDITOR_PATH = `/packages`;
 export const APP_SETTINGS_EDITOR_PATH = `/settings`;
 export const SAAS_GSHEET_EDITOR_ID_PATH = `/saas/google-sheets-plugin/datasources/:datasourceId`;
-export const GEN_TEMPLATE_URL = "generate-page";
-export const GENERATE_TEMPLATE_PATH = `/${GEN_TEMPLATE_URL}`;
-export const GEN_TEMPLATE_FORM_ROUTE = "/form";
-export const GENERATE_TEMPLATE_FORM_PATH = `${GENERATE_TEMPLATE_PATH}${GEN_TEMPLATE_FORM_ROUTE}`;
 export const BUILDER_CHECKLIST_PATH = `/checklist`;
 export const ADMIN_SETTINGS_PATH = "/settings";
 export const ADMIN_SETTINGS_CATEGORY_DEFAULT_PATH = "/settings/general";
@@ -124,10 +120,6 @@ export const matchViewerForkPath = (pathName: string) =>
   match(`${VIEWER_PATH}${VIEWER_FORK_PATH}`)(pathName) ||
   match(`${VIEWER_CUSTOM_PATH}${VIEWER_FORK_PATH}`)(pathName) ||
   match(`${VIEWER_PATH_DEPRECATED}${VIEWER_FORK_PATH}`)(pathName);
-export const matchGeneratePagePath = (pathName: string) =>
-  match(`${BUILDER_PATH}${GENERATE_TEMPLATE_FORM_PATH}`)(pathName) ||
-  match(`${BUILDER_CUSTOM_PATH}${GENERATE_TEMPLATE_FORM_PATH}`)(pathName) ||
-  match(`${BUILDER_PATH_DEPRECATED}${GENERATE_TEMPLATE_FORM_PATH}`)(pathName);
 
 export const matchAppLibrariesPath = (pathName: string) =>
   match(`${BUILDER_PATH}${APP_LIBRARIES_EDITOR_PATH}`)(pathName);

app/client/src/ce/hooks/datasourceEditorHooks.tsx

@@ -1,4 +1,3 @@
-import { generateTemplateFormURL } from "ee/RouteBuilder";
 import {
   GENERATE_NEW_PAGE_BUTTON_TEXT,
   createMessage,
@@ -18,18 +17,18 @@ import type { ApiDatasourceForm } from "entities/Datasource/RestAPIForm";
 import NewActionButton from "pages/Editor/DataSourceEditor/NewActionButton";
 import { useShowPageGenerationOnHeader } from "pages/Editor/DataSourceEditor/hooks";
 import React from "react";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import {
   getCurrentApplicationId,
   getCurrentBasePageId,
   getPagePermissions,
 } from "selectors/editorSelectors";
 import { getIsAnvilEnabledInCurrentApplication } from "layoutSystems/anvil/integrations/selectors";
 import { isEnabledForPreviewData } from "utils/editorContextUtils";
-import history from "utils/history";
 import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { EditorNames } from "./";
 import { getCurrentApplication } from "ee/selectors/applicationSelectors";
+import { openGeneratePageModal } from "pages/Editor/GeneratePage/helpers";
 
 export interface HeaderActionProps {
   datasource: Datasource | ApiDatasourceForm | undefined;
@@ -47,7 +46,7 @@ export const useHeaderActions = (
     showReconnectButton = false,
   }: HeaderActionProps,
 ) => {
-  const basePageId = useSelector(getCurrentBasePageId);
+  const dispatch = useDispatch();
   const isFeatureEnabled = useFeatureFlag(FEATURE_FLAG.license_gac_enabled);
   const releaseDragDropBuildingBlocks = useFeatureFlag(
     FEATURE_FLAG.release_drag_drop_building_blocks_enabled,
@@ -97,13 +96,10 @@ export const useHeaderActions = (
       }
 
       AnalyticsUtil.logEvent("DATASOURCE_CARD_GEN_CRUD_PAGE_ACTION");
-      history.push(
-        generateTemplateFormURL({
-          basePageId,
-          params: {
-            datasourceId: (datasource as Datasource).id,
-            new_page: true,
-          },
+      dispatch(
+        openGeneratePageModal({
+          datasourceId: (datasource as Datasource).id,
+          new_page: true,
         }),
       );
     };

app/client/src/ce/pages/Editor/IDE/MainPane/useRoutes.tsx

@@ -12,7 +12,6 @@ import {
   BUILDER_PATH_DEPRECATED,
   DATA_SOURCES_EDITOR_ID_PATH,
   DATA_SOURCES_EDITOR_LIST_PATH,
-  GENERATE_TEMPLATE_FORM_PATH,
   INTEGRATION_EDITOR_PATH,
   JS_COLLECTION_EDITOR_PATH,
   JS_COLLECTION_ID_PATH,
@@ -33,7 +32,6 @@ import {
 import DatasourceForm from "pages/Editor/SaaSEditor/DatasourceForm";
 import DataSourceEditor from "pages/Editor/DataSourceEditor";
 import DatasourceBlankState from "pages/Editor/DataSourceEditor/DatasourceBlankState";
-import GeneratePage from "pages/Editor/GeneratePage";
 import type { RouteProps } from "react-router";
 import { useSelector } from "react-redux";
 import { combinedPreviewModeSelector } from "selectors/editorSelectors";
@@ -139,12 +137,6 @@ function useRoutes(path: string): RouteReturnType[] {
       exact: true,
       path: `${path}${SAAS_EDITOR_DATASOURCE_ID_PATH}`,
     },
-    {
-      key: "GeneratePage",
-      component: isPreviewMode ? WidgetsEditor : GeneratePage,
-      exact: true,
-      path: `${path}${GENERATE_TEMPLATE_FORM_PATH}`,
-    },
   ];
 }
 

app/client/src/pages/Editor/DataSourceEditor/DatasourceSection.tsx

@@ -52,7 +52,6 @@ const FieldWrapper = styled.div`
 export const ViewModeWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  border-bottom: 1px solid var(--ads-v2-color-border);
   padding: var(--ads-v2-spaces-7) 0;
   gap: var(--ads-v2-spaces-4);
   overflow: auto;

app/client/src/pages/Editor/Explorer/Pages/AddPageContextMenu.tsx

@@ -2,8 +2,6 @@ import React, { useMemo, useState } from "react";
 import { AddButtonWrapper, EntityClassNames } from "../Entity";
 import EntityAddButton from "../Entity/AddButton";
 import styled from "styled-components";
-import history from "utils/history";
-import { generateTemplateFormURL } from "ee/RouteBuilder";
 import { useParams } from "react-router";
 import { useDispatch } from "react-redux";
 import type { ExplorerURLParams } from "ee/pages/Editor/Explorer/helpers";
@@ -32,6 +30,7 @@ import {
   LayoutSystemFeatures,
   useLayoutSystemFeatures,
 } from "layoutSystems/common/useLayoutSystemFeatures";
+import { openGeneratePageModal } from "pages/Editor/GeneratePage/helpers";
 
 const Wrapper = styled.div`
   .title {
@@ -85,7 +84,7 @@ function AddPageContextMenu({
       items.push({
         title: createMessage(GENERATE_PAGE_ACTION_TITLE),
         icon: "database-2-line",
-        onClick: () => history.push(generateTemplateFormURL({ basePageId })),
+        onClick: () => dispatch(openGeneratePageModal()),
         "data-testid": "generate-page",
         key: "GENERATE_PAGE",
       });