From c2802c7caaaf4b9835ed11d29c1c4ef3de4e6b77 Mon Sep 17 00:00:00 2001
From: Wroud <wrouds@gmail.com>
Date: Mon, 7 Sep 2020 14:40:41 +0300
Subject: [PATCH] fix(plugin-connection-template): selection dialog

---
 .../TemplateConnectionItem.tsx                | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/webapp/packages/plugin-connection-template/src/ConnectionDialog/TemplateConnectionSelector/TemplateConnectionItem.tsx b/webapp/packages/plugin-connection-template/src/ConnectionDialog/TemplateConnectionSelector/TemplateConnectionItem.tsx
index 2873ab99b7..f60a9196a0 100644
--- a/webapp/packages/plugin-connection-template/src/ConnectionDialog/TemplateConnectionSelector/TemplateConnectionItem.tsx
+++ b/webapp/packages/plugin-connection-template/src/ConnectionDialog/TemplateConnectionSelector/TemplateConnectionItem.tsx
@@ -8,8 +8,11 @@
 
 import { observer } from 'mobx-react';
 import { useCallback } from 'react';
+import styled, { css } from 'reshadow';
 
-import { ListItem } from '@cloudbeaver/core-blocks';
+import {
+  ListItem, ListItemDescription, ListItemName, ListItemIcon, StaticImage
+} from '@cloudbeaver/core-blocks';
 import { DBDriver, Connection } from '@cloudbeaver/core-connections';
 
 type Props = {
@@ -18,6 +21,14 @@ type Props = {
   onSelect(connectionId: string): void;
 }
 
+const styles = css`
+  StaticImage {
+    box-sizing: border-box;
+    width: 24px;
+    max-height: 24px;
+  }
+`;
+
 export const TemplateConnectionItem = observer(function TemplateConnectionItem({
   template,
   dbDriver,
@@ -25,5 +36,11 @@ export const TemplateConnectionItem = observer(function TemplateConnectionItem({
 }: Props) {
   const select = useCallback(() => onSelect(template.id), [template]);
 
-  return <ListItem icon={dbDriver?.icon} name={template.name} description={template.description} onClick={select}/>;
+  return styled(styles)(
+    <ListItem onClick={select}>
+      <ListItemIcon><StaticImage icon={dbDriver?.icon}/></ListItemIcon>
+      <ListItemName>{template.name}</ListItemName>
+      <ListItemDescription title={template.description}>{template.description}</ListItemDescription>
+    </ListItem>
+  );
 });