Add a note on top of keyboard shortcuts preferences to show the Accesskey of the browser. #5022

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

@@ -138,7 +138,7 @@ _.extend(pgBrowser, {
   },
 
   onPreferencesChange: function(module, eventHandler) {
-    pgBrowser.Events.on('prefchange:'+module, function(event) {
+    pgBrowser.Events?.on('prefchange:'+module, function(event) {
       eventHandler(event);
     });
   },

web/pgadmin/preferences/__init__.py

@@ -146,6 +146,7 @@ def _iterate_categories(pref_d, label, res):
         oc = {
             "id": c['id'],
             "mid": pref_d['id'],
+            "name": c['name'],
             "label": gettext(c['label']),
             "value": '{0}{1}'.format(c['id'], gettext(c['label'])),
             "inode": False,

web/pgadmin/preferences/static/js/components/PreferencesComponent.jsx

@@ -27,6 +27,7 @@ import { DefaultButton, PgIconButton, PrimaryButton } from '../../../../static/j
 import BaseUISchema from 'sources/SchemaView/base_schema.ui';
 import { getBinaryPathSchema } from '../../../../browser/server_groups/servers/static/js/binary_path.ui';
 import { _set_dynamic_tab } from '../../../../tools/sqleditor/static/js/show_query_tool';
+import { getBrowserAccesskey } from '../../../../static/js/components/ShortcutTitle';
 
 class PreferencesSchema extends BaseUISchema {
   constructor(initValues = {}, schemaFields = []) {
@@ -205,7 +206,7 @@ export default function PreferencesComponent({ ...props }) {
             'id': sid.toString(),
             'label': subNode.label,
             '_label': subNode.label,
-            'name': subNode.label,
+            'name': subNode.name,
             'icon': '',
             'inode': false,
             '_type': subNode.label.toLowerCase(),
@@ -338,6 +339,8 @@ export default function PreferencesComponent({ ...props }) {
     // Check and add the note for the element.
     if (subNode.label == gettext('Nodes') && node.label == gettext('Browser')) {
       note = [gettext('This settings is to Show/Hide nodes in the browser tree.')].join('');
+    } if(nodeData.name == 'keyboard_shortcuts') {
+      note = gettext('The Accesskey here is %s.', getBrowserAccesskey().join(' + '));
     } else {
       note = [note].join('');
     }
@@ -368,6 +371,7 @@ export default function PreferencesComponent({ ...props }) {
     // Listen selected preferences tree node event and show the appropriate components in right panel.
     pgAdmin.Browser.Events.on('preferences:tree:selected', (event, item) => {
       if (item.type == FileType.File) {
+        prefSchema.current.setSelectedCategory(item._metadata.data.name);
         prefSchema.current.schemaFields.forEach((field) => {
           field.visible = field.parentId === item._metadata.data.id && !field?.hidden ;
           if(field.visible && _.isNull(firstElement)) {
@@ -629,12 +633,11 @@ export default function PreferencesComponent({ ...props }) {
           </Box>
           <Box className={clsx(classes.preferencesContainer)}>
             {
-              prefSchema.current && loadTree > 0 ?
+              prefSchema.current && loadTree > 0 &&
                 <RightPanel schema={prefSchema.current} initValues={initValues} onDataChange={(changedData) => {
                   Object.keys(changedData).length > 0 ? setDisableSave(false) : setDisableSave(true);
                   prefChangedData.current = changedData;
                 }}></RightPanel>
-                : <></>
             }
           </Box>
         </Box>

web/pgadmin/tools/erd/static/js/erd_tool/components/ERDTool.jsx

@@ -973,7 +973,7 @@ class ERDTool extends React.Component {
           <ERDCanvasSettings.Provider value={{
             cardinality_notation: this.state.cardinality_notation
           }}>
-            <CanvasWidget className={this.props.classes.diagramCanvas} ref={(ele)=>{this.canvasEle = ele?.ref?.current;}} engine={this.diagram.getEngine()} />
+            {this.diagram.getEngine() && <CanvasWidget className={this.props.classes.diagramCanvas} ref={(ele)=>{this.canvasEle = ele?.ref?.current;}} engine={this.diagram.getEngine()} />}
           </ERDCanvasSettings.Provider>
         </div>
       </Box>

web/pgadmin/utils/preferences.py

@@ -349,6 +349,7 @@ class Preferences():
             cat = self.categories[c]
             interm = {
                 'id': cat['id'],
+                'name': cat['name'],
                 'label': cat['label'] or cat['name'],
                 'preferences': []
             }