Merge pull request #1757 from ProcessMaker/bugfix/FOUR-19767

FOUR-19767: Clipboard isn't cleared after add a new control

src/components/vue-form-builder.vue

@@ -127,6 +127,7 @@
             v-if="isClipboardPage(tabPage)"
             variant="link"
             @click="clearClipboard"
+            class="no-text-transform"
           >
             {{ $t('Clear All') }}
           </b-button>
@@ -1745,4 +1746,7 @@ $side-bar-font-size: 0.875rem;
   cursor: not-allowed; /* Cambia el cursor cuando se pasa por encima */
   pointer-events: all; /* Permite que el pseudo-elemento reciba eventos del ratón */
 }
+.no-text-transform {
+    text-transform: none;
+}
 </style>

src/mixins/Clipboard.js

@@ -147,6 +147,7 @@ export default {
         }
       );
       if (confirm) {
+        this.clipboardPage.items = [];
         this.$store.dispatch("clipboardModule/clearClipboard");
         this.$root.$emit('update-clipboard');
       }

tests/e2e/specs/ClipboardTabClearAll.spec.js

@@ -0,0 +1,42 @@
+describe("Clipboard Page and Clear All Functionality", () => {
+
+  it("should remove all controls in the clipboard page when 'Clear All' is confirmed", () => {
+    // Clear local storage to ensure a clean test environment
+    cy.clearLocalStorage();
+
+    // Visit the home page
+    cy.visit("/");
+
+    // Open the 'Input Fields' accordion section
+    cy.openAcordeonByLabel("Input Fields");
+
+    // Navigate to the clipboard page
+    cy.get("[data-test=page-dropdown]").click();
+    cy.get("[data-test=clipboard]").should("exist").click({ force: true });
+
+    // Step 1: Dragging controls to the screen drop zone in the clipboard
+    cy.get("[data-cy=controls-FormInput]").drag("[data-cy=editor-content]", { position: "bottom" });
+    cy.get("[data-cy=controls-FormSelectList]").drag("[data-cy=screen-element-container]", { position: "top" });
+    cy.get("[data-cy=controls-FormButton]").drag("[data-cy=screen-element-container]", { position: "top" });
+    cy.get("[data-cy=controls-FormTextArea]").drag("[data-cy=screen-element-container]", { position: "top" });
+    cy.get("[data-cy=controls-FormDatePicker]").drag("[data-cy=screen-element-container]", { position: "top" });
+    cy.get("[data-cy=controls-FormCheckbox]").drag("[data-cy=screen-element-container]", { position: "top" });
+
+    // Verify that all controls have been successfully added
+    cy.get('[data-cy="screen-element-container"]').children().should('have.length', 6);
+
+    // Step 2: Attempt to clear all controls but cancel the action
+    cy.contains('button', 'Clear All').click();
+    cy.contains('button', 'Cancel').click();
+
+    // Ensure controls are still present after canceling
+    cy.get('[data-cy="screen-element-container"]').children().should('have.length', 6);
+
+    // Step 3: Confirm clearing all controls
+    cy.contains('button', 'Clear All').click();
+    cy.contains('button', 'Confirm').click();
+
+    // Validate that all controls have been removed
+    cy.get('[data-cy="editor-content"]').children().should('have.length', 0);
+  });
+});