Merge pull request #477 from dbeaver/feat/connection-selector-show-connected

webapp/packages/core-app/src/TopNavBar/ConnectionSchemaManager/ConnectionSelector/ConnectionSelector.tsx

@@ -67,7 +67,7 @@ export const ConnectionSelector = observer(function ConnectionSelector() {
   }
 
   return styled(style)(
-    <connection-selector as="div" {...use({ isVisible: controller.isConnectionSelectorVisible })}>
+    <connection-selector {...use({ isVisible: controller.isConnectionSelectorVisible })}>
       <ConnectionMenu menuItem={controller.connectionMenu} style={[menuStyles, connectionMenu]} />
       {controller.isObjectContainerSelectorVisible && (
         <SchemaOrCatalogMenu

webapp/packages/core-app/src/TopNavBar/ConnectionSchemaManager/ConnectionSelector/ConnectionSelectorController.ts

@@ -147,8 +147,14 @@ export class ConnectionSelectorController {
   private getConnectionItems(): IMenuItem[] {
     return this.connectionInfo.values
       .slice()
-      .sort(compareConnectionsInfo)
-      .map(item => {
+      .sort((a, b) => {
+        if (a.connected === b.connected) {
+          return compareConnectionsInfo(a, b);
+        }
+
+        return Number(b.connected) - Number(a.connected);
+      })
+      .map((item, index, array) => {
         const icon = this.dbDriverResource.get(item.driverId)?.icon;
 
         const menuItem: IMenuItem = {
@@ -157,6 +163,12 @@ export class ConnectionSelectorController {
           icon,
           onClick: () => this.connectionSelectorService.selectConnection(item.id),
         };
+
+        const next = array[index + 1];
+        if (item.connected && next && !next.connected) {
+          menuItem.separator = true;
+        }
+
         return menuItem;
       });
   }