diff --git a/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/Driver.tsx b/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/Driver.tsx
index 263140d0a0..773abdcc7e 100644
--- a/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/Driver.tsx
+++ b/webapp/packages/core-connections/src/Administration/Connections/CreateConnection/Driver.tsx
@@ -20,6 +20,7 @@ const styles = css`
StaticImage {
box-sizing: border-box;
width: 32px;
+ max-height: 32px;
}
`;
diff --git a/webapp/packages/core-connections/src/DriverSelectDialog/Driver.tsx b/webapp/packages/core-connections/src/DriverSelectDialog/Driver.tsx
deleted file mode 100644
index 9ff8e33aa2..0000000000
--- a/webapp/packages/core-connections/src/DriverSelectDialog/Driver.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-/*
- * cloudbeaver - Cloud Database Manager
- * Copyright (C) 2020 DBeaver Corp and others
- *
- * Licensed under the Apache License, Version 2.0.
- * you may not use this file except in compliance with the License.
- */
-
-import { observer } from 'mobx-react';
-import { useCallback } from 'react';
-
-import {
- ListItem, ListItemIcon, ListItemName, ListItemDescription, StaticImage
-} from '@cloudbeaver/core-blocks';
-
-export interface IDriver {
- id: string;
- icon?: string;
- name?: string;
- description?: string;
-}
-
-type DriverProps = {
- driver: IDriver;
- onSelect(driverId: string): void;
-}
-
-export const Driver = observer(function Driver({ driver, onSelect }: DriverProps) {
- const select = useCallback(() => onSelect(driver.id), [driver]);
-
- return (
-
-
- {driver.name}
- {driver.description}
-
- );
-});
diff --git a/webapp/packages/core-connections/src/DriverSelectDialog/DriverSelectDialog.tsx b/webapp/packages/core-connections/src/DriverSelectDialog/DriverSelectDialog.tsx
deleted file mode 100644
index af0f0de1d4..0000000000
--- a/webapp/packages/core-connections/src/DriverSelectDialog/DriverSelectDialog.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-/*
- * cloudbeaver - Cloud Database Manager
- * Copyright (C) 2020 DBeaver Corp and others
- *
- * Licensed under the Apache License, Version 2.0.
- * you may not use this file except in compliance with the License.
- */
-
-import { computed } from 'mobx';
-import { observer } from 'mobx-react';
-import { useEffect, useMemo } from 'react';
-import styled, { css } from 'reshadow';
-
-import { Loader } from '@cloudbeaver/core-blocks';
-import { useService } from '@cloudbeaver/core-di';
-import { CommonDialogWrapper, DialogComponentProps } from '@cloudbeaver/core-dialogs';
-import { useTranslate } from '@cloudbeaver/core-localization';
-
-import { DBDriverResource } from '../DBDriverResource';
-import { DriverSelector } from './DriverSelector';
-
-const styles = css`
- CommonDialogWrapper {
- max-height: 550px;
- min-height: 550px;
- }
- DriverSelector {
- flex: 1;
- }
-`;
-
-export const DriverSelectDialog = observer(function DriverSelectDialog({
- resolveDialog,
- rejectDialog,
-}: DialogComponentProps) {
- const dbDriverResource = useService(DBDriverResource);
- const title = useTranslate('connections_administration_new_connection');
-
- useEffect(() => { dbDriverResource.loadAll(); }, []);
- const isLoading = dbDriverResource.isLoading();
- const drivers = useMemo(() => computed(() => (
- Array.from(dbDriverResource.data.values())
- .sort((a, b) => dbDriverResource.compare(a, b))
- )), [dbDriverResource.data]);
-
- return styled(styles)(
-
- {isLoading && }
- {!isLoading && }
-
- );
-});
diff --git a/webapp/packages/core-connections/src/DriverSelectDialog/DriverSelector.tsx b/webapp/packages/core-connections/src/DriverSelectDialog/DriverSelector.tsx
deleted file mode 100644
index e0a21f4a0d..0000000000
--- a/webapp/packages/core-connections/src/DriverSelectDialog/DriverSelector.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * cloudbeaver - Cloud Database Manager
- * Copyright (C) 2020 DBeaver Corp and others
- *
- * Licensed under the Apache License, Version 2.0.
- * you may not use this file except in compliance with the License.
- */
-
-import { observer } from 'mobx-react';
-import { useState, useMemo } from 'react';
-
-import { ItemListSearch, ItemList } from '@cloudbeaver/core-blocks';
-
-import { Driver, IDriver } from './Driver';
-
-type DriverSelectorProps = {
- drivers: IDriver[];
- className?: string;
- onSelect(driverId: string): void;
-}
-
-export const DriverSelector = observer(function DriverSelector({ drivers, className, onSelect }: DriverSelectorProps) {
- const [search, setSearch] = useState('');
- const filteredDrivers = useMemo(() => {
- if (!search) {
- return drivers;
- }
- return drivers.filter(driver => driver.name?.toUpperCase().includes(search.toUpperCase()));
- }, [search, drivers]);
-
- return (
-
-
- {filteredDrivers.map(driver => )}
-
- );
-});
diff --git a/webapp/packages/plugin-connection-custom/src/CustomConnection/DriverSelectorDialog/Driver.tsx b/webapp/packages/plugin-connection-custom/src/CustomConnection/DriverSelectorDialog/Driver.tsx
index 9ff8e33aa2..37a441fab7 100644
--- a/webapp/packages/plugin-connection-custom/src/CustomConnection/DriverSelectorDialog/Driver.tsx
+++ b/webapp/packages/plugin-connection-custom/src/CustomConnection/DriverSelectorDialog/Driver.tsx
@@ -8,6 +8,7 @@
import { observer } from 'mobx-react';
import { useCallback } from 'react';
+import styled, { css } from 'reshadow';
import {
ListItem, ListItemIcon, ListItemName, ListItemDescription, StaticImage
@@ -20,6 +21,14 @@ export interface IDriver {
description?: string;
}
+const styles = css`
+ StaticImage {
+ box-sizing: border-box;
+ width: 24px;
+ max-height: 24px;
+ }
+`;
+
type DriverProps = {
driver: IDriver;
onSelect(driverId: string): void;
@@ -28,7 +37,7 @@ type DriverProps = {
export const Driver = observer(function Driver({ driver, onSelect }: DriverProps) {
const select = useCallback(() => onSelect(driver.id), [driver]);
- return (
+ return styled(styles)(
{driver.name}