From bf78b74d18f60ae4fb7c2bcbbb2254d384274f9f Mon Sep 17 00:00:00 2001
From: Rodrigo Quelca <rodrigo@processmaker.com>
Date: Mon, 9 Sep 2024 14:12:59 -0400
Subject: [PATCH 01/46] FOUR-13437: STORY Add clipboard section to control menu

---
 src/components/vue-form-builder.vue      | 14 +++---
 src/form-builder-controls.js             | 57 +++++++++++++++---------
 tests/e2e/specs/ClipboardControl.spec.js | 44 ++++++++++++++++++
 3 files changed, 87 insertions(+), 28 deletions(-)
 create mode 100644 tests/e2e/specs/ClipboardControl.spec.js

diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 19f127351..1b0f23028 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -527,12 +527,13 @@ const defaultConfig = [
 ];
 
 const defaultGroupOrder = {
-  "Input Fields" : 1.0,
-  "Content Fields" : 2.0,
-  "Dashboards" : 2.5,
-  "Navigation" : 3.0,
-  "Files" : 4.0,
-  "Advanced" : 5.0,
+  "Clipboard": 1.0,
+  "Input Fields" : 2.0,
+  "Content Fields" : 3.0,
+  "Dashboards" : 3.5,
+  "Navigation" : 4.0,
+  "Files" : 5.0,
+  "Advanced" : 6.0,
 };
 
 const DEFAULT_GROUP = "Advanced";
@@ -700,7 +701,6 @@ export default {
           return orderA - orderB;
         });
       });
-
       return grouped;
     },
     showToolbar() {
diff --git a/src/form-builder-controls.js b/src/form-builder-controls.js
index 4addefafc..22e772018 100755
--- a/src/form-builder-controls.js
+++ b/src/form-builder-controls.js
@@ -54,7 +54,7 @@ export default [
     rendererBinding: 'FormHtmlEditor',
     control: {
       popoverContent: "Use a Rich Text Editor to add HTML-formatted",
-      order: 1.0,
+      order: 2.0,
       group: 'Content Fields',
       label: 'Rich Text',
       component: 'FormHtmlViewer',
@@ -96,7 +96,7 @@ export default [
     rendererBinding: 'FormMaskedInput',
     control: {
       popoverContent: "Collect a string of text and format it as one of several data types",
-      order: 1.0,
+      order: 2.0,
       group: 'Input Fields',
       label: 'Line Input',
       component: 'FormInput',
@@ -127,6 +127,7 @@ export default [
       ],
     },
   },
+
   {
     editorComponent: FormTextArea,
     editorBinding: 'FormTextArea',
@@ -134,7 +135,7 @@ export default [
     rendererBinding: 'FormTextArea',
     control: {
       popoverContent: "Collect a multi-line string of text, to allow for extensive, richly formatted responses",
-      order: 4.0,
+      order: 5.0,
       group: 'Input Fields',
       label: 'Textarea',
       component: 'FormTextArea',
@@ -192,7 +193,7 @@ export default [
     rendererBinding: 'FormSelectList',
     control: {
       popoverContent: "Collect options from a list, as radio butttons or dropdowns",
-      order: 2.0,
+      order: 3.0,
       group: 'Input Fields',
       label: 'Select List',
       component: 'FormSelectList',
@@ -247,7 +248,7 @@ export default [
     rendererBinding: 'FormCheckbox',
     control: {
       popoverContent: "Add a checkbox or toggle for true/false responses",
-      order: 6.0,
+      order: 7.0,
       group: 'Input Fields',
       label: 'Checkbox',
       component: 'FormCheckbox',
@@ -289,7 +290,7 @@ export default [
     rendererBinding: 'FormDatePicker',
     control: {
       popoverContent: "Collect a date or date/time",
-      order: 5.0,
+      order: 6.0,
       group: 'Input Fields',
       label: 'Date Picker',
       component: 'FormDatePicker',
@@ -343,7 +344,7 @@ export default [
     rendererBinding: 'FormButton',
     control: {
       popoverContent: "Add special buttons that link between subpages within this Form",
-      order: 1.0,
+      order: 2.0,
       group: 'Navigation',
       label: 'Page Navigation',
       component: 'FormButton',
@@ -378,7 +379,7 @@ export default [
     rendererBinding: 'FormMultiColumn',
     control: {
       popoverContent: "Organize and group your content in columns",
-      order: 2.0,
+      order: 3.0,
       group: 'Content Fields',
       label: 'Multicolumn / Table',
       component: 'FormMultiColumn',
@@ -423,7 +424,7 @@ export default [
     rendererBinding: 'FormLoop',
     control: {
       popoverContent: "Add a repeatable section of content",
-      order: 5.0,
+      order: 6.0,
       group: 'Content Fields',
       label: 'Loop',
       component: 'FormLoop',
@@ -459,7 +460,7 @@ export default [
     rendererBinding: 'FormRecordList',
     control: {
       popoverContent: "Format content in a table structure and allow for adding rows",
-      order: 4.0,
+      order: 5.0,
       group: 'Content Fields',
       label: 'Record List',
       component: 'FormRecordList',
@@ -522,7 +523,7 @@ export default [
     rendererBinding: 'FormImage',
     control: {
       popoverContent: "Upload an image to your screen",
-      order: 3.0,
+      order: 4.0,
       group: 'Content Fields',
       label: 'Image',
       component: 'FormImage',
@@ -589,7 +590,7 @@ export default [
     rendererBinding: 'FormAvatar',
     control: {
       popoverContent: "User avatar",
-      order: 3.0,
+      order: 4.0,
       group: 'Dashboards',
       label: 'User Avatar',
       component: 'FormAvatar',
@@ -633,7 +634,7 @@ export default [
     rendererBinding: 'FormButton',
     control: {
       popoverContent: "Add an action to submit your form or update a field",
-      order: 3.0,
+      order: 4.0,
       group: 'Input Fields',
       label: 'Submit Button',
       component: 'FormButton',
@@ -694,7 +695,7 @@ export default [
     rendererBinding: 'FormNestedScreen',
     control: {
       popoverContent: "Add and reuse another Form within this Form",
-      order: 6.0,
+      order: 7.0,
       group: 'Content Fields',
       label: 'Nested Screen',
       component: 'FormNestedScreen',
@@ -729,7 +730,7 @@ export default [
     control: {
       group: "Files",
       popoverContent: "Collect files uploaded into the Form",
-      order: 1.0,
+      order: 2.0,
       label: 'File Upload',
       component: 'FileUpload',
       'editor-component': 'FileUpload',
@@ -781,7 +782,7 @@ export default [
     builderBinding: 'FileDownload',
     control: {
       popoverContent: "Offer a File download",
-      order: 2.0,
+      order: 3.0,
       group: "Files",
       label: 'File Download',
       component: 'FileDownload',
@@ -817,7 +818,7 @@ export default [
     builderBinding: 'BFormComponent',
     control: {
       popoverContent: "Add one of several Bootstrap Vue components",
-      order: 1.0,
+      order: 2.0,
       group: 'Advanced',
       label: 'Bootstrap Component',
       component: 'BFormComponent',
@@ -871,7 +872,7 @@ export default [
     builderBinding: 'BWrapperComponent',
     control: {
       popoverContent: "Wrap an existing subpage within this Form into a Bootstrap Vue component",
-      order: 2.0,
+      order: 3.0,
       group: 'Advanced',
       label: 'Bootstrap Wrapper',
       component: 'BWrapperComponent',
@@ -970,7 +971,7 @@ export default [
     rendererBinding: "FormAnalyticsChart",
     control: {
       popoverContent: "Add a chart from the Analytics Reports",
-      order: 6.0,
+      order: 7.0,
       group: 'Dashboards',
       label: "Analytics Chart",
       component: "FormAnalyticsChart",
@@ -1001,7 +1002,7 @@ export default [
     control: {
       popoverContent: "Add a URL where this link should redirect",
       group: 'Content Fields',
-      order: 6.0,
+      order: 7.0,
       label: "Link URL",
       component: "LinkButton",
       "editor-component": "LinkButton",
@@ -1032,5 +1033,19 @@ export default [
         buttonVariantStyleProperty
       ]
     }
-  }
+  },
+  {
+    control: {
+      popoverContent: "Clipboard Control: Manage copied elements by dragging them to your desired location. Click to view and paste previously copied items.",
+      order: 1.0,
+      group: 'Clipboard',
+      label: 'Drag & Paste',
+      component: "Clipboard",
+      config: {
+        icon: 'fa fa-clipboard',
+      },
+      inspector: [],
+    },
+  },
+
 ];
diff --git a/tests/e2e/specs/ClipboardControl.spec.js b/tests/e2e/specs/ClipboardControl.spec.js
new file mode 100644
index 000000000..c47d1d2da
--- /dev/null
+++ b/tests/e2e/specs/ClipboardControl.spec.js
@@ -0,0 +1,44 @@
+describe("Add Clipboard Section to Control Menu", () => {
+
+  /**
+   * Test to verify that the Clipboard section is present in the control menu.
+   */
+  it('should display the "Clipboard" section in the control menu', () => {
+    // Navigate to the homepage
+    cy.visit("/");
+
+    // Verify that the Clipboard section is visible in the control menu
+    cy.contains("Clipboard").should("be.visible");
+  });
+
+  /**
+   * Test to verify that the Clipboard accordion expands and shows the "Drag to Paste" control.
+   */
+  it('should expand the Clipboard accordion and display the "Drag to Paste" control', () => {
+    // Navigate to the homepage
+    cy.visit("/");
+
+    // Open all accordions in the control menu
+    cy.openAllAcordeon();
+
+    // Verify that the Clipboard accordion exists and is visible
+    cy.get('[data-cy="controls-Clipboard"]').should("exist").should("be.visible");
+  });
+
+  /**
+   * Test to verify the visibility of the popover when hovering over the "Drag to Paste" control.
+   */
+  it('should display the popover when hovering over the "Drag to Paste" control', () => {
+    // Navigate to the homepage
+    cy.visit("/");
+
+    // Open all accordions in the control menu
+    cy.openAllAcordeon();
+
+    // Click to open the Clipboard accordion
+    cy.get('[data-cy="controls-Clipboard"]').click();
+
+    // Verify that the popover associated with the "Drag to Paste" control is visible
+    cy.get('.custom-popover').should("be.visible");
+  });
+});

From d6a3a7e7d85e8e27ab58484208cfac545a9edaa9 Mon Sep 17 00:00:00 2001
From: Rodrigo Quelca <rodrigo@processmaker.com>
Date: Mon, 9 Sep 2024 14:22:09 -0400
Subject: [PATCH 02/46] add steps labels

---
 tests/e2e/specs/ClipboardControl.spec.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/tests/e2e/specs/ClipboardControl.spec.js b/tests/e2e/specs/ClipboardControl.spec.js
index c47d1d2da..1da9ea783 100644
--- a/tests/e2e/specs/ClipboardControl.spec.js
+++ b/tests/e2e/specs/ClipboardControl.spec.js
@@ -4,10 +4,10 @@ describe("Add Clipboard Section to Control Menu", () => {
    * Test to verify that the Clipboard section is present in the control menu.
    */
   it('should display the "Clipboard" section in the control menu', () => {
-    // Navigate to the homepage
+    // Step 1: Navigate to the homepage
     cy.visit("/");
 
-    // Verify that the Clipboard section is visible in the control menu
+    // Step 2: Verify that the Clipboard section is visible in the control menu
     cy.contains("Clipboard").should("be.visible");
   });
 
@@ -15,13 +15,13 @@ describe("Add Clipboard Section to Control Menu", () => {
    * Test to verify that the Clipboard accordion expands and shows the "Drag to Paste" control.
    */
   it('should expand the Clipboard accordion and display the "Drag to Paste" control', () => {
-    // Navigate to the homepage
+    // Step 1: Navigate to the homepage
     cy.visit("/");
 
-    // Open all accordions in the control menu
+    // Step 2: Open all accordions in the control menu
     cy.openAllAcordeon();
 
-    // Verify that the Clipboard accordion exists and is visible
+    // Step 3: Verify that the Clipboard accordion exists and is visible
     cy.get('[data-cy="controls-Clipboard"]').should("exist").should("be.visible");
   });
 
@@ -29,16 +29,16 @@ describe("Add Clipboard Section to Control Menu", () => {
    * Test to verify the visibility of the popover when hovering over the "Drag to Paste" control.
    */
   it('should display the popover when hovering over the "Drag to Paste" control', () => {
-    // Navigate to the homepage
+    // Step 1: Navigate to the homepage
     cy.visit("/");
 
-    // Open all accordions in the control menu
+    // Step 2: Open all accordions in the control menu
     cy.openAllAcordeon();
 
-    // Click to open the Clipboard accordion
+    // Step 3: Click to open the Clipboard accordion
     cy.get('[data-cy="controls-Clipboard"]').click();
 
-    // Verify that the popover associated with the "Drag to Paste" control is visible
+    // Step 4: Verify that the popover associated with the "Drag to Paste" control is visible
     cy.get('.custom-popover').should("be.visible");
   });
 });

From f17cfec8140cb78da0224c311db24885c70217a1 Mon Sep 17 00:00:00 2001
From: Rodrigo Quelca <rodrigo@processmaker.com>
Date: Mon, 9 Sep 2024 14:56:04 -0400
Subject: [PATCH 03/46] update popover message

---
 src/form-builder-controls.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/form-builder-controls.js b/src/form-builder-controls.js
index 22e772018..5abf69285 100755
--- a/src/form-builder-controls.js
+++ b/src/form-builder-controls.js
@@ -1036,7 +1036,7 @@ export default [
   },
   {
     control: {
-      popoverContent: "Clipboard Control: Manage copied elements by dragging them to your desired location. Click to view and paste previously copied items.",
+      popoverContent: "Drag and paste copied elements to your desired location.",
       order: 1.0,
       group: 'Clipboard',
       label: 'Drag & Paste',

From b42df7172629ddc741ce636a173f659af1d48557 Mon Sep 17 00:00:00 2001
From: Rodrigo Quelca <rodrigo@processmaker.com>
Date: Tue, 10 Sep 2024 09:25:30 -0400
Subject: [PATCH 04/46] update control openAcordeon index for cypress tests

---
 tests/e2e/specs/ComputedFields.spec.js        |  8 ++--
 .../e2e/specs/ComputedFieldsReadOnly.spec.js  | 10 ++---
 tests/e2e/specs/CustomCss.spec.js             | 12 +++---
 tests/e2e/specs/DatePicker.spec.js            |  2 +-
 tests/e2e/specs/DatePickerTimezone.spec.js    |  2 +-
 tests/e2e/specs/DefaultValues.spec.js         | 14 +++----
 .../specs/DeviceVisivilityInspector.spec.js   | 38 +++++++++----------
 tests/e2e/specs/FileUpload.spec.js            |  4 +-
 tests/e2e/specs/FormImage.spec.js             |  4 +-
 tests/e2e/specs/FormInput.spec.js             |  2 +-
 tests/e2e/specs/FormSelectList.spec.js        |  2 +-
 tests/e2e/specs/FormTextArea.spec.js          | 22 +++++------
 tests/e2e/specs/Loop.spec.js                  | 20 +++++-----
 tests/e2e/specs/MediaQuery.spec.js            |  2 +-
 tests/e2e/specs/MultiColumn.spec.js           |  6 +--
 tests/e2e/specs/NestedScreen.spec.js          |  2 +-
 tests/e2e/specs/Pagination.spec.js            |  2 +-
 tests/e2e/specs/ResponsivePreview.spec.js     |  2 +-
 tests/e2e/specs/RichText.spec.js              |  4 +-
 tests/e2e/specs/ScreenWarnings.spec.js        |  2 +-
 .../SelectListDependentCollection.spec.js     |  2 +-
 tests/e2e/specs/UndoRedo.spec.js              |  4 +-
 tests/e2e/specs/VariableNames.js              |  6 +--
 tests/e2e/specs/VisibilityRule.spec.js        |  6 +--
 tests/e2e/specs/Watchers.spec.js              | 20 +++++-----
 tests/e2e/specs/WatchersBypass.spec.js        |  2 +-
 tests/e2e/specs/WrongConfigurationErrors.js   |  4 +-
 tests/e2e/support/commands.js                 |  2 +-
 28 files changed, 103 insertions(+), 103 deletions(-)

diff --git a/tests/e2e/specs/ComputedFields.spec.js b/tests/e2e/specs/ComputedFields.spec.js
index 4746f8aac..8a24f1ef0 100644
--- a/tests/e2e/specs/ComputedFields.spec.js
+++ b/tests/e2e/specs/ComputedFields.spec.js
@@ -18,10 +18,10 @@ describe("Computed fields", () => {
     cy.visit("/");
     cy.loadFromJson("FOUR-5139.json", 0);
 
-    // Enter preview mode
+    // Step 1: Enter preview mode
     cy.get("[data-cy=mode-preview]").click();
 
-    // Add three inputs input in loop
+    // Step : Add three inputs input in loop
     cy.get("[data-cy=loop-loop_1-add]").click();
     cy.get("[data-cy=loop-loop_1-add]").click();
     cy.get("[data-cy=loop-loop_1-add]").click();
@@ -138,7 +138,7 @@ describe("Computed fields", () => {
   });
   it("Create a javascript computed field", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     // Add an input field
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
@@ -184,7 +184,7 @@ describe("Computed fields", () => {
 
   it("Create a computed field with formula", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     // Add an input field
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
diff --git a/tests/e2e/specs/ComputedFieldsReadOnly.spec.js b/tests/e2e/specs/ComputedFieldsReadOnly.spec.js
index 72821ed72..5a19b7e0f 100644
--- a/tests/e2e/specs/ComputedFieldsReadOnly.spec.js
+++ b/tests/e2e/specs/ComputedFieldsReadOnly.spec.js
@@ -3,7 +3,7 @@ import { waitUntilElementIsVisible } from "../support/utils";
 describe("Computed fields", () => {
   it("The user should not be able to change a FormInput assigned to a computed property", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     // Add an input field
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
@@ -144,7 +144,7 @@ describe("Computed fields", () => {
 
   it("The user should not be able to change a FormTextArea assigned to a computed property", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     // Add an input field
     cy.get("[data-cy=controls-FormTextArea]").drag(
       "[data-cy=screen-drop-zone]",
@@ -181,7 +181,7 @@ describe("Computed fields", () => {
 
   it("The user should not be able to change a FormDatePicker assigned to a computed property", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     // Add an input field
     cy.get("[data-cy=controls-FormDatePicker]").drag(
       "[data-cy=screen-drop-zone]",
@@ -220,7 +220,7 @@ describe("Computed fields", () => {
 
   it("The user should not be able to change a FormSelectList assigned to a computed property", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     // Add an input field
     cy.get("[data-cy=controls-FormSelectList]").drag(
       "[data-cy=screen-drop-zone]",
@@ -275,7 +275,7 @@ describe("Computed fields", () => {
 
   it("The user should not be able to change an input assigned to a sub property of a computed property", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
 
     // Add an input field
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
diff --git a/tests/e2e/specs/CustomCss.spec.js b/tests/e2e/specs/CustomCss.spec.js
index 6d9121ef0..701644e68 100644
--- a/tests/e2e/specs/CustomCss.spec.js
+++ b/tests/e2e/specs/CustomCss.spec.js
@@ -1,7 +1,7 @@
 describe("Custom CSS", () => {
   it("Shows Modal", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
     });
@@ -14,7 +14,7 @@ describe("Custom CSS", () => {
 
   it("Closes Modal", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
     });
@@ -30,7 +30,7 @@ describe("Custom CSS", () => {
 
   it("Does Not Save Custom CSS", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
     });
@@ -51,7 +51,7 @@ describe("Custom CSS", () => {
 
   it("Saves Custom CSS", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
     });
@@ -76,7 +76,7 @@ describe("Custom CSS", () => {
 
   it("Does not add styling to element in design mode", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
     });
@@ -100,7 +100,7 @@ describe("Custom CSS", () => {
 
   it("Adds styling to element in preview mode", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
     });
diff --git a/tests/e2e/specs/DatePicker.spec.js b/tests/e2e/specs/DatePicker.spec.js
index 2392dc045..f2227f377 100644
--- a/tests/e2e/specs/DatePicker.spec.js
+++ b/tests/e2e/specs/DatePicker.spec.js
@@ -5,7 +5,7 @@ moment.tz.setDefault("UTC");
 describe("Date Picker", () => {
   beforeEach(() => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.window().then((win) => {
       win.ProcessMaker.user.timezone = "UTC";
     });
diff --git a/tests/e2e/specs/DatePickerTimezone.spec.js b/tests/e2e/specs/DatePickerTimezone.spec.js
index db0e5cc83..ab9153fdc 100644
--- a/tests/e2e/specs/DatePickerTimezone.spec.js
+++ b/tests/e2e/specs/DatePickerTimezone.spec.js
@@ -6,7 +6,7 @@ describe("Date Picker", () => {
     // The timezone is UTC. We set it to UTC in package.json `TZ=UTC`
     cy.clock(new Date(2024, 0, 0, 0, 0, 0), ['Date']);
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
 
     // Set the User's timezone to Los Angeles. This is what DatePicker will use
     cy.window().then((win) => {
diff --git a/tests/e2e/specs/DefaultValues.spec.js b/tests/e2e/specs/DefaultValues.spec.js
index 4fdff56c7..db94f8b0a 100644
--- a/tests/e2e/specs/DefaultValues.spec.js
+++ b/tests/e2e/specs/DefaultValues.spec.js
@@ -1,7 +1,7 @@
 describe("Default values", () => {
   it("Basic default value", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
     });
@@ -22,7 +22,7 @@ describe("Default values", () => {
 
   it('Text Input Default value if the variable has the next format "people.firstName"', () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
     });
@@ -46,7 +46,7 @@ describe("Default values", () => {
 
   it('Select List- Default if the variable has the next format "numbers.int"', () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormSelectList]").drag(
       "[data-cy=screen-drop-zone]",
       { position: "bottom" }
@@ -83,7 +83,7 @@ describe("Default values", () => {
 
   it("Javascript default value", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.setPreviewDataInput({ name: "world" });
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
@@ -107,7 +107,7 @@ describe("Default values", () => {
   });
   it("Initially checked checkbox", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormCheckbox]").drag(
       "[data-cy=screen-drop-zone]",
       { position: "bottom" }
@@ -125,7 +125,7 @@ describe("Default values", () => {
   });
   it("Dynamic Basic default value", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     // Add an input field
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
@@ -158,7 +158,7 @@ describe("Default values", () => {
   });
   it("Dynamic Javascript default value", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     // Add an input field
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
diff --git a/tests/e2e/specs/DeviceVisivilityInspector.spec.js b/tests/e2e/specs/DeviceVisivilityInspector.spec.js
index 7950a50c1..5b6ed760c 100644
--- a/tests/e2e/specs/DeviceVisivilityInspector.spec.js
+++ b/tests/e2e/specs/DeviceVisivilityInspector.spec.js
@@ -11,7 +11,7 @@ import { nodeControls } from "../support/constants.js";
 describe("Device Visiblility Inspector", () => {
   it("Verify if an input has device visiblility settings", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
     });
@@ -29,7 +29,7 @@ describe("Device Visiblility Inspector", () => {
   });
   it("Verify if a checkbox has device visiblility settings", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormCheckbox]").drag(
       "[data-cy=screen-drop-zone]",
       { position: "bottom" }
@@ -48,7 +48,7 @@ describe("Device Visiblility Inspector", () => {
   });
   it("Verify if a datePicker has device visiblility settings", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormDatePicker]").drag(
       "[data-cy=screen-drop-zone]",
       { position: "bottom" }
@@ -67,7 +67,7 @@ describe("Device Visiblility Inspector", () => {
   });
   it("Verify if a FileDownload has device visiblility settings", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-5");
+    cy.openAcordeon("collapse-6");
     cy.get("[data-cy=controls-FileDownload]").drag(
       "[data-cy=screen-drop-zone]",
       { position: "bottom" }
@@ -86,7 +86,7 @@ describe("Device Visiblility Inspector", () => {
   });
   it("Verify if a FileUpload has device visiblility settings", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-5");
+    cy.openAcordeon("collapse-6");
     cy.get("[data-cy=controls-FileUpload]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
     });
@@ -104,7 +104,7 @@ describe("Device Visiblility Inspector", () => {
   });
   it("Verify if a FormImage has device visiblility settings", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-2");
+    cy.openAcordeon("collapse-3");
     cy.get("[data-cy=controls-FormImage]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
     });
@@ -122,7 +122,7 @@ describe("Device Visiblility Inspector", () => {
   });
   it("Verify if a FormLoop has device visiblility settings", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-2");
+    cy.openAcordeon("collapse-3");
     cy.get("[data-cy=controls-FormLoop]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
     });
@@ -140,7 +140,7 @@ describe("Device Visiblility Inspector", () => {
   });
   it("Verify if a FormMultiColumn has device visiblility settings", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-2");
+    cy.openAcordeon("collapse-3");
     cy.get("[data-cy=controls-FormMultiColumn]").drag(
       "[data-cy=screen-drop-zone]",
       { position: "bottom" }
@@ -159,7 +159,7 @@ describe("Device Visiblility Inspector", () => {
   });
   it("Verify if a FormNestedScreen has device visiblility settings", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-2");
+    cy.openAcordeon("collapse-3");
     cy.get("[data-cy=controls-FormNestedScreen]").drag(
       "[data-cy=screen-drop-zone]",
       { position: "bottom" }
@@ -178,7 +178,7 @@ describe("Device Visiblility Inspector", () => {
   });
   it("Verify if a FormButton has device visiblility settings", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormButton]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
     });
@@ -196,7 +196,7 @@ describe("Device Visiblility Inspector", () => {
   });
   it("Verify if a FormRecordList has device visiblility settings", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-2");
+    cy.openAcordeon("collapse-3");
     cy.get("[data-cy=controls-FormRecordList]").drag(
       "[data-cy=screen-drop-zone]",
       { position: "bottom" }
@@ -215,7 +215,7 @@ describe("Device Visiblility Inspector", () => {
   });
   it("Verify if a FormHtmlViewer has device visiblility settings", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-2");
+    cy.openAcordeon("collapse-3");
     cy.get("[data-cy=controls-FormHtmlViewer]").drag(
       "[data-cy=screen-drop-zone]",
       { position: "bottom" }
@@ -234,7 +234,7 @@ describe("Device Visiblility Inspector", () => {
   });
   it("Verify if a FormSelectList has device visiblility settings", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormSelectList]").drag(
       "[data-cy=screen-drop-zone]",
       { position: "bottom" }
@@ -253,7 +253,7 @@ describe("Device Visiblility Inspector", () => {
   });
   it("Verify if a FormTextArea has device visiblility settings", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormTextArea]").drag(
       "[data-cy=screen-drop-zone]",
       { position: "bottom" }
@@ -272,7 +272,7 @@ describe("Device Visiblility Inspector", () => {
   });
   it("Enabled device visiblility", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
     });
@@ -305,7 +305,7 @@ describe("Device Visiblility Inspector", () => {
   });
   it("Disabled device visiblility", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
     });
@@ -350,7 +350,7 @@ describe("Device Visiblility Inspector", () => {
     cy.visit("/");
     // Step 1: Add Loop
     addControl("Loop");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
 
     // Step 2: Add Line input inside the loop
     addControlInsideLoop(1, nodeControls.formInput);
@@ -414,8 +414,8 @@ describe("Device Visiblility Inspector", () => {
 
   it("Verify Device Visibility of controls inside a table", () => {
     cy.visit("/");
+    cy.openAcordeon("collapse-3");
     cy.openAcordeon("collapse-2");
-    cy.openAcordeon("collapse-1");
     // Step 1: Add Loop
     addControl("Multicolumn / Table");
 
@@ -447,8 +447,8 @@ describe("Device Visiblility Inspector", () => {
 
   it("Verify Device Visibility of controls inside a table mobile", () => {
     cy.visit("/");
+    cy.openAcordeon("collapse-3");
     cy.openAcordeon("collapse-2");
-    cy.openAcordeon("collapse-1");
     // Step 1: Add Table
     addControl("Multicolumn / Table");
 
diff --git a/tests/e2e/specs/FileUpload.spec.js b/tests/e2e/specs/FileUpload.spec.js
index caa23f49e..7b328549a 100644
--- a/tests/e2e/specs/FileUpload.spec.js
+++ b/tests/e2e/specs/FileUpload.spec.js
@@ -1,7 +1,7 @@
 describe("File Upload", () => {
   it("Automatically sets a variable name", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-5");
+    cy.openAcordeon("collapse-6");
     cy.get("[data-cy=controls-FileUpload]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
     });
@@ -18,7 +18,7 @@ describe("File Upload", () => {
 
   it("Disables when task is self service", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-5");
+    cy.openAcordeon("collapse-6");
     cy.window().then((win) => {
       win.ProcessMaker.isSelfService = true;
     });
diff --git a/tests/e2e/specs/FormImage.spec.js b/tests/e2e/specs/FormImage.spec.js
index 396944ad9..4cfcea067 100644
--- a/tests/e2e/specs/FormImage.spec.js
+++ b/tests/e2e/specs/FormImage.spec.js
@@ -1,7 +1,7 @@
 describe("Form Image", () => {
   it("Upload image to show", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-2");
+    cy.openAcordeon("collapse-3");
     cy.get("[data-cy=controls-FormImage]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
     });
@@ -22,7 +22,7 @@ describe("Form Image", () => {
 
   it("Image by variable", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-2");
+    cy.openAcordeon("collapse-3");
     cy.get("[data-cy=controls-FormImage]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
     });
diff --git a/tests/e2e/specs/FormInput.spec.js b/tests/e2e/specs/FormInput.spec.js
index 27221e4b5..3c24aa606 100644
--- a/tests/e2e/specs/FormInput.spec.js
+++ b/tests/e2e/specs/FormInput.spec.js
@@ -1,7 +1,7 @@
 describe("Form Input", () => {
   const visitAndOpenAcordeon = () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
   };
 
   const dragFormInput = () => {
diff --git a/tests/e2e/specs/FormSelectList.spec.js b/tests/e2e/specs/FormSelectList.spec.js
index 0da8a8dfe..e54e44ca2 100644
--- a/tests/e2e/specs/FormSelectList.spec.js
+++ b/tests/e2e/specs/FormSelectList.spec.js
@@ -1,7 +1,7 @@
 describe("Form Select List", () => {
   beforeEach(() => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     // Add loop control
     cy.get("[data-cy=controls-FormSelectList]").drag(
       "[data-cy=screen-drop-zone]",
diff --git a/tests/e2e/specs/FormTextArea.spec.js b/tests/e2e/specs/FormTextArea.spec.js
index 6f443e5fa..d8dd1a0ad 100644
--- a/tests/e2e/specs/FormTextArea.spec.js
+++ b/tests/e2e/specs/FormTextArea.spec.js
@@ -1,7 +1,7 @@
 describe("Form Text Area Field", () => {
   it("Default properties", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormTextArea]").drag(
       "[data-cy=screen-drop-zone]",
       { position: "bottom" }
@@ -17,7 +17,7 @@ describe("Form Text Area Field", () => {
   });
   it("Variable properties", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormTextArea]").drag(
       "[data-cy=screen-drop-zone]",
       { position: "bottom" }
@@ -37,7 +37,7 @@ describe("Form Text Area Field", () => {
   });
   it("Read Only", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormTextArea]").drag(
       "[data-cy=screen-drop-zone]",
       { position: "bottom" }
@@ -58,7 +58,7 @@ describe("Form Text Area Field", () => {
   // Configuration
   it("Placeholder", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormTextArea]").drag(
       "[data-cy=screen-drop-zone]",
       { position: "bottom" }
@@ -75,7 +75,7 @@ describe("Form Text Area Field", () => {
   });
   it("Helper Text", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormTextArea]").drag(
       "[data-cy=screen-drop-zone]",
       { position: "bottom" }
@@ -91,7 +91,7 @@ describe("Form Text Area Field", () => {
   });
   it("Rich Text", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormTextArea]").drag(
       "[data-cy=screen-drop-zone]",
       { position: "bottom" }
@@ -107,7 +107,7 @@ describe("Form Text Area Field", () => {
   });
   it("Rows", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormTextArea]").drag(
       "[data-cy=screen-drop-zone]",
       { position: "bottom" }
@@ -124,7 +124,7 @@ describe("Form Text Area Field", () => {
   });
   it("Default Value", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormTextArea]").drag(
       "[data-cy=screen-drop-zone]",
       { position: "bottom" }
@@ -141,7 +141,7 @@ describe("Form Text Area Field", () => {
   });
   it("CSS Selector Name", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormTextArea]").drag(
       "[data-cy=screen-drop-zone]",
       { position: "bottom" }
@@ -159,7 +159,7 @@ describe("Form Text Area Field", () => {
   });
   it("Aria Label", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormTextArea]").drag(
       "[data-cy=screen-drop-zone]",
       { position: "bottom" }
@@ -176,7 +176,7 @@ describe("Form Text Area Field", () => {
   });
   it("Tab Order", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormTextArea]").drag(
       "[data-cy=screen-drop-zone]",
       { position: "bottom" }
diff --git a/tests/e2e/specs/Loop.spec.js b/tests/e2e/specs/Loop.spec.js
index 11a54de3f..018e9ee12 100644
--- a/tests/e2e/specs/Loop.spec.js
+++ b/tests/e2e/specs/Loop.spec.js
@@ -1,7 +1,7 @@
 describe("Loop control", () => {
   it("Input inside loop", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-2");
+    cy.openAcordeon("collapse-3");
     // Add loop control
     cy.get("[data-cy=controls-FormLoop]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
@@ -12,7 +12,7 @@ describe("Loop control", () => {
     cy.get("[data-cy=inspector-add]").click();
 
     // Add input to loop
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormInput]").drag(
       "[data-cy=screen-element-container] .column-draggable div",
       { position: "bottom" }
@@ -75,7 +75,7 @@ describe("Loop control", () => {
 
   it("Verify validation on visible fields", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-2");
+    cy.openAcordeon("collapse-3");
     // Add loop control
     cy.get("[data-cy=controls-FormLoop]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
@@ -85,7 +85,7 @@ describe("Loop control", () => {
     cy.get("[data-cy=inspector-source]").select("existing");
 
     // Add input to loop
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormInput]").drag(
       "[data-cy=screen-element-container] .column-draggable div",
       { position: "bottom" }
@@ -161,7 +161,7 @@ describe("Loop control", () => {
     cy.on("window:alert", (msg) => (alert = msg));
 
     // Add loop control
-    cy.openAcordeon("collapse-2");
+    cy.openAcordeon("collapse-3");
     cy.get("[data-cy=controls-FormLoop]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
     });
@@ -181,7 +181,7 @@ describe("Loop control", () => {
     cy.get("[data-cy=inspector-conditionalHide]").clear().type('name != "foo"');
 
     // Add input to multicolumn
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormInput]").drag(
       ".mb-1 > :nth-child(1) > .row > :nth-child(1)",
       { position: "bottom" }
@@ -231,7 +231,7 @@ describe("Loop control", () => {
     cy.on("window:alert", (msg) => (alert = msg));
 
     // Add loop contro
-    cy.openAcordeon("collapse-2");
+    cy.openAcordeon("collapse-3");
     cy.get("[data-cy=controls-FormLoop]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
     });
@@ -252,7 +252,7 @@ describe("Loop control", () => {
     cy.get("[data-cy=inspector-conditionalHide]").clear().type('name != "foo"');
 
     // Add input to nested loop
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormInput]").drag(
       ".m-2 > .column-draggable > div",
       { position: "bottom" }
@@ -345,7 +345,7 @@ describe("Loop control", () => {
     cy.showValidationOnLoad();
     let alert = false;
     cy.on("window:alert", (msg) => (alert = msg));
-    cy.openAcordeon("collapse-2");
+    cy.openAcordeon("collapse-3");
 
     // Add loop control
     cy.get("[data-cy=controls-FormLoop]").drag("[data-cy=screen-drop-zone]", {
@@ -371,7 +371,7 @@ describe("Loop control", () => {
     cy.get("[data-cy=inspector-conditionalHide]").clear().type('name != "foo"');
 
     // Add submit button
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormButton]")
       .contains("Submit Button")
       .drag("[data-cy=screen-element-container]", { position: "bottom" });
diff --git a/tests/e2e/specs/MediaQuery.spec.js b/tests/e2e/specs/MediaQuery.spec.js
index c22e1943c..d4ed1fe2f 100644
--- a/tests/e2e/specs/MediaQuery.spec.js
+++ b/tests/e2e/specs/MediaQuery.spec.js
@@ -9,7 +9,7 @@ describe("Media Query CSS", () => {
   before(() => {
     // run these tests as if in a desktop
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
     });
diff --git a/tests/e2e/specs/MultiColumn.spec.js b/tests/e2e/specs/MultiColumn.spec.js
index 378387748..654975b89 100644
--- a/tests/e2e/specs/MultiColumn.spec.js
+++ b/tests/e2e/specs/MultiColumn.spec.js
@@ -1,8 +1,8 @@
 describe("MultiColumns", () => {
   it("Configure using JSON", () => {
     cy.visit("/");
+    cy.openAcordeon("collapse-3");
     cy.openAcordeon("collapse-2");
-    cy.openAcordeon("collapse-1");
     cy.get("[data-cy=controls-FormMultiColumn]").drag(
       "[data-cy=screen-drop-zone]",
       { position: "bottom" }
@@ -55,7 +55,7 @@ describe("MultiColumns", () => {
 
   it("Configure using columns configuration", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-2");
+    cy.openAcordeon("collapse-3");
     cy.get("[data-cy=controls-FormMultiColumn]").drag(
       "[data-cy=screen-drop-zone]",
       { position: "bottom" }
@@ -93,7 +93,7 @@ describe("MultiColumns", () => {
     );
     cy.get("[data-cy=inspector-add-column-width]").clear().type("8");
     cy.get("[data-cy=inspector-add-column-modal] button.btn-primary").click();
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormInput]").drag(
       "[data-cy=screen-element-container] .column-draggable:empty"
     );
diff --git a/tests/e2e/specs/NestedScreen.spec.js b/tests/e2e/specs/NestedScreen.spec.js
index 96c91524f..b5eee604a 100644
--- a/tests/e2e/specs/NestedScreen.spec.js
+++ b/tests/e2e/specs/NestedScreen.spec.js
@@ -80,7 +80,7 @@ describe("Nested screen", () => {
 
   it("Without a variable defined", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-2");
+    cy.openAcordeon("collapse-3");
     cy.get("[data-cy=controls-FormNestedScreen]").drag(
       "[data-cy=screen-drop-zone]",
       { position: "bottom" }
diff --git a/tests/e2e/specs/Pagination.spec.js b/tests/e2e/specs/Pagination.spec.js
index 00f285903..d982f7b4e 100644
--- a/tests/e2e/specs/Pagination.spec.js
+++ b/tests/e2e/specs/Pagination.spec.js
@@ -56,8 +56,8 @@ const data = {
 
 beforeEach(() => {
   cy.visit("/");
+  cy.openAcordeon("collapse-3");
   cy.openAcordeon("collapse-2");
-  cy.openAcordeon("collapse-1");
   cy.wait(200);
   cy.get("[data-cy=controls-FormRecordList]").drag(
     "[data-cy=screen-drop-zone]",
diff --git a/tests/e2e/specs/ResponsivePreview.spec.js b/tests/e2e/specs/ResponsivePreview.spec.js
index 01573e5fc..6cf1980b8 100644
--- a/tests/e2e/specs/ResponsivePreview.spec.js
+++ b/tests/e2e/specs/ResponsivePreview.spec.js
@@ -10,7 +10,7 @@ describe("Responsive Preview test", () => {
 
   beforeEach(() => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get(controlInputSelector).drag(screenDropZoneSelector, {
       position: "bottom"
     });
diff --git a/tests/e2e/specs/RichText.spec.js b/tests/e2e/specs/RichText.spec.js
index 46c701651..19fafecc4 100644
--- a/tests/e2e/specs/RichText.spec.js
+++ b/tests/e2e/specs/RichText.spec.js
@@ -1,7 +1,7 @@
 describe("Rich Text control", () => {
   it("Rich text with mustache", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-2");
+    cy.openAcordeon("collapse-3");
     cy.get("[data-cy=controls-FormHtmlViewer]").drag(
       "[data-cy=screen-drop-zone]",
       { position: "bottom" }
@@ -21,7 +21,7 @@ describe("Rich Text control", () => {
 
   it("Rich text render HTML from a Variable", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-2");
+    cy.openAcordeon("collapse-3");
     cy.get("[data-cy=controls-FormHtmlViewer]").drag(
       "[data-cy=screen-drop-zone]",
       { position: "bottom" }
diff --git a/tests/e2e/specs/ScreenWarnings.spec.js b/tests/e2e/specs/ScreenWarnings.spec.js
index 57851014c..43e71d2a2 100644
--- a/tests/e2e/specs/ScreenWarnings.spec.js
+++ b/tests/e2e/specs/ScreenWarnings.spec.js
@@ -18,7 +18,7 @@ describe("Screen Warnings", () => {
   });
 
   it("Use script warning", () => {
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
     });
diff --git a/tests/e2e/specs/SelectListDependentCollection.spec.js b/tests/e2e/specs/SelectListDependentCollection.spec.js
index 9bd71508d..b4b0a1683 100644
--- a/tests/e2e/specs/SelectListDependentCollection.spec.js
+++ b/tests/e2e/specs/SelectListDependentCollection.spec.js
@@ -79,7 +79,7 @@ describe("select list dependent collection", () => {
   });
 
   it("Configure collection select list", () => {
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormSelectList]").drag(
       "[data-cy=screen-drop-zone]",
       { position: "bottom" }
diff --git a/tests/e2e/specs/UndoRedo.spec.js b/tests/e2e/specs/UndoRedo.spec.js
index 803bd13ca..604a78b60 100644
--- a/tests/e2e/specs/UndoRedo.spec.js
+++ b/tests/e2e/specs/UndoRedo.spec.js
@@ -1,7 +1,7 @@
 describe("Undo and Redo", () => {
   it("Can Undo", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
     });
@@ -14,7 +14,7 @@ describe("Undo and Redo", () => {
 
   it("Can Redo", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
     });
diff --git a/tests/e2e/specs/VariableNames.js b/tests/e2e/specs/VariableNames.js
index 7834bce9c..0505431f9 100644
--- a/tests/e2e/specs/VariableNames.js
+++ b/tests/e2e/specs/VariableNames.js
@@ -1,7 +1,7 @@
 describe("Default values", () => {
   it("Variable names with dots 2 levels", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
     });
@@ -16,7 +16,7 @@ describe("Default values", () => {
   });
   it("Variable names with dots 3 levels", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
     });
@@ -36,7 +36,7 @@ describe("Default values", () => {
   });
   it("Variable names with dots and one attribute same as the name", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
     });
diff --git a/tests/e2e/specs/VisibilityRule.spec.js b/tests/e2e/specs/VisibilityRule.spec.js
index b02b05975..76254f7b6 100644
--- a/tests/e2e/specs/VisibilityRule.spec.js
+++ b/tests/e2e/specs/VisibilityRule.spec.js
@@ -2,7 +2,7 @@ describe("Default values", () => {
   it("Check visible", () => {
     cy.visit("/");
     cy.setPreviewDataInput({ name: "world" });
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
     });
@@ -17,7 +17,7 @@ describe("Default values", () => {
   it("Check hidden", () => {
     cy.visit("/");
     cy.setPreviewDataInput({ name: "" });
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
     });
@@ -32,7 +32,7 @@ describe("Default values", () => {
   it("Check dynamic visibility rule", () => {
     cy.visit("/");
     cy.setPreviewDataInput({ name: "" });
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
     });
diff --git a/tests/e2e/specs/Watchers.spec.js b/tests/e2e/specs/Watchers.spec.js
index d7a064ba2..b64d295ea 100644
--- a/tests/e2e/specs/Watchers.spec.js
+++ b/tests/e2e/specs/Watchers.spec.js
@@ -64,7 +64,7 @@ describe("Watchers", () => {
 
   it.skip("CRUD of watchers", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
     });
@@ -144,7 +144,7 @@ describe("Watchers", () => {
   });
   it("Test cancel", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
     });
@@ -161,13 +161,13 @@ describe("Watchers", () => {
   });
   it("Test variables in multi columns", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-2");
+    cy.openAcordeon("collapse-3");
     cy.get("[data-cy=controls-FormMultiColumn]").drag(
       "[data-cy=screen-drop-zone]",
       { position: "bottom" }
     );
     cy.get("[data-cy=screen-element-container]").click();
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormInput]").drag(
       "[data-cy=screen-element-container] .column-draggable",
       { position: "bottom" }
@@ -181,7 +181,7 @@ describe("Watchers", () => {
 
   it("Test variables in nested screens", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-2");
+    cy.openAcordeon("collapse-3");
     cy.get("[data-cy=controls-FormNestedScreen]").drag(
       "[data-cy=screen-drop-zone]",
       { position: "bottom" }
@@ -202,7 +202,7 @@ describe("Watchers", () => {
 
   it("Create duplicated properties", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
     });
@@ -265,7 +265,7 @@ describe("Watchers", () => {
     );
 
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
     });
@@ -349,7 +349,7 @@ describe("Watchers", () => {
     );
 
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
     });
@@ -408,7 +408,7 @@ describe("Watchers", () => {
     });
 
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
     });
@@ -557,7 +557,7 @@ describe("Watchers", () => {
   });
   it("Focuses the first field that has an error", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
     });
diff --git a/tests/e2e/specs/WatchersBypass.spec.js b/tests/e2e/specs/WatchersBypass.spec.js
index 4cf91e60c..77913d3f5 100644
--- a/tests/e2e/specs/WatchersBypass.spec.js
+++ b/tests/e2e/specs/WatchersBypass.spec.js
@@ -74,7 +74,7 @@ describe("Watchers", () => {
 
   Cypress.Commands.add('setupFormInput', (inputName) => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", { position: "bottom" });
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-element-container]", { position: "top" });
     cy.get("[data-cy=screen-element-container]").last().click();
diff --git a/tests/e2e/specs/WrongConfigurationErrors.js b/tests/e2e/specs/WrongConfigurationErrors.js
index aa0e9d032..56f3a1f7f 100644
--- a/tests/e2e/specs/WrongConfigurationErrors.js
+++ b/tests/e2e/specs/WrongConfigurationErrors.js
@@ -6,7 +6,7 @@ describe.skip("Wrong Configuration Errors", () => {
         cy.stub(win.console, "error").as("consoleError");
       }
     });
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
     });
@@ -27,7 +27,7 @@ describe.skip("Wrong Configuration Errors", () => {
         cy.stub(win.console, "error").as("consoleError");
       }
     });
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
     });
diff --git a/tests/e2e/support/commands.js b/tests/e2e/support/commands.js
index 8e833dc02..cf63181a8 100644
--- a/tests/e2e/support/commands.js
+++ b/tests/e2e/support/commands.js
@@ -288,9 +288,9 @@ Cypress.Commands.add("openAcordeon", (name) => {
 });
 
 Cypress.Commands.add("openAllAcordeon", () => {
+  cy.openAcordeon("collapse-6");
   cy.openAcordeon("collapse-5");
   cy.openAcordeon("collapse-4");
   cy.openAcordeon("collapse-3");
   cy.openAcordeon("collapse-2");
-  cy.openAcordeon("collapse-1");
 });

From bf67ef46563f6d825325de3050cbadfab3639eeb Mon Sep 17 00:00:00 2001
From: Rodrigo Quelca <rodrigo@processmaker.com>
Date: Tue, 10 Sep 2024 09:30:51 -0400
Subject: [PATCH 05/46] update open acordeon clipboard

---
 tests/e2e/specs/ClipboardControl.spec.js | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/tests/e2e/specs/ClipboardControl.spec.js b/tests/e2e/specs/ClipboardControl.spec.js
index 1da9ea783..9d4ca31de 100644
--- a/tests/e2e/specs/ClipboardControl.spec.js
+++ b/tests/e2e/specs/ClipboardControl.spec.js
@@ -7,7 +7,10 @@ describe("Add Clipboard Section to Control Menu", () => {
     // Step 1: Navigate to the homepage
     cy.visit("/");
 
-    // Step 2: Verify that the Clipboard section is visible in the control menu
+    // Step 2: Open the clipboard acordeon
+    cy.openAcordeon("collapse-1");
+
+    // Step 3: Verify that the Clipboard section is visible in the control menu
     cy.contains("Clipboard").should("be.visible");
   });
 
@@ -18,8 +21,8 @@ describe("Add Clipboard Section to Control Menu", () => {
     // Step 1: Navigate to the homepage
     cy.visit("/");
 
-    // Step 2: Open all accordions in the control menu
-    cy.openAllAcordeon();
+    // Step 2: Open the clipboard acordeon
+    cy.openAcordeon("collapse-1");
 
     // Step 3: Verify that the Clipboard accordion exists and is visible
     cy.get('[data-cy="controls-Clipboard"]').should("exist").should("be.visible");
@@ -32,8 +35,8 @@ describe("Add Clipboard Section to Control Menu", () => {
     // Step 1: Navigate to the homepage
     cy.visit("/");
 
-    // Step 2: Open all accordions in the control menu
-    cy.openAllAcordeon();
+    // Step 2: Open the clipboard acordeon
+    cy.openAcordeon("collapse-1");
 
     // Step 3: Click to open the Clipboard accordion
     cy.get('[data-cy="controls-Clipboard"]').click();

From c07a205ec14576bb2523d7313f554ec90dfae587 Mon Sep 17 00:00:00 2001
From: Rodrigo Quelca <rodrigo@processmaker.com>
Date: Tue, 10 Sep 2024 09:32:47 -0400
Subject: [PATCH 06/46] update openAllAcordeon cypress comman and add the
 clipboard acordeon

---
 tests/e2e/support/commands.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tests/e2e/support/commands.js b/tests/e2e/support/commands.js
index cf63181a8..81ddadc07 100644
--- a/tests/e2e/support/commands.js
+++ b/tests/e2e/support/commands.js
@@ -293,4 +293,5 @@ Cypress.Commands.add("openAllAcordeon", () => {
   cy.openAcordeon("collapse-4");
   cy.openAcordeon("collapse-3");
   cy.openAcordeon("collapse-2");
+  cy.openAcordeon("collapse-1");
 });

From fc790d5cba41b8fc3084fdcdcccf7752b6a9babe Mon Sep 17 00:00:00 2001
From: Rodrigo Quelca <rodrigo@processmaker.com>
Date: Tue, 10 Sep 2024 09:50:57 -0400
Subject: [PATCH 07/46] fix WatchersDragAndDrop.spec and update acordeon index

---
 tests/e2e/specs/WatchersDragAndDrop.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/e2e/specs/WatchersDragAndDrop.spec.js b/tests/e2e/specs/WatchersDragAndDrop.spec.js
index 628ffc28b..f8d881802 100644
--- a/tests/e2e/specs/WatchersDragAndDrop.spec.js
+++ b/tests/e2e/specs/WatchersDragAndDrop.spec.js
@@ -143,7 +143,7 @@ describe('Watchers list Drag&Drop', () => {
       },
     });
 
-    cy.openAcordeon('collapse-1');
+    cy.openAcordeon('collapse-2');
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', {
       position: 'bottom',
     });

From bb94a382587fd7a7958a94f7adb671a02ca9c3e4 Mon Sep 17 00:00:00 2001
From: Rodrigo Quelca <rodrigo@processmaker.com>
Date: Tue, 10 Sep 2024 10:03:37 -0400
Subject: [PATCH 08/46] feature/FOUR-13438: STORY Copy icon now adds to
 clipboard

---
 src/components/ClipboardButton.vue  | 65 +++++++++++++++++++++++++++++
 src/components/vue-form-builder.vue | 46 ++++++++++++++++++--
 2 files changed, 108 insertions(+), 3 deletions(-)
 create mode 100644 src/components/ClipboardButton.vue

diff --git a/src/components/ClipboardButton.vue b/src/components/ClipboardButton.vue
new file mode 100644
index 000000000..b16fa6ead
--- /dev/null
+++ b/src/components/ClipboardButton.vue
@@ -0,0 +1,65 @@
+<template>
+    <!-- Conditionally render buttons based on clipboardContent -->
+    <button
+      v-if="isInClipboard"
+      class="btn btn-sm btn-outline-secondary mr-2"
+      :title="removeTitle"
+      :style="removeButtonStyle"
+      @click="removeFromClipboard"
+    >
+    {{isInClipboard}}
+      <i class="fas fa-minus"></i>
+    </button>
+
+    <button
+      v-else
+      class="btn btn-sm btn-success mr-2"
+      :title="addTitle"
+      @click="addToClipboard(index)"
+    >
+      <i class="fas fa-plus"></i>
+    </button>
+</template>
+
+<script>
+export default {
+  props: {
+    index: {
+      type: Number,
+      required: true,
+    },
+    config: {
+      type: Object,
+      required: true,
+    },
+    isInClipboard: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      addTitle: 'Add to clipboard',
+      removeTitle: 'Remove from clipboard',
+      removeButtonStyle: {
+        backgroundColor: '#FFFFFF',
+      },
+    };
+  },
+
+  methods: {
+    // Method to handle adding to clipboard
+    addToClipboard(index) {
+      this.$emit('addToClipboard', index);
+    },
+    // Method to handle removing from clipboard
+    removeFromClipboard() {
+      this.$emit('remove-from-clipboard');
+    },
+  },
+};
+</script>
+
+<style scoped>
+/* Add any specific styles here */
+</style>
diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 19f127351..7ef965a9e 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -244,6 +244,27 @@
                   />
                   {{ element.config.name || $t("Variable Name") }}
                   <div class="ml-auto">
+                    <clipboard-button
+                      :index="index"
+                      :config="element.config"
+                      :isInClipboard="isInClipboard"
+                      @addToClipboard="addToClipboard"
+                    />
+                    <!-- <button
+                      class="btn btn-sm btn-outline-secondary mr-2"
+                      :title="$t('Remove from clipboard')"
+                       style="background-color: #FFFFFF;"
+                    >
+                      <i class="fas fa-minus" />
+                    </button>
+                    <button
+                      class="btn btn-sm btn-success mr-2"
+                      :title="$t('Add to clipboard')"
+                      @click="addToClipboard(index)"
+                    >
+                      <i class="fas fa-plus" />
+                    </button> -->
+
                     <button
                       class="btn btn-sm btn-secondary mr-2"
                       :title="$t('Copy Control')"
@@ -253,7 +274,7 @@
                     </button>
                     <button
                       class="btn btn-sm btn-danger"
-                      :title="$t('Delete Control')"
+                      :title="$t('Delete Controldddddd')"
                       @click="deleteItem(index)"
                     >
                       <i class="far fa-trash-alt text-light" />
@@ -488,7 +509,7 @@ import MultipleUploadsCheckbox from "./utils/multiple-uploads-checkbox";
 import { formTypes } from "@/global-properties";
 import TabsBar from "./TabsBar.vue";
 import Sortable from './sortable/Sortable.vue';
-
+import ClipboardButton from './ClipboardButton.vue';
 // To include another language in the Validator with variable processmaker
 const globalObject = typeof window === "undefined" ? global : window;
 
@@ -555,6 +576,7 @@ export default {
     ...renderer,
     PagesDropdown,
     Sortable,
+    ClipboardButton,
   },
   mixins: [HasColorProperty, testing],
   props: {
@@ -634,6 +656,9 @@ export default {
     };
   },
   computed: {
+    isInClipboard() {
+      return this.config[this.currentPage].items[0].isInClipboard === true;
+    },
     sortedPages() {
       return [...this.config].sort((a, b) => a.order - b.order);
     },
@@ -710,10 +735,12 @@ export default {
   watch: {
     config: {
       handler() {
+        debugger;
         this.checkForCaptchaInLoops();
         this.$emit("change", this.config);
       },
-      deep: true
+      deep: true,
+       immediate: true,
     },
     currentPage() {
       this.inspect();
@@ -1162,6 +1189,19 @@ export default {
       const duplicate = _.cloneDeep(this.config[this.currentPage].items[index]);
       this.config[this.currentPage].items.push(duplicate);
     },
+    addToClipboard(index){
+      console.log('index', index);
+      console.log('isInClipboard', this.config[this.currentPage].items[index]);
+
+      // const duplicate = _.cloneDeep(this.config[this.currentPage].items[index]);
+      
+      const item  = this.config[this.currentPage].items[index];
+      this.config[this.currentPage].items[index].config['isInClipboard'] = true;
+      console.log('items', this.config[this.currentPage].items[index]);
+      // this.updateState();
+      // this.config[this.currentPage].items.push(duplicate);
+    },
+
     openEditPageModal(index) {
       this.editPageIndex = index;
       const pageName = this.config[index].name;

From 3476dfdf4eb4a2b56f01fb85bcb4aff757d10081 Mon Sep 17 00:00:00 2001
From: Rodrigo Quelca <rodrigo@processmaker.com>
Date: Tue, 10 Sep 2024 12:23:13 -0400
Subject: [PATCH 09/46] add store

---
 src/components/ClipboardButton.vue   |  1 -
 src/components/index.js              |  4 ++-
 src/components/vue-form-builder.vue  | 27 +++---------------
 src/store/modules/clipboardModule.js | 41 ++++++++++++++++++++++++++++
 4 files changed, 48 insertions(+), 25 deletions(-)
 create mode 100644 src/store/modules/clipboardModule.js

diff --git a/src/components/ClipboardButton.vue b/src/components/ClipboardButton.vue
index b16fa6ead..08b4488be 100644
--- a/src/components/ClipboardButton.vue
+++ b/src/components/ClipboardButton.vue
@@ -7,7 +7,6 @@
       :style="removeButtonStyle"
       @click="removeFromClipboard"
     >
-    {{isInClipboard}}
       <i class="fas fa-minus"></i>
     </button>
 
diff --git a/src/components/index.js b/src/components/index.js
index ac4064f65..bc76eb0d8 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -29,6 +29,7 @@ import { LRUCache } from "lru-cache";
 import Vuex from "vuex";
 import globalErrorsModule from "../store/modules/globalErrorsModule";
 import undoRedoModule from "../store/modules/undoRedoModule";
+import clipboardModule from "../store/modules/clipboardModule";
 import BasicSearch from "./basic-search.vue";
 import ComputedProperties from "./computed-properties.vue";
 import CustomCSS from "./custom-css.vue";
@@ -167,7 +168,8 @@ export default {
       modules: {
         globalErrorsModule,
         // @todo Improve how to load this module, it is used only in the form builder, not used in the form renderer.
-        undoRedoModule
+        undoRedoModule,
+        clipboardModule
       }
     });
     Vue.mixin({ store });
diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 7ef965a9e..16d4a293c 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -247,24 +247,9 @@
                     <clipboard-button
                       :index="index"
                       :config="element.config"
-                      :isInClipboard="isInClipboard"
+                      :isInClipboard="false"
                       @addToClipboard="addToClipboard"
                     />
-                    <!-- <button
-                      class="btn btn-sm btn-outline-secondary mr-2"
-                      :title="$t('Remove from clipboard')"
-                       style="background-color: #FFFFFF;"
-                    >
-                      <i class="fas fa-minus" />
-                    </button>
-                    <button
-                      class="btn btn-sm btn-success mr-2"
-                      :title="$t('Add to clipboard')"
-                      @click="addToClipboard(index)"
-                    >
-                      <i class="fas fa-plus" />
-                    </button> -->
-
                     <button
                       class="btn btn-sm btn-secondary mr-2"
                       :title="$t('Copy Control')"
@@ -1193,13 +1178,9 @@ export default {
       console.log('index', index);
       console.log('isInClipboard', this.config[this.currentPage].items[index]);
 
-      // const duplicate = _.cloneDeep(this.config[this.currentPage].items[index]);
-      
-      const item  = this.config[this.currentPage].items[index];
-      this.config[this.currentPage].items[index].config['isInClipboard'] = true;
-      console.log('items', this.config[this.currentPage].items[index]);
-      // this.updateState();
-      // this.config[this.currentPage].items.push(duplicate);
+      const duplicate = _.cloneDeep(this.config[this.currentPage].items[index]);
+      this.$store.dispatch("clipboardModule/addToClipboard", duplicate);
+      console.log('clipboardModule/clipboardItems', this.$store.getters["clipboardModule/clipboardItems"])
     },
 
     openEditPageModal(index) {
diff --git a/src/store/modules/clipboardModule.js b/src/store/modules/clipboardModule.js
new file mode 100644
index 000000000..0786e3bf1
--- /dev/null
+++ b/src/store/modules/clipboardModule.js
@@ -0,0 +1,41 @@
+const clipboardModule = {
+  namespaced: true,
+  state() {
+    return {
+      clipboard: [],  // Array to store clipboard content
+    };
+  },
+  getters: {
+    clipboardItems: state => state.clipboard,  // Get all clipboard items
+    isInClipboard: state => item => state.clipboard.includes(item),  // Check if item is in clipboard
+  },
+  mutations: {
+    ADD_TO_CLIPBOARD(state, item) {
+      state.clipboard.push(item);  // Add item to the clipboard
+    },
+    REMOVE_FROM_CLIPBOARD(state, item) {
+      state.clipboard = state.clipboard.filter(i => i !== item);  // Remove item from clipboard
+    },
+    CLEAR_CLIPBOARD(state) {
+      state.clipboard = [];  // Clear all clipboard items
+    },
+  },
+  methods: {
+    emitChanges() {
+      window.ProcessMaker.EventBus.$emit("screen-change");
+    }
+  },
+  actions: {
+    addToClipboard({ commit }, item) {
+      commit('ADD_TO_CLIPBOARD', item);  // Call mutation to add item
+    },
+    removeFromClipboard({ commit }, item) {
+      commit('REMOVE_FROM_CLIPBOARD', item);  // Call mutation to remove item
+    },
+    clearClipboard({ commit }) {
+      commit('CLEAR_CLIPBOARD');  // Call mutation to clear the clipboard
+    },
+  },
+};
+
+export default clipboardModule;

From 16452bbdf9e432a170e5b0dbc9f73284d7e35976 Mon Sep 17 00:00:00 2001
From: Rodrigo Quelca <rodrigo@processmaker.com>
Date: Tue, 10 Sep 2024 17:12:42 -0400
Subject: [PATCH 10/46] add Clipboard mixing

---
 package-lock.json                      |  48 ++++++++++-
 package.json                           |   1 +
 src/components/ClipboardButton.vue     |   4 +-
 src/components/editor/loop.vue         |  33 +++++++-
 src/components/editor/multi-column.vue |  34 +++++++-
 src/components/vue-form-builder.vue    |  51 +++++++----
 src/mixins/Clipboard.js                |  58 +++++++++++++
 src/mixins/index.js                    |   1 +
 src/store/modules/clipboardModule.js   | 113 ++++++++++++++++++++++---
 src/store/modules/undoRedoModule.js    |   1 +
 10 files changed, 305 insertions(+), 39 deletions(-)
 create mode 100644 src/mixins/Clipboard.js

diff --git a/package-lock.json b/package-lock.json
index 8d23dc62e..bffdcb148 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "moment-timezone": "^0.5.45",
         "monaco-editor": "^0.34.0",
         "scrollparent": "^2.0.1",
+        "uuid": "^10.0.0",
         "vue-loader": "^15.9.2",
         "vue-monaco": "^0.3.2",
         "vue-simple-uploader": "^0.7.4",
@@ -2224,6 +2225,15 @@
         "node": ">= 6"
       }
     },
+    "node_modules/@cypress/request/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true,
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/@cypress/webpack-preprocessor": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/@cypress/webpack-preprocessor/-/webpack-preprocessor-6.0.1.tgz",
@@ -15371,6 +15381,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/istanbul-lib-processinfo/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true,
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/istanbul-lib-report": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz",
@@ -16454,6 +16473,15 @@
         "node": ">=10.12.0"
       }
     },
+    "node_modules/jest-junit/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true,
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/jest-leak-detector": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-29.7.0.tgz",
@@ -16866,6 +16894,15 @@
         "jest-runner": "^29.3.1"
       }
     },
+    "node_modules/jest-playwright-preset/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true,
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/jest-pnp-resolver": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.3.tgz",
@@ -23722,10 +23759,13 @@
       }
     },
     "node_modules/uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "dev": true,
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
       "bin": {
         "uuid": "dist/bin/uuid"
       }
diff --git a/package.json b/package.json
index bd7f995d4..7f36b265f 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "moment-timezone": "^0.5.45",
     "monaco-editor": "^0.34.0",
     "scrollparent": "^2.0.1",
+    "uuid": "^10.0.0",
     "vue-loader": "^15.9.2",
     "vue-monaco": "^0.3.2",
     "vue-simple-uploader": "^0.7.4",
diff --git a/src/components/ClipboardButton.vue b/src/components/ClipboardButton.vue
index 08b4488be..9ea738e42 100644
--- a/src/components/ClipboardButton.vue
+++ b/src/components/ClipboardButton.vue
@@ -49,11 +49,11 @@ export default {
   methods: {
     // Method to handle adding to clipboard
     addToClipboard(index) {
-      this.$emit('addToClipboard', index);
+      this.$emit('addToClipboard');
     },
     // Method to handle removing from clipboard
     removeFromClipboard() {
-      this.$emit('remove-from-clipboard');
+      this.$emit('removeFromClipboard');
     },
   },
 };
diff --git a/src/components/editor/loop.vue b/src/components/editor/loop.vue
index 1e40e9e66..bcdf48f72 100644
--- a/src/components/editor/loop.vue
+++ b/src/components/editor/loop.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="column-draggable" :selector="config.customCssSelector">
-    <draggable style="min-height: 80px" :list="items" group="controls">
+    <draggable style="min-height: 80px" :list="items" group="controls" @change="onChange">
       <div
         v-for="(element, index) in items"
         :key="index"
@@ -28,6 +28,13 @@
               />
               {{ element.config.name || $t("Variable Name") }}
               <div class="ml-auto">
+                <clipboard-button
+                  :index="index"
+                  :config="element.config"
+                  :isInClipboard="isInClipboard(items[index])"
+                  @addToClipboard="addToClipboard(items[index])"
+                  @removeFromClipboard="removeFromClipboard(items[index])"
+                />
                 <button
                   v-if="isAiSection(element) && aiPreview(element)"
                   class="btn btn-sm btn-primary mr-2"
@@ -83,6 +90,13 @@
               />
               {{ element.config.name || $t("Variable Name") }}
               <div class="ml-auto">
+                <clipboard-button
+                  :index="index"
+                  :config="element.config"
+                  :isInClipboard="isInClipboard(items[index])"
+                  @addToClipboard="addToClipboard(items[index])"
+                  @removeFromClipboard="removeFromClipboard(items[index])"
+                />
                 <button
                   class="btn btn-sm btn-secondary mr-2"
                   :title="$t('Copy Control')"
@@ -136,6 +150,8 @@ import {
   FormTextArea
 } from "@processmaker/vue-form-elements";
 import { HasColorProperty } from "@/mixins";
+import { Clipboard } from "@/mixins";
+import ClipboardButton from '../ClipboardButton.vue';
 import * as renderer from "@/components/renderer";
 
 export default {
@@ -149,9 +165,10 @@ export default {
     FormDatePicker,
     FormHtmlEditor,
     FormHtmlViewer,
+    ClipboardButton,
     ...renderer
   },
-  mixins: [HasColorProperty],
+  mixins: [HasColorProperty, Clipboard],
   props: ["value", "name", "config", "selected", "validationErrors"],
   data() {
     return {
@@ -201,6 +218,18 @@ export default {
       this.items.splice(index, 1);
       this.$emit("update-state");
     },
+    // addToClipboard(index){
+    //   const duplicate = _.cloneDeep(this.items[index]);
+    //   this.$store.dispatch("clipboardModule/addToClipboard", duplicate);
+    // },
+    // removeFromClipboard(index) {
+    //   const item = this.items[index];
+    //   this.$store.dispatch("clipboardModule/removeFromClipboard", item);
+    // },
+    // // Check if the item is in the clipboard
+    // isInClipboard(index) {
+    //   return this.$store.getters["clipboardModule/isInClipboard"](this.items[index]);
+    // },
     duplicateItem(index) {
       const duplicate = _.cloneDeep(this.items[index]);
       this.items.push(duplicate);
diff --git a/src/components/editor/multi-column.vue b/src/components/editor/multi-column.vue
index b6c86f78e..3e23e7d4d 100644
--- a/src/components/editor/multi-column.vue
+++ b/src/components/editor/multi-column.vue
@@ -11,6 +11,7 @@
             :value="items[index]"
             group="controls"
             @input="updateContainerConfig($event, index)"
+            @change="onChange"
           >
             <div
               v-for="(element, row) in item"
@@ -43,6 +44,13 @@
                     />
                     {{ element.config.name || $t("Variable Name") }}
                     <div class="ml-auto">
+                      <clipboard-button
+                        :index="index"
+                        :config="element.config"
+                        :isInClipboard="isInClipboard(items[row][index])"
+                        @addToClipboard="addToClipboard(items[row][index])"
+                        @removeFromClipboard="removeFromClipboard(items[row][index])"
+                      />
                       <button
                         v-if="isAiSection(element) && aiPreview(element)"
                         class="btn btn-sm btn-primary mr-2"
@@ -100,6 +108,13 @@
                     />
                     {{ element.config.name || $t("Variable Name") }}
                     <div class="ml-auto">
+                      <clipboard-button
+                        :index="index"
+                        :config="element.config"
+                        :isInClipboard="isInClipboard(items[row][index])"
+                        @addToClipboard="addToClipboard(items[row][index])"
+                        @removeFromClipboard="removeFromClipboard(items[row][index])"
+                      />
                       <button
                         class="btn btn-sm btn-secondary mr-2"
                         :title="$t('Copy Control')"
@@ -156,8 +171,9 @@ import {
   FormTextArea
 } from "@processmaker/vue-form-elements";
 import { HasColorProperty } from "@/mixins";
+import { Clipboard } from "@/mixins";
 import * as renderer from "@/components/renderer";
-
+import ClipboardButton from '../ClipboardButton.vue';
 const defaultColumnWidth = 1;
 
 export default {
@@ -171,9 +187,10 @@ export default {
     FormDatePicker,
     FormHtmlEditor,
     FormHtmlViewer,
+    ClipboardButton,
     ...renderer
   },
-  mixins: [HasColorProperty],
+  mixins: [HasColorProperty, Clipboard],
   props: ["value", "name", "config", "selected", "validationErrors"],
   data() {
     return {
@@ -223,6 +240,19 @@ export default {
     hasError(element) {
       return this.validationErrors.some(({ item }) => item === element);
     },
+    // addToClipboard(index, col){
+    //   const duplicate = _.cloneDeep(this.items[col][index]);
+    //   this.$store.dispatch("clipboardModule/addToClipboard", duplicate);
+    // },
+    // removeFromClipboard(index, col) {
+    //   const item = this.items[col][index];
+    //   this.$store.dispatch("clipboardModule/removeFromClipboard", item);
+    // },
+    // // Check if the item is in the clipboard
+    // isInClipboard(index, col) {
+    //   return this.$store.getters["clipboardModule/isInClipboard"](this.items[col][index]);
+    // },
+    
     updateContainerConfig(config, index) {
       this.items[index] = config;
       this.$emit("update-state");
diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 16d4a293c..1da0c1c42 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -157,6 +157,7 @@
               swapThreshold: 0.5
             }"
             @input="updateConfig"
+            @change="onChange"
           >
             <div
               v-for="(element, index) in config[tabPage].items"
@@ -189,6 +190,13 @@
                   />
                   {{ element.config.name || element.label || $t("Field Name") }}
                   <div class="ml-auto">
+                    <clipboard-button
+                      :index="index"
+                      :config="element.config"
+                      :isInClipboard="isInClipboard(config[currentPage].items[index])"
+                      @addToClipboard="addToClipboard(config[currentPage].items[index])"
+                      @removeFromClipboard="removeFromClipboard(config[currentPage].items[index])"
+                    />
                     <button
                       v-if="isAiSection(element) && aiPreview(element)"
                       data-test="apply-ai-btn"
@@ -247,8 +255,9 @@
                     <clipboard-button
                       :index="index"
                       :config="element.config"
-                      :isInClipboard="false"
-                      @addToClipboard="addToClipboard"
+                      :isInClipboard="isInClipboard(config[currentPage].items[index])"
+                      @addToClipboard="addToClipboard(config[currentPage].items[index])"
+                      @removeFromClipboard="removeFromClipboard(config[currentPage].items[index])"
                     />
                     <button
                       class="btn btn-sm btn-secondary mr-2"
@@ -480,6 +489,7 @@ import {
 } from "@processmaker/vue-form-elements";
 import Validator from "@chantouchsek/validatorjs";
 import HasColorProperty from "../mixins/HasColorProperty";
+import OnChangeDraggable from "../mixins/Clipboard";
 import * as renderer from "./renderer";
 import * as inspector from "./inspector";
 import "@processmaker/vue-form-elements/dist/vue-form-elements.css";
@@ -563,7 +573,7 @@ export default {
     Sortable,
     ClipboardButton,
   },
-  mixins: [HasColorProperty, testing],
+  mixins: [HasColorProperty, testing, OnChangeDraggable],
   props: {
     renderControls: {
       type: Boolean,
@@ -641,9 +651,11 @@ export default {
     };
   },
   computed: {
-    isInClipboard() {
-      return this.config[this.currentPage].items[0].isInClipboard === true;
+    // Get clipboard items from Vuex store
+    clipboardItems() {
+      return this.$store.getters["clipboardModule/clipboardItems"];
     },
+    
     sortedPages() {
       return [...this.config].sort((a, b) => a.order - b.order);
     },
@@ -720,12 +732,10 @@ export default {
   watch: {
     config: {
       handler() {
-        debugger;
         this.checkForCaptchaInLoops();
         this.$emit("change", this.config);
       },
       deep: true,
-       immediate: true,
     },
     currentPage() {
       this.inspect();
@@ -1174,15 +1184,24 @@ export default {
       const duplicate = _.cloneDeep(this.config[this.currentPage].items[index]);
       this.config[this.currentPage].items.push(duplicate);
     },
-    addToClipboard(index){
-      console.log('index', index);
-      console.log('isInClipboard', this.config[this.currentPage].items[index]);
-
-      const duplicate = _.cloneDeep(this.config[this.currentPage].items[index]);
-      this.$store.dispatch("clipboardModule/addToClipboard", duplicate);
-      console.log('clipboardModule/clipboardItems', this.$store.getters["clipboardModule/clipboardItems"])
-    },
-
+    // addToClipboard(index){
+    //   console.log('index', index);
+    //   console.log('isInClipboard', this.config[this.currentPage].items[index]);
+
+    //   const duplicate = _.cloneDeep(this.config[this.currentPage].items[index]);
+    //   this.$store.dispatch("clipboardModule/addToClipboard", duplicate);
+    //   console.log('clipboardItems', this.clipboardItems);
+    //   // console.log('isInClipboard', this.isInClipboard);
+    // },
+    // removeFromClipboard(index) {
+    //   console.log('removeFromClipboard', index);
+    //   const item = this.config[this.currentPage].items[index];
+    //   this.$store.dispatch("clipboardModule/removeFromClipboard", item);
+    // },
+    // // Check if the item is in the clipboard
+    // isInClipboard(index) {
+    //   return this.$store.getters["clipboardModule/isInClipboard"](this.config[this.currentPage].items[index]);
+    // },
     openEditPageModal(index) {
       this.editPageIndex = index;
       const pageName = this.config[index].name;
diff --git a/src/mixins/Clipboard.js b/src/mixins/Clipboard.js
new file mode 100644
index 000000000..b4fff3b73
--- /dev/null
+++ b/src/mixins/Clipboard.js
@@ -0,0 +1,58 @@
+import { v4 as uuidv4 } from 'uuid';
+import _ from "lodash";
+
+export default {
+  methods: {
+    /**
+     * Handles the change event, ensuring that the added element has a unique UUID.
+     * 
+     * @param {Object} added - The added item object containing the `element`.
+     * @returns {void}
+     */
+    onChange({ added }) {
+      if (!added || !added.element) {
+        console.error('Invalid item or element passed to onChange');
+        return; // Prevent further execution if the element is invalid
+      }
+      const element = added.element;
+
+      // Ensure element does not already have a UUID or generate a new one if missing
+      if (!element.uuid) {
+        element.uuid = uuidv4(); // Assign a unique identifier to the element
+      } else {
+        console.warn('Element already has a UUID:', element.uuid);
+      }
+    },
+
+    /**
+     * Adds a deep-cloned item to the clipboard, ensuring the original item is unmodified.
+     * 
+     * @param {Object} item - The item to add to the clipboard.
+     * @returns {void}
+     */
+    addToClipboard(item) {
+      const duplicate = _.cloneDeep(item); // Create a deep copy of the item
+      this.$store.dispatch("clipboardModule/addToClipboard", duplicate); // Dispatch action to add item to the Vuex store
+    },
+
+    /**
+     * Removes the specified item from the clipboard.
+     * 
+     * @param {Object} item - The item to remove from the clipboard.
+     * @returns {void}
+     */
+    removeFromClipboard(item) {
+      this.$store.dispatch("clipboardModule/removeFromClipboard", item); // Dispatch action to remove item from the Vuex store
+    },
+
+    /**
+     * Checks if the specified item is currently in the clipboard.
+     * 
+     * @param {Object} item - The item to check.
+     * @returns {Boolean} - Returns true if the item is in the clipboard, otherwise false.
+     */
+    isInClipboard(item) {
+      return this.$store.getters["clipboardModule/isInClipboard"](item); // Use Vuex getter to check if item exists in the clipboard
+    },
+  },
+};
diff --git a/src/mixins/index.js b/src/mixins/index.js
index 99f9da503..9376c9097 100644
--- a/src/mixins/index.js
+++ b/src/mixins/index.js
@@ -18,3 +18,4 @@ export { default as testing } from "./testing";
 export { ValidationMsg, validators } from "./ValidationRules";
 export { default as VisibilityRule } from "./VisibilityRule";
 export { default as watchers } from "./watchers";
+export { default as Clipboard } from "./Clipboard";
\ No newline at end of file
diff --git a/src/store/modules/clipboardModule.js b/src/store/modules/clipboardModule.js
index 0786e3bf1..671f2c07f 100644
--- a/src/store/modules/clipboardModule.js
+++ b/src/store/modules/clipboardModule.js
@@ -1,41 +1,128 @@
+/**
+ * Vuex module for managing clipboard state.
+ */
 const clipboardModule = {
+  /**
+   * Indicates that this module is namespaced, which means
+   * all its state, mutations, actions, and getters will be 
+   * scoped to this module.
+   */
   namespaced: true,
+
+  /**
+   * The state of the clipboard module.
+   * @returns {Object} The initial state of the clipboard.
+   */
   state() {
     return {
       clipboard: [],  // Array to store clipboard content
     };
   },
+
+  /**
+   * Getters provide read-only access to the state.
+   */
   getters: {
-    clipboardItems: state => state.clipboard,  // Get all clipboard items
-    isInClipboard: state => item => state.clipboard.includes(item),  // Check if item is in clipboard
+    /**
+     * Returns all items in the clipboard.
+     * @param {Object} state - The state of the module.
+     * @returns {Array} The array of clipboard items.
+     */
+    clipboardItems: state => state.clipboard,
+
+    /**
+     * Checks if an item with a specific id is present in the clipboard.
+     * @param {Object} state - The state of the module.
+     * @param {Object} item - The item to check (it can contain an id or any unique property).
+     * @returns {boolean} True if the item with the same id is in the clipboard, false otherwise.
+     */
+    isInClipboard: state => item => {
+      if (!item || !item.uuid) {
+        // If the item is invalid or doesn't have an id, return false
+        return false;
+      }
+      return state.clipboard.some(clipboardItem => clipboardItem.uuid === item.uuid);
+    },
   },
+
+  /**
+   * Mutations are used to modify the state.
+   */
   mutations: {
+    /**
+     * Adds an item to the clipboard.
+     * @param {Object} state - The state of the module.
+     * @param {any} item - The item to add.
+     */
     ADD_TO_CLIPBOARD(state, item) {
-      state.clipboard.push(item);  // Add item to the clipboard
+      state.clipboard.push(item);
     },
+
+    /**
+     * Removes a specific item from the clipboard.
+     * @param {Object} state - The state of the module.
+     * @param {any} item - The item to remove.
+     */
     REMOVE_FROM_CLIPBOARD(state, item) {
-      state.clipboard = state.clipboard.filter(i => i !== item);  // Remove item from clipboard
+      if (!item || !item.uuid) {
+        console.error('Item or item id is missing');
+        return;
+      }
+      
+      state.clipboard = state.clipboard.filter(clipboardItem => clipboardItem.uuid !== item.uuid);
     },
+
+    /**
+     * Clears all items from the clipboard.
+     * @param {Object} state - The state of the module.
+     */
     CLEAR_CLIPBOARD(state) {
-      state.clipboard = [];  // Clear all clipboard items
+      state.clipboard = [];
     },
   },
-  methods: {
-    emitChanges() {
-      window.ProcessMaker.EventBus.$emit("screen-change");
-    }
-  },
+
+  /**
+   * Actions are used to commit mutations and can contain asynchronous operations.
+   */
   actions: {
+    /**
+     * Adds an item to the clipboard by committing the corresponding mutation.
+     * @param {Object} context - The context object containing commit.
+     * @param {any} item - The item to add to the clipboard.
+     */
     addToClipboard({ commit }, item) {
-      commit('ADD_TO_CLIPBOARD', item);  // Call mutation to add item
+      commit('ADD_TO_CLIPBOARD', item);
     },
+
+    /**
+     * Removes an item from the clipboard by committing the corresponding mutation.
+     * @param {Object} context - The context object containing commit.
+     * @param {any} item - The item to remove from the clipboard.
+     */
     removeFromClipboard({ commit }, item) {
-      commit('REMOVE_FROM_CLIPBOARD', item);  // Call mutation to remove item
+      commit('REMOVE_FROM_CLIPBOARD', item);
     },
+
+    /**
+     * Clears all items from the clipboard by committing the corresponding mutation.
+     * @param {Object} context - The context object containing commit.
+     */
     clearClipboard({ commit }) {
-      commit('CLEAR_CLIPBOARD');  // Call mutation to clear the clipboard
+      commit('CLEAR_CLIPBOARD');
     },
   },
+
+  /**
+   * Methods are not a standard part of Vuex modules but can be used for custom functionality.
+   */
+  methods: {
+    /**
+     * Emits a custom event using the EventBus.
+     */
+    emitChanges() {
+      window.ProcessMaker.EventBus.$emit("screen-change");
+    }
+  },
 };
 
 export default clipboardModule;
diff --git a/src/store/modules/undoRedoModule.js b/src/store/modules/undoRedoModule.js
index bc9594f34..68d21bc40 100644
--- a/src/store/modules/undoRedoModule.js
+++ b/src/store/modules/undoRedoModule.js
@@ -45,6 +45,7 @@ const undoRedoModule = {
   },
   actions: {
     pushState({ state, getters, commit }, newState) {
+      debugger;
       if (newState.config === getters.currentState) {
         return;
       }

From f7d73cd61d8ad9651dd054a8298d840651ff8294 Mon Sep 17 00:00:00 2001
From: Rodrigo Quelca <rodrigo@processmaker.com>
Date: Tue, 10 Sep 2024 17:22:09 -0400
Subject: [PATCH 11/46] remove commented code and debugger

---
 src/components/editor/loop.vue         | 12 ------------
 src/components/editor/multi-column.vue | 13 -------------
 src/components/vue-form-builder.vue    | 22 ++--------------------
 src/main.js                            |  4 +++-
 src/store/modules/undoRedoModule.js    |  1 -
 5 files changed, 5 insertions(+), 47 deletions(-)

diff --git a/src/components/editor/loop.vue b/src/components/editor/loop.vue
index bcdf48f72..ddaa02a9c 100644
--- a/src/components/editor/loop.vue
+++ b/src/components/editor/loop.vue
@@ -218,18 +218,6 @@ export default {
       this.items.splice(index, 1);
       this.$emit("update-state");
     },
-    // addToClipboard(index){
-    //   const duplicate = _.cloneDeep(this.items[index]);
-    //   this.$store.dispatch("clipboardModule/addToClipboard", duplicate);
-    // },
-    // removeFromClipboard(index) {
-    //   const item = this.items[index];
-    //   this.$store.dispatch("clipboardModule/removeFromClipboard", item);
-    // },
-    // // Check if the item is in the clipboard
-    // isInClipboard(index) {
-    //   return this.$store.getters["clipboardModule/isInClipboard"](this.items[index]);
-    // },
     duplicateItem(index) {
       const duplicate = _.cloneDeep(this.items[index]);
       this.items.push(duplicate);
diff --git a/src/components/editor/multi-column.vue b/src/components/editor/multi-column.vue
index 3e23e7d4d..be8437da0 100644
--- a/src/components/editor/multi-column.vue
+++ b/src/components/editor/multi-column.vue
@@ -240,19 +240,6 @@ export default {
     hasError(element) {
       return this.validationErrors.some(({ item }) => item === element);
     },
-    // addToClipboard(index, col){
-    //   const duplicate = _.cloneDeep(this.items[col][index]);
-    //   this.$store.dispatch("clipboardModule/addToClipboard", duplicate);
-    // },
-    // removeFromClipboard(index, col) {
-    //   const item = this.items[col][index];
-    //   this.$store.dispatch("clipboardModule/removeFromClipboard", item);
-    // },
-    // // Check if the item is in the clipboard
-    // isInClipboard(index, col) {
-    //   return this.$store.getters["clipboardModule/isInClipboard"](this.items[col][index]);
-    // },
-    
     updateContainerConfig(config, index) {
       this.items[index] = config;
       this.$emit("update-state");
diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 1da0c1c42..9fdd82ffe 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -489,7 +489,7 @@ import {
 } from "@processmaker/vue-form-elements";
 import Validator from "@chantouchsek/validatorjs";
 import HasColorProperty from "../mixins/HasColorProperty";
-import OnChangeDraggable from "../mixins/Clipboard";
+import Clipboard from "../mixins/Clipboard";
 import * as renderer from "./renderer";
 import * as inspector from "./inspector";
 import "@processmaker/vue-form-elements/dist/vue-form-elements.css";
@@ -573,7 +573,7 @@ export default {
     Sortable,
     ClipboardButton,
   },
-  mixins: [HasColorProperty, testing, OnChangeDraggable],
+  mixins: [HasColorProperty, testing, Clipboard],
   props: {
     renderControls: {
       type: Boolean,
@@ -1184,24 +1184,6 @@ export default {
       const duplicate = _.cloneDeep(this.config[this.currentPage].items[index]);
       this.config[this.currentPage].items.push(duplicate);
     },
-    // addToClipboard(index){
-    //   console.log('index', index);
-    //   console.log('isInClipboard', this.config[this.currentPage].items[index]);
-
-    //   const duplicate = _.cloneDeep(this.config[this.currentPage].items[index]);
-    //   this.$store.dispatch("clipboardModule/addToClipboard", duplicate);
-    //   console.log('clipboardItems', this.clipboardItems);
-    //   // console.log('isInClipboard', this.isInClipboard);
-    // },
-    // removeFromClipboard(index) {
-    //   console.log('removeFromClipboard', index);
-    //   const item = this.config[this.currentPage].items[index];
-    //   this.$store.dispatch("clipboardModule/removeFromClipboard", item);
-    // },
-    // // Check if the item is in the clipboard
-    // isInClipboard(index) {
-    //   return this.$store.getters["clipboardModule/isInClipboard"](this.config[this.currentPage].items[index]);
-    // },
     openEditPageModal(index) {
       this.editPageIndex = index;
       const pageName = this.config[index].name;
diff --git a/src/main.js b/src/main.js
index 3d800b98c..6453cf30a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -15,6 +15,7 @@ import { LRUCache } from "lru-cache";
 import VueFormElements from "@processmaker/vue-form-elements";
 import undoRedoModule from "@/store/modules/undoRedoModule";
 import globalErrorsModule from "@/store/modules/globalErrorsModule";
+import clipboardModule from "@/store/modules/clipboardModule";
 import ScreenBuilder from "@/components";
 import TestComponents from "../tests/components";
 
@@ -52,7 +53,8 @@ Vue.component("PmqlInput", {
 const store = new Vuex.Store({
   modules: {
     globalErrorsModule,
-    undoRedoModule
+    undoRedoModule,
+    clipboardModule
   }
 });
 
diff --git a/src/store/modules/undoRedoModule.js b/src/store/modules/undoRedoModule.js
index 68d21bc40..bc9594f34 100644
--- a/src/store/modules/undoRedoModule.js
+++ b/src/store/modules/undoRedoModule.js
@@ -45,7 +45,6 @@ const undoRedoModule = {
   },
   actions: {
     pushState({ state, getters, commit }, newState) {
-      debugger;
       if (newState.config === getters.currentState) {
         return;
       }

From a56f49e1dc6b46a5d3d40ab6b60d643240f791b6 Mon Sep 17 00:00:00 2001
From: Rodrigo Quelca <rodrigo@processmaker.com>
Date: Wed, 11 Sep 2024 09:02:22 -0400
Subject: [PATCH 12/46] add tests

---
 src/components/ClipboardButton.vue     |   2 +
 src/stories/ClipboardButton.stories.js |  64 ++++++++++++++
 tests/e2e/specs/Clipboard.spec.js      | 111 +++++++++++++++++++++++++
 3 files changed, 177 insertions(+)
 create mode 100644 src/stories/ClipboardButton.stories.js
 create mode 100644 tests/e2e/specs/Clipboard.spec.js

diff --git a/src/components/ClipboardButton.vue b/src/components/ClipboardButton.vue
index 9ea738e42..d2ac229f7 100644
--- a/src/components/ClipboardButton.vue
+++ b/src/components/ClipboardButton.vue
@@ -6,6 +6,7 @@
       :title="removeTitle"
       :style="removeButtonStyle"
       @click="removeFromClipboard"
+      data-cy="removeFromClipboard"
     >
       <i class="fas fa-minus"></i>
     </button>
@@ -15,6 +16,7 @@
       class="btn btn-sm btn-success mr-2"
       :title="addTitle"
       @click="addToClipboard(index)"
+      data-cy="addToClipboard"
     >
       <i class="fas fa-plus"></i>
     </button>
diff --git a/src/stories/ClipboardButton.stories.js b/src/stories/ClipboardButton.stories.js
new file mode 100644
index 000000000..392e82def
--- /dev/null
+++ b/src/stories/ClipboardButton.stories.js
@@ -0,0 +1,64 @@
+import ClipboardButton from '../components/ClipboardButton.vue';
+import { within, userEvent, expect } from "@storybook/test";
+
+export default {
+  title: 'Components/ClipboardButton',
+  tags: ["autodocs"],
+  component: ClipboardButton,
+  argTypes: {
+    isInClipboard: { control: 'boolean' },
+  },
+};
+
+const Template = (args) => ({
+  components: { ClipboardButton },
+  setup() {
+    return { args };
+  },
+  template: '<ClipboardButton v-bind="args" @addToClipboard="args.addToClipboard" @removeFromClipboard="args.removeFromClipboard"/>',
+});
+
+// Story for when the item is in the clipboard
+export const InClipboard = Template.bind({});
+InClipboard.args = {
+  isInClipboard: true,
+  index: 1,
+  addToClipboard: () => {},
+  removeFromClipboard: () => {},
+};
+InClipboard.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  // Expect the "Remove from clipboard" button to be rendered
+  const removeButton = await canvas.getByRole('button', { name: /Remove from clipboard/i });
+  expect(removeButton).toBeInTheDocument();
+
+  // Simulate a click on the remove button
+  await userEvent.click(removeButton);
+
+  // Ensure that the button remains visible after interaction
+  expect(removeButton).toBeVisible();
+};
+
+// Story for when the item is not in the clipboard
+export const NotInClipboard = Template.bind({});
+NotInClipboard.args = {
+  isInClipboard: false,
+  index: 1,
+  addToClipboard: () => {},
+  removeFromClipboard: () => {},
+};
+
+NotInClipboard.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  // Expect the "Add to clipboard" button to be rendered
+  const addButton = await canvas.getByRole('button', { name: /Add to clipboard/i });
+  expect(addButton).toBeInTheDocument();
+
+  // Simulate a click on the add button
+  await userEvent.click(addButton);
+
+  // Ensure that the button remains visible after interaction
+  expect(addButton).toBeVisible();
+};
diff --git a/tests/e2e/specs/Clipboard.spec.js b/tests/e2e/specs/Clipboard.spec.js
new file mode 100644
index 000000000..4dff9ab36
--- /dev/null
+++ b/tests/e2e/specs/Clipboard.spec.js
@@ -0,0 +1,111 @@
+describe("Clipboard Button Actions", () => {
+
+  it("Should display an empty drop zone message when no elements are present", () => {
+    cy.visit("/");
+    cy.openAcordeon("collapse-1");
+    cy.get("[data-cy=screen-drop-zone]").should(
+      "contain.text",
+      "Place your controls here."
+    );
+  });
+
+  it("Should allow adding and removing an input field to/from the clipboard", () => {
+    cy.visit("/");
+    cy.openAcordeon("collapse-1");
+
+    // Step 1: Dragging FormInput control to screen drop zone
+    cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
+      position: "bottom"
+    });
+
+    // Step 2: Click on the screen element container to activate it
+    cy.get('[data-cy="screen-element-container"]').click();
+
+    // Step 3: Verify 'Add to Clipboard' button is visible and then click it
+    cy.get('[data-cy="addToClipboard"]').should("be.visible");
+    cy.get('[data-cy="addToClipboard"]').click();
+    cy.get('[data-cy="addToClipboard"]').should("not.exist");
+
+    // Step 4: Verify 'Remove from Clipboard' button is visible after adding to clipboard and then click it
+    cy.get('[data-cy="removeFromClipboard"]').should("be.visible");
+    cy.get('[data-cy="removeFromClipboard"]').click();
+    cy.get('[data-cy="removeFromClipboard"]').should("not.exist");
+  });
+
+  it("Should allow adding and removing a multi-column form to/from the clipboard", () => {
+    cy.visit("/");
+    cy.openAcordeon("collapse-2");  // Open the multi-column controls section
+    cy.openAcordeon("collapse-1");  // Open the form controls section
+
+    // Step 1: Dragging FormMultiColumn control to screen drop zone
+    cy.get("[data-cy=controls-FormMultiColumn]").drag(
+      "[data-cy=screen-drop-zone]",
+      { position: "bottom" }
+    );
+
+    // Step 2: Add two input fields to different columns in the multi-column layout
+    cy.get("[data-cy=screen-element-container]").click();
+    cy.get("[data-cy=controls-FormInput]").drag(
+      "[data-cy=screen-element-container] .column-draggable:empty"
+    );
+    cy.get("[data-cy=controls-FormInput]").drag(
+      "[data-cy=screen-element-container] .column-draggable:empty"
+    );
+
+    // Step 3: Toggle JSON format in the inspector and input custom column data
+    cy.get('.custom-switch:has([data-cy="inspector-jsonFormat"]) label').click();
+    cy.get("[data-cy=inspector-dataJson]")
+      .clear()
+      .type(
+        JSON.stringify([
+          { value: "1", content: "6" },
+          { value: "1", content: "6" }
+        ]),
+        { parseSpecialCharSequences: false }
+      );
+    cy.get("[data-cy=inspector-dataJson-save]").click();
+
+    // Step 4: Select the form input element and add it to the clipboard
+    cy.get('[id="form_input_1"]').click();
+    cy.get('[data-cy="addToClipboard"]').should("be.visible");
+    cy.get('[data-cy="addToClipboard"]').click();
+    cy.get('[data-cy="addToClipboard"]').should("not.exist");
+
+    // Step 5: Remove the form input from the clipboard
+    cy.get('[data-cy="removeFromClipboard"]').should("be.visible");
+    cy.get('[data-cy="removeFromClipboard"]').click();
+    cy.get('[data-cy="removeFromClipboard"]').should("not.exist");
+  });
+
+  it("Should allow adding and removing a loop form to/from the clipboard", () => {
+    cy.visit("/");
+    cy.openAcordeon("collapse-2");
+    // Step 1: Dragging FormLoop control to screen drop zone
+    cy.get("[data-cy=controls-FormLoop]").drag("[data-cy=screen-drop-zone]", {
+      position: "bottom"
+    });
+    cy.get("[data-cy=screen-element-container]").click();
+    cy.get("[data-cy=inspector-name]").clear().type("rows");
+    cy.get("[data-cy=inspector-source]").select("existing");
+    cy.get("[data-cy=inspector-add]").click();
+
+    // Step 2: Add an input field in the Loop layout
+    cy.openAcordeon("collapse-1");
+    cy.get("[data-cy=controls-FormInput]").drag(
+      "[data-cy=screen-element-container] .column-draggable div",
+      { position: "bottom" }
+    );
+
+    // Step 3: Select the form input element and add it to the clipboard
+    cy.get('#form_input_1').click();
+    cy.get('[data-cy="addToClipboard"]').should("be.visible");
+    cy.get('[data-cy="addToClipboard"]').click();
+    cy.get('[data-cy="addToClipboard"]').should("not.exist");
+
+    // Step 4: Remove the form input from the clipboard
+    cy.get('[data-cy="removeFromClipboard"]').should("be.visible");
+    cy.get('[data-cy="removeFromClipboard"]').click();
+    cy.get('[data-cy="removeFromClipboard"]').should("not.exist");
+  });
+
+});
\ No newline at end of file

From ccc6d4e4e92b85f220d728d604611016aa1d4c8a Mon Sep 17 00:00:00 2001
From: Rodrigo Quelca <rodrigo@processmaker.com>
Date: Wed, 11 Sep 2024 10:18:30 -0400
Subject: [PATCH 13/46] fix hardcoded code

---
 src/components/ClipboardButton.vue  | 16 +++++++++++++---
 src/components/vue-form-builder.vue |  2 +-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/ClipboardButton.vue b/src/components/ClipboardButton.vue
index d2ac229f7..9421ff407 100644
--- a/src/components/ClipboardButton.vue
+++ b/src/components/ClipboardButton.vue
@@ -2,7 +2,7 @@
     <!-- Conditionally render buttons based on clipboardContent -->
     <button
       v-if="isInClipboard"
-      class="btn btn-sm btn-outline-secondary mr-2"
+      class="btn btn-sm btn-outline-secondary mr-2 remove-btn"
       :title="removeTitle"
       :style="removeButtonStyle"
       @click="removeFromClipboard"
@@ -13,7 +13,7 @@
 
     <button
       v-else
-      class="btn btn-sm btn-success mr-2"
+      class="btn btn-sm btn-success mr-2 add-btn"
       :title="addTitle"
       @click="addToClipboard(index)"
       data-cy="addToClipboard"
@@ -62,5 +62,15 @@ export default {
 </script>
 
 <style scoped>
-/* Add any specific styles here */
+.remove-btn {
+  background-color: #FFFFFF;
+  color: #596372;
+}
+.remove-btn:hover {
+  background-color: #f8f9fa; 
+  color: #596372;
+}
+.add-btn {
+  background-color: #0CA442;
+}
 </style>
diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 9fdd82ffe..ea05248c3 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -268,7 +268,7 @@
                     </button>
                     <button
                       class="btn btn-sm btn-danger"
-                      :title="$t('Delete Controldddddd')"
+                      :title="$t('Delete Control')"
                       @click="deleteItem(index)"
                     >
                       <i class="far fa-trash-alt text-light" />

From 8bd03bf97fe2b6c4e7ee7eaba588044060b13bdc Mon Sep 17 00:00:00 2001
From: Rodrigo Quelca <rodrigo@processmaker.com>
Date: Wed, 11 Sep 2024 10:22:04 -0400
Subject: [PATCH 14/46] fix translation

---
 src/components/ClipboardButton.vue | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/components/ClipboardButton.vue b/src/components/ClipboardButton.vue
index 9421ff407..bfedbd7fb 100644
--- a/src/components/ClipboardButton.vue
+++ b/src/components/ClipboardButton.vue
@@ -4,7 +4,6 @@
       v-if="isInClipboard"
       class="btn btn-sm btn-outline-secondary mr-2 remove-btn"
       :title="removeTitle"
-      :style="removeButtonStyle"
       @click="removeFromClipboard"
       data-cy="removeFromClipboard"
     >
@@ -40,11 +39,8 @@ export default {
   },
   data() {
     return {
-      addTitle: 'Add to clipboard',
-      removeTitle: 'Remove from clipboard',
-      removeButtonStyle: {
-        backgroundColor: '#FFFFFF',
-      },
+      addTitle: this.$t('Add to clipboard'),
+      removeTitle: this.$t('Remove from clipboard'),
     };
   },
 

From 631b12d76d8876b6cf3ab0c2e2f6b3533aa54bbf Mon Sep 17 00:00:00 2001
From: Rodrigo Quelca <rodrigo@processmaker.com>
Date: Wed, 11 Sep 2024 10:45:23 -0400
Subject: [PATCH 15/46] update test acordeon index

---
 tests/e2e/specs/Clipboard.spec.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/tests/e2e/specs/Clipboard.spec.js b/tests/e2e/specs/Clipboard.spec.js
index 4dff9ab36..e8a5a1d1f 100644
--- a/tests/e2e/specs/Clipboard.spec.js
+++ b/tests/e2e/specs/Clipboard.spec.js
@@ -11,7 +11,7 @@ describe("Clipboard Button Actions", () => {
 
   it("Should allow adding and removing an input field to/from the clipboard", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
 
     // Step 1: Dragging FormInput control to screen drop zone
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
@@ -34,8 +34,8 @@ describe("Clipboard Button Actions", () => {
 
   it("Should allow adding and removing a multi-column form to/from the clipboard", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-2");  // Open the multi-column controls section
-    cy.openAcordeon("collapse-1");  // Open the form controls section
+    cy.openAcordeon("collapse-3");  // Open the multi-column controls section
+    cy.openAcordeon("collapse-2");  // Open the form controls section
 
     // Step 1: Dragging FormMultiColumn control to screen drop zone
     cy.get("[data-cy=controls-FormMultiColumn]").drag(

From ca175a075c215d3ac474cfedf1ac97a588bdbae2 Mon Sep 17 00:00:00 2001
From: Rodrigo Quelca <rodrigo@processmaker.com>
Date: Wed, 11 Sep 2024 11:17:53 -0400
Subject: [PATCH 16/46] improve translations

---
 src/components/ClipboardButton.vue     | 17 +++++++++++------
 src/components/editor/loop.vue         |  4 ++++
 src/components/editor/multi-column.vue |  4 ++++
 src/components/vue-form-builder.vue    |  4 ++++
 src/stories/ClipboardButton.stories.js |  2 ++
 tests/e2e/specs/Clipboard.spec.js      |  4 ++--
 6 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/components/ClipboardButton.vue b/src/components/ClipboardButton.vue
index bfedbd7fb..011acede0 100644
--- a/src/components/ClipboardButton.vue
+++ b/src/components/ClipboardButton.vue
@@ -36,13 +36,18 @@ export default {
       type: Boolean,
       required: true,
     },
+    addTitle: {
+      type: String,
+      required: false,
+      default: 'Add to clipboard',
+    },
+    removeTitle: {
+      type: String,
+      required: false,
+      default: 'Remove from clipboard',
+    }
   },
-  data() {
-    return {
-      addTitle: this.$t('Add to clipboard'),
-      removeTitle: this.$t('Remove from clipboard'),
-    };
-  },
+
 
   methods: {
     // Method to handle adding to clipboard
diff --git a/src/components/editor/loop.vue b/src/components/editor/loop.vue
index ddaa02a9c..5457761b7 100644
--- a/src/components/editor/loop.vue
+++ b/src/components/editor/loop.vue
@@ -32,6 +32,8 @@
                   :index="index"
                   :config="element.config"
                   :isInClipboard="isInClipboard(items[index])"
+                  :addTitle="$t('Add to clipboard')"
+                  :removeTitle="$t('Remove from clipboard')"
                   @addToClipboard="addToClipboard(items[index])"
                   @removeFromClipboard="removeFromClipboard(items[index])"
                 />
@@ -94,6 +96,8 @@
                   :index="index"
                   :config="element.config"
                   :isInClipboard="isInClipboard(items[index])"
+                  :addTitle="$t('Add to clipboard')"
+                  :removeTitle="$t('Remove from clipboard')"
                   @addToClipboard="addToClipboard(items[index])"
                   @removeFromClipboard="removeFromClipboard(items[index])"
                 />
diff --git a/src/components/editor/multi-column.vue b/src/components/editor/multi-column.vue
index be8437da0..c0eef4949 100644
--- a/src/components/editor/multi-column.vue
+++ b/src/components/editor/multi-column.vue
@@ -48,6 +48,8 @@
                         :index="index"
                         :config="element.config"
                         :isInClipboard="isInClipboard(items[row][index])"
+                        :addTitle="$t('Add to clipboard')"
+                        :removeTitle="$t('Remove from clipboard')"
                         @addToClipboard="addToClipboard(items[row][index])"
                         @removeFromClipboard="removeFromClipboard(items[row][index])"
                       />
@@ -112,6 +114,8 @@
                         :index="index"
                         :config="element.config"
                         :isInClipboard="isInClipboard(items[row][index])"
+                        :addTitle="$t('Add to clipboard')"
+                        :removeTitle="$t('Remove from clipboard')"
                         @addToClipboard="addToClipboard(items[row][index])"
                         @removeFromClipboard="removeFromClipboard(items[row][index])"
                       />
diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 155d8be3b..19e263f4d 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -194,6 +194,8 @@
                       :index="index"
                       :config="element.config"
                       :isInClipboard="isInClipboard(config[currentPage].items[index])"
+                      :addTitle="$t('Add to clipboard')"
+                      :removeTitle="$t('Remove from clipboard')"
                       @addToClipboard="addToClipboard(config[currentPage].items[index])"
                       @removeFromClipboard="removeFromClipboard(config[currentPage].items[index])"
                     />
@@ -256,6 +258,8 @@
                       :index="index"
                       :config="element.config"
                       :isInClipboard="isInClipboard(config[currentPage].items[index])"
+                      :addTitle="$t('Add to clipboard')"
+                      :removeTitle="$t('Remove from clipboard')"
                       @addToClipboard="addToClipboard(config[currentPage].items[index])"
                       @removeFromClipboard="removeFromClipboard(config[currentPage].items[index])"
                     />
diff --git a/src/stories/ClipboardButton.stories.js b/src/stories/ClipboardButton.stories.js
index 392e82def..cdaa40ee1 100644
--- a/src/stories/ClipboardButton.stories.js
+++ b/src/stories/ClipboardButton.stories.js
@@ -23,6 +23,8 @@ export const InClipboard = Template.bind({});
 InClipboard.args = {
   isInClipboard: true,
   index: 1,
+  addTitle: 'Add to clipboard',
+  removeTitle: 'Remove from clipboard',
   addToClipboard: () => {},
   removeFromClipboard: () => {},
 };
diff --git a/tests/e2e/specs/Clipboard.spec.js b/tests/e2e/specs/Clipboard.spec.js
index e8a5a1d1f..ac5f0bfc6 100644
--- a/tests/e2e/specs/Clipboard.spec.js
+++ b/tests/e2e/specs/Clipboard.spec.js
@@ -79,7 +79,7 @@ describe("Clipboard Button Actions", () => {
 
   it("Should allow adding and removing a loop form to/from the clipboard", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-2");
+    cy.openAcordeon("collapse-3");
     // Step 1: Dragging FormLoop control to screen drop zone
     cy.get("[data-cy=controls-FormLoop]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
@@ -90,7 +90,7 @@ describe("Clipboard Button Actions", () => {
     cy.get("[data-cy=inspector-add]").click();
 
     // Step 2: Add an input field in the Loop layout
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeon("collapse-2");
     cy.get("[data-cy=controls-FormInput]").drag(
       "[data-cy=screen-element-container] .column-draggable div",
       { position: "bottom" }

From 07342844e182c98d2c3ad468d391d9de6b24b0e6 Mon Sep 17 00:00:00 2001
From: Rodrigo Quelca <rodrigo@processmaker.com>
Date: Wed, 11 Sep 2024 11:31:57 -0400
Subject: [PATCH 17/46] add openAcordeonByLabel cypress command

---
 tests/e2e/specs/Clipboard.spec.js        | 12 ++++++------
 tests/e2e/specs/ClipboardControl.spec.js |  6 +++---
 tests/e2e/support/commands.js            |  6 ++++++
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/tests/e2e/specs/Clipboard.spec.js b/tests/e2e/specs/Clipboard.spec.js
index ac5f0bfc6..95ce69376 100644
--- a/tests/e2e/specs/Clipboard.spec.js
+++ b/tests/e2e/specs/Clipboard.spec.js
@@ -2,7 +2,7 @@ describe("Clipboard Button Actions", () => {
 
   it("Should display an empty drop zone message when no elements are present", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeonByLabel("Clipboard");
     cy.get("[data-cy=screen-drop-zone]").should(
       "contain.text",
       "Place your controls here."
@@ -11,7 +11,7 @@ describe("Clipboard Button Actions", () => {
 
   it("Should allow adding and removing an input field to/from the clipboard", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-2");
+    cy.openAcordeonByLabel("Input Fields");
 
     // Step 1: Dragging FormInput control to screen drop zone
     cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
@@ -34,8 +34,8 @@ describe("Clipboard Button Actions", () => {
 
   it("Should allow adding and removing a multi-column form to/from the clipboard", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-3");  // Open the multi-column controls section
-    cy.openAcordeon("collapse-2");  // Open the form controls section
+    cy.openAcordeonByLabel("Content Fields");  // Open the multi-column controls section
+    cy.openAcordeonByLabel("Input Fields");  // Open the form controls section
 
     // Step 1: Dragging FormMultiColumn control to screen drop zone
     cy.get("[data-cy=controls-FormMultiColumn]").drag(
@@ -79,7 +79,7 @@ describe("Clipboard Button Actions", () => {
 
   it("Should allow adding and removing a loop form to/from the clipboard", () => {
     cy.visit("/");
-    cy.openAcordeon("collapse-3");
+    cy.openAcordeonByLabel("Content Fields");
     // Step 1: Dragging FormLoop control to screen drop zone
     cy.get("[data-cy=controls-FormLoop]").drag("[data-cy=screen-drop-zone]", {
       position: "bottom"
@@ -90,7 +90,7 @@ describe("Clipboard Button Actions", () => {
     cy.get("[data-cy=inspector-add]").click();
 
     // Step 2: Add an input field in the Loop layout
-    cy.openAcordeon("collapse-2");
+    cy.openAcordeonByLabel("Input Fields"); 
     cy.get("[data-cy=controls-FormInput]").drag(
       "[data-cy=screen-element-container] .column-draggable div",
       { position: "bottom" }
diff --git a/tests/e2e/specs/ClipboardControl.spec.js b/tests/e2e/specs/ClipboardControl.spec.js
index 9d4ca31de..73a476db8 100644
--- a/tests/e2e/specs/ClipboardControl.spec.js
+++ b/tests/e2e/specs/ClipboardControl.spec.js
@@ -8,7 +8,7 @@ describe("Add Clipboard Section to Control Menu", () => {
     cy.visit("/");
 
     // Step 2: Open the clipboard acordeon
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeonByLabel("Clipboard"); 
 
     // Step 3: Verify that the Clipboard section is visible in the control menu
     cy.contains("Clipboard").should("be.visible");
@@ -22,7 +22,7 @@ describe("Add Clipboard Section to Control Menu", () => {
     cy.visit("/");
 
     // Step 2: Open the clipboard acordeon
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeonByLabel("Clipboard"); 
 
     // Step 3: Verify that the Clipboard accordion exists and is visible
     cy.get('[data-cy="controls-Clipboard"]').should("exist").should("be.visible");
@@ -36,7 +36,7 @@ describe("Add Clipboard Section to Control Menu", () => {
     cy.visit("/");
 
     // Step 2: Open the clipboard acordeon
-    cy.openAcordeon("collapse-1");
+    cy.openAcordeonByLabel("Clipboard"); 
 
     // Step 3: Click to open the Clipboard accordion
     cy.get('[data-cy="controls-Clipboard"]').click();
diff --git a/tests/e2e/support/commands.js b/tests/e2e/support/commands.js
index 81ddadc07..48e2910cb 100644
--- a/tests/e2e/support/commands.js
+++ b/tests/e2e/support/commands.js
@@ -286,6 +286,12 @@ Cypress.Commands.add("openAcordeon", (name) => {
     force: true
   });
 });
+Cypress.Commands.add("openAcordeonByLabel", (label) => {
+  cy.get(`button`).contains(label).click({
+    waitForAnimations: true,
+    force: true
+  });
+});
 
 Cypress.Commands.add("openAllAcordeon", () => {
   cy.openAcordeon("collapse-6");

From 2c98b6c30f653d399fecdb32ab17c6298115767c Mon Sep 17 00:00:00 2001
From: Rodrigo Quelca <rodrigo@processmaker.com>
Date: Fri, 13 Sep 2024 10:00:12 -0400
Subject: [PATCH 18/46] FOUR-13439: STORY Adding multiple content to the
 clipboard

---
 src/App.vue                          | 21 ++++++++++++++++++++-
 src/components/vue-form-builder.vue  |  4 ++++
 src/mixins/Clipboard.js              |  2 ++
 src/store/modules/clipboardModule.js | 20 ++++++++++++++++----
 4 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a2ba161e2..749889f00 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -519,7 +519,11 @@ export default {
         });
       }
       return warnings;
-    }
+    },
+     // Get clipboard items from Vuex store
+    clipboardItems() {
+      return this.$store.getters["clipboardModule/clipboardItems"];
+    },
   },
   created() {
     this.updateDataInput = debounce(this.updateDataInput, 1000);
@@ -548,6 +552,12 @@ export default {
     });
 
     this.loadFromLocalStorage();
+    ProcessMaker.EventBus.$on(
+      "save-clipboard",
+      (items) => {  
+        this.saveClipboarToLocalStorage(items);
+      },
+    );
   },
   methods: {
     ...mapMutations("globalErrorsModule", { setStoreMode: "setMode" }),
@@ -602,6 +612,7 @@ export default {
       const savedWatchers = localStorage.getItem("savedWatchers");
       const customCSS = localStorage.getItem("customCSS");
       const computed = localStorage.getItem("computed");
+      const savedClipboard = localStorage.getItem("savedClipboard");  
 
       if (savedConfig) {
         const config = JSON.parse(savedConfig);
@@ -621,6 +632,14 @@ export default {
       if (computed) {
         this.computed = JSON.parse(computed);
       }
+      if(savedClipboard) {
+        const clipboardsItems = JSON.parse(savedClipboard);
+        console.log('this.clipboardItems', this.clipboardItems);
+        this.$store.dispatch("clipboardModule/addToClipboard", clipboardsItems);
+      }
+    },
+    saveClipboarToLocalStorage(items){
+      localStorage.setItem("savedClipboard", JSON.stringify(items));
     },
     saveToLocalStorage() {
       localStorage.setItem("savedConfig", JSON.stringify(this.config));
diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 19e263f4d..d40babf75 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -803,6 +803,10 @@ export default {
     this.$root.$on("ai-form-progress-updated", (progress, nonce) => {
       this.updateProgress(progress, nonce);
     });
+    this.$root.$on("update-clipboard", () => {
+      console.log('update-clipboard', this.clipboardItems);
+      ProcessMaker.EventBus.$emit("save-clipboard", this.clipboardItems);
+    });
     this.setGroupOrder(defaultGroupOrder);
   },
   methods: {
diff --git a/src/mixins/Clipboard.js b/src/mixins/Clipboard.js
index b4fff3b73..8d79654fe 100644
--- a/src/mixins/Clipboard.js
+++ b/src/mixins/Clipboard.js
@@ -33,6 +33,7 @@ export default {
     addToClipboard(item) {
       const duplicate = _.cloneDeep(item); // Create a deep copy of the item
       this.$store.dispatch("clipboardModule/addToClipboard", duplicate); // Dispatch action to add item to the Vuex store
+      this.$root.$emit('update-clipboard');
     },
 
     /**
@@ -43,6 +44,7 @@ export default {
      */
     removeFromClipboard(item) {
       this.$store.dispatch("clipboardModule/removeFromClipboard", item); // Dispatch action to remove item from the Vuex store
+      this.$root.$emit('update-clipboard');
     },
 
     /**
diff --git a/src/store/modules/clipboardModule.js b/src/store/modules/clipboardModule.js
index 671f2c07f..e832b9d8b 100644
--- a/src/store/modules/clipboardModule.js
+++ b/src/store/modules/clipboardModule.js
@@ -50,12 +50,21 @@ const clipboardModule = {
    */
   mutations: {
     /**
-     * Adds an item to the clipboard.
+     * Adds an items to the clipboard.
      * @param {Object} state - The state of the module.
-     * @param {any} item - The item to add.
+     * @param {any} item - The items to add.
      */
-    ADD_TO_CLIPBOARD(state, item) {
-      state.clipboard.push(item);
+    ADD_TO_CLIPBOARD(state, items) {
+      debugger
+      // Check if the input is an array, if not, wrap it as an array
+      const itemsToAdd = Array.isArray(items) ? items : [items];
+
+      // Add each item only if it's not already in the clipboard
+      itemsToAdd.forEach(item => {
+        if (!state.clipboard.some(clipboardItem => clipboardItem.uuid === item.uuid)) {
+          state.clipboard.push(item);
+        }
+      });
     },
 
     /**
@@ -85,6 +94,9 @@ const clipboardModule = {
    * Actions are used to commit mutations and can contain asynchronous operations.
    */
   actions: {
+    addToClipboard({ commit }, items) {
+      commit('ADD_TO_CLIPBOARD', items);
+    },
     /**
      * Adds an item to the clipboard by committing the corresponding mutation.
      * @param {Object} context - The context object containing commit.

From 794184c9bff55b6398b89a49533cd5d1484b4a30 Mon Sep 17 00:00:00 2001
From: Rodrigo Quelca <rodrigo@processmaker.com>
Date: Fri, 13 Sep 2024 13:31:17 -0400
Subject: [PATCH 19/46] fix ciclical error

---
 src/App.vue                       | 1 -
 src/VariableDataTypeProperties.js | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 749889f00..350977aaa 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -634,7 +634,6 @@ export default {
       }
       if(savedClipboard) {
         const clipboardsItems = JSON.parse(savedClipboard);
-        console.log('this.clipboardItems', this.clipboardItems);
         this.$store.dispatch("clipboardModule/addToClipboard", clipboardsItems);
       }
     },
diff --git a/src/VariableDataTypeProperties.js b/src/VariableDataTypeProperties.js
index 8bf43ad2c..0474672ba 100644
--- a/src/VariableDataTypeProperties.js
+++ b/src/VariableDataTypeProperties.js
@@ -30,7 +30,7 @@ function dataTypeFactory(options) {
 function dataFormatFactory() {
 
   return {
-    type: SelectDataTypeMask,
+    type: 'SelectDataTypeMask',
     field: 'dataMask',
     config: {
       label: 'Data Format',

From 3a11849d3cc1417297c157cc7f86c2d720a0329d Mon Sep 17 00:00:00 2001
From: Rodrigo Quelca <rodrigo@processmaker.com>
Date: Fri, 13 Sep 2024 14:50:04 -0400
Subject: [PATCH 20/46] remove debugger

---
 src/store/modules/clipboardModule.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/store/modules/clipboardModule.js b/src/store/modules/clipboardModule.js
index e832b9d8b..99d108134 100644
--- a/src/store/modules/clipboardModule.js
+++ b/src/store/modules/clipboardModule.js
@@ -52,10 +52,9 @@ const clipboardModule = {
     /**
      * Adds an items to the clipboard.
      * @param {Object} state - The state of the module.
-     * @param {any} item - The items to add.
+     * @param {any} items - The items to add.
      */
     ADD_TO_CLIPBOARD(state, items) {
-      debugger
       // Check if the input is an array, if not, wrap it as an array
       const itemsToAdd = Array.isArray(items) ? items : [items];
 

From aa691fc061dd748cdde918191524ff334b78c834 Mon Sep 17 00:00:00 2001
From: Rodrigo Quelca <rodrigo@processmaker.com>
Date: Fri, 13 Sep 2024 15:26:24 -0400
Subject: [PATCH 21/46] promote saveClipboarToLocalStorage to vue-form-renderer

---
 src/components/vue-form-renderer.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/vue-form-renderer.vue b/src/components/vue-form-renderer.vue
index ea6aed981..4e6a42a56 100644
--- a/src/components/vue-form-renderer.vue
+++ b/src/components/vue-form-renderer.vue
@@ -180,6 +180,13 @@ export default {
     this.scrollable = Scrollparent(this.$el);
 
     this.containerObserver.observe(this.$refs.formRendererContainer);
+    
+    ProcessMaker.EventBus.$on(
+      "save-clipboard",
+      (items) => {  
+        this.saveClipboarToLocalStorage(items);
+      },
+    );
   },
   methods: {
     ...mapActions("globalErrorsModule", [
@@ -362,7 +369,10 @@ export default {
       // Control coordinates
       const controlEl = entries[0].target.getBoundingClientRect();
       this.parseCss();
-    }
+    },
+    saveClipboarToLocalStorage(items){
+      localStorage.setItem("savedClipboard", JSON.stringify(items));
+    },
   }
 };
 </script>

From 1caa9872f13d9f93cee1498c42ef75b94ad4dda6 Mon Sep 17 00:00:00 2001
From: Rodrigo Quelca <rodrigo@processmaker.com>
Date: Fri, 13 Sep 2024 15:28:31 -0400
Subject: [PATCH 22/46] clear console.log

---
 src/components/vue-form-builder.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index d40babf75..27ee4d902 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -804,7 +804,6 @@ export default {
       this.updateProgress(progress, nonce);
     });
     this.$root.$on("update-clipboard", () => {
-      console.log('update-clipboard', this.clipboardItems);
       ProcessMaker.EventBus.$emit("save-clipboard", this.clipboardItems);
     });
     this.setGroupOrder(defaultGroupOrder);

From 6637e7e12e6c505444977617a3638da5495790aa Mon Sep 17 00:00:00 2001
From: Rodrigo Quelca <rodrigo@processmaker.com>
Date: Fri, 13 Sep 2024 16:11:39 -0400
Subject: [PATCH 23/46] udpdate App

---
 src/App.vue | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 350977aaa..12ddde3ac 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -552,12 +552,6 @@ export default {
     });
 
     this.loadFromLocalStorage();
-    ProcessMaker.EventBus.$on(
-      "save-clipboard",
-      (items) => {  
-        this.saveClipboarToLocalStorage(items);
-      },
-    );
   },
   methods: {
     ...mapMutations("globalErrorsModule", { setStoreMode: "setMode" }),
@@ -634,12 +628,10 @@ export default {
       }
       if(savedClipboard) {
         const clipboardsItems = JSON.parse(savedClipboard);
+
         this.$store.dispatch("clipboardModule/addToClipboard", clipboardsItems);
       }
     },
-    saveClipboarToLocalStorage(items){
-      localStorage.setItem("savedClipboard", JSON.stringify(items));
-    },
     saveToLocalStorage() {
       localStorage.setItem("savedConfig", JSON.stringify(this.config));
       localStorage.setItem("savedWatchers", JSON.stringify(this.watchers));

From b0019f1a2f62b3e03a892748ae3e385abe74fdeb Mon Sep 17 00:00:00 2001
From: David Callizaya <davidcallizaya@gmail.com>
Date: Thu, 19 Sep 2024 09:11:20 -0400
Subject: [PATCH 24/46] Complete uuid assignment to complete remove elements
 from clipboard

---
 src/components/vue-form-builder.vue  |  5 +++-
 src/mixins/Clipboard.js              | 43 ++++++++++++++--------------
 src/store/modules/clipboardModule.js |  5 ++++
 3 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 27ee4d902..0d7d4889a 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -72,6 +72,7 @@
                       customClass: 'custom-popover',
                       boundaryPadding: 16
                     }"
+                    :data-control="controls.indexOf(element)"
                     :boundary="'viewport'"
                     :data-cy="`controls-${element.component}`"
                     class="gray-text"
@@ -157,7 +158,6 @@
               swapThreshold: 0.5
             }"
             @input="updateConfig"
-            @change="onChange"
           >
             <div
               v-for="(element, index) in config[tabPage].items"
@@ -773,6 +773,7 @@ export default {
     }
   },
   created() {
+    this.addUuidToElements(this.config);
     this.$store.dispatch("undoRedoModule/pushState", {
       config: JSON.stringify(this.config),
       currentPage: this.currentPage
@@ -924,6 +925,7 @@ export default {
       accordion.open = true;
     },
     migrateConfig(config = this.config) {
+      this.addUuidToElements(config);
       config.forEach((page) => this.replaceFormText(page.items));
       config.forEach((page) => this.migrateFormSubmit(page.items));
       config.forEach((page) => this.updateFieldNameValidation(page.items));
@@ -1307,6 +1309,7 @@ export default {
     // This will ensure each control in the editor has it's own config and it's not shared
     cloneControl(control) {
       const copy = {
+        uuid: this.generateUUID(),
         config: JSON.parse(JSON.stringify(control.config)),
         inspector: JSON.parse(JSON.stringify(control.inspector)),
         component: control.component,
diff --git a/src/mixins/Clipboard.js b/src/mixins/Clipboard.js
index 8d79654fe..ccdcc9ef9 100644
--- a/src/mixins/Clipboard.js
+++ b/src/mixins/Clipboard.js
@@ -1,29 +1,10 @@
 import { v4 as uuidv4 } from 'uuid';
 import _ from "lodash";
 
+const clipboardComponentName = "Clipboard";
+
 export default {
   methods: {
-    /**
-     * Handles the change event, ensuring that the added element has a unique UUID.
-     * 
-     * @param {Object} added - The added item object containing the `element`.
-     * @returns {void}
-     */
-    onChange({ added }) {
-      if (!added || !added.element) {
-        console.error('Invalid item or element passed to onChange');
-        return; // Prevent further execution if the element is invalid
-      }
-      const element = added.element;
-
-      // Ensure element does not already have a UUID or generate a new one if missing
-      if (!element.uuid) {
-        element.uuid = uuidv4(); // Assign a unique identifier to the element
-      } else {
-        console.warn('Element already has a UUID:', element.uuid);
-      }
-    },
-
     /**
      * Adds a deep-cloned item to the clipboard, ensuring the original item is unmodified.
      * 
@@ -56,5 +37,25 @@ export default {
     isInClipboard(item) {
       return this.$store.getters["clipboardModule/isInClipboard"](item); // Use Vuex getter to check if item exists in the clipboard
     },
+
+    /**
+     * Add a UUID to each element in the screen configuration.
+     *
+     * @param array screenConfig 
+     */
+    addUuidToElements(screenConfig) {
+      const replaceInPage = (page) => {
+        page.items.forEach((item, index) => {
+          if (!item.uuid) {
+            item.uuid = this.generateUUID();
+          }
+          if (item.items) {
+            replaceInPage(item);
+          }
+        });
+      }
+
+      screenConfig.forEach((item) => replaceInPage(item));
+    },
   },
 };
diff --git a/src/store/modules/clipboardModule.js b/src/store/modules/clipboardModule.js
index 99d108134..272270ac8 100644
--- a/src/store/modules/clipboardModule.js
+++ b/src/store/modules/clipboardModule.js
@@ -1,3 +1,5 @@
+import { v4 as uuidv4 } from 'uuid';
+
 /**
  * Vuex module for managing clipboard state.
  */
@@ -60,6 +62,9 @@ const clipboardModule = {
 
       // Add each item only if it's not already in the clipboard
       itemsToAdd.forEach(item => {
+        if (!item.uuid) {
+          item.uuid = uuidv4();
+        }
         if (!state.clipboard.some(clipboardItem => clipboardItem.uuid === item.uuid)) {
           state.clipboard.push(item);
         }

From 68e56e47ea7590f14830a53317e5e6f73da84204 Mon Sep 17 00:00:00 2001
From: David Callizaya <davidcallizaya@gmail.com>
Date: Thu, 19 Sep 2024 15:13:06 -0400
Subject: [PATCH 25/46] Add generate UUID helper

---
 src/mixins/Clipboard.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/mixins/Clipboard.js b/src/mixins/Clipboard.js
index ccdcc9ef9..3290ba586 100644
--- a/src/mixins/Clipboard.js
+++ b/src/mixins/Clipboard.js
@@ -38,6 +38,13 @@ export default {
       return this.$store.getters["clipboardModule/isInClipboard"](item); // Use Vuex getter to check if item exists in the clipboard
     },
 
+    /**
+     * Generate a unique UUID for the specified item.
+     */
+    generateUUID() {
+      return uuidv4(); // Generate a unique identifier using UUID v4
+    },
+
     /**
      * Add a UUID to each element in the screen configuration.
      *

From c923655309f7909b02afc760b2548c5bceea8431 Mon Sep 17 00:00:00 2001
From: David Callizaya <davidcallizaya@gmail.com>
Date: Thu, 19 Sep 2024 15:40:43 -0400
Subject: [PATCH 26/46] Fix drag in test

---
 tests/e2e/specs/Clipboard.spec.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/tests/e2e/specs/Clipboard.spec.js b/tests/e2e/specs/Clipboard.spec.js
index 95ce69376..50aad5b31 100644
--- a/tests/e2e/specs/Clipboard.spec.js
+++ b/tests/e2e/specs/Clipboard.spec.js
@@ -81,9 +81,7 @@ describe("Clipboard Button Actions", () => {
     cy.visit("/");
     cy.openAcordeonByLabel("Content Fields");
     // Step 1: Dragging FormLoop control to screen drop zone
-    cy.get("[data-cy=controls-FormLoop]").drag("[data-cy=screen-drop-zone]", {
-      position: "bottom"
-    });
+    cy.get("[data-cy=controls-FormLoop]").drag("[data-cy=screen-drop-zone]");
     cy.get("[data-cy=screen-element-container]").click();
     cy.get("[data-cy=inspector-name]").clear().type("rows");
     cy.get("[data-cy=inspector-source]").select("existing");

From 3188f03d4cf77af89ce06ed91c625435def328d6 Mon Sep 17 00:00:00 2001
From: David Callizaya <davidcallizaya@gmail.com>
Date: Thu, 19 Sep 2024 16:29:20 -0400
Subject: [PATCH 27/46] Remove unused method

---
 src/components/editor/loop.vue         | 2 +-
 src/components/editor/multi-column.vue | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/editor/loop.vue b/src/components/editor/loop.vue
index 5457761b7..5e6808b03 100644
--- a/src/components/editor/loop.vue
+++ b/src/components/editor/loop.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="column-draggable" :selector="config.customCssSelector">
-    <draggable style="min-height: 80px" :list="items" group="controls" @change="onChange">
+    <draggable style="min-height: 80px" :list="items" group="controls">
       <div
         v-for="(element, index) in items"
         :key="index"
diff --git a/src/components/editor/multi-column.vue b/src/components/editor/multi-column.vue
index c0eef4949..b5445195d 100644
--- a/src/components/editor/multi-column.vue
+++ b/src/components/editor/multi-column.vue
@@ -11,7 +11,6 @@
             :value="items[index]"
             group="controls"
             @input="updateContainerConfig($event, index)"
-            @change="onChange"
           >
             <div
               v-for="(element, row) in item"

From bfafabde602b01e2a449e08a2ca05eada1911b35 Mon Sep 17 00:00:00 2001
From: David Callizaya <davidcallizaya@gmail.com>
Date: Thu, 19 Sep 2024 19:49:04 -0400
Subject: [PATCH 28/46] Fix clipboard on multicolumn

---
 src/components/editor/multi-column.vue | 12 ++++++------
 src/store/modules/clipboardModule.js   |  6 +++---
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/editor/multi-column.vue b/src/components/editor/multi-column.vue
index b5445195d..4ba98470c 100644
--- a/src/components/editor/multi-column.vue
+++ b/src/components/editor/multi-column.vue
@@ -46,11 +46,11 @@
                       <clipboard-button
                         :index="index"
                         :config="element.config"
-                        :isInClipboard="isInClipboard(items[row][index])"
+                        :isInClipboard="isInClipboard(element)"
                         :addTitle="$t('Add to clipboard')"
                         :removeTitle="$t('Remove from clipboard')"
-                        @addToClipboard="addToClipboard(items[row][index])"
-                        @removeFromClipboard="removeFromClipboard(items[row][index])"
+                        @addToClipboard="addToClipboard(element)"
+                        @removeFromClipboard="removeFromClipboard(element)"
                       />
                       <button
                         v-if="isAiSection(element) && aiPreview(element)"
@@ -112,11 +112,11 @@
                       <clipboard-button
                         :index="index"
                         :config="element.config"
-                        :isInClipboard="isInClipboard(items[row][index])"
+                        :isInClipboard="isInClipboard(element)"
                         :addTitle="$t('Add to clipboard')"
                         :removeTitle="$t('Remove from clipboard')"
-                        @addToClipboard="addToClipboard(items[row][index])"
-                        @removeFromClipboard="removeFromClipboard(items[row][index])"
+                        @addToClipboard="addToClipboard(element)"
+                        @removeFromClipboard="removeFromClipboard(element)"
                       />
                       <button
                         class="btn btn-sm btn-secondary mr-2"
diff --git a/src/store/modules/clipboardModule.js b/src/store/modules/clipboardModule.js
index 272270ac8..2478d9dbd 100644
--- a/src/store/modules/clipboardModule.js
+++ b/src/store/modules/clipboardModule.js
@@ -98,15 +98,15 @@ const clipboardModule = {
    * Actions are used to commit mutations and can contain asynchronous operations.
    */
   actions: {
-    addToClipboard({ commit }, items) {
-      commit('ADD_TO_CLIPBOARD', items);
-    },
     /**
      * Adds an item to the clipboard by committing the corresponding mutation.
      * @param {Object} context - The context object containing commit.
      * @param {any} item - The item to add to the clipboard.
      */
     addToClipboard({ commit }, item) {
+      if (!item) {
+        throw new Error('Item is missing');
+      }
       commit('ADD_TO_CLIPBOARD', item);
     },
 

From e32a97684955ab46cd0e54bc56c4dea0d749a41c Mon Sep 17 00:00:00 2001
From: David Callizaya <davidcallizaya@gmail.com>
Date: Thu, 19 Sep 2024 19:49:29 -0400
Subject: [PATCH 29/46] Paste elements from clipboard

---
 src/components/vue-form-builder.vue |  1 +
 src/mixins/Clipboard.js             | 35 +++++++++++++++++++++++++++++
 2 files changed, 36 insertions(+)

diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 0d7d4889a..98974c640 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -1109,6 +1109,7 @@ export default {
       });
     },
     updateState() {
+      this.replaceClipboardContent(this.config);
       this.$store.dispatch("undoRedoModule/pushState", {
         config: JSON.stringify(this.config),
         currentPage: this.currentPage
diff --git a/src/mixins/Clipboard.js b/src/mixins/Clipboard.js
index 3290ba586..270ae2e30 100644
--- a/src/mixins/Clipboard.js
+++ b/src/mixins/Clipboard.js
@@ -64,5 +64,40 @@ export default {
 
       screenConfig.forEach((item) => replaceInPage(item));
     },
+
+    /**
+     * Find { component: "Clipboard" } and replace with the clipboard content.
+     */
+    replaceClipboardContent(screenConfig) {
+      if (
+        !screenConfig
+        || screenConfig instanceof Array === false
+      ) {
+        throw new Error("Expected a screen configuration array");
+      }
+
+      // Navigate each page and replace the clipboard component with the clipboard content
+      const replaceUuids = (item) => {
+        item.uuid = this.generateUUID();
+        if (item.items) {
+          item.items.forEach(replaceUuids);
+        }
+      }
+      const replaceInPage = (page) => {
+        page.items.forEach((item, index) => {
+          if (item.component === clipboardComponentName) {
+            // clone clipboard content to avoid modifying the original
+            const clipboardContent = _.cloneDeep(this.$store.getters["clipboardModule/clipboardItems"]);
+            // replace uuids in clipboard content
+            clipboardContent.forEach(replaceUuids);
+            page.items.splice(index, 1, ...clipboardContent);
+          }
+          if (item.items) {
+            replaceInPage(item);
+          }
+        });
+      }
+      screenConfig.forEach((item) => replaceInPage(item));
+    },
   },
 };

From fb05a62dadff7f44f3d2520b7d6b0614bfe4b3d9 Mon Sep 17 00:00:00 2001
From: David Callizaya <davidcallizaya@gmail.com>
Date: Thu, 19 Sep 2024 19:56:09 -0400
Subject: [PATCH 30/46] Test copy and paste

---
 tests/e2e/specs/ClipboardDragPaste.spec.js | 183 +++++++++++++++++++++
 1 file changed, 183 insertions(+)
 create mode 100644 tests/e2e/specs/ClipboardDragPaste.spec.js

diff --git a/tests/e2e/specs/ClipboardDragPaste.spec.js b/tests/e2e/specs/ClipboardDragPaste.spec.js
new file mode 100644
index 000000000..5b537956f
--- /dev/null
+++ b/tests/e2e/specs/ClipboardDragPaste.spec.js
@@ -0,0 +1,183 @@
+import {
+  addControlInsideLoop,
+  addControlInsideTable,
+} from "../support/utils.js";
+import { nodeControls } from "../support/constants.js";
+
+describe("Clipboard Drag and Paste", () => {
+
+  it("Copy input element to clipboard", () => {
+    cy.window().then((win) => {
+      // Clear storage to remove any previous clipboard items
+      win.localStorage.clear();
+
+      // Step 1: Visit the homepage and open the 'Input Fields' accordion
+      cy.visit("/");
+      cy.openAcordeonByLabel("Input Fields");
+
+      // Step 2: Drag FormInput control to the screen's drop zone
+      cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
+        position: "bottom"
+      });
+
+      // Step 3: Click on the screen element container to select it
+      cy.get('[data-cy="screen-element-container"]').click();
+
+      // Step 4: Copy the selected element to the clipboard
+      cy.get('[data-cy="addToClipboard"]').should("be.visible");
+      cy.get('[data-cy="addToClipboard"]').click();
+      cy.get('[data-cy="addToClipboard"]').should("not.exist");
+    });
+  });
+
+  it("Paste clipboard item to a different screen", () => {
+    // Step 1: Visit the homepage and open the 'Clipboard' accordion
+    cy.visit("/");
+    cy.openAcordeonByLabel("Clipboard");
+
+    // Step 2: Drag clipboard item to the screen's drop zone
+    cy.get('[data-cy="controls-Clipboard"]').drag('[data-cy=screen-drop-zone]');
+
+    // Step 3: Verify that the item has been pasted correctly (1 element should be present)
+    cy.get('[data-cy="screen-element-container"]').should('have.length', 1);
+
+    // Step 4: Click on the pasted element to activate it
+    cy.get('[data-cy="screen-element-container"]').click();
+  });
+
+  it("Copy multicolumn element to clipboard", () => {
+    cy.window().then((win) => {
+      // Clear storage to remove any previous clipboard items
+      win.localStorage.clear();
+
+      // Step 1: Visit the homepage and open the 'Input Fields' and 'Content Fields' accordions
+      cy.visit("/");
+      cy.openAcordeonByLabel("Input Fields");
+      cy.openAcordeonByLabel("Content Fields");
+
+      // Step 2: Drag FormMultiColumn control to the screen's drop zone
+      cy.get("[data-cy=controls-FormMultiColumn]").drag("[data-cy=screen-drop-zone]", {
+        position: "bottom"
+      });
+
+      // Step 3: Add a TextArea control inside the multicolumn table
+      addControlInsideTable(1, nodeControls.formTextArea);
+
+      // Step 4: Click on the screen element container to select it
+      cy.get('[data-cy="screen-element-container"]').click();
+
+      // Step 5: Copy the multicolumn element to the clipboard
+      cy.get('[data-cy="addToClipboard"]').should("be.visible");
+      cy.get('[data-cy="addToClipboard"]').click();
+      cy.get('[data-cy="addToClipboard"]').should("not.exist");
+    });
+  });
+
+  it("Paste multicolumn clipboard item to a different screen", () => {
+    // Step 1: Visit the homepage and open the 'Clipboard' accordion
+    cy.visit("/");
+    cy.openAcordeonByLabel("Clipboard");
+
+    // Step 2: Drag clipboard item to the screen's drop zone
+    cy.get('[data-cy="controls-Clipboard"]').drag('[data-cy=screen-drop-zone]');
+
+    // Step 3: Verify the multicolumn element with TextArea exists (2 columns)
+    cy.get('[data-cy="screen-element-container"]').should('have.length', 1);
+    cy.get('[data-cy="screen-element-container"] .column-draggable').should('have.length', 2);
+    cy.get('[data-cy="screen-element-container"] .column-draggable').eq(1).find('textarea').should('exist');
+
+    // Step 4: Click on the screen element container to activate it
+    cy.get('[data-cy="screen-element-container"]').click();
+  });
+
+  it("Copy loop element to clipboard", () => {
+    cy.window().then((win) => {
+      // Clear storage to remove any previous clipboard items
+      win.localStorage.clear();
+
+      // Step 1: Visit the homepage and open the 'Input Fields' and 'Content Fields' accordions
+      cy.visit("/");
+      cy.openAcordeonByLabel("Input Fields");
+      cy.openAcordeonByLabel("Content Fields");
+
+      // Step 2: Drag FormLoop control to the screen's drop zone
+      cy.get("[data-cy=controls-FormLoop]").drag("[data-cy=screen-drop-zone]", {
+        position: "bottom"
+      });
+
+      // Step 3: Add a TextArea control inside the loop
+      addControlInsideLoop(1, nodeControls.formTextArea);
+
+      // Step 4: Click on the screen element container to select it
+      cy.get('[data-cy="screen-element-container"]').click({
+        position: "top"
+      });
+
+      // Step 5: Copy the loop element to the clipboard
+      cy.get('[data-cy="addToClipboard"]').should("be.visible");
+      cy.get('[data-cy="addToClipboard"]').click();
+      cy.get('[data-cy="addToClipboard"]').should("not.exist");
+    });
+  });
+
+  it("Paste loop clipboard item to a different screen", () => {
+    // Step 1: Visit the homepage and open the 'Clipboard' accordion
+    cy.visit("/");
+    cy.openAcordeonByLabel("Clipboard");
+
+    // Step 2: Drag clipboard item to the screen's drop zone
+    cy.get('[data-cy="controls-Clipboard"]').drag('[data-cy=screen-drop-zone]');
+
+    // Step 3: Verify the loop element with TextArea exists
+    cy.get('[data-cy="screen-element-container"]').should('have.length', 1);
+    cy.get('[data-cy="screen-element-container"] .column-draggable').should('have.length', 1);
+    cy.get('[data-cy="screen-element-container"] .column-draggable').eq(0).find('textarea').should('exist');
+
+    // Step 4: Click on the screen element container to activate it
+    cy.get('[data-cy="screen-element-container"]').click();
+  });
+
+  it("Copy element from inside multicolumn to clipboard", () => {
+    cy.window().then((win) => {
+      // Clear storage to remove any previous clipboard items
+      win.localStorage.clear();
+
+      // Step 1: Visit the homepage and open the 'Input Fields' and 'Content Fields' accordions
+      cy.visit("/");
+      cy.openAcordeonByLabel("Input Fields");
+      cy.openAcordeonByLabel("Content Fields");
+
+      // Step 2: Drag Multicolumn control to the screen's drop zone and add a TextArea inside
+      cy.get("[data-cy=controls-FormMultiColumn]").drag("[data-cy=screen-drop-zone]", {
+        position: "bottom"
+      });
+      addControlInsideTable(1, nodeControls.formTextArea);
+
+      // Step 3: Click on the textarea element inside the multicolumn to select it
+      cy.get('[data-cy="screen-element-container"] [class="control-item"]').click();
+
+      // Step 4: Copy the textarea element to the clipboard
+      cy.get('[data-cy="addToClipboard"]').should("be.visible");
+      cy.get('[data-cy="addToClipboard"]').click();
+      cy.get('[data-cy="addToClipboard"]').should("not.exist");
+    });
+  });
+
+  it("Paste clipboard item from inside multicolumn to a different screen", () => {
+    // Step 1: Visit the homepage and open the 'Clipboard' accordion
+    cy.visit("/");
+    cy.openAcordeonByLabel("Clipboard");
+
+    // Step 2: Drag clipboard item to the screen's drop zone
+    cy.get('[data-cy="controls-Clipboard"]').drag('[data-cy=screen-drop-zone]');
+
+    // Step 3: Verify that only a textarea was pasted (no multicolumn)
+    cy.get('[data-cy="screen-element-container"]').should('have.length', 1);
+    cy.get('[data-cy="screen-element-container"] .column-draggable').should('have.length', 0);
+    cy.get('[data-cy="screen-element-container"]').find('textarea').should('exist');
+
+    // Step 4: Click on the screen element container to activate it
+    cy.get('[data-cy="screen-element-container"]').click();
+  });
+
+});

From 0b8a8edfd58961f335fb4f9558d50e08cdf810be Mon Sep 17 00:00:00 2001
From: David Callizaya <davidcallizaya@gmail.com>
Date: Fri, 20 Sep 2024 10:39:08 -0400
Subject: [PATCH 31/46] Test can copy and paste multiple elements

---
 tests/e2e/specs/ClipboardDragPaste.spec.js | 49 ++++++++++++++++++++++
 1 file changed, 49 insertions(+)

diff --git a/tests/e2e/specs/ClipboardDragPaste.spec.js b/tests/e2e/specs/ClipboardDragPaste.spec.js
index 5b537956f..27d855938 100644
--- a/tests/e2e/specs/ClipboardDragPaste.spec.js
+++ b/tests/e2e/specs/ClipboardDragPaste.spec.js
@@ -180,4 +180,53 @@ describe("Clipboard Drag and Paste", () => {
     cy.get('[data-cy="screen-element-container"]').click();
   });
 
+  it("Copy two input element to clipboard", () => {
+    cy.window().then((win) => {
+      // Clear storage to remove any previous clipboard items
+      win.localStorage.clear();
+
+      // Step 1: Visit the homepage and open the 'Input Fields' accordion
+      cy.visit("/");
+      cy.openAcordeonByLabel("Input Fields");
+
+      // Step 2: Drag FormInput control to the screen's drop zone
+      cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
+        position: "bottom"
+      });
+
+      // Step 3: Click on the screen element container to select it
+      cy.get('[data-cy="screen-element-container"]').click();
+
+      // Step 4: Copy the selected element to the clipboard
+      cy.get('[data-cy="addToClipboard"]').should("be.visible");
+      cy.get('[data-cy="addToClipboard"]').click();
+      cy.get('[data-cy="addToClipboard"]').should("not.exist");
+
+      // Step 5: Drag a second FormInput control to the screen's drop zone
+      cy.get("[data-cy=controls-FormInput]").drag("[data-cy=editor-content]", {
+      });
+
+      // Step 6: Click on the screen element container to select it
+      cy.get('[data-cy="screen-element-container"]').eq(1).click();
+
+      // Step 7: Copy the selected element to the clipboard
+      cy.get('[data-cy="addToClipboard"]').should("be.visible");
+      cy.get('[data-cy="addToClipboard"]').click();
+      cy.get('[data-cy="addToClipboard"]').should("not.exist");
+    });
+  });
+
+  it("Paste clipboard items to a different screen", () => {
+    // Step 1: Visit the homepage and open the 'Clipboard' accordion
+    cy.visit("/");
+    cy.openAcordeonByLabel("Clipboard");
+
+    // Step 2: Drag clipboard item to the screen's drop zone
+    cy.get('[data-cy="controls-Clipboard"]').drag('[data-cy=screen-drop-zone]');
+
+    // Step 3: Verify that there are two input elements pasted
+    cy.get('[data-cy="screen-element-container"]').should('have.length', 2);
+    cy.get('[data-cy="screen-element-container"]').eq(0).find('input').should('exist');
+    cy.get('[data-cy="screen-element-container"]').eq(1).find('input').should('exist');
+  });
 });

From d5cbe8df0292a97294f5e0cb01725f533f9448ab Mon Sep 17 00:00:00 2001
From: David Callizaya <davidcallizaya@gmail.com>
Date: Fri, 20 Sep 2024 17:13:13 -0400
Subject: [PATCH 32/46] Implement clear clipboard button

---
 src/components/TabsBar.vue              | 11 +++++++++++
 src/components/editor/pagesDropdown.vue | 22 ++++++++++++++++++++--
 src/components/vue-form-builder.vue     |  8 ++++++++
 src/mixins/Clipboard.js                 |  8 ++++++++
 src/stories/PagesDropdown.stories.js    | 19 +++++++++++--------
 5 files changed, 58 insertions(+), 10 deletions(-)

diff --git a/src/components/TabsBar.vue b/src/components/TabsBar.vue
index 069a766cf..c52e795a1 100644
--- a/src/components/TabsBar.vue
+++ b/src/components/TabsBar.vue
@@ -58,6 +58,14 @@
         </div>
       </template>
     </b-tab>
+    <b-tab
+      class="h-100 w-100"
+      @click="clipboard"
+    >
+      <template #title>
+        {{ $t('Clear Clipboard') }}
+      </template>
+    </b-tab>
     <template #tabs-end>
       <div
         v-if="tabsListOverflow"
@@ -170,6 +178,9 @@ export default {
     this.checkTabsOverflow();
   },
   methods: {
+    clipboard() {
+      this.$emit('clearClipboard');
+    },
     tabOpened() {
       const pageIndex = this.localOpenedPages[this.activeTab];
       this.$emit("tab-opened", pageIndex);
diff --git a/src/components/editor/pagesDropdown.vue b/src/components/editor/pagesDropdown.vue
index 6e36f1b2d..02c956e78 100644
--- a/src/components/editor/pagesDropdown.vue
+++ b/src/components/editor/pagesDropdown.vue
@@ -19,7 +19,7 @@
     <!-- Option to add a new page -->
     <b-dropdown-item data-test="add-page" @click="onAddPage">
       <!-- Icon for adding a new page -->
-      <i class="fa fa-plus platform-dropdown-item-icon"></i>
+      <i class="fas fa-plus platform-dropdown-item-icon text-dark w-icon text-center"></i>
       <!-- Text for adding a new page -->
       {{ $t("Create Page") }}
     </b-dropdown-item>
@@ -27,11 +27,19 @@
     <!-- Option to see all pages -->
     <b-dropdown-item data-test="see-all-pages" @click="onSeeAllPages">
       <!-- Icon for seeing all pages -->
-      <i class="fa fa-eye platform-dropdown-item-icon"></i>
+      <i class="far fa-eye platform-dropdown-item-icon text-dark w-icon text-center"></i>
       <!-- Text for seeing all pages -->
       {{ $t("See all pages") }}
     </b-dropdown-item>
 
+    <!-- Option to open Clipboard page -->
+    <b-dropdown-item data-test="clipboard" @click="onClipboard" class="d-flex">
+      <!-- Icon for clipboard -->
+      <i class="far fa-clipboard platform-dropdown-item-icon text-dark w-icon text-center"></i>
+      <!-- Text for clipboard -->
+      {{ $t("Clipboard") }}
+    </b-dropdown-item>
+
     <!-- Divider between adding and viewing options -->
     <b-dropdown-divider></b-dropdown-divider>
 
@@ -100,6 +108,13 @@ export default {
       this.$emit("seeAllPages");
     },
 
+    /**
+     * Handle when user clicks on "Clipboard
+     */
+    onClipboard() {
+      this.$emit("clipboard");
+    },
+
     /**
      * Handler for when a specific page is clicked.
      * Emits the "clickPage" event with the selected page.
@@ -122,4 +137,7 @@ export default {
   // Style for the icons in dropdown items.
   color: #1572c2;
 }
+.w-icon {
+  width: 1.25rem;
+}
 </style>
diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 98974c640..2a282f77b 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -107,6 +107,7 @@
         :pages="config"
         :is-multi-page="showToolbar"
         @tab-opened="currentPage = $event"
+        @clearClipboard="clearClipboard"
       >
         <template #tabs-start>
           <pages-dropdown
@@ -115,6 +116,7 @@
             @addPage="$bvModal.show('addPageModal')"
             @clickPage="onClick"
             @seeAllPages="$bvModal.show('openSortable')"
+            @clipboard="openClipboard"
           />
         </template>
         <template #default="{ currentPage: tabPage }">
@@ -656,6 +658,9 @@ export default {
     };
   },
   computed: {
+    pagesAndClipboard() {
+      return [...this.config, [{name:"Clipboard", items: []}]];
+    },
     // Get clipboard items from Vuex store
     clipboardItems() {
       return this.$store.getters["clipboardModule/clipboardItems"];
@@ -810,6 +815,9 @@ export default {
     this.setGroupOrder(defaultGroupOrder);
   },
   methods: {
+    openClipboard() {
+      this.$refs.tabsBar.openPageByIndex(-1);
+    },
     isCurrentPageEmpty(currentPage) {
       return this.config[currentPage]?.items?.length === 0;
     },
diff --git a/src/mixins/Clipboard.js b/src/mixins/Clipboard.js
index 270ae2e30..2bf2279a4 100644
--- a/src/mixins/Clipboard.js
+++ b/src/mixins/Clipboard.js
@@ -99,5 +99,13 @@ export default {
       }
       screenConfig.forEach((item) => replaceInPage(item));
     },
+
+    /**
+     * Clear the clipboard
+     */
+    clearClipboard() {
+      this.$store.dispatch("clipboardModule/clearClipboard"); // Dispatch action to clear clipboard from the Vuex store
+      this.$root.$emit('update-clipboard');
+    },
   },
 };
diff --git a/src/stories/PagesDropdown.stories.js b/src/stories/PagesDropdown.stories.js
index ad676b0f7..fa74095fa 100644
--- a/src/stories/PagesDropdown.stories.js
+++ b/src/stories/PagesDropdown.stories.js
@@ -17,6 +17,7 @@ export default {
         @addPage="onAddPage"
         @clickPage="onClick"
         @seeAllPages="onSeeAllPages"
+        @clipboard="onClipboard"
       />
     `,
     data() {
@@ -31,7 +32,10 @@ export default {
       },
       onClick(index) {
         console.log("Click page item:", index);
-      }
+      },
+      onClipboard() {
+        console.log("Open clipboard");
+      },
     }
   })
 };
@@ -104,8 +108,8 @@ export const ClickInCreatePage = {
     await selectorAddPage.click(selectorAddPage);
   }
 };
-// Open the See all Pages
-export const ClickInSeeAllPages = {
+// Open the Clipboard
+export const ClickInClipboard = {
   args: {
     data: [{ name: "Page 1" }]
   },
@@ -114,19 +118,18 @@ export const ClickInSeeAllPages = {
     const selector = canvasElement.querySelector(
       "[data-test=page-dropdown] button"
     );
-    const selectorAddPage = canvasElement.querySelector(
-      "[data-test=see-all-pages]"
+    const clipboardOption = canvasElement.querySelector(
+      "[data-test=clipboard]"
     );
-    console.log(selectorAddPage);
     await selector.click(selector);
     await waitFor(
       () => {
         expect(canvas.getByTestId("page-dropdown")).toContainHTML(
-          "See all pages"
+          "Clipboard"
         );
       },
       { timeout: 1000 }
     );
-    await selectorAddPage.click(selectorAddPage);
+    await clipboardOption.click(clipboardOption);
   }
 };

From b0e86c1564685d594507497ed845b25e42956193 Mon Sep 17 00:00:00 2001
From: David Callizaya <davidcallizaya@gmail.com>
Date: Thu, 26 Sep 2024 10:04:23 -0400
Subject: [PATCH 33/46] Implement distributed storage for clipboard

---
 src/App.vue                           |   5 -
 src/components/vue-form-builder.vue   |   8 +-
 src/components/vue-form-renderer.vue  |   8 +-
 src/mixins/Clipboard.js               |  29 ++++--
 src/store/modules/ClipboardManager.js |  81 +++++++++++++++
 src/store/modules/clipboardModule.js  | 136 +++++++++++++++++++-------
 6 files changed, 204 insertions(+), 63 deletions(-)
 create mode 100644 src/store/modules/ClipboardManager.js

diff --git a/src/App.vue b/src/App.vue
index 12ddde3ac..28195ba49 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -626,11 +626,6 @@ export default {
       if (computed) {
         this.computed = JSON.parse(computed);
       }
-      if(savedClipboard) {
-        const clipboardsItems = JSON.parse(savedClipboard);
-
-        this.$store.dispatch("clipboardModule/addToClipboard", clipboardsItems);
-      }
     },
     saveToLocalStorage() {
       localStorage.setItem("savedConfig", JSON.stringify(this.config));
diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 2a282f77b..6a842fabd 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -658,9 +658,6 @@ export default {
     };
   },
   computed: {
-    pagesAndClipboard() {
-      return [...this.config, [{name:"Clipboard", items: []}]];
-    },
     // Get clipboard items from Vuex store
     clipboardItems() {
       return this.$store.getters["clipboardModule/clipboardItems"];
@@ -809,9 +806,6 @@ export default {
     this.$root.$on("ai-form-progress-updated", (progress, nonce) => {
       this.updateProgress(progress, nonce);
     });
-    this.$root.$on("update-clipboard", () => {
-      ProcessMaker.EventBus.$emit("save-clipboard", this.clipboardItems);
-    });
     this.setGroupOrder(defaultGroupOrder);
   },
   methods: {
@@ -1117,6 +1111,7 @@ export default {
       });
     },
     updateState() {
+      // paste the clipboard items into the current page
       this.replaceClipboardContent(this.config);
       this.$store.dispatch("undoRedoModule/pushState", {
         config: JSON.stringify(this.config),
@@ -1200,6 +1195,7 @@ export default {
     },
     duplicateItem(index) {
       const duplicate = _.cloneDeep(this.config[this.currentPage].items[index]);
+      this.updateUuids(duplicate);
       this.config[this.currentPage].items.push(duplicate);
     },
     openEditPageModal(index) {
diff --git a/src/components/vue-form-renderer.vue b/src/components/vue-form-renderer.vue
index 4e6a42a56..851746113 100644
--- a/src/components/vue-form-renderer.vue
+++ b/src/components/vue-form-renderer.vue
@@ -181,12 +181,8 @@ export default {
 
     this.containerObserver.observe(this.$refs.formRendererContainer);
     
-    ProcessMaker.EventBus.$on(
-      "save-clipboard",
-      (items) => {  
-        this.saveClipboarToLocalStorage(items);
-      },
-    );
+    // Initialize the clipboard module
+    this.$store.dispatch('clipboardModule/initializeClipboard');
   },
   methods: {
     ...mapActions("globalErrorsModule", [
diff --git a/src/mixins/Clipboard.js b/src/mixins/Clipboard.js
index 2bf2279a4..5908ebb35 100644
--- a/src/mixins/Clipboard.js
+++ b/src/mixins/Clipboard.js
@@ -65,6 +65,26 @@ export default {
       screenConfig.forEach((item) => replaceInPage(item));
     },
 
+    /**
+     * Setup or update UUID for the item and its children.
+     *
+     * @param {*} item Control item in the screen configuration
+     */
+    updateUuids(item) {
+      item.uuid = this.generateUUID();
+      if (item.items) {
+        item.items.forEach(item => {
+          if (item instanceof Array) {
+            // multi-column each item in the column
+            item.forEach(this.updateUuids)
+          } else {
+            // loop through children
+            this.updateUuids(item);
+          }
+        })
+      }
+    },
+
     /**
      * Find { component: "Clipboard" } and replace with the clipboard content.
      */
@@ -76,20 +96,13 @@ export default {
         throw new Error("Expected a screen configuration array");
       }
 
-      // Navigate each page and replace the clipboard component with the clipboard content
-      const replaceUuids = (item) => {
-        item.uuid = this.generateUUID();
-        if (item.items) {
-          item.items.forEach(replaceUuids);
-        }
-      }
       const replaceInPage = (page) => {
         page.items.forEach((item, index) => {
           if (item.component === clipboardComponentName) {
             // clone clipboard content to avoid modifying the original
             const clipboardContent = _.cloneDeep(this.$store.getters["clipboardModule/clipboardItems"]);
             // replace uuids in clipboard content
-            clipboardContent.forEach(replaceUuids);
+            clipboardContent.forEach(this.updateUuids);
             page.items.splice(index, 1, ...clipboardContent);
           }
           if (item.items) {
diff --git a/src/store/modules/ClipboardManager.js b/src/store/modules/ClipboardManager.js
new file mode 100644
index 000000000..1e9fc89df
--- /dev/null
+++ b/src/store/modules/ClipboardManager.js
@@ -0,0 +1,81 @@
+import axios from 'axios';
+
+/**
+ * ClipboardManager class to handle saving to and loading from
+ * localStorage and the server.
+ */
+class ClipboardManager {
+
+  /**
+   * Callable property function that loads the clipboard from server.
+   */
+  static loadFromServerFn = null;
+
+  /**
+   * Callable property function that saves the clipboard to server.
+   */
+  static saveToServerFn = null;
+
+  /**
+   * Saves the clipboard items to localStorage.
+   * @param {Array} clipboard - The clipboard items to save.
+   */
+  static saveToLocalStorage(clipboard) {
+    localStorage.setItem('clipboard', JSON.stringify(clipboard));
+  }
+
+  /**
+   * Loads the clipboard items from localStorage.
+   * @returns {Array} The clipboard items.
+   */
+  static loadFromLocalStorage() {
+    const clipboardData = localStorage.getItem('clipboard');
+    if (clipboardData) {
+      try {
+        return JSON.parse(clipboardData);
+      } catch (e) {
+        console.error('Failed to parse clipboard data from localStorage:', e);
+        return [];
+      }
+    } else {
+      return [];
+    }
+  }
+
+  /**
+   * Saves the clipboard items to the server via POST /clipboard/create_or_update.
+   * @param {Array} clipboard - The clipboard items to save.
+   * @returns {Promise}
+   */
+  static saveToServer(clipboard) {
+    // return axios.post('/clipboard/create_or_update', { clipboard });
+    if (!ClipboardManager.saveToServerFn) {
+      return Promise.resolve();
+    }
+    return ClipboardManager.saveToServerFn(clipboard);
+  }
+
+  /**
+   * Loads the clipboard items from the server via GET /clipboard/get_by_user.
+   * @returns {Promise<Array>} The clipboard items.
+   */
+  static loadFromServer() {
+    if (!ClipboardManager.loadFromServerFn) {
+      return Promise.resolve([]);
+    }
+    return ClipboardManager.loadFromServerFn()
+      .then(clipboard => {
+        if (Array.isArray(clipboard)) {
+          return clipboard;
+        } else {
+          throw new Error('Invalid server response: Expected array for clipboard content');
+        }
+      })
+      .catch(error => {
+        console.error('Failed to load clipboard from server:', error);
+        return [];
+      });
+  }
+}
+
+export default ClipboardManager;
diff --git a/src/store/modules/clipboardModule.js b/src/store/modules/clipboardModule.js
index 2478d9dbd..1c5ab0a40 100644
--- a/src/store/modules/clipboardModule.js
+++ b/src/store/modules/clipboardModule.js
@@ -1,12 +1,13 @@
 import { v4 as uuidv4 } from 'uuid';
+import ClipboardManager from './ClipboardManager';
 
 /**
- * Vuex module for managing clipboard state.
+ * Vuex module for managing clipboard state with localStorage synchronization.
  */
 const clipboardModule = {
   /**
    * Indicates that this module is namespaced, which means
-   * all its state, mutations, actions, and getters will be 
+   * all its state, mutations, actions, and getters will be
    * scoped to this module.
    */
   namespaced: true,
@@ -17,7 +18,10 @@ const clipboardModule = {
    */
   state() {
     return {
-      clipboard: [],  // Array to store clipboard content
+      /**
+       * @type {Array} Array to store clipboard items.
+       */
+      clipboard: [],
     };
   },
 
@@ -33,14 +37,13 @@ const clipboardModule = {
     clipboardItems: state => state.clipboard,
 
     /**
-     * Checks if an item with a specific id is present in the clipboard.
+     * Checks if an item with a specific uuid is present in the clipboard.
      * @param {Object} state - The state of the module.
-     * @param {Object} item - The item to check (it can contain an id or any unique property).
-     * @returns {boolean} True if the item with the same id is in the clipboard, false otherwise.
+     * @returns {Function} Function to check item presence.
      */
     isInClipboard: state => item => {
       if (!item || !item.uuid) {
-        // If the item is invalid or doesn't have an id, return false
+        // If the item is invalid or doesn't have an uuid, return false
         return false;
       }
       return state.clipboard.some(clipboardItem => clipboardItem.uuid === item.uuid);
@@ -52,15 +55,24 @@ const clipboardModule = {
    */
   mutations: {
     /**
-     * Adds an items to the clipboard.
+     * Sets the entire clipboard state.
+     * @param {Object} state - The state of the module.
+     * @param {Array} clipboard - The new clipboard array.
+     */
+    SET_CLIPBOARD(state, clipboard) {
+      if (!Array.isArray(clipboard)) {
+        throw new Error('Clipboard content must be an array');
+      }
+      state.clipboard.splice(0, state.clipboard.length, ...clipboard);
+    },
+
+    /**
+     * Adds items to the clipboard.
      * @param {Object} state - The state of the module.
      * @param {any} items - The items to add.
      */
     ADD_TO_CLIPBOARD(state, items) {
-      // Check if the input is an array, if not, wrap it as an array
       const itemsToAdd = Array.isArray(items) ? items : [items];
-
-      // Add each item only if it's not already in the clipboard
       itemsToAdd.forEach(item => {
         if (!item.uuid) {
           item.uuid = uuidv4();
@@ -78,11 +90,14 @@ const clipboardModule = {
      */
     REMOVE_FROM_CLIPBOARD(state, item) {
       if (!item || !item.uuid) {
-        console.error('Item or item id is missing');
+        console.error('Item or item uuid is missing');
         return;
       }
-      
-      state.clipboard = state.clipboard.filter(clipboardItem => clipboardItem.uuid !== item.uuid);
+      // state.clipboard = state.clipboard.filter(clipboardItem => clipboardItem.uuid !== item.uuid);
+      const index = state.clipboard.findIndex(clipboardItem => clipboardItem.uuid === item.uuid);
+      if (index !== -1) {
+        state.clipboard.splice(index, 1);
+      }
     },
 
     /**
@@ -90,7 +105,7 @@ const clipboardModule = {
      * @param {Object} state - The state of the module.
      */
     CLEAR_CLIPBOARD(state) {
-      state.clipboard = [];
+      state.clipboard.splice(0, state.clipboard.length);
     },
   },
 
@@ -99,46 +114,91 @@ const clipboardModule = {
    */
   actions: {
     /**
-     * Adds an item to the clipboard by committing the corresponding mutation.
-     * @param {Object} context - The context object containing commit.
-     * @param {any} item - The item to add to the clipboard.
+     * Initializes the clipboard by loading from localStorage and server,
+     * and setting up the storage event listener.
+     * @param {Object} context - The Vuex context.
+     */
+    initializeClipboard({ commit }) {
+      // Load from localStorage
+      const clipboard = ClipboardManager.loadFromLocalStorage();
+      commit('SET_CLIPBOARD', clipboard);
+
+      // Load from server and update state
+      ClipboardManager.loadFromServer().then(serverClipboard => {
+        if (serverClipboard.length > 0) {
+          commit('SET_CLIPBOARD', serverClipboard);
+          ClipboardManager.saveToLocalStorage(serverClipboard);
+        }
+      });
+
+      // Set up storage event listener
+      window.addEventListener('storage', event => {
+        if (event.key === 'clipboard') {
+          const clipboard = ClipboardManager.loadFromLocalStorage();
+          commit('SET_CLIPBOARD', clipboard);
+        }
+      });
+    },
+
+    /**
+     * Setup saveToServerFn
+     * @param {Object} context - The Vuex context.
+     * @param {Function} saveToServerFn - The function to save the clipboard to the server.
+     */
+    setupSaveToServerFn({ commit }, saveToServerFn) {
+      ClipboardManager.saveToServerFn = saveToServerFn;
+    },
+
+    /**
+     * Setup loadFromServerFn
+     * @param {Object} context - The Vuex context.
+     * @param {Function} loadFromServerFn - The function to load the clipboard from the server.
+     */
+    setupLoadFromServerFn({ commit }, loadFromServerFn) {
+      ClipboardManager.loadFromServerFn = loadFromServerFn;
+    },
+
+    /**
+     * Adds an item to the clipboard.
+     * Updates localStorage and the server.
+     * @param {Object} context - The Vuex context.
+     * @param {any} item - The item to add.
      */
-    addToClipboard({ commit }, item) {
+    addToClipboard({ commit, state }, item) {
       if (!item) {
         throw new Error('Item is missing');
       }
       commit('ADD_TO_CLIPBOARD', item);
+      // Save to localStorage and server
+      ClipboardManager.saveToLocalStorage(state.clipboard);
+      ClipboardManager.saveToServer(state.clipboard);
     },
 
     /**
-     * Removes an item from the clipboard by committing the corresponding mutation.
-     * @param {Object} context - The context object containing commit.
-     * @param {any} item - The item to remove from the clipboard.
+     * Removes an item from the clipboard.
+     * Updates localStorage and the server.
+     * @param {Object} context - The Vuex context.
+     * @param {any} item - The item to remove.
      */
-    removeFromClipboard({ commit }, item) {
+    removeFromClipboard({ commit, state }, item) {
       commit('REMOVE_FROM_CLIPBOARD', item);
+      // Save to localStorage and server
+      ClipboardManager.saveToLocalStorage(state.clipboard);
+      ClipboardManager.saveToServer(state.clipboard);
     },
 
     /**
-     * Clears all items from the clipboard by committing the corresponding mutation.
-     * @param {Object} context - The context object containing commit.
+     * Clears all items from the clipboard.
+     * Updates localStorage and the server.
+     * @param {Object} context - The Vuex context.
      */
-    clearClipboard({ commit }) {
+    clearClipboard({ commit, state }) {
       commit('CLEAR_CLIPBOARD');
+      // Save to localStorage and server
+      ClipboardManager.saveToLocalStorage(state.clipboard);
+      ClipboardManager.saveToServer(state.clipboard);
     },
   },
-
-  /**
-   * Methods are not a standard part of Vuex modules but can be used for custom functionality.
-   */
-  methods: {
-    /**
-     * Emits a custom event using the EventBus.
-     */
-    emitChanges() {
-      window.ProcessMaker.EventBus.$emit("screen-change");
-    }
-  },
 };
 
 export default clipboardModule;

From 37f639c59984eecb234fbb5942e1290f7eb73605 Mon Sep 17 00:00:00 2001
From: David Callizaya <davidcallizaya@gmail.com>
Date: Thu, 26 Sep 2024 10:47:00 -0400
Subject: [PATCH 34/46] Remove unused code

---
 src/store/modules/ClipboardManager.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/store/modules/ClipboardManager.js b/src/store/modules/ClipboardManager.js
index 1e9fc89df..81020e696 100644
--- a/src/store/modules/ClipboardManager.js
+++ b/src/store/modules/ClipboardManager.js
@@ -1,5 +1,3 @@
-import axios from 'axios';
-
 /**
  * ClipboardManager class to handle saving to and loading from
  * localStorage and the server.

From 7d7947e8dce461f30539253d17f2373610b0d2ea Mon Sep 17 00:00:00 2001
From: David Callizaya <davidcallizaya@gmail.com>
Date: Thu, 26 Sep 2024 10:47:14 -0400
Subject: [PATCH 35/46] Test ClipboardManager

---
 tests/e2e/specs/ClipboardManager.spec.js | 74 ++++++++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 tests/e2e/specs/ClipboardManager.spec.js

diff --git a/tests/e2e/specs/ClipboardManager.spec.js b/tests/e2e/specs/ClipboardManager.spec.js
new file mode 100644
index 000000000..e6724b0a3
--- /dev/null
+++ b/tests/e2e/specs/ClipboardManager.spec.js
@@ -0,0 +1,74 @@
+import ClipboardManager from "../../../src/store/modules/ClipboardManager";
+
+describe("Clipboard Manager", () => {
+
+  it("Should be updated when adding and removing an input field to/from the clipboard", () => {
+    cy.visit("/");
+    cy.openAcordeonByLabel("Input Fields");
+
+    // Step 1: Dragging FormInput control to screen drop zone
+    cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
+      position: "bottom"
+    });
+
+    // Step 2: Click on the screen element container to activate it
+    cy.get('[data-cy="screen-element-container"]').click();
+
+    // Step 3: Verify 'Add to Clipboard' button is visible and then click it
+    cy.get('[data-cy="addToClipboard"]').should("be.visible");
+    cy.get('[data-cy="addToClipboard"]').click();
+    cy.get('[data-cy="addToClipboard"]').should("not.exist").then(() => {
+      // Verify it was added to the clipboard storage
+      const content = ClipboardManager.loadFromLocalStorage();
+      expect(content.length).to.equal(1);
+    });
+
+    // Step 4: Verify 'Remove from Clipboard' button is visible after adding to clipboard and then click it
+    cy.get('[data-cy="removeFromClipboard"]').should("be.visible");
+    cy.get('[data-cy="removeFromClipboard"]').click();
+    cy.get('[data-cy="removeFromClipboard"]').should("not.exist").then(() => {
+      // Verify it was removed from the clipboard storage
+      const content = ClipboardManager.loadFromLocalStorage();
+      expect(content.length).to.equal(0);
+    });
+  });
+
+  it("ClipboardManager can clear the local storage", () => {
+    cy.window().then((win) => {
+      // Clear storage to remove any previous clipboard items
+      ClipboardManager.saveToLocalStorage([]);
+
+      // Step 1: Visit the homepage and open the 'Input Fields' accordion
+      cy.visit("/");
+      cy.openAcordeonByLabel("Input Fields");
+
+      // Step 2: Drag FormInput control to the screen's drop zone
+      cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
+        position: "bottom"
+      });
+
+      // Step 3: Click on the screen element container to select it
+      cy.get('[data-cy="screen-element-container"]').click();
+
+      // Step 4: Copy the selected element to the clipboard
+      cy.get('[data-cy="addToClipboard"]').should("be.visible");
+      cy.get('[data-cy="addToClipboard"]').click();
+      cy.get('[data-cy="addToClipboard"]').should("not.exist");
+    });
+  });
+
+  it("Paste clipboard item to a different screen", () => {
+    // Step 1: Visit the homepage and open the 'Clipboard' accordion
+    cy.visit("/");
+    cy.openAcordeonByLabel("Clipboard");
+
+    // Step 2: Drag clipboard item to the screen's drop zone
+    cy.get('[data-cy="controls-Clipboard"]').drag('[data-cy=screen-drop-zone]');
+
+    // Step 3: Verify that the item has been pasted correctly (1 element should be present)
+    cy.get('[data-cy="screen-element-container"]').should('have.length', 1);
+
+    // Step 4: Click on the pasted element to activate it
+    cy.get('[data-cy="screen-element-container"]').click();
+  });
+});
\ No newline at end of file

From 15c2809530be0aab6bf6b8be284c077f60882e93 Mon Sep 17 00:00:00 2001
From: David Callizaya <davidcallizaya@gmail.com>
Date: Thu, 26 Sep 2024 11:22:38 -0400
Subject: [PATCH 36/46] Add property to show the clear clipboard

---
 src/components/TabsBar.vue          | 8 ++++++++
 src/components/vue-form-builder.vue | 1 +
 2 files changed, 9 insertions(+)

diff --git a/src/components/TabsBar.vue b/src/components/TabsBar.vue
index c52e795a1..279fc5f0e 100644
--- a/src/components/TabsBar.vue
+++ b/src/components/TabsBar.vue
@@ -59,6 +59,7 @@
       </template>
     </b-tab>
     <b-tab
+      v-if="showClipboard"
       class="h-100 w-100"
       @click="clipboard"
     >
@@ -123,6 +124,13 @@ export default {
     isMultiPage: {
       type: Boolean,
       default: true
+    },
+    /**
+     * Show clipboard tab
+     */
+    showClipboard: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 6a842fabd..43f564286 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -106,6 +106,7 @@
         ref="tabsBar"
         :pages="config"
         :is-multi-page="showToolbar"
+        show-clipboard="true"
         @tab-opened="currentPage = $event"
         @clearClipboard="clearClipboard"
       >

From b7fad6abf06be38a6c07e2a277f9f04a1055dbe9 Mon Sep 17 00:00:00 2001
From: David Callizaya <davidcallizaya@gmail.com>
Date: Thu, 26 Sep 2024 12:53:28 -0400
Subject: [PATCH 37/46] Fix property assignation

---
 src/components/vue-form-builder.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 43f564286..95ea5a3c1 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -106,7 +106,7 @@
         ref="tabsBar"
         :pages="config"
         :is-multi-page="showToolbar"
-        show-clipboard="true"
+        :show-clipboard="true"
         @tab-opened="currentPage = $event"
         @clearClipboard="clearClipboard"
       >

From e3ff3e66e451ec635c535c20591927e32152df67 Mon Sep 17 00:00:00 2001
From: David Callizaya <davidcallizaya@gmail.com>
Date: Fri, 27 Sep 2024 09:49:27 -0400
Subject: [PATCH 38/46] Refactor TabsBar component to add clipboard tab

---
 src/components/TabsBar.vue          | 37 +++++++++++++++++++++++--
 src/components/vue-form-builder.vue | 43 ++++++++++++++++++++---------
 src/mixins/Clipboard.js             | 12 ++++++++
 3 files changed, 76 insertions(+), 16 deletions(-)

diff --git a/src/components/TabsBar.vue b/src/components/TabsBar.vue
index 279fc5f0e..4d7bbf77b 100644
--- a/src/components/TabsBar.vue
+++ b/src/components/TabsBar.vue
@@ -60,11 +60,26 @@
     </b-tab>
     <b-tab
       v-if="showClipboard"
+      ref="clipboard"
       class="h-100 w-100"
+      name="clipboard"
       @click="clipboard"
     >
       <template #title>
-        {{ $t('Clear Clipboard') }}
+        {{ $t('Clipboard') }}
+        <span
+          :data-test="`close-clipboard-tab`"
+          class="close-tab"
+          role="link"
+          @click.stop="closeClipboard"
+        >
+          <i class="fas fa-times" />
+        </span>
+      </template>
+      <template #default>
+        <div class="h-100 w-100" data-test="tab-content">
+          <slot :current-page="clipboardPageIndex" />
+        </div>
       </template>
     </b-tab>
     <template #tabs-end>
@@ -144,6 +159,9 @@ export default {
     };
   },
   computed: {
+    clipboardPageIndex() {
+      return this.pages.length;
+    },
     validLocalOpenedPages() {
       return this.localOpenedPages.filter((page) => this.pages[page]);
     }
@@ -186,12 +204,25 @@ export default {
     this.checkTabsOverflow();
   },
   methods: {
+    openClipboard() {
+      if (this.$refs.clipboard) {
+        this.$refs.clipboard.activate();
+      }
+    },
+    closeClipboard() {
+      this.$emit('close-clipboard');
+    },
     clipboard() {
-      this.$emit('clearClipboard');
+      this.$emit('clear-clipboard');
     },
     tabOpened() {
       const pageIndex = this.localOpenedPages[this.activeTab];
-      this.$emit("tab-opened", pageIndex);
+      const isInClipboard = this.activeTab  === this.$refs.tabs.tabs.length - 1;
+      if (isInClipboard) {
+        this.$emit("tab-opened", this.clipboardPageIndex);
+      } else {
+        this.$emit("tab-opened", pageIndex);
+      }
     },
     pageNumber(index) {
       return index + 1;
diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 95ea5a3c1..29e8dd034 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -8,7 +8,8 @@
         no-body
         class="h-100 rounded-0 border-top-0 border-bottom-0 border-left-0"
       >
-        <b-input-group size="sm" style="height: 42px">
+      [{{currentPage}}]
+      <b-input-group size="sm" style="height: 42px">
           <b-input-group-prepend>
             <span
               class="input-group-text rounded-0 border-left-0 border-top-0 border-bottom-0"
@@ -106,9 +107,10 @@
         ref="tabsBar"
         :pages="config"
         :is-multi-page="showToolbar"
-        :show-clipboard="true"
+        :show-clipboard="showClipboard"
         @tab-opened="currentPage = $event"
-        @clearClipboard="clearClipboard"
+        @close-clipboard="closeClipboard"
+        @clear-clipboard="clearClipboard"
       >
         <template #tabs-start>
           <pages-dropdown
@@ -155,7 +157,7 @@
             data-cy="editor-content"
             class="h-100"
             ghost-class="form-control-ghost"
-            :value="config[tabPage].items"
+            :value="extendedPages[tabPage].items"
             v-bind="{
               group: { name: 'controls' },
               swapThreshold: 0.5
@@ -163,7 +165,7 @@
             @input="updateConfig"
           >
             <div
-              v-for="(element, index) in config[tabPage].items"
+              v-for="(element, index) in extendedPages[tabPage].items"
               :key="index"
               class="control-item mt-4 mb-4"
               :class="{
@@ -196,11 +198,11 @@
                     <clipboard-button
                       :index="index"
                       :config="element.config"
-                      :isInClipboard="isInClipboard(config[currentPage].items[index])"
+                      :isInClipboard="isInClipboard(extendedPages[currentPage].items[index])"
                       :addTitle="$t('Add to clipboard')"
                       :removeTitle="$t('Remove from clipboard')"
-                      @addToClipboard="addToClipboard(config[currentPage].items[index])"
-                      @removeFromClipboard="removeFromClipboard(config[currentPage].items[index])"
+                      @addToClipboard="addToClipboard(extendedPages[currentPage].items[index])"
+                      @removeFromClipboard="removeFromClipboard(extendedPages[currentPage].items[index])"
                     />
                     <button
                       v-if="isAiSection(element) && aiPreview(element)"
@@ -260,11 +262,11 @@
                     <clipboard-button
                       :index="index"
                       :config="element.config"
-                      :isInClipboard="isInClipboard(config[currentPage].items[index])"
+                      :isInClipboard="isInClipboard(extendedPages[currentPage].items[index])"
                       :addTitle="$t('Add to clipboard')"
                       :removeTitle="$t('Remove from clipboard')"
-                      @addToClipboard="addToClipboard(config[currentPage].items[index])"
-                      @removeFromClipboard="removeFromClipboard(config[currentPage].items[index])"
+                      @addToClipboard="addToClipboard(extendedPages[currentPage].items[index])"
+                      @removeFromClipboard="removeFromClipboard(extendedPages[currentPage].items[index])"
                     />
                     <button
                       class="btn btn-sm btn-secondary mr-2"
@@ -364,7 +366,7 @@
                   ''
                 )}`"
                 :builder="builder"
-                :form-config="config"
+                :form-config="extendedPages"
                 :screen-type="screenType"
                 :current-page="currentPage"
                 :selected-control="selected"
@@ -617,7 +619,13 @@ export default {
       config[0].name = this.title;
     }
 
+    const clipboardPage = {
+      name: this.$t("Clipboard"),
+      items: this.$store.getters["clipboardModule/clipboardItems"],
+    };
+
     return {
+      clipboardPage,
       showAddPageValidations: false,
       openedPages: [0],
       currentPage: 0,
@@ -660,6 +668,12 @@ export default {
   },
   computed: {
     // Get clipboard items from Vuex store
+    extendedPages() {
+      return [
+        ...this.config,
+        this.clipboardPage,
+      ];
+    },
     clipboardItems() {
       return this.$store.getters["clipboardModule/clipboardItems"];
     },
@@ -811,7 +825,10 @@ export default {
   },
   methods: {
     openClipboard() {
-      this.$refs.tabsBar.openPageByIndex(-1);
+      this.showClipboard = true;
+      this.$nextTick(() => {
+        this.$refs.tabsBar.openClipboard();
+      });
     },
     isCurrentPageEmpty(currentPage) {
       return this.config[currentPage]?.items?.length === 0;
diff --git a/src/mixins/Clipboard.js b/src/mixins/Clipboard.js
index 5908ebb35..74055c53c 100644
--- a/src/mixins/Clipboard.js
+++ b/src/mixins/Clipboard.js
@@ -4,6 +4,11 @@ import _ from "lodash";
 const clipboardComponentName = "Clipboard";
 
 export default {
+  data() {
+    return {
+      showClipboard: false,
+    };
+  },
   methods: {
     /**
      * Adds a deep-cloned item to the clipboard, ensuring the original item is unmodified.
@@ -120,5 +125,12 @@ export default {
       this.$store.dispatch("clipboardModule/clearClipboard"); // Dispatch action to clear clipboard from the Vuex store
       this.$root.$emit('update-clipboard');
     },
+
+    /**
+     * Close Clipboard
+     */
+    closeClipboard() {
+      this.showClipboard = false;
+    },
   },
 };

From c5fdf75f546798eb22c09316a1a0c0314e315151 Mon Sep 17 00:00:00 2001
From: David Callizaya <davidcallizaya@gmail.com>
Date: Tue, 1 Oct 2024 09:03:28 -0400
Subject: [PATCH 39/46] Remove non used event

---
 src/components/TabsBar.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/TabsBar.vue b/src/components/TabsBar.vue
index 4d7bbf77b..d02d7a21d 100644
--- a/src/components/TabsBar.vue
+++ b/src/components/TabsBar.vue
@@ -63,7 +63,6 @@
       ref="clipboard"
       class="h-100 w-100"
       name="clipboard"
-      @click="clipboard"
     >
       <template #title>
         {{ $t('Clipboard') }}
@@ -212,9 +211,6 @@ export default {
     closeClipboard() {
       this.$emit('close-clipboard');
     },
-    clipboard() {
-      this.$emit('clear-clipboard');
-    },
     tabOpened() {
       const pageIndex = this.localOpenedPages[this.activeTab];
       const isInClipboard = this.activeTab  === this.$refs.tabs.tabs.length - 1;

From a8690d0829de9b834f85f4ebc69ea30e0fa549be Mon Sep 17 00:00:00 2001
From: David Callizaya <davidcallizaya@gmail.com>
Date: Tue, 1 Oct 2024 09:04:16 -0400
Subject: [PATCH 40/46] Add function to clear the clipboard

---
 src/mixins/Clipboard.js | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/mixins/Clipboard.js b/src/mixins/Clipboard.js
index 74055c53c..ef9478e19 100644
--- a/src/mixins/Clipboard.js
+++ b/src/mixins/Clipboard.js
@@ -121,9 +121,26 @@ export default {
     /**
      * Clear the clipboard
      */
-    clearClipboard() {
-      this.$store.dispatch("clipboardModule/clearClipboard"); // Dispatch action to clear clipboard from the Vuex store
-      this.$root.$emit('update-clipboard');
+    async clearClipboard() {
+      const confirm = await this.$bvModal.msgBoxConfirm(
+        this.$t("Deleting the clipboard will permanently remove all information, and you will need to copy all components again."),
+        {
+          title: this.$t("Are you sure you want to clear clipboard?"),
+          size: "md",
+          buttonSize: "sm",
+          okVariant: "primary py-2 px-4",
+          cancelVariant: "outline-secondary py-2 px-4",
+          okTitle: this.$t("Confirm"),
+          cancelTitle: this.$t("Cancel"),
+          footerClass: "p-2 border-0",
+          hideHeaderClose: true,
+          centered: true,
+        }
+      );
+      if (confirm) {
+        this.$store.dispatch("clipboardModule/clearClipboard");
+        this.$root.$emit('update-clipboard');
+      }
     },
 
     /**

From dddbd2d250a7ce6ea9c0345a62ba23b0c9092aa9 Mon Sep 17 00:00:00 2001
From: David Callizaya <davidcallizaya@gmail.com>
Date: Tue, 1 Oct 2024 09:04:56 -0400
Subject: [PATCH 41/46] Implemente Clipboard special page

---
 src/components/vue-form-builder.vue  | 42 ++++++++++++++++++++++++----
 src/store/modules/clipboardModule.js |  7 +++++
 2 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 29e8dd034..9ce40ee2e 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -8,7 +8,6 @@
         no-body
         class="h-100 rounded-0 border-top-0 border-bottom-0 border-left-0"
       >
-      [{{currentPage}}]
       <b-input-group size="sm" style="height: 42px">
           <b-input-group-prepend>
             <span
@@ -77,6 +76,8 @@
                     :boundary="'viewport'"
                     :data-cy="`controls-${element.component}`"
                     class="gray-text"
+                    :disabled="!canDragControl(element)"
+                    @mousedown="disableEnableDragControl(element, $event)"
                   >
                     <i
                       v-if="element.config && element.config.icon"
@@ -110,7 +111,6 @@
         :show-clipboard="showClipboard"
         @tab-opened="currentPage = $event"
         @close-clipboard="closeClipboard"
-        @clear-clipboard="clearClipboard"
       >
         <template #tabs-start>
           <pages-dropdown
@@ -123,6 +123,13 @@
           />
         </template>
         <template #default="{ currentPage: tabPage }">
+          <b-button
+            v-if="isClipboardPage(currentPage)"
+            variant="link"
+            @click="clearClipboard"
+          >
+            {{ $t('Clear All') }}
+          </b-button>
           <div
             v-if="isCurrentPageEmpty(tabPage)"
             data-cy="screen-drop-zone"
@@ -196,6 +203,7 @@
                   {{ element.config.name || element.label || $t("Field Name") }}
                   <div class="ml-auto">
                     <clipboard-button
+                      v-if="!isClipboardPage(currentPage)"
                       :index="index"
                       :config="element.config"
                       :isInClipboard="isInClipboard(extendedPages[currentPage].items[index])"
@@ -260,6 +268,7 @@
                   {{ element.config.name || $t("Variable Name") }}
                   <div class="ml-auto">
                     <clipboard-button
+                      v-if="!isClipboardPage(currentPage)"
                       :index="index"
                       :config="element.config"
                       :isInClipboard="isInClipboard(extendedPages[currentPage].items[index])"
@@ -667,7 +676,9 @@ export default {
     };
   },
   computed: {
-    // Get clipboard items from Vuex store
+    isCurrentPageClipboard() {
+      return this.isClipboardPage(this.currentPage);
+    },
     extendedPages() {
       return [
         ...this.config,
@@ -824,6 +835,18 @@ export default {
     this.setGroupOrder(defaultGroupOrder);
   },
   methods: {
+    isClipboardPage(page) {
+      return page === this.config.length;
+    },
+    disableEnableDragControl(control, event) {
+      if (!this.canDragControl(control)) {
+        event.preventDefault();
+      }
+    },
+    canDragControl(control) {
+      const isDragAndPaste = control.component === "Clipboard";
+      return !(isDragAndPaste && this.isClipboardPage(this.currentPage));
+    },
     openClipboard() {
       this.showClipboard = true;
       this.$nextTick(() => {
@@ -1135,6 +1158,8 @@ export default {
         config: JSON.stringify(this.config),
         currentPage: this.currentPage
       });
+      this.replaceClipboardContent([this.clipboardPage]);
+      this.$store.dispatch("clipboardModule/pushState", this.clipboardPage.items);
     },
     async undo() {
       this.inspect();
@@ -1159,7 +1184,7 @@ export default {
       );
     },
     updateConfig(items) {
-      this.config[this.currentPage].items = items;
+      this.extendedPages[this.currentPage].items = items;
       this.updateState();
     },
     hasError(element) {
@@ -1207,14 +1232,14 @@ export default {
     },
     deleteItem(index) {
       // Remove the item from the array in currentPage
-      this.config[this.currentPage].items.splice(index, 1);
+      this.extendedPages[this.currentPage].items.splice(index, 1);
       this.inspection.inspector.splice(0, this.inspection.inspector.length);
       this.updateState();
     },
     duplicateItem(index) {
       const duplicate = _.cloneDeep(this.config[this.currentPage].items[index]);
       this.updateUuids(duplicate);
-      this.config[this.currentPage].items.push(duplicate);
+      this.extendedPages[this.currentPage].items.push(duplicate);
     },
     openEditPageModal(index) {
       this.editPageIndex = index;
@@ -1317,6 +1342,7 @@ export default {
         currentPage: this.currentPage,
         deletedPage: true
       });
+      this.$store.dispatch("clipboardModule/pushState", this.clipboardPage.items);
     },
     inspect(element = {}) {
       this.inspection = element;
@@ -1623,4 +1649,8 @@ $side-bar-font-size: 0.875rem;
   font-size: 15px;
   font-weight: normal;
 }
+.gray-text.disabled {
+  cursor: not-allowed; /* Cambia el cursor cuando se pasa por encima */
+  pointer-events: all; /* Permite que el pseudo-elemento reciba eventos del ratón */
+}
 </style>
diff --git a/src/store/modules/clipboardModule.js b/src/store/modules/clipboardModule.js
index 1c5ab0a40..a2bff4b5a 100644
--- a/src/store/modules/clipboardModule.js
+++ b/src/store/modules/clipboardModule.js
@@ -174,6 +174,13 @@ const clipboardModule = {
       ClipboardManager.saveToServer(state.clipboard);
     },
 
+    pushState({ commit, state }, clipboard) {
+      commit('SET_CLIPBOARD', clipboard);
+      // Save to localStorage and server
+      ClipboardManager.saveToLocalStorage(state.clipboard);
+      ClipboardManager.saveToServer(state.clipboard);
+    },
+
     /**
      * Removes an item from the clipboard.
      * Updates localStorage and the server.

From e433b1ea65b309e74fb6571d3ea2a88ba1311c92 Mon Sep 17 00:00:00 2001
From: David Callizaya <davidcallizaya@gmail.com>
Date: Tue, 1 Oct 2024 09:05:09 -0400
Subject: [PATCH 42/46] Disable toolbar when on clipboard page

---
 src/App.vue                      |  1 +
 src/components/ScreenToolbar.vue | 17 +++++++++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 28195ba49..06ca969ae 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -50,6 +50,7 @@
 
           <b-col v-if="displayBuilder && !displayPreview" class="text-right">
             <screen-toolbar
+              :disabled="$refs.builder?.isCurrentPageClipboard"
               @undo="$refs.builder.undo()"
               @redo="$refs.builder.redo()"
               @open-calc="openComputedProperties"
diff --git a/src/components/ScreenToolbar.vue b/src/components/ScreenToolbar.vue
index a1815d844..a149b95dd 100644
--- a/src/components/ScreenToolbar.vue
+++ b/src/components/ScreenToolbar.vue
@@ -4,7 +4,7 @@
       <b-button
         class="screen-toolbar-button"
         variant="link"
-        :disabled="!canUndo"
+        :disabled="!canUndo || disabled"
         data-cy="toolbar-undo"
         @click="$emit('undo')"
       >
@@ -14,7 +14,7 @@
       <b-button
         class="screen-toolbar-button"
         variant="link"
-        :disabled="!canRedo"
+        :disabled="!canRedo || disabled"
         data-cy="toolbar-redo"
         @click="$emit('redo')"
       >
@@ -25,6 +25,7 @@
         type="button"
         class="screen-toolbar-button"
         variant="link"
+        :disabled="disabled"
         :title="$t('Calculated Properties')"
         data-cy="topbar-calcs"
         @click="$emit('open-calc')"
@@ -36,6 +37,7 @@
         type="button"
         class="screen-toolbar-button"
         variant="link"
+        :disabled="disabled"
         :title="$t('Custom CSS')"
         data-cy="topbar-css"
         @click="$emit('open-customCss')"
@@ -47,6 +49,7 @@
         type="button"
         class="screen-toolbar-button"
         variant="link"
+        :disabled="disabled"
         :title="$t('Watchers')"
         data-cy="topbar-watchers"
         @click="$emit('open-watchers')"
@@ -58,6 +61,7 @@
         type="button"
         class="screen-toolbar-button"
         variant="outlined-secondary"
+        :disabled="disabled"
         :popper-opts="{ placement: 'bottom-end' }"
         data-cy="topbar-options"
       >
@@ -77,6 +81,15 @@
 
 <script>
 export default {
+  props: {
+    /**
+     * Whether the toolbar is disabled or not
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
   data() {
     return {
       showToolbar: true

From 01d42c6b1e833696995cfaee405114079a3c7db4 Mon Sep 17 00:00:00 2001
From: David Callizaya <davidcallizaya@gmail.com>
Date: Tue, 1 Oct 2024 09:47:23 -0400
Subject: [PATCH 43/46] Fix tab current page and clipboard index

---
 src/components/TabsBar.vue          |  2 +-
 src/components/vue-form-builder.vue | 18 +++++++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/TabsBar.vue b/src/components/TabsBar.vue
index d02d7a21d..be765fde4 100644
--- a/src/components/TabsBar.vue
+++ b/src/components/TabsBar.vue
@@ -213,7 +213,7 @@ export default {
     },
     tabOpened() {
       const pageIndex = this.localOpenedPages[this.activeTab];
-      const isInClipboard = this.activeTab  === this.$refs.tabs.tabs.length - 1;
+      const isInClipboard = (this.activeTab  === this.$refs.tabs.tabs.length - 1) && this.showClipboard;
       if (isInClipboard) {
         this.$emit("tab-opened", this.clipboardPageIndex);
       } else {
diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 9ce40ee2e..3e195519d 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -124,7 +124,7 @@
         </template>
         <template #default="{ currentPage: tabPage }">
           <b-button
-            v-if="isClipboardPage(currentPage)"
+            v-if="isClipboardPage(tabPage)"
             variant="link"
             @click="clearClipboard"
           >
@@ -203,14 +203,14 @@
                   {{ element.config.name || element.label || $t("Field Name") }}
                   <div class="ml-auto">
                     <clipboard-button
-                      v-if="!isClipboardPage(currentPage)"
+                      v-if="!isClipboardPage(tabPage)"
                       :index="index"
                       :config="element.config"
-                      :isInClipboard="isInClipboard(extendedPages[currentPage].items[index])"
+                      :isInClipboard="isInClipboard(extendedPages[tabPage].items[index])"
                       :addTitle="$t('Add to clipboard')"
                       :removeTitle="$t('Remove from clipboard')"
-                      @addToClipboard="addToClipboard(extendedPages[currentPage].items[index])"
-                      @removeFromClipboard="removeFromClipboard(extendedPages[currentPage].items[index])"
+                      @addToClipboard="addToClipboard(extendedPages[tabPage].items[index])"
+                      @removeFromClipboard="removeFromClipboard(extendedPages[tabPage].items[index])"
                     />
                     <button
                       v-if="isAiSection(element) && aiPreview(element)"
@@ -268,14 +268,14 @@
                   {{ element.config.name || $t("Variable Name") }}
                   <div class="ml-auto">
                     <clipboard-button
-                      v-if="!isClipboardPage(currentPage)"
+                      v-if="!isClipboardPage(tabPage)"
                       :index="index"
                       :config="element.config"
-                      :isInClipboard="isInClipboard(extendedPages[currentPage].items[index])"
+                      :isInClipboard="isInClipboard(extendedPages[tabPage].items[index])"
                       :addTitle="$t('Add to clipboard')"
                       :removeTitle="$t('Remove from clipboard')"
-                      @addToClipboard="addToClipboard(extendedPages[currentPage].items[index])"
-                      @removeFromClipboard="removeFromClipboard(extendedPages[currentPage].items[index])"
+                      @addToClipboard="addToClipboard(extendedPages[tabPage].items[index])"
+                      @removeFromClipboard="removeFromClipboard(extendedPages[tabPage].items[index])"
                     />
                     <button
                       class="btn btn-sm btn-secondary mr-2"

From fcd2244539c6d756d49bd265ff7e1cc9655c0142 Mon Sep 17 00:00:00 2001
From: David Callizaya <davidcallizaya@gmail.com>
Date: Wed, 2 Oct 2024 10:05:26 -0400
Subject: [PATCH 44/46] Remove commented code

---
 src/store/modules/clipboardModule.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/store/modules/clipboardModule.js b/src/store/modules/clipboardModule.js
index a2bff4b5a..13a64e3e0 100644
--- a/src/store/modules/clipboardModule.js
+++ b/src/store/modules/clipboardModule.js
@@ -93,7 +93,6 @@ const clipboardModule = {
         console.error('Item or item uuid is missing');
         return;
       }
-      // state.clipboard = state.clipboard.filter(clipboardItem => clipboardItem.uuid !== item.uuid);
       const index = state.clipboard.findIndex(clipboardItem => clipboardItem.uuid === item.uuid);
       if (index !== -1) {
         state.clipboard.splice(index, 1);

From 5c3d14eba8942359be0c91fa2d2117a441f53cd4 Mon Sep 17 00:00:00 2001
From: David Callizaya <davidcallizaya@gmail.com>
Date: Wed, 9 Oct 2024 15:41:24 -0400
Subject: [PATCH 45/46] Add missing close tag

---
 src/components/vue-form-builder.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 33690c557..538881cc0 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -401,7 +401,8 @@
             </b-collapse>
           </template>
         </b-card-body>
-      </b-card>
+        </div>
+    </b-card>
     </b-col>
 
     <!-- Modals -->

From d38c1d9b40c813017c5c5260f1fc4ce83d8ad81e Mon Sep 17 00:00:00 2001
From: David Callizaya <davidcallizaya@gmail.com>
Date: Wed, 9 Oct 2024 16:12:46 -0400
Subject: [PATCH 46/46] Fix test to use label to open a control acordeon

---
 tests/e2e/specs/ScreenTemplateSection.spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/e2e/specs/ScreenTemplateSection.spec.js b/tests/e2e/specs/ScreenTemplateSection.spec.js
index 1155fffae..7eff4e347 100644
--- a/tests/e2e/specs/ScreenTemplateSection.spec.js
+++ b/tests/e2e/specs/ScreenTemplateSection.spec.js
@@ -109,7 +109,7 @@ it("Displays Shared Templates when Shared Templates button is clicked", () => {
     });
 });
 
-it("Is hidden when an Inspector Panel should open", () => {
+it.only("Is hidden when an Inspector Panel should open", () => {
   cy.visit("/");
 
   cy.get("[data-cy=screen-templates]").click();
@@ -118,7 +118,7 @@ it("Is hidden when an Inspector Panel should open", () => {
   );
   
   cy.setPreviewDataInput({ name: "" });
-  cy.openAcordeon("collapse-1");
+  cy.openAcordeonByLabel("Input Fields");
   cy.get("[data-cy=controls-FormInput]").drag("[data-cy=screen-drop-zone]", {
     position: "bottom"
   });