feat: [DHIS2-15462] Use dhis2 UI calendarinput component in forms (#3658

)

* feat: use calendarInput component in forms

* fix: add disabled to calendar input

* fix: remove ref

* fix: flow errors

* chore: update tests

* feat: add error messages

* fix: date and dateTime errors to display only once

* feat: add errors to main field

* feat: add validation to dateTime & age fields

* feat: scheduleDate reset when there is invalid date

* fix: width & calendarWidth to be string

* fix: schedule date in related stages to display calendarInput internal errors

* fix: remove current context from function

* fix: enrollment date input fields

* fix: refactor incident date validation to use form validations

* feat: eventDate validation to use internal error from calendarInput

* fix: pass validationContext for unique validator

* fix: always pass current context

* chore: update calendarInput ui version

* fix: update rules engine version

* fix: runtime error when date is null

* fix: flow types

* fix: failing tests

cypress/e2e/EnrollmentAddEventPage/EnrollmentAddEventPageForm/EnrollmentAddEventPageForm.js

@@ -89,7 +89,7 @@ When(/^you click the create new button number (.*)$/, (eq) => {
 });
 
 When(/^you type (.*) in the input number (.*)$/, (value, eq) => {
-    cy.get('[data-test="capture-ui-input"]')
+    cy.get('input[type="text"]')
         .eq(eq)
         .type(value)
         .blur();
@@ -155,7 +155,7 @@ When(/^the user selects (.*)$/, (value) => {
 });
 
 When(/^you focus and blur a required field/, () => {
-    cy.get('[data-test="capture-ui-input"]')
+    cy.get('input[type="text"]')
         .eq(1)
         .focus()
         .blur();

cypress/e2e/EnrollmentEditEventPage/EnrollmentEditEventPageForm/EnrollmentEditEventPageForm.js

@@ -84,7 +84,7 @@ When(/^the user clicks on the cancel button/, () =>
 When(/^the user set the apgar score to (.*)/, score =>
     cy
         .get('[data-test="widget-enrollment-event"]')
-        .find('[data-test="capture-ui-input"]')
+        .find('input[type="text"]')
         .eq(2)
         .clear()
         .type(score)
@@ -118,8 +118,8 @@ When('the user clicks switch tab to Schedule', () => {
 
 Then('the user selects another schedule date', () => {
     cy.get('[data-test="schedule-section"]').within(() => {
-        cy.get("[data-test='capture-ui-input']").eq(0).should('have.value', `${getCurrentYear() - 15}-01-07`);
-        cy.get("[data-test='capture-ui-input']").eq(0)
+        cy.get('input[type="text"]').eq(0).should('have.value', `${getCurrentYear() - 15}-01-07`);
+        cy.get('input[type="text"]').eq(0)
             .clear()
             .type(`${getCurrentYear()}-08-01`)
             .blur();

cypress/e2e/EnrollmentPage/BreakingTheGlass/BreakingTheGlass.js

@@ -16,21 +16,21 @@ Given('the tei created by this test is cleared from the database', () => {
 
 And('you create a new tei in Child programme from Ngelehun CHC', () => {
     cy.visit('/#/new?orgUnitId=DiszpKrYNg8&programId=IpHINAT79UW');
-    cy.get('[data-test="capture-ui-input"]')
+    cy.get('input[type="text"]')
         .eq(1)
         .type('1999-09-01')
         .blur();
     cy.get('[data-test="d2-section"]')
-        .find('[data-test="capture-ui-input"]')
+        .find('input[type="text"]')
         .eq(0)
         .type('Breaking')
         .blur();
     cy.get('[data-test="d2-section"]')
-        .find('[data-test="capture-ui-input"]')
+        .find('input[type="text"]')
         .eq(1)
         .type('TheGlass')
         .blur();
-    cy.get('[data-test="capture-ui-input"]')
+    cy.get('input[type="text"]')
         .eq(7)
         .type('2023-09-01')
         .blur();
@@ -68,7 +68,7 @@ And('you enroll the tei from Njandama MCHP', () => {
         .click();
 
     cy.get('[data-test="d2-section"]')
-        .find('[data-test="capture-ui-input"]')
+        .find('input[type="text"]')
         .eq(8)
         .type('1999-09-01')
         .blur();

cypress/e2e/EnrollmentPage/HiddenProgramStage/HiddenProgramStage.js

@@ -28,7 +28,7 @@ Given('you add an enrollment event that will result in a rule effect to hide a p
         '/#/enrollmentEventNew?enrollmentId=fmhIsWXVDmS&orgUnitId=s7SLtx8wmRA&programId=WSGAb5XwJ3Y&stageId=PFDfvmGpsR3&teiId=uW8Y7AIcRKA',
     );
 
-    cy.get('[data-test="capture-ui-input"]')
+    cy.get('input[type="text"]')
         .eq(0)
         .type(moment().format('YYYY-MM-DD'))
         .blur();

cypress/e2e/EnrollmentPage/StagesAndEventsWidget/StagesAndEventsWidget.js

@@ -11,7 +11,7 @@ After({ tags: '@with-restore-deleted-event' }, () => {
         .find('[data-test="create-new-button"]')
         .click();
 
-    cy.get('[data-test="capture-ui-input"]')
+    cy.get('input[type="text"]')
         .first()
         .type('2023-01-26')
         .blur();

cypress/e2e/NewPage/NewPage.js

@@ -328,7 +328,7 @@ Then('you see validation error on visit date', () => {
 });
 
 And('you fill in 200 in the hemoglobin', () => {
-    cy.get('[data-test="capture-ui-input"]')
+    cy.get('input[type="text"]')
         .eq(1)
         .type('200');
 });
@@ -340,13 +340,13 @@ And('you see validation error on hemoglobin', () => {
 });
 
 And('you fill in the visit date', () => {
-    cy.get('[data-test="capture-ui-input"]')
+    cy.get('input[type="text"]')
         .eq(0)
-        .type(`${getCurrentYear()}-01-01`);
+        .type(`${getCurrentYear()}-01-01`).blur();
 });
 
 And('you fill in the hemoglobin', () => {
-    cy.get('[data-test="capture-ui-input"]')
+    cy.get('input[type="text"]')
         .eq(1)
         .type('50');
 });
@@ -389,14 +389,14 @@ And('you are in the Person registration page', () => {
 });
 
 And('you fill in the first name with value that has duplicates', () => {
-    cy.get('[data-test="capture-ui-input"]')
+    cy.get('input[type="text"]')
         .eq(1)
         .type('Sarah')
         .blur();
 });
 
 And('you fill in a unique first name', () => {
-    cy.get('[data-test="capture-ui-input"]')
+    cy.get('input[type="text"]')
         .eq(1)
         .type(`Sarah-${Math.round((new Date()).getTime() / 1000)}`)
         .blur();
@@ -427,7 +427,7 @@ Then('you submit the form again from the duplicates modal', () => {
 // New person in WHO RMNCH Tracker
 And('you are in the WHO RMNCH program registration page', () => {
     cy.visit('/#/new?programId=WSGAb5XwJ3Y&orgUnitId=DiszpKrYNg8');
-    cy.get('[data-test="capture-ui-input"]')
+    cy.get('input[type="text"]')
         .eq(1)
         .invoke('val').should('not.be.empty');
 });
@@ -441,7 +441,7 @@ And('you are in Child programme and Buma MCHP organization unit registration pag
 });
 
 And('you fill the form with age 0', () => {
-    cy.get('[data-test="capture-ui-input"]')
+    cy.get('input[type="text"]')
         .eq(9)
         .type(moment().format('YYYY-MM-DD'))
         .blur();
@@ -454,56 +454,56 @@ And('you see validation warning on birth date', () => {
 });
 
 And('you fill the WHO RMNCH program registration form with its required unique values', () => {
-    cy.get('[data-test="capture-ui-input"]')
+    cy.get('input[type="text"]')
         .eq(2)
         .type(`Sarah-${Math.round((new Date()).getTime() / 1000)}`);
 
-    cy.get('[data-test="capture-ui-input"]')
+    cy.get('input[type="text"]')
         .eq(3)
         .type('Gonzales');
 
-    cy.get('[data-test="capture-ui-input"]')
+    cy.get('input[type="text"]')
         .eq(9)
         .type('1992-01-01')
         .blur();
 });
 
 And('you fill the WHO RMNCH program registration form with its required values', () => {
-    cy.get('[data-test="capture-ui-input"]')
+    cy.get('input[type="text"]')
         .eq(3)
         .type('Didriksson');
 
-    cy.get('[data-test="capture-ui-input"]')
+    cy.get('input[type="text"]')
         .eq(2)
         .type('Ava');
 
-    cy.get('[data-test="capture-ui-input"]')
+    cy.get('input[type="text"]')
         .eq(9)
         .type('1985-10-01')
         .blur();
 });
 
 And('you fill in child programme first name with value that has duplicates', () => {
-    cy.get('[data-test="capture-ui-input"]')
+    cy.get('input[type="text"]')
         .eq(4)
         .type('Sarah')
         .blur();
 });
 
 
 And('you fill the Child programme registration form with a first name with value that has duplicates', () => {
-    cy.get('[data-test="capture-ui-input"]')
+    cy.get('input[type="text"]')
         .eq(1)
         .type('2021-01-01')
         .blur();
-    cy.get('[data-test="capture-ui-input"]')
+    cy.get('input[type="text"]')
         .eq(4)
         .type('Sarah')
         .blur();
 });
 
 And('you fill in the birth report date', () => {
-    cy.get('[data-test="capture-ui-input"]')
+    cy.get('input[type="text"]')
         .eq(7)
         .type('2023-01-01')
         .blur();
@@ -530,9 +530,9 @@ And('you see the form prefield with existing TEI attributes values', () => {
     cy.get('[data-test="registration-page-content"]').within(() => {
         cy.contains('New Enrollment in program: Child Programme').should('exist');
         cy.contains('First name').should('exist');
-        cy.get('[data-test="capture-ui-input"]').eq(4).should('have.value', 'Anna');
+        cy.get('input[type="text"]').eq(4).should('have.value', 'Anna');
         cy.contains('Last name').should('exist');
-        cy.get('[data-test="capture-ui-input"]').eq(5).should('have.value', 'Jones');
+        cy.get('input[type="text"]').eq(5).should('have.value', 'Jones');
         cy.contains('Gender').should('exist');
         cy.contains('Female').should('exist');
     });
@@ -554,15 +554,15 @@ Given('you open the main page with Ngelehun and Malaria case diagnosis, treatmen
 });
 
 And('you fill the Malaria case diagnosis registration form with values', () => {
-    cy.get('[data-test="capture-ui-input"]')
+    cy.get('input[type="text"]')
         .eq(3)
         .type(`Ana-${Math.round((new Date()).getTime() / 1000)}`)
         .blur();
-    cy.get('[data-test="capture-ui-input"]')
+    cy.get('input[type="text"]')
         .eq(4)
         .type(`Maria-${Math.round((new Date()).getTime() / 1000)}`)
         .blur();
-    cy.get('[data-test="capture-ui-input"]')
+    cy.get('input[type="text"]')
         .eq(5)
         .type(moment().add(-1, 'day').format('YYYY-MM-DD'))
         .blur();
@@ -602,26 +602,26 @@ Then('the first stage appears on registration page', () => {
 });
 
 And('you fill the Child Program program registration form with unique values', () => {
-    cy.get('[data-test="capture-ui-input"]')
+    cy.get('input[type="text"]')
         .eq(1)
         .type('2021-01-01')
         .blur();
-    cy.get('[data-test="capture-ui-input"]')
+    cy.get('input[type="text"]')
         .eq(2)
         .type(20);
-    cy.get('[data-test="capture-ui-input"]')
+    cy.get('input[type="text"]')
         .eq(3)
         .type(30)
         .blur();
-    cy.get('[data-test="capture-ui-input"]')
+    cy.get('input[type="text"]')
         .eq(4)
         .type(`Sarah-${Math.round((new Date()).getTime() / 1000)}`)
         .blur();
-    cy.get('[data-test="capture-ui-input"]')
+    cy.get('input[type="text"]')
         .eq(5)
         .type(`Beth-${Math.round((new Date()).getTime() / 1000)}`)
         .blur();
-    cy.get('[data-test="capture-ui-input"]')
+    cy.get('input[type="text"]')
         .eq(7)
         .type('2021-01-01')
         .blur();

cypress/e2e/ScopeSelector/ScopeSelector.js

@@ -49,7 +49,7 @@ Given('you are in the main page with program preselected', () => {
 Given('you select both org unit and program Malaria case registration', () => {
     cy.get('[data-test="org-unit-selector-container"]')
         .click();
-    cy.get('[data-test="capture-ui-input"]')
+    cy.get('input[type="text"]')
         .type('Ngelehun C');
     cy.contains('Ngelehun CHC')
         .click();
@@ -67,7 +67,7 @@ Given('you select both org unit and program Malaria case registration', () => {
 Given('you select both org unit and program Child Programme', () => {
     cy.get('[data-test="org-unit-selector-container"]')
         .click();
-    cy.get('[data-test="capture-ui-input"]')
+    cy.get('input[type="text"]')
         .type('Ngelehun C');
     cy.contains('Ngelehun CHC')
         .click();
@@ -359,7 +359,7 @@ And('you see message explaining this is an Event program', () => {
 When('you select org unit that is incompatible with the already selected program', () => {
     cy.get('[data-test="org-unit-selector-container"]')
         .click();
-    cy.get('[data-test="capture-ui-input"]')
+    cy.get('input[type="text"]')
         .type('Biriw');
     cy.contains('Biriwa')
         .click();

cypress/e2e/SearchForDuplicatesThroughAddRelationship/SearchForDuplicatesThroughAddRelationship.js

@@ -2,7 +2,7 @@ import { When, defineStep as And } from '@badeball/cypress-cucumber-preprocessor
 
 And('you fill in the first name with values that have duplicates', () => {
     cy.get('[data-test="d2-section"]')
-        .find('[data-test="capture-ui-input"]')
+        .find('input[type="text"]')
         .eq(1)
         .wait(500)
         .type('Tesmi')
@@ -11,26 +11,26 @@ And('you fill in the first name with values that have duplicates', () => {
 
 And('you fill in the first name with values that have less than 5 duplicates', () => {
     cy.get('[data-test="d2-section"]')
-        .find('[data-test="capture-ui-input"]')
+        .find('input[type="text"]')
         .eq(1)
         .type('Sarah')
         .blur();
     cy.get('[data-test="d2-section"]')
-        .find('[data-test="capture-ui-input"]')
+        .find('input[type="text"]')
         .eq(2)
         .type('Fis')
         .blur();
 });
 
 And('you fill in the first name with values that have exactly 5 duplicates', () => {
     cy.get('[data-test="d2-section"]')
-        .find('[data-test="capture-ui-input"]')
+        .find('input[type="text"]')
         .eq(1)
         .wait(500)
         .type('Tesmi')
         .blur();
     cy.get('[data-test="d2-section"]')
-        .find('[data-test="capture-ui-input"]')
+        .find('input[type="text"]')
         .eq(2)
         .type('Abel')
         .blur();