Fetch database objects after opening the backup dialog. #6799

web/pgadmin/static/js/SchemaView/MappedControl.jsx

@@ -116,7 +116,7 @@ MappedFormControlBase.propTypes = {
   onClick: PropTypes.func,
   withContainer: PropTypes.bool,
   controlGridBasis: PropTypes.number,
-  treeData: PropTypes.array,
+  treeData: PropTypes.oneOfType([PropTypes.array, PropTypes.instanceOf(Promise), PropTypes.func]),
 };
 
 /* Control mapping for grid cell view */

web/pgadmin/static/js/components/FormComponents.jsx

@@ -44,6 +44,7 @@ import { showFileManager } from '../helpers/showFileManager';
 import { withColorPicker } from '../helpers/withColorPicker';
 import { useWindowSize } from '../custom_hooks';
 import PgTreeView from '../PgTreeView';
+import Loader from 'sources/components/Loader';
 
 
 const useStyles = makeStyles((theme) => ({
@@ -1278,12 +1279,28 @@ FormButton.propTypes = {
 };
 
 export function InputTree({hasCheckbox, treeData, onChange, ...props}){
-  return <PgTreeView data={treeData} hasCheckbox={hasCheckbox} selectionChange={onChange} {...props}></PgTreeView>;
+  const [[finalData, isLoading], setFinalData] = useState([[], true]);
+
+  useEffect(() => {
+    let tdata = treeData, umounted = false;
+    if (typeof treeData === 'function') {
+      tdata = treeData();
+    }
+    setFinalData([[], true]);
+    Promise.resolve(tdata)
+      .then((res) => {
+        if(!umounted){
+          setFinalData([res, false]);
+        }
+      });
+    return () => umounted = true;
+  }, []);
+  return <>{isLoading ? <Loader message={gettext('Loading')}></Loader> : <PgTreeView data={finalData} hasCheckbox={hasCheckbox} selectionChange={onChange} {...props}></PgTreeView>}</>;
 }
 
 InputTree.propTypes = {
   hasCheckbox: PropTypes.bool,
-  treeData: PropTypes.array,
+  treeData: PropTypes.oneOfType([PropTypes.array, PropTypes.instanceOf(Promise), PropTypes.func]),
   onChange: PropTypes.func,
   selectionChange: PropTypes.func,
 };

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

@@ -255,26 +255,20 @@ define([
           });
         }
 
-        api({
-          url: backup_obj_url,
-          method: 'GET'
-        }).then((response)=> {
-          let objects = response.data.data;
-          let schema = that.getUISchema(treeItem,  'backup_objects', objects);
-          panel.title(gettext(`Backup (${pgBrowser.Nodes[data._type].label}: ${data.label})`));
-          panel.focus();
+        let schema = that.getUISchema(treeItem,  'backup_objects', backup_obj_url);
+        panel.title(gettext(`Backup (${pgBrowser.Nodes[data._type].label}: ${data.label})`));
+        panel.focus();
 
-          let typeOfDialog = 'backup_objects',
-            serverIdentifier = that.retrieveServerIdentifier(),
-            extraData = that.setExtraParameters(typeOfDialog);
+        let typeOfDialog = 'backup_objects',
+          serverIdentifier = that.retrieveServerIdentifier(),
+          extraData = that.setExtraParameters(typeOfDialog);
 
-          that.showBackupDialog(schema, treeItem, j, data, panel, typeOfDialog, serverIdentifier, extraData);
-        });
+        that.showBackupDialog(schema, treeItem, j, data, panel, typeOfDialog, serverIdentifier, extraData);
 
       });
     },
 
-    getUISchema: function(treeItem, backupType, objects) {
+    getUISchema: function(treeItem, backupType, backup_obj_url) {
       let treeNodeInfo = pgBrowser.tree.getTreeNodeHierarchy(treeItem);
       const selectedNode = pgBrowser.tree.selected();
       let itemNodeData = pgBrowser.tree.findNodeByDomElement(selectedNode).getData();
@@ -289,12 +283,25 @@ define([
           encoding: ()=>getNodeAjaxOptions('get_encodings', pgBrowser.Nodes['database'], treeNodeInfo, itemNodeData, {
             cacheNode: 'database',
             cacheLevel: 'server',
-          }),
+          })
         },
         treeNodeInfo,
         pgBrowser,
         backupType,
-        objects
+        {
+          objects: () => {
+            return new Promise((resolve, reject)=>{
+              let api = getApiInstance();
+              api({
+                url: backup_obj_url,
+                method: 'GET'
+              }).then((response)=> {
+                resolve(response.data.data);
+              }).catch((err)=>{
+                reject(err);
+              });
+            });
+          }}
       );
     },
     getGlobalUISchema: function(treeItem) {

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

@@ -430,8 +430,7 @@ export default class BackupSchema extends BaseUISchema {
       role: null,
       ...fieldOptions,
     };
-
-    this.treeData = objects;
+    this.treeData = objects?.objects;
     this.treeNodeInfo = treeNodeInfo;
     this.pgBrowser = pgBrowser;
     this.backupType = backupType;