diff --git a/app/client/cypress/e2e/Regression/ServerSide/GenerateCRUD/MySQL1_Spec.ts b/app/client/cypress/e2e/Regression/ServerSide/GenerateCRUD/MySQL1_Spec.ts index e174cd171cfa..e19bc35a8463 100644 --- a/app/client/cypress/e2e/Regression/ServerSide/GenerateCRUD/MySQL1_Spec.ts +++ b/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 diff --git a/app/client/cypress/e2e/Regression/ServerSide/GenerateCRUD/MySQL2_Spec.ts b/app/client/cypress/e2e/Regression/ServerSide/GenerateCRUD/MySQL2_Spec.ts index ce5773313e82..7cc2f30a82c7 100644 --- a/app/client/cypress/e2e/Regression/ServerSide/GenerateCRUD/MySQL2_Spec.ts +++ b/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 diff --git a/app/client/cypress/e2e/Regression/ServerSide/GenerateCRUD/Postgres1_Spec.ts b/app/client/cypress/e2e/Regression/ServerSide/GenerateCRUD/Postgres1_Spec.ts index 8177679f27db..292e4289d05e 100644 --- a/app/client/cypress/e2e/Regression/ServerSide/GenerateCRUD/Postgres1_Spec.ts +++ b/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 diff --git a/app/client/cypress/e2e/Regression/ServerSide/GenerateCRUD/S3_Spec.js b/app/client/cypress/e2e/Regression/ServerSide/GenerateCRUD/S3_Spec.js index cb1be5c1cd5b..97a620c1060c 100644 --- a/app/client/cypress/e2e/Regression/ServerSide/GenerateCRUD/S3_Spec.js +++ b/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, diff --git a/app/client/src/ce/RouteBuilder.ts b/app/client/src/ce/RouteBuilder.ts index b8df54bcd135..d61b619d4c45 100644 --- a/app/client/src/ce/RouteBuilder.ts +++ b/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, diff --git a/app/client/src/ce/constants/ReduxActionConstants.tsx b/app/client/src/ce/constants/ReduxActionConstants.tsx index a4ef8ae1d025..0ecaa63d846e 100644 --- a/app/client/src/ce/constants/ReduxActionConstants.tsx +++ b/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, diff --git a/app/client/src/ce/constants/messages.ts b/app/client/src/ce/constants/messages.ts index b5a102028ede..f525c40f0d38 100644 --- a/app/client/src/ce/constants/messages.ts +++ b/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."; diff --git a/app/client/src/ce/constants/routes/appRoutes.ts b/app/client/src/ce/constants/routes/appRoutes.ts index 8031209435be..f4b2465b6f2d 100644 --- a/app/client/src/ce/constants/routes/appRoutes.ts +++ b/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); diff --git a/app/client/src/ce/hooks/datasourceEditorHooks.tsx b/app/client/src/ce/hooks/datasourceEditorHooks.tsx index d0e9fdc54813..5dde79d1f35d 100644 --- a/app/client/src/ce/hooks/datasourceEditorHooks.tsx +++ b/app/client/src/ce/hooks/datasourceEditorHooks.tsx @@ -1,4 +1,3 @@ -import { generateTemplateFormURL } from "ee/RouteBuilder"; import { GENERATE_NEW_PAGE_BUTTON_TEXT, createMessage, @@ -18,7 +17,7 @@ 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, @@ -26,10 +25,10 @@ import { } 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, }), ); }; diff --git a/app/client/src/ce/pages/Editor/IDE/MainPane/useRoutes.tsx b/app/client/src/ce/pages/Editor/IDE/MainPane/useRoutes.tsx index d0fdc4ecda05..cac3ae6f84a8 100644 --- a/app/client/src/ce/pages/Editor/IDE/MainPane/useRoutes.tsx +++ b/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}`, - }, ]; } diff --git a/app/client/src/components/editorComponents/GlobalSearch/utils.tsx b/app/client/src/components/editorComponents/GlobalSearch/utils.tsx index f32a6c644075..4413d68053e6 100644 --- a/app/client/src/components/editorComponents/GlobalSearch/utils.tsx +++ b/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 diff --git a/app/client/src/pages/Editor/CurlImport/ModalControls.tsx b/app/client/src/pages/Editor/CurlImport/ModalControls.tsx index df0e15ed55b3..79ff227c6818 100644 --- a/app/client/src/pages/Editor/CurlImport/ModalControls.tsx +++ b/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 { diff --git a/app/client/src/pages/Editor/CurlImport/helpers.ts b/app/client/src/pages/Editor/CurlImport/helpers.ts index 70d08206ecec..59e135cd1c71 100644 --- a/app/client/src/pages/Editor/CurlImport/helpers.ts +++ b/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, - }; -}; diff --git a/app/client/src/pages/Editor/CurlImport/store/curlImportActions.ts b/app/client/src/pages/Editor/CurlImport/store/curlImportActions.ts new file mode 100644 index 000000000000..16e971b680e2 --- /dev/null +++ b/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, + }; +}; diff --git a/app/client/src/pages/Editor/DataSourceEditor/DatasourceSection.tsx b/app/client/src/pages/Editor/DataSourceEditor/DatasourceSection.tsx index 478693bb169d..f98787ab40b0 100644 --- a/app/client/src/pages/Editor/DataSourceEditor/DatasourceSection.tsx +++ b/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; diff --git a/app/client/src/pages/Editor/Explorer/Pages/AddPageContextMenu.tsx b/app/client/src/pages/Editor/Explorer/Pages/AddPageContextMenu.tsx index d80513b94a52..e1501da44948 100644 --- a/app/client/src/pages/Editor/Explorer/Pages/AddPageContextMenu.tsx +++ b/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", }); diff --git a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx index 84178b81ac4e..ef53e385e747 100644 --- a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx +++ b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx @@ -11,23 +11,25 @@ import { } from "ee/selectors/entitiesSelector"; import type { Datasource } from "entities/Datasource"; -import { fetchDatasourceStructure } from "actions/datasourceActions"; +import { + fetchDatasourceStructure, + setDatasourceViewModeFlag, +} from "actions/datasourceActions"; import { generateTemplateToUpdatePage } from "actions/pageActions"; -import { useLocation } from "react-router"; import { INTEGRATION_TABS } from "constants/routes"; import history from "utils/history"; -import { getQueryParams } from "utils/URLUtils"; -import { getIsGeneratingTemplatePage } from "selectors/pageListSelectors"; +import { + getGeneratePageModalParams, + getIsGeneratingTemplatePage, +} from "selectors/pageListSelectors"; import DataSourceOption, { CONNECT_NEW_DATASOURCE_OPTION_ID, DatasourceImage, } from "../DataSourceOption"; -import { getQueryStringfromObject } from "ee/entities/URLRedirect/URLAssembly"; import type { DropdownOption } from "@appsmith/ads-old"; import { Button, Icon, Text, Select, Option, Tooltip } from "@appsmith/ads"; import GoogleSheetForm from "./GoogleSheetForm"; import { - GENERATE_PAGE_FORM_TITLE, createMessage, GEN_CRUD_DATASOURCE_DROPDOWN_LABEL, } from "ee/constants/messages"; @@ -70,6 +72,7 @@ import equal from "fast-deep-equal"; import { useFeatureFlag } from "utils/hooks/useFeatureFlag"; import { FEATURE_FLAG } from "ee/entities/FeatureFlag"; import { getHasCreateDatasourcePermission } from "ee/utils/BusinessFeatures/permissionPageHelpers"; +import { closeGeneratePageModal } from "../../store/generatePageActions"; // ---------- Styles ---------- @@ -77,24 +80,11 @@ const TooltipWrapper = styled.div` margin-left: 6px; `; -const Wrapper = styled.div` - display: flex; - flex-direction: column; - justify-content: flex-end; - border: none; -`; - const FormWrapper = styled.div` display: flex; flex-direction: column; `; -const DescWrapper = styled.div` - flex: 1; - display: flex; - flex-direction: column; -`; - const Row = styled.p` display: flex; flex-direction: row; @@ -218,7 +208,7 @@ const DatasourceOptionSelectedView = (props: any) => { function GeneratePageForm() { const dispatch = useDispatch(); - const querySearch = useLocation().search; + const params = useSelector(getGeneratePageModalParams); const basePageId = useSelector(getCurrentBasePageId); const pageId = useSelector(getCurrentPageId); @@ -539,10 +529,9 @@ function GeneratePageForm() { ]); useEffect(() => { - if (querySearch) { - const queryParams = getQueryParams(); - const datasourceId = queryParams.datasourceId; - const generateNewPage = queryParams.new_page; + if (params?.datasourceId || params?.new_page) { + const datasourceId = params.datasourceId; + const generateNewPage = params.new_page; if (datasourceId) { if (generateNewPage || numberOfEntities > 0) { @@ -552,15 +541,9 @@ function GeneratePageForm() { } setDatasourceIdToBeSelected(datasourceId); - delete queryParams.datasourceId; - delete queryParams.new_page; - const redirectURL = - window.location.pathname + getQueryStringfromObject(queryParams); - - history.replace(redirectURL); } } - }, [numberOfEntities, querySearch, setDatasourceIdToBeSelected]); + }, [numberOfEntities, params, setDatasourceIdToBeSelected]); const routeToCreateNewDatasource = () => { AnalyticsUtil.logEvent("GEN_CRUD_PAGE_CREATE_NEW_DATASOURCE"); @@ -577,6 +560,7 @@ function GeneratePageForm() { AnalyticsUtil.logEvent("NAVIGATE_TO_CREATE_NEW_DATASOURCE_PAGE", { entryPoint, }); + dispatch(closeGeneratePageModal()); }; const generatePageAction = (data: GeneratePagePayload) => { @@ -602,6 +586,7 @@ function GeneratePageForm() { AnalyticsUtil.logEvent("GEN_CRUD_PAGE_FORM_SUBMIT"); dispatch(generateTemplateToUpdatePage(payload)); + dispatch(closeGeneratePageModal()); }; const handleFormSubmit = () => { @@ -625,6 +610,8 @@ function GeneratePageForm() { }); history.push(redirectURL); + dispatch(setDatasourceViewModeFlag(false)); + dispatch(closeGeneratePageModal()); }; // if the datasource has basic information to connect to db it is considered as a valid structure hence isValid true. @@ -682,250 +669,247 @@ function GeneratePageForm() { !selectedTable.value || !showSubmitButton || isSelectedTableEmpty; return ( -
- - - {GENERATE_PAGE_FORM_TITLE()} - - - + + + + + + {selectedDatasource.value ? ( - + + + {tableDropdownErrorMsg && ( + + {tableDropdownErrorMsg} + + )} - {selectedDatasource.value ? ( - - - - - {tableDropdownErrorMsg && ( - - {tableDropdownErrorMsg} - - )} - - ) : null} - {showEditDatasourceBtn && ( -
- + ) : null} + {showEditDatasourceBtn && ( +
+ +
+ )} + {!isGoogleSheetPlugin ? ( + <> + {showSearchableColumn && ( + + + Select a searchable {pluginField.COLUMN} from the selected  + {pluginField.TABLE} + + + + + + + + + {selectedTableColumnOptions.length === 0 + ? `* Optional (No searchable ${pluginField.COLUMN} to select)` + : "* Optional"} + + + )} +
+
- )} - {!isGoogleSheetPlugin ? ( - <> - {showSearchableColumn && ( - - - Select a searchable {pluginField.COLUMN} from the - selected  - {pluginField.TABLE} - - - - - - - - - {selectedTableColumnOptions.length === 0 - ? `* Optional (No searchable ${pluginField.COLUMN} to select)` - : "* Optional"} - - - )} -
- -
- - ) : ( - void; - disabled: boolean; - isLoading: boolean; - }) => ( - - )} - selectedDatasource={selectedDatasource} - selectedSpreadsheet={selectedTable} - sheetColumnsHeaderProps={sheetColumnsHeaderProps} - sheetsListProps={sheetsListProps} - spreadSheetsProps={spreadSheetsProps} - /> - )} - -
+ + ) : ( + void; + disabled: boolean; + isLoading: boolean; + }) => ( + + )} + selectedDatasource={selectedDatasource} + selectedSpreadsheet={selectedTable} + sheetColumnsHeaderProps={sheetColumnsHeaderProps} + sheetsListProps={sheetsListProps} + spreadSheetsProps={spreadSheetsProps} + /> + )} + ); } diff --git a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GoogleSheetForm.tsx b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GoogleSheetForm.tsx index d5e146788b13..afd4b55c8220 100644 --- a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GoogleSheetForm.tsx +++ b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GoogleSheetForm.tsx @@ -301,6 +301,9 @@ function GoogleSheetForm(props: Props) {