feat: Add relational filter conditions in data browser

src/components/BrowserFilter/BrowserFilter.react.js

@@ -46,13 +46,18 @@ 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 = Object.keys(available)[0];
+      const filterField = Object.keys(available[filterClass])[0];
+      const filterConstraint = available[filterClass][filterField][0];
+      filters = new List([
+        new Map({ class: filterClass, field: filterField, constraint: filterConstraint }),
+      ]);
     }
     this.setState(prevState => ({
       open: !prevState.open,
@@ -65,14 +70,19 @@ 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 = Object.keys(available)[0];
+    const filterField = Object.keys(available[filterClass])[0];
+    const filterConstraint = available[filterClass][filterField][0];
     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 +135,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 +169,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}

src/components/BrowserFilter/BrowserFilter.scss

@@ -85,11 +85,15 @@
 
 .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;
 }
 
@@ -148,3 +152,8 @@
   display: inline-block;
   vertical-align: top;
 }
+
+.flex{
+  display: flex;
+  align-items: center;
+}

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

src/components/Filter/Filter.react.js

@@ -12,28 +12,58 @@ import React 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, prevCompareTo) {
   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],
@@ -50,18 +80,36 @@ 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 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',
+      }}
+    >
       {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 +145,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));

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 || {};