Add shortcuts for View Data and the Query tool to the Browser header bar. Fixes #3564

web/pgadmin/browser/static/css/browser.css

@@ -60,3 +60,18 @@
 .pgadmin_header_logo {
   cursor: default;
 }
+
+.pg-toolbar-btn {
+  width: 25px !important;
+  height: 23px !important;
+  border: 1px solid !important;
+  background-color: #fff !important;
+  font-size: 14px !important;
+  color: #333 !important;
+  border-color: #adadad !important;
+}
+
+.pg-toolbar-btn:hover {
+  border: 1px solid $color-gray-light !important;
+  background-color: #e6e6e6 !important;
+}

web/pgadmin/browser/static/js/browser.js

@@ -2,7 +2,7 @@ define('pgadmin.browser', [
   'sources/tree/tree',
   'sources/gettext', 'sources/url_for', 'require', 'jquery', 'underscore', 'underscore.string',
   'bootstrap', 'sources/pgadmin', 'pgadmin.alertifyjs', 'bundled_codemirror',
-  'sources/check_node_visibility', 'pgadmin.browser.utils', 'wcdocker',
+  'sources/check_node_visibility', './toolbar', 'pgadmin.browser.utils', 'wcdocker',
   'jquery.contextmenu', 'jquery.aciplugin', 'jquery.acitree', 'pgadmin.browser.preferences',
   'pgadmin.browser.messages',
   'pgadmin.browser.menu', 'pgadmin.browser.panel',
@@ -13,7 +13,7 @@ define('pgadmin.browser', [
 ], function(
   tree,
   gettext, url_for, require, $, _, S, Bootstrap, pgAdmin, Alertify,
-  codemirror, checkNodeVisibility
+  codemirror, checkNodeVisibility, toolBar
 ) {
   window.jQuery = window.$ = $;
   // Some scripts do export their object in the window only.
@@ -119,6 +119,9 @@ define('pgadmin.browser', [
         isPrivate: true,
         icon: 'fa fa-binoculars',
         content: '<div id="tree" class="aciTree"></div>',
+        onCreate: function(panel) {
+          toolBar.initializeToolbar(panel, wcDocker);
+        },
       }),
       // Properties of the object node
       'properties': new pgAdmin.Browser.Panel({
@@ -289,6 +292,9 @@ define('pgadmin.browser', [
           }
         };
 
+      toolBar.enable(gettext('View Data'), false);
+      toolBar.enable(gettext('Filtered Rows'), false);
+
       // All menus from the object menus (except the create drop-down
       // menu) needs to be removed.
       $obj_mnu.empty();

web/pgadmin/browser/static/js/toolbar.js

@@ -0,0 +1,90 @@
+import gettext from 'sources/gettext';
+import _ from 'underscore';
+import pgAdmin from 'sources/pgadmin';
+
+let _toolbarButtons = {};
+let _browserPanel = null;
+
+// Default Tool Bar Buttons.
+let _defaultToolBarButtons = [
+  {
+    label: gettext('Filtered Rows'),
+    btnClass: 'fa fa-filter',
+    text: '',
+    toggled: false,
+    toggleClass: '',
+    parentClass: 'pg-toolbar-btn',
+    enabled: false,
+  },
+  {
+    label: gettext('View Data'),
+    btnClass: 'fa fa-table',
+    text: '',
+    toggled: false,
+    toggleClass: '',
+    parentClass: 'pg-toolbar-btn',
+    enabled: false,
+  },
+  {
+    label: gettext('Query Tool'),
+    btnClass: 'fa fa-bolt',
+    text: '',
+    toggled: false,
+    toggleClass: '',
+    parentClass: 'pg-toolbar-btn',
+    enabled: false,
+  },
+];
+
+// Place holder for non default tool bar buttons.
+let _otherToolbarButtons = [];
+
+// This function is used to add button into the browser panel.
+function registerToolBarButton(btn) {
+  if (!(btn.label in _toolbarButtons)) {
+    _browserPanel.addButton(
+      btn.label, btn.btnClass, btn.text, btn.label, btn.toggled,
+      btn.toggleClass, btn.parentClass, btn.enabled
+    );
+
+    _toolbarButtons[btn.label] = btn;
+  }
+}
+
+// This function is used to add tool bar button and
+// listen on the button event.
+export function initializeToolbar(panel, wcDocker) {
+  _browserPanel = panel;
+
+  // Iterate through default tool bar buttons and add them into the
+  // browser panel.
+  _.each(_defaultToolBarButtons, (btn) => {
+    registerToolBarButton(btn);
+  });
+
+  // Iterate through other tool bar buttons and add them into the
+  // browser panel.
+  _.each(_otherToolbarButtons, (btn) => {
+    registerToolBarButton(btn);
+  });
+
+  // Listen on button click event.
+  panel.on(wcDocker.EVENT.BUTTON, function(data) {
+    if ('name' in data && data.name === 'Query Tool')
+      pgAdmin.DataGrid.show_query_tool('', pgAdmin.Browser.tree.selected());
+    else if ('name' in data && data.name === 'View Data')
+      pgAdmin.DataGrid.show_data_grid({mnuid: 1}, pgAdmin.Browser.tree.selected());
+    else if ('name' in data && data.name === 'Filtered Rows')
+      pgAdmin.DataGrid.show_filtered_row({mnuid: 4}, pgAdmin.Browser.tree.selected());
+  });
+}
+
+// This function is used to enable/disable the specific button
+// based on their label.
+export function enable(label, enable) {
+  if (label in _toolbarButtons) {
+    _browserPanel.buttonEnable(label, enable);
+  } else {
+    console.warn('Developer warning: No tool button found with label: ' + label);
+  }
+}