Code improvements to handle API errors gracefully in tree code. #6308

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

@@ -543,6 +543,9 @@ export default function PreferencesComponent({ ...props }) {
       method: 'PUT',
       data: save_data,
     }).then(() => {
+      let requiresTreeRefresh = save_data.some((s)=>{
+        return s.name=='show_system_objects'||s.name=='show_empty_coll_nodes'||s.name.startsWith('show_node_')||s.name=='hide_shared_server';
+      });
       let requires_refresh = false;
       /* Find the modules changed */
       let modulesChanged = {};
@@ -559,7 +562,22 @@ export default function PreferencesComponent({ ...props }) {
 
         requires_refresh = checkRefreshRequired(pref, requires_refresh);
 
-        if (pref.name == 'hide_shared_server') {
+        // Sync the lock layout menu with preferences
+        if (pref.name == 'lock_layout') {
+          let fileMenu = pgAdmin.Browser.MainMenus.find((menu) => menu.name == 'file');
+          let layoutSubMenu = fileMenu['menuItems'].find(menu => menu.name == 'mnu_locklayout');
+          layoutSubMenu['menu_items'].forEach(item => {
+            if (item.name === 'mnu_lock_'+save_data[0]['value']) {
+              item.checked = true;
+            } else {
+              item.checked = false;
+            }
+          });
+          pgAdmin.Browser.Events.trigger('pgadmin:nw-refresh-menu-item', 'lock_layout');
+        }
+      }
+
+      if (requiresTreeRefresh) {
         Notify.confirm(
           gettext('Object explorer tree refresh required'),
           gettext('The object explorer tree refresh is required. Do you wish to refresh the tree?'),
@@ -578,20 +596,6 @@ export default function PreferencesComponent({ ...props }) {
           gettext('Later')
         );
       }
-        // Sync the lock layout menu with preferences
-        if (pref.name == 'lock_layout') {
-          let fileMenu = pgAdmin.Browser.MainMenus.find((menu) => menu.name == 'file');
-          let layoutSubMenu = fileMenu['menuItems'].find(menu => menu.name == 'mnu_locklayout');
-          layoutSubMenu['menu_items'].forEach(item => {
-            if (item.name === 'mnu_lock_'+save_data[0]['value']) {
-              item.checked = true;
-            } else {
-              item.checked = false;
-            }
-          });
-          pgAdmin.Browser.Events.trigger('pgadmin:nw-refresh-menu-item', 'lock_layout');
-        }
-      }
 
       if (requires_refresh) {
         Notify.confirm(

web/pgadmin/static/js/tree/tree_nodes.ts

@@ -17,6 +17,7 @@ import Notify from '../../../static/js/helpers/Notifier';
 import gettext from 'sources/gettext';
 
 import { unix } from 'path-fx';
+import getApiInstance, { parseApiError } from '../api_instance';
 
 export class ManageTreeNodes {
   constructor() {
@@ -73,23 +74,23 @@ export class ManageTreeNodes {
     res(treeNode);
   });
 
-  public readNode = (_path: string) => new Promise<string[]>((res, rej) => {
+  public readNode = async (_path: string) => {
     let temp_tree_path = _path;
     const node = this.findNode(_path);
     const base_url = pgAdmin.Browser.URL;
+    const api = getApiInstance();
 
     if (node && node.children.length > 0) {
-      if (!node.type === FileType.File) {
+      if (node.type !== FileType.File) {
-        rej('It\'s a leaf node');
+        console.error(node, 'It\'s a leaf node');
+        return [];
       }
       else {
-        if (node.children.length != 0) res(node.children);
+        if (node.children.length != 0) return node.children;
       }
     }
 
     const self = this;
-
-    async function loadData() {
     let url = '';
     if (_path == '/browser') {
       url = url_for('browser.nodes');
@@ -117,50 +118,34 @@ export class ManageTreeNodes {
       }
     }
 
-      async function jsonData(fetch_url) {
+    let treeData = [];
-        const result = await fetch(fetch_url, {
+    if (url) {
-          headers: {
-            'X-Requested-With': 'XMLHttpRequest',
-            'X-pgA-CSRFToken': pgAdmin.csrf_token
-          },
-        });
-
-        if (result.status == 200) {
       try {
-            const json = await result.json();
+        const res = await api.get(url);
-            return json.data;
+        treeData = res.data.data;
-          } catch (e) {
+      } catch (error) {
-            console.warn(e);
+        /* react-aspen does not handle reject case */
+        console.error(error);
+        Notify.error(parseApiError(error)||'Node Load Error...');
+        return [];
       }
     }
-        throw new Error('Node Load Error...');
-      }
-
-      let treeData = null;
-      if (url) treeData = await jsonData(url);
 
     const Path = BrowserFS.BFSRequire('path');
-      const fill = async (tree) => {
+    for (const idx in treeData) {
-        for (const idx in tree) {
+      const _node: any = treeData[idx];
-          const _node = tree[idx];
       const _pathl = Path.join(_path, _node.id);
       await self.addNode(temp_tree_path, _pathl, _node);
     }
-      };
+    if (node.children.length > 0) return node.children;
-
-      await fill(treeData);
-      if (node.children.length > 0) res(node.children);
     else {
-        res([]);
       if (node.data && node.data._type == 'server' && node.data.connected) {
         Notify.info(gettext('Server children are not available.'
         +' Please check these nodes are not hidden through the preferences setting `Browser > Nodes`.'), null);
       }
+      return [];
     }
-
+  };
-    }
-    loadData();
-  });
 
   public generate_url = (path: string) => {
     let _path = path;