[pgAdmin4][Patch]: Allow user to Comment/Uncomment code in query editor

[Murtuza Zabuawala]

Hi,

PFA patch which will add functionality to allow user to comment/uncomment
code in query editor.
RM#2456

--
Regards,
Murtuza Zabuawala
EnterpriseDB: http://www.enterprisedb.com
The Enterprise PostgreSQL Company

diff --git a/docs/en_US/keyboard_shortcuts.rst 
b/docs/en_US/keyboard_shortcuts.rst
index 2194d63..9de6103 100644
--- a/docs/en_US/keyboard_shortcuts.rst
+++ b/docs/en_US/keyboard_shortcuts.rst
@@ -59,6 +59,8 @@ When using the syntax-highlighting SQL editors, the following 
shortcuts are avai
 
+--------------------------+------------------+-------------------------------------+
 | Shift+Tab                | Shift+Tab        | Un-indent selected text        
     |
 
+--------------------------+------------------+-------------------------------------+
+| Shift+Ctrl+/             | Shift+Ctrl+/     | Comment/Uncomment selected 
text     |
++--------------------------+------------------+-------------------------------------+
 
 **Query Tool**
 
diff --git a/web/pgadmin/tools/datagrid/templates/datagrid/index.html 
b/web/pgadmin/tools/datagrid/templates/datagrid/index.html
index 4bb38c4..b9fe89d 100644
--- a/web/pgadmin/tools/datagrid/templates/datagrid/index.html
+++ b/web/pgadmin/tools/datagrid/templates/datagrid/index.html
@@ -217,6 +217,10 @@
                 </button>
                 <ul class="dropdown-menu dropdown-menu">
                     <li>
+                        <a id="btn-toggle-comment" href="#">
+                            <i class="fa fa-code" aria-hidden="true"></i>
+                            <span> {{ _('Comment/Uncomment Code') }} </span>
+                        </a>
                         <a id="btn-clear" href="#">
                             <i class="fa fa-eraser" aria-hidden="true"></i>
                             <span> {{ _('Clear Query Window') }} </span>
diff --git a/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js 
b/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
index 8a797ab..3cf9fc6 100644
--- a/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
+++ b/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
@@ -28,6 +28,7 @@ define([
     'codemirror/addon/search/jump-to-line',
     'codemirror/addon/edit/matchbrackets',
     'codemirror/addon/edit/closebrackets',
+    'codemirror/addon/comment/comment',
 
     'backgrid.sizeable.columns',
     'slick.pgadmin.formatters',
@@ -50,7 +51,8 @@ define([
     // Define key codes for shortcut keys
     var F5_KEY = 116,
         F7_KEY = 118,
-        F8_KEY = 119;
+        F8_KEY = 119,
+        FWD_SLASH_KEY = 191;
 
     var is_query_running = false;
 
@@ -102,6 +104,7 @@ define([
         "click #btn-explain-costs": "on_explain_costs",
         "click #btn-explain-buffers": "on_explain_buffers",
         "click #btn-explain-timing": "on_explain_timing",
+        "click #btn-toggle-comment": "on_toggle_comment_code",
         "change .limit": "on_limit_change",
         "keydown": "keyAction"
       },
@@ -1288,6 +1291,17 @@ define([
         );
       },
 
+      // Callback function for the comment/uncomment selected code
+      on_toggle_comment_code: function() {
+        var self = this;
+        // Trigger the comment signal to the SqlEditorController class
+        self.handler.trigger(
+            'pgadmin-sqleditor:toggle_comment_code',
+            self,
+            self.handler
+        );
+      },
+
       // Callback function for the clear button click.
       on_clear: function(ev) {
         var self = this, sql;
@@ -1498,6 +1512,10 @@ define([
           // Download query result as CSV.
           this.on_download(ev);
           ev.preventDefault();
+        } else if (ev.shiftKey && ev.ctrlKey  && keyCode == FWD_SLASH_KEY ) {
+          // Toggle comments
+          this.on_toggle_comment_code(ev);
+          ev.preventDefault();
         }
       }
     });
@@ -1587,6 +1605,8 @@ define([
           self.on('pgadmin-sqleditor:button:explain-costs', 
self._explain_costs, self);
           self.on('pgadmin-sqleditor:button:explain-buffers', 
self._explain_buffers, self);
           self.on('pgadmin-sqleditor:button:explain-timing', 
self._explain_timing, self);
+          self.on('pgadmin-sqleditor:toggle_comment_code', 
self._toggle_comment_code, self);
+
 
           if (self.is_query_tool) {
             self.gridView.query_tool_obj.refresh();
@@ -3635,6 +3655,25 @@ define([
         },
 
         /*
+         * This function will comment/uncomment code
+         */
+        _toggle_comment_code: function() {
+          var self = this, editor = self.gridView.query_tool_obj,
+          selected_code = editor.getSelection(),
+          sql = selected_code.length > 0 ? selected_code : editor.getValue();
+          // If it is an empty query, do nothing.
+          if (sql.length <= 0) return;
+
+          // Find the code selection range
+          var range = {
+            from: editor.getCursor(true),
+            to: editor.getCursor(false)
+          };
+          // Comment/Uncomment code
+          editor.toggleComment(range.from, range.to);
+        },
+
+        /*
          * This function get explain options and auto rollback/auto commit
          * values from preferences
          */