Change the order of the sections

cypress/support/helpers.js

@@ -4,7 +4,7 @@
  */
 
 import sample_detector from '../fixtures/integration_tests/detector/create_usb_detector_data.json';
-import { NODE_API, OPENSEARCH_DASHBOARDS_URL } from './constants';
+import { OPENSEARCH_DASHBOARDS_URL } from './constants';
 import _ from 'lodash';
 
 Cypress.Commands.add('getElementByText', (locator, text) => {
@@ -62,17 +62,7 @@ Cypress.Commands.add(
       items = [items];
     }
     Cypress.log({ message: `Select combobox items: ${items.join(' | ')}` });
-    cy.wrap(subject)
-      .focus()
-      .click({ force: true })
-      .then(() => {
-        items.map((item) =>
-          cy.get('.euiComboBoxOptionsList__rowWrap').within(() => {
-            cy.get('button').contains(item).should('be.visible');
-            cy.get('button').contains(item).click();
-          })
-        );
-      });
+    items.map((item) => cy.wrap(subject).type(item).type('{enter}'));
   }
 );
 
@@ -85,23 +75,70 @@ Cypress.Commands.add(
     Cypress.log({ message: `Clear combobox` });
     return cy
       .wrap(subject)
-      .parents('.euiComboBox__inputWrap')
-      .find('.euiBadge')
-      .then(($badge) => {
-        let numberOfBadges = $badge.length;
-        Cypress.log({
-          message: `Number of combo badges to clear: ${numberOfBadges}`,
-        });
-
-        cy.wrap(subject)
-          .parents('.euiComboBox__inputWrap')
-          .find('input')
-          .focus()
-          .pressBackspaceKey(numberOfBadges);
-      });
+      .parents('.euiFormRow__fieldWrapper')
+      .find('[data-test-subj="comboBoxClearButton"]')
+      .click({ force: true });
   }
 );
 
+Cypress.Commands.add(
+  'containsValue',
+  {
+    prevSubject: true,
+  },
+  (subject, value) =>
+    cy.wrap(subject).parents('.euiFormRow__fieldWrapper').contains(value, {
+      matchCase: false,
+    })
+);
+
+Cypress.Commands.add(
+  'clearValue',
+  {
+    prevSubject: true,
+  },
+  (subject) => cy.wrap(subject).type('{selectall}').type('{backspace}')
+);
+
+Cypress.Commands.add(
+  'containsError',
+  {
+    prevSubject: true,
+  },
+  (subject, errorText) =>
+    cy
+      .wrap(subject)
+      .parents('.euiFormRow__fieldWrapper')
+      .find('.euiFormErrorText')
+      .contains(errorText)
+);
+
+Cypress.Commands.add(
+  'containsHelperText',
+  {
+    prevSubject: true,
+  },
+  (subject, helperText) =>
+    cy
+      .wrap(subject)
+      .parents('.euiFormRow__fieldWrapper')
+      .find('.euiFormHelpText')
+      .contains(helperText)
+);
+
+Cypress.Commands.add(
+  'shouldNotHaveError',
+  {
+    prevSubject: true,
+  },
+  (subject) =>
+    cy
+      .wrap(subject)
+      .parents('.euiFormRow__fieldWrapper')
+      .find('.euiFormErrorText')
+      .should('not.exist')
+);
+
 Cypress.Commands.add('validateDetailsItem', (label, value) => {
   Cypress.log({ message: `Validate details item by label: ${label} and value: ${value}` });
   return cy.getElementByText('.euiFlexItem label', label).parent().siblings().contains(value);

cypress/support/index.d.ts

@@ -99,6 +99,42 @@ declare namespace Cypress {
      */
     validateDetailsItem(label: string, value: string): Chainable<any>;
 
+    /**
+     * Should clear a field value (use with text and textarea fields)
+     * @example
+     * cy.getFieldByLabel('Rule name').clearValue()
+     */
+    clearValue(): Chainable<any>;
+
+    /**
+     * Validates that field contains value
+     * Should be used with combobox or other fields that don't print its value in inputs
+     * @example
+     * cy.getFieldByLabel('Rule name').containsValue('Name')
+     */
+    containsValue(value: string): Chainable<any>;
+
+    /**
+     * Validates that field has error text
+     * @example
+     * cy.getFieldByLabel('Rule name').containsError('This fields is invalid')
+     */
+    containsError(errorText: string): Chainable<any>;
+
+    /**
+     * Validates that field has helper text
+     * @example
+     * cy.getFieldByLabel('Rule name').containsHelperText('Use this field for...')
+     */
+    containsHelperText(helperText: string): Chainable<any>;
+
+    /**
+     * Should not have error text
+     * @example
+     * cy.getFieldByLabel('Rule name').shouldNotHaveError()
+     */
+    shouldNotHaveError(): Chainable<any>;
+
     /**
      * Validates url path
      * @example

package.json

@@ -69,7 +69,8 @@
     "jest-environment-jsdom": "^27.5.1",
     "lint-staged": "^10.2.0",
     "ts-loader": "^6.2.1",
-    "@types/vis": "^4.21.21"
+    "@types/vis": "^4.21.21",
+    "string.prototype.replaceall": "1.0.7"
   },
   "engines": {
     "yarn": "^1.21.1"

public/app.scss

@@ -20,6 +20,7 @@ $euiTextColor: $euiColorDarkestShade !default;
 @import "./pages/Findings/components/CorrelationsTable/CorrelationsTable.scss";
 @import "./pages/Rules/components/RuleEditor/RuleEditorForm.scss";
 @import "./pages/Rules/components/RuleEditor/DetectionVisualEditor.scss";
+@import "./pages/Rules/components/RuleEditor/components/SelectionExpField.scss";
 
 .selected-radio-panel {
   background-color: tintOrShade($euiColorPrimary, 90%, 70%);
@@ -135,3 +136,11 @@ $euiTextColor: $euiColorDarkestShade !default;
 .detailsFormRow {
   width: auto !important;
 }
+
+.empty-text-button {
+  vertical-align: baseline;
+
+  .euiButtonEmpty__content {
+    padding: 0 !important;
+  }
+}

public/pages/Rules/components/DeleteModal/DeleteRuleModal.test.tsx

@@ -0,0 +1,16 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import DeleteRuleModalMock from '../../../../../test/mocks/Rules/components/DeleteModal/DeleteRuleModal.mock';
+import { DeleteRuleModal } from './DeleteRuleModal';
+
+describe('<DeleteModal /> spec', () => {
+  it('renders the component', () => {
+    const tree = render(<DeleteRuleModal {...DeleteRuleModalMock} />);
+    expect(tree).toMatchSnapshot();
+  });
+});

public/pages/Rules/components/DeleteModal/__snapshots__/DeleteRuleModal.test.tsx.snap

@@ -0,0 +1,168 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DeleteModal /> spec renders the component 1`] = `
+Object {
+  "asFragment": [Function],
+  "baseElement": <body
+    class="euiBody-hasOverlayMask"
+  >
+    <div
+      aria-hidden="true"
+      data-aria-hidden="true"
+    />
+    <div
+      class="euiOverlayMask euiOverlayMask--aboveHeader"
+    >
+      <div
+        aria-hidden="true"
+        data-aria-hidden="true"
+        data-focus-guard="true"
+        style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+        tabindex="0"
+      />
+      <div
+        data-focus-lock-disabled="false"
+      >
+        <div
+          class="euiModal euiModal--maxWidth-default euiModal--confirmation"
+          tabindex="0"
+        >
+          <button
+            aria-label="Closes this modal window"
+            class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiModal__closeIcon"
+            type="button"
+          >
+            EuiIconMock
+          </button>
+          <div
+            class="euiModal__flex"
+          >
+            <div
+              class="euiModalHeader"
+            >
+              <div
+                class="euiModalHeader__title"
+                data-test-subj="confirmModalTitleText"
+              >
+                Delete Delete rule?
+              </div>
+            </div>
+            <div
+              class="euiModalBody"
+            >
+              <div
+                class="euiModalBody__overflow"
+              >
+                <div
+                  class="euiText euiText--medium"
+                  data-test-subj="confirmModalBodyText"
+                >
+                  <p>
+                    Delete the rule permanently? This action cannot be undone.
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div
+              class="euiModalFooter"
+            >
+              <button
+                class="euiButtonEmpty euiButtonEmpty--primary"
+                data-test-subj="confirmModalCancelButton"
+                type="button"
+              >
+                <span
+                  class="euiButtonContent euiButtonEmpty__content"
+                >
+                  <span
+                    class="euiButtonEmpty__text"
+                  >
+                    Cancel
+                  </span>
+                </span>
+              </button>
+              <button
+                class="euiButton euiButton--danger euiButton--fill"
+                data-test-subj="confirmModalConfirmButton"
+                type="button"
+              >
+                <span
+                  class="euiButtonContent euiButton__content"
+                >
+                  <span
+                    class="euiButton__text"
+                  >
+                    Delete
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        aria-hidden="true"
+        data-aria-hidden="true"
+        data-focus-guard="true"
+        style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+        tabindex="0"
+      />
+    </div>
+  </body>,
+  "container": <div
+    aria-hidden="true"
+    data-aria-hidden="true"
+  />,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;

public/pages/Rules/components/RuleEditor/DetectionVisualEditor.test.tsx

@@ -0,0 +1,16 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { DetectionVisualEditor } from './DetectionVisualEditor';
+import DetectionVisualEditorMock from '../../../../../test/mocks/Rules/components/RuleEditor/DetectionVisualEditor.mock';
+
+describe('<SelectionExpField /> spec', () => {
+  it('renders the component', () => {
+    const tree = render(<DetectionVisualEditor {...DetectionVisualEditorMock} />);
+    expect(tree).toMatchSnapshot();
+  });
+});