parse-community · mtrezza · Mar 19, 2025 · Mar 18, 2025
diff --git a/src/components/AggregationPanel/AggregationPanel.js b/src/components/AggregationPanel/AggregationPanel.js
@@ -38,16 +38,20 @@ const AggregationPanel = ({
     }
   }, [errorAggregatedData, setSelectedObjectId, setErrorAggregatedData]);
 
-  const isLoading = useMemo(() =>
-    depth === 0 && selectedObjectId && isLoadingCloudFunction && showAggregatedData,
-  [depth, selectedObjectId, isLoadingCloudFunction, showAggregatedData]
+  const isLoading = useMemo(
+    () => depth === 0 && selectedObjectId && isLoadingCloudFunction && showAggregatedData,
+    [depth, selectedObjectId, isLoadingCloudFunction, showAggregatedData]
   );
 
-  const shouldShowAggregatedData = useMemo(() =>
-    depth === 0
-      ? (selectedObjectId && showAggregatedData && Object.keys(data).length !== 0 && Object.keys(errorAggregatedData).length === 0)
-      : true,
-  [depth, selectedObjectId, showAggregatedData, data, errorAggregatedData]
+  const shouldShowAggregatedData = useMemo(
+    () =>
+      depth === 0
+        ? selectedObjectId &&
+          showAggregatedData &&
+          Object.keys(data).length !== 0 &&
+          Object.keys(errorAggregatedData).length === 0
+        : true,
+    [depth, selectedObjectId, showAggregatedData, data, errorAggregatedData]
   );
 
   const fetchNestedData = useCallback(async () => {
@@ -137,8 +141,13 @@ const AggregationPanel = ({
   if (depth > 0) {
     return (
       <div className={styles.nestedPanel}>
-        <div className={`${styles.nestedPanelHeader} ${isExpanded ? styles.expanded : ''}`} onClick={handleToggle}>
-          <span className={`${styles.expandButton} ${isExpanded ? styles.expanded : ''}`}>{panelTitle}</span>
+        <div
+          className={`${styles.nestedPanelHeader} ${isExpanded ? styles.expanded : ''}`}
+          onClick={handleToggle}
+        >
+          <span className={`${styles.expandButton} ${isExpanded ? styles.expanded : ''}`}>
+            {panelTitle}
+          </span>
           <div>
             {isExpanded && (
               <button
@@ -148,9 +157,8 @@ const AggregationPanel = ({
               >
                 <span>↻</span>
               </button>
-
             )}
-            <span >{isExpanded ? '▼' : '▲'}</span>
+            <span>{isExpanded ? '▼' : '▲'}</span>
           </div>
         </div>
         {isExpanded && (
@@ -160,7 +168,8 @@ const AggregationPanel = ({
                 <LoaderDots />
               </div>
             ) : (
-              nestedData && nestedData.panel.segments.map((segment, index) =>
+              nestedData &&
+              nestedData.panel.segments.map((segment, index) =>
                 renderSegmentContent(segment, index)
               )
             )}
@@ -178,14 +187,10 @@ const AggregationPanel = ({
         </div>
       ) : shouldShowAggregatedData ? (
         <div className={styles.mainContent}>
-          {data.panel.segments.map((segment, index) =>
-            renderSegmentContent(segment, index)
-          )}
+          {data.panel.segments.map((segment, index) => renderSegmentContent(segment, index))}
         </div>
       ) : (
-        <div className={styles.center}>
-          No object selected.
-        </div>
+        <div className={styles.center}>No object selected.</div>
       )}
     </div>
   );

diff --git a/src/components/AggregationPanel/AggregationPanelComponents.js b/src/components/AggregationPanel/AggregationPanelComponents.js
@@ -12,7 +12,13 @@ export const TextElement = ({ text }) => (
 export const KeyValueElement = ({ item, appName }) => (
   <div className={styles.keyValue}>
     {item.key}:
-    {item.url ? <a href={item.isRelativeUrl ? `apps/${appName}/${item.url}` : item.url} target="_blank">{item.value}</a> : <span>{item.value}</span>}
+    {item.url ? (
+      <a href={item.isRelativeUrl ? `apps/${appName}/${item.url}` : item.url} target="_blank">
+        {item.value}
+      </a>
+    ) : (
+      <span>{item.value}</span>
+    )}
   </div>
 );
 
@@ -80,10 +86,10 @@ export const ButtonElement = ({ item, showNote }) => {
       .then(response => response.json())
       .then(data => {
         const formattedData = JSON.stringify(data, null, 2);
-        showNote(`${formattedData}`,false)
+        showNote(`${formattedData}`, false);
       })
       .catch(error => {
-        showNote(`${error}`,true)
+        showNote(`${error}`, true);
       });
   };
 

diff --git a/src/components/BrowserCell/BrowserCell.react.js b/src/components/BrowserCell/BrowserCell.react.js
@@ -578,7 +578,7 @@ export default class BrowserCell extends Component {
       markRequiredFieldRow,
       handleCellClick,
       selectedCells,
-      setShowAggregatedData
+      setShowAggregatedData,
     } = this.props;
 
     const classes = [...this.state.classes];

diff --git a/src/components/BrowserRow/BrowserRow.react.js b/src/components/BrowserRow/BrowserRow.react.js
@@ -79,7 +79,7 @@ export default class BrowserRow extends Component {
             type="checkbox"
             checked={selection['*'] || selection[obj.id]}
             onChange={e => selectRow(obj.id, e.target.checked)}
-            onMouseDown={(e) => onMouseDownRowCheckBox(e.target.checked)}
+            onMouseDown={e => onMouseDownRowCheckBox(e.target.checked)}
           />
         </span>
         {order.map(({ name, width, visible }, j) => {

diff --git a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js
@@ -25,7 +25,7 @@ export default class DataBrowserHeaderBar extends React.Component {
       selected,
       isDataLoaded,
       setSelectedObjectId,
-      setCurrent
+      setCurrent,
     } = this.props;
     const elements = [
       <div key="check" className={[styles.wrap, styles.check].join(' ')}>
@@ -50,11 +50,11 @@ export default class DataBrowserHeaderBar extends React.Component {
         !preventSort &&
         (type === 'String' || type === 'Number' || type === 'Date' || type === 'Boolean')
       ) {
-        onClick = () =>{
+        onClick = () => {
           updateOrdering((order === 'descending' ? '' : '-') + name);
           setSelectedObjectId(null);
-          setCurrent(null)
-        }
+          setCurrent(null);
+        };
       }
 
       let className = styles.wrap;
@@ -83,7 +83,7 @@ export default class DataBrowserHeaderBar extends React.Component {
       const finalStyle = {};
       if (headers.length % 2) {
         finalStyle.background = '#726F85';
-      } else{
+      } else {
         finalStyle.background = '#66637A';
       }
 

diff --git a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss
@@ -8,7 +8,8 @@
 @import 'stylesheets/globals.scss';
 
 .bar {
-  position: absolute;
+  position: sticky;
+  z-index: 10;
   top: 0;
   left: 0;
   height: 0;

diff --git a/src/components/Filter/Filter.react.js b/src/components/Filter/Filter.react.js
@@ -61,7 +61,8 @@ function changeConstraint(schema, currentClassName, filters, index, newConstrain
     class: currentClassName,
     field: field,
     constraint: newConstraint,
-    compareTo: (compareType && prevCompareTo) ? prevCompareTo : Filters.DefaultComparisons[compareType],
+    compareTo:
+      compareType && prevCompareTo ? prevCompareTo : Filters.DefaultComparisons[compareType],
   });
   return filters.set(index, newFilter);
 }
@@ -88,7 +89,7 @@ const Filter = ({
   const [compare, setCompare] = useState(false);
   const hasCompareTo = filters.some(filter => filter.get('compareTo') !== undefined);
 
-  if(compare !== hasCompareTo){
+  if (compare !== hasCompareTo) {
     setCompare(hasCompareTo);
   }
   const currentApp = React.useContext(CurrentApp);
@@ -108,7 +109,7 @@ const Filter = ({
           gap: '10px',
           padding: '12px 15px 0px 15px',
           color: '#343445',
-          'font-weight': '600'
+          'font-weight': '600',
         }}
       >
         <div style={{ width: '140px' }}>Class</div>

diff --git a/src/components/Label/Label.react.js b/src/components/Label/Label.react.js
@@ -15,7 +15,8 @@ const Label = props => {
   return (
     <div
       className={[styles.label, fieldStyles.centered].join(' ')}
-      style={{ padding: '0 ' + padding, ...props.style }}>
+      style={{ padding: '0 ' + padding, ...props.style }}
+    >
       <div className={styles.text}>{props.text}</div>
       {props.description ? <div className={styles.description}>{props.description}</div> : null}
     </div>

diff --git a/src/components/Toolbar/Toolbar.react.js b/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, appId , appName}) => {
+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,12 @@ const Stats = ({ data, classwiseCloudFunctions, className, appId , appName}) =>
     setSelected(statsOptions[0]);
   }, []);
 
-  const rightMarginStyle = classwiseCloudFunctions && classwiseCloudFunctions[`${appId}${appName}`] && classwiseCloudFunctions[`${appId}${appName}`][className] ? '120px' : 'initial';
+  const rightMarginStyle =
+    classwiseCloudFunctions &&
+    classwiseCloudFunctions[`${appId}${appName}`] &&
+    classwiseCloudFunctions[`${appId}${appName}`][className]
+      ? '120px'
+      : 'initial';
 
   return (
     <>
@@ -140,22 +145,29 @@ const Toolbar = props => {
           </div>
         </div>
       </div>
-      {props?.selectedData?.length ? <Stats data={props.selectedData} classwiseCloudFunctions={props.classwiseCloudFunctions} className={props.className} appId={props.appId} appName={props.appName}/> : 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.appId}${props.appName}`] && props.classwiseCloudFunctions[`${props.appId}${props.appName}`][props.className] && (
-        <button
-          onClick={props.togglePanel}
-          className={styles.btn}
-        >
+      {props.classwiseCloudFunctions &&
+        props.classwiseCloudFunctions[`${props.appId}${props.appName}`] &&
+        props.classwiseCloudFunctions[`${props.appId}${props.appName}`][props.className] && (
+        <button onClick={props.togglePanel} className={styles.btn}>
           {props.isPanelVisible ? (
             <>
               <Icon width={18} height={18} fill="#797592" name="x-outline" />
-              Hide Panel
+                Hide Panel
             </>
           ) : (
             <>
               <Icon width={18} height={18} fill="#797592" name="left-outline" />
-              Show Panel
+                Show Panel
             </>
           )}
         </button>

diff --git a/src/dashboard/Dashboard.js b/src/dashboard/Dashboard.js
@@ -180,7 +180,6 @@ export default class Dashboard extends React.Component {
           configLoadingState: AsyncStatus.FAILED,
         });
       });
-
   }
 
   render() {
@@ -216,14 +215,14 @@ export default class Dashboard extends React.Component {
 
     const SettingsRoute = (
       <Route element={<SettingsData />}>
-        <Route path='dashboard' element={<DashboardSettings />} />
-        <Route path='security' element={<Security />} />
-        <Route path='general' element={<GeneralSettings />} />
-        <Route path='keys' element={<SecuritySettings />} />
-        <Route path='users' element={<UsersSettings />} />
-        <Route path='push' element={<PushSettings />} />
-        <Route path='hosting' element={<HostingSettings />} />
-        <Route index element={<Navigate replace to='dashboard' />} />
+        <Route path="dashboard" element={<DashboardSettings />} />
+        <Route path="security" element={<Security />} />
+        <Route path="general" element={<GeneralSettings />} />
+        <Route path="keys" element={<SecuritySettings />} />
+        <Route path="users" element={<UsersSettings />} />
+        <Route path="push" element={<PushSettings />} />
+        <Route path="hosting" element={<HostingSettings />} />
+        <Route index element={<Navigate replace to="dashboard" />} />
       </Route>
     );
 

diff --git a/src/dashboard/DashboardView.react.js b/src/dashboard/DashboardView.react.js
@@ -195,16 +195,18 @@ export default class DashboardView extends React.Component {
     }
     */
 
-    const settingsSections = [{
-      name: 'Dashboard',
-      link: '/settings/dashboard'
-    }];
+    const settingsSections = [
+      {
+        name: 'Dashboard',
+        link: '/settings/dashboard',
+      },
+    ];
 
     if (this.context.enableSecurityChecks) {
       settingsSections.push({
         name: 'Security',
         link: '/settings/security',
-      })
+      });
     }
 
     // Settings - nothing remotely like this in parse-server yet. Maybe it will arrive soon.