Fixed the following issues for RM 3794:

1. Updated connection success message. (Added database name in the success message.)
2. Resolve issue of the mouse pointer and dropdown will show below the connection string only.
3. Added loader for both new connections and load existing connections.
4. Removed async: false for update connection.

refs #3794

web/pgadmin/static/js/sqleditor/new_connection_dialog.js

@@ -95,7 +95,7 @@ let NewConnectionDialog = {
                 closableByDimmer: false,
                 modal: false,
                 autoReset: false,
-                closable: true,
+                closable: false,
               },
             };
           },
@@ -152,14 +152,18 @@ let NewConnectionDialog = {
                 self.statusBar.removeClass('d-none');
                 $(self.statusBar.find('.alert-text')).html(msg);
                 // Disable Okay button
-                self.__internal.buttons[2].element.disabled = true;
+                if(self.__internal){
+                  self.__internal.buttons[2].element.disabled = true;
+                }
               });
 
               view.listenTo(view.model, 'pgadmin-session:valid', function() {
                 self.statusBar.addClass('d-none');
                 $(self.statusBar.find('.alert-text')).html('');
                 // Enable Okay button
-                self.__internal.buttons[2].element.disabled = false;
+                if(self.__internal) {
+                  self.__internal.buttons[2].element.disabled = false;
+                }
               });
             });
 
@@ -230,15 +234,18 @@ let NewConnectionDialog = {
                   'user': newConnCollectionModel['user'],
                   'role': newConnCollectionModel['role'],
                   'password': response.password,
+                  'server_name': response.server_name,
+                  'database_name': selected_database_name,
                 };
                 handler.gridView.on_change_connection(connection_details, self);
               }
             } else {
-              self.close();
+              Alertify.newConnectionDialog().destroy();
             }
           },
         };
       });
+
       setTimeout(function(){
         Alertify.newConnectionDialog('Connect to server.').resizeTo(pgAdmin.Browser.stdW.md,pgAdmin.Browser.stdH.md);
       }, 500);

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

@@ -31,7 +31,6 @@ export default function newConnectionDialogModel(response, sgid, sid) {
       });
 
       $.ajax({
-        async: false,
         url: url,
         headers: {
           'Cache-Control' : 'no-cache',
@@ -52,8 +51,8 @@ export default function newConnectionDialogModel(response, sgid, sid) {
           } else {
             self.field.set('options', []);
           }
-          //alertify.error(res.data.msg);
         }
+        Backform.Select2Control.prototype.render.apply(self, arguments);
       }).fail(function(e){
         let msg = '';
         if(e.status == 404) {
@@ -131,7 +130,8 @@ export default function newConnectionDialogModel(response, sgid, sid) {
                   if (closeEvent.button.text == gettext('OK')) {
                     if(this.submit_password) {
                       var _url = url_for('sqleditor.connect_server', {'sid': this.server_id});
-
+                      var loadingDiv = $('#show_filter_progress');
+                      loadingDiv.removeClass('d-none');
                       $.ajax({
                         type: 'POST',
                         timeout: 30000,
@@ -148,8 +148,10 @@ export default function newConnectionDialogModel(response, sgid, sid) {
                               response.server_name = obj.name;
                             }
                           });
+                          loadingDiv.addClass('d-none');
                         })
                         .fail(function(xhr) {
+                          loadingDiv.addClass('d-none');
                           alertify.connectServer('Connect to server', xhr.responseJSON.result, local_self.getValueFromDOM());
                         });
                     } else {
@@ -182,8 +184,9 @@ export default function newConnectionDialogModel(response, sgid, sid) {
             'sid': self.getValueFromDOM(),
             'usr': self.model.attributes.user,
           });
+          var loadingDiv = $('#show_filter_progress');
+          loadingDiv.removeClass('d-none');
           $.ajax({
-            async: false,
             url: url,
             type: 'POST',
             headers: {
@@ -196,7 +199,9 @@ export default function newConnectionDialogModel(response, sgid, sid) {
                 response.server_name = obj.name;
               }
             });
+            loadingDiv.addClass('d-none');
           }).fail(function(xhr){
+            loadingDiv.addClass('d-none');
             alertify.connectServer('Connect to server', xhr.responseJSON.result, self.getValueFromDOM());
           });
 

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

@@ -418,11 +418,13 @@
                 </i>
             </div>
             <div class="connection-info btn-group mr-1" role="group" aria-label="">
-                <div class="editor-title" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+                <div class="connection-data" data-toggle="dropdown">
-                     style="background-color: {% if fgcolor %}{{ bgcolor or '#FFFFFF' }}{% endif %}; color: {% if fgcolor %}{{ fgcolor }}{% endif %};">&nbsp;
+                    <div class="editor-title" aria-haspopup="true" aria-expanded="false"
+                         style="background-color: {% if fgcolor %}{{ bgcolor or '#FFFFFF' }}{% endif %}; color: {% if fgcolor %}{{ fgcolor }}{% endif %};">&nbsp;
+                    </div>
+                    <span class="conn-info-dd dropdown-toggle dropdown-toggle-split"
+                    aria-haspopup="true" aria-expanded="false"></span>
                 </div>
-                <span class="conn-info-dd dropdown-toggle dropdown-toggle-split"
-                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
                 <ul class="dropdown-menu" id="connections-list">
                 </ul>
             </div>

web/pgadmin/tools/sqleditor/static/js/sqleditor.js

@@ -182,7 +182,7 @@ define('tools.querytool', [
         });
       } else {
         $('.conn-info-dd').hide();
-        $('.editor-title').css({pointerEvents: 'none'});
+        $('.connection-data').css({pointerEvents: 'none', cursor: 'arrow'});
       }
     },
 
@@ -2122,8 +2122,20 @@ define('tools.querytool', [
       let title = this.$el.find('.editor-title').html();
       if(connection_details['title'] != title) {
         var self = this;
+        var loadingDiv = null;
+        var msgDiv = null;
+        if(ref){
+          loadingDiv = $('#show_filter_progress');
+          loadingDiv.removeClass('d-none');
+          msgDiv = loadingDiv.find('.sql-editor-busy-text');
+          msgDiv.text('Connecting to database...');
+        } else{
+          loadingDiv = $('#fetching_data');
+          loadingDiv.removeClass('d-none');
+          msgDiv = loadingDiv.find('.sql-editor-busy-text');
+        }
+
         $.ajax({
-          async: false,
           url: url_for('datagrid.update_query_tool_connection', {
             'trans_id': self.transId,
             'sgid': connection_details['server_group'],
@@ -2148,7 +2160,8 @@ define('tools.querytool', [
               };
               self.set_editor_title(self.handler.url_params.title);
               self.handler.setTitle(self.handler.url_params.title);
-              alertify.success('connected successfully');
+              let success_msg = connection_details['server_name'] + '/' + connection_details['database_name']+ '- Database connected';
+              alertify.success(success_msg);
               if(ref){
                 let connection_data = {
                   'server_group': self.handler.url_params.sgid,
@@ -2159,39 +2172,27 @@ define('tools.querytool', [
                   'role': connection_details['role'],
                   'password': connection_details['password'],
                   'is_allow_new_connection': true,
+                  'database_name': connection_details['database_name'],
+                  'server_name': connection_details['server_name'],
                 };
                 self.connection_list.unshift(connection_data);
                 self.render_connection(self.connection_list);
+                loadingDiv.addClass('d-none');
+                alertify.newConnectionDialog().destroy();
                 ref.close();
+              } else {
+                loadingDiv.addClass('d-none');
               }
             }
             return true;
           })
           .fail(function(xhr) {
+            loadingDiv.addClass('d-none');
             if(xhr.status == 428) {
               alertify.connectServer('Connect to server', xhr.responseJSON.result, connection_details['server'], false);
             } else {
               alertify.error(xhr.responseJSON['errormsg']);
             }
-            /*let url = url_for('sqleditor.connect_server_with_user', {
-              'sid': newConnCollectionModel['server'],
-              'usr': newConnCollectionModel['user']
-            });
-            $.ajax({
-              async: false,
-              url: url,
-              headers: {
-                'Cache-Control' : 'no-cache',
-              },
-            }).done(function () {
-              Backform.Select2Control.prototype.onChange.apply(self, arguments);
-              response.server_list.forEach(function(obj){
-                if(obj.id==self.model.changed.server) {
-                  response.server_name = obj.name;
-                }
-              });
-            }).fail(function(xhr){});*/
-
           });
       }
     },
@@ -2526,6 +2527,8 @@ define('tools.querytool', [
             'role': null,
             'title': _.unescape(url_params.title),
             'is_allow_new_connection': false,
+            'database_name': url_params.title.split('/')[0],
+            'server_name': url_params.title.split('@')[1],
           };
           self.gridView.connection_list.unshift(connection_data);
           self.gridView.render_connection(self.gridView.connection_list);

web/pgadmin/tools/sqleditor/static/scss/_sqleditor.scss

@@ -43,6 +43,12 @@
   cursor: pointer;
 }
 
+.connection-data {
+  display: inherit;
+  cursor: pointer;
+  width: auto;
+}
+
 
 #editor-panel {
   z-index: 0;