Connections: Support for custom icons (#6282)

Addresses #6187

Add support for custom icons in the new connections pane.
The [connections
contract](https://rstudio.github.io/rstudio-extensions/connections-contract.html#examples)
allows connections to provide a custom icon, which should be a full path
to a squared png file.

Author: dfalbel

src/vs/workbench/contrib/positronConnections/browser/components/listConnections.css

@@ -49,6 +49,7 @@
 .connections-list-container .col-icon {
 	flex-shrink: 0;
 	height: 100%;
+	width: 26px;
 }
 
 .connections-list-container .col-name {
@@ -67,6 +68,15 @@
 	color: var(--vscode-positronSideActionBar-disabledForeground);
 }
 
+.connections-list-item .col-icon {
+	width: 26px;
+}
+
+.connections-list-item .col-icon > img {
+	width: 26px;
+	height: 26px;
+}
+
 .connections-list-container .col-language {
 	padding-left: 5px;
 	flex-basis: 20%;

src/vs/workbench/contrib/positronConnections/browser/components/listConnections.tsx

@@ -70,7 +70,7 @@ export const ListConnections = (props: React.PropsWithChildren<ListConnnectionsP
 
 	const ItemEntry = (props: { index: number; style: CSSProperties }) => {
 		const itemProps = instances[props.index];
-		const { language_id, name } = itemProps.metadata;
+		const { language_id, name, icon } = itemProps.metadata;
 
 		return (
 			<div
@@ -81,7 +81,9 @@ export const ListConnections = (props: React.PropsWithChildren<ListConnnectionsP
 				)}
 				onMouseDown={() => setSelectedInstanceId(itemProps.id)}
 			>
-				<div className='col-icon' style={{ width: `${26}px` }}></div>
+				<div className='col-icon'>
+					{icon ? <img src={icon}></img> : <></>}
+				</div>
 				<div className='col-name'>{name}</div>
 				<div className='col-language'>
 					{language_id ? languageIdToName(language_id) : ''}
@@ -134,7 +136,7 @@ export const ListConnections = (props: React.PropsWithChildren<ListConnnectionsP
 			</ActionBar>
 			<div className='connections-list-container'>
 				<div className='connections-list-header' style={{ height: `${TABLE_HEADER_HEIGHT}px` }}>
-					<div className='col-icon' style={{ width: `${26}px` }}></div>
+					<div className='col-icon'></div>
 					<VerticalSplitter />
 					<div className='col-name'>
 						{localize('positron.listConnections.connection', 'Connection')}

src/vs/workbench/contrib/positronConnections/browser/components/schemaNavigation.css

@@ -14,6 +14,7 @@
 	cursor: pointer;
 	align-items: center;
 	height: 26px;
+	scrollbar-gutter: stable;
 }
 
 .connections-details {
@@ -88,6 +89,7 @@
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	width: calc(100% - 2px);
+	scrollbar-gutter: stable;
 }
 
 .connections-instance-details .connection-name {
@@ -104,7 +106,12 @@
 	flex-grow: 0;
 	flex-shrink: 0;
 	width: 26px;
+	height: 26px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }
+
+.connections-items-list {
+	scrollbar-gutter: stable;
+}

src/vs/workbench/contrib/positronConnections/browser/components/schemaNavigation.tsx

@@ -126,18 +126,21 @@ export const SchemaNavigation = (props: React.PropsWithChildren<SchemaNavigation
 				<div className={'connections-instance-details'} style={{ height: DETAILS_BAR_HEIGHT }}>
 					<div className='connection-name'>{name}</div>
 					<div className='connection-language'>{languageIdToName(language_id)}</div>
-					<div className={'connection-icon'}>
-						{
-							icon || <div className='codicon codicon-positron-database-connection'></div>
-						}
-					</div>
+					{
+						icon ?
+							<img className='connection-icon' src={icon}></img> :
+							<div className='connection-icon'>
+								<div className='codicon codicon-positron-database-connection'></div>
+							</div>
+					}
 				</div>
 				<List
 					itemCount={entries.length}
 					itemSize={26}
 					/* size if the actionbar and the secondary side bar combined) */
 					height={height - ACTION_BAR_HEIGHT - DETAILS_BAR_HEIGHT}
-					width={'calc(100% - 2px)'}
+					className='connections-items-list'
+					width={'100%'}
 					itemKey={index => entries[index].id}
 					innerRef={innerRef}
 				>
@@ -177,16 +180,9 @@ const PositronConnectionsItem = (props: React.PropsWithChildren<PositronConnecti
 		props.onToggleExpand(props.item.id);
 	};
 
-	const icon = (() => {
-
-		if (props.item.icon) {
-			return props.item.icon;
-		}
-
-		if (props.item.kind) {
-			// TODO: we'll probably want backends to implement the casting to a set of known
-			// types or provide their own icon.
-			switch (props.item.kind) {
+	const iconClass = (kind?: string) => {
+		if (kind) {
+			switch (kind.toLowerCase()) {
 				case 'table':
 					return 'positron-table-connection';
 				case 'view':
@@ -198,11 +194,13 @@ const PositronConnectionsItem = (props: React.PropsWithChildren<PositronConnecti
 				case 'catalog':
 					return 'positron-catalog-connection';
 				case 'field':
-					switch (props.item.dtype) {
+					switch (props.item.dtype?.toLowerCase()) {
 						case 'character':
+						case 'string':
 							return 'positron-data-type-string';
 						case 'integer':
 						case 'numeric':
+						case 'float':
 							return 'positron-data-type-number';
 						case 'boolean':
 						case 'bool':
@@ -212,8 +210,26 @@ const PositronConnectionsItem = (props: React.PropsWithChildren<PositronConnecti
 					}
 			}
 		}
-		// If kind is not known, then no icon is dplsayed by default.
+
 		return '';
+	}
+
+	const icon = (() => {
+		// icon is a base64 encoded png
+		if (props.item.icon) {
+			return <img
+				src={props.item.icon}
+			>
+			</img>;
+		}
+
+		return <div
+			className={positronClassNames(
+				'codicon',
+				`codicon-${iconClass(props.item.kind)}`,
+			)}
+		>
+		</div>
 	})();
 
 	const rowMouseDownHandler = (e: MouseEvent<HTMLElement>) => {
@@ -268,17 +284,13 @@ const PositronConnectionsItem = (props: React.PropsWithChildren<PositronConnecti
 				{props.item.error && <span className='connections-error codicon codicon-error' title={props.item.error}></span>}
 			</div>
 			<div
-				className='connections-icon'
+				className={positronClassNames(
+					'connections-icon',
+					{ 'disabled': props.item.preview === undefined }
+				)}
 				onClick={() => props.item.preview?.()}
 			>
-				<div
-					className={positronClassNames(
-						'codicon',
-						`codicon-${icon}`,
-						{ 'disabled': props.item.preview === undefined }
-					)}
-				>
-				</div>
+				{icon}
 			</div>
 		</div>
 	);