From 4fa787b37a9a313070c52b51181c4a6c6f0dd04f Mon Sep 17 00:00:00 2001 From: Naumov Alexey Date: Fri, 2 Oct 2020 18:17:50 +0300 Subject: [PATCH 1/2] fix(core-connections): added not connections found placeholder CB-331 --- .../CreateConnection/DatabaseList.tsx | 22 +++++++++++++------ .../CreateConnection/SearchDatabase.tsx | 2 +- .../core-localization/src/locales/en.ts | 1 + .../core-localization/src/locales/ru.ts | 1 + 4 files changed, 18 insertions(+), 8 deletions(-) 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..3f7100e476 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,31 @@ 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 onSearchHandler = useCallback(() => { + onSearch && onSearch().then(() => { + setIsSearched(true); + }); + }, [onSearch]); return styled(styles)( - + {databases.map(database => ( ))} - {!databases.length &&
{translate('connections_administration_search_database_tip')}
} + {!databases.length && !isSearched && {translate('connections_administration_search_database_tip')}} + {!databases.length && isSearched && {translate('ui_no_matches_placeholder')}} ); }); 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', 'Сессия истекла. Хотите перезагрузить страницу?'], From c323f1458f2515058544a4369161e202638ec1be Mon Sep 17 00:00:00 2001 From: Naumov Alexey Date: Sun, 4 Oct 2020 19:48:53 +0300 Subject: [PATCH 2/2] fix(core-connections): no connections found placeholder(refactored) CB-331 --- .../CreateConnection/DatabaseList.tsx | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) 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 3f7100e476..df0c673a0f 100644 --- a/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/DatabaseList.tsx +++ b/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/DatabaseList.tsx @@ -41,22 +41,25 @@ export const DatabaseList = observer(function DatabaseList({ const translate = useTranslate(); const [isSearched, setIsSearched] = useState(false); - const onSearchHandler = useCallback(() => { - onSearch && onSearch().then(() => { - setIsSearched(true); - }); + 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 && !isSearched && {translate('connections_administration_search_database_tip')}} - {!databases.length && isSearched && {translate('ui_no_matches_placeholder')}} + {!databases.length && {translate(placeholderMessage)}} ); });