From c8516bbbc4a503b9eb4909ba8ee565ce7aeb558a Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Fri, 15 Nov 2024 21:44:25 +0530 Subject: [PATCH 01/10] updating UX of the generate page with data to use modal --- app/client/src/ce/RouteBuilder.ts | 8 - .../src/ce/constants/ReduxActionConstants.tsx | 15 +- app/client/src/ce/constants/messages.ts | 2 +- .../src/ce/constants/routes/appRoutes.ts | 8 - .../src/ce/hooks/datasourceEditorHooks.tsx | 18 +- .../pages/Editor/IDE/MainPane/useRoutes.tsx | 8 - .../DataSourceEditor/DatasourceSection.tsx | 1 - .../Explorer/Pages/AddPageContextMenu.tsx | 5 +- .../GeneratePageForm/GeneratePageForm.tsx | 487 +++++++++--------- .../GeneratePage/components/PageContent.tsx | 19 - .../src/pages/Editor/GeneratePage/helpers.ts | 15 + .../src/pages/Editor/GeneratePage/index.tsx | 90 ++-- .../IntegrationEditor/DatasourceCard.tsx | 13 +- app/client/src/pages/Editor/index.tsx | 2 + .../pages/Templates/TemplatesModal/Header.tsx | 8 +- .../entityReducers/pageListReducer.tsx | 34 ++ app/client/src/sagas/DatasourcesSagas.ts | 87 ++-- app/client/src/sagas/QueryPaneSagas.ts | 37 +- app/client/src/sagas/SaaSPaneSagas.ts | 42 +- .../src/selectors/pageListSelectors.tsx | 6 + 20 files changed, 438 insertions(+), 467 deletions(-) delete mode 100644 app/client/src/pages/Editor/GeneratePage/components/PageContent.tsx create mode 100644 app/client/src/pages/Editor/GeneratePage/helpers.ts 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 7e7375ede276..74f7c661401a 100644 --- a/app/client/src/ce/constants/ReduxActionConstants.tsx +++ b/app/client/src/ce/constants/ReduxActionConstants.tsx @@ -1073,6 +1073,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", @@ -1279,12 +1290,13 @@ export const ReduxActionTypes = { ...AppSettingsActionTypes, ...BatchUpdateActionTypes, ...BuildingBlocksActionTypes, - ...DatasourceEditorActionTypes, ...CurlImportActionTypes, + ...DatasourceEditorActionTypes, ...ErrorManagementActionTypes, ...ExplorerActionTypes, ...EvaluationActionTypes, ...FeatureFlagActionTypes, + ...GeneratePageActionTypes, ...GitActionTypes, ...HelpActionTypes, ...IDEActionTypes, @@ -1327,6 +1339,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..cac71b3dbf39 100644 --- a/app/client/src/ce/constants/messages.ts +++ b/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."; 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..28f0643587dd 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/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, }), ); }; 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/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..54ee9ee8dc97 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/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", }); 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..39205a08059b 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 "../../helpers"; // ---------- 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) => { @@ -612,6 +596,7 @@ function GeneratePageForm() { }; generatePageAction(payload); + dispatch(closeGeneratePageModal()); }; const goToEditDatasource = () => { @@ -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,240 @@ 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/PageContent.tsx b/app/client/src/pages/Editor/GeneratePage/components/PageContent.tsx deleted file mode 100644 index fce5f5c31655..000000000000 --- a/app/client/src/pages/Editor/GeneratePage/components/PageContent.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from "react"; -import styled from "styled-components"; - -import GeneratePageForm from "./GeneratePageForm/GeneratePageForm"; - -const Container = styled.div` - display: flex; - padding: var(--ads-v2-spaces-7) 0; -`; - -function PageContent() { - return ( - - - - ); -} - -export default PageContent; diff --git a/app/client/src/pages/Editor/GeneratePage/helpers.ts b/app/client/src/pages/Editor/GeneratePage/helpers.ts new file mode 100644 index 000000000000..a04a4f7872cf --- /dev/null +++ b/app/client/src/pages/Editor/GeneratePage/helpers.ts @@ -0,0 +1,15 @@ +import { ReduxActionTypes } from "ee/constants/ReduxActionConstants"; +import type { GeneratePageModalParams } from "reducers/entityReducers/pageListReducer"; + +export const openGeneratePageModal = (payload?: GeneratePageModalParams) => { + return { + type: ReduxActionTypes.SET_GENERATE_PAGE_MODAL_OPEN, + payload, + }; +}; + +export const closeGeneratePageModal = () => { + return { + type: ReduxActionTypes.SET_GENERATE_PAGE_MODAL_CLOSE, + }; +}; diff --git a/app/client/src/pages/Editor/GeneratePage/index.tsx b/app/client/src/pages/Editor/GeneratePage/index.tsx index 92f7245ed6ee..a7855cabeaff 100644 --- a/app/client/src/pages/Editor/GeneratePage/index.tsx +++ b/app/client/src/pages/Editor/GeneratePage/index.tsx @@ -1,54 +1,46 @@ -import React from "react"; -import styled from "styled-components"; -import PageContent from "./components/PageContent"; -import { Text } from "@appsmith/ads"; -import { BackButton } from "components/utils/helperComponents"; - -const Container = styled.div` - display: flex; - flex-direction: column; - overflow-y: auto; - height: 100%; - padding: var(--ads-v2-spaces-7); -`; - -const HeadingContainer = styled.div` - display: flex; - padding-top: var(--ads-v2-spaces-4); -`; - -const Header = styled.div` - width: 100%; - - > a { - margin: 0; - } -`; - -function GeneratePage() { - const isGenerateFormPage = window.location.pathname.includes("/form"); - const heading = isGenerateFormPage ? "Quick page wizard" : "New page"; +import React, { useCallback } from "react"; +import { + Modal, + ModalBody, + ModalContent, + ModalHeader, + Text, +} from "@appsmith/ads"; +import { GENERATE_PAGE_FORM_TITLE, createMessage } from "ee/constants/messages"; +import GeneratePageForm from "./components/GeneratePageForm/GeneratePageForm"; +import { useSelector } from "react-redux"; +import { getIsGeneratePageModalOpen } from "selectors/pageListSelectors"; +import { useDispatch } from "react-redux"; +import { closeGeneratePageModal, openGeneratePageModal } from "./helpers"; + +function GeneratePageModal() { + const dispatch = useDispatch(); + const isOpen = useSelector(getIsGeneratePageModalOpen); + + const handleModalOpenChange = useCallback( + (modalState: boolean) => { + if (modalState) { + dispatch(openGeneratePageModal()); + } else { + dispatch(closeGeneratePageModal()); + } + }, + [dispatch], + ); return ( - - {isGenerateFormPage ? ( -
- -
- ) : null} - - - {heading} - - {isGenerateFormPage ? ( - - Auto create a simple CRUD interface on top of your data - - ) : null} - - - + + + {createMessage(GENERATE_PAGE_FORM_TITLE)} + + + Auto create a simple CRUD interface on top of your data + + + + + ); } -export default GeneratePage; +export default GeneratePageModal; diff --git a/app/client/src/pages/Editor/IntegrationEditor/DatasourceCard.tsx b/app/client/src/pages/Editor/IntegrationEditor/DatasourceCard.tsx index ec106af5fd08..b64bc9314ea5 100644 --- a/app/client/src/pages/Editor/IntegrationEditor/DatasourceCard.tsx +++ b/app/client/src/pages/Editor/IntegrationEditor/DatasourceCard.tsx @@ -21,7 +21,6 @@ import AnalyticsUtil from "ee/utils/AnalyticsUtil"; import NewActionButton from "../DataSourceEditor/NewActionButton"; import { datasourcesEditorIdURL, - generateTemplateFormURL, saasEditorDatasourceIdURL, } from "ee/RouteBuilder"; import { @@ -57,6 +56,7 @@ import { } from "ee/utils/BusinessFeatures/permissionPageHelpers"; import { useEditorType } from "ee/hooks"; import { getIsAnvilEnabledInCurrentApplication } from "layoutSystems/anvil/integrations/selectors"; +import { openGeneratePageModal } from "../GeneratePage/helpers"; const Wrapper = styled.div` padding: 15px; @@ -266,13 +266,10 @@ function DatasourceCard(props: DatasourceCardProps) { } AnalyticsUtil.logEvent("DATASOURCE_CARD_GEN_CRUD_PAGE_ACTION"); - history.push( - generateTemplateFormURL({ - basePageId, - params: { - datasourceId: datasource.id, - new_page: true, - }, + dispatch( + openGeneratePageModal({ + datasourceId: datasource.id, + new_page: true, }), ); }; diff --git a/app/client/src/pages/Editor/index.tsx b/app/client/src/pages/Editor/index.tsx index b42f724b6c2e..9e72edd21739 100644 --- a/app/client/src/pages/Editor/index.tsx +++ b/app/client/src/pages/Editor/index.tsx @@ -51,6 +51,7 @@ import { PartialImportModal } from "components/editorComponents/PartialImportExp import type { Page } from "entities/Page"; import { AppCURLImportModal } from "ee/pages/Editor/CurlImport"; import { IDE_HEADER_HEIGHT } from "IDE"; +import GeneratePageModal from "./GeneratePage"; interface EditorProps { currentApplicationId?: string; @@ -210,6 +211,7 @@ class Editor extends Component { +
diff --git a/app/client/src/pages/Templates/TemplatesModal/Header.tsx b/app/client/src/pages/Templates/TemplatesModal/Header.tsx index 0e5794f300a8..f57f2cc8e319 100644 --- a/app/client/src/pages/Templates/TemplatesModal/Header.tsx +++ b/app/client/src/pages/Templates/TemplatesModal/Header.tsx @@ -5,15 +5,9 @@ import { import React from "react"; import styled from "styled-components"; -const BackText = styled.div<{ width?: number; hidden?: boolean }>` - ${(props) => props.hidden && "visibility: hidden;"} -`; const HeaderWrapper = styled.div` display: flex; align-items: center; - .back-button { - margin-right: 8px; - } `; interface TemplateModalHeaderProps { @@ -23,7 +17,7 @@ interface TemplateModalHeaderProps { function TemplateModalHeader(props: TemplateModalHeaderProps) { return ( - {createMessage(ADD_PAGE_FROM_TEMPLATE_MODAL.title)} + {createMessage(ADD_PAGE_FROM_TEMPLATE_MODAL.title)} ); } diff --git a/app/client/src/reducers/entityReducers/pageListReducer.tsx b/app/client/src/reducers/entityReducers/pageListReducer.tsx index b001a7980803..ecbe727142e4 100644 --- a/app/client/src/reducers/entityReducers/pageListReducer.tsx +++ b/app/client/src/reducers/entityReducers/pageListReducer.tsx @@ -20,6 +20,10 @@ import type { Page } from "entities/Page"; const initialState: PageListReduxState = { pages: [], isGeneratingTemplatePage: false, + isGeneratePageModalOpen: { + value: false, + params: {}, + }, baseApplicationId: "", applicationId: "", currentBasePageId: "", @@ -235,6 +239,27 @@ export const pageListReducer = createReducer(initialState, { }, }; }, + [ReduxActionTypes.SET_GENERATE_PAGE_MODAL_OPEN]: ( + state: PageListReduxState, + action: ReduxAction, + ) => { + return { + ...state, + isGeneratePageModalOpen: { + value: true, + params: action.payload || {}, + }, + }; + }, + [ReduxActionTypes.SET_GENERATE_PAGE_MODAL_CLOSE]: ( + state: PageListReduxState, + ) => ({ + ...state, + isGeneratePageModalOpen: { + ...state.isGeneratePageModalOpen, + value: false, + }, + }), [ReduxActionTypes.GENERATE_TEMPLATE_PAGE_INIT]: ( state: PageListReduxState, ) => { @@ -299,6 +324,11 @@ export interface AppLayoutConfig { type: SupportedLayouts; } +export interface GeneratePageModalParams { + datasourceId?: string; + new_page?: boolean; +} + export interface PageListReduxState { pages: Page[]; baseApplicationId: string; @@ -309,6 +339,10 @@ export interface PageListReduxState { defaultPageId: string; appLayout?: AppLayoutConfig; isGeneratingTemplatePage?: boolean; + isGeneratePageModalOpen?: { + value: boolean; + params?: GeneratePageModalParams; + }; loading: Record; } diff --git a/app/client/src/sagas/DatasourcesSagas.ts b/app/client/src/sagas/DatasourcesSagas.ts index a7496c2b5df6..3f7ffd8236cf 100644 --- a/app/client/src/sagas/DatasourcesSagas.ts +++ b/app/client/src/sagas/DatasourcesSagas.ts @@ -151,7 +151,6 @@ import { import { apiEditorIdURL, datasourcesEditorIdURL, - generateTemplateFormURL, integrationEditorURL, saasEditorDatasourceIdURL, } from "ee/RouteBuilder"; @@ -189,6 +188,7 @@ import { executeGoogleApi } from "./loadGoogleApi"; import type { ActionParentEntityTypeInterface } from "ee/entities/Engine/actionHelpers"; import { getCurrentModuleId } from "ee/selectors/modulesSelector"; import type { ApplicationPayload } from "entities/Application"; +import { openGeneratePageModal } from "pages/Editor/GeneratePage/helpers"; function* fetchDatasourcesSaga( action: ReduxAction< @@ -339,41 +339,38 @@ export function* addMockDbToDatasources(actionPayload: addMockDb) { const isGeneratePageInitiator = getIsGeneratePageInitiator(isGeneratePageMode); - if (isGeneratePageInitiator) { - history.push( - generateTemplateFormURL({ - basePageId, - params: { - datasourceId: response.data.id, - }, - }), - ); + if (skipRedirection) { + return; + } + + let url = ""; + const plugin: Plugin = yield select(getPlugin, response.data.pluginId); + + if (plugin && plugin.type === PluginType.SAAS) { + url = saasEditorDatasourceIdURL({ + basePageId, + pluginPackageName: plugin.packageName, + datasourceId: response.data.id, + params: { + viewMode: true, + }, + }); } else { - if (skipRedirection) { - return; - } + url = datasourcesEditorIdURL({ + basePageId, + datasourceId: response.data.id, + params: omit(getQueryParams(), "viewMode"), + }); + } - let url = ""; - const plugin: Plugin = yield select(getPlugin, response.data.pluginId); + history.push(url); - if (plugin && plugin.type === PluginType.SAAS) { - url = saasEditorDatasourceIdURL({ - basePageId, - pluginPackageName: plugin.packageName, - datasourceId: response.data.id, - params: { - viewMode: true, - }, - }); - } else { - url = datasourcesEditorIdURL({ - basePageId, + if (isGeneratePageInitiator) { + yield put( + openGeneratePageModal({ datasourceId: response.data.id, - params: omit(getQueryParams(), "viewMode"), - }); - } - - history.push(url); + }), + ); } } } catch (error) { @@ -1519,7 +1516,6 @@ function* updateDatasourceSuccessSaga(action: UpdateDatasourceSuccessAction) { const actionRouteInfo = get(state, "ui.datasourcePane.actionRouteInfo"); const generateCRUDSupportedPlugin: GenerateCRUDEnabledPluginMap = yield select(getGenerateCRUDEnabledPluginMap); - const basePageId: string = yield select(getCurrentBasePageId); const updatedDatasource = action.payload; const { queryParams = {} } = action; @@ -1529,19 +1525,6 @@ function* updateDatasourceSuccessSaga(action: UpdateDatasourceSuccessAction) { ); if ( - isGeneratePageInitiator && - updatedDatasource.pluginId && - generateCRUDSupportedPlugin[updatedDatasource.pluginId] - ) { - history.push( - generateTemplateFormURL({ - basePageId, - params: { - datasourceId: updatedDatasource.id, - }, - }), - ); - } else if ( actionRouteInfo && updatedDatasource.id === actionRouteInfo.datasourceId && action.redirect @@ -1554,6 +1537,18 @@ function* updateDatasourceSuccessSaga(action: UpdateDatasourceSuccessAction) { ); } + if ( + isGeneratePageInitiator && + updatedDatasource.pluginId && + generateCRUDSupportedPlugin[updatedDatasource.pluginId] + ) { + yield put( + openGeneratePageModal({ + datasourceId: updatedDatasource.id, + }), + ); + } + yield put({ type: ReduxActionTypes.STORE_AS_DATASOURCE_COMPLETE, }); diff --git a/app/client/src/sagas/QueryPaneSagas.ts b/app/client/src/sagas/QueryPaneSagas.ts index 39bea13dfc13..defcbccec805 100644 --- a/app/client/src/sagas/QueryPaneSagas.ts +++ b/app/client/src/sagas/QueryPaneSagas.ts @@ -57,7 +57,6 @@ import type { EventLocation } from "ee/utils/analyticsUtilTypes"; import AnalyticsUtil from "ee/utils/AnalyticsUtil"; import { datasourcesEditorIdURL, - generateTemplateFormURL, integrationEditorURL, queryEditorIdURL, } from "ee/RouteBuilder"; @@ -85,6 +84,7 @@ import { import { TEMP_DATASOURCE_ID } from "constants/Datasource"; import { doesPluginRequireDatasource } from "ee/entities/Engine/actionHelpers"; import { convertToBasePageIdSelector } from "selectors/pageListSelectors"; +import { openGeneratePageModal } from "pages/Editor/GeneratePage/helpers"; // Called whenever the query being edited is changed via the URL or query pane function* changeQuerySaga(actionPayload: ReduxAction) { @@ -464,25 +464,7 @@ function* handleDatasourceCreatedSaga( const generateCRUDSupportedPlugin: GenerateCRUDEnabledPluginMap = yield select(getGenerateCRUDEnabledPluginMap); - // isGeneratePageInitiator ensures that datasource is being created from generate page with data - // then we check if the current plugin is supported for generate page with data functionality - // and finally isDBCreated ensures that datasource is not in temporary state and - // user has explicitly saved the datasource, before redirecting back to generate page if ( - isGeneratePageInitiator && - updatedDatasource.pluginId && - generateCRUDSupportedPlugin[updatedDatasource.pluginId] && - isDBCreated - ) { - history.push( - generateTemplateFormURL({ - basePageId, - params: { - datasourceId: updatedDatasource.id, - }, - }), - ); - } else if ( !currentApplicationIdForCreateNewApp || (!!currentApplicationIdForCreateNewApp && payload.id !== TEMP_DATASOURCE_ID) ) { @@ -498,6 +480,23 @@ function* handleDatasourceCreatedSaga( }), ); } + + // isGeneratePageInitiator ensures that datasource is being created from generate page with data + // then we check if the current plugin is supported for generate page with data functionality + // and finally isDBCreated ensures that datasource is not in temporary state and + // user has explicitly saved the datasource, before redirecting back to generate page + if ( + isGeneratePageInitiator && + updatedDatasource.pluginId && + generateCRUDSupportedPlugin[updatedDatasource.pluginId] && + isDBCreated + ) { + yield put( + openGeneratePageModal({ + datasourceId: updatedDatasource.id, + }), + ); + } } function* handleNameChangeSaga( diff --git a/app/client/src/sagas/SaaSPaneSagas.ts b/app/client/src/sagas/SaaSPaneSagas.ts index b45eee11f2c8..e8278a1cbae9 100644 --- a/app/client/src/sagas/SaaSPaneSagas.ts +++ b/app/client/src/sagas/SaaSPaneSagas.ts @@ -10,11 +10,7 @@ import { import type { Action } from "entities/Action"; import { PluginType } from "entities/Action"; import type { GenerateCRUDEnabledPluginMap, Plugin } from "api/PluginApi"; -import { - generateTemplateFormURL, - saasEditorApiIdURL, - saasEditorDatasourceIdURL, -} from "ee/RouteBuilder"; +import { saasEditorApiIdURL, saasEditorDatasourceIdURL } from "ee/RouteBuilder"; import { getCurrentBasePageId } from "selectors/editorSelectors"; import type { CreateDatasourceSuccessAction } from "actions/datasourceActions"; import { getQueryParams } from "utils/URLUtils"; @@ -28,6 +24,7 @@ import { } from "ee/selectors/applicationSelectors"; import { TEMP_DATASOURCE_ID } from "constants/Datasource"; import { convertToBasePageIdSelector } from "selectors/pageListSelectors"; +import { openGeneratePageModal } from "pages/Editor/GeneratePage/helpers"; function* handleDatasourceCreatedSaga( actionPayload: CreateDatasourceSuccessAction, @@ -63,25 +60,7 @@ function* handleDatasourceCreatedSaga( const generateCRUDSupportedPlugin: GenerateCRUDEnabledPluginMap = yield select(getGenerateCRUDEnabledPluginMap); - // isGeneratePageInitiator ensures that datasource is being created from generate page with data - // then we check if the current plugin is supported for generate page with data functionality - // and finally isDBCreated ensures that datasource is not in temporary state and - // user has explicitly saved the datasource, before redirecting back to generate page if ( - isGeneratePageInitiator && - updatedDatasource.pluginId && - generateCRUDSupportedPlugin[updatedDatasource.pluginId] && - isDBCreated - ) { - history.push( - generateTemplateFormURL({ - basePageId, - params: { - datasourceId: updatedDatasource.id, - }, - }), - ); - } else if ( !currentApplicationIdForCreateNewApp || (!!currentApplicationIdForCreateNewApp && payload.id !== TEMP_DATASOURCE_ID) ) { @@ -98,6 +77,23 @@ function* handleDatasourceCreatedSaga( }), ); } + + // isGeneratePageInitiator ensures that datasource is being created from generate page with data + // then we check if the current plugin is supported for generate page with data functionality + // and finally isDBCreated ensures that datasource is not in temporary state and + // user has explicitly saved the datasource, before redirecting back to generate page + if ( + isGeneratePageInitiator && + updatedDatasource.pluginId && + generateCRUDSupportedPlugin[updatedDatasource.pluginId] && + isDBCreated + ) { + yield put( + openGeneratePageModal({ + datasourceId: updatedDatasource.id, + }), + ); + } } function* handleActionCreatedSaga(actionPayload: ReduxAction) { diff --git a/app/client/src/selectors/pageListSelectors.tsx b/app/client/src/selectors/pageListSelectors.tsx index 89e9ce6ecee1..62930de92b1a 100644 --- a/app/client/src/selectors/pageListSelectors.tsx +++ b/app/client/src/selectors/pageListSelectors.tsx @@ -16,6 +16,12 @@ export const getIsGeneratingTemplatePage = createSelector( (pageList: PageListReduxState) => pageList.isGeneratingTemplatePage, ); +export const getIsGeneratePageModalOpen = (state: AppState) => + state.entities.pageList.isGeneratePageModalOpen?.value; + +export const getGeneratePageModalParams = (state: AppState) => + state.entities.pageList.isGeneratePageModalOpen?.params; + export const convertToPageIdSelector = (state: AppState, basePageId: string) => state.entities.pageList.pages?.find((page) => page.basePageId === basePageId) ?.pageId; From d9a64cce55da4ed0620faa7c390412d80d4d3388 Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Sat, 16 Nov 2024 00:24:27 +0530 Subject: [PATCH 02/10] fixing tests --- .../e2e/Regression/ServerSide/GenerateCRUD/MySQL1_Spec.ts | 6 +++--- .../e2e/Regression/ServerSide/GenerateCRUD/MySQL2_Spec.ts | 4 +--- .../Regression/ServerSide/GenerateCRUD/Postgres1_Spec.ts | 6 +++--- .../e2e/Regression/ServerSide/GenerateCRUD/S3_Spec.js | 2 +- 4 files changed, 8 insertions(+), 10 deletions(-) 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..fe1727ffc113 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 page from data"); agHelper.GetNClick(generatePage.selectTableDropdown); agHelper.GetNClickByContains( generatePage.dropdownOption, From 0cdd8c5419ea35bedb63fa4d56e11b848cdd06f0 Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Mon, 18 Nov 2024 16:34:51 +0530 Subject: [PATCH 03/10] addressing design review comments --- .../Regression/ServerSide/GenerateCRUD/S3_Spec.js | 2 +- app/client/src/ce/constants/messages.ts | 5 ++++- app/client/src/pages/Editor/GeneratePage/index.tsx | 13 ++++++++----- 3 files changed, 13 insertions(+), 7 deletions(-) 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 fe1727ffc113..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 page 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/constants/messages.ts b/app/client/src/ce/constants/messages.ts index cac71b3dbf39..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 page 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/pages/Editor/GeneratePage/index.tsx b/app/client/src/pages/Editor/GeneratePage/index.tsx index a7855cabeaff..8c488660a5a8 100644 --- a/app/client/src/pages/Editor/GeneratePage/index.tsx +++ b/app/client/src/pages/Editor/GeneratePage/index.tsx @@ -6,11 +6,14 @@ import { ModalHeader, Text, } from "@appsmith/ads"; -import { GENERATE_PAGE_FORM_TITLE, createMessage } from "ee/constants/messages"; +import { + createMessage, + GENERATE_PAGE_FORM_TITLE, + GENERATE_PAGE_FORM_SUB_TITLE, +} from "ee/constants/messages"; import GeneratePageForm from "./components/GeneratePageForm/GeneratePageForm"; -import { useSelector } from "react-redux"; +import { useSelector, useDispatch } from "react-redux"; import { getIsGeneratePageModalOpen } from "selectors/pageListSelectors"; -import { useDispatch } from "react-redux"; import { closeGeneratePageModal, openGeneratePageModal } from "./helpers"; function GeneratePageModal() { @@ -30,11 +33,11 @@ function GeneratePageModal() { return ( - + {createMessage(GENERATE_PAGE_FORM_TITLE)} - Auto create a simple CRUD interface on top of your data + {createMessage(GENERATE_PAGE_FORM_SUB_TITLE)} From 866a121f1da1ffc6d632626c2e5a3989d18c8df1 Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Mon, 18 Nov 2024 17:58:42 +0530 Subject: [PATCH 04/10] addressing review comments --- .../src/ce/hooks/datasourceEditorHooks.tsx | 2 +- .../editorComponents/GlobalSearch/utils.tsx | 2 +- .../pages/Editor/CurlImport/ModalControls.tsx | 5 ++++- .../src/pages/Editor/CurlImport/helpers.ts | 13 ------------ .../CurlImport/store/curlImportActions.ts | 21 +++++++++++++++++++ .../Explorer/Pages/AddPageContextMenu.tsx | 2 +- .../GeneratePageForm/GeneratePageForm.tsx | 2 +- .../src/pages/Editor/GeneratePage/index.tsx | 5 ++++- .../generatePageActions.ts} | 0 .../IntegrationEditor/DatasourceCard.tsx | 2 +- .../pages/Templates/TemplatesModal/Header.tsx | 11 +++------- .../entityReducers/pageListReducer.tsx | 18 ++++++++-------- app/client/src/sagas/DatasourcesSagas.ts | 2 +- app/client/src/sagas/QueryPaneSagas.ts | 2 +- app/client/src/sagas/SaaSPaneSagas.ts | 2 +- .../src/selectors/pageListSelectors.tsx | 4 ++-- 16 files changed, 51 insertions(+), 42 deletions(-) create mode 100644 app/client/src/pages/Editor/CurlImport/store/curlImportActions.ts rename app/client/src/pages/Editor/GeneratePage/{helpers.ts => store/generatePageActions.ts} (100%) diff --git a/app/client/src/ce/hooks/datasourceEditorHooks.tsx b/app/client/src/ce/hooks/datasourceEditorHooks.tsx index 28f0643587dd..5dde79d1f35d 100644 --- a/app/client/src/ce/hooks/datasourceEditorHooks.tsx +++ b/app/client/src/ce/hooks/datasourceEditorHooks.tsx @@ -28,7 +28,7 @@ import { isEnabledForPreviewData } from "utils/editorContextUtils"; import { useFeatureFlag } from "utils/hooks/useFeatureFlag"; import { EditorNames } from "./"; import { getCurrentApplication } from "ee/selectors/applicationSelectors"; -import { openGeneratePageModal } from "pages/Editor/GeneratePage/helpers"; +import { openGeneratePageModal } from "pages/Editor/GeneratePage/store/generatePageActions"; export interface HeaderActionProps { datasource: Datasource | ApiDatasourceForm | undefined; 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/Explorer/Pages/AddPageContextMenu.tsx b/app/client/src/pages/Editor/Explorer/Pages/AddPageContextMenu.tsx index 54ee9ee8dc97..e1501da44948 100644 --- a/app/client/src/pages/Editor/Explorer/Pages/AddPageContextMenu.tsx +++ b/app/client/src/pages/Editor/Explorer/Pages/AddPageContextMenu.tsx @@ -30,7 +30,7 @@ import { LayoutSystemFeatures, useLayoutSystemFeatures, } from "layoutSystems/common/useLayoutSystemFeatures"; -import { openGeneratePageModal } from "pages/Editor/GeneratePage/helpers"; +import { openGeneratePageModal } from "pages/Editor/GeneratePage/store/generatePageActions"; const Wrapper = styled.div` .title { 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 39205a08059b..4f9560e4062c 100644 --- a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx +++ b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx @@ -72,7 +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 "../../helpers"; +import { closeGeneratePageModal } from "../../store/generatePageActions"; // ---------- Styles ---------- diff --git a/app/client/src/pages/Editor/GeneratePage/index.tsx b/app/client/src/pages/Editor/GeneratePage/index.tsx index 8c488660a5a8..72d181bd56b4 100644 --- a/app/client/src/pages/Editor/GeneratePage/index.tsx +++ b/app/client/src/pages/Editor/GeneratePage/index.tsx @@ -14,7 +14,10 @@ import { import GeneratePageForm from "./components/GeneratePageForm/GeneratePageForm"; import { useSelector, useDispatch } from "react-redux"; import { getIsGeneratePageModalOpen } from "selectors/pageListSelectors"; -import { closeGeneratePageModal, openGeneratePageModal } from "./helpers"; +import { + closeGeneratePageModal, + openGeneratePageModal, +} from "./store/generatePageActions"; function GeneratePageModal() { const dispatch = useDispatch(); diff --git a/app/client/src/pages/Editor/GeneratePage/helpers.ts b/app/client/src/pages/Editor/GeneratePage/store/generatePageActions.ts similarity index 100% rename from app/client/src/pages/Editor/GeneratePage/helpers.ts rename to app/client/src/pages/Editor/GeneratePage/store/generatePageActions.ts diff --git a/app/client/src/pages/Editor/IntegrationEditor/DatasourceCard.tsx b/app/client/src/pages/Editor/IntegrationEditor/DatasourceCard.tsx index b64bc9314ea5..583704198421 100644 --- a/app/client/src/pages/Editor/IntegrationEditor/DatasourceCard.tsx +++ b/app/client/src/pages/Editor/IntegrationEditor/DatasourceCard.tsx @@ -56,7 +56,7 @@ import { } from "ee/utils/BusinessFeatures/permissionPageHelpers"; import { useEditorType } from "ee/hooks"; import { getIsAnvilEnabledInCurrentApplication } from "layoutSystems/anvil/integrations/selectors"; -import { openGeneratePageModal } from "../GeneratePage/helpers"; +import { openGeneratePageModal } from "../GeneratePage/store/generatePageActions"; const Wrapper = styled.div` padding: 15px; diff --git a/app/client/src/pages/Templates/TemplatesModal/Header.tsx b/app/client/src/pages/Templates/TemplatesModal/Header.tsx index f57f2cc8e319..d88673cb4dd2 100644 --- a/app/client/src/pages/Templates/TemplatesModal/Header.tsx +++ b/app/client/src/pages/Templates/TemplatesModal/Header.tsx @@ -1,14 +1,9 @@ +import { Flex } from "@appsmith/ads"; import { ADD_PAGE_FROM_TEMPLATE_MODAL, createMessage, } from "ee/constants/messages"; import React from "react"; -import styled from "styled-components"; - -const HeaderWrapper = styled.div` - display: flex; - align-items: center; -`; interface TemplateModalHeaderProps { className?: string; @@ -16,9 +11,9 @@ interface TemplateModalHeaderProps { function TemplateModalHeader(props: TemplateModalHeaderProps) { return ( - + {createMessage(ADD_PAGE_FROM_TEMPLATE_MODAL.title)} - + ); } diff --git a/app/client/src/reducers/entityReducers/pageListReducer.tsx b/app/client/src/reducers/entityReducers/pageListReducer.tsx index ecbe727142e4..7ad83177412d 100644 --- a/app/client/src/reducers/entityReducers/pageListReducer.tsx +++ b/app/client/src/reducers/entityReducers/pageListReducer.tsx @@ -20,8 +20,8 @@ import type { Page } from "entities/Page"; const initialState: PageListReduxState = { pages: [], isGeneratingTemplatePage: false, - isGeneratePageModalOpen: { - value: false, + generatePage: { + modalOpen: false, params: {}, }, baseApplicationId: "", @@ -245,8 +245,8 @@ export const pageListReducer = createReducer(initialState, { ) => { return { ...state, - isGeneratePageModalOpen: { - value: true, + generatePage: { + modalOpen: true, params: action.payload || {}, }, }; @@ -255,9 +255,9 @@ export const pageListReducer = createReducer(initialState, { state: PageListReduxState, ) => ({ ...state, - isGeneratePageModalOpen: { - ...state.isGeneratePageModalOpen, - value: false, + generatePage: { + ...state.generatePage, + modalOpen: false, }, }), [ReduxActionTypes.GENERATE_TEMPLATE_PAGE_INIT]: ( @@ -339,8 +339,8 @@ export interface PageListReduxState { defaultPageId: string; appLayout?: AppLayoutConfig; isGeneratingTemplatePage?: boolean; - isGeneratePageModalOpen?: { - value: boolean; + generatePage?: { + modalOpen: boolean; params?: GeneratePageModalParams; }; loading: Record; diff --git a/app/client/src/sagas/DatasourcesSagas.ts b/app/client/src/sagas/DatasourcesSagas.ts index 3f7ffd8236cf..094bb01adf12 100644 --- a/app/client/src/sagas/DatasourcesSagas.ts +++ b/app/client/src/sagas/DatasourcesSagas.ts @@ -188,7 +188,7 @@ import { executeGoogleApi } from "./loadGoogleApi"; import type { ActionParentEntityTypeInterface } from "ee/entities/Engine/actionHelpers"; import { getCurrentModuleId } from "ee/selectors/modulesSelector"; import type { ApplicationPayload } from "entities/Application"; -import { openGeneratePageModal } from "pages/Editor/GeneratePage/helpers"; +import { openGeneratePageModal } from "pages/Editor/GeneratePage/store/generatePageActions"; function* fetchDatasourcesSaga( action: ReduxAction< diff --git a/app/client/src/sagas/QueryPaneSagas.ts b/app/client/src/sagas/QueryPaneSagas.ts index defcbccec805..014be6a3616f 100644 --- a/app/client/src/sagas/QueryPaneSagas.ts +++ b/app/client/src/sagas/QueryPaneSagas.ts @@ -84,7 +84,7 @@ import { import { TEMP_DATASOURCE_ID } from "constants/Datasource"; import { doesPluginRequireDatasource } from "ee/entities/Engine/actionHelpers"; import { convertToBasePageIdSelector } from "selectors/pageListSelectors"; -import { openGeneratePageModal } from "pages/Editor/GeneratePage/helpers"; +import { openGeneratePageModal } from "pages/Editor/GeneratePage/store/generatePageActions"; // Called whenever the query being edited is changed via the URL or query pane function* changeQuerySaga(actionPayload: ReduxAction) { diff --git a/app/client/src/sagas/SaaSPaneSagas.ts b/app/client/src/sagas/SaaSPaneSagas.ts index e8278a1cbae9..598fc7c195d9 100644 --- a/app/client/src/sagas/SaaSPaneSagas.ts +++ b/app/client/src/sagas/SaaSPaneSagas.ts @@ -24,7 +24,7 @@ import { } from "ee/selectors/applicationSelectors"; import { TEMP_DATASOURCE_ID } from "constants/Datasource"; import { convertToBasePageIdSelector } from "selectors/pageListSelectors"; -import { openGeneratePageModal } from "pages/Editor/GeneratePage/helpers"; +import { openGeneratePageModal } from "pages/Editor/GeneratePage/store/generatePageActions"; function* handleDatasourceCreatedSaga( actionPayload: CreateDatasourceSuccessAction, diff --git a/app/client/src/selectors/pageListSelectors.tsx b/app/client/src/selectors/pageListSelectors.tsx index 62930de92b1a..239537bc0b7b 100644 --- a/app/client/src/selectors/pageListSelectors.tsx +++ b/app/client/src/selectors/pageListSelectors.tsx @@ -17,10 +17,10 @@ export const getIsGeneratingTemplatePage = createSelector( ); export const getIsGeneratePageModalOpen = (state: AppState) => - state.entities.pageList.isGeneratePageModalOpen?.value; + state.entities.pageList.generatePage?.modalOpen; export const getGeneratePageModalParams = (state: AppState) => - state.entities.pageList.isGeneratePageModalOpen?.params; + state.entities.pageList.generatePage?.params; export const convertToPageIdSelector = (state: AppState, basePageId: string) => state.entities.pageList.pages?.find((page) => page.basePageId === basePageId) From 16af34f9b1b7bbb795666da3f6b2c24f6a125d72 Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Mon, 18 Nov 2024 18:06:56 +0530 Subject: [PATCH 05/10] adding a prop --- app/client/src/pages/Templates/TemplatesModal/Header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/client/src/pages/Templates/TemplatesModal/Header.tsx b/app/client/src/pages/Templates/TemplatesModal/Header.tsx index d88673cb4dd2..42d17c41a64d 100644 --- a/app/client/src/pages/Templates/TemplatesModal/Header.tsx +++ b/app/client/src/pages/Templates/TemplatesModal/Header.tsx @@ -11,7 +11,7 @@ interface TemplateModalHeaderProps { function TemplateModalHeader(props: TemplateModalHeaderProps) { return ( - + {createMessage(ADD_PAGE_FROM_TEMPLATE_MODAL.title)} ); From a0840c9d5d4e833669049a8f96d751a42f77a401 Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Mon, 18 Nov 2024 18:57:21 +0530 Subject: [PATCH 06/10] minor changes --- app/client/src/sagas/DatasourcesSagas.ts | 32 +++++++++-------------- app/client/src/sagas/QueryPaneSagas.ts | 23 +++++++--------- app/client/src/sagas/SaaSPaneSagas.ts | 25 ++++++++---------- app/client/src/utils/GeneratePageUtils.ts | 18 +++++++++++++ 4 files changed, 52 insertions(+), 46 deletions(-) create mode 100644 app/client/src/utils/GeneratePageUtils.ts diff --git a/app/client/src/sagas/DatasourcesSagas.ts b/app/client/src/sagas/DatasourcesSagas.ts index 094bb01adf12..c4c50492829b 100644 --- a/app/client/src/sagas/DatasourcesSagas.ts +++ b/app/client/src/sagas/DatasourcesSagas.ts @@ -188,7 +188,7 @@ import { executeGoogleApi } from "./loadGoogleApi"; import type { ActionParentEntityTypeInterface } from "ee/entities/Engine/actionHelpers"; import { getCurrentModuleId } from "ee/selectors/modulesSelector"; import type { ApplicationPayload } from "entities/Application"; -import { openGeneratePageModal } from "pages/Editor/GeneratePage/store/generatePageActions"; +import { openGeneratePageModalWithSelectedDS } from "../utils/GeneratePageUtils"; function* fetchDatasourcesSaga( action: ReduxAction< @@ -365,13 +365,10 @@ export function* addMockDbToDatasources(actionPayload: addMockDb) { history.push(url); - if (isGeneratePageInitiator) { - yield put( - openGeneratePageModal({ - datasourceId: response.data.id, - }), - ); - } + yield call(openGeneratePageModalWithSelectedDS, { + shouldOpenModalWIthSelectedDS: Boolean(isGeneratePageInitiator), + datasourceId: response.data.id, + }); } } catch (error) { yield put({ @@ -1537,17 +1534,14 @@ function* updateDatasourceSuccessSaga(action: UpdateDatasourceSuccessAction) { ); } - if ( - isGeneratePageInitiator && - updatedDatasource.pluginId && - generateCRUDSupportedPlugin[updatedDatasource.pluginId] - ) { - yield put( - openGeneratePageModal({ - datasourceId: updatedDatasource.id, - }), - ); - } + yield call(openGeneratePageModalWithSelectedDS, { + shouldOpenModalWIthSelectedDS: Boolean( + isGeneratePageInitiator && + updatedDatasource.pluginId && + generateCRUDSupportedPlugin[updatedDatasource.pluginId], + ), + datasourceId: updatedDatasource.id, + }); yield put({ type: ReduxActionTypes.STORE_AS_DATASOURCE_COMPLETE, diff --git a/app/client/src/sagas/QueryPaneSagas.ts b/app/client/src/sagas/QueryPaneSagas.ts index 014be6a3616f..6d98b2ca63ae 100644 --- a/app/client/src/sagas/QueryPaneSagas.ts +++ b/app/client/src/sagas/QueryPaneSagas.ts @@ -84,7 +84,7 @@ import { import { TEMP_DATASOURCE_ID } from "constants/Datasource"; import { doesPluginRequireDatasource } from "ee/entities/Engine/actionHelpers"; import { convertToBasePageIdSelector } from "selectors/pageListSelectors"; -import { openGeneratePageModal } from "pages/Editor/GeneratePage/store/generatePageActions"; +import { openGeneratePageModalWithSelectedDS } from "../utils/GeneratePageUtils"; // Called whenever the query being edited is changed via the URL or query pane function* changeQuerySaga(actionPayload: ReduxAction) { @@ -485,18 +485,15 @@ function* handleDatasourceCreatedSaga( // then we check if the current plugin is supported for generate page with data functionality // and finally isDBCreated ensures that datasource is not in temporary state and // user has explicitly saved the datasource, before redirecting back to generate page - if ( - isGeneratePageInitiator && - updatedDatasource.pluginId && - generateCRUDSupportedPlugin[updatedDatasource.pluginId] && - isDBCreated - ) { - yield put( - openGeneratePageModal({ - datasourceId: updatedDatasource.id, - }), - ); - } + yield call(openGeneratePageModalWithSelectedDS, { + shouldOpenModalWIthSelectedDS: Boolean( + isGeneratePageInitiator && + updatedDatasource.pluginId && + generateCRUDSupportedPlugin[updatedDatasource.pluginId] && + isDBCreated, + ), + datasourceId: updatedDatasource.id, + }); } function* handleNameChangeSaga( diff --git a/app/client/src/sagas/SaaSPaneSagas.ts b/app/client/src/sagas/SaaSPaneSagas.ts index 598fc7c195d9..38fb823aea99 100644 --- a/app/client/src/sagas/SaaSPaneSagas.ts +++ b/app/client/src/sagas/SaaSPaneSagas.ts @@ -1,4 +1,4 @@ -import { all, put, select, takeEvery } from "redux-saga/effects"; +import { all, call, put, select, takeEvery } from "redux-saga/effects"; import type { ApplicationPayload } from "entities/Application"; import type { ReduxAction } from "ee/constants/ReduxActionConstants"; import { ReduxActionTypes } from "ee/constants/ReduxActionConstants"; @@ -24,7 +24,7 @@ import { } from "ee/selectors/applicationSelectors"; import { TEMP_DATASOURCE_ID } from "constants/Datasource"; import { convertToBasePageIdSelector } from "selectors/pageListSelectors"; -import { openGeneratePageModal } from "pages/Editor/GeneratePage/store/generatePageActions"; +import { openGeneratePageModalWithSelectedDS } from "../utils/GeneratePageUtils"; function* handleDatasourceCreatedSaga( actionPayload: CreateDatasourceSuccessAction, @@ -82,18 +82,15 @@ function* handleDatasourceCreatedSaga( // then we check if the current plugin is supported for generate page with data functionality // and finally isDBCreated ensures that datasource is not in temporary state and // user has explicitly saved the datasource, before redirecting back to generate page - if ( - isGeneratePageInitiator && - updatedDatasource.pluginId && - generateCRUDSupportedPlugin[updatedDatasource.pluginId] && - isDBCreated - ) { - yield put( - openGeneratePageModal({ - datasourceId: updatedDatasource.id, - }), - ); - } + yield call(openGeneratePageModalWithSelectedDS, { + shouldOpenModalWIthSelectedDS: Boolean( + isGeneratePageInitiator && + updatedDatasource.pluginId && + generateCRUDSupportedPlugin[updatedDatasource.pluginId] && + isDBCreated, + ), + datasourceId: updatedDatasource.id, + }); } function* handleActionCreatedSaga(actionPayload: ReduxAction) { diff --git a/app/client/src/utils/GeneratePageUtils.ts b/app/client/src/utils/GeneratePageUtils.ts new file mode 100644 index 000000000000..ec0c18146208 --- /dev/null +++ b/app/client/src/utils/GeneratePageUtils.ts @@ -0,0 +1,18 @@ +import { openGeneratePageModal } from "pages/Editor/GeneratePage/store/generatePageActions"; +import { put } from "redux-saga/effects"; + +export function* openGeneratePageModalWithSelectedDS({ + datasourceId, + shouldOpenModalWIthSelectedDS, +}: { + shouldOpenModalWIthSelectedDS: boolean; + datasourceId: string; +}) { + if (shouldOpenModalWIthSelectedDS) { + yield put( + openGeneratePageModal({ + datasourceId, + }), + ); + } +} From ea69a7bd537f7ef13bd295879ebb07b21b9dea0f Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Mon, 18 Nov 2024 20:20:06 +0530 Subject: [PATCH 07/10] fixing scroll issue when dropdown has more options --- .../components/GeneratePageForm/GeneratePageForm.tsx | 7 +++++++ .../components/GeneratePageForm/GoogleSheetForm.tsx | 3 +++ 2 files changed, 10 insertions(+) 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 4f9560e4062c..8a86c19cdd44 100644 --- a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx +++ b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx @@ -674,6 +674,7 @@ function GeneratePageForm() { + triggerNode.parentNode.parentNode + } isDisabled={!!tableDropdownErrorMsg} isLoading={fetchingDatasourceConfigs} isValid={!tableDropdownErrorMsg} @@ -811,6 +815,9 @@ function GeneratePageForm() { + triggerNode.parentNode.parentNode + } isLoading={isFetchingSheetsList} onChange={(value) => onSelectSheetOption( From 9ac6a8bb200746d41ecaf82a869996005c831183 Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Mon, 18 Nov 2024 21:53:31 +0530 Subject: [PATCH 08/10] handling generate page modal to be closed after google sheet form submit --- .../components/GeneratePageForm/GoogleSheetForm.tsx | 3 +++ 1 file changed, 3 insertions(+) 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 afd4b55c8220..149c1e86ef04 100644 --- a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GoogleSheetForm.tsx +++ b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GoogleSheetForm.tsx @@ -24,6 +24,7 @@ import { GEN_CRUD_TABLE_HEADER_TOOLTIP_DESC, } from "ee/constants/messages"; import { Icon, Option, Select, Input, Tooltip } from "@appsmith/ads"; +import { closeGeneratePageModal } from "../../store/generatePageActions"; interface Props { googleSheetPluginId: string; @@ -262,6 +263,8 @@ function GoogleSheetForm(props: Props) { generatePageAction(payload); } + + dispatch(closeGeneratePageModal()); }; const debouncedFetchColumns = useCallback( From 8394e0f380693184b399815a6bc4fb1314f08502 Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Tue, 19 Nov 2024 00:04:41 +0530 Subject: [PATCH 09/10] refactoring --- .../components/GeneratePageForm/GeneratePageForm.tsx | 2 +- .../components/GeneratePageForm/GoogleSheetForm.tsx | 3 --- 2 files changed, 1 insertion(+), 4 deletions(-) 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 8a86c19cdd44..ba69524fadf6 100644 --- a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx +++ b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx @@ -585,6 +585,7 @@ function GeneratePageForm() { }; AnalyticsUtil.logEvent("GEN_CRUD_PAGE_FORM_SUBMIT"); + dispatch(closeGeneratePageModal()); dispatch(generateTemplateToUpdatePage(payload)); }; @@ -596,7 +597,6 @@ function GeneratePageForm() { }; generatePageAction(payload); - dispatch(closeGeneratePageModal()); }; const goToEditDatasource = () => { 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 149c1e86ef04..afd4b55c8220 100644 --- a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GoogleSheetForm.tsx +++ b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GoogleSheetForm.tsx @@ -24,7 +24,6 @@ import { GEN_CRUD_TABLE_HEADER_TOOLTIP_DESC, } from "ee/constants/messages"; import { Icon, Option, Select, Input, Tooltip } from "@appsmith/ads"; -import { closeGeneratePageModal } from "../../store/generatePageActions"; interface Props { googleSheetPluginId: string; @@ -263,8 +262,6 @@ function GoogleSheetForm(props: Props) { generatePageAction(payload); } - - dispatch(closeGeneratePageModal()); }; const debouncedFetchColumns = useCallback( From 3903c44fe5a6c7db0d22d9cf982c28a1380f4546 Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Tue, 19 Nov 2024 01:30:34 +0530 Subject: [PATCH 10/10] reordering --- .../components/GeneratePageForm/GeneratePageForm.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 ba69524fadf6..ef53e385e747 100644 --- a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx +++ b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx @@ -585,8 +585,8 @@ function GeneratePageForm() { }; AnalyticsUtil.logEvent("GEN_CRUD_PAGE_FORM_SUBMIT"); - dispatch(closeGeneratePageModal()); dispatch(generateTemplateToUpdatePage(payload)); + dispatch(closeGeneratePageModal()); }; const handleFormSubmit = () => {