diff --git a/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/DatabaseList.tsx b/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/DatabaseList.tsx index 3077aa7349..df0c673a0f 100644 --- a/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/DatabaseList.tsx +++ b/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/DatabaseList.tsx @@ -7,9 +7,12 @@ */ import { observer } from 'mobx-react'; +import { useCallback, useState } from 'react'; import styled, { css } from 'reshadow'; -import { ItemListSearch, ItemList, SubmittingForm } from '@cloudbeaver/core-blocks'; +import { + ItemListSearch, ItemList, SubmittingForm, TextPlaceholder +} from '@cloudbeaver/core-blocks'; import { useTranslate } from '@cloudbeaver/core-localization'; import { AdminConnectionSearchInfo } from '@cloudbeaver/core-sdk'; @@ -20,9 +23,6 @@ const styles = css` display: flex; flex-direction: column; } - center { - margin: auto; - } `; type Props = { @@ -32,23 +32,34 @@ type Props = { className?: string; onSelect(database: AdminConnectionSearchInfo): void; onChange(hosts: string): void; - onSearch?(): void; + onSearch?(): Promise; } export const DatabaseList = observer(function DatabaseList({ databases, hosts, disabled, className, onSelect, onChange, onSearch, }: Props) { const translate = useTranslate(); + const [isSearched, setIsSearched] = useState(false); + + const searchHandler = useCallback(() => { + if (onSearch) { + onSearch().then(() => { + setIsSearched(true); + }); + } + }, [onSearch]); + + const placeholderMessage = isSearched ? 'ui_no_matches_placeholder' : 'connections_administration_search_database_tip'; return styled(styles)( - + {databases.map(database => ( ))} - {!databases.length &&
{translate('connections_administration_search_database_tip')}
} + {!databases.length && {translate(placeholderMessage)}}
); }); diff --git a/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/SearchDatabase.tsx b/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/SearchDatabase.tsx index 50b2c98676..eb3c691898 100644 --- a/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/SearchDatabase.tsx +++ b/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/SearchDatabase.tsx @@ -18,7 +18,7 @@ type Props = { disabled?: boolean; onSelect(database: AdminConnectionSearchInfo): void; onChange(hosts: string): void; - onSearch?(): void; + onSearch?(): Promise; className?: string; } diff --git a/webapp/packages/core-localization/src/locales/en.ts b/webapp/packages/core-localization/src/locales/en.ts index fdf13e62d5..f51dbdbc6f 100644 --- a/webapp/packages/core-localization/src/locales/en.ts +++ b/webapp/packages/core-localization/src/locales/en.ts @@ -18,6 +18,7 @@ export const defaultENLocale = [ ['ui_search', 'Search...'], ['ui_delete', 'Delete'], ['ui_data_saving_error', 'Error when saving changes'], + ['ui_no_matches_placeholder', 'Your search returned no matches.'], ['root_permission_denied', 'You has no permission'], ['app_root_session_expired_title', 'Session expired'], ['app_root_session_expired_message', 'Session has been expired. Do you want to reload?'], diff --git a/webapp/packages/core-localization/src/locales/ru.ts b/webapp/packages/core-localization/src/locales/ru.ts index 1d827a7653..b683116dbf 100644 --- a/webapp/packages/core-localization/src/locales/ru.ts +++ b/webapp/packages/core-localization/src/locales/ru.ts @@ -16,6 +16,7 @@ export const defaultRULocale = [ ['ui_search', 'Поиск...'], ['ui_delete', 'Удалить'], ['ui_data_saving_error', 'Ошибка при сохранении изменений'], + ['ui_no_matches_placeholder', 'По вашему запросу ничего не найдено.'], ['root_permission_denied', 'Отказано в доступе'], ['app_root_session_expired_title', 'Сесстия истекла'], ['app_root_session_expired_message', 'Сессия истекла. Хотите перезагрузить страницу?'],