From c0cd8f38c1d538bebc74d536a23f7b89a74a7c78 Mon Sep 17 00:00:00 2001 From: Jacques Ikot Date: Tue, 17 Dec 2024 08:58:06 +0100 Subject: [PATCH] feat: remove generatePage folder --- .../GeneratePage/components/CrudInfoModal.tsx | 191 ---- .../components/DataSourceOption.tsx | 151 --- .../GeneratePageForm/GeneratePageForm.tsx | 916 ------------------ .../GeneratePageForm/GoogleSheetForm.tsx | 397 -------- .../components/GeneratePageForm/hooks.ts | 679 ------------- .../components/GeneratePageForm/styles.ts | 26 - .../components/GeneratePageForm/types.ts | 8 - .../GeneratePage/components/constants.ts | 57 -- .../src/pages/Editor/GeneratePage/index.tsx | 52 - .../GeneratePage/store/generatePageActions.ts | 15 - 10 files changed, 2492 deletions(-) delete mode 100644 app/client/src/pages/Editor/GeneratePage/components/CrudInfoModal.tsx delete mode 100644 app/client/src/pages/Editor/GeneratePage/components/DataSourceOption.tsx delete mode 100644 app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx delete mode 100644 app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GoogleSheetForm.tsx delete mode 100644 app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/hooks.ts delete mode 100644 app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/styles.ts delete mode 100644 app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/types.ts delete mode 100644 app/client/src/pages/Editor/GeneratePage/components/constants.ts delete mode 100644 app/client/src/pages/Editor/GeneratePage/index.tsx delete mode 100644 app/client/src/pages/Editor/GeneratePage/store/generatePageActions.ts diff --git a/app/client/src/pages/Editor/GeneratePage/components/CrudInfoModal.tsx b/app/client/src/pages/Editor/GeneratePage/components/CrudInfoModal.tsx deleted file mode 100644 index fc442884c1ba..000000000000 --- a/app/client/src/pages/Editor/GeneratePage/components/CrudInfoModal.tsx +++ /dev/null @@ -1,191 +0,0 @@ -import React, { useState, useEffect } from "react"; -import styled from "styled-components"; -import { connect, useDispatch } from "react-redux"; -import type { AppState } from "ee/reducers"; -import AnalyticsUtil from "ee/utils/AnalyticsUtil"; -import { - Button, - Text, - Modal, - ModalContent, - ModalBody, - ModalFooter, -} from "@appsmith/ads"; -import { getCrudInfoModalData } from "selectors/crudInfoModalSelectors"; -import { setCrudInfoModalData } from "actions/crudInfoModalActions"; - -import type { GenerateCRUDSuccessInfoData } from "reducers/uiReducers/crudInfoModalReducer"; -import { - GEN_CRUD_INFO_DIALOG_SUBTITLE, - GEN_CRUD_SUCCESS_MESSAGE, - createMessage, -} from "ee/constants/messages"; -import { getInfoImage, getInfoThumbnail } from "constants/ImagesURL"; -import { - ProgressiveImage, - Container as ProgressiveImageContainer, -} from "@appsmith/ads-old"; -import SuccessTick from "pages/common/SuccessTick"; -import { getAssetUrl } from "ee/utils/airgapHelpers"; - -interface Props { - crudInfoModalOpen: boolean; - generateCRUDSuccessInfo: GenerateCRUDSuccessInfoData | null; -} - -const Content = styled.div` - display: flex; - flex: 1; - flex-direction: column; -`; - -const Wrapper = styled.div` - display: flex; - flex-direction: column; - height: 100%; - max-height: 700px; - min-height: 400px; - - .info-subtitle { - text-align: center; - } -`; - -const ImageWrapper = styled.div` - padding: 40px 0px 10px; - display: flex; - flex: 1; - justify-content: center; - & ${ProgressiveImageContainer} { - width: 100%; - height: 284px; - width: 526px; - } - .progressive-image--thumb, - progressive-image--full { - object-fit: contain; - } - - .progressive-image--thumb { - filter: blur(20px); - opacity: 0.3; - transition: visibility 0ms ease 100ms; - } -`; - -const SuccessContentWrapper = styled.div` - display: flex; - flex: 1; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100%; -`; - -const InfoContentHeadingText = styled.span` - color: var(--ads-v2-color-fg); -`; -const SuccessText = styled(Text)` - color: var(--ads-v2-color-fg-emphasis); -`; -const STEP = { - SHOW_SUCCESS_GIF: "show_success_gif", - SHOW_INFO: "show_info", -}; - -const DELAY_TIME = 3000; - -function InfoContent({ - successImageUrl, - successMessage, -}: { - successMessage: string; - successImageUrl: string; -}) { - return ( - - {/* TODO: Replace this with ADS text */} - - - - - - ); -} - -function GenCRUDSuccessModal(props: Props) { - const { crudInfoModalOpen, generateCRUDSuccessInfo } = props; - - const dispatch = useDispatch(); - const [step, setStep] = useState(STEP.SHOW_SUCCESS_GIF); - - const onClose = () => { - AnalyticsUtil.logEvent("CLOSE_GEN_PAGE_INFO_MODAL"); - dispatch(setCrudInfoModalData({ open: false })); - }; - - const successMessage = - (generateCRUDSuccessInfo && generateCRUDSuccessInfo.successMessage) || - createMessage(GEN_CRUD_INFO_DIALOG_SUBTITLE); - - const successImageUrl = - (generateCRUDSuccessInfo && generateCRUDSuccessInfo.successImageUrl) || - getInfoImage(); - - useEffect(() => { - const timerId = setTimeout(() => { - setStep(STEP.SHOW_INFO); - }, DELAY_TIME); - - return () => { - if (timerId) clearTimeout(timerId); - }; - }, [setStep]); - - return ( - - - - - {step === STEP.SHOW_SUCCESS_GIF ? ( - - - - {" "} - {createMessage(GEN_CRUD_SUCCESS_MESSAGE)} - - - ) : null} - {step === STEP.SHOW_INFO ? ( - - ) : null} - - - - - - - - ); -} - -const mapStateToProps = (state: AppState) => ({ - crudInfoModalOpen: getCrudInfoModalData(state).crudInfoModalOpen, - generateCRUDSuccessInfo: getCrudInfoModalData(state).generateCRUDSuccessInfo, -}); - -export default connect(mapStateToProps)(GenCRUDSuccessModal); diff --git a/app/client/src/pages/Editor/GeneratePage/components/DataSourceOption.tsx b/app/client/src/pages/Editor/GeneratePage/components/DataSourceOption.tsx deleted file mode 100644 index 2b3c2a87d6e2..000000000000 --- a/app/client/src/pages/Editor/GeneratePage/components/DataSourceOption.tsx +++ /dev/null @@ -1,151 +0,0 @@ -import React from "react"; -import styled from "styled-components"; -import { useSelector } from "react-redux"; -import { getPluginImages } from "ee/selectors/entitiesSelector"; -import type { - DropdownOption, - RenderDropdownOptionType, -} from "@appsmith/ads-old"; -import { Classes, Text, TextType } from "@appsmith/ads-old"; -import _ from "lodash"; -import { Tooltip, Icon } from "@appsmith/ads"; -import { getAssetUrl } from "ee/utils/airgapHelpers"; - -// ---------- Helpers and constants ---------- - -export const CONNECT_NEW_DATASOURCE_OPTION_ID = _.uniqueId(); - -// ---------- Styles ---------- - -const OptionWrapper = styled.div<{ - disabled?: boolean; - selected?: boolean; - width?: string; -}>` - display: flex; - align-items: center; - user-select: none; - width: 100%; - - &&& svg { - rect { - fill: ${(props) => props.theme.colors.dropdownIconBg}; - } - } - - .${Classes.TEXT} { - color: ${(props) => - props.disabled - ? "var(--ads-v2-color-fg-muted)" - : "var(--ads-v2-color-fg)"}; - } - - .${Classes.ICON} { - margin-right: ${(props) => props.theme.spaces[5]}px; - svg { - path { - ${(props) => `fill: ${props.theme.colors.dropdown.icon}`}; - } - } - } -`; - -const ImageWrapper = styled.div` - height: 16px; - width: auto; - display: flex; - align-items: center; - margin: 0px 8px 0px 0px; -`; - -export const DatasourceImage = styled.img` - height: 16px; - width: 16px; -`; - -const CreateIconWrapper = styled.div` - margin: 0px 8px 0px 0px; - cursor: pointer; - height: 16px; -`; - -interface DataSourceOptionType extends RenderDropdownOptionType { - dataTestid: string; - optionWidth: string; -} - -function DataSourceOption({ - dataTestid, - isHighlighted, - isSelectedNode, - option: dropdownOption, - optionClickHandler, - optionWidth, -}: DataSourceOptionType) { - const { label } = dropdownOption as DropdownOption; - const pluginImages = useSelector(getPluginImages); - const isConnectNewDataSourceBtn = - CONNECT_NEW_DATASOURCE_OPTION_ID === (dropdownOption as DropdownOption).id; - - const isSupportedForTemplate = (dropdownOption as DropdownOption)?.data - ?.isSupportedForTemplate; - const isNotSupportedDatasource = - !isSupportedForTemplate && !isSelectedNode && !isConnectNewDataSourceBtn; - - const optionCypressSelector = isConnectNewDataSourceBtn - ? ".t--connectNewDatasource-option" - : isSelectedNode - ? "" - : dataTestid; - - return ( - - { - if (isNotSupportedDatasource) { - return; - } - - if (optionClickHandler) { - optionClickHandler(dropdownOption as DropdownOption); - } - }} - selected={isSelectedNode} - width={optionWidth} - > - {isConnectNewDataSourceBtn ? ( - - - - ) : pluginImages[(dropdownOption as DropdownOption)?.data?.pluginId] ? ( - - - - ) : null} - - {label} - - - ); -} - -export default DataSourceOption; diff --git a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx deleted file mode 100644 index ef53e385e747..000000000000 --- a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx +++ /dev/null @@ -1,916 +0,0 @@ -import React, { useEffect, useState, useCallback, useRef } from "react"; -import styled from "styled-components"; -import { useSelector, useDispatch } from "react-redux"; -import { - getDatasources, - getIsFetchingDatasourceStructure, - getGenerateCRUDEnabledPluginMap, - getIsFetchingSinglePluginForm, - getDatasourcesStructure, - getNumberOfEntitiesInCurrentPage, -} from "ee/selectors/entitiesSelector"; - -import type { Datasource } from "entities/Datasource"; -import { - fetchDatasourceStructure, - setDatasourceViewModeFlag, -} from "actions/datasourceActions"; -import { generateTemplateToUpdatePage } from "actions/pageActions"; -import { INTEGRATION_TABS } from "constants/routes"; -import history from "utils/history"; -import { - getGeneratePageModalParams, - getIsGeneratingTemplatePage, -} from "selectors/pageListSelectors"; -import DataSourceOption, { - CONNECT_NEW_DATASOURCE_OPTION_ID, - DatasourceImage, -} from "../DataSourceOption"; -import type { DropdownOption } from "@appsmith/ads-old"; -import { Button, Icon, Text, Select, Option, Tooltip } from "@appsmith/ads"; -import GoogleSheetForm from "./GoogleSheetForm"; -import { - createMessage, - GEN_CRUD_DATASOURCE_DROPDOWN_LABEL, -} from "ee/constants/messages"; -import type { GenerateCRUDEnabledPluginMap } from "api/PluginApi"; -import { - useDatasourceOptions, - useSheetsList, - useSpreadSheets, - useSheetColumnHeaders, - useS3BucketList, -} from "./hooks"; -import AnalyticsUtil from "ee/utils/AnalyticsUtil"; -import type { AppState } from "ee/reducers"; -import type { - DropdownOptions, - DatasourceTableDropdownOption, -} from "../constants"; -import { - PluginFormInputFieldMap, - DEFAULT_DROPDOWN_OPTION, - DROPDOWN_DIMENSION, - ALLOWED_SEARCH_DATATYPE, -} from "../constants"; -import { Bold, Label, SelectWrapper } from "./styles"; -import type { GeneratePagePayload } from "./types"; -import { - getCurrentApplicationId, - getCurrentBasePageId, - getCurrentPageId, -} from "selectors/editorSelectors"; - -import { datasourcesEditorIdURL, integrationEditorURL } from "ee/RouteBuilder"; -import { PluginPackageName } from "entities/Action"; -import { getCurrentAppWorkspace } from "ee/selectors/selectedWorkspaceSelectors"; -import { getPluginImages } from "ee/selectors/entitiesSelector"; -import { getAssetUrl } from "ee/utils/airgapHelpers"; -import { DatasourceCreateEntryPoints } from "constants/Datasource"; -import { isGoogleSheetPluginDS } from "utils/editorContextUtils"; -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 ---------- - -const TooltipWrapper = styled.div` - margin-left: 6px; -`; - -const FormWrapper = styled.div` - display: flex; - flex-direction: column; -`; - -const Row = styled.p` - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: center; - white-space: nowrap; - margin-bottom: 4px; -`; - -const ErrorMsg = styled.span` - font-weight: normal; - font-size: 12px; - line-height: 16px; - letter-spacing: -0.221538px; - color: var(--ads-v2-color-fg-error); - margin-top: var(--ads-spaces-3); -`; - -const HelperMsg = styled.span` - font-weight: normal; - font-size: 12px; - line-height: 16px; - letter-spacing: -0.221538px; - color: var(--ads-v2-color-fg-muted); - margin: 6px 0px 10px; -`; - -const StyledIconWrapper = styled.div` - height: 20px; - width: auto; - display: flex; - align-items: center; - margin: 0px 8px 0px 0px; -`; - -const OptionWrapper = styled.div` - display: flex; - align-items: center; - width: 100%; - position: relative; - - .datasource-sub-text { - position: absolute; - right: 4px; - font-size: 12px; - } -`; -// Constants - -const datasourceIcon = "layout-5-line"; -const columnIcon = "layout-column-line"; - -export const GENERATE_PAGE_MODE = { - NEW: "NEW", // a new page is created for the template. (new pageId created) - REPLACE_EMPTY: "REPLACE_EMPTY", // current page's content (DSL) is updated to template DSL. (same pageId) -}; - -function GeneratePageSubmitBtn({ - disabled, - isLoading, - onSubmit, - showSubmitButton, -}: { - onSubmit: () => void; - isLoading: boolean; - showSubmitButton: boolean; - disabled: boolean; -}) { - return showSubmitButton ? ( -
- -
- ) : null; -} - -enum GeneratePageSelectedViewIconEnum { - PLUGIN_ICON = "plugin-icon", - ADS_ICON = "ads-icon", -} - -// TODO: Fix this the next time the file is edited -// eslint-disable-next-line @typescript-eslint/no-explicit-any -const DatasourceOptionSelectedView = (props: any) => { - const { iconType, option, pluginImages } = props; - - return ( - - - {props.iconType === GeneratePageSelectedViewIconEnum.PLUGIN_ICON && ( - - )} - {iconType === GeneratePageSelectedViewIconEnum.ADS_ICON && ( - - )} - - {option.label} - - ); -}; - -// ---------- GeneratePageForm Component ---------- - -function GeneratePageForm() { - const dispatch = useDispatch(); - const params = useSelector(getGeneratePageModalParams); - - const basePageId = useSelector(getCurrentBasePageId); - const pageId = useSelector(getCurrentPageId); - - const pluginImages = useSelector(getPluginImages); - - const applicationId = useSelector(getCurrentApplicationId); - const workspace = useSelector(getCurrentAppWorkspace); - - const datasources: Datasource[] = useSelector(getDatasources); - const isGeneratingTemplatePage = useSelector(getIsGeneratingTemplatePage); - const numberOfEntities = useSelector(getNumberOfEntitiesInCurrentPage); - const currentMode = useRef( - numberOfEntities > 0 - ? GENERATE_PAGE_MODE.NEW - : GENERATE_PAGE_MODE.REPLACE_EMPTY, - ); - - const [datasourceIdToBeSelected, setDatasourceIdToBeSelected] = - useState(""); - const datasourcesStructure = useSelector(getDatasourcesStructure); - - const generateCRUDSupportedPlugin: GenerateCRUDEnabledPluginMap = useSelector( - getGenerateCRUDEnabledPluginMap, - ); - - const [datasourceTableOptions, setSelectedDatasourceTableOptions] = - useState([]); - - const [selectedTableColumnOptions, setSelectedTableColumnOptions] = - useState([]); - - const [selectedDatasource, selectDataSource] = useState( - DEFAULT_DROPDOWN_OPTION, - ); - - const isFetchingDatasourceStructure = useSelector((state: AppState) => - getIsFetchingDatasourceStructure(state, selectedDatasource.id || ""), - ); - - const [isSelectedTableEmpty, setIsSelectedTableEmpty] = - useState(false); - - const selectedDatasourcePluginId: string = selectedDatasource.data?.pluginId; - const selectedDatasourcePluginPackageName: string = - generateCRUDSupportedPlugin[selectedDatasourcePluginId]; - - const isGoogleSheetPlugin = isGoogleSheetPluginDS( - selectedDatasourcePluginPackageName, - ); - - const isS3Plugin = - selectedDatasourcePluginPackageName === PluginPackageName.S3; - - const isFetchingSheetPluginForm = useSelector((state: AppState) => { - if (isGoogleSheetPlugin) { - return getIsFetchingSinglePluginForm( - state, - selectedDatasource.data?.pluginId, - ); - } - - return false; - }); - - const [selectedTable, selectTable] = useState( - DEFAULT_DROPDOWN_OPTION, - ); - - const [selectedDatasourceIsInvalid, setSelectedDatasourceIsInvalid] = - useState(false); - - const [selectedColumn, selectColumn] = useState( - DEFAULT_DROPDOWN_OPTION, - ); - - const { bucketList, failedFetchingBucketList, isFetchingBucketList } = - useS3BucketList(); - - const onSelectDataSource = useCallback( - ( - datasource: string | undefined, - dataSourceObj: DropdownOption | undefined, - ) => { - if ( - datasource && - dataSourceObj && - selectedDatasource.id !== dataSourceObj.id - ) { - const pluginId: string = dataSourceObj.data.pluginId; - const pluginPackageName: string = generateCRUDSupportedPlugin[pluginId]; - - AnalyticsUtil.logEvent("GEN_CRUD_PAGE_SELECT_DATASOURCE", { - datasourceType: pluginPackageName, - }); - selectDataSource(dataSourceObj); - setSelectedDatasourceTableOptions([]); - setSelectedTableColumnOptions([]); - selectTable(DEFAULT_DROPDOWN_OPTION); - selectColumn(DEFAULT_DROPDOWN_OPTION); - setSelectedDatasourceIsInvalid(false); - - if (dataSourceObj.id) { - switch (pluginPackageName) { - case PluginPackageName.GOOGLE_SHEETS: - break; - default: { - if (dataSourceObj.id) { - dispatch(fetchDatasourceStructure(dataSourceObj.id, true)); - } - } - } - } - } - }, - [ - generateCRUDSupportedPlugin, - selectDataSource, - setSelectedDatasourceTableOptions, - setSelectedTableColumnOptions, - selectTable, - selectColumn, - dispatch, - setSelectedDatasourceIsInvalid, - selectedDatasource, - generateCRUDSupportedPlugin, - ], - ); - - const onSelectTable = useCallback( - ( - table: string | undefined, - TableObj: DatasourceTableDropdownOption | undefined, - ) => { - if (table && TableObj) { - AnalyticsUtil.logEvent("GEN_CRUD_PAGE_SELECT_TABLE"); - selectTable(TableObj); - selectColumn(DEFAULT_DROPDOWN_OPTION); - - if (!isGoogleSheetPlugin && !isS3Plugin) { - const { data } = TableObj; - - if (Array.isArray(data.columns)) { - if (data.columns.length === 0) setIsSelectedTableEmpty(true); - else { - if (isSelectedTableEmpty) setIsSelectedTableEmpty(false); - - const newSelectedTableColumnOptions: DropdownOption[] = []; - - data.columns.map((column) => { - if ( - column.type && - ALLOWED_SEARCH_DATATYPE.includes(column.type.toLowerCase()) - ) { - newSelectedTableColumnOptions.push({ - id: column.name, - label: column.name, - value: column.name, - subText: column.type, - icon: columnIcon, - iconSize: "md", - iconColor: "var(--ads-v2-color-fg)", - }); - } - }); - setSelectedTableColumnOptions(newSelectedTableColumnOptions); - } - } else { - setSelectedTableColumnOptions([]); - } - } - } - }, - [ - isSelectedTableEmpty, - selectTable, - setSelectedTableColumnOptions, - selectColumn, - setIsSelectedTableEmpty, - isGoogleSheetPlugin, - isS3Plugin, - ], - ); - - const onSelectColumn = useCallback( - (table: string | undefined, ColumnObj: DropdownOption | undefined) => { - if (table && ColumnObj) { - AnalyticsUtil.logEvent("GEN_CRUD_PAGE_SELECT_SEARCH_COLUMN"); - selectColumn(ColumnObj); - } - }, - [selectColumn], - ); - - const isFeatureEnabled = useFeatureFlag(FEATURE_FLAG.license_gac_enabled); - - const canCreateDatasource = getHasCreateDatasourcePermission( - isFeatureEnabled, - workspace?.userPermissions || [], - ); - - const spreadSheetsProps = useSpreadSheets({ - setSelectedDatasourceTableOptions, - setSelectedDatasourceIsInvalid, - }); - - // Flag to indicate fetching of datasource configs or structure - const fetchingDatasourceConfigs = - isFetchingDatasourceStructure || - (isFetchingBucketList && isS3Plugin) || - ((isFetchingSheetPluginForm || spreadSheetsProps.isFetchingSpreadsheets) && - isGoogleSheetPlugin); - - // Options for datasource dropdown - const dataSourceOptions = useDatasourceOptions({ - canCreateDatasource, - datasources, - generateCRUDSupportedPlugin, - fetchingDatasourceConfigs, - }); - - const sheetsListProps = useSheetsList(); - - const sheetColumnsHeaderProps = useSheetColumnHeaders(); - - useEffect(() => { - if (isS3Plugin && bucketList && bucketList.length) { - const tables = bucketList.map((bucketName) => ({ - id: bucketName, - label: bucketName, - value: bucketName, - icon: datasourceIcon, - iconSize: "md", - iconColor: "var(--ads-v2-color-fg)", - })); - - setSelectedDatasourceTableOptions(tables as DropdownOptions); - } - }, [bucketList, isS3Plugin, setSelectedDatasourceTableOptions]); - - useEffect(() => { - if ( - selectedDatasource.id && - selectedDatasource.value && - !isFetchingDatasourceStructure - ) { - // when finished fetching datasource structure - const selectedDatasourceStructure = - datasourcesStructure[selectedDatasource.id] || {}; - - const hasError = selectedDatasourceStructure?.error; - - if (hasError) { - setSelectedDatasourceIsInvalid(true); - } else { - setSelectedDatasourceIsInvalid(false); - const tables = selectedDatasourceStructure?.tables; - - if (tables) { - const newTables = tables.map(({ columns, name }) => ({ - id: name, - label: name, - value: name, - icon: datasourceIcon, - iconSize: "md", - iconColor: "var(--ads-v2-color-fg)", - data: { - columns, - }, - })); - - setSelectedDatasourceTableOptions(newTables as DropdownOptions); - } - } - } - }, [ - datasourcesStructure, - selectedDatasource, - isFetchingDatasourceStructure, - setSelectedDatasourceIsInvalid, - setSelectedDatasourceTableOptions, - ]); - - useEffect(() => { - // If there is any datasource id passed in queryParams which needs to be selected - if (datasourceIdToBeSelected) { - if (selectedDatasource.id !== datasourceIdToBeSelected) { - for (let i = 0; i < dataSourceOptions.length; i++) { - if (dataSourceOptions[i].id === datasourceIdToBeSelected) { - onSelectDataSource( - dataSourceOptions[i].value, - dataSourceOptions[i], - ); - setDatasourceIdToBeSelected(""); - break; - } - } - } - } - - // The datasourceOptions can be update in case the environments are refreshed, need to sync the - // selected datasource with the updated datasourceOptions - for (let i = 0; i < dataSourceOptions.length; i++) { - if (dataSourceOptions[i].id === selectedDatasource.id) { - if (!equal(dataSourceOptions[i], selectedDatasource)) - selectDataSource(dataSourceOptions[i]); - - break; - } - } - }, [ - dataSourceOptions, - datasourceIdToBeSelected, - onSelectDataSource, - selectedDatasource, - setDatasourceIdToBeSelected, - selectDataSource, - ]); - - useEffect(() => { - if (params?.datasourceId || params?.new_page) { - const datasourceId = params.datasourceId; - const generateNewPage = params.new_page; - - if (datasourceId) { - if (generateNewPage || numberOfEntities > 0) { - currentMode.current = GENERATE_PAGE_MODE.NEW; - } else { - currentMode.current = GENERATE_PAGE_MODE.REPLACE_EMPTY; - } - - setDatasourceIdToBeSelected(datasourceId); - } - } - }, [numberOfEntities, params, setDatasourceIdToBeSelected]); - - const routeToCreateNewDatasource = () => { - AnalyticsUtil.logEvent("GEN_CRUD_PAGE_CREATE_NEW_DATASOURCE"); - history.push( - integrationEditorURL({ - basePageId, - selectedTab: INTEGRATION_TABS.NEW, - params: { isGeneratePageMode: "generate-page" }, - }), - ); - // Event for datasource creation click - const entryPoint = DatasourceCreateEntryPoints.GENERATE_CRUD; - - AnalyticsUtil.logEvent("NAVIGATE_TO_CREATE_NEW_DATASOURCE_PAGE", { - entryPoint, - }); - dispatch(closeGeneratePageModal()); - }; - - const generatePageAction = (data: GeneratePagePayload) => { - let extraParams = {}; - - if (data.pluginSpecificParams) { - extraParams = { - pluginSpecificParams: data.pluginSpecificParams, - }; - } - - const payload = { - applicationId: applicationId || "", - pageId: - currentMode.current === GENERATE_PAGE_MODE.NEW ? "" : pageId || "", - columns: data.columns || [], - searchColumn: data.searchColumn, - tableName: data.tableName, - datasourceId: selectedDatasource.id || "", - mode: currentMode.current, - ...extraParams, - }; - - AnalyticsUtil.logEvent("GEN_CRUD_PAGE_FORM_SUBMIT"); - dispatch(generateTemplateToUpdatePage(payload)); - dispatch(closeGeneratePageModal()); - }; - - const handleFormSubmit = () => { - const payload = { - columns: [], - searchColumn: selectedColumn.value, - tableName: selectedTable.value || "", - }; - - generatePageAction(payload); - }; - - const goToEditDatasource = () => { - AnalyticsUtil.logEvent("GEN_CRUD_PAGE_EDIT_DATASOURCE_CONFIG", { - datasourceId: selectedDatasource.id, - }); - const redirectURL = datasourcesEditorIdURL({ - basePageId, - datasourceId: selectedDatasource.id as string, - params: { isGeneratePageMode: "generate-page" }, - }); - - 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. - const isValidDatasourceConfig = selectedDatasource.data?.isValid; - - const pluginField: { - TABLE: string; - COLUMN: string; - } = - selectedDatasourcePluginPackageName && - PluginFormInputFieldMap[selectedDatasourcePluginPackageName] - ? PluginFormInputFieldMap[selectedDatasourcePluginPackageName] - : PluginFormInputFieldMap.DEFAULT; - - let tableDropdownErrorMsg = ""; - - const fetchingDatasourceConfigError = - selectedDatasourceIsInvalid || - !isValidDatasourceConfig || - (failedFetchingBucketList && isS3Plugin); - - if (!fetchingDatasourceConfigs) { - if (datasourceTableOptions.length === 0) { - tableDropdownErrorMsg = `Couldn't find any ${pluginField.TABLE}, Please select another datasource`; - } - - if (fetchingDatasourceConfigError) { - tableDropdownErrorMsg = `Failed fetching datasource structure, Please check your datasource configuration`; - } - - if (isSelectedTableEmpty) { - tableDropdownErrorMsg = `Couldn't find any columns, Please select table with columns.`; - } - } - - const showEditDatasourceBtn = - !isFetchingDatasourceStructure && - (selectedDatasourceIsInvalid || !isValidDatasourceConfig) && - !!selectedDatasource.value; - - const showSearchableColumn = - !!selectedTable.value && - !fetchingDatasourceConfigs && - !fetchingDatasourceConfigError && - PluginPackageName.S3 !== selectedDatasourcePluginPackageName; - - const showSubmitButton = - selectedTable.value && - !showEditDatasourceBtn && - !fetchingDatasourceConfigs && - !fetchingDatasourceConfigError && - !!selectedDatasource.value; - - const submitButtonDisable = - !selectedTable.value || !showSubmitButton || isSelectedTableEmpty; - - return ( - - - - - - {selectedDatasource.value ? ( - - - - - {tableDropdownErrorMsg && ( - - {tableDropdownErrorMsg} - - )} - - ) : 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"} - - - )} -
- -
- - ) : ( - void; - disabled: boolean; - isLoading: boolean; - }) => ( - - )} - selectedDatasource={selectedDatasource} - selectedSpreadsheet={selectedTable} - sheetColumnsHeaderProps={sheetColumnsHeaderProps} - sheetsListProps={sheetsListProps} - spreadSheetsProps={spreadSheetsProps} - /> - )} - - ); -} - -export default GeneratePageForm; diff --git a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GoogleSheetForm.tsx b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GoogleSheetForm.tsx deleted file mode 100644 index afd4b55c8220..000000000000 --- a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GoogleSheetForm.tsx +++ /dev/null @@ -1,397 +0,0 @@ -import type { ReactElement } from "react"; -import React, { useState, useEffect, useCallback } from "react"; -import { useSelector, useDispatch } from "react-redux"; -import { getEditorConfig } from "ee/selectors/entitiesSelector"; -import type { AppState } from "ee/reducers"; -import { fetchPluginFormConfig } from "actions/pluginActions"; -import { DROPDOWN_DIMENSION, DEFAULT_DROPDOWN_OPTION } from "../constants"; -import { SelectWrapper, Label, Bold } from "./styles"; -import type { GeneratePagePayload } from "./types"; -import styled from "styled-components"; -import type { - UseSheetListReturn, - UseSpreadSheetsReturn, - UseSheetColumnHeadersReturn, -} from "./hooks"; -import type { DropdownOption } from "@appsmith/ads-old"; -import { getTypographyByKey, Text, TextType } from "@appsmith/ads-old"; -import { debounce } from "lodash"; -import { - createMessage, - GEN_CRUD_TABLE_HEADER_LABEL, - GEN_CRUD_COLUMN_HEADER_TITLE, - GEN_CRUD_NO_COLUMNS, - GEN_CRUD_TABLE_HEADER_TOOLTIP_DESC, -} from "ee/constants/messages"; -import { Icon, Option, Select, Input, Tooltip } from "@appsmith/ads"; - -interface Props { - googleSheetPluginId: string; - selectedDatasource: DropdownOption; - selectedSpreadsheet: DropdownOption; - generatePageAction: (payload: GeneratePagePayload) => void; - renderSubmitButton: ({ - disabled, - isLoading, - onSubmit, - }: { - onSubmit: () => void; - disabled: boolean; - isLoading: boolean; - // TODO: Fix this the next time the file is edited - // eslint-disable-next-line @typescript-eslint/no-explicit-any - }) => ReactElement; - sheetsListProps: UseSheetListReturn; - spreadSheetsProps: UseSpreadSheetsReturn; - sheetColumnsHeaderProps: UseSheetColumnHeadersReturn; -} - -// styles - -const RoundBg = styled.div``; - -const Row = styled.div` - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: center; - margin-bottom: 4px; -`; - -const ColumnName = styled.span` - ${getTypographyByKey("p3")}; - text-align: center; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -`; - -const ColumnInfoWrapper = styled.div` - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: flex-start; - margin-bottom: 24px; - width: ${DROPDOWN_DIMENSION.WIDTH}; - overflow: hidden; - flex-wrap: wrap; - margin-top: 2px; - .cs-text { - color: var(--ads-v2-color-fg-muted); - } -`; - -const ColumnNameWrapper = styled.div` - display: flex; - color: var(--ads-v2-color-fg-muted); -`; - -const RowHeading = styled.p` - ${getTypographyByKey("p1")}; - margin-right: 6px; -`; - -// As TextInput with dataType as number allows `e` as input, hence adding a number validator -// to check for only whole numbers. -export function isNumberValidator(value: string) { - const isValid = (/^\d+$/.test(value) && Number(value) > 0) || value === ""; - - return { - isValid: isValid, - message: !isValid ? "Only numeric value allowed" : "", - }; -} - -// constants - -const MAX_COLUMNS_VISIBLE = 3; - -// ---------- GoogleSheetForm Component ------- - -function GoogleSheetForm(props: Props) { - const { - generatePageAction, - googleSheetPluginId, - renderSubmitButton, - selectedDatasource, - selectedSpreadsheet, - sheetColumnsHeaderProps, - sheetsListProps, - spreadSheetsProps, - } = props; - - const { fetchSheetsList, isFetchingSheetsList, sheetsList } = sheetsListProps; - const { fetchAllSpreadsheets } = spreadSheetsProps; - const { - columnHeaderList, - errorFetchingColumnHeaderList, - fetchColumnHeaderList, - isFetchingColumnHeaderList, - } = sheetColumnsHeaderProps; - - const [tableHeaderIndex, setTableHeaderIndex] = useState("1"); - const [selectedSheet, setSelectedSheet] = useState( - DEFAULT_DROPDOWN_OPTION, - ); - const dispatch = useDispatch(); - - const googleSheetEditorConfig = useSelector((state: AppState) => - getEditorConfig(state, googleSheetPluginId), - ); - - const [sheetQueryRequest, setSheetQueryRequest] = - // TODO: Fix this the next time the file is edited - // eslint-disable-next-line @typescript-eslint/no-explicit-any - useState>({}); - - useEffect(() => { - // Check if google sheet editor config is fetched. - // if not, fetch it. - - if (!googleSheetEditorConfig) { - dispatch( - fetchPluginFormConfig({ - pluginId: selectedDatasource.data?.pluginId, - }), - ); - } - }, [googleSheetEditorConfig]); - - useEffect(() => { - if (googleSheetEditorConfig && googleSheetEditorConfig[0]) { - // TODO: Fix this the next time the file is edited - // eslint-disable-next-line @typescript-eslint/no-explicit-any - const requestObject: Record = {}; - const configs = googleSheetEditorConfig[0]?.children; - - if (Array.isArray(configs)) { - for (let index = 0; index < configs.length; index += 2) { - const keyConfig = configs[index]; - const valueConfig = configs[index + 1]; - - if (keyConfig && valueConfig) { - const key = keyConfig?.initialValue; - const value = valueConfig?.initialValue; - - if (key && value !== undefined) requestObject[key] = value; - } - } - } - - setSheetQueryRequest(requestObject); - } - }, [googleSheetEditorConfig]); - - useEffect(() => { - // On change of datasource selection - // if googleSheetEditorConfig if fetched then get all spreadsheets - if ( - selectedDatasource.value && - selectedDatasource.id && - googleSheetEditorConfig - ) { - fetchAllSpreadsheets({ - selectedDatasourceId: selectedDatasource.id, - pluginId: selectedDatasource?.data?.pluginId, - requestObject: sheetQueryRequest, - }); - } - }, [selectedDatasource.value, googleSheetEditorConfig, dispatch]); - - // When user selects a spreadsheet - // Fetch all sheets inside that spreadsheet - useEffect(() => { - if ( - selectedDatasource.value && - selectedDatasource.id && - selectedSpreadsheet.value - ) { - setSelectedSheet(DEFAULT_DROPDOWN_OPTION); - fetchSheetsList({ - requestObject: sheetQueryRequest, - selectedDatasourceId: selectedDatasource.id, - selectedSpreadsheetUrl: selectedSpreadsheet.value, - pluginId: selectedDatasource?.data?.pluginId, - }); - } - }, [ - selectedSpreadsheet.value, - selectedDatasource.id, - selectedDatasource.value, - dispatch, - fetchSheetsList, - ]); - - const onSelectSheetOption = ( - sheetValue: string | undefined, - sheetObj: DropdownOption | undefined, - ) => { - if (sheetValue && sheetObj) { - setSelectedSheet(sheetObj); - - if (selectedDatasource.id && selectedSpreadsheet.value) { - fetchColumnHeaderList({ - selectedDatasourceId: selectedDatasource.id, - selectedSpreadsheetUrl: selectedSpreadsheet.value, - sheetName: sheetValue, - tableHeaderIndex, - pluginId: selectedDatasource?.data?.pluginId, - requestObject: sheetQueryRequest, - }); - } - } - }; - - const onSubmit = () => { - if (selectedSpreadsheet.value) { - const columns: string[] = []; - - columnHeaderList.forEach(({ value }) => { - if (value) columns.push(value); - }); - const payload = { - columns, - searchColumn: "", - tableName: selectedSheet.value || "", - pluginSpecificParams: { - sheetUrl: selectedSpreadsheet.value, - tableHeaderIndex, - sheetName: selectedSheet.value, - }, - }; - - generatePageAction(payload); - } - }; - - const debouncedFetchColumns = useCallback( - debounce((value: string) => { - if ( - selectedDatasource.id && - selectedSpreadsheet.value && - selectedSheet.value - ) { - fetchColumnHeaderList({ - selectedDatasourceId: selectedDatasource.id, - selectedSpreadsheetUrl: selectedSpreadsheet.value, - pluginId: selectedDatasource?.data?.pluginId, - sheetName: selectedSheet.value, - tableHeaderIndex: value, - requestObject: sheetQueryRequest, - }); - } - }, 200), - [selectedSheet, selectedDatasource, selectedSheet], - ); - - const tableHeaderIndexChangeHandler = (value: string) => { - if (isNumberValidator(value).isValid) { - setTableHeaderIndex(value); - debouncedFetchColumns(value); - } - }; - - return ( - <> - {selectedSpreadsheet.value ? ( - - - - - - ) : null} - - {selectedSheet.value ? ( - - <> - - - {createMessage(GEN_CRUD_TABLE_HEADER_LABEL)} - - - - - - - - - - {columnHeaderList.length ? ( - <> - - {createMessage(GEN_CRUD_COLUMN_HEADER_TITLE)}:  - - {columnHeaderList - .slice(0, MAX_COLUMNS_VISIBLE) - .map((column, index) => ( - - {column.label} - {columnHeaderList.length - 1 === index ? null : ( - ,  - )} - - ))} - {columnHeaderList.length > MAX_COLUMNS_VISIBLE ? ( - - and +{columnHeaderList.length - MAX_COLUMNS_VISIBLE} more. - - ) : ( - "" - )} - - ) : ( - {createMessage(GEN_CRUD_NO_COLUMNS)} - )} - - - - ) : null} - - {selectedSheet.value - ? renderSubmitButton({ - onSubmit, - disabled: - !columnHeaderList.length || - isFetchingColumnHeaderList || - !!errorFetchingColumnHeaderList, - isLoading: isFetchingColumnHeaderList, - }) - : null} - - ); -} - -export default GoogleSheetForm; diff --git a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/hooks.ts b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/hooks.ts deleted file mode 100644 index 7ed2d1460bc6..000000000000 --- a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/hooks.ts +++ /dev/null @@ -1,679 +0,0 @@ -import { useEffect, useState, useCallback } from "react"; -import type { DropdownOptions } from "../constants"; -import type { Datasource } from "entities/Datasource"; -import type { GenerateCRUDEnabledPluginMap } from "api/PluginApi"; -import { CONNECT_NEW_DATASOURCE_OPTION_ID } from "../DataSourceOption"; -import type { executeDatasourceQuerySuccessPayload } from "actions/datasourceActions"; -import { executeDatasourceQuery } from "actions/datasourceActions"; -import type { DropdownOption } from "@appsmith/ads-old"; -import { useDispatch, useSelector } from "react-redux"; -import { PluginPackageName } from "entities/Action"; -import { getCurrentEnvironmentId } from "ee/selectors/environmentSelectors"; -import AnalyticsUtil from "ee/utils/AnalyticsUtil"; - -export const FAKE_DATASOURCE_OPTION = { - CONNECT_NEW_DATASOURCE_OPTION: { - id: CONNECT_NEW_DATASOURCE_OPTION_ID, - label: "Connect new datasource", - value: CONNECT_NEW_DATASOURCE_OPTION_ID, - data: { - pluginId: "", - }, - }, -}; - -export const useDatasourceOptions = ({ - canCreateDatasource, - datasources, - fetchingDatasourceConfigs, - generateCRUDSupportedPlugin, -}: { - canCreateDatasource: boolean; - datasources: Datasource[]; - fetchingDatasourceConfigs: boolean; - generateCRUDSupportedPlugin: GenerateCRUDEnabledPluginMap; -}) => { - const [dataSourceOptions, setDataSourceOptions] = useState( - [], - ); - const currentEnvironment = useSelector(getCurrentEnvironmentId); - - useEffect(() => { - // On mount of component and on change of datasources, Update the list. - const unSupportedDatasourceOptions: DropdownOptions = []; - const supportedDatasourceOptions: DropdownOptions = []; - let newDataSourceOptions: DropdownOptions = []; - - if (canCreateDatasource) { - newDataSourceOptions.push( - FAKE_DATASOURCE_OPTION.CONNECT_NEW_DATASOURCE_OPTION, - ); - } - - datasources.forEach(({ datasourceStorages, id, name, pluginId }) => { - // Doing this since g sheets plugin is not supported for environments - // and we need to show the option in the dropdown - const isGoogleSheetPlugin = - generateCRUDSupportedPlugin.hasOwnProperty(pluginId) && - generateCRUDSupportedPlugin[pluginId] === - PluginPackageName.GOOGLE_SHEETS; - const datasourceStorage = isGoogleSheetPlugin - ? Object.values(datasourceStorages)[0] - : datasourceStorages[currentEnvironment]; - const datasourceObject = { - id, - label: name, - value: name, - data: { - pluginId, - isSupportedForTemplate: !!generateCRUDSupportedPlugin[pluginId], - isValid: datasourceStorage?.isValid, - }, - }; - - if (generateCRUDSupportedPlugin[pluginId]) - supportedDatasourceOptions.push(datasourceObject); - else { - unSupportedDatasourceOptions.push(datasourceObject); - } - }); - newDataSourceOptions = newDataSourceOptions.concat( - supportedDatasourceOptions, - unSupportedDatasourceOptions, - ); - setDataSourceOptions(newDataSourceOptions); - }, [ - datasources, - setDataSourceOptions, - generateCRUDSupportedPlugin, - fetchingDatasourceConfigs, - ]); - - return dataSourceOptions; -}; - -// const GOOGLE_SHEET_METHODS = { -// GET_ALL_SPREADSHEETS: "LIST", // Get all the spreadsheets -// GET_ALL_SHEETS: "INFO", // fetch all the sub-sheets -// GET_ALL_COLUMNS: "GET_STRUCTURE", // Get column names -// }; - -// const demoRequest: Record = { -// method: "", -// sheetUrl: "", -// range: "", -// spreadsheetName: "", -// tableHeaderIndex: "1", -// queryFormat: "ROWS", -// rowLimit: "", -// sheetName: "", -// rowOffset: "", -// rowObject: "", -// rowObjects: "", -// rowIndex: "", -// deleteFormat: "SHEET", -// }; - -interface FetchAllSpreadSheets { - selectedDatasourceId: string; - pluginId: string; - // TODO: Fix this the next time the file is edited - // eslint-disable-next-line @typescript-eslint/no-explicit-any - requestObject?: Record; -} - -export interface UseSpreadSheetsReturn { - fetchAllSpreadsheets: ({ - requestObject, - selectedDatasourceId, - }: FetchAllSpreadSheets) => void; - isFetchingSpreadsheets: boolean; - failedFetchingSpreadsheets: boolean; -} - -export const useSpreadSheets = ({ - setSelectedDatasourceIsInvalid, - setSelectedDatasourceTableOptions, -}: { - setSelectedDatasourceIsInvalid: (isInvalid: boolean) => void; - setSelectedDatasourceTableOptions: (tableOptions: DropdownOptions) => void; -}): UseSpreadSheetsReturn => { - const dispatch = useDispatch(); - - // const [spreadsheetsList, setSpreadsheets] = useState([]); - - const [isFetchingSpreadsheets, setIsFetchingSpreadsheets] = - useState(false); - const [failedFetchingSpreadsheets, setFailedFetchingSpreadsheets] = - useState(false); - - // TODO :- Create loading state and set Loading state false on success or error - const onFetchAllSpreadsheetFailure = useCallback(() => { - setIsFetchingSpreadsheets(false); - setFailedFetchingSpreadsheets(true); - }, [setIsFetchingSpreadsheets]); - - const onFetchAllSpreadsheetSuccess = useCallback( - ( - payload: executeDatasourceQuerySuccessPayload< - Array<{ label: string; value: string }> - >, - ) => { - setIsFetchingSpreadsheets(false); - - if (payload.data && payload.data.trigger) { - const spreadSheets = payload.data.trigger; - - if (Array.isArray(spreadSheets)) { - setSelectedDatasourceTableOptions(spreadSheets); - } else { - // to handle error like "401 Unauthorized" - setSelectedDatasourceIsInvalid(true); - } - } - }, - [ - setSelectedDatasourceIsInvalid, - setSelectedDatasourceTableOptions, - setIsFetchingSpreadsheets, - ], - ); - - const fetchAllSpreadsheets = useCallback( - ({ - pluginId, - requestObject, - selectedDatasourceId, - }: FetchAllSpreadSheets) => { - setIsFetchingSpreadsheets(true); - setFailedFetchingSpreadsheets(false); - const formattedRequestData = { - datasourceId: selectedDatasourceId, - displayType: "DROP_DOWN", - pluginId, - requestType: "SPREADSHEET_SELECTOR", - ...requestObject, - }; - - dispatch( - executeDatasourceQuery({ - payload: { - datasourceId: selectedDatasourceId, - data: formattedRequestData, - isGeneratePage: true, - }, - onSuccessCallback: onFetchAllSpreadsheetSuccess, - onErrorCallback: onFetchAllSpreadsheetFailure, - }), - ); - }, - [ - onFetchAllSpreadsheetSuccess, - onFetchAllSpreadsheetFailure, - setIsFetchingSpreadsheets, - setFailedFetchingSpreadsheets, - ], - ); - - return { - fetchAllSpreadsheets, - // spreadsheetsList, - isFetchingSpreadsheets, - failedFetchingSpreadsheets, - }; -}; - -// Types - -export interface GridProperties { - rowCount: number; - columnCount: number; -} - -export interface Sheet { - sheetId: number; - title: string; - index: number; - sheetType: string; - gridProperties: GridProperties; -} - -export type Sheets = Sheet[]; - -export const getSheetUrl = (sheetId: string): string => - `https://docs.google.com/spreadsheets/d/${sheetId}/edit#gid=0`; - -export interface FetchSheetsList { - selectedDatasourceId: string; - selectedSpreadsheetUrl: string; - pluginId: string; - // TODO: Fix this the next time the file is edited - // eslint-disable-next-line @typescript-eslint/no-explicit-any - requestObject?: Record; -} - -export interface FetchSheetData { - selectedDatasourceId: string; - selectedSpreadsheetUrl: string; - selectedSheetName: string; - pluginId: string; - // TODO: Fix this the next time the file is edited - // eslint-disable-next-line @typescript-eslint/no-explicit-any - requestObject?: Record; -} - -export interface UseSheetListReturn { - sheetsList: DropdownOption[]; - isFetchingSheetsList: boolean; - failedFetchingSheetsList: boolean; - fetchSheetsList: ({ - requestObject, - selectedDatasourceId, - selectedSpreadsheetUrl, - }: FetchSheetsList) => void; -} - -export interface UseSheetDataReturn { - // TODO: Fix this the next time the file is edited - // eslint-disable-next-line @typescript-eslint/no-explicit-any - sheetData: Array; - isFetchingSheetData: boolean; - failedFetchingSheetData: boolean; - fetchSheetData: ({ - requestObject, - selectedDatasourceId, - selectedSheetName, - selectedSpreadsheetUrl, - }: FetchSheetData) => void; -} - -export interface UseSheetListProps { - setSheetOptions?: (tableOptions: DropdownOptions) => void; -} - -export interface UseSheetDataProps { - setSheetData?: (tableOptions: DropdownOptions) => void; -} - -export const useSheetsList = ( - props: UseSheetListProps = {}, -): UseSheetListReturn => { - const dispatch = useDispatch(); - - const [sheetsList, setSheetsList] = useState([]); - - const [isFetchingSheetsList, setIsFetchingSheetsList] = - useState(false); - const [failedFetchingSheetsList, setFailedFetchingSheetsList] = - useState(false); - - const onFetchAllSheetFailure = useCallback(() => { - setIsFetchingSheetsList(false); - setFailedFetchingSheetsList(true); - }, [setIsFetchingSheetsList]); - - const onFetchAllSheetSuccess = useCallback( - ( - payload: executeDatasourceQuerySuccessPayload< - Array<{ label: string; value: string }> - >, - ) => { - setIsFetchingSheetsList(false); - - if (payload.data && payload.data.trigger) { - const responseBody = payload.data.trigger; - - if (Array.isArray(responseBody)) { - setSheetsList(responseBody); - props.setSheetOptions && props.setSheetOptions(responseBody); - } else { - // to handle error like "401 Unauthorized" - } - } - }, - [setSheetsList, setIsFetchingSheetsList, props.setSheetOptions], - ); - - const fetchSheetsList = useCallback( - ({ - pluginId, - // requestObject, - selectedDatasourceId, - selectedSpreadsheetUrl, - }: FetchSheetsList) => { - setSheetsList([]); - props.setSheetOptions && props.setSheetOptions([]); - setIsFetchingSheetsList(true); - setFailedFetchingSheetsList(false); - const formattedRequestData = { - datasourceId: selectedDatasourceId, - displayType: "DROP_DOWN", - parameters: { - sheetUrl: selectedSpreadsheetUrl, - }, - pluginId: pluginId, - requestType: "SHEET_SELECTOR", - }; - - dispatch( - executeDatasourceQuery({ - payload: { - datasourceId: selectedDatasourceId, - data: formattedRequestData, - isGeneratePage: true, - }, - onSuccessCallback: onFetchAllSheetSuccess, - onErrorCallback: onFetchAllSheetFailure, - }), - ); - }, - [ - setSheetsList, - onFetchAllSheetSuccess, - onFetchAllSheetFailure, - setIsFetchingSheetsList, - setFailedFetchingSheetsList, - props.setSheetOptions, - ], - ); - - return { - sheetsList, - isFetchingSheetsList, - failedFetchingSheetsList, - fetchSheetsList, - }; -}; - -export const useSheetData = ( - props: UseSheetDataProps = {}, -): UseSheetDataReturn => { - const dispatch = useDispatch(); - - // TODO: Fix this the next time the file is edited - // eslint-disable-next-line @typescript-eslint/no-explicit-any - const [sheetData, setSheetData] = useState([]); - - const [isFetchingSheetData, setIsFetchingSheetData] = - useState(false); - const [failedFetchingSheetData, setFailedFetchingSheetData] = - useState(false); - - const onFetchAllSheetFailure = useCallback( - (error: string) => { - setIsFetchingSheetData(false); - setFailedFetchingSheetData(true); - AnalyticsUtil.logEvent("DATA_FETCH_FAILED_POST_SCHEMA_FETCH", { - error: error, - }); - }, - [setIsFetchingSheetData], - ); - - const onFetchAllSheetSuccess = useCallback( - ( - payload: executeDatasourceQuerySuccessPayload< - Array<{ label: string; value: string }> - >, - ) => { - setIsFetchingSheetData(false); - - if (payload.data && payload.data.trigger) { - const responseBody = payload.data.trigger; - - if (Array.isArray(responseBody)) { - setSheetData(responseBody); - props.setSheetData && props.setSheetData(responseBody); - } else { - // to handle error like "401 Unauthorized" - AnalyticsUtil.logEvent( - "DATA_FETCH_FAILED_POST_SCHEMA_FETCH", - { error: payload }, // sending the entire payload here because it is not clear if there is a distinct - // field holding the error message - ); - } - } - }, - [setSheetData, setIsFetchingSheetData, props.setSheetData], - ); - - const fetchSheetData = useCallback( - ({ - pluginId, - selectedDatasourceId, - selectedSheetName, - selectedSpreadsheetUrl, - }: FetchSheetData) => { - setSheetData([]); - props.setSheetData && props.setSheetData([]); - setIsFetchingSheetData(true); - setFailedFetchingSheetData(false); - const formattedRequestData = { - datasourceId: selectedDatasourceId, - displayType: "DROP_DOWN", - parameters: { - sheetUrl: selectedSpreadsheetUrl, - sheetName: selectedSheetName, - queryFormat: "ROWS", - tableHeaderIndex: 1, - }, - pluginId: pluginId, - requestType: "SHEET_DATA", - }; - - dispatch( - executeDatasourceQuery({ - payload: { - datasourceId: selectedDatasourceId, - data: formattedRequestData, - isGeneratePage: true, - }, - onSuccessCallback: onFetchAllSheetSuccess, - onErrorCallback: onFetchAllSheetFailure, - }), - ); - }, - [ - setSheetData, - onFetchAllSheetSuccess, - onFetchAllSheetFailure, - setIsFetchingSheetData, - setFailedFetchingSheetData, - props.setSheetData, - ], - ); - - return { - sheetData, - isFetchingSheetData, - failedFetchingSheetData, - fetchSheetData, - }; -}; - -export interface FetchColumnHeaderListParams { - selectedDatasourceId: string; - selectedSpreadsheetUrl: string; - sheetName: string; - pluginId: string; - tableHeaderIndex: string; - // TODO: Fix this the next time the file is edited - // eslint-disable-next-line @typescript-eslint/no-explicit-any - requestObject?: Record; //possily unneccesary -} - -export interface UseSheetColumnHeadersReturn { - columnHeaderList: DropdownOption[]; - isFetchingColumnHeaderList: boolean; - errorFetchingColumnHeaderList: string; - fetchColumnHeaderList: ({ - selectedDatasourceId, - selectedSpreadsheetUrl, - sheetName, - tableHeaderIndex, - }: FetchColumnHeaderListParams) => void; -} - -export const useSheetColumnHeaders = () => { - const dispatch = useDispatch(); - - const [columnHeaderList, setColumnHeaderList] = useState( - [], - ); - - const [isFetchingColumnHeaderList, setIsFetchingColumnHeaderList] = - useState(false); - const [errorFetchingColumnHeaderList, setErrorFetchingColumnHeaderList] = - useState(""); - - const onFetchColumnHeadersFailure = useCallback( - (error: string) => { - setIsFetchingColumnHeaderList(false); - setErrorFetchingColumnHeaderList(error); - setColumnHeaderList([]); - }, - [setErrorFetchingColumnHeaderList, setIsFetchingColumnHeaderList], - ); - - const onFetchColumnHeadersSuccess = useCallback( - ( - payload: executeDatasourceQuerySuccessPayload[]>, - ) => { - setIsFetchingColumnHeaderList(false); - - if (payload.data && payload.data.trigger) { - const responseBody = payload.data.trigger; - - if (Array.isArray(responseBody)) { - setColumnHeaderList(responseBody); - } else { - let error = "Failed fetching Column headers"; - - if (typeof responseBody === "string") { - error = responseBody; - } - - setColumnHeaderList([]); - setErrorFetchingColumnHeaderList(error); - } - } - }, - [ - setColumnHeaderList, - setIsFetchingColumnHeaderList, - setErrorFetchingColumnHeaderList, - ], - ); - - const fetchColumnHeaderList = useCallback( - (params: FetchColumnHeaderListParams) => { - setIsFetchingColumnHeaderList(true); - setErrorFetchingColumnHeaderList(""); - const formattedRequestData = { - datasourceId: params.selectedDatasourceId, - displayType: "DROP_DOWN", - parameters: { - sheetName: params.sheetName, - sheetUrl: params.selectedSpreadsheetUrl, - tableHeaderIndex: params.tableHeaderIndex, - }, - pluginId: params.pluginId, - requestType: "COLUMNS_SELECTOR", - }; - - dispatch( - executeDatasourceQuery({ - payload: { - datasourceId: params.selectedDatasourceId, - data: formattedRequestData, - isGeneratePage: true, - }, - onSuccessCallback: onFetchColumnHeadersSuccess, - onErrorCallback: onFetchColumnHeadersFailure, - }), - ); - }, - [ - onFetchColumnHeadersSuccess, - onFetchColumnHeadersFailure, - setIsFetchingColumnHeaderList, - setErrorFetchingColumnHeaderList, - ], - ); - - return { - columnHeaderList, - isFetchingColumnHeaderList, - errorFetchingColumnHeaderList, - fetchColumnHeaderList, - }; -}; - -const payload = [ - { - value: "LIST_BUCKETS", - }, -]; - -export const useS3BucketList = () => { - const dispatch = useDispatch(); - - const [bucketList, setBucketList] = useState>([]); - const [isFetchingBucketList, setIsFetchingBucketList] = - useState(false); - const [failedFetchingBucketList, setFailedFetchingBucketList] = - useState(false); - const onFetchBucketSuccess = useCallback( - ( - payload: executeDatasourceQuerySuccessPayload<{ - bucketList: Array; - }>, - ) => { - setIsFetchingBucketList(false); - - if (payload.data && payload.data.body) { - const payloadBody = payload.data.body; - - if (Array.isArray(payloadBody.bucketList)) { - const { bucketList: list = [] } = payloadBody; - - setBucketList(list); - } - } - }, - [setBucketList, setIsFetchingBucketList], - ); - - const onFetchBucketFailure = useCallback(() => { - setIsFetchingBucketList(false); - setFailedFetchingBucketList(true); - }, [setIsFetchingBucketList]); - - const fetchBucketList = useCallback( - ({ selectedDatasource }: { selectedDatasource: DropdownOption }) => { - if (selectedDatasource.id) { - setIsFetchingBucketList(true); - setFailedFetchingBucketList(false); - dispatch( - executeDatasourceQuery({ - payload: { - datasourceId: selectedDatasource.id, - data: payload, - isGeneratePage: true, - }, - onSuccessCallback: onFetchBucketSuccess, - onErrorCallback: onFetchBucketFailure, - }), - ); - } - }, - [onFetchBucketSuccess, onFetchBucketFailure, setIsFetchingBucketList], - ); - - return { - bucketList, - isFetchingBucketList, - failedFetchingBucketList, - fetchBucketList, - }; -}; diff --git a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/styles.ts b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/styles.ts deleted file mode 100644 index 2115a5ab44bd..000000000000 --- a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/styles.ts +++ /dev/null @@ -1,26 +0,0 @@ -import styled from "styled-components"; -import { getTypographyByKey } from "@appsmith/ads-old"; - -export const SelectWrapper = styled.div<{ width: string }>` - display: inline-block; - margin: 8px 0; - max-width: ${(props) => props.width}; - width: 100%; - &:first-child { - margin-top: 16px; - } -`; - -export const Label = styled.p` - flex: 1; - ${getTypographyByKey("p1")}; - white-space: nowrap; - display: flex; - align-items: center; - margin-bottom: 4px; -`; - -export const Bold = styled.span` - font-weight: 500; - /* margin-left: 2px; */ -`; diff --git a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/types.ts b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/types.ts deleted file mode 100644 index b6882e97c848..000000000000 --- a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/types.ts +++ /dev/null @@ -1,8 +0,0 @@ -export interface GeneratePagePayload { - tableName: string; - columns?: string[]; - searchColumn?: string; - // TODO: Fix this the next time the file is edited - // eslint-disable-next-line @typescript-eslint/no-explicit-any - pluginSpecificParams?: Record; -} diff --git a/app/client/src/pages/Editor/GeneratePage/components/constants.ts b/app/client/src/pages/Editor/GeneratePage/components/constants.ts deleted file mode 100644 index 94092f4d71f1..000000000000 --- a/app/client/src/pages/Editor/GeneratePage/components/constants.ts +++ /dev/null @@ -1,57 +0,0 @@ -import type { DropdownOption } from "@appsmith/ads-old"; -import type { DatasourceTable } from "entities/Datasource"; -import { PluginPackageName } from "entities/Action"; - -export type DropdownOptions = Array; - -export interface DatasourceTableDropdownOption extends DropdownOption { - data: DatasourceTable; -} - -export const PluginFormInputFieldMap: Record< - string, - { DATASOURCE: string; TABLE: string; COLUMN: string } -> = { - [PluginPackageName.MONGO]: { - DATASOURCE: "MongoDB", - TABLE: "collection", - COLUMN: "field", - }, - [PluginPackageName.S3]: { - DATASOURCE: "S3", - TABLE: "bucket", - COLUMN: "keys", - }, - [PluginPackageName.GOOGLE_SHEETS]: { - DATASOURCE: "Google Sheets", - TABLE: "spreadsheet", - COLUMN: "keys", - }, - DEFAULT: { - DATASOURCE: "SQL Based", - TABLE: "table", - COLUMN: "column", - }, -}; - -export const DROPDOWN_DIMENSION = { - HEIGHT: "36px", - WIDTH: "404px", -}; - -export const DEFAULT_DROPDOWN_OPTION = { - id: "- Select -", - label: "- Select -", - value: "", - onSelect: () => null, - data: {}, -}; - -export const ALLOWED_SEARCH_DATATYPE = [ - "text", - "string", - "char", - "varchar", - "character", - "text string", -]; diff --git a/app/client/src/pages/Editor/GeneratePage/index.tsx b/app/client/src/pages/Editor/GeneratePage/index.tsx deleted file mode 100644 index 72d181bd56b4..000000000000 --- a/app/client/src/pages/Editor/GeneratePage/index.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import React, { useCallback } from "react"; -import { - Modal, - ModalBody, - ModalContent, - ModalHeader, - Text, -} from "@appsmith/ads"; -import { - createMessage, - GENERATE_PAGE_FORM_TITLE, - GENERATE_PAGE_FORM_SUB_TITLE, -} from "ee/constants/messages"; -import GeneratePageForm from "./components/GeneratePageForm/GeneratePageForm"; -import { useSelector, useDispatch } from "react-redux"; -import { getIsGeneratePageModalOpen } from "selectors/pageListSelectors"; -import { - closeGeneratePageModal, - openGeneratePageModal, -} from "./store/generatePageActions"; - -function GeneratePageModal() { - const dispatch = useDispatch(); - const isOpen = useSelector(getIsGeneratePageModalOpen); - - const handleModalOpenChange = useCallback( - (modalState: boolean) => { - if (modalState) { - dispatch(openGeneratePageModal()); - } else { - dispatch(closeGeneratePageModal()); - } - }, - [dispatch], - ); - - return ( - - - {createMessage(GENERATE_PAGE_FORM_TITLE)} - - - {createMessage(GENERATE_PAGE_FORM_SUB_TITLE)} - - - - - - ); -} - -export default GeneratePageModal; diff --git a/app/client/src/pages/Editor/GeneratePage/store/generatePageActions.ts b/app/client/src/pages/Editor/GeneratePage/store/generatePageActions.ts deleted file mode 100644 index a04a4f7872cf..000000000000 --- a/app/client/src/pages/Editor/GeneratePage/store/generatePageActions.ts +++ /dev/null @@ -1,15 +0,0 @@ -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, - }; -};