From aa5c68dbca458069d93351edc0bc0287fe63b7e1 Mon Sep 17 00:00:00 2001
From: Harshvardhan Sharma <91624754+vardhan0604@users.noreply.github.com>
Date: Sat, 6 Jul 2024 19:32:45 +0530
Subject: [PATCH] feat: Add relational filter conditions in data browser
 (#2576)

---
 README.md                                     |  22 ++++
 .../BrowserFilter/BrowserFilter.react.js      | 100 +++++++++-------
 .../BrowserFilter/BrowserFilter.scss          |  21 +++-
 .../BrowserFilter/FilterRow.react.js          |  48 +++++++-
 src/components/Filter/Filter.react.js         | 110 ++++++++++++++----
 .../PushAudienceDialog.react.js               |   4 +-
 src/dashboard/Data/Browser/Browser.react.js   |  34 +++++-
 .../Data/Browser/BrowserToolbar.react.js      |  43 +++++--
 .../Data/Browser/DataBrowser.react.js         |  23 ++++
 .../Data/Browser/ObjectPickerDialog.react.js  |  10 +-
 src/dashboard/Push/PushAudiencesData.react.js |   4 +-
 .../Push/PushAudiencesIndex.react.js          |   4 +-
 src/dashboard/Push/PushNew.react.js           |   9 +-
 src/lib/Filters.js                            |  44 +++++++
 src/lib/queryFromFilters.js                   |  94 +++++++++++++--
 15 files changed, 468 insertions(+), 102 deletions(-)

diff --git a/README.md b/README.md
index 8d89b3190..329fdabca 100644
--- a/README.md
+++ b/README.md
@@ -60,6 +60,8 @@ Parse Dashboard is a standalone dashboard for managing your [Parse Server](https
   - [Configuring Localized Push Notifications](#configuring-localized-push-notifications)
   - [Run with Docker](#run-with-docker)
 - [Features](#features)
+  - [Data Browser](#data-browser)
+    - [Filters](#filters)
   - [Browse as User](#browse-as-user)
   - [Change Pointer Key](#change-pointer-key)
     - [Limitations](#limitations)
@@ -815,6 +817,26 @@ If you are not familiar with Docker, ``--port 8080`` will be passed in as argume
 # Features
 *(The following is not a complete list of features but a work in progress to build a comprehensive feature list.)*
 
+## Data Browser
+
+### Filters
+
+▶️ *Core > Browser > Filter*
+
+The filter dialog allows to add relational filter conditions based on other classes that have a pointer to the current class.
+
+For example, users in the `_User` class may have:
+
+- purchases in a `Purchase` class with a `_User` pointer field
+- transactions in a `Payment` class with a `_User` pointer field
+
+A relational filter allows you filter all users who:
+
+- purchased a specific item (in `Purchase` class)
+- payed with a specific payment method (in `Payment` class)
+
+To apply such a filter, simply go to the `_User` class and add the two required filter conditions with the `Purchase` and `Payment` classes.
+
 ## Browse as User
 
 ▶️ *Core > Browser > Browse*
diff --git a/src/components/BrowserFilter/BrowserFilter.react.js b/src/components/BrowserFilter/BrowserFilter.react.js
index 4f04d2561..38aeba282 100644
--- a/src/components/BrowserFilter/BrowserFilter.react.js
+++ b/src/components/BrowserFilter/BrowserFilter.react.js
@@ -46,13 +46,16 @@ export default class BrowserFilter extends React.Component {
   toggle() {
     let filters = this.props.filters;
     if (this.props.filters.size === 0) {
-      const available = Filters.availableFilters(
-        this.props.schema,
-        null,
-        this.state.blacklistedFilters
+      const available = Filters.findRelatedClasses(
+        this.props.className,
+        this.props.allClassesSchema,
+        this.state.blacklistedFilters,
+        this.state.filters
       );
-      const field = Object.keys(available)[0];
-      filters = new List([new Map({ field: field, constraint: available[field][0] })]);
+      const { filterClass, filterField, filterConstraint } = Filters.getFilterDetails(available);
+      filters = new List([
+        new Map({ class: filterClass, field: filterField, constraint: filterConstraint }),
+      ]);
     }
     this.setState(prevState => ({
       open: !prevState.open,
@@ -65,14 +68,17 @@ export default class BrowserFilter extends React.Component {
   }
 
   addRow() {
-    const available = Filters.availableFilters(
-      this.props.schema,
-      this.state.filters,
-      this.state.blacklistedFilters
+    const available = Filters.findRelatedClasses(
+      this.props.className,
+      this.props.allClassesSchema,
+      this.state.blacklistedFilters,
+      this.state.filters
     );
-    const field = Object.keys(available)[0];
+    const { filterClass, filterField, filterConstraint } = Filters.getFilterDetails(available);
     this.setState(({ filters }) => ({
-      filters: filters.push(new Map({ field: field, constraint: available[field][0] })),
+      filters: filters.push(
+        new Map({ class: filterClass, field: filterField, constraint: filterConstraint })
+      ),
       editMode: true,
     }));
   }
@@ -125,7 +131,12 @@ export default class BrowserFilter extends React.Component {
       if (this.props.filters.size) {
         popoverStyle.push(styles.active);
       }
-      const available = Filters.availableFilters(this.props.schema, this.state.filters);
+      const available = Filters.findRelatedClasses(
+        this.props.className,
+        this.props.allClassesSchema,
+        this.state.blacklistedFilters,
+        this.state.filters
+      );
       popover = (
         <Popover
           fixed={true}
@@ -154,6 +165,11 @@ export default class BrowserFilter extends React.Component {
                 filters={this.state.filters}
                 onChange={filters => this.setState({ filters: filters })}
                 onSearch={this.apply.bind(this)}
+                allClasses={this.props.allClassesSchema}
+                allClassesSchema={Filters.findRelatedClasses(
+                  this.props.className,
+                  this.props.allClassesSchema
+                )}
                 renderRow={props => (
                   <FilterRow
                     {...props}
@@ -194,33 +210,37 @@ export default class BrowserFilter extends React.Component {
               )}
               {!this.state.confirmName && (
                 <div className={styles.footer}>
-                  <Button
-                    color="white"
-                    value="Save"
-                    width="120px"
-                    onClick={() => this.setState({ confirmName: true })}
-                  />
-                  <Button
-                    color="white"
-                    value="Clear"
-                    disabled={this.state.filters.size === 0}
-                    width="120px"
-                    onClick={() => this.clear()}
-                  />
-                  <Button
-                    color="white"
-                    value="Add"
-                    disabled={Object.keys(available).length === 0}
-                    width="120px"
-                    onClick={() => this.addRow()}
-                  />
-                  <Button
-                    color="white"
-                    primary={true}
-                    value="Apply"
-                    width="120px"
-                    onClick={() => this.apply()}
-                  />
+                  <div className={styles.btnFlex}>
+                    <Button
+                      color="white"
+                      value="Save"
+                      width="120px"
+                      onClick={() => this.setState({ confirmName: true })}
+                    />
+                    <Button
+                      color="white"
+                      value="Clear"
+                      disabled={this.state.filters.size === 0}
+                      width="120px"
+                      onClick={() => this.clear()}
+                    />
+                  </div>
+                  <div className={styles.btnFlex}>
+                    <Button
+                      color="white"
+                      value="Add"
+                      disabled={Object.keys(available).length === 0}
+                      width="120px"
+                      onClick={() => this.addRow()}
+                    />
+                    <Button
+                      color="white"
+                      primary={true}
+                      value="Apply"
+                      width="120px"
+                      onClick={() => this.apply()}
+                    />
+                  </div>
                 </div>
               )}
             </div>
diff --git a/src/components/BrowserFilter/BrowserFilter.scss b/src/components/BrowserFilter/BrowserFilter.scss
index 25bab6bf8..4fc670771 100644
--- a/src/components/BrowserFilter/BrowserFilter.scss
+++ b/src/components/BrowserFilter/BrowserFilter.scss
@@ -85,19 +85,24 @@
 
 .body {
   position: absolute;
+  display: flex;
+  flex-direction: column;
+  max-height: 500px;
+  overflow: hidden;
   top: 30px;
   right: 0;
   border-radius: 5px 0 5px 5px;
   background: #797691;
-  width: 535px;
+  width: 685px;
   font-size: 14px;
 }
 
 .footer {
   background: rgba(0,0,0,0.2);
-  padding: 11px 0;
+  padding: 11px 16px;
   text-align: center;
-
+  display: flex;
+  justify-content: space-between;
   > button {
     margin-right: 10px;
 
@@ -148,3 +153,13 @@
   display: inline-block;
   vertical-align: top;
 }
+
+.flex{
+  display: flex;
+  align-items: center;
+}
+
+.btnFlex{
+  display: flex;
+  gap: 12px;
+}
\ No newline at end of file
diff --git a/src/components/BrowserFilter/FilterRow.react.js b/src/components/BrowserFilter/FilterRow.react.js
index 961901ef3..eb10875eb 100644
--- a/src/components/BrowserFilter/FilterRow.react.js
+++ b/src/components/BrowserFilter/FilterRow.react.js
@@ -98,12 +98,15 @@ function compareValue(
 }
 
 const FilterRow = ({
+  classes,
   fields,
   constraints,
   compareInfo,
+  currentClass,
   currentField,
   currentConstraint,
   compareTo,
+  onChangeClass,
   onChangeField,
   onChangeConstraint,
   onChangeCompareTo,
@@ -119,13 +122,52 @@ const FilterRow = ({
     }
   }, []);
 
-  const buildSuggestions = input => {
+  const buildFieldSuggestions = input => {
     const regex = new RegExp(input.split('').join('.*?'), 'i');
     return fields.filter(f => regex.test(f));
   };
+  const buildClassSuggestions = input => {
+    const regex = new RegExp(input.split('').join('.*?'), 'i');
+    return classes.filter(f => regex.test(f));
+  };
 
   return (
-    <div className={styles.row}>
+    <div className={`${styles.row} ${styles.flex}`}>
+      <Autocomplete
+        inputStyle={{
+          transition: '0s background-color ease-in-out',
+        }}
+        suggestionsStyle={{
+          width: '140px',
+          maxHeight: '360px',
+          overflowY: 'auto',
+          fontSize: '14px',
+          background: '#343445',
+          borderBottomLeftRadius: '5px',
+          borderBottomRightRadius: '5px',
+          color: 'white',
+          cursor: 'pointer',
+        }}
+        suggestionsItemStyle={{
+          background: '#343445',
+          color: 'white',
+          height: '30px',
+          lineHeight: '30px',
+          borderBottom: '0px',
+        }}
+        containerStyle={{
+          display: 'inline-block',
+          width: '140px',
+          verticalAlign: 'top',
+          height: '30px',
+        }}
+        strict={true}
+        value={currentClass}
+        suggestions={classes}
+        onChange={onChangeClass}
+        buildSuggestions={buildClassSuggestions}
+        buildLabel={() => ''}
+      />
       <Autocomplete
         inputStyle={{
           transition: '0s background-color ease-in-out',
@@ -158,7 +200,7 @@ const FilterRow = ({
         value={currentField}
         suggestions={fields}
         onChange={onChangeField}
-        buildSuggestions={buildSuggestions}
+        buildSuggestions={buildFieldSuggestions}
         buildLabel={() => ''}
       />
       <ChromeDropdown
diff --git a/src/components/Filter/Filter.react.js b/src/components/Filter/Filter.react.js
index 1d12def83..f9490c495 100644
--- a/src/components/Filter/Filter.react.js
+++ b/src/components/Filter/Filter.react.js
@@ -8,35 +8,60 @@
 import * as Filters from 'lib/Filters';
 import { List, Map } from 'immutable';
 import PropTypes from 'lib/PropTypes';
-import React from 'react';
+import React, { useState } from 'react';
 import stringCompare from 'lib/stringCompare';
 import { CurrentApp } from 'context/currentApp';
 
-function changeField(schema, filters, index, newField) {
-  const allowedConstraints = Filters.FieldConstraints[schema[newField].type];
+function changeClass(schema, filters, index, newClassName) {
+  const current = filters.get(index);
+  const field = current.get('field');
+  const constraint = current.get('constraint');
+  const newClassFields = Object.keys(schema[newClassName]);
+  const isFieldValid = newClassFields.includes(field);
+  const newField = isFieldValid ? field : newClassFields[0];
+  const allowedConstraints = Filters.FieldConstraints[schema[newClassName][newField].type];
+  const isConstraintValid = allowedConstraints.includes(constraint);
+  const newConstraint = isConstraintValid ? constraint : allowedConstraints[0];
+  const defaultCompare = Filters.DefaultComparisons[schema[newClassName][newField].type];
+  const newFilter = new Map({
+    class: newClassName,
+    field: newField,
+    constraint: newConstraint,
+    compareTo: defaultCompare,
+  });
+
+  return filters.set(index, newFilter);
+}
+
+function changeField(schema, currentClassName, filters, index, newField) {
+  const allowedConstraints = Filters.FieldConstraints[schema[currentClassName][newField].type];
   const current = filters.get(index);
   const constraint = current.get('constraint');
   const compare = current.get('compareTo');
-  const defaultCompare = Filters.DefaultComparisons[schema[newField].type];
+  const defaultCompare = Filters.DefaultComparisons[schema[currentClassName][newField].type];
   const useExisting = allowedConstraints.includes(constraint);
   const newFilter = new Map({
+    class: currentClassName,
     field: newField,
-    constraint: useExisting ? constraint : Filters.FieldConstraints[schema[newField].type][0],
+    constraint: useExisting
+      ? constraint
+      : Filters.FieldConstraints[schema[currentClassName][newField].type][0],
     compareTo: useExisting && typeof defaultCompare === typeof compare ? compare : defaultCompare,
   });
   return filters.set(index, newFilter);
 }
 
-function changeConstraint(schema, filters, index, newConstraint, prevCompareTo) {
+function changeConstraint(schema, currentClassName, filters, index, newConstraint) {
   const field = filters.get(index).get('field');
-  let compareType = schema[field].type;
+  let compareType = schema[currentClassName][field].type;
   if (Object.prototype.hasOwnProperty.call(Filters.Constraints[newConstraint], 'field')) {
     compareType = Filters.Constraints[newConstraint].field;
   }
   const newFilter = new Map({
+    class: currentClassName,
     field: field,
     constraint: newConstraint,
-    compareTo: prevCompareTo ?? Filters.DefaultComparisons[compareType],
+    compareTo: Filters.DefaultComparisons[compareType],
   });
   return filters.set(index, newFilter);
 }
@@ -50,18 +75,58 @@ function deleteRow(filters, index) {
   return filters.delete(index);
 }
 
-const Filter = ({ schema, filters, renderRow, onChange, onSearch, blacklist, className }) => {
+const Filter = ({
+  schema,
+  filters,
+  allClasses,
+  renderRow,
+  onChange,
+  onSearch,
+  blacklist,
+  className,
+}) => {
+  const [compare, setCompare] = useState(false);
+  const hasCompareTo = filters.some(filter => filter.get('compareTo') !== undefined);
+
+  if(compare !== hasCompareTo){
+    setCompare(hasCompareTo);
+  }
   const currentApp = React.useContext(CurrentApp);
   blacklist = blacklist || [];
-  const available = Filters.availableFilters(schema, filters);
+  const available = Filters.findRelatedClasses(className, allClasses, blacklist, filters);
+  const classes = Object.keys(available).concat([]);
   return (
-    <div>
+    <div
+      style={{
+        flex: 1,
+        overflowY: 'auto',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          gap: '10px',
+          padding: '12px 15px 0px 15px',
+          color: '#343445',
+          'font-weight': '600'
+        }}
+      >
+        <div style={{ width: '140px' }}>Class</div>
+        <div style={{ width: '140px' }}>Field</div>
+        <div style={{ width: '175px' }}>Condition</div>
+        {compare && <div>Value</div>}
+        <div></div>
+      </div>
+
       {filters.toArray().map((filter, i) => {
+        const currentClassName = filter.get('class');
         const field = filter.get('field');
         const constraint = filter.get('constraint');
         const compareTo = filter.get('compareTo');
-
-        const fields = Object.keys(available).concat([]);
+        let fields = [];
+        if (available[currentClassName]) {
+          fields = Object.keys(available[currentClassName]).concat([]);
+        }
         if (fields.indexOf(field) < 0) {
           fields.push(field);
         }
@@ -97,31 +162,36 @@ const Filter = ({ schema, filters, renderRow, onChange, onSearch, blacklist, cla
         else {
           fields.sort();
         }
-
-        const constraints = Filters.FieldConstraints[schema[field].type].filter(
+        const constraints = Filters.FieldConstraints[schema[currentClassName][field].type].filter(
           c => blacklist.indexOf(c) < 0
         );
-        let compareType = schema[field].type;
+        let compareType = schema[currentClassName][field].type;
         if (Object.prototype.hasOwnProperty.call(Filters.Constraints[constraint], 'field')) {
           compareType = Filters.Constraints[constraint].field;
         }
         return renderRow({
+          classes,
           fields,
           constraints,
           compareInfo: {
             type: compareType,
-            targetClass: schema[field].targetClass,
+            targetClass: schema[currentClassName][field].targetClass,
           },
+          currentClass: currentClassName,
           currentField: field,
           currentConstraint: constraint,
           compareTo,
           key: field + '-' + constraint + '-' + i,
-
+          onChangeClass: newClassName => {
+            onChange(changeClass(schema, filters, i, newClassName));
+          },
           onChangeField: newField => {
-            onChange(changeField(schema, filters, i, newField));
+            onChange(changeField(schema, currentClassName, filters, i, newField));
           },
           onChangeConstraint: (newConstraint, prevCompareTo) => {
-            onChange(changeConstraint(schema, filters, i, newConstraint, prevCompareTo));
+            onChange(
+              changeConstraint(schema, currentClassName, filters, i, newConstraint, prevCompareTo)
+            );
           },
           onChangeCompareTo: newCompare => {
             onChange(changeCompareTo(schema, filters, i, compareType, newCompare));
diff --git a/src/components/PushAudienceDialog/PushAudienceDialog.react.js b/src/components/PushAudienceDialog/PushAudienceDialog.react.js
index 46e2444a6..bd13bc2ce 100644
--- a/src/components/PushAudienceDialog/PushAudienceDialog.react.js
+++ b/src/components/PushAudienceDialog/PushAudienceDialog.react.js
@@ -118,14 +118,14 @@ export default class PushAudienceDialog extends React.Component {
     this.setState({ saveForFuture: value });
   }
 
-  fetchAudienceSize() {
+  async fetchAudienceSize() {
     if (!this.context) {
       //so we don't break the PIG demo
       return;
     }
 
     let query = {};
-    const parseQuery = queryFromFilters('_Installation', this.state.filters);
+    const parseQuery = await queryFromFilters('_Installation', this.state.filters);
 
     if (parseQuery && parseQuery.toJSON()) {
       query = parseQuery.toJSON().where || {};
diff --git a/src/dashboard/Data/Browser/Browser.react.js b/src/dashboard/Data/Browser/Browser.react.js
index bfe014c12..5a5272864 100644
--- a/src/dashboard/Data/Browser/Browser.react.js
+++ b/src/dashboard/Data/Browser/Browser.react.js
@@ -101,9 +101,13 @@ class Browser extends DashboardView {
 
       rowCheckboxDragging: false,
       draggedRowSelection: false,
+
+      classes: {},
+      allClassesSchema: {}
     };
 
     this.addLocation = this.addLocation.bind(this);
+    this.allClassesSchema = this.getAllClassesSchema.bind(this);
     this.removeLocation = this.removeLocation.bind(this);
     this.prefetchData = this.prefetchData.bind(this);
     this.fetchData = this.fetchData.bind(this);
@@ -223,6 +227,9 @@ class Browser extends DashboardView {
       this.prefetchData(nextProps, nextContext);
     }
     if (!nextProps.params.className && nextProps.schema.data.get('classes')) {
+      const t = nextProps.schema.data.get('classes');
+      this.classes = Object.keys(t.toObject());
+      this.allClassesSchema = this.getAllClassesSchema(this.classes ,nextProps.schema.data.get('classes'));
       this.redirectToFirstClass(nextProps.schema.data.get('classes'), nextContext);
     }
   }
@@ -751,6 +758,23 @@ class Browser extends DashboardView {
     }
   }
 
+  getAllClassesSchema(allClasses , allClassesData) {
+    const schemaSimplifiedData = {};
+    allClasses.forEach((className) => {
+      const classSchema = allClassesData.get(className);
+      if (classSchema) {
+        schemaSimplifiedData[className] = {};
+        classSchema.forEach(({ type, targetClass }, col) => {
+          schemaSimplifiedData[className][col] = {
+            type,
+            targetClass,
+          };
+        });
+      }
+    });
+    return schemaSimplifiedData;
+  }
+
   async refresh() {
     const relation = this.state.relation;
     const prevFilters = this.state.filters || new List();
@@ -775,7 +799,7 @@ class Browser extends DashboardView {
 
   async fetchParseData(source, filters) {
     const { useMasterKey } = this.state;
-    const query = queryFromFilters(source, filters);
+    const query = await queryFromFilters(source, filters);
     const sortDir = this.state.ordering[0] === '-' ? '-' : '+';
     const field = this.state.ordering.substr(sortDir === '-' ? 1 : 0);
 
@@ -787,7 +811,6 @@ class Browser extends DashboardView {
 
     query.limit(MAX_ROWS_FETCHED);
     this.excludeFields(query, source);
-
     let promise = query.find({ useMasterKey });
     let isUnique = false;
     let uniqueField = null;
@@ -817,7 +840,7 @@ class Browser extends DashboardView {
   }
 
   async fetchParseDataCount(source, filters) {
-    const query = queryFromFilters(source, filters);
+    const query = await queryFromFilters(source, filters);
     const { useMasterKey } = this.state;
     const count = await query.count({ useMasterKey });
     return count;
@@ -860,13 +883,13 @@ class Browser extends DashboardView {
     return await this.context.getRelationCount(relation);
   }
 
-  fetchNextPage() {
+  async fetchNextPage() {
     if (!this.state.data || this.state.isUnique) {
       return null;
     }
     const className = this.props.params.className;
     const source = this.state.relation || className;
-    let query = queryFromFilters(source, this.state.filters);
+    let query = await queryFromFilters(source, this.state.filters);
     if (this.state.ordering !== '-createdAt') {
       // Construct complex pagination query
       const equalityQuery = queryFromFilters(source, this.state.filters);
@@ -1940,6 +1963,7 @@ class Browser extends DashboardView {
             onMouseDownRowCheckBox={this.onMouseDownRowCheckBox}
             onMouseUpRowCheckBox={this.onMouseUpRowCheckBox}
             onMouseOverRowCheckBox={this.onMouseOverRowCheckBox}
+            classes={this.classes}
           />
         );
       }
diff --git a/src/dashboard/Data/Browser/BrowserToolbar.react.js b/src/dashboard/Data/Browser/BrowserToolbar.react.js
index ff3504ad5..d2f08c837 100644
--- a/src/dashboard/Data/Browser/BrowserToolbar.react.js
+++ b/src/dashboard/Data/Browser/BrowserToolbar.react.js
@@ -74,6 +74,8 @@ const BrowserToolbar = ({
   toggleMasterKeyUsage,
 
   selectedData,
+  allClasses,
+  allClassesSchema,
 }) => {
   const selectionLength = Object.keys(selection).length;
   const isPendingEditCloneRows = editCloneRows && editCloneRows.length > 0;
@@ -225,6 +227,32 @@ const BrowserToolbar = ({
     });
   }
 
+  allClasses.forEach(className => {
+    const classSchema = schema.data.get('classes').get(className);
+
+    if (classSchema) {
+      schemaSimplifiedData[className] = {};
+
+      classSchema.forEach(({ type, targetClass }, col) => {
+        schemaSimplifiedData[className][col] = {
+          type,
+          targetClass,
+        };
+
+        columns[col] = { type, targetClass };
+
+        if (col === 'objectId' || (isUnique && col !== uniqueField)) {
+          return;
+        }
+        if ((type === 'Pointer' && targetClass === '_User') || type === 'Array') {
+          userPointers.push(col);
+        }
+      });
+    } else {
+      console.log(`Class ${className} not found in schema.`);
+    }
+  });
+
   const clpDialogRef = useRef(null);
   const protectedDialogRef = useRef(null);
   const loginDialogRef = useRef(null);
@@ -232,7 +260,6 @@ const BrowserToolbar = ({
   const showCLP = () => clpDialogRef.current.handleOpen();
   const showProtected = () => protectedDialogRef.current.handleOpen();
   const showLogin = () => loginDialogRef.current.handleOpen();
-
   return (
     <Toolbar
       relation={relation}
@@ -339,6 +366,8 @@ const BrowserToolbar = ({
         className={classNameForEditors}
         blacklistedFilters={onAddRow ? [] : ['unique']}
         disabled={isPendingEditCloneRows}
+        allClasses={allClasses}
+        allClassesSchema={allClassesSchema}
       />
       {onAddRow && <div className={styles.toolbarSeparator} />}
       {enableSecurityDialog ? (
@@ -383,14 +412,14 @@ const BrowserToolbar = ({
         <noscript />
       )}
       {enableSecurityDialog ? <div className={styles.toolbarSeparator} /> : <noscript />}
-      <BrowserMenu
-        setCurrent={setCurrent}
-        title="Script"
-        icon="gear-solid"
-      >
+      <BrowserMenu setCurrent={setCurrent} title="Script" icon="gear-solid">
         <MenuItem
           disabled={selectionLength === 0}
-          text={selectionLength === 1 && !selection['*'] ? 'Run script on selected row...' : `Run script on ${selectionLength} selected rows...`}
+          text={
+            selectionLength === 1 && !selection['*']
+              ? 'Run script on selected row...'
+              : `Run script on ${selectionLength} selected rows...`
+          }
           onClick={() => onExecuteScriptRows(selection)}
         />
       </BrowserMenu>
diff --git a/src/dashboard/Data/Browser/DataBrowser.react.js b/src/dashboard/Data/Browser/DataBrowser.react.js
index ec1219481..1df0b9760 100644
--- a/src/dashboard/Data/Browser/DataBrowser.react.js
+++ b/src/dashboard/Data/Browser/DataBrowser.react.js
@@ -34,6 +34,7 @@ export default class DataBrowser extends React.Component {
       editing: false,
       copyableValue: undefined,
       simplifiedSchema: this.getSimplifiedSchema(props.schema, props.className),
+      allClassesSchema: this.getAllClassesSchema(props.schema,props.classes),
 
       selectedCells: { list: new Set(), rowStart: -1, rowEnd: -1, colStart: -1, colEnd: -1 },
       firstSelectedCell: null,
@@ -67,6 +68,7 @@ export default class DataBrowser extends React.Component {
         current: null,
         editing: false,
         simplifiedSchema: this.getSimplifiedSchema(props.schema, props.className),
+        allClassesSchema: this.getAllClassesSchema(props.schema,props.classes),
       });
     } else if (
       Object.keys(props.columns).length !== Object.keys(this.props.columns).length ||
@@ -108,6 +110,25 @@ export default class DataBrowser extends React.Component {
     }, 1000);
   }
 
+  getAllClassesSchema(schema) {
+    const allClasses = Object.keys(schema.data.get('classes').toObject());
+    const schemaSimplifiedData = {};
+    allClasses.forEach((className) => {
+      const classSchema = schema.data.get('classes').get(className);
+      if (classSchema) {
+        schemaSimplifiedData[className] = {};
+        classSchema.forEach(({ type, targetClass }, col) => {
+          schemaSimplifiedData[className][col] = {
+            type,
+            targetClass,
+          };
+        });
+      }
+      return schemaSimplifiedData;
+    });
+    return schemaSimplifiedData;
+  }
+
   getSimplifiedSchema(schema, classNameForEditors) {
     const schemaSimplifiedData = {};
     const classSchema = schema.data.get('classes').get(classNameForEditors);
@@ -448,6 +469,8 @@ export default class DataBrowser extends React.Component {
           onCancelPendingEditRows={onCancelPendingEditRows}
           order={this.state.order}
           selectedData={this.state.selectedData}
+          allClasses={Object.keys(this.props.schema.data.get('classes').toObject())}
+          allClassesSchema={this.state.allClassesSchema}
           {...other}
         />
 
diff --git a/src/dashboard/Data/Browser/ObjectPickerDialog.react.js b/src/dashboard/Data/Browser/ObjectPickerDialog.react.js
index 710939ae4..f77ccf5cd 100644
--- a/src/dashboard/Data/Browser/ObjectPickerDialog.react.js
+++ b/src/dashboard/Data/Browser/ObjectPickerDialog.react.js
@@ -97,7 +97,7 @@ export default class ObjectPickerDialog extends React.Component {
 
   async fetchParseData(source, filters) {
     const { useMasterKey } = this.props;
-    const query = queryFromFilters(source, filters);
+    const query = await queryFromFilters(source, filters);
     const sortDir = this.state.ordering[0] === '-' ? '-' : '+';
     const field = this.state.ordering.substr(sortDir === '-' ? 1 : 0);
 
@@ -117,21 +117,21 @@ export default class ObjectPickerDialog extends React.Component {
 
   async fetchParseDataCount(source, filters) {
     const { useMasterKey } = this.props;
-    const query = queryFromFilters(source, filters);
+    const query = await queryFromFilters(source, filters);
     const count = await query.count({ useMasterKey });
     return count;
   }
 
-  fetchNextPage() {
+  async fetchNextPage() {
     if (!this.state.data) {
       return null;
     }
     const className = this.props.className;
     const source = this.state.relation || className;
-    let query = queryFromFilters(source, this.state.filters);
+    let query = await queryFromFilters(source, this.state.filters);
     if (this.state.ordering !== '-createdAt') {
       // Construct complex pagination query
-      const equalityQuery = queryFromFilters(source, this.state.filters);
+      const equalityQuery = await queryFromFilters(source, this.state.filters);
       let field = this.state.ordering;
       let ascending = true;
       let comp = this.state.data[this.state.data.length - 1].get(field);
diff --git a/src/dashboard/Push/PushAudiencesData.react.js b/src/dashboard/Push/PushAudiencesData.react.js
index 49dd66ae9..93654c749 100644
--- a/src/dashboard/Push/PushAudiencesData.react.js
+++ b/src/dashboard/Push/PushAudiencesData.react.js
@@ -117,13 +117,13 @@ export default class PushAudiencesData extends React.Component {
    * @param  {[type]} options.saveForFuture [description]
    * @return {[type]}                       [description]
    */
-  createAudience(modalState, { platforms, name, formattedFilters, saveForFuture, filters }) {
+  async createAudience(modalState, { platforms, name, formattedFilters, saveForFuture, filters }) {
     this.setState({
       createProgress: true,
       createErrorMessage: '',
     });
     let query = {};
-    const parseQuery = queryFromFilters('_Installation', formattedFilters);
+    const parseQuery = await queryFromFilters('_Installation', formattedFilters);
 
     if (parseQuery && parseQuery.toJSON()) {
       query = parseQuery.toJSON().where || {};
diff --git a/src/dashboard/Push/PushAudiencesIndex.react.js b/src/dashboard/Push/PushAudiencesIndex.react.js
index 60529007e..ee700c98e 100644
--- a/src/dashboard/Push/PushAudiencesIndex.react.js
+++ b/src/dashboard/Push/PushAudiencesIndex.react.js
@@ -200,10 +200,10 @@ class PushAudiencesIndex extends DashboardView {
     }
   }
 
-  createAudience(modalState, { platforms, name, formattedFilters }) {
+  async createAudience(modalState, { platforms, name, formattedFilters }) {
     let query = {};
 
-    const parseQuery = queryFromFilters('_Installation', formattedFilters);
+    const parseQuery = await queryFromFilters('_Installation', formattedFilters);
 
     if (parseQuery && parseQuery.toJSON()) {
       query = parseQuery.toJSON().where || {};
diff --git a/src/dashboard/Push/PushNew.react.js b/src/dashboard/Push/PushNew.react.js
index 87da1fa2b..1c748b8e2 100644
--- a/src/dashboard/Push/PushNew.react.js
+++ b/src/dashboard/Push/PushNew.react.js
@@ -800,7 +800,7 @@ class PushNew extends DashboardView {
           schema={schema}
           pushAudiencesStore={this.props.pushaudiences}
           current={fields.audience_id}
-          onChange={(audienceId, queryOrFilters, deviceCount) => {
+          onChange={async (audienceId, queryOrFilters, deviceCount) => {
             this.setState({ deviceCount, audienceId });
             setField('audience_id', audienceId);
             if (audienceId === PushConstants.NEW_SEGMENT_ID) {
@@ -809,7 +809,12 @@ class PushNew extends DashboardView {
               if (queryOrFilters instanceof Parse.Query) {
                 setField('target', queryOrFilters);
               } else {
-                setField('target', queryFromFilters('_Installation', queryOrFilters));
+                try {
+                  const query = await queryFromFilters('_Installation', queryOrFilters);
+                  setField('target', query);
+                } catch (error) {
+                  console.error('Error in pushnew queryfilters:', error);
+                }
               }
             }
           }}
diff --git a/src/lib/Filters.js b/src/lib/Filters.js
index 1ff04a256..9b394e467 100644
--- a/src/lib/Filters.js
+++ b/src/lib/Filters.js
@@ -233,4 +233,48 @@ export function availableFilters(schema, currentFilters, blacklist) {
   return available;
 }
 
+export function findRelatedClasses(referClass , allClasses, blacklist, currentFilters) {
+  const relatedClasses = {};
+  if (allClasses[referClass]) {
+    const availableForRefer = availableFilters(allClasses[referClass], currentFilters, blacklist);
+    if (Object.keys(availableForRefer).length > 0) {
+      relatedClasses[referClass] = availableForRefer;
+    }
+  }
+
+  for (const className in allClasses) {
+    if (className === referClass){
+      continue;
+    }
+
+    if (!checkRelation(referClass, allClasses[className])) {
+      continue;
+    }
+    const schema = allClasses[className];
+    const available = availableFilters(schema, currentFilters, blacklist);
+    if (Object.keys(available).length > 0) {
+      relatedClasses[className] = available;
+    }
+  }
+
+  return relatedClasses;
+}
+
+function checkRelation(classname,schema){
+  for (const col in schema) {
+    if (schema[col].type === 'Pointer' && schema[col].targetClass === classname) {
+      return true;
+    }
+  }
+  return false;
+
+}
+
 export const BLACKLISTED_FILTERS = ['containsAny', 'doesNotContainAny'];
+
+export function getFilterDetails(available) {
+  const filterClass = Object.keys(available)[0];
+  const filterField = Object.keys(available[filterClass])[0];
+  const filterConstraint = available[filterClass][filterField][0];
+  return { filterClass, filterField, filterConstraint };
+}
diff --git a/src/lib/queryFromFilters.js b/src/lib/queryFromFilters.js
index 974a55c07..17772cd83 100644
--- a/src/lib/queryFromFilters.js
+++ b/src/lib/queryFromFilters.js
@@ -7,18 +7,90 @@
  */
 import Parse from 'parse';
 
-// Given a className and a set of filters, generate a Parse.Query
-export default function queryFromFilters(className, filters) {
-  let query;
+export default async function queryFromFilters(className, filters) {
+  let primaryQuery;
+  const querieslist = [];
   if (typeof className === 'string') {
-    query = new Parse.Query(className);
+    primaryQuery = new Parse.Query(className);
   } else if (typeof className === 'object' && className instanceof Parse.Relation) {
-    query = className.query();
+    primaryQuery = className.query();
   }
-  filters.forEach(filter => {
-    addConstraint(query, filter);
+
+  const queries = {};
+  for (const filter of filters) {
+    const filterClassName = filter.get('class');
+    if (filterClassName === className || !filterClassName) {
+      addConstraint(primaryQuery, filter);
+    } else {
+      if (!queries[filterClassName]) {
+        queries[filterClassName] = new Parse.Query(filterClassName);
+      }
+      addConstraint(queries[filterClassName], filter);
+    }
+  }
+
+  primaryQuery.applySchemaConstraints = async function () {
+    try {
+      const allClassesSchema = await fetchAllSchemas();
+      await Promise.all(
+        Object.keys(queries).map(async filterClassName => {
+          let tempquery;
+          if (typeof className === 'string') {
+            tempquery = new Parse.Query(className);
+          } else if (typeof className === 'object' && className instanceof Parse.Relation) {
+            tempquery = className.query();
+          }
+          const reversePointerField = getPointerField(allClassesSchema, filterClassName, className);
+          const pointerField = getPointerField(allClassesSchema, className, filterClassName);
+          if (pointerField) {
+            tempquery.matchesQuery(pointerField, queries[filterClassName]);
+          } else if (reversePointerField) {
+            await tempquery.matchesKeyInQuery(
+              'objectId',
+              `${reversePointerField}.objectId`,
+              queries[filterClassName]
+            )
+            querieslist.push(tempquery);
+          } else {
+            console.warn(`No relationship found between ${className} and ${filterClassName}`);
+          }
+        })
+      );
+    } catch (error) {
+      console.error('Error fetching schemas:', error);
+    }
+  };
+
+  await primaryQuery.applySchemaConstraints();
+  let finalQuery;
+  if (querieslist.length > 0 || filters.length > 0) {
+    finalQuery = Parse.Query.and(...querieslist, primaryQuery);
+  } else {
+    finalQuery = primaryQuery;
+  }
+
+  return finalQuery;
+}
+
+async function fetchAllSchemas() {
+  const schemas = await Parse.Schema.all();
+  const schemaMap = {};
+  schemas.forEach(schema => {
+    schemaMap[schema.className] = schema.fields;
   });
-  return query;
+  return schemaMap;
+}
+
+function getPointerField(allClassesSchema, fromClassName, toClassName) {
+  const schema = allClassesSchema[fromClassName];
+  if (schema) {
+    for (const field of Object.keys(schema)) {
+      if (schema[field].type === 'Pointer' && schema[field].targetClass === toClassName) {
+        return field;
+      }
+    }
+  }
+  return null;
 }
 
 function addQueryConstraintFromObject(query, filter, constraintType) {
@@ -64,9 +136,9 @@ function addConstraint(query, filter) {
       const field = filter.get('field');
       const compareTo = filter.get('compareTo');
       if (isPointer(compareTo)) {
-        const porinterQuery = new Parse.Query(compareTo.className);
-        porinterQuery.startsWith('objectId', compareTo.objectId);
-        query.matchesQuery(field, porinterQuery);
+        const pointerQuery = new Parse.Query(compareTo.className);
+        pointerQuery.startsWith('objectId', compareTo.objectId);
+        query.matchesQuery(field, pointerQuery);
       } else {
         query.startsWith(field, compareTo);
       }