fix: Info panel not showing when some apps miss infoPanel config (parse-community#2627)

Author: vardhan0604

src/components/BrowserCell/BrowserCell.react.js

@@ -294,7 +294,7 @@ export default class BrowserCell extends Component {
       this.props.setShowAggregatedData(true);
       this.props.setSelectedObjectId(this.props.objectId);
       if (this.props.isPanelVisible) {
-        this.props.callCloudFunction(this.props.objectId, this.props.className);
+        this.props.callCloudFunction(this.props.objectId, this.props.className, this.props.appId);
       }
     }
 
@@ -649,7 +649,7 @@ export default class BrowserCell extends Component {
                 isPanelVisible &&
                 ((e.shiftKey && !this.props.firstSelectedCell) || !e.shiftKey)
               ) {
-                callCloudFunction(this.props.objectId, this.props.className);
+                callCloudFunction(this.props.objectId, this.props.className, this.props.appId);
               }
             }
             handleCellClick(e, row, col);

src/components/Toolbar/Toolbar.react.js

@@ -15,7 +15,7 @@ import { useNavigate, useNavigationType, NavigationType } from 'react-router-dom
 
 const POPOVER_CONTENT_ID = 'toolbarStatsPopover';
 
-const Stats = ({ data, classwiseCloudFunctions, className }) => {
+const Stats = ({ data, classwiseCloudFunctions, className, appId , appName}) => {
   const [selected, setSelected] = React.useState(null);
   const [open, setOpen] = React.useState(false);
   const buttonRef = React.useRef();
@@ -98,7 +98,7 @@ const Stats = ({ data, classwiseCloudFunctions, className }) => {
     setSelected(statsOptions[0]);
   }, []);
 
-  const rightMarginStyle = classwiseCloudFunctions && classwiseCloudFunctions[className] ? '120px' : 'initial';
+  const rightMarginStyle = classwiseCloudFunctions && classwiseCloudFunctions[`${appId}${appName}`] && classwiseCloudFunctions[`${appId}${appName}`][className] ? '120px' : 'initial';
 
   return (
     <>
@@ -140,9 +140,9 @@ const Toolbar = props => {
           </div>
         </div>
       </div>
-      {props?.selectedData?.length ? <Stats data={props.selectedData} classwiseCloudFunctions={props.classwiseCloudFunctions} className={props.className} /> : null}
+      {props?.selectedData?.length ? <Stats data={props.selectedData} classwiseCloudFunctions={props.classwiseCloudFunctions} className={props.className} appId={props.appId} appName={props.appName}/> : null}
       <div className={styles.actions}>{props.children}</div>
-      {props.classwiseCloudFunctions && props.classwiseCloudFunctions[props.className] && (
+      {props.classwiseCloudFunctions && props.classwiseCloudFunctions[`${props.appId}${props.appName}`] && props.classwiseCloudFunctions[`${props.appId}${props.appName}`][props.className] && (
         <button
           onClick={props.togglePanel}
           className={styles.btn}

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

@@ -266,15 +266,15 @@ class Browser extends DashboardView {
     });
   }
 
-  fetchAggregationPanelData(objectId, className) {
+  fetchAggregationPanelData(objectId, className, appId) {
     this.setState({
       isLoading: true,
     });
     const params = {
       objectId: objectId,
     };
-    const cloudCodeFunction = this.state.classwiseCloudFunctions[className][0].cloudCodeFunction;
-
+    const appName = this.props.params.appId;
+    const cloudCodeFunction = this.state.classwiseCloudFunctions[`${appId}${appName}`]?.[className][0].cloudCodeFunction;
     Parse.Cloud.run(cloudCodeFunction, params).then(
       result => {
         if (result && result.panel && result.panel && result.panel.segments) {
@@ -328,12 +328,14 @@ class Browser extends DashboardView {
   classAndCloudFuntionMap(data) {
     const classMap = {};
     data.apps.forEach(app => {
-      app.infoPanel.forEach(panel => {
+      const appName = app.appName;
+      classMap[`${app.appId}${appName}`] = {};
+      app.infoPanel && app.infoPanel.forEach(panel => {
         panel.classes.forEach(className => {
-          if (!classMap[className]) {
-            classMap[className] = [];
+          if (!classMap[`${app.appId}${appName}`][className]) {
+            classMap[`${app.appId}${appName}`][className] = [];
           }
-          classMap[className].push({
+          classMap[`${app.appId}${appName}`][className].push({
             title: panel.title,
             cloudCodeFunction: panel.cloudCodeFunction,
             classes: panel.classes,
@@ -2066,6 +2068,7 @@ class Browser extends DashboardView {
             setAggregationPanelData={this.setAggregationPanelData}
             setErrorAggregatedData={this.setErrorAggregatedData}
             errorAggregatedData={this.state.errorAggregatedData}
+            appName = {this.props.params.appId}
           />
         );
       }

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

@@ -79,7 +79,9 @@ const BrowserToolbar = ({
 
   togglePanel,
   isPanelVisible,
-  classwiseCloudFunctions
+  classwiseCloudFunctions,
+  appId,
+  appName
 }) => {
   const selectionLength = Object.keys(selection).length;
   const isPendingEditCloneRows = editCloneRows && editCloneRows.length > 0;
@@ -276,6 +278,8 @@ const BrowserToolbar = ({
       togglePanel={togglePanel}
       isPanelVisible={isPanelVisible}
       classwiseCloudFunctions={classwiseCloudFunctions}
+      appId={appId}
+      appName = {appName}
     >
       {onAddRow && (
         <a className={classes.join(' ')} onClick={onClick}>

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

@@ -103,7 +103,7 @@ export default class DataBrowser extends React.Component {
       this.setState({ order });
     }
     if (props && props.className) {
-      if (!props.classwiseCloudFunctions[props.className]) {
+      if (!props.classwiseCloudFunctions?.[`${props.app.applicationId}${props.appName}`]?.[props.className]) {
         this.setState({ isPanelVisible: false });
         this.setState({ selectedObjectId: undefined });
       }
@@ -198,7 +198,7 @@ export default class DataBrowser extends React.Component {
       if(this.props.errorAggregatedData != {}){
         this.props.setErrorAggregatedData({});
       }
-      this.props.callCloudFunction(this.state.selectedObjectId, this.props.className);
+      this.props.callCloudFunction(this.state.selectedObjectId, this.props.className,this.props.app.applicationId);
     }
   }
 
@@ -364,7 +364,7 @@ export default class DataBrowser extends React.Component {
           showAggregatedData:true
         })
         if(prevObjectID !== this.state.selectedObjectId && this.state.isPanelVisible){
-          this.props.callCloudFunction(this.state.selectedObjectId,this.props.className)
+          this.props.callCloudFunction(this.state.selectedObjectId,this.props.className,this.props.app.applicationId)
         }
         e.preventDefault();
         break;
@@ -405,7 +405,7 @@ export default class DataBrowser extends React.Component {
           showAggregatedData: true,
         });
         if (prevObjectID !== this.state.selectedObjectId && this.state.isPanelVisible) {
-          this.props.callCloudFunction(this.state.selectedObjectId, this.props.className);
+          this.props.callCloudFunction(this.state.selectedObjectId, this.props.className,this.props.app.applicationId);
         }
 
         e.preventDefault();
@@ -642,6 +642,8 @@ export default class DataBrowser extends React.Component {
           allClassesSchema={this.state.allClassesSchema}
           togglePanel={this.togglePanelVisibility}
           isPanelVisible={this.state.isPanelVisible}
+          appId={this.props.app.applicationId}
+          appName = {this.props.appName}
           {...other}
         />