Fixed a bug impacting data filter configuration through the visual editor.

cypress/integration/bucket_level_monitor_spec.js

@@ -73,13 +73,15 @@ const addTriggerToVisualEditorMonitor = (triggerName, triggerIndex, actionName,
     force: true,
   });
 
-  cy.get(`[name="triggerDefinitions[${triggerIndex}].filters.0.fieldName"]`).type(
+  cy.get(`[data-test-subj="triggerDefinitions[${triggerIndex}].filters.0.fieldName"]`).type(
     `${GROUP_BY_FIELD}{downarrow}{enter}`
   );
 
-  cy.get(`[name="triggerDefinitions[${triggerIndex}].filters.0.operator"]`).select('includes');
+  cy.get(`[data-test-subj="triggerDefinitions[${triggerIndex}].filters.0.operator"]`).select(
+    'includes'
+  );
 
-  cy.get(`[name="triggerDefinitions[${triggerIndex}].filters.0.fieldValue"]`)
+  cy.get(`[data-test-subj="triggerDefinitions[${triggerIndex}].filters.0.fieldValue"]`)
     .type('a*')
     .trigger('blur', { force: true });
 
@@ -241,6 +243,34 @@ describe('Bucket-Level Monitors', () => {
 
       cy.get('button').contains('Save').click({ force: true });
 
+      // Add data filters for the query
+      const filters = [
+        // Number type
+        { field: 'products.quantity', operator: 'is less than', value: 100 },
+        // Text type
+        { field: 'manufacturer', operator: 'starts with', value: 'Amazon' },
+        // Keyword type
+        { field: 'user', operator: 'contains', value: 'Jeff' },
+      ];
+
+      filters.forEach((filter, index) => {
+        cy.get(`[data-test-subj="addFilterButton"]`).click({ force: true });
+
+        cy.get(`[data-test-subj="filters.${index}.fieldName"]`).type(
+          `${filter.field}{downarrow}{enter}`
+        );
+
+        cy.get(`[data-test-subj="filters.${index}.operator"]`).select(filter.operator);
+
+        cy.get(`[data-test-subj="filters.${index}.fieldValue"]`).type(`${filter.value}{enter}`);
+
+        // Close data filter popover
+        cy.contains('Data filter - optional').click({ force: true });
+      });
+
+      // Confirm filter limit text is correct
+      cy.contains('You can add up to 7 more data filters.', { timeout: 20000 });
+
       // Add a group by field for the query
       cy.get('[data-test-subj="addGroupByButton"]').click({ force: true });
 
@@ -351,7 +381,7 @@ describe('Bucket-Level Monitors', () => {
     cy.deleteAllMonitors();
 
     // Delete sample data
-    cy.deleteIndexByName(`${INDEX.SAMPLE_DATA_ECOMMERCE}`);
+    cy.deleteIndexByName(INDEX.SAMPLE_DATA_ECOMMERCE);
     cy.deleteIndexByName(TESTING_INDEX_A);
     cy.deleteIndexByName(TESTING_INDEX_B);
   });

cypress/integration/query_level_monitor_spec.js

@@ -361,58 +361,76 @@ describe('Query-Level Monitors', () => {
   describe('schedule component displays as intended', () => {
     before(() => {
       cy.deleteAllMonitors();
+
+      // Create the test monitors
+      cy.createMonitor(sampleDaysIntervalQueryLevelMonitor);
+      cy.createMonitor(sampleCronExpressionQueryLevelMonitor);
+    });
+
+    beforeEach(() => {
       cy.reload();
     });
 
     it('for an interval schedule', () => {
-      // Create the test monitor
-      cy.createMonitor(sampleDaysIntervalQueryLevelMonitor);
-
       // Confirm we can see the created monitors in the list
-      cy.get(`input[type="search"]`).focus().type(SAMPLE_DAYS_INTERVAL_MONITOR);
-      cy.contains(SAMPLE_DAYS_INTERVAL_MONITOR, { timeout: 20000 });
+      cy.get(`input[type="search"]`)
+        .focus()
+        .type(SAMPLE_DAYS_INTERVAL_MONITOR + '{enter}');
+      cy.contains(SAMPLE_DAYS_INTERVAL_MONITOR);
+      cy.wait(1000);
 
       // Select the existing monitor
-      cy.get(`[data-test-subj="${SAMPLE_DAYS_INTERVAL_MONITOR}"]`).click({ force: true });
+      cy.get(`[data-test-subj="${SAMPLE_DAYS_INTERVAL_MONITOR}"]`).click({
+        force: true,
+      });
+
+      // Wait for monitor details page to load
+      cy.contains('Overview');
 
       // Click Edit button
       cy.contains('Edit').click({ force: true });
 
       // Wait for input to load and then check the Schedule component
-      cy.get('[data-test-subj="frequency_field"]', { timeout: 20000 }).contains('By interval');
+      cy.get('[data-test-subj="frequency_field"]').contains('By interval');
 
-      cy.get('[data-test-subj="interval_interval_field"]', { timeout: 20000 }).should(
-        'have.value',
-        7
-      );
+      cy.get('[data-test-subj="interval_interval_field"]', {
+        timeout: 20000,
+      }).should('have.value', 7);
 
-      cy.get('[data-test-subj="interval_unit_field"]', { timeout: 20000 }).contains('Days');
+      cy.get('[data-test-subj="interval_unit_field"]', {
+        timeout: 20000,
+      }).contains('Days');
     });
 
     it('for a cron expression schedule', () => {
-      // Create the test monitor
-      cy.createMonitor(sampleCronExpressionQueryLevelMonitor);
-
       // Confirm we can see the created monitors in the list
-      cy.get(`input[type="search"]`).focus().type(SAMPLE_CRON_EXPRESSION_MONITOR);
-      cy.contains(SAMPLE_CRON_EXPRESSION_MONITOR, { timeout: 20000 });
+      cy.get(`input[type="search"]`)
+        .focus()
+        .type(SAMPLE_CRON_EXPRESSION_MONITOR + '{enter}');
+      cy.contains(SAMPLE_CRON_EXPRESSION_MONITOR);
+      cy.wait(1000);
 
       // Select the existing monitor
-      cy.get(`[data-test-subj="${SAMPLE_CRON_EXPRESSION_MONITOR}"]`).click({ force: true });
+      cy.get(`[data-test-subj="${SAMPLE_CRON_EXPRESSION_MONITOR}"]`).click({
+        force: true,
+      });
+
+      // Wait for monitor details page to load
+      cy.contains('Overview');
 
       // Click Edit button
       cy.contains('Edit').click({ force: true });
 
       // Wait for input to load and then check the Schedule component
-      cy.get('[data-test-subj="frequency_field"]', { timeout: 20000 }).contains(
-        'Custom cron expression'
-      );
+      cy.get('[data-test-subj="frequency_field"]').contains('Custom cron expression');
 
-      cy.get('[data-test-subj="customCron_cronExpression_field"]', { timeout: 20000 }).contains(
-        '30 11 * * 1-5'
-      );
+      cy.get('[data-test-subj="customCron_cronExpression_field"]', {
+        timeout: 20000,
+      }).contains('30 11 * * 1-5');
 
-      cy.get('[data-test-subj="timezoneComboBox"]', { timeout: 20000 }).contains('US/Pacific');
+      cy.get('[data-test-subj="timezoneComboBox"]', {
+        timeout: 20000,
+      }).contains('US/Pacific');
     });
   });
 

public/pages/CreateMonitor/components/MonitorExpressions/expressions/WherePopover.js

@@ -123,6 +123,7 @@ export default class WherePopover extends Component {
           inputProps={{
             placeholder: 'Enter a value',
             onChange: this.handleChangeWrapper,
+            'data-test-subj': `${fieldPath}fieldValue`,
           }}
           formRow
           rowProps={{ isInvalid, error: hasError }}
@@ -136,6 +137,7 @@ export default class WherePopover extends Component {
             onChange: this.handleChangeWrapper,
             options: WHERE_BOOLEAN_FILTERS,
             isInvalid,
+            'data-test-subj': `${fieldPath}fieldValue`,
           }}
         />
       );
@@ -147,6 +149,7 @@ export default class WherePopover extends Component {
             placeholder: 'Enter a value',
             onChange: this.handleChangeWrapper,
             isInvalid,
+            'data-test-subj': `${fieldPath}fieldValue`,
           }}
         />
       );
@@ -211,6 +214,7 @@ export default class WherePopover extends Component {
               iconOnClickAriaLabel={'Remove filter'}
               onClick={this.openPopover}
               onClickAriaLabel={'Edit where filter'}
+              data-test-subj={`${whereFilterHeader}-${fieldPath}-badge`}
             >
               {displayText(values)}
             </EuiBadge>
@@ -234,6 +238,7 @@ export default class WherePopover extends Component {
                   onChange: this.handleFieldChange,
                   isClearable: false,
                   singleSelection: { asPlainText: true },
+                  'data-test-subj': `${fieldPath}fieldName`,
                 }}
               />
             </EuiFlexItem>
@@ -243,6 +248,7 @@ export default class WherePopover extends Component {
                 inputProps={{
                   onChange: this.handleOperatorChange,
                   options: fieldOperators,
+                  'data-test-subj': `${fieldPath}operator`,
                 }}
               />
             </EuiFlexItem>

public/pages/CreateMonitor/components/MonitorExpressions/expressions/utils/whereHelpers.js

@@ -68,23 +68,23 @@ export const validateWhereFilter = (filter = FORMIK_INITIAL_WHERE_EXPRESSION_VAL
   const fieldOperator = _.get(filter, 'operator', FORMIK_INITIAL_WHERE_EXPRESSION_VALUES.operator);
   let filterIsValid = !_.isEmpty(fieldName.label);
   switch (fieldOperator) {
-    case OPERATORS_MAP.IS:
-    case OPERATORS_MAP.IS_NOT:
-    case OPERATORS_MAP.IS_GREATER:
-    case OPERATORS_MAP.IS_GREATER_EQUAL:
-    case OPERATORS_MAP.IS_LESS:
-    case OPERATORS_MAP.IS_LESS_EQUAL:
-    case OPERATORS_MAP.STARTS_WITH:
-    case OPERATORS_MAP.ENDS_WITH:
-    case OPERATORS_MAP.CONTAINS:
-    case OPERATORS_MAP.NOT_CONTAINS:
+    case OPERATORS_MAP.IS.value:
+    case OPERATORS_MAP.IS_NOT.value:
+    case OPERATORS_MAP.IS_GREATER.value:
+    case OPERATORS_MAP.IS_GREATER_EQUAL.value:
+    case OPERATORS_MAP.IS_LESS.value:
+    case OPERATORS_MAP.IS_LESS_EQUAL.value:
+    case OPERATORS_MAP.STARTS_WITH.value:
+    case OPERATORS_MAP.ENDS_WITH.value:
+    case OPERATORS_MAP.CONTAINS.value:
+    case OPERATORS_MAP.DOES_NOT_CONTAINS.value:
       // These operators store the query value in the 'fieldValue'
       // attribute of FORMIK_INITIAL_WHERE_EXPRESSION_VALUES.
       // Validate that value.
       filterIsValid = filterIsValid && !_.isEmpty(filter.fieldValue?.toString());
       break;
-    case OPERATORS_MAP.IN_RANGE:
-    case OPERATORS_MAP.NOT_IN_RANGE:
+    case OPERATORS_MAP.IN_RANGE.value:
+    case OPERATORS_MAP.NOT_IN_RANGE.value:
       // These operators store the query values in the 'fieldRangeStart' and 'fieldRangeEnd'
       // attributes of FORMIK_INITIAL_WHERE_EXPRESSION_VALUES.
       // Both of those values need to be validated.
@@ -93,8 +93,8 @@ export const validateWhereFilter = (filter = FORMIK_INITIAL_WHERE_EXPRESSION_VAL
         !validateRange(filter.fieldRangeStart, filter) &&
         !validateRange(filter.fieldRangeEnd, filter);
       break;
-    case OPERATORS_MAP.IS_NULL:
-    case OPERATORS_MAP.IS_NOT_NULL:
+    case OPERATORS_MAP.IS_NULL.value:
+    case OPERATORS_MAP.IS_NOT_NULL.value:
       // These operators don't store a query value in the FORMIK_INITIAL_WHERE_EXPRESSION_VALUES.
       // No further validation needed.
       break;

public/pages/CreateMonitor/components/MonitorTimeField/MonitorTimeField.js

@@ -5,7 +5,6 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import FormikSelect from '../../../../components/FormControls/FormikSelect/FormikSelect';
 import { hasError, isInvalid } from '../../../../utils/validate';
 import { validateTimeField } from './utils/validation';
 import { FormikComboBox } from '../../../../components/FormControls';
@@ -34,6 +33,7 @@ const MonitorTimeField = ({ dataTypes }) => {
         },
         isClearable: false,
         singleSelection: { asPlainText: true },
+        'data-test-subj': 'timeFieldComboBox',
       }}
     />
   );

public/pages/CreateMonitor/components/MonitorTimeField/__snapshots__/MonitorTimeField.test.js.snap

@@ -24,6 +24,7 @@ exports[`MonitorTimeField renders 1`] = `
       aria-expanded="false"
       aria-haspopup="listbox"
       class="euiComboBox"
+      data-test-subj="timeFieldComboBox"
       name="timeField"
       role="combobox"
     >