fix: Info panel data not reloading when clicking refresh button in data browser

src/dashboard/Data/Browser/Browser.react.js

@@ -411,6 +411,7 @@ class Browser extends DashboardView {
         this.currentInfoPanelQuery = null;
       }
     });
+    return promise;
   }
 
   setAggregationPanelData(data) {
@@ -1037,12 +1038,17 @@ class Browser extends DashboardView {
     return schemaSimplifiedData;
   }
 
-  async refresh() {
+  async refresh(onRefreshStart) {
     if (Object.keys(this.state.selection).length > 0) {
       if (!window.confirm(SELECTED_ROWS_MESSAGE)) {
-        return;
+        return false;
       }
     }
+
+    if (onRefreshStart && typeof onRefreshStart === 'function') {
+      onRefreshStart();
+    }
+
     const relation = this.state.relation;
     const prevFilters = this.state.filters || new List();
     const initialState = {
@@ -1052,15 +1058,20 @@ class Browser extends DashboardView {
       selection: {},
       editCloneRows: null,
     };
-    if (relation) {
-      this.setState(initialState);
-      this.setRelation(relation, prevFilters);
-    } else {
-      this.setState({
-        ...initialState,
-        relation: null,
-      });
-      await this.fetchData(this.props.params.className, prevFilters);
+    try {
+      if (relation) {
+        this.setState(initialState);
+        await this.setRelation(relation, prevFilters);
+      } else {
+        this.setState({
+          ...initialState,
+          relation: null,
+        });
+        await this.fetchData(this.props.params.className, prevFilters);
+      }
+      return true;
+    } catch {
+      return false;
     }
   }
 
@@ -1508,7 +1519,7 @@ class Browser extends DashboardView {
         this.props.navigate(url);
       }
     );
-    this.fetchRelation(relation, filters);
+    return this.fetchRelation(relation, filters);
   }
 
   handlePointerClick({ className, id, field = 'objectId' }) {

src/dashboard/Data/Browser/DataBrowser.react.js

@@ -143,6 +143,7 @@ export default class DataBrowser extends React.Component {
     this.handleKey = this.handleKey.bind(this);
     this.handleHeaderDragDrop = this.handleHeaderDragDrop.bind(this);
     this.handleResize = this.handleResize.bind(this);
+    this.handleRefresh = this.handleRefresh.bind(this);
     this.togglePanelVisibility = this.togglePanelVisibility.bind(this);
     this.setCurrent = this.setCurrent.bind(this);
     this.setEditing = this.setEditing.bind(this);
@@ -373,6 +374,95 @@ export default class DataBrowser extends React.Component {
     }, 1000);
   }
 
+  async refreshPanels() {
+    if (!this.state.isPanelVisible) {
+      return;
+    }
+
+    const { selectedObjectId, panelCount, displayedObjectIds, prefetchCache } = this.state;
+
+    // Prepare a new cache object by removing entries we want to refresh
+    const newPrefetchCache = { ...prefetchCache };
+
+    if (selectedObjectId) {
+      delete newPrefetchCache[selectedObjectId];
+    }
+
+    if (panelCount > 1 && displayedObjectIds.length > 0) {
+      displayedObjectIds.forEach(objectId => {
+        if (objectId !== selectedObjectId) {
+          delete newPrefetchCache[objectId];
+        }
+      });
+    }
+
+    // Batch state update
+    await new Promise(resolve => {
+      this.setState({ prefetchCache: newPrefetchCache }, resolve);
+    });
+
+    // Now perform fetches
+    const promises = [];
+
+    if (selectedObjectId) {
+      promises.push(this.handleCallCloudFunction(
+        selectedObjectId,
+        this.props.className,
+        this.props.app.applicationId
+      ));
+    }
+
+    if (panelCount > 1 && displayedObjectIds.length > 0) {
+      displayedObjectIds.forEach(objectId => {
+        if (objectId !== selectedObjectId) {
+          promises.push(this.fetchDataForMultiPanel(objectId));
+        }
+      });
+    }
+
+    await Promise.all(promises);
+  }
+
+  setPanelsLoading() {
+    if (!this.state.isPanelVisible) {
+      return;
+    }
+    // Set loading for the main selected panel
+    this.props.setLoadingInfoPanel(true);
+
+    // Set loading for all displayed panels
+    if (this.state.displayedObjectIds.length > 0) {
+      this.setState({
+        loadingObjectIds: new Set(this.state.displayedObjectIds)
+      });
+    }
+  }
+
+  async handleRefresh() {
+    try {
+      const onRefreshStart = () => {
+        this.setPanelsLoading();
+      };
+
+      const success = await this.props.onRefresh(onRefreshStart);
+
+      if (success) {
+        await this.refreshPanels();
+      } else {
+        // If refresh failed, reset loading state
+        this.props.setLoadingInfoPanel(false);
+        this.setState({ loadingObjectIds: new Set() });
+      }
+    } catch (error) {
+      console.error('Error refreshing data:', error);
+      this.props.setLoadingInfoPanel(false);
+      this.setState({ loadingObjectIds: new Set() });
+      if (this.props.showNote) {
+        this.props.showNote('Failed to refresh data', true);
+      }
+    }
+  }
+
   togglePanelVisibility() {
     const newVisibility = !this.state.isPanelVisible;
     this.setState({ isPanelVisible: newVisibility });
@@ -993,6 +1083,7 @@ export default class DataBrowser extends React.Component {
           [objectId]: cached.data
         }
       }));
+      return Promise.resolve();
     } else {
       // Fetch fresh data
       const cloudCodeFunction =
@@ -1001,7 +1092,7 @@ export default class DataBrowser extends React.Component {
         ]?.[className]?.[0]?.cloudCodeFunction;
 
       if (!cloudCodeFunction) {
-        return;
+        return Promise.resolve();
       }
 
       const params = {
@@ -1015,7 +1106,7 @@ export default class DataBrowser extends React.Component {
         loadingObjectIds: new Set(prev.loadingObjectIds).add(objectId)
       }));
 
-      Parse.Cloud.run(cloudCodeFunction, params, options).then(result => {
+      return Parse.Cloud.run(cloudCodeFunction, params, options).then(result => {
         // Store in both prefetchCache and multiPanelData
         this.setState(prev => {
           const newLoading = new Set(prev.loadingObjectIds);
@@ -1307,6 +1398,7 @@ export default class DataBrowser extends React.Component {
           [objectId]: cached.data
         }
       }));
+      return Promise.resolve();
     } else {
       if (cached) {
         this.setState(prev => {
@@ -1315,7 +1407,7 @@ export default class DataBrowser extends React.Component {
           return { prefetchCache: n };
         });
       }
-      this.props.callCloudFunction(objectId, className, appId);
+      return this.props.callCloudFunction(objectId, className, appId);
     }
   }
 
@@ -1597,6 +1689,7 @@ export default class DataBrowser extends React.Component {
           showPanelCheckbox={this.state.showPanelCheckbox}
           toggleShowPanelCheckbox={this.toggleShowPanelCheckbox}
           {...other}
+          onRefresh={this.handleRefresh}
         />
 
         {this.state.contextMenuX && (