Added the appropriate server icon based on the server type in the new connection dialog. Fixes #5983

docs/en_US/release_notes_4_29.rst

@@ -17,4 +17,5 @@ Housekeeping
 Bug fixes
 *********
 
+| `Issue #5983 <https://redmine.postgresql.org/issues/5983>`_ -  Added the appropriate server icon based on the server type in the new connection dialog.
 | `Issue #5985 <https://redmine.postgresql.org/issues/5985>`_ -  Fixed an issue where the process watcher dialog throws an error for the database server which is already removed.

web/pgadmin/static/js/sqleditor/new_connection_dialog_model.js

@@ -15,6 +15,7 @@ import Backform from 'pgadmin.backform';
 import url_for from 'sources/url_for';
 import alertify from 'pgadmin.alertifyjs';
 
+
 export default function newConnectionDialogModel(response, sgid, sid, handler, conn_self) {
 
   let server_name = '';
@@ -72,6 +73,24 @@ export default function newConnectionDialogModel(response, sgid, sid, handler, c
     },
   });
 
+  var formatNode = function (opt) {
+    if (!opt.id) {
+      return opt.text;
+    }
+
+    var optimage = $(opt.element).data('image');
+
+    if (!optimage) {
+      return opt.text;
+    } else {
+      return $('<span></span>').append(
+        $('<span></span>', {
+          class: 'wcTabIcon ' + optimage,
+        })
+      ).append($('<span></span>').text(opt.text));
+    }
+  };
+
   let newConnectionModel = pgAdmin.Browser.DataModel.extend({
     idAttribute: 'name',
     defaults: {
@@ -90,6 +109,16 @@ export default function newConnectionDialogModel(response, sgid, sid, handler, c
       disabled: false,
       select2: {
         allowClear: false,
+        width: 'style',
+        templateResult: formatNode,
+        templateSelection: formatNode,
+      },
+      events: {
+        'focus select': 'clearInvalid',
+        'keydown :input': 'processTab',
+        'select2:select': 'onSelect',
+        'select2:selecting': 'beforeSelect',
+        'select2:clear': 'onChange',
       },
       transform: function(data) {
         let group_template_options = [];
@@ -148,6 +177,45 @@ export default function newConnectionDialogModel(response, sgid, sid, handler, c
           ' <% } %>',
           '</div>',
         ].join('\n')),
+        beforeSelect: function() {
+          var selVal = arguments[0].params.args.data.id;
+
+          if(this.field.get('connect') && this.$el.find('option[value="'+selVal+'"]').attr('data-connected') !== 'connected') {
+            this.field.get('connect').apply(this, [selVal, this.changeIcon.bind(this)]);
+          } else {
+            $(this.$sel).trigger('change');
+            setTimeout(function(){ this.onChange.apply(this); }.bind(this), 200);
+          }
+        },
+        changeIcon: function(data) {
+          let span = this.$el.find('.select2-selection .select2-selection__rendered span.wcTabIcon'),
+            selSpan = this.$el.find('option:selected');
+
+          if (span.hasClass('icon-server-not-connected') || span.hasClass('icon-shared-server-not-connected')) {
+            let icon = (data.icon) ? data.icon : 'icon-pg';
+            span.removeClass('icon-server-not-connected');
+            span.addClass(icon);
+            span.attr('data-connected', 'connected');
+
+            selSpan.data().image = icon;
+            selSpan.attr('data-connected', 'connected');
+            alertify.connectServer().destroy();
+            this.onChange.apply(this);
+          }
+          else if (span.hasClass('icon-database-not-connected')) {
+            let icon = (data.icon) ? data.icon : 'pg-icon-database';
+
+            span.removeClass('icon-database-not-connected');
+            span.addClass(icon);
+            span.attr('data-connected', 'connected');
+
+            selSpan.removeClass('icon-database-not-connected');
+            selSpan.data().image = icon;
+            selSpan.attr('data-connected', 'connected');
+            alertify.connectServer().destroy();
+            this.onChange.apply(this);
+          }
+        },
         connect: function(self) {
           let local_self = self;
 
@@ -198,8 +266,10 @@ export default function newConnectionDialogModel(response, sgid, sid, handler, c
                       url: _url,
                       data: $('#frmPassword').serialize(),
                     })
-                      .done(function() {
+                      .done(function(res) {
+
                         local_self.model.attributes.database = null;
+                        local_self.changeIcon(res.data);
                         local_self.model.attributes.user = null;
                         local_self.model.attributes.role = null;
                         Backform.Select2Control.prototype.onChange.apply(local_self, arguments);

web/pgadmin/tools/datagrid/templates/datagrid/index.html

@@ -11,6 +11,9 @@
     .sql-editor-busy-icon.fa-pulse{-webkit-animation: none;}
     {% endif %}
 </style>
+{% block css_link %}
+<link type="text/css" rel="stylesheet" href="{{ url_for('browser.browser_css')}}"/>
+{% endblock %}
 <div id="main-editor_panel">
     <div class="sql-editor">
         <div id="btn-toolbar" class="editor-toolbar" role="toolbar" aria-label="">

web/pgadmin/tools/sqleditor/__init__.py

@@ -1489,15 +1489,24 @@ def get_new_connection_data(sgid, sid=None):
     :extract_sql_from_network_parameters,
     """
     try:
+        driver = get_driver(PG_DEFAULT_DRIVER)
+        from pgadmin.browser.server_groups.servers import \
+            server_icon_and_background
         server_groups = ServerGroup.query.all()
         server_group_data = {server_group.name: [] for server_group in
                              server_groups}
         servers = Server.query.all()
 
-        [server_group_data[server.servers.name].append(
-            {'label': server.serialize['name'],
-             "value": server.serialize['id']})
-            for server in servers]
+        for server in servers:
+            manager = driver.connection_manager(server.id)
+            conn = manager.connection()
+            connected = conn.connected()
+            server_group_data[server.servers.name].append({
+                'label': server.serialize['name'],
+                "value": server.serialize['id'],
+                'image': server_icon_and_background(connected, manager,
+                                                    server),
+                'connected': connected})
 
         msg = "Success"
         return make_json_response(