Added Quick Search functionality for menu items and help articles. Fixes #6148

docs/en_US/release_notes_5_0.rst

@@ -11,6 +11,7 @@ New features
 
 | `Issue #5912 <https://redmine.postgresql.org/issues/5912>`_ -  Added support for Logical Replication.
 | `Issue #5967 <https://redmine.postgresql.org/issues/5967>`_ -  Implemented runtime using NWjs to open pgAdmin4 in a standalone window instead of the system tray and web browser.
+| `Issue #6148 <https://redmine.postgresql.org/issues/6148>`_ -  Added Quick Search functionality for menu items and help articles.
 | `Issue #6170 <https://redmine.postgresql.org/issues/6170>`_ -  Rotate the logfile in the container distribution.
 
 Housekeeping

web/pgadmin/browser/register_browser_preferences.py

@@ -443,6 +443,19 @@ def register_browser_preferences(self):
         fields=fields
     )
 
+    self.preference.register(
+        'keyboard_shortcuts', 'open_quick_search',
+        gettext('Quick Search'), 'keyboardshortcut',
+        {
+            'alt': False,
+            'shift': True,
+            'control': True,
+            'key': {'key_code': 70, 'char': 'f'}
+        },
+        category_label=PREF_LABEL_KEYBOARD_SHORTCUTS,
+        fields=fields
+    )
+
     self.dynamic_tab_title = self.preference.register(
         'tab_settings', 'dynamic_tabs',
         gettext("Dynamic tab size"), 'boolean', False,

web/pgadmin/browser/server_groups/servers/databases/schemas/packages/static/js/package.js

@@ -48,19 +48,22 @@ define('pgadmin.node.package', [
           name: 'create_package_on_coll', node: 'coll-package', module: this,
           applies: ['object', 'context'], callback: 'show_obj_properties',
           category: 'create', priority: 4, label: gettext('Package...'),
-          icon: 'wcTabIcon icon-package', data: {action: 'create', check: true},
+          icon: 'wcTabIcon icon-package', data: {action: 'create', check: true,
+            'data_disabled': gettext('This option is only available on EPAS servers.')},
           enable: 'canCreate',
         },{
           name: 'create_package', node: 'package', module: this,
           applies: ['object', 'context'], callback: 'show_obj_properties',
           category: 'create', priority: 4, label: gettext('Package...'),
-          icon: 'wcTabIcon icon-package', data: {action: 'create', check: true},
+          icon: 'wcTabIcon icon-package', data: {action: 'create', check: true,
+            'data_disabled': gettext('This option is only available on EPAS servers.')},
           enable: 'canCreate',
         },{
           name: 'create_package', node: 'schema', module: this,
           applies: ['object', 'context'], callback: 'show_obj_properties',
           category: 'create', priority: 4, label: gettext('Package...'),
-          icon: 'wcTabIcon icon-package', data: {action: 'create', check: true},
+          icon: 'wcTabIcon icon-package', data: {action: 'create', check: true,
+            'data_disabled': gettext('This option is only available on EPAS servers.')},
           enable: 'canCreate',
         },
         ]);

web/pgadmin/browser/server_groups/servers/databases/schemas/synonyms/static/js/synonym.js

@@ -47,19 +47,22 @@ define('pgadmin.node.synonym', [
           name: 'create_synonym_on_coll', node: 'coll-synonym', module: this,
           applies: ['object', 'context'], callback: 'show_obj_properties',
           category: 'create', priority: 4, label: gettext('Synonym...'),
-          icon: 'wcTabIcon icon-synonym', data: {action: 'create', check: true},
+          icon: 'wcTabIcon icon-synonym', data: {action: 'create', check: true,
+            'data_disabled': gettext('This option is only available on EPAS servers.')},
           enable: 'canCreate',
         },{
           name: 'create_synonym', node: 'synonym', module: this,
           applies: ['object', 'context'], callback: 'show_obj_properties',
           category: 'create', priority: 4, label: gettext('Synonym...'),
-          icon: 'wcTabIcon icon-synonym', data: {action: 'create', check: true},
+          icon: 'wcTabIcon icon-synonym', data: {action: 'create', check: true,
+            'data_disabled': gettext('This option is only available on EPAS servers.')},
           enable: 'canCreate',
         },{
           name: 'create_synonym', node: 'schema', module: this,
           applies: ['object', 'context'], callback: 'show_obj_properties',
           category: 'create', priority: 4, label: gettext('Synonym...'),
-          icon: 'wcTabIcon icon-synonym', data: {action: 'create', check: true},
+          icon: 'wcTabIcon icon-synonym', data: {action: 'create', check: true,
+            'data_disabled': gettext('This option is only available on EPAS servers.')},
           enable: 'canCreate',
         },
         ]);

web/pgadmin/browser/server_groups/servers/databases/schemas/tables/compound_triggers/static/js/compound_trigger.js

@@ -54,25 +54,29 @@ define('pgadmin.node.compound_trigger', [
           name: 'create_compound_trigger_on_coll', node: 'coll-compound_trigger', module: this,
           applies: ['object', 'context'], callback: 'show_obj_properties',
           category: 'create', priority: 4, label: gettext('Compound Trigger...'),
-          icon: 'wcTabIcon icon-compound_trigger', data: {action: 'create', check: true},
+          icon: 'wcTabIcon icon-compound_trigger', data: {action: 'create', check: true,
+            'data_disabled': gettext('This option is only available on EPAS servers.')},
           enable: 'canCreate',
         },{
           name: 'create_compound_trigger', node: 'compound_trigger', module: this,
           applies: ['object', 'context'], callback: 'show_obj_properties',
           category: 'create', priority: 4, label: gettext('Compound Trigger...'),
-          icon: 'wcTabIcon icon-compound_trigger', data: {action: 'create', check: true},
+          icon: 'wcTabIcon icon-compound_trigger', data: {action: 'create', check: true,
+            'data_disabled': gettext('This option is only available on EPAS servers.')},
           enable: 'canCreate',
         },{
           name: 'create_compound_trigger_onTable', node: 'table', module: this,
           applies: ['object', 'context'], callback: 'show_obj_properties',
           category: 'create', priority: 4, label: gettext('Compound Trigger...'),
-          icon: 'wcTabIcon icon-compound_trigger', data: {action: 'create', check: true},
+          icon: 'wcTabIcon icon-compound_trigger', data: {action: 'create', check: true,
+            'data_disabled': gettext('This option is only available on EPAS servers.')},
           enable: 'canCreate',
         },{
           name: 'create_compound_trigger_onPartition', node: 'partition', module: this,
           applies: ['object', 'context'], callback: 'show_obj_properties',
           category: 'create', priority: 4, label: gettext('Compound Trigger...'),
-          icon: 'wcTabIcon icon-compound_trigger', data: {action: 'create', check: true},
+          icon: 'wcTabIcon icon-compound_trigger', data: {action: 'create', check: true,
+            'data_disabled': gettext('This option is only available on EPAS servers.')},
           enable: 'canCreate',
         },{
           name: 'enable_compound_trigger', node: 'compound_trigger', module: this,
@@ -88,7 +92,8 @@ define('pgadmin.node.compound_trigger', [
           name: 'create_compound_trigger_onView', node: 'view', module: this,
           applies: ['object', 'context'], callback: 'show_obj_properties',
           category: 'create', priority: 4, label: gettext('Compound Trigger...'),
-          icon: 'wcTabIcon icon-compound_trigger', data: {action: 'create', check: true},
+          icon: 'wcTabIcon icon-compound_trigger', data: {action: 'create', check: true,
+            'data_disabled': gettext('This option is only available on EPAS servers.')},
           enable: 'canCreate',
         },
         ]);

web/pgadmin/browser/server_groups/servers/databases/static/js/database.js

@@ -76,12 +76,16 @@ define('pgadmin.node.database', [
           name: 'connect_database', node: 'database', module: this,
           applies: ['object', 'context'], callback: 'connect_database',
           category: 'connect', priority: 4, label: gettext('Connect Database...'),
-          icon: 'fa fa-link', enable : 'is_not_connected',
+          icon: 'fa fa-link', enable : 'is_not_connected', data: {
+            'data_disabled': gettext('Selected database is already connected.'),
+          },
         },{
           name: 'disconnect_database', node: 'database', module: this,
           applies: ['object', 'context'], callback: 'disconnect_database',
           category: 'drop', priority: 5, label: gettext('Disconnect Database...'),
-          icon: 'fa fa-unlink', enable : 'is_connected',
+          icon: 'fa fa-unlink', enable : 'is_connected',data: {
+            'data_disabled': gettext('Selected database is already disconnected.'),
+          },
         },{
           name: 'generate_erd', node: 'database', module: this,
           applies: ['object', 'context'], callback: 'generate_erd',

web/pgadmin/browser/server_groups/servers/resource_groups/static/js/resource_group.js

@@ -48,7 +48,8 @@ define('pgadmin.node.resource_group', [
           name: 'create_resourcegroup_on_server', node: 'server', module: this,
           applies: ['object', 'context'], callback: 'show_obj_properties',
           category: 'create', priority: 4, label: gettext('Resource Group...'),
-          icon: 'wcTabIcon icon-resource_group', data: {action: 'create'},
+          icon: 'wcTabIcon icon-resource_group', data: {action: 'create',
+            'data_disabled': gettext('This option is only available on EPAS servers.')},
           /* Function is used to check the server type and version.
            * Resource Group only supported in PPAS 9.4 and above.
            */
@@ -62,12 +63,14 @@ define('pgadmin.node.resource_group', [
           name: 'create_resource_group_on_coll', node: 'coll-resource_group', module: this,
           applies: ['object', 'context'], callback: 'show_obj_properties',
           category: 'create', priority: 4, label: gettext('Resource Group...'),
-          icon: 'wcTabIcon icon-resource_group', data: {action: 'create'},
+          icon: 'wcTabIcon icon-resource_group', data: {action: 'create',
+            'data_disabled': gettext('This option is only available on EPAS servers.')},
         },{
           name: 'create_resource_group', node: 'resource_group', module: this,
           applies: ['object', 'context'], callback: 'show_obj_properties',
           category: 'create', priority: 4, label: gettext('Resource Group...'),
-          icon: 'wcTabIcon icon-resource_group', data: {action: 'create'},
+          icon: 'wcTabIcon icon-resource_group', data: {action: 'create',
+            'data_disabled': gettext('This option is only available on EPAS servers.')},
         },
         ]);
       },

web/pgadmin/browser/server_groups/servers/static/js/server.js

@@ -100,12 +100,16 @@ define('pgadmin.node.server', [
           name: 'reload_configuration', node: 'server', module: this,
           applies: ['tools', 'context'], callback: 'reload_configuration',
           category: 'reload', priority: 6, label: gettext('Reload Configuration'),
-          icon: 'fa fa-redo-alt', enable : 'enable_reload_config',
+          icon: 'fa fa-redo-alt', enable : 'enable_reload_config',data: {
+            'data_disabled': gettext('Please select a server from the browser tree to reload the configuration files.'),
+          },
         },{
           name: 'restore_point', node: 'server', module: this,
           applies: ['tools', 'context'], callback: 'restore_point',
           category: 'restore', priority: 9, label: gettext('Add Named Restore Point...'),
-          icon: 'fa fa-anchor', enable : 'is_applicable',
+          icon: 'fa fa-anchor', enable : 'is_applicable',data: {
+            'data_disabled': gettext('Please select any server from the browser tree to Add Named Restore Point.'),
+          },
         },{
           name: 'change_password', node: 'server', module: this,
           applies: ['object'], callback: 'change_password',
@@ -115,12 +119,16 @@ define('pgadmin.node.server', [
           name: 'wal_replay_pause', node: 'server', module: this,
           applies: ['tools', 'context'], callback: 'pause_wal_replay',
           category: 'wal_replay_pause', priority: 7, label: gettext('Pause Replay of WAL'),
-          icon: 'fa fa-pause-circle', enable : 'wal_pause_enabled',
+          icon: 'fa fa-pause-circle', enable : 'wal_pause_enabled',data: {
+            'data_disabled': gettext('Please select a connected database as a Super user and run in Recovery mode to Pause Replay of WAL.'),
+          },
         },{
           name: 'wal_replay_resume', node: 'server', module: this,
           applies: ['tools', 'context'], callback: 'resume_wal_replay',
           category: 'wal_replay_resume', priority: 8, label: gettext('Resume Replay of WAL'),
-          icon: 'fa fa-play-circle', enable : 'wal_resume_enabled',
+          icon: 'fa fa-play-circle', enable : 'wal_resume_enabled',data: {
+            'data_disabled': gettext('Please select a connected database as a Super user and run in Recovery mode to Resume Replay of WAL.'),
+          },
         },{
           name: 'clear_saved_password', node: 'server', module: this,
           applies: ['object', 'context'], callback: 'clear_saved_password',
@@ -145,6 +153,9 @@ define('pgadmin.node.server', [
             }
             return false;
           },
+          data: {
+            'data_disabled': gettext('SSH Tunnel password is not saved for selected server.'),
+          },
         }]);
 
         _.bindAll(this, 'connection_lost');

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

@@ -875,6 +875,10 @@ define('pgadmin.browser', [
         var $mnu = navbar.children(o.id).first(),
           $dropdown = $mnu.children('.dropdown-menu').first();
         $dropdown.empty();
+        if(o.menu == 'help'){
+          $dropdown.append('<div id="quick-search-component"></div>');
+          $dropdown.append('<div class="menu-groups"><span class="fa fa-list" style="font-weight:900 !important;"></span> &nbsp;SUGGESTED SITES</div>');
+        }
 
         if (pgAdmin.Browser.MenuCreator(
           obj.Nodes, $dropdown, obj.menus[o.menu], obj.menu_categories
@@ -902,6 +906,7 @@ define('pgadmin.browser', [
       } else if(type == 'dialog_help') {
         window.open(url, 'pgadmin_help');
       }
+      $('#live-search-field').focus();
     },
     _findTreeChildNode: function(_i, _d, _o) {
       var loaded = _o.t.wasLoad(_i),
@@ -2224,6 +2229,8 @@ define('pgadmin.browser', [
   if (pgBrowser.utils.useSpaces == 'True') {
     pgAdmin.Browser.editor_shortcut_keys.Tab = 'insertSoftTab';
   }
-
+  setTimeout(function(){
+    $('#mnu_about').closest('li').before('<li class="dropdown-divider"></li>');
+  }, 100);
   return pgAdmin.Browser;
 });

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

@@ -44,6 +44,7 @@ _.extend(pgBrowser.keyboardNavigation, {
         'drop_multiple_objects': commonUtils.parseShortcutValue(pgBrowser.get_preference('browser', 'grid_menu_drop_multiple').value),
         'drop_cascade_multiple_objects': commonUtils.parseShortcutValue(pgBrowser.get_preference('browser', 'grid_menu_drop_cascade_multiple').value),
         'add_grid_row': commonUtils.parseShortcutValue(pgBrowser.get_preference('browser', 'add_grid_row').value),
+        'open_quick_search': commonUtils.parseShortcutValue(pgBrowser.get_preference('browser', 'open_quick_search').value),
 
       };
       this.shortcutMethods = {
@@ -66,6 +67,7 @@ _.extend(pgBrowser.keyboardNavigation, {
         'bindDropMultipleObjects': {'shortcuts': this.keyboardShortcut.drop_multiple_objects}, // Grid Menu Drop Multiple
         'bindDropCascadeMultipleObjects': {'shortcuts': this.keyboardShortcut.drop_cascade_multiple_objects}, // Grid Menu Drop Cascade Multiple
         'bindAddGridRow': {'shortcuts': this.keyboardShortcut.add_grid_row}, // Subnode Grid Add Row
+        'bindOpenQuickSearch': {'shortcuts': this.keyboardShortcut.open_quick_search}, // Subnode Grid Refresh Row
       };
       this.bindShortcuts();
     }
@@ -383,6 +385,9 @@ _.extend(pgBrowser.keyboardNavigation, {
 
     return new dialogTabNavigator.dialogTabNavigator(dialogContainer, backward_shortcut, forward_shortcut);
   },
+  bindOpenQuickSearch: function() {
+    $('#search_icon').trigger('click');
+  },
 });
 
 module.exports = pgAdmin.Browser.keyboardNavigation;

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

@@ -67,12 +67,17 @@ define([
         }, this.menu_items);
         this.$el = create_submenu.$el;
       } else {
+        var data_disabled = null;
+        if(this.data != undefined && this.data.data_disabled != undefined){
+          data_disabled = this.data.data_disabled;
+        }
         var url = $('<a></a>', {
           'id': this.name,
           'href': this.url,
           'target': this.target,
           'data-toggle': 'pg-menu',
           'role': 'menuitem',
+          'data-disabled': data_disabled,
         }).data('pgMenu', {
           module: this.module || pgAdmin.Browser,
           cb: this.callback,

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

@@ -150,6 +150,7 @@ define('pgadmin.browser.node', [
           label: (self.dropAsRemove) ? gettext('Remove %s', self.label) : gettext('Delete/Drop'),
           data: {
             'url': 'drop',
+            'data_disabled': gettext('The selected tree node does not support this option.'),
           },
           icon: 'fa fa-trash-alt',
           enable: _.isFunction(self.canDrop) ?
@@ -232,6 +233,7 @@ define('pgadmin.browser.node', [
             category: gettext('Scripts'),
             data: {
               'script': stype,
+              'data_disabled': gettext('The selected tree node does not support this option.'),
             },
             icon: 'fa fa-pencil-alt',
             enable: self.check_user_permission,

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

@@ -0,0 +1,29 @@
+/////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2021, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {Search} from './quick_search/trigger_search';
+
+// TODO: GUI, Add the logic to show loading screen while fetching result
+const onResultFetch = (url, data) => {
+  // URL can be used for displaying all the result in new page
+  // data will be array of search <name> -> <link>
+  console.warn('URL = ' + url);
+  console.warn(data);
+};
+
+setTimeout(function(){
+  if (document.getElementById('quick-search-component')) {
+    ReactDOM.render(
+      <Search onResult={onResultFetch} />,
+      document.getElementById('quick-search-component')
+    );
+  }
+},500);

web/pgadmin/browser/static/js/quick_search/iframe_component.js

@@ -0,0 +1,44 @@
+/////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2021, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////
+
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+
+// Allow us to render IFrame using React
+// Here we will add the event listener on Iframe load event
+export class Iframe extends Component {
+  static get propTypes() {
+    return {
+      id: PropTypes.string.isRequired,
+      srcURL: PropTypes.string.isRequired,
+      onLoad: PropTypes.func.isRequired,
+    };
+  }
+
+  render () {
+    const iframeStyle = {
+      border: '0',
+      display: 'block',
+      position:'absolute',
+      opacity:'0',
+    };
+    const {id, srcURL, onLoad} = this.props;
+
+    return (
+      <iframe
+        id={id}
+        src={srcURL}
+        onLoad={onLoad}
+        width={'20'}
+        height={'20'}
+        style={iframeStyle}
+      />
+    );
+  }
+}

web/pgadmin/browser/static/js/quick_search/menuitems_help.js

@@ -0,0 +1,91 @@
+/////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2021, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////
+import gettext from 'sources/gettext';
+
+
+
+//  Allow us to
+const getMenuName = (item) => {
+  let aLinks = item.getElementsByTagName('a');
+  let name;
+  if (aLinks.length > 0) {
+    name = (aLinks[0].text).trim();
+    name = name.replace(/\.+$/g, '');
+  }
+  return name;
+};
+
+export function menuSearch(param, props) {
+  let LAST_MENU;
+  param = param.trim();
+  const setState = props.setState;
+  let result = [];
+
+  if (window.pgAdmin.Browser.utils.app_name) {
+    LAST_MENU = gettext('About '+ window.pgAdmin.Browser.utils.app_name);
+  }
+
+  // Here we will add the matches
+  const parseLI = (_menu, path) => {
+    let _name = getMenuName(_menu);
+    if (_name && _name.toLowerCase().indexOf(param.toLowerCase()) != -1) {
+      let _res = {};
+      _res[_name] = path;
+      _res['element'] = _menu.children[0];
+      result.push(_res);
+    }
+    // Check if last menu then update the parent component's state
+    if (_name === LAST_MENU) {
+      setState(state => ({
+        ...state,
+        fetched: true,
+        data: result,
+      }));
+    }
+  };
+
+  // Recursive function to search in UL
+  const parseUL = (menu, path) => {
+    const menus = Array.from(menu.children);
+    menus.forEach((_menu) => {
+      let _name, _path;
+      if (_menu.tagName == 'UL') {
+        _name = getMenuName(_menu);
+        _path = `${path}/${_name}`;
+        iterItem(_menu, _path);
+      } else if (_menu.tagName == 'LI') {
+        if (_menu.classList.contains('dropdown-submenu')) {
+          _name = getMenuName(_menu);
+          _path = `${path}/${_name}`;
+          iterItem(_menu, _path);
+        } else {
+          parseLI(_menu, path);
+        }
+      }
+    });
+  };
+
+  // Expects LI of menus which contains A & UL
+  const iterItem = (menu, path) => {
+    const subMenus = Array.from(menu.children);
+    subMenus.forEach((_menu) => {
+      if (_menu.tagName == 'UL') {
+        parseUL(_menu, path);
+      }
+    });
+  };
+
+  // Starting Point
+  const navbar = document.querySelector('.navbar-nav');
+  const mainMenus = Array.from(navbar.children);
+
+  mainMenus.forEach((menu) => {
+    iterItem(menu, getMenuName(menu));
+  });
+}

web/pgadmin/browser/static/js/quick_search/online_help.js

@@ -0,0 +1,101 @@
+/////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2021, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {Iframe} from './iframe_component';
+import url_for from 'sources/url_for';
+
+const extractSearchResult = (list) => {
+  let result = {};
+  for (let idx = 0; idx < list.length; idx++) {
+    let link = list[idx].getElementsByTagName('A');
+    // we are not going to display more than first 10 result as per design
+    if (link.length == 0) {
+      break;
+    }
+    let topicName  = link[0].text;
+    let topicLink  = url_for('help.static', {
+      'filename': link[0].getAttribute('href'),
+    });
+    result[topicName] = topicLink;
+  }
+  return result;
+};
+
+export function onlineHelpSearch(param, props) {
+  param = param.split(' ').join('+');
+  const setState = props.setState;
+  const helpURL = url_for('help.static', {
+    'filename': 'search.html',
+  });
+  const srcURL = `${helpURL}?q=${param}`;
+  let isIFrameLoaded = false;
+  if(document.getElementById('hidden-quick-search-iframe')){
+    document.getElementById('hidden-quick-search-iframe').contentDocument.location.reload(true);
+  }
+
+  // Below function will be called when the page will be loaded in Iframe
+  const _iframeLoaded = () => {
+    if (isIFrameLoaded) {
+      return false;
+    }
+    isIFrameLoaded = true;
+    let iframe = document.getElementById('hidden-quick-search-iframe');
+    let content = (iframe.contentWindow || iframe.contentDocument);
+    let iframeHTML = content.document;
+    window.pooling = setInterval(() => {
+      let resultEl = iframeHTML.getElementById('search-results');
+      let searchResultsH2Tags = resultEl.getElementsByTagName('h2');
+      let list = resultEl && resultEl.getElementsByTagName('LI');
+      let pooling = window.pooling;
+      if ((list && list.length > 0 )) {
+        let res = extractSearchResult(list);
+        // After getting the data, we need to call the Parent component function
+        // which will render the data on the screen
+        if (searchResultsH2Tags[0]['childNodes'][0]['textContent'] != 'Searching') {
+          window.clearInterval(pooling);
+          setState(state => ({
+            ...state,
+            fetched: true,
+            clearedPooling: true,
+            url: srcURL,
+            data: res,
+          }));
+          isIFrameLoaded = false;
+          ReactDOM.unmountComponentAtNode(document.getElementById('quick-search-iframe-container'));
+        } else {
+          setState(state => ({
+            ...state,
+            fetched: true,
+            clearedPooling: false,
+            url: srcURL,
+            data: res,
+          }));
+        }
+      } else if(searchResultsH2Tags[0]['childNodes'][0]['textContent'] == 'Search Results') {
+        setState(state => ({
+          ...state,
+          fetched: true,
+          clearedPooling: true,
+          url: srcURL,
+          data: {},
+        }));
+        ReactDOM.unmountComponentAtNode(document.getElementById('quick-search-iframe-container'));
+        isIFrameLoaded = false;
+        window.clearInterval(pooling);
+      }
+    }, 500);
+  };
+
+  // Render IFrame
+  ReactDOM.render(
+    <Iframe id='hidden-quick-search-iframe' srcURL={srcURL} onLoad={_iframeLoaded}/>,
+    document.getElementById('quick-search-iframe-container'),
+  );
+}

web/pgadmin/browser/static/js/quick_search/trigger_search.js

@@ -0,0 +1,260 @@
+/////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2021, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////
+import React, {useRef,useState, useEffect} from 'react';
+import {useDelayDebounce} from 'sources/custom_hooks';
+import {onlineHelpSearch} from './online_help';
+import {menuSearch} from './menuitems_help';
+import $ from 'jquery';
+import gettext from 'sources/gettext';
+
+export function Search() {
+  const wrapperRef = useRef(null);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [isShowMinLengthMsg, setIsShowMinLengthMsg] = useState(false);
+  let helpLinkTitles = [];
+  let helpLinks = [];
+  const [isMenuLoading, setIsMenuLoading] = useState(false);
+  const [isHelpLoading, setIsHelpLoading] = useState(false);
+  const [menuSearchResult, setMenuSearchResult] = useState({
+    fetched: false,
+    data: [],
+  });
+  const [helpSearchResult, setHelpSearchResult] = useState({
+    fetched: false,
+    clearedPooling: true,
+    url: '',
+    data: [],
+  });
+
+  const [showResults, setShowResults] = useState(false);
+
+  const resetSearchState = () => {
+    setMenuSearchResult(state => ({
+      ...state,
+      fetched: false,
+      data: [],
+    }));
+    setHelpSearchResult(state => ({
+      ...state,
+      fetched: false,
+      clearedPooling: true,
+      url: '',
+      data: {},
+    }));
+  };
+
+  // Below will be called when any changes has been made to state
+  useEffect(() => {
+    helpLinkTitles = Object.keys(helpSearchResult.data);
+    for(let i = 0; i<helpLinkTitles.length;i++){
+      helpLinks.push(<a href={''} target='_blank' rel='noreferrer'>helpLinkTitles[i]</a>);
+    }
+
+    if(menuSearchResult.fetched == true){
+      setIsMenuLoading(false);
+    }
+
+    if(helpSearchResult.fetched == true){
+      setIsHelpLoading(false);
+    }
+  }, [menuSearchResult, helpSearchResult]);
+
+  const initSearch = (param) => {
+    setIsMenuLoading(true);
+    setIsHelpLoading(true);
+
+    onlineHelpSearch(param,  {
+      state: helpSearchResult,
+      setState: setHelpSearchResult,
+    });
+    menuSearch(param, {
+      state: menuSearchResult,
+      setState: setMenuSearchResult,
+    });
+  };
+
+  // Debounse logic to avoid multiple re-render with each keypress
+  useDelayDebounce(initSearch, searchTerm, 1000);
+
+  const toggleDropdownMenu = () => {
+    let pooling = window.pooling;
+    if(pooling){
+      window.clearInterval(pooling);
+    }
+    document.getElementsByClassName('live-search-field')[0].value = '';
+    setTimeout(function(){
+      document.getElementById('live-search-field').focus();
+    },100);
+    resetSearchState();
+    setShowResults(!showResults);
+    setIsMenuLoading(false);
+    setIsHelpLoading(false);
+    setIsShowMinLengthMsg(false);
+  };
+
+  const refactorMenuItems = (items) => {
+    if(items.length > 0){
+      let menuItemsHtmlElement = [];
+      for(let i=0; i < items.length; i++){
+        Object.keys(items[i]).map( (value) => {
+          if(value != 'element' && value != 'No object selected'){
+            menuItemsHtmlElement.push( <li key={ 'li-menu-' + i }><a tabIndex='0' id={ 'li-menu-' + i } href={'#'} className={ (items[i]['element'].classList.contains('disabled') == true ? 'dropdown-item menu-groups-a disabled':'dropdown-item menu-groups-a')} key={ 'menu-' + i } onClick={() => {items[i]['element'].click(); toggleDropdownMenu();}}>
+              {value}
+              <span key={ 'menu-span-' + i }>{refactorPathToMenu(items[i][value])}</span>
+            </a>
+            { ((items[i]['element'].classList.contains('disabled') == true && items[i]['element'].getAttribute('data-disabled') != undefined) ? <i className='fa fa-info-circle quick-search-tooltip' data-toggle='tooltip' title={items[i]['element'].getAttribute('data-disabled')} aria-label='Test data tooltip' aria-hidden='true'></i> : '' )}
+            </li>);
+          }
+        });
+      }
+      $('[data-toggle="tooltip"]').tooltip();
+      return menuItemsHtmlElement;
+    }
+  };
+
+  const refactorPathToMenu = (path) => {
+    if(path){
+      let pathArray = path.split('/');
+      let spanElement = [];
+      for(let i = 0; i < pathArray.length; i++ ){
+        if(i == (pathArray.length -1)){
+          spanElement.push(pathArray[i]);
+        }else{
+          spanElement.push(<span key={ 'menu-span-sub' + i }> {pathArray[i]} <i className='fa fa-angle-right' aria-hidden='true'></i> </span>);
+        }
+      }
+      return spanElement;
+    }
+  };
+
+  const onInputValueChange = (value) => {
+    let pooling = window.pooling;
+    if(pooling){
+      window.clearInterval(pooling);
+    }
+    resetSearchState();
+    setSearchTerm('');
+    if(value.length >= 3){
+      setSearchTerm(value);
+      setIsMenuLoading(true);
+      setIsHelpLoading(true);
+      setIsShowMinLengthMsg(false);
+    }else{
+      setIsMenuLoading(false);
+      setIsHelpLoading(false);
+    }
+
+    if(value.length < 3 && value.length > 0){
+      setIsShowMinLengthMsg(true);
+    }
+
+    if(value.length == 0){
+      setIsShowMinLengthMsg(false);
+    }
+  };
+
+  const useOutsideAlerter = (ref) => {
+    useEffect(() => {
+      /**
+           * Alert if clicked on outside of element
+           */
+      function handleClickOutside(event) {
+        if (ref.current && !ref.current.contains(event.target)) {
+          let input_element = document.getElementById('live-search-field');
+          let input_value = input_element.value;
+          if(input_value && input_value.length > 0){
+            toggleDropdownMenu();
+          }
+          return;
+        }
+      }
+      // Bind the event listener
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => {
+        // Unbind the event listener on clean up
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }, [ref]);
+  };
+
+  useOutsideAlerter(wrapperRef);
+
+  return (
+    <div id='quick-search-container' onClick={setSearchTerm}></div>,
+    <ul id='quick-search-container' ref={wrapperRef} className='test' role="menu">
+      <li>
+        <ul id='myDropdown'>
+          <li className='dropdown-item-input'>
+            <input tabIndex='0' autoFocus type='text' autoComplete='off' className='form-control live-search-field'
+              aria-label='live-search-field' id='live-search-field' placeholder={gettext('Quick Search')} onChange={(e) => {onInputValueChange(e.target.value);} } />
+          </li>
+          <div style={{marginBottom:0}}>
+            <div>
+
+              { isShowMinLengthMsg
+                ? (<div className='pad-12 no-results'>
+                  <span className='fa fa-info-circle'></span>
+                   &nbsp;Please enter minimum 3 characters to search
+                </div>)
+                :''}
+              <div >
+
+                { (menuSearchResult.fetched == true && isMenuLoading == false ) ?
+                  <div>
+                    <div className='menu-groups'>
+                      <span className='fa fa-window-maximize'></span> &nbsp;{gettext('MENU ITEMS')} ({menuSearchResult.data.length})
+                    </div>
+
+
+                    {refactorMenuItems(menuSearchResult.data)}
+                  </div> : ( (isMenuLoading) ? (<div className='pad-12'><div className="search-icon">{gettext('Searching...')}</div></div>) : '')}
+
+                {(menuSearchResult.data.length == 0 && menuSearchResult.fetched == true && isMenuLoading == false) ? (<div className='pad-12 no-results'><span className='fa fa-info-circle'></span> {gettext('No search results')}</div>):''}
+
+                { (helpSearchResult.fetched == true && isHelpLoading == false) ?
+                  <div>
+                    <div className='help-groups'>
+                      <span className='fa fa-question-circle'></span> &nbsp;{gettext('HELP ARTICLES')} {Object.keys(helpSearchResult.data).length > 10 ?
+                        <span>(10 of {Object.keys(helpSearchResult.data).length} )
+                        </span>:
+                        '(' + Object.keys(helpSearchResult.data).length + ')'}&nbsp;
+                      { !helpSearchResult.clearedPooling ? <img src='/static/img/loading.gif' alt={gettext('Loading...')} className='help_loading_icon'/> :''}
+                      { Object.keys(helpSearchResult.data).length > 10 ? <a href={helpSearchResult.url} className='pull-right no-padding' target='_blank' rel='noreferrer'>{gettext('Show all')} &nbsp;<span className='fas fa-external-link-alt' ></span></a> : ''}
+                    </div>
+
+                    {Object.keys(helpSearchResult.data).map( (value, index) => {
+                      if(index <= 9) {  return <li key={ 'li-help-' + index }><a tabIndex='0' href={helpSearchResult.data[value]} key={ 'help-' + index } className='dropdown-item' target='_blank' rel='noreferrer'>{value}</a></li>; }
+                    })}
+
+                    {(Object.keys(helpSearchResult.data).length == 0) ? (<div className='pad-12 no-results'><span className='fa fa-info-circle'></span> {gettext('No search results')}</div>):''}
+                  </div> : ( (isHelpLoading && isMenuLoading == false) ? (
+                    <div>
+                      <div className='help-groups'>
+                        <span className='fa fa-question-circle'></span>
+                          &nbsp;HELP ARTICLES
+                        {Object.keys(helpSearchResult.data).length > 10
+                          ? '(10 of ' + Object.keys(helpSearchResult.data).length + ')'
+                          : '(' + Object.keys(helpSearchResult.data).length + ')'
+                        }
+                        { Object.keys(helpSearchResult.data).length > 10
+                          ? <a href={helpSearchResult.url} className='pull-right no-padding' target='_blank' rel='noreferrer'>
+                          Show all &nbsp;<span className='fas fa-external-link-alt' ></span></a> : ''
+                        }
+                      </div>
+                      <div className='pad-12'><div className="search-icon">{gettext('Searching...')}</div></div>
+                    </div>) : '')}
+              </div>
+            </div>
+          </div>
+        </ul>
+      </li>
+      <div id='quick-search-iframe-container' />
+    </ul>
+  );
+}

web/pgadmin/browser/static/scss/_quick_search.scss

@@ -0,0 +1,151 @@
+#myInput {
+  box-sizing: border-box;
+  background-position: 14px 12px;
+  background-repeat: no-repeat;
+  font-size: 16px;
+  padding: 14px 20px 12px 45px;
+  border: none;
+  border-bottom: 1px solid #ddd;
+}
+
+#myInput:focus {outline: 3px solid #ddd;}
+
+.custom-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.custom-dropdown-content {
+  background-color: $color-bg;
+  min-width: 376px;
+  overflow: auto;
+  z-index: 1;
+}
+
+.custom-dropdown-content a {
+  color: $dropdown-link-color;
+  padding: 6px 12px 6px 16px;
+  text-decoration: none;
+  display: block;
+  cursor:pointer;
+}
+
+.custom-dropdown-content a:hover {
+  color: $black;
+}
+
+#myDropdown a:hover {background-color: $dropdown-link-hover-bg; color:$color-danger-fg !important;}
+
+.search_icon{
+  color: $white;
+  cursor: pointer;
+  padding-right: 8px;
+}
+.hidden { display:none; }
+
+.visible { display:block; }
+
+.menu-groups, .help-groups{
+  background-color: $color-gray-light;
+  padding: 6px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.menu-groups .fa, .fas{
+  font-weight:normal !important;
+}
+
+.help-groups .fa, .fas{
+  font-weight:600 !important;
+}
+
+.pad-12{
+  padding:12px;
+}
+
+.no-results{
+  font-size: 14px;
+  color: #697986;
+  text-align: center;
+}
+
+.no-padding{
+  padding:0 !important;
+}
+
+.menu-groups-a{
+  display:flex !important;
+  flex-direction:column;
+  padding: 6px;
+  color: $dropdown-link-color;
+  padding: 6px 16px;
+}
+
+.menu-groups-a span{
+  font-size: 0.9em;
+  font-weight: 100;
+  color: $quick-search-span-text;
+}
+
+#myDropdown a:hover span{
+  color: $color-danger-fg !important;
+}
+
+.search-icon{
+  background: $loader-icon-small center center no-repeat;
+  margin: auto !important;
+  height: 22px !important;
+  width: 130px !important;
+  background-position: left !important;
+  font-size: 14px;
+  color: $dropdown-link-color;
+  padding-left: 30px;
+}
+
+.help_loading_icon{
+  height: 16px;
+}
+#myDropdown ul {
+  list-style: none;
+}
+
+.border-right-search-icon{
+  border-right: 2px solid #fff;
+}
+
+.help_submenu{
+  left: 100%;
+  width: 20rem;
+  top:-0.4rem;
+}
+
+.help_menu{
+  min-width:300px;
+}
+
+.dropdown-item-input{
+  padding:4px;
+}
+
+.menu-groups-a span:focus{
+  color:$color-primary-fg;
+}
+
+.dropdown-item:hover, .dropdown-item:focus span{
+  color: $color-danger-fg !important;
+}
+
+.quick-search-tooltip{
+  position: absolute;
+  right: 10px;
+  margin-top: -2.1em;
+  font-size: 16px;
+  cursor:pointer;
+  color: $quick-search-info-icon;
+}
+
+#myDropdown .dropdown-divider{
+  height: auto;
+  border-top: 0;
+}

web/pgadmin/browser/templates/browser/index.html

@@ -133,7 +133,7 @@ window.onload = function(e){
             <li id="mnu_help" class="nav-item active dropdown d-none">
                 <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{
                     _('Help') }} <span class="caret"></span></a>
-                <ul class="dropdown-menu" role="menu"></ul>
+                <ul class="dropdown-menu help_menu" role="menu"></ul>
             </li>
         </ul>
         {% if config.SERVER_MODE %}

web/pgadmin/static/js/custom_hooks.js

@@ -26,4 +26,16 @@ export function usePrevious(value) {
     ref.current = value;
   });
   return ref.current;
-}
+}
+
+export function useDelayDebounce(callback, args, delay) {
+  useEffect(() => {
+    const delayDebounceFn = setTimeout(() => {
+      if (args) {
+        callback(args);
+      }
+    }, delay);
+    return () => clearTimeout(delayDebounceFn);
+  }, [args]);
+}
+

web/pgadmin/static/scss/_pgadmin.style.scss

@@ -1129,3 +1129,10 @@ select:-webkit-autofill:focus {
 .pull-left{
   float:left
 }
+
+.menu-groups-a:hover span{
+  color: $white !important;
+}
+
+#myDropdown a:hover {background-color: $dropdown-link-hover-bg; color:$white !important;}
+

web/pgadmin/static/scss/resources/_default.variables.scss

@@ -4,6 +4,9 @@ $enable-flex: true;
 $white: #fff;
 $black: #000;
 
+$span-text-color: #6B6B6B !default;
+$span-text-color-hover: #6B6B6B !default;
+
 $color-bg: $white !default;
 $color-fg: #222222 !default;
 
@@ -349,6 +352,10 @@ $grid-hover-fg-color: $color-fg !default;
 
 $btn-copied-color-fg: $active-color !default;
 
+$quick-search-a-text-color: $black !default;
+$quick-search-span-text: $span-text-color !default;
+$quick-search-span-text-hover: $span-text-color-hover !default;
+$quick-search-info-icon: #646C82 !default;
 /** ERD **/
 $erd-row-padding: 0.25rem;
 $erd-node-border-color: $border-color !default;

web/pgadmin/static/scss/resources/dark/_theme.variables.scss

@@ -122,6 +122,11 @@ $datagrid-selected-color: $color-primary-fg;
 
 $select2-placeholder: #999;
 
+$span-text-color: #9D9FA1 !default;
+$span-text-color-hover: $white !default;
+$quick-search-a-text-color: $white !default;
+$quick-search-info-icon: #8A8A8A !default;
+
 /* ERD */
 $erd-row-padding: 0.25rem;
 $erd-node-border-color: $border-color;

web/pgadmin/static/scss/resources/high_contrast/_theme.variables.scss

@@ -1,4 +1,5 @@
 $white: #FFFFFF;
+$black: #000;
 $color-bg: #010B15;
 $color-fg: $white;
 
@@ -200,4 +201,7 @@ $grid-hover-fg-color: #010B15;
 
 $btn-copied-color-fg: #010B15;
 
-
+$span-text-color: #9D9FA1 !default;
+$span-text-color-hover: $black !default;
+$quick-search-a-text-color: $black !default;
+$quick-search-info-icon: #8A8A8A !default;

web/pgadmin/tools/backup/static/js/backup.js

@@ -582,6 +582,9 @@ define([
         label: gettext('Backup Globals...'),
         icon: 'fa fa-save',
         enable: menuUtils.menuEnabledServer,
+        data: {
+          'data_disabled': gettext('Please select any server from the browser tree to take Backup of global objects.'),
+        },
       }, {
         name: 'backup_server',
         module: this,
@@ -591,6 +594,9 @@ define([
         label: gettext('Backup Server...'),
         icon: 'fa fa-save',
         enable: menuUtils.menuEnabledServer,
+        data: {
+          'data_disabled': gettext('Please select any server from the browser tree to take Server Backup.'),
+        },
       }, {
         name: 'backup_global_ctx',
         module: this,
@@ -601,6 +607,9 @@ define([
         label: gettext('Backup Globals...'),
         icon: 'fa fa-save',
         enable: menuUtils.menuEnabledServer,
+        data: {
+          'data_disabled': gettext('Please select any database or schema or table from the browser tree to take Backup.'),
+        },
       }, {
         name: 'backup_server_ctx',
         module: this,
@@ -611,6 +620,9 @@ define([
         label: gettext('Backup Server...'),
         icon: 'fa fa-save',
         enable: menuUtils.menuEnabledServer,
+        data: {
+          'data_disabled': gettext('Please select any server from the browser tree to take Server Backup.'),
+        },
       }, {
         name: 'backup_object',
         module: this,
@@ -622,6 +634,9 @@ define([
         enable: supportedNodes.enabled.bind(
           null, pgBrowser.treeMenu, menuUtils.backupSupportedNodes
         ),
+        data: {
+          'data_disabled': gettext('Please select any database or schema or table from the browser tree to take Backup.'),
+        },
       }];
 
       for (var idx = 0; idx < menuUtils.backupSupportedNodes.length; idx++) {

web/pgadmin/tools/datagrid/static/js/datagrid.js

@@ -113,6 +113,9 @@ define('pgadmin.datagrid', [
           priority: 1,
           label: gettext('Query Tool'),
           icon: 'pg-font-icon icon-query-tool',
+          data:{
+            'data_disabled': gettext('Please select a database from the browser tree to access Query Tool.'),
+          },
         }];
 
         // Create context menu

web/pgadmin/tools/grant_wizard/static/js/grant_wizard.js

@@ -177,6 +177,9 @@ define([
         enable: supportedNodes.enabled.bind(
           null, pgBrowser.treeMenu, menuUtils.supportedNodes
         ),
+        data: {
+          'data_disabled': gettext('Please select any database, schema or schema objects from the browser tree to access Grant Wizard Tool.'),
+        },
       }];
 
       // Add supported menus into the menus list

web/pgadmin/tools/import_export/static/js/import_export.js

@@ -412,6 +412,9 @@ define([
         enable: supportedNodes.enabled.bind(
           null, pgBrowser.treeMenu, ['table']
         ),
+        data: {
+          'data_disabled': gettext('Please select any table from the browser tree to Import/Export data.'),
+        },
       }]);
     },
 

web/pgadmin/tools/maintenance/static/js/maintenance.js

@@ -184,6 +184,9 @@ define([
           enable: supportedNodes.enabled.bind(
             null, pgBrowser.treeMenu, menuUtils.maintenanceSupportedNodes
           ),
+          data: {
+            'data_disabled': gettext('Please select any database from the browser tree to do Maintenance.'),
+          },
         });
       }
       pgBrowser.add_menus(menus);

web/pgadmin/tools/restore/static/js/restore.js

@@ -398,6 +398,9 @@ define('tools.restore', [
         enable: supportedNodes.enabled.bind(
           null, pgBrowser.treeMenu, menuUtils.restoreSupportedNodes
         ),
+        data: {
+          'data_disabled': gettext('Please select any schema or table from the browser tree to Restore data.'),
+        },
       }];
 
       for (var idx = 0; idx < menuUtils.restoreSupportedNodes.length; idx++) {

web/pgadmin/tools/search_objects/static/js/search_objects.js

@@ -36,6 +36,9 @@ define([
         enable: this.search_objects_enabled,
         priority: 1,
         label: gettext('Search Objects...'),
+        data: {
+          'data_disabled': gettext('Please select a database from the browser tree to search the database objects.'),
+        },
       }, {
         name: 'search_objects',
         module: this,

web/regression/javascript/browser/activity_spec.js

@@ -70,7 +70,7 @@ describe('For Activity', function(){
       expect(pgBrowser.get_epoch_now).not.toHaveBeenCalled();
     });
 
-    it('set loggin to false after timeout', function(done){
+    it('set login to false after timeout', function(done){
       pgBrowser.log_activity();
       expect(pgBrowser.logging_activity).toEqual(true);
       setTimeout(()=>{

web/regression/javascript/quick_search/quick_search_spec.js

@@ -0,0 +1,44 @@
+//////////////////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2021, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////////////////
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import { Search } from 'browser/quick_search/trigger_search';
+
+let container;
+
+describe('quick search test cases', function () {
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    act(() => {
+      ReactDOM.render(<Search />, container);
+    });
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    container = null;
+  });
+
+  it('should have rendered quick-search-container', () => {
+    expect(container.firstChild.id).toEqual('quick-search-container');
+  });
+
+  it('should have 2 childs in quick-search-container', () => {
+    expect(container.firstChild.childNodes.length).toEqual(2);
+  });
+
+  it('element should be html element', () => {
+    let inputElement = document.getElementById('live-search-field');
+    expect(inputElement instanceof HTMLElement).toBeTruthy();
+  });
+
+});

web/webpack.config.js

@@ -422,6 +422,7 @@ module.exports = [{
       use: {
         loader: 'imports-loader?' +
         'pgadmin.dashboard' +
+        ',pgadmin.browser.quick_search' +
         ',pgadmin.tools.user_management' +
         ',pgadmin.browser.object_statistics' +
         ',pgadmin.browser.dependencies' +

web/webpack.shim.js

@@ -186,6 +186,7 @@ var webpackShimConfig = {
     'pgadmin.browser.preferences': path.join(__dirname, './pgadmin/browser/static/js/preferences'),
     'pgadmin.browser.menu': path.join(__dirname, './pgadmin/browser/static/js/menu'),
     'pgadmin.browser.activity': path.join(__dirname, './pgadmin/browser/static/js/activity'),
+    'pgadmin.browser.quick_search': path.join(__dirname, './pgadmin/browser/static/js/quick_search'),
     'pgadmin.browser.messages': '/browser/js/messages',
     'pgadmin.browser.node': path.join(__dirname, './pgadmin/browser/static/js/node'),
     'pgadmin.browser.node.ui': path.join(__dirname, './pgadmin/browser/static/js/node.ui'),