Fixing server group styling (#23144)

* Fixing server group styling

* Hiding border when the tree item are selected focused or hovered

* Fixing styles and re-enabling guides

* removing unused import

* Fixing indicator width

src/sql/workbench/contrib/dataExplorer/browser/media/connectionViewletPanel.css

@@ -210,9 +210,9 @@
 }
 
 .monaco-list-row .async-server-group .async-server-group .async-server-group-container .icon {
-	width: 7px;
+	width: 5px;
 	height: 20px;
-	border-radius: 3px;
+	border-radius: 2.5px;
 }
 
 .monaco-list-row .async-server-group .async-server-group .async-server-group-container .name {
@@ -222,6 +222,7 @@
 	text-overflow: ellipsis;
 	height: 25px;
 	line-height: 25px;
+	font-weight: 500;
 }
 
 .monaco-list-row .object-element-container {
@@ -253,6 +254,13 @@
 	position: relative;
 }
 
+.monaco-list-row .connection-profile .connection-profile-container .server-group-color {
+	width: 5px;
+	height: 18px;
+	border-radius: 2.5px;
+	margin-top: 2.5px;
+}
+
 .monaco-list-row .connection-profile .connection-profile-container .icon .connection-status-badge {
 	position: absolute;
 	bottom: 0;
@@ -286,3 +294,14 @@
 	display: block;
 }
 
+.server-explorer-viewlet .monaco-list .async-server-group-container {
+	border-top-width: 1px;
+	border-top-style: solid;
+	border-bottom-width: 1px;
+	border-bottom-style: solid;
+}
+
+.server-explorer-viewlet .monaco-list:focus .monaco-list-row.selected .async-server-group-container {
+	border-top-width: 0px;
+	border-bottom-width: 0px;
+}

src/sql/workbench/contrib/objectExplorer/browser/media/serverTreeActions.css

@@ -11,7 +11,7 @@
 
 .monaco-workbench.vs-dark .actions-container .action-label.add-server-action,
 .monaco-workbench.hc-black .actions-container .action-label.add-server-action,
-.monaco-list:focus .monaco-list-rows .actions-container .action-label.add-server-action {
+.monaco-list:focus .monaco-list-rows .monaco-list-row.selected .actions-container .action-label.add-server-action {
 	background-image: url('add_server_inverse.svg') !important;
 }
 
@@ -52,7 +52,7 @@
 
 .monaco-workbench.vs-dark .actions-container .action-label.remove-filter-action,
 .monaco-workbench.hc-black .actions-container .action-label.remove-filter-action,
-.monaco-list:focus .monaco-list-rows .actions-container .action-label.remove-filter-action {
+.monaco-list:focus .monaco-list-rows .monaco-list-row.selected .actions-container .action-label.remove-filter-action {
 	background-image: url('remove_filter_inverse.svg') !important;
 }
 

src/sql/workbench/services/objectExplorer/browser/asyncServerTreeRenderer.ts

@@ -105,6 +105,7 @@ class ConnectionProfileTemplate extends Disposable {
 	private _labelContainer: HTMLElement;
 	private _label: ResourceLabel;
 	private _actionBar: ActionBar;
+	private _serverGroupColorContainer: HTMLElement;
 
 	/**
 	 * _isCompact is used to render connections tiles with and without the action buttons.
@@ -121,6 +122,7 @@ class ConnectionProfileTemplate extends Disposable {
 		super();
 		container.parentElement!.classList.add('connection-profile');
 		this._root = dom.append(container, dom.$('.connection-profile-container'));
+		this._serverGroupColorContainer = dom.append(this._root, dom.$('.server-group-color'));
 		this._icon = dom.append(this._root, dom.$('div.icon'));
 		this._connectionStatusBadge = dom.append(this._icon, dom.$('div.connection-status-badge'));
 		this._labelContainer = dom.append(this._root, dom.$('div.label'));
@@ -131,6 +133,16 @@ class ConnectionProfileTemplate extends Disposable {
 	}
 
 	set(element: ConnectionProfile, filterData: FuzzyScore) {
+
+		const colorGroup = element.parent;
+		if (colorGroup.isRoot) {
+			this._serverGroupColorContainer.style.display = 'none';
+		} else {
+			this._serverGroupColorContainer.style.display = 'block';
+			const backgroundColor = colorGroup.color ?? DefaultServerGroupColor;
+			this._serverGroupColorContainer.style.background = backgroundColor;
+		}
+
 		if (!this._isCompact) {
 			if (this._connectionManagementService.isConnected(undefined, element)) {
 				this._connectionStatusBadge.classList.remove('disconnected');

src/vs/base/browser/ui/tree/media/tree.css

@@ -26,7 +26,7 @@
 	display: inline-block;
 	box-sizing: border-box;
 	height: 100%;
-	/* border-left: 1px solid transparent; {{SQL CARBON EDIT}} Remove indent guide from all custom tree views */
+	border-left: 1px solid transparent;
 }
 
 .monaco-tl-indent > .indent-guide {