Merge branch 'next' into test-pr-checks

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.79.2",
+  "version": "2.79.4",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
@@ -39,7 +39,7 @@
     "@cypress/code-coverage": "^3.8.1",
     "@fortawesome/fontawesome-free": "^5.6.1",
     "@panter/vue-i18next": "^0.15.2",
-    "@processmaker/vue-form-elements": "0.49.4",
+    "@processmaker/vue-form-elements": "0.50.1",
     "@processmaker/vue-multiselect": "^2.2.0",
     "@vue/cli-plugin-babel": "^3.6.0",
     "@vue/cli-plugin-e2e-cypress": "^4.0.3",
@@ -88,7 +88,7 @@
   },
   "peerDependencies": {
     "@panter/vue-i18next": "^0.15.0",
-    "@processmaker/vue-form-elements": "0.49.4",
+    "@processmaker/vue-form-elements": "0.50.1",
     "i18next": "^15.0.8",
     "vue": "^2.6.12",
     "vuex": "^3.1.1"
@@ -105,7 +105,7 @@
   ],
   "engines": {
     "npm": ">=8",
-    "node": ">=16 <18"
+    "node": ">=16"
   },
   "nyc": {
     "include": [

src/components/vue-form-builder.vue

@@ -31,7 +31,10 @@
           <!-- Accordion Bootstrap -->
           <template v-for="(group, index) in controlGroups">
             <b-button
-              v-if="filteredControlsGrouped[group.key].length > 0"
+              v-if="
+                !!filteredControlsGrouped &&
+                filteredControlsGrouped[group.key].length > 0
+              "
               v-b-toggle="`collapse-${index}`"
               class="w-100 rounded-0 text-left"
               style="
@@ -84,7 +87,10 @@
                     />
                     {{ $t(element.label) }}
                   </b-list-group-item>
-                  <li v-if="!filteredControls.length" class="list-group-item">
+                  <li
+                    v-if="!!filteredControls && filteredControls.length > 0"
+                    class="list-group-item"
+                  >
                     <slot />
                   </li>
                 </draggable>
@@ -684,6 +690,7 @@ export default {
         { key: "Files", label: "Files" },
         { key: "Advanced", label: "Advanced" }
       ],
+      filteredControlsGrouped: {},
 
       isCollapsed: new Array(6).fill(true)
     };
@@ -813,7 +820,8 @@ export default {
       handler(newVal) {
         this.groupFilteredControls(newVal);
       },
-      deep: true
+      deep: true,
+      immediate: true
     }
   },
   created() {

tests/e2e/specs/FileUpload.spec.js

@@ -2,25 +2,25 @@ describe('File Upload', () => {
   it('Automatically sets a variable name', () => {
     cy.visit('/');
     cy.openAcordeon("collapse-4");
-    //cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FileUpload]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
 
     cy.get('[data-cy="screen-element-container"] .card-body').then((div) => {
       const data = div[0].__vue__.name;
       expect(data).to.eql('file_upload_1');
     });
-    
+
     cy.get('[data-cy=mode-preview]').click();
     cy.get('[data-cy=file-upload-button]').should('not.have.attr', 'disabled');
   });
-  
+
   it('Disables when task is self service', () => {
     cy.visit('/');
     cy.window().then((win) => {
       win.ProcessMaker.isSelfService = true;
     });
 
+    cy.openAcordeon("collapse-4");
     cy.get('[data-cy=controls-FileUpload]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=mode-preview]').click();
     cy.get('[data-cy=file-upload-button]').should('have.attr', 'disabled');

tests/e2e/specs/MultiInstanceLoopContext.spec.js

@@ -65,7 +65,6 @@ describe("FOUR-3375 FileUpload inside MultiInstance Task", () => {
         fileUploadId: 1
       })
     ).as("uploadMainFile");
-    cy.openAcordeon("collapse-4");
     cy.uploadFile(
       "[data-cy='screen-field-rootUpload'] input[type=file]",
       "avatar.jpeg",

tests/e2e/specs/RecordList.spec.js

@@ -401,7 +401,7 @@ describe('Record list', () => {
     });
   });
 
-  it('Check deleting the correct record in recordlist with empty after sorting', () => {
+  it.skip('Check deleting the correct record in recordlist with empty after sorting', () => {
     cy.loadFromJson('record_list_date_input.json', 0);
     cy.get('[data-cy=mode-preview]').click();
 
@@ -420,10 +420,10 @@ describe('Record list', () => {
     //Add data
     for (let i = 0; i < 9; i++) {
       cy.get('[data-cy=preview-content] [data-cy=screen-field-form_record_list_1] [data-cy=add-row]').click();
-      if (data[i]['date'] != '') {
-        cy.get('[data-cy=preview-content] [data-cy=screen-field-form_record_list_1] [data-cy=modal-add] [data-cy="screen-field-date"]').type(data[i]['date']);
+      if (data[i]['date'] !== '') {
+        cy.get('[data-cy=preview-content] [data-cy=screen-field-form_record_list_1] [data-cy=modal-add] [data-cy="screen-field-date"] input').click().type(data[i]['date']);
       }
-      if (data[i]['name'] != '') {
+      if (data[i]['name'] !== '') {
         cy.get('[data-cy=preview-content] [data-cy=screen-field-form_record_list_1] [data-cy=modal-add] [name=name]').type(data[i]['name']);
       }
       cy.get('[data-cy=preview-content] [data-cy=screen-field-form_record_list_1] [data-cy=modal-add] button.btn-primary').click();
@@ -474,7 +474,7 @@ describe('Record list', () => {
     cy.get('[aria-rowindex="5"] > [aria-colindex="2"]').should('contain.text', 'F');
   });
 
-  it('Check editing records with empty from second page', () => {
+  it.skip('Check editing records with empty from second page', () => {
     cy.loadFromJson('record_list_date_input.json', 0);
     cy.get('[data-cy=mode-preview]').click();
 
@@ -494,7 +494,7 @@ describe('Record list', () => {
     for (let i = 0; i < 9; i++) {
       cy.get('[data-cy=preview-content] [data-cy=screen-field-form_record_list_1] [data-cy=add-row]').click();
       if (data[i]['date'] !== '') {
-        cy.get('[data-cy=preview-content] [data-cy=screen-field-form_record_list_1] [data-cy=modal-add] [data-cy="screen-field-date"]').type(data[i]['date']);
+        cy.get('[data-cy=preview-content] [data-cy=screen-field-form_record_list_1] [data-cy=modal-add] [data-cy="screen-field-date"] input').click().type(data[i]['date']);
       }
       if (data[i]['name'] !== '') {
         cy.get('[data-cy=preview-content] [data-cy=screen-field-form_record_list_1] [data-cy=modal-add] [name=name]').type(data[i]['name']);
@@ -510,13 +510,13 @@ describe('Record list', () => {
 
     //Get record "G" and replace to "GG" and date 01/06/2022 to 06/06/2022
     cy.get('[aria-rowindex="6"] > .text-right > .actions > .btn-group > [data-cy=edit-row]').click();
-    cy.get('[data-cy=preview-content] [data-cy=screen-field-form_record_list_1] [data-cy=modal-edit] [data-cy=screen-field-date] .form-control').should('have.value', '01/06/2022').clear().type('06/06/2022');
+    cy.get('[data-cy=preview-content] [data-cy=screen-field-form_record_list_1] [data-cy=modal-edit] [data-cy=screen-field-date] input').should('have.value', '01/06/2022').clear().type('06/06/2022');
     cy.get('[data-cy=preview-content] [data-cy=screen-field-form_record_list_1] [data-cy=modal-edit] [name=name]').should('have.value', 'G').type('G');
     cy.get('[data-cy=preview-content] [data-cy=screen-field-form_record_list_1] [data-cy=modal-edit] button.btn-primary').click();
 
     //Get record empty "" and replace to "New value" and date 01/10/2022
     cy.get('[aria-rowindex="7"] > .text-right > .actions > .btn-group > [data-cy=edit-row]').click();
-    cy.get('[data-cy=preview-content] [data-cy=screen-field-form_record_list_1] [data-cy=modal-edit] [data-cy=screen-field-date] .form-control').should('have.value', '').type('01/10/2022');
+    cy.get('[data-cy=preview-content] [data-cy=screen-field-form_record_list_1] [data-cy=modal-edit] [data-cy=screen-field-date] input').should('have.value', '').type('01/10/2022');
     cy.get('[data-cy=preview-content] [data-cy=screen-field-form_record_list_1] [data-cy=modal-edit] [name=name]').should('have.value', '').type('New value');
     cy.get('[data-cy=preview-content] [data-cy=screen-field-form_record_list_1] [data-cy=modal-edit] button.btn-primary').click();
 
@@ -555,7 +555,7 @@ describe('Record list', () => {
 
     //Get record "B" and replace to "BB" and date 01/02/2022 to 02/02/2022
     cy.get('[aria-rowindex="8"] > .text-right > .actions > .btn-group > [data-cy=edit-row]').click();
-    cy.get('[data-cy=preview-content] [data-cy=screen-field-form_record_list_1] [data-cy=modal-edit] [data-cy=screen-field-date] .form-control').should('have.value', '01/02/2022').clear().type('02/02/2022');
+    cy.get('[data-cy=preview-content] [data-cy=screen-field-form_record_list_1] [data-cy=modal-edit] [data-cy=screen-field-date] input').should('have.value', '01/02/2022').clear().type('02/02/2022');
     cy.get('[data-cy=preview-content] [data-cy=screen-field-form_record_list_1] [data-cy=modal-edit] [name=name]').should('have.value', 'B').type('B');
     cy.get('[data-cy=preview-content] [data-cy=screen-field-form_record_list_1] [data-cy=modal-edit] button.btn-primary').click();
 

tests/e2e/support/commands.js

@@ -227,7 +227,7 @@ Cypress.Commands.add('showValidationOnLoad', () => {
 Cypress.Commands.add("openAcordeon", (name) => {
   cy.get(`button[aria-controls='${name}']`).should("be.visible");
   cy.get(`div[id='${name}']`).invoke("attr", "style").should("eq", "display: none;");
-  cy.get(`button[aria-controls='${name}']`).click();
+  cy.get(`button[aria-controls='${name}']`).click({waitForAnimations: 500});
   cy.get(`div[id='${name}']`).invoke("attr", "style").should("not.equal", "display: none;");
 });
 

vue.config.js

@@ -12,6 +12,7 @@ if (process.env.NODE_ENV !== "production") {
 }
 
 module.exports = {
+  lintOnSave: false,
   runtimeCompiler: true,
   transpileDependencies: ["vuetable-2"],
   configureWebpack: {