From f63bbdd5121f0ae8122b769d32673328d1abadc0 Mon Sep 17 00:00:00 2001 From: Rishabh-Rathod Date: Tue, 24 Aug 2021 19:02:27 +0530 Subject: [PATCH 1/2] Add Empty Table error message & Fixes #6824 --- app/client/src/components/ads/Dropdown.tsx | 6 +- .../GeneratePageForm/GeneratePageForm.tsx | 61 ++++++++++++------- 2 files changed, 41 insertions(+), 26 deletions(-) diff --git a/app/client/src/components/ads/Dropdown.tsx b/app/client/src/components/ads/Dropdown.tsx index 1b882a8737c7..cec3c89e9762 100644 --- a/app/client/src/components/ads/Dropdown.tsx +++ b/app/client/src/components/ads/Dropdown.tsx @@ -386,7 +386,7 @@ export function RenderDropdownOptions(props: DropdownOptionsProps) { setOptions(filteredOptions); onSearch && onSearch(searchStr); }; - return ( + return options.length > 0 ? ( - ); + ) : null; } export default function Dropdown(props: DropdownProps) { @@ -489,7 +489,7 @@ export default function Dropdown(props: DropdownProps) { [onSelect], ); - const disabled = props.disabled || isLoading || !!errorMsg; + const disabled = props.disabled || isLoading; const downIconColor = errorMsg ? Colors.POMEGRANATE2 : Colors.DARK_GRAY; const dropdownHeight = props.height ? props.height : "38px"; 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 727390968dc7..a81811dea552 100644 --- a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx +++ b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx @@ -147,7 +147,7 @@ function GeneratePageSubmitBtn({ data-cy="t--generate-page-form-submit" disabled={disabled} isLoading={isLoading} - onClick={onSubmit} + onClick={() => !disabled && onSubmit()} size={Size.large} text="Generate Page" type="button" @@ -195,6 +195,10 @@ function GeneratePageForm() { DEFAULT_DROPDOWN_OPTION, ); + const [isSelectedTableEmpty, setIsSelectedTableEmpty] = useState( + false, + ); + const selectedDatasourcePluginId: string = selectedDatasource.data?.pluginId; const selectedDatasourcePluginPackageName: string = generateCRUDSupportedPlugin[selectedDatasourcePluginId]; @@ -296,24 +300,26 @@ function GeneratePageForm() { const { data } = TableObj; if (Array.isArray(data.columns)) { - 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: IconSize.LARGE, - iconColor: Colors.GOLD, - }); - } - }); - if (newSelectedTableColumnOptions) { + 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: IconSize.LARGE, + iconColor: Colors.GOLD, + }); + } + }); setSelectedTableColumnOptions(newSelectedTableColumnOptions); } } else { @@ -323,9 +329,11 @@ function GeneratePageForm() { } }, [ + isSelectedTableEmpty, selectTable, setSelectedTableColumnOptions, selectColumn, + setIsSelectedTableEmpty, isGoogleSheetPlugin, isS3Plugin, ], @@ -513,7 +521,6 @@ function GeneratePageForm() { history.push(redirectURL); }; - const submitButtonDisable = !selectedTable.value; // 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; @@ -546,6 +553,9 @@ function GeneratePageForm() { 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 = @@ -557,11 +567,16 @@ function GeneratePageForm() { !!selectedTable.value && PLUGIN_PACKAGE_NAME.S3 !== selectedDatasourcePluginPackageName; - const showSubmitButton = selectedTable.value && !showEditDatasourceBtn; - !fetchingDatasourceConfigs && - fetchingDatasourceConfigError && + const showSubmitButton = + selectedTable.value && + !showEditDatasourceBtn && + !fetchingDatasourceConfigs && + !fetchingDatasourceConfigError && !!selectedDatasource.value; + const submitButtonDisable = + !selectedTable.value || !showSubmitButton || isSelectedTableEmpty; + return (
From 716bd2b202f5a1686800b8e2bf63bbc289a075b4 Mon Sep 17 00:00:00 2001 From: Rishabh-Rathod Date: Tue, 24 Aug 2021 19:16:48 +0530 Subject: [PATCH 2/2] Fix commit semantic issue --- .../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 a81811dea552..adbcb4e4caa3 100644 --- a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx +++ b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx @@ -383,7 +383,7 @@ function GeneratePageForm() { selectedDatasource.value && !isFetchingDatasourceStructure ) { - // On finished fetching datasource structure + // when finished fetching datasource structure const selectedDatasourceStructure = datasourcesStructure[selectedDatasource.id] || {};