Improve text area ux and add expression UI opensearch-project#603

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>
jovancacvetkovic · Jun 2, 2023 · a9d927b · a9d927b
1 parent 446262e
commit a9d927b
Showing 1 changed file with 77 additions and 50 deletions.
diff --git a/cypress/integration/1_detectors.spec.js b/cypress/integration/1_detectors.spec.js
@@ -108,14 +108,20 @@ const validatePendingFieldMappingsPanel = (mappings) => {
   });
 };
 
-const createDetector = (detectorName, dataSource, expectFailure) => {
-  getCreateDetectorButton().click({ force: true });
+const getDescriptionField = () => cy.getTextareaByLabel('Description - optional');
 
-  // TEST DETAILS PAGE
+const fillDefineDetectorPage = (detectorName, dataSource) => {
   getNameField().type(detectorName);
   getDataSourceField().selectComboboxItem(dataSource);
 
   selectDnsLogType();
+};
+
+const createDetector = (detectorName, dataSource, expectFailure) => {
+  getCreateDetectorButton().click({ force: true });
+
+  // TEST DETAILS PAGE
+  fillDefineDetectorPage(detectorName, dataSource);
 
   cy.getElementByText('.euiAccordion .euiTitle', 'Detection rules (14 selected)')
     .click({ force: true, timeout: 5000 })
@@ -260,63 +266,84 @@ describe('Detectors', () => {
     cy.wait('@detectorsSearch').should('have.property', 'state', 'Complete');
   });
 
-  it('...should validate form', () => {
-    getCreateDetectorButton().click({ force: true });
+  describe('...should validate form fields', () => {
+    beforeEach(() => {
+      getCreateDetectorButton().click({ force: true });
+    });
+    it('...should validate detector name', () => {
+      getNameField().should('be.empty');
+      getNameField().type('text').focus().blur();
+
+      getNameField()
+        .parentsUntil('.euiFormRow__fieldWrapper')
+        .siblings()
+        .contains(
+          'Name should only consist of upper and lowercase letters, numbers 0-9, hyphens, spaces, and underscores. Use between 5 and 50 characters.'
+        );
+
+      getNameField()
+        .type(' and more text')
+        .focus()
+        .blur()
+        .parentsUntil('.euiFormRow__fieldWrapper')
+        .siblings()
+        .should('not.exist');
+    });
 
-    getNextButton().should('be.disabled');
+    it('...should validate description', () => {
+      getDescriptionField().should('be.empty');
+      getDescriptionField().type('some description...', { force: true });
+      getDescriptionField().should('not.be.empty');
+    });
 
-    getNameField().should('be.empty');
-    getNameField().type('text').focus().blur();
+    it('...should validate data source field', () => {
+      getDataSourceField()
+        .focus()
+        .blur()
+        .parentsUntil('.euiFormRow__fieldWrapper')
+        .siblings()
+        .contains('Select an input source');
+      getNextButton().should('be.disabled');
+
+      getDataSourceField().selectComboboxItem(cypressIndexDns);
+      getDataSourceField()
+        .focus()
+        .blur()
+        .parentsUntil('.euiFormRow__fieldWrapper')
+        .find('.euiFormErrorText')
+        .should('not.exist');
+    });
 
-    getNameField()
-      .parentsUntil('.euiFormRow__fieldWrapper')
-      .siblings()
-      .contains(
-        'Name should only consist of upper and lowercase letters, numbers 0-9, hyphens, spaces, and underscores. Use between 5 and 50 characters.'
-      );
+    it('...should validate form', () => {
+      getNextButton().should('be.disabled');
 
-    getNameField()
-      .type(' and more text')
-      .focus()
-      .blur()
-      .parentsUntil('.euiFormRow__fieldWrapper')
-      .siblings()
-      .should('not.exist');
-    getNextButton().should('be.disabled');
+      getNameField().type('detector name');
+      getNextButton().should('be.disabled');
 
-    getDataSourceField()
-      .focus()
-      .blur()
-      .parentsUntil('.euiFormRow__fieldWrapper')
-      .siblings()
-      .contains('Select an input source');
-    getNextButton().should('be.disabled');
-
-    getDataSourceField().selectComboboxItem(cypressIndexDns);
-    getDataSourceField()
-      .focus()
-      .blur()
-      .parentsUntil('.euiFormRow__fieldWrapper')
-      .find('.euiFormErrorText')
-      .should('not.exist');
-    getNextButton().should('not.be.disabled');
-  });
+      getDataSourceField().selectComboboxItem(cypressIndexDns);
+      getNextButton().should('not.be.disabled');
 
-  it('...should show mappings warning', () => {
-    getCreateDetectorButton().click({ force: true });
+      getNameField().type('{selectall}{backspace}');
+      getNextButton().should('be.disabled');
+    });
 
-    getDataSourceField().selectComboboxItem(cypressIndexDns);
+    it('...should show mappings warning', () => {
+      getDataSourceField().selectComboboxItem(cypressIndexDns);
+      selectDnsLogType();
 
-    selectDnsLogType();
+      getDataSourceField().selectComboboxItem(cypressIndexWindows);
+      getDataSourceField().focus().blur();
 
-    getDataSourceField().selectComboboxItem(cypressIndexWindows);
-    getDataSourceField().focus().blur();
+      cy.get('.euiCallOut')
+        .should('be.visible')
+        .contains('The selected log sources contain different log types');
 
-    cy.get('.euiCallOut')
-      .should('be.visible')
-      .contains(
-        'To avoid issues with field mappings, we recommend creating separate detectors for different log types.'
-      );
+      cy.get('.euiCallOut')
+        .should('be.visible')
+        .contains(
+          'To avoid issues with field mappings, we recommend creating separate detectors for different log types.'
+        );
+    });
   });
 
   it('...can fail creation', () => {