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}