fix: Fix create audience dialog

Author: fadi-william

src/components/PushAudienceDialog/PushAudienceDialog.react.js

@@ -72,7 +72,9 @@ export default class PushAudienceDialog extends React.Component {
         stateSettings.platforms = deviceType.$in || [];
       }
       if (audienceInfo.filters) {
-        stateSettings.filters = audienceInfo.filters;
+        stateSettings.filters = audienceInfo.filters.map(filter =>
+          filter.get('class') ? filter : filter.set('class', '_Installation')
+        );
       }
       if (audienceInfo.name) {
         stateSettings.audienceName = audienceInfo.name;
@@ -100,10 +102,21 @@ export default class PushAudienceDialog extends React.Component {
       return;
     }
     const available = Filters.availableFilters(this.props.schema, this.state.filters);
-    const field = Object.keys(available)[0];
+
+    const keys = Object.keys(available);
+    if (keys.length === 0) {
+      this.setState({
+        errorMessage: 'No condition available.',
+      });
+      return;
+    }
+
+    const field = keys[0];
     this.setState(
       ({ filters }) => ({
-        filters: filters.push(new Map({ field: field, constraint: available[field][0] })),
+        filters: filters.push(
+          new Map({ class: '_Installation', field: field, constraint: available[field][0] })
+        ),
       }),
       this.fetchAudienceSize.bind(this)
     );
@@ -284,11 +297,17 @@ export default class PushAudienceDialog extends React.Component {
         />
         <div className={styles.filter}>
           <Filter
-            schema={this.props.schema}
+            className="_Installation"
+            schema={{ _Installation: this.props.schema }}
+            allClasses={{ _Installation: this.props.schema }}
             filters={this.state.filters}
             onChange={filters => {
-              this.setState({ filters }, this.fetchAudienceSize.bind(this));
+              this.setState(
+                { filters, errorMessage: undefined },
+                this.fetchAudienceSize.bind(this)
+              );
             }}
+            onSearch={this.fetchAudienceSize.bind(this)}
             renderRow={props => <InstallationCondition {...props} />}
           />
         </div>
@@ -307,7 +326,7 @@ export default class PushAudienceDialog extends React.Component {
         <FormNote
           show={Boolean(
             (this.props.errorMessage && this.props.errorMessage.length > 0) ||
-              (this.state.errorMessage && this.state.errorMessage.length > 0)
+            (this.state.errorMessage && this.state.errorMessage.length > 0)
           )}
           color="red"
         >

src/lib/Filters.js

@@ -260,6 +260,9 @@ export function availableFilters(schema, currentFilters, blacklist) {
 
 export function findRelatedClasses(referClass, allClasses, blacklist, currentFilters) {
   const relatedClasses = {};
+  if (!allClasses) {
+    return relatedClasses;
+  }
   if (allClasses[referClass]) {
     const availableForRefer = availableFilters(allClasses[referClass], currentFilters, blacklist);
     if (Object.keys(availableForRefer).length > 0) {

src/lib/tests/Filters.findRelatedClasses.test.js

@@ -0,0 +1,22 @@
+/*
+ * Copyright (c) 2016-present, Parse, LLC
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the LICENSE file in
+ * the root directory of this source tree.
+ */
+const { findRelatedClasses } = require('../Filters');
+
+describe('findRelatedClasses', () => {
+  it('returns an empty object when all classes are undefined', () => {
+    expect(findRelatedClasses('_Installation', undefined, [], undefined)).toEqual({});
+  });
+
+  it('returns the available filters for the referenced class', () => {
+    const allClasses = { _Installation: { deviceType: { type: 'String' } } };
+    const result = findRelatedClasses('_Installation', allClasses, [], undefined);
+
+    expect(result._Installation).toBeDefined();
+    expect(result._Installation.deviceType).toContain('exists');
+  });
+});

src/lib/tests/PushAudienceDialog.test.js

@@ -0,0 +1,153 @@
+/*
+ * Copyright (c) 2016-present, Parse, LLC
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the LICENSE file in
+ * the root directory of this source tree.
+ */
+jest.dontMock('../../components/PushAudienceDialog/PushAudienceDialog.react');
+jest.mock('../../components/Filter/Filter.react', () => ({
+  __esModule: true,
+  default: function Filter() {
+    return null;
+  },
+}));
+jest.mock(
+  'context/currentApp',
+  () => ({
+    CurrentApp: null,
+  }),
+  { virtual: true }
+);
+
+const Filter = require('../../components/Filter/Filter.react').default;
+const PushAudienceDialog =
+  require('../../components/PushAudienceDialog/PushAudienceDialog.react').default;
+const React = require('react');
+const { List, Map } = require('immutable');
+
+const defaultProps = {
+  availableDevices: [],
+  primaryAction: jest.fn(),
+  secondaryAction: jest.fn(),
+};
+
+function createDialog(schema, audienceInfo) {
+  const dialog = new PushAudienceDialog();
+  dialog.props = {
+    ...defaultProps,
+    audienceInfo,
+    schema,
+  };
+  dialog.fetchAudienceSize = jest.fn();
+  dialog.setState = (update, callback) => {
+    const stateUpdate = typeof update === 'function' ? update(dialog.state, dialog.props) : update;
+    dialog.state = {
+      ...dialog.state,
+      ...stateUpdate,
+    };
+    callback?.();
+  };
+  return dialog;
+}
+
+function findElementByType(children, type) {
+  let match;
+  React.Children.forEach(children, child => {
+    if (match || !React.isValidElement(child)) {
+      return;
+    }
+    if (child.type === type) {
+      match = child;
+      return;
+    }
+    match = findElementByType(child.props.children, type);
+  });
+  return match;
+}
+
+describe('PushAudienceDialog', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('configures the shared filter for the Installation class', () => {
+    const schema = {
+      deviceType: { type: 'String' },
+    };
+    const dialog = createDialog(schema);
+    const filter = findElementByType(dialog.render().props.children, Filter);
+
+    expect(filter).toBeDefined();
+    expect(filter.props.className).toBe('_Installation');
+    expect(filter.props.schema).toEqual({ _Installation: schema });
+    expect(filter.props.allClasses).toEqual({ _Installation: schema });
+  });
+
+  it('adds an available audience condition for the Installation class', () => {
+    const dialog = createDialog({
+      deviceType: { type: 'String' },
+    });
+
+    dialog.handleAddCondition();
+
+    expect(dialog.state.filters.size).toBe(1);
+    expect(dialog.state.filters.getIn([0, 'class'])).toBe('_Installation');
+    expect(dialog.state.filters.getIn([0, 'field'])).toBe('deviceType');
+    expect(dialog.state.filters.getIn([0, 'constraint'])).toBe('exists');
+    expect(dialog.fetchAudienceSize).toHaveBeenCalledTimes(1);
+  });
+
+  it('shows an error when no audience condition is available', () => {
+    const dialog = createDialog({
+      unsupported: { type: 'File' },
+    });
+
+    dialog.handleAddCondition();
+
+    expect(dialog.state.filters.size).toBe(0);
+    expect(dialog.state.errorMessage).toBe('No condition available.');
+  });
+
+  it('normalizes persisted audience filters for the Installation class', () => {
+    const filters = new List([
+      new Map({
+        field: 'deviceType',
+        constraint: 'exists',
+      }),
+    ]);
+    const dialog = createDialog(
+      { deviceType: { type: 'String' } },
+      {
+        filters,
+      }
+    );
+
+    dialog.componentWillMount();
+
+    expect(dialog.state.filters.getIn([0, 'class'])).toBe('_Installation');
+    expect(dialog.fetchAudienceSize).toHaveBeenCalledTimes(1);
+  });
+
+  it('clears stale errors when filters change', () => {
+    const schema = {
+      deviceType: { type: 'String' },
+    };
+    const dialog = createDialog(schema);
+    const filters = new List([
+      new Map({
+        class: '_Installation',
+        field: 'deviceType',
+        constraint: 'exists',
+      }),
+    ]);
+    dialog.state.errorMessage = 'No condition available.';
+    const filter = findElementByType(dialog.render().props.children, Filter);
+
+    filter.props.onChange(filters);
+
+    expect(dialog.state.filters).toBe(filters);
+    expect(dialog.state.errorMessage).toBeUndefined();
+    expect(dialog.fetchAudienceSize).toHaveBeenCalledTimes(1);
+  });
+});