chore: Updating generate page interaction to show it in a modal follo…

…wing the IDE 2.0 interaction pattern (#37414)

## Description

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

Fixes [#32952](#32952)

## Automation

/ok-to-test tags="@tag.All"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/11900113834>
> Commit: 3903c44
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11900113834&attempt=2"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Mon, 18 Nov 2024 21:26:44 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Release Notes

- **New Features**
  - Introduced a modal for generating pages, enhancing user interaction.
- Added new action types and constants for managing page generation
processes.
  - Updated UI messages for clarity in the page generation context.
- Improved handling of datasource selection and page generation in
various components.

- **Bug Fixes**
- Improved error handling in various components to prevent silent
failures.

- **Refactor**
- Streamlined routing logic by removing deprecated paths and functions.
- Transitioned from direct navigation to modal-based interactions for
page generation.
  - Enhanced control flow and error handling within components.

- **Chores**
- Updated import paths for better organization of action-related
functions within the Redux architecture.

- **Tests**
- Enhanced test cases for CRUD operations, ensuring better validation
and error handling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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 a page based on your 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,10 @@ 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 a page based on your data";
+export const GENERATE_PAGE_FORM_SUB_TITLE = () =>
+  "Use your datasource's schema to generate a simple CRUD page.";
 
 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/store/generatePageActions";
 
 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/components/editorComponents/GlobalSearch/utils.tsx

@@ -28,7 +28,7 @@ import {
   createNewAPIBasedOnParentEntity,
   createNewJSCollectionBasedOnParentEntity,
 } from "ee/actions/helpers";
-import { openCurlImportModal } from "pages/Editor/CurlImport/helpers";
+import { openCurlImportModal } from "pages/Editor/CurlImport/store/curlImportActions";
 
 export type SelectEvent =
   | React.MouseEvent

app/client/src/pages/Editor/CurlImport/ModalControls.tsx

@@ -6,7 +6,10 @@ import {
 } from "selectors/curlImportSelectors";
 import { submit } from "redux-form";
 import { CURL_IMPORT_FORM } from "ee/constants/forms";
-import { closeCurlImportModal, openCurlImportModal } from "./helpers";
+import {
+  closeCurlImportModal,
+  openCurlImportModal,
+} from "./store/curlImportActions";
 import CurlLogo from "assets/images/Curl-logo.svg";
 import { createMessage, IMPORT_BTN_LABEL } from "ee/constants/messages";
 import {

app/client/src/pages/Editor/CurlImport/helpers.ts

@@ -1,6 +1,5 @@
 import { submitCurlImportForm } from "../../../actions/importActions";
 import type { ActionParentEntityTypeInterface } from "ee/entities/Engine/actionHelpers";
-import { ReduxActionTypes } from "ee/constants/ReduxActionConstants";
 
 export interface CurlImportFormValues {
   curl: string;
@@ -17,15 +16,3 @@ export const curlImportSubmitHandler = (
 ) => {
   dispatch(submitCurlImportForm(values));
 };
-
-export const openCurlImportModal = () => {
-  return {
-    type: ReduxActionTypes.SET_CURL_MODAL_OPEN,
-  };
-};
-
-export const closeCurlImportModal = () => {
-  return {
-    type: ReduxActionTypes.SET_CURL_MODAL_CLOSE,
-  };
-};

app/client/src/pages/Editor/CurlImport/store/curlImportActions.ts

@@ -0,0 +1,21 @@
+import type { ActionParentEntityTypeInterface } from "ee/entities/Engine/actionHelpers";
+import { ReduxActionTypes } from "ee/constants/ReduxActionConstants";
+
+export interface CurlImportFormValues {
+  curl: string;
+  contextId: string;
+  name: string;
+  contextType: ActionParentEntityTypeInterface;
+}
+
+export const openCurlImportModal = () => {
+  return {
+    type: ReduxActionTypes.SET_CURL_MODAL_OPEN,
+  };
+};
+
+export const closeCurlImportModal = () => {
+  return {
+    type: ReduxActionTypes.SET_CURL_MODAL_CLOSE,
+  };
+};

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/store/generatePageActions";
 
 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",
       });