Merge remote-tracking branch 'origin/devel' into devel

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<void>;
 }
 
 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)(
     <SubmittingForm onSubmit={onSearch} className={className}>
       <ItemList>
-        <ItemListSearch value={hosts} placeholder={translate('connections_administration_search_database_tip')} onChange={onChange} onSearch={onSearch} disabled={disabled}/>
+        <ItemListSearch value={hosts} placeholder={translate('connections_administration_search_database_tip')} onChange={onChange} onSearch={searchHandler} disabled={disabled}/>
         {databases.map(database => (
           <Database key={database.host + database.port} database={database} onSelect={onSelect}/>
         ))}
       </ItemList>
-      {!databases.length && <center as='div'>{translate('connections_administration_search_database_tip')}</center>}
+      {!databases.length && <TextPlaceholder>{translate(placeholderMessage)}</TextPlaceholder>}
     </SubmittingForm>
   );
 });

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<void>;
   className?: string;
 }
 

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?'],

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', 'Сессия истекла. Хотите перезагрузить страницу?'],