From df4c3015fb0c9b6efc895cf3b8714056ebca84ec Mon Sep 17 00:00:00 2001
From: pmoskrojas <69815070+pmoskrojas@users.noreply.github.com>
Date: Tue, 21 Nov 2023 17:39:09 -0400
Subject: [PATCH 01/12] FOUR-11744 / FOUR-11895 / FOUR-12198

---
 src/components/vue-form-builder.vue | 180 +++++++++++++++++-----------
 1 file changed, 112 insertions(+), 68 deletions(-)

diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 185ba3d99..3a40beb45 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -1,56 +1,58 @@
 <template>
-  <b-row class="h-100 m-0">
+  <b-row class="custom-row h-100 m-0">
     <!-- Controls -->
     <b-col class="overflow-hidden h-100 p-0 controls-column">
       <b-card
         no-body
         class="h-100 rounded-0 border-top-0 border-bottom-0 border-left-0"
       >
-        <b-input-group size="sm">
-          <b-input-group-prepend>
-            <b-input-group-text
-              class="filter-icon border-left-0 border-top-0 rounded-0"
-            >
-              <i class="fas fa-filter" />
-            </b-input-group-text>
+        <b-input-group size="sm" style="height: 42px">
+          <b-input-group-prepend style="width;: 100px">
+            <span class="input-group-text rounded-0"
+              ><i class="fas fa-search"></i
+            ></span>
           </b-input-group-prepend>
-
           <b-form-input
             v-model="filterQuery"
-            class="border-top-0 border-right-0 rounded-0"
+            class="border-top-0 border-left-0 border-right-0 rounded-0"
             type="text"
-            :placeholder="$t('Filter Controls')"
-          />
+            size="lg"
+            style="height: 42px"
+            :placeholder="$t('Search Here')"
+          >
+          </b-form-input>
         </b-input-group>
 
         <b-card-body no-body class="p-0 overflow-auto">
-          <draggable
-            v-if="renderControls"
-            id="controls"
-            v-model="filteredControls"
-            data-cy="controls"
-            v-bind="{
-              sort: false,
-              group: { name: 'controls', pull: 'clone', put: false }
-            }"
-            :clone="cloneControl"
-            class="controls list-group w-auto list-group-flush"
-          >
-            <b-list-group-item
-              v-for="(element, index) in filteredControls"
-              :key="index"
-              :data-cy="'controls-' + element.component"
-              :class="{ 'ai-control': element.component === 'AiSection'}"
+          <b-list-group>
+            <draggable
+              v-if="renderControls"
+              id="controls"
+              v-model="filteredControls"
+              data-cy="controls"
+              v-bind="{
+                sort: false,
+                group: { name: 'controls', pull: 'clone', put: false }
+              }"
+              :clone="cloneControl"
+              class="controls list-group w-auto list-group-flush"
             >
-              <i v-if="element.config.icon" :class="element.config.icon" />
-              <span v-html="element.config.svg" class="svg-icon"></span>
-              {{ $t(element.label) }}
-            </b-list-group-item>
-
-            <li v-if="!filteredControls.length" class="list-group-item">
-              <slot />
-            </li>
-          </draggable>
+              <b-list-group-item
+                v-for="(element, index) in filteredControls"
+                :key="index"
+                :data-cy="'controls-' + element.component"
+                :class="{ 'ai-control': element.component === 'AiSection' }"
+              >
+                <i v-if="element.config.icon" :class="element.config.icon" />
+                <span class="svg-icon" v-html="element.config.svg"></span>
+                {{ $t(element.label) }}
+              </b-list-group-item>
+
+              <li v-if="!filteredControls.length" class="list-group-item">
+                <slot />
+              </li>
+            </draggable>
+          </b-list-group>
         </b-card-body>
       </b-card>
     </b-col>
@@ -81,7 +83,7 @@
             data-cy="toolbar-edit"
             @click="openEditPageModal(currentPage)"
           >
-            <i class="far fa-edit p-0" />
+            <i class="far fa-edit" />
           </b-button>
 
           <b-button
@@ -93,7 +95,7 @@
             data-cy="toolbar-remove"
             @click="confirmDelete()"
           >
-            <i class="far fa-trash-alt p-0" />
+            <i class="far fa-trash-alt" />
           </b-button>
 
           <b-button
@@ -105,7 +107,7 @@
             data-cy="toolbar-add"
             @click="originalPageName = null"
           >
-            <i class="fas fa-plus p-0" />
+            <i class="fas fa-plus" />
           </b-button>
         </div>
 
@@ -129,7 +131,11 @@
         <span class="mb-3" v-html="dragElementIcon"></span>
         <h3>{{ $t("Place your controls here.") }}</h3>
         <p>
-          {{ $t("To begin creating a screen, drag and drop items from the Controls Menu on the left.") }}
+          {{
+            $t(
+              "To begin creating a screen, drag and drop items from the Controls Menu on the left."
+            )
+          }}
         </p>
         <!-- {{ $t("Drag an element here") }} -->
       </div>
@@ -168,7 +174,7 @@
             <div
               v-if="selected === element"
               class="card-header form-element-header d-flex align-items-center"
-              :class="{ 'pulse': isAiSection(element) && aiPreview(element) }"
+              :class="{ pulse: isAiSection(element) && aiPreview(element) }"
             >
               <i class="fas fa-arrows-alt-v mr-1 text-muted" />
               <i
@@ -178,8 +184,8 @@
               />
               <span
                 v-if="element.config.svg"
-                v-html="element.config.svg"
                 class="svg-icon mr-2 ml-1"
+                v-html="element.config.svg"
               ></span>
               {{ element.config.name || element.label || $t("Field Name") }}
               <div class="ml-auto">
@@ -485,7 +491,7 @@ export default {
     MultipleUploadsCheckbox,
     defaultValueEditor,
     ...inspector,
-    ...renderer,
+    ...renderer
   },
   mixins: [HasColorProperty, testing],
   props: {
@@ -510,8 +516,8 @@ export default {
       type: Object
     },
     processId: {
-      default: 0,
-    },
+      default: 0
+    }
   },
   data() {
     const config = this.initialConfig || defaultConfig;
@@ -570,40 +576,73 @@ export default {
       return this.config.length > 1;
     },
     filteredControls() {
+      const priorityLabels = [
+        "AI Generated",
+        "Line Input",
+        "Select List",
+        "Submit Button",
+        "Textarea",
+        "Date Picker",
+        "Checkbox",
+        "Photo/Video",
+        "Signature",
+        "Rich Text",
+        "Multicolumn / Table",
+        "Image",
+        "Record List",
+        "Loop",
+        "Nested Screen",
+        "Page Navigation",
+        "File Upload",
+        "File Download",
+        "File Preview",
+        "Bootstrap Component",
+        "Bootstrap wrapper",
+        "Captcha",
+        "Google Places",
+        "Saved Search Chart"
+      ];
+
       const excludedLabels = ["Bootstrap Wrapper", "Bootstrap Component"];
 
       const filtered = this.controls.filter((control) => {
-        return control.label.toLowerCase().includes(this.filterQuery.toLowerCase());
-      });
-
-      const excluded = filtered.filter((control) => {
-        return excludedLabels.includes(control.label);
+        return control.label
+          .toLowerCase()
+          .includes(this.filterQuery.toLowerCase());
       });
 
       const included = filtered.filter((control) => {
         return !excludedLabels.includes(control.label);
       });
 
-      const sorted = included.sort((a, b) => {
-        return this.collator.compare(a.label, b.label);
-      });
+      const prioritySorted = included.sort((a, b) => {
+        const indexA = priorityLabels.indexOf(a.label);
+        const indexB = priorityLabels.indexOf(b.label);
 
-      return [...sorted, ...excluded].sort((a, b) => {
-        const textA = a.label.toLowerCase();
-        const textB = b.label.toLowerCase();
-        if (textA < textB) {
+        if (indexA !== -1 && indexB !== -1) {
+          return indexA - indexB;
+        }
+        if (indexA !== -1) {
           return -1;
         }
-        return textA > textB ? 1 : 0;
+        if (indexB !== -1) {
+          return 1;
+        }
+        return this.collator.compare(a.label, b.label);
+      });
+
+      const excluded = included.filter((control) => {
+        return excludedLabels.includes(control.label);
       });
+
+      return [...prioritySorted, ...excluded];
     },
     isCurrentPageEmpty() {
       return this.config[this.currentPage].items.length === 0;
     },
     showToolbar() {
       return this.screenType === formTypes.form;
-    },
-    
+    }
   },
   watch: {
     config: {
@@ -826,7 +865,7 @@ export default {
               : "");
           item.config = {
             content:
-              "<div style=\"" + style + "\">" + item.config.label + "</div>",
+              '<div style="' + style + '">' + item.config.label + "</div>",
             interactive: true
           };
         }
@@ -1088,7 +1127,8 @@ export default {
       // Generate Variable Name
       if (
         _.findIndex(control.inspector, keyNameProperty) !== -1 ||
-        control.component === "FormLoop") {
+        control.component === "FormLoop"
+      ) {
         [this.variables, copy.config.name] = this.generator.generate(
           this.config,
           copy["editor-control"] ? copy["editor-control"] : copy.component
@@ -1182,6 +1222,10 @@ export default {
 </script>
 
 <style>
+.custom-row {
+  height: 80vh;
+  margin: 0;
+}
 .prevent-interaction {
   pointer-events: none;
 }
@@ -1298,15 +1342,15 @@ $side-bar-font-size: 0.875rem;
   top: 4rem;
 }
 .ai-section-card {
-  border-color: #8AB8FF;
+  border-color: #8ab8ff;
 }
 
 .ai-section-card .card-header {
-  background: #CBDFFF;
+  background: #cbdfff;
 }
 
 .ai-control {
-  background: #FFF4D3;
+  background: #fff4d3;
 }
 
 .pulse {
@@ -1321,4 +1365,4 @@ $side-bar-font-size: 0.875rem;
     box-shadow: 0 0 0 13px rgba(0, 0, 0, 0);
   }
 }
-</style>
+</style>
\ No newline at end of file

From 82e0e890fbbfa74b181fe127db0edae213317d21 Mon Sep 17 00:00:00 2001
From: pmoskrojas <69815070+pmoskrojas@users.noreply.github.com>
Date: Mon, 27 Nov 2023 09:31:02 -0400
Subject: [PATCH 02/12] Fix Comments

---
 src/components/vue-form-builder.vue | 27 ++++++++++++++++++++-------
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 3a40beb45..97324f8e8 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -8,7 +8,7 @@
       >
         <b-input-group size="sm" style="height: 42px">
           <b-input-group-prepend style="width;: 100px">
-            <span class="input-group-text rounded-0"
+            <span class="input-group-text rounded-0 border-left-0 border-top-0"
               ><i class="fas fa-search"></i
             ></span>
           </b-input-group-prepend>
@@ -41,9 +41,15 @@
                 v-for="(element, index) in filteredControls"
                 :key="index"
                 :data-cy="'controls-' + element.component"
-                :class="{ 'ai-control': element.component === 'AiSection' }"
+                :class="{
+                  'ai-control': element.component === 'AiSection',
+                  'gray-text': true
+                }"
               >
-                <i v-if="element.config.icon" :class="element.config.icon" />
+                <i
+                  v-if="element.config.icon"
+                  :class="['icon', element.config.icon]"
+                ></i>
                 <span class="svg-icon" v-html="element.config.svg"></span>
                 {{ $t(element.label) }}
               </b-list-group-item>
@@ -597,13 +603,13 @@ export default {
         "File Download",
         "File Preview",
         "Bootstrap Component",
-        "Bootstrap wrapper",
+        "Bootstrap Wrapper",
         "Captcha",
         "Google Places",
         "Saved Search Chart"
       ];
 
-      const excludedLabels = ["Bootstrap Wrapper", "Bootstrap Component"];
+      const excludedLabels = [""];
 
       const filtered = this.controls.filter((control) => {
         return control.label
@@ -865,7 +871,7 @@ export default {
               : "");
           item.config = {
             content:
-              '<div style="' + style + '">' + item.config.label + "</div>",
+              "<div style=\"" + style + "\">" + item.config.label + "</div>",
             interactive: true
           };
         }
@@ -1222,6 +1228,13 @@ export default {
 </script>
 
 <style>
+.gray-text {
+  color: gray;
+}
+
+.icon {
+  color: gray;
+}
 .custom-row {
   height: 80vh;
   margin: 0;
@@ -1365,4 +1378,4 @@ $side-bar-font-size: 0.875rem;
     box-shadow: 0 0 0 13px rgba(0, 0, 0, 0);
   }
 }
-</style>
\ No newline at end of file
+</style>

From 79fad4e02ca7b2f2b3c76ae6818fa5889043abb7 Mon Sep 17 00:00:00 2001
From: pmoskrojas <69815070+pmoskrojas@users.noreply.github.com>
Date: Mon, 27 Nov 2023 09:34:21 -0400
Subject: [PATCH 03/12] Fix Comments (Search icon color)

---
 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 97324f8e8..27e80cb9c 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -9,7 +9,7 @@
         <b-input-group size="sm" style="height: 42px">
           <b-input-group-prepend style="width;: 100px">
             <span class="input-group-text rounded-0 border-left-0 border-top-0"
-              ><i class="fas fa-search"></i
+              ><i class="fas fa-search icon"></i
             ></span>
           </b-input-group-prepend>
           <b-form-input

From 5314011e8698af4d2133e01d63f3e6abb354b968 Mon Sep 17 00:00:00 2001
From: pmoskrojas <69815070+pmoskrojas@users.noreply.github.com>
Date: Tue, 28 Nov 2023 15:32:45 -0400
Subject: [PATCH 04/12] FOUR-12201: Adding Accordion to Control Menu and fix
 some details on Search Bar

---
 src/components/vue-form-builder.vue | 179 ++++++++++++++++++++++------
 1 file changed, 140 insertions(+), 39 deletions(-)

diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 27e80cb9c..f259bc072 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/valid-v-for -->
 <template>
   <b-row class="custom-row h-100 m-0">
     <!-- Controls -->
@@ -7,14 +8,14 @@
         class="h-100 rounded-0 border-top-0 border-bottom-0 border-left-0"
       >
         <b-input-group size="sm" style="height: 42px">
-          <b-input-group-prepend style="width;: 100px">
-            <span class="input-group-text rounded-0 border-left-0 border-top-0"
-              ><i class="fas fa-search icon"></i
-            ></span>
+          <b-input-group-prepend>
+            <span class="input-group-text rounded-0 border-left-0 border-top-0">
+              <i class="fas fa-search icon"></i>
+            </span>
           </b-input-group-prepend>
           <b-form-input
             v-model="filterQuery"
-            class="border-top-0 border-left-0 border-right-0 rounded-0"
+            class="border-0 rounded-0"
             type="text"
             size="lg"
             style="height: 42px"
@@ -24,41 +25,65 @@
         </b-input-group>
 
         <b-card-body no-body class="p-0 overflow-auto">
-          <b-list-group>
-            <draggable
-              v-if="renderControls"
-              id="controls"
-              v-model="filteredControls"
-              data-cy="controls"
-              v-bind="{
-                sort: false,
-                group: { name: 'controls', pull: 'clone', put: false }
-              }"
-              :clone="cloneControl"
-              class="controls list-group w-auto list-group-flush"
+          <!-- Accordion Bootstrap -->
+          <template v-for="(group, index) in controlGroups">
+            <b-button
+              v-if="filteredControlsGrouped[group.key].length > 0"
+              v-b-toggle="`collapse-${index}`"
+              class="w-100 rounded-0 text-left"
+              style="
+                font-size: smaller;
+                height: 42px;
+                color: grey;
+                border-color: rgb(224, 224, 224);
+                background-color: rgb(235, 238, 242);
+              "
+              @click="toggleCollapse(index)"
             >
-              <b-list-group-item
-                v-for="(element, index) in filteredControls"
-                :key="index"
-                :data-cy="'controls-' + element.component"
-                :class="{
-                  'ai-control': element.component === 'AiSection',
-                  'gray-text': true
-                }"
+              {{ group.label
+              }}<b-icon
+                :icon="isCollapsed[index] ? 'chevron-down' : 'chevron-up'"
+                class="float-right"
+              />
+            </b-button>
+            <b-collapse :id="`collapse-${index}`" class="mt-2">
+              <b-list-group
+                v-if="filteredControlsGrouped[group.key].length > 0"
               >
-                <i
-                  v-if="element.config.icon"
-                  :class="['icon', element.config.icon]"
-                ></i>
-                <span class="svg-icon" v-html="element.config.svg"></span>
-                {{ $t(element.label) }}
-              </b-list-group-item>
-
-              <li v-if="!filteredControls.length" class="list-group-item">
-                <slot />
-              </li>
-            </draggable>
-          </b-list-group>
+                <draggable
+                  v-if="renderControls"
+                  id="controls"
+                  v-model="filteredControls"
+                  data-cy="controls"
+                  v-bind="{
+                    sort: false,
+                    group: { name: 'controls', pull: 'clone', put: false }
+                  }"
+                  :clone="cloneControl"
+                  class="controls list-group w-auto list-group-flush"
+                >
+                  <b-list-group-item
+                    v-for="(element, elementIndex) in filteredControlsGrouped[
+                      group.key
+                    ]"
+                    :key="elementIndex"
+                    :data-cy="`controls-${element.component}`"
+                    :class="{ 'ai-control': element.component === 'AiSection' }"
+                  >
+                    <i
+                      v-if="element.config.icon"
+                      :class="element.config.icon"
+                    />
+                    <span class="svg-icon" v-html="element.config.svg"></span>
+                    {{ $t(element.label) }}
+                  </b-list-group-item>
+                  <li v-if="!filteredControls.length" class="list-group-item">
+                    <slot />
+                  </li>
+                </draggable>
+              </b-list-group>
+            </b-collapse>
+          </template>
         </b-card-body>
       </b-card>
     </b-col>
@@ -565,7 +590,27 @@ export default {
       language: "en",
       collator: null,
       editorContentKey: 0,
-      cancelledJobs: []
+      cancelledJobs: [],
+
+      filteredControlsGrouped: {
+        AIAssistant: [],
+        InputFields: [],
+        ContentFields: [],
+        Navigation: [],
+        Files: [],
+        Advanced: []
+      },
+
+      controlGroups: [
+        { key: "AIAssistant", label: "AI Assistant" },
+        { key: "InputFields", label: "Input Fields" },
+        { key: "ContentFields", label: "Content Fields" },
+        { key: "Navigation", label: "Navigation" },
+        { key: "Files", label: "Files" },
+        { key: "Advanced", label: "Advanced" }
+      ],
+
+      isCollapsed: new Array(6).fill(true)
     };
   },
   computed: {
@@ -687,6 +732,13 @@ export default {
       ) {
         this.addDefaultAiControl();
       }
+    },
+
+    filteredControls: {
+      handler(newVal) {
+        this.groupFilteredControls(newVal);
+      },
+      deep: true
     }
   },
   created() {
@@ -732,6 +784,55 @@ export default {
     });
   },
   methods: {
+    toggleCollapse(index) {
+      this.$set(this.isCollapsed, index, !this.isCollapsed[index]);
+    },
+    groupFilteredControls(controls) {
+      this.filteredControlsGrouped = {
+        AIAssistant: controls.filter(
+          (control) => control.label === "AI Generated"
+        ),
+        InputFields: controls.filter((control) =>
+          [
+            "Line Input",
+            "Select List",
+            "Submit Button",
+            "Textarea",
+            "Date Picker",
+            "Checkbox",
+            "Photo/Video",
+            "Signature"
+          ].includes(control.label)
+        ),
+        ContentFields: controls.filter((control) =>
+          [
+            "Rich Text",
+            "Multicolumn / Table",
+            "Image",
+            "Record List",
+            "Loop",
+            "Nested Screen"
+          ].includes(control.label)
+        ),
+        Navigation: controls.filter(
+          (control) => control.label === "Page Navigation"
+        ),
+        Files: controls.filter((control) =>
+          ["File Upload", "File Downloa", "File Preview"].includes(
+            control.label
+          )
+        ),
+        Advanced: controls.filter((control) =>
+          [
+            "Bootstrap Component",
+            "Bootstrap Wrapper",
+            "Captcha",
+            "Google Places",
+            "Saved Search Chart"
+          ].includes(control.label)
+        )
+      };
+    },
     refreshContent() {
       this.editorContentKey++;
     },

From c4059cbd280d8b4f60142db5a2c532f5c465abab Mon Sep 17 00:00:00 2001
From: pmoskrojas <69815070+pmoskrojas@users.noreply.github.com>
Date: Thu, 30 Nov 2023 16:57:01 -0400
Subject: [PATCH 05/12] Adding Balloon Popover and refactor code for optimizing
 performance

---
 src/components/vue-form-builder.vue | 146 ++++++++++++++++++----------
 1 file changed, 92 insertions(+), 54 deletions(-)

diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index f259bc072..37d4c2857 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -67,6 +67,8 @@
                       group.key
                     ]"
                     :key="elementIndex"
+                    v-b-popover.hover.top="element.popoverContent"
+                    :boundary="'viewport'"
                     :data-cy="`controls-${element.component}`"
                     :class="{ 'ai-control': element.component === 'AiSection' }"
                   >
@@ -508,6 +510,80 @@ const defaultConfig = [
   }
 ];
 
+function filterControlsByLabel(controls, labels) {
+  return controls.filter((control) => labels.includes(control.label));
+}
+
+const controlGroups = {
+  AIAssistant: ["AI Generated"],
+  InputFields: [
+    "Line Input",
+    "Select List",
+    "Submit Button",
+    "Textarea",
+    "Date Picker",
+    "Checkbox",
+    "Photo/Video",
+    "Signature"
+  ],
+  ContentFields: [
+    "Rich Text",
+    "Multicolumn / Table",
+    "Image",
+    "Record List",
+    "Loop",
+    "Nested Screen"
+  ],
+  Navigation: ["Page Navigation"],
+  Files: ["File Upload", "File Download", "File Preview"],
+  Advanced: [
+    "Bootstrap Component",
+    "Bootstrap Wrapper",
+    "Captcha",
+    "Google Places",
+    "Saved Search Chart"
+  ]
+};
+
+const popoverContentMap = {
+  "AI Generated":
+    "Generate single fields or entire forms with our generative assistant",
+  "Line Input":
+    "Collect a string of text and format it as one of several data types",
+  "Select List": "Collect options from a list, as radio butttons or dropdowns",
+  "Submit Button": "Add an action to submit your form or update a field",
+  // eslint-disable-next-line prettier/prettier
+  "Textarea": "Collect a multi-line string of text, to allow for extensive, richly formatted responses",
+  "Date Picker": "Collect a date or date/time",
+  // eslint-disable-next-line prettier/prettier
+  "Checkbox": "Add a checkbox or toggle for true/false responses",
+  "Photo/Video": "Capture a photo or a Video straight from a camera device",
+  // eslint-disable-next-line prettier/prettier
+  "Signature": "Add a signature box to collect a hand-drawn signature image",
+  "Rich Text": "Use a Rich Text Editor to add HTML-formatted",
+  "Multicolumn / Table": "Organize and group your content in columns",
+  // eslint-disable-next-line prettier/prettier
+  "Image": "Upload an image to your screen",
+  "Record List": "Upload an image to your screen",
+  // eslint-disable-next-line prettier/prettier
+  "Loop": "Format content in a table structure and allow for adding rows",
+  "Nested Screen": "Add a repeatable section of content",
+  "Page Navigation": "Add and reuse another Form within this Form",
+  "File Upload":
+    "Add special buttons that link between subpages within this Form",
+  "File Download": "Collect files uploaded into the Form",
+  "File Preview": "Offer a File download",
+  "Bootstrap Component":
+    "Add a Preview section that displays the content of a File",
+  "Bootstrap Wrapper":
+    "Wrap an existing subpage within this Form into a Bootstrap Vue component	",
+  // eslint-disable-next-line prettier/prettier
+  "Captcha":
+    "Wrap an existing subpage within this Form into a Bootstrap Vue component	",
+  "Google Places": "Collect an address using Google's location search",
+  "Saved Search Chart": "Add a chart from one of your Saved Searches"
+};
+
 export default {
   components: {
     draggable,
@@ -592,15 +668,6 @@ export default {
       editorContentKey: 0,
       cancelledJobs: [],
 
-      filteredControlsGrouped: {
-        AIAssistant: [],
-        InputFields: [],
-        ContentFields: [],
-        Navigation: [],
-        Files: [],
-        Advanced: []
-      },
-
       controlGroups: [
         { key: "AIAssistant", label: "AI Assistant" },
         { key: "InputFields", label: "Input Fields" },
@@ -788,50 +855,21 @@ export default {
       this.$set(this.isCollapsed, index, !this.isCollapsed[index]);
     },
     groupFilteredControls(controls) {
-      this.filteredControlsGrouped = {
-        AIAssistant: controls.filter(
-          (control) => control.label === "AI Generated"
-        ),
-        InputFields: controls.filter((control) =>
-          [
-            "Line Input",
-            "Select List",
-            "Submit Button",
-            "Textarea",
-            "Date Picker",
-            "Checkbox",
-            "Photo/Video",
-            "Signature"
-          ].includes(control.label)
-        ),
-        ContentFields: controls.filter((control) =>
-          [
-            "Rich Text",
-            "Multicolumn / Table",
-            "Image",
-            "Record List",
-            "Loop",
-            "Nested Screen"
-          ].includes(control.label)
-        ),
-        Navigation: controls.filter(
-          (control) => control.label === "Page Navigation"
-        ),
-        Files: controls.filter((control) =>
-          ["File Upload", "File Downloa", "File Preview"].includes(
-            control.label
-          )
-        ),
-        Advanced: controls.filter((control) =>
-          [
-            "Bootstrap Component",
-            "Bootstrap Wrapper",
-            "Captcha",
-            "Google Places",
-            "Saved Search Chart"
-          ].includes(control.label)
-        )
-      };
+      this.filteredControlsGrouped = {};
+
+      for (const groupKey in controlGroups) {
+        this.filteredControlsGrouped[groupKey] = filterControlsByLabel(
+          controls,
+          controlGroups[groupKey]
+        );
+
+        this.filteredControlsGrouped[groupKey].forEach((control) => {
+          const popoverContent = popoverContentMap[control.label];
+          if (popoverContent) {
+            control.popoverContent = popoverContent;
+          }
+        });
+      }
     },
     refreshContent() {
       this.editorContentKey++;
@@ -972,7 +1010,7 @@ export default {
               : "");
           item.config = {
             content:
-              "<div style=\"" + style + "\">" + item.config.label + "</div>",
+              '<div style="' + style + '">' + item.config.label + "</div>",
             interactive: true
           };
         }

From 1aaf3ce4da40dcba7ab748fa9610fc477f22a904 Mon Sep 17 00:00:00 2001
From: pmoskrojas <69815070+pmoskrojas@users.noreply.github.com>
Date: Thu, 30 Nov 2023 17:07:26 -0400
Subject: [PATCH 06/12] Fix text color for Elements

---
 src/components/vue-form-builder.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 37d4c2857..0a7ac063e 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -70,7 +70,10 @@
                     v-b-popover.hover.top="element.popoverContent"
                     :boundary="'viewport'"
                     :data-cy="`controls-${element.component}`"
-                    :class="{ 'ai-control': element.component === 'AiSection' }"
+                    :class="{
+                      'ai-control': element.component === 'AiSection',
+                      'gray-text': true
+                    }"
                   >
                     <i
                       v-if="element.config.icon"
@@ -1010,7 +1013,7 @@ export default {
               : "");
           item.config = {
             content:
-              '<div style="' + style + '">' + item.config.label + "</div>",
+              "<div style=\"" + style + "\">" + item.config.label + "</div>",
             interactive: true
           };
         }

From e9e3b99e280fc003941fe59bda1decc09d805a40 Mon Sep 17 00:00:00 2001
From: Carlos Camacho <carlosalbertocamachocapriles@gmail.com>
Date: Thu, 30 Nov 2023 23:40:26 -0400
Subject: [PATCH 07/12] add openAcordeon method and update tests

---
 tests/e2e/specs/Builder.spec.js               |  1 +
 tests/e2e/specs/ComputedFields.spec.js        |  2 ++
 .../e2e/specs/ComputedFieldsReadOnly.spec.js  |  1 +
 tests/e2e/specs/CustomCss.spec.js             |  6 ++++++
 tests/e2e/specs/DatePicker.spec.js            |  1 +
 tests/e2e/specs/DatePickerTimezone.spec.js    |  1 +
 tests/e2e/specs/DefaultValues.spec.js         |  7 +++++++
 .../specs/DeviceVisivilityInspector.spec.js   | 19 +++++++++++++++++--
 tests/e2e/specs/FileUpload.spec.js            |  2 ++
 tests/e2e/specs/FormImage.spec.js             |  2 ++
 tests/e2e/specs/FormInput.spec.js             | 12 ++++++++++++
 tests/e2e/specs/FormSelectList.spec.js        |  1 +
 tests/e2e/specs/FormTextArea.spec.js          | 11 +++++++++++
 tests/e2e/specs/Loop.spec.js                  |  2 ++
 tests/e2e/specs/MediaQuery.spec.js            |  1 +
 tests/e2e/specs/MultiColumn.spec.js           |  2 ++
 .../specs/MultiInstanceLoopContext.spec.js    |  1 +
 tests/e2e/specs/NestedScreen.spec.js          |  1 +
 tests/e2e/specs/Pages.spec.js                 |  1 +
 tests/e2e/specs/Pagination.spec.js            |  1 +
 tests/e2e/specs/ResponsivePreview.spec.js     |  2 +-
 tests/e2e/specs/RichText.spec.js              |  2 ++
 tests/e2e/specs/ScreenWarnings.spec.js        |  1 +
 .../SelectListDependentCollection.spec.js     |  1 +
 tests/e2e/specs/UndoRedo.spec.js              |  2 ++
 tests/e2e/specs/VariableNames.js              |  3 +++
 tests/e2e/specs/VisibilityRule.spec.js        |  3 +++
 tests/e2e/specs/WrongConfigurationErrors.js   |  4 +++-
 tests/e2e/support/commands.js                 | 15 +++++++++++++++
 29 files changed, 104 insertions(+), 4 deletions(-)

diff --git a/tests/e2e/specs/Builder.spec.js b/tests/e2e/specs/Builder.spec.js
index 4b9e2b59e..0e83722c3 100644
--- a/tests/e2e/specs/Builder.spec.js
+++ b/tests/e2e/specs/Builder.spec.js
@@ -1,6 +1,7 @@
 describe('Screen Builder', () => {
   beforeEach(() => {
     cy.visit('/');
+    cy.openAllAcordeon();
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
   });
diff --git a/tests/e2e/specs/ComputedFields.spec.js b/tests/e2e/specs/ComputedFields.spec.js
index 00edb7f94..3d3fb1217 100644
--- a/tests/e2e/specs/ComputedFields.spec.js
+++ b/tests/e2e/specs/ComputedFields.spec.js
@@ -88,6 +88,7 @@ describe('Computed fields', () => {
   });
   it('Create a javascript computed field', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     // Add an input field
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');
     // Add a second input field
@@ -118,6 +119,7 @@ describe('Computed fields', () => {
 
   it('Create a computed field with formula', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     // Add an input field
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');
     // Add a second input field
diff --git a/tests/e2e/specs/ComputedFieldsReadOnly.spec.js b/tests/e2e/specs/ComputedFieldsReadOnly.spec.js
index aee2e397c..cee1920a9 100644
--- a/tests/e2e/specs/ComputedFieldsReadOnly.spec.js
+++ b/tests/e2e/specs/ComputedFieldsReadOnly.spec.js
@@ -139,6 +139,7 @@ describe('Computed fields', () => {
 
   it.only('The user should not be able to change a FormDatePicker assigned to a computed property', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     // Add an input field
     cy.get('[data-cy=controls-FormDatePicker]').drag('[data-cy=screen-drop-zone]', 'bottom'); 
     cy.get('[data-cy=screen-element-container]').click();
diff --git a/tests/e2e/specs/CustomCss.spec.js b/tests/e2e/specs/CustomCss.spec.js
index 0b5b920ba..266c69c44 100644
--- a/tests/e2e/specs/CustomCss.spec.js
+++ b/tests/e2e/specs/CustomCss.spec.js
@@ -1,6 +1,7 @@
 describe('Custom CSS', () => {
   it('Shows Modal', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=accordion-Advanced]').click();
@@ -11,6 +12,7 @@ describe('Custom CSS', () => {
 
   it('Closes Modal', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=accordion-Advanced]').click();
@@ -24,6 +26,7 @@ describe('Custom CSS', () => {
 
   it('Does Not Save Custom CSS', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=accordion-Advanced]').click();
@@ -39,6 +42,7 @@ describe('Custom CSS', () => {
 
   it('Saves Custom CSS', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=accordion-Advanced]').click();
@@ -55,6 +59,7 @@ describe('Custom CSS', () => {
 
   it('Does not add styling to element in design mode', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=accordion-Advanced]').click();
@@ -70,6 +75,7 @@ describe('Custom CSS', () => {
 
   it('Adds styling to element in preview mode', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=accordion-Advanced]').click();
diff --git a/tests/e2e/specs/DatePicker.spec.js b/tests/e2e/specs/DatePicker.spec.js
index 97cbac028..fef38736f 100644
--- a/tests/e2e/specs/DatePicker.spec.js
+++ b/tests/e2e/specs/DatePicker.spec.js
@@ -5,6 +5,7 @@ moment.tz.setDefault('UTC');
 describe('Date Picker', () => {
   beforeEach(() => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     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 414d6ac56..53d3e5d10 100644
--- a/tests/e2e/specs/DatePickerTimezone.spec.js
+++ b/tests/e2e/specs/DatePickerTimezone.spec.js
@@ -6,6 +6,7 @@ moment.tz.setDefault(timezoneTest);
 describe("Date Picker", () => {
   beforeEach(() => {
     cy.visit("/");
+    cy.openAcordeon("collapse-1");
     cy.window().then((win) => {
       win.ProcessMaker.user.timezone = timezoneTest;
     });
diff --git a/tests/e2e/specs/DefaultValues.spec.js b/tests/e2e/specs/DefaultValues.spec.js
index 6d4912eac..3fdfacea0 100644
--- a/tests/e2e/specs/DefaultValues.spec.js
+++ b/tests/e2e/specs/DefaultValues.spec.js
@@ -1,6 +1,7 @@
 describe('Default values', () => {
   it('Basic default value', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=accordion-Advanced]').click();
@@ -14,6 +15,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.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');   
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=inspector-name]').clear().type('people.firstName');
@@ -30,6 +32,7 @@ describe('Default values', () => {
 
   it('Select List- Default if the variable has the next format "numbers.int"', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormSelectList]').drag('[data-cy=screen-drop-zone]', 'bottom'); 
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=inspector-name]').clear().type('number.int');
@@ -63,6 +66,7 @@ describe('Default values', () => {
 
   it('Javascript default value', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.setPreviewDataInput({name: 'world'});
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
@@ -78,6 +82,7 @@ describe('Default values', () => {
   });
   it('Initially checked checkbox', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormCheckbox]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=inspector-initiallyChecked]').click();
@@ -89,6 +94,7 @@ describe('Default values', () => {
   });
   it('Dynamic Basic default value', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     // Add an input field
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom'); 
     // Add a second input field
@@ -110,6 +116,7 @@ describe('Default values', () => {
   });
   it('Dynamic Javascript default value', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     // Add an input field
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom'); 
     // Add a second input field
diff --git a/tests/e2e/specs/DeviceVisivilityInspector.spec.js b/tests/e2e/specs/DeviceVisivilityInspector.spec.js
index 293adeb9a..8e5eb22f7 100644
--- a/tests/e2e/specs/DeviceVisivilityInspector.spec.js
+++ b/tests/e2e/specs/DeviceVisivilityInspector.spec.js
@@ -11,6 +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.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=accordion-Advanced]').click();
@@ -24,6 +25,7 @@ describe('Device Visiblility Inspector', () => {
   });
   it('Verify if a checkbox has device visiblility settings', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormCheckbox]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=accordion-Advanced]').click();
@@ -37,6 +39,7 @@ describe('Device Visiblility Inspector', () => {
   });
   it('Verify if a datePicker has device visiblility settings', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormDatePicker]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=accordion-Advanced]').click();
@@ -50,6 +53,7 @@ describe('Device Visiblility Inspector', () => {
   });
   it('Verify if a FileDownload has device visiblility settings', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-4");
     cy.get('[data-cy=controls-FileDownload]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=accordion-Advanced]').click();
@@ -63,6 +67,7 @@ describe('Device Visiblility Inspector', () => {
   });
   it('Verify if a FileUpload has device visiblility settings', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-4");
     cy.get('[data-cy=controls-FileUpload]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=accordion-Advanced]').click();
@@ -76,6 +81,7 @@ describe('Device Visiblility Inspector', () => {
   });
   it('Verify if a FormImage has device visiblility settings', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-2");
     cy.get('[data-cy=controls-FormImage]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=accordion-Advanced]').click();
@@ -89,6 +95,7 @@ describe('Device Visiblility Inspector', () => {
   });
   it('Verify if a FormLoop has device visiblility settings', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-2");
     cy.get('[data-cy=controls-FormLoop]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=accordion-Advanced]').click();
@@ -102,6 +109,7 @@ describe('Device Visiblility Inspector', () => {
   });
   it('Verify if a FormMultiColumn has device visiblility settings', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-2");
     cy.get('[data-cy=controls-FormMultiColumn]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=accordion-Advanced]').click();
@@ -115,6 +123,7 @@ describe('Device Visiblility Inspector', () => {
   });
   it('Verify if a FormNestedScreen has device visiblility settings', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-2");
     cy.get('[data-cy=controls-FormNestedScreen]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=accordion-Advanced]').click();
@@ -128,6 +137,7 @@ describe('Device Visiblility Inspector', () => {
   });
   it('Verify if a FormButton has device visiblility settings', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormButton]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=accordion-Advanced]').click();
@@ -141,6 +151,7 @@ describe('Device Visiblility Inspector', () => {
   });
   it('Verify if a FormRecordList has device visiblility settings', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-2");
     cy.get('[data-cy=controls-FormRecordList]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=accordion-Advanced]').click();
@@ -154,6 +165,7 @@ describe('Device Visiblility Inspector', () => {
   });
   it('Verify if a FormHtmlViewer has device visiblility settings', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-2");
     cy.get('[data-cy=controls-FormHtmlViewer]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=accordion-Advanced]').click();
@@ -167,6 +179,7 @@ describe('Device Visiblility Inspector', () => {
   });
   it('Verify if a FormSelectList has device visiblility settings', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormSelectList]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=accordion-Advanced]').click();
@@ -180,6 +193,7 @@ describe('Device Visiblility Inspector', () => {
   });
   it('Verify if a FormTextArea has device visiblility settings', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormTextArea]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=accordion-Advanced]').click();
@@ -193,6 +207,7 @@ describe('Device Visiblility Inspector', () => {
   });
   it('Enabled device visiblility', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=accordion-Advanced]').click();
@@ -313,6 +328,7 @@ describe('Device Visiblility Inspector', () => {
 
   it('Verify Device Visibility of controls inside a table', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-2");
     //Step 1: Add Loop
     addControl('Multicolumn / Table');
 
@@ -340,7 +356,7 @@ describe('Device Visiblility Inspector', () => {
 
   it('Verify Device Visibility of controls inside a table mobile', () => {
     cy.visit('/');
-
+    cy.openAcordeon("collapse-2");
     //Step 1: Add Table
     addControl('Multicolumn / Table');
 
@@ -368,7 +384,6 @@ describe('Device Visiblility Inspector', () => {
 
   it('Verify Device Visibility of a control and Visibility Rule', () => {
     cy.visit("/");
-
     //Step 1: Add line input control
     addControl('Line Input');
 
diff --git a/tests/e2e/specs/FileUpload.spec.js b/tests/e2e/specs/FileUpload.spec.js
index 0c16b396c..b8d878e59 100644
--- a/tests/e2e/specs/FileUpload.spec.js
+++ b/tests/e2e/specs/FileUpload.spec.js
@@ -1,6 +1,8 @@
 describe('File Upload', () => {
   it('Automatically sets a variable name', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-4");
+    //cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FileUpload]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
 
diff --git a/tests/e2e/specs/FormImage.spec.js b/tests/e2e/specs/FormImage.spec.js
index 3f5440a83..01a215e0c 100644
--- a/tests/e2e/specs/FormImage.spec.js
+++ b/tests/e2e/specs/FormImage.spec.js
@@ -1,6 +1,7 @@
 describe('Form Image', () => {
   it('Upload image to show', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-2");
     cy.get('[data-cy=controls-FormImage]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.uploadFile('[data-cy=inspector-image] input[type=file]', 'avatar.jpeg', 'image/jpeg');
@@ -15,6 +16,7 @@ describe('Form Image', () => {
 
   it('Image by variable', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-2");
     cy.get('[data-cy=controls-FormImage]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=inspector-renderImage]').click();
diff --git a/tests/e2e/specs/FormInput.spec.js b/tests/e2e/specs/FormInput.spec.js
index a5d7b045d..910986d4d 100644
--- a/tests/e2e/specs/FormInput.spec.js
+++ b/tests/e2e/specs/FormInput.spec.js
@@ -1,6 +1,7 @@
 describe('Form Input', () => {
   it('Default properties', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=mode-preview]').click();
@@ -11,6 +12,7 @@ describe('Form Input', () => {
   });
   it('Variable properties', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=inspector-name]').clear().type('firstname');
@@ -24,6 +26,7 @@ describe('Form Input', () => {
   });
   it('Data type Integer', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.setMultiselect('[data-cy=inspector-dataFormat]', 'Integer');
@@ -35,6 +38,7 @@ describe('Form Input', () => {
   });
   it('Data type Currency', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.setMultiselect('[data-cy=inspector-dataFormat]', 'Currency');
@@ -47,6 +51,7 @@ describe('Form Input', () => {
   });
   it('Data type Currency with initial data', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.setPreviewDataInput('{"form_input_1":1234}');
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
@@ -59,6 +64,7 @@ describe('Form Input', () => {
   });
   it('Data type Currency when backspacing a decimal digit', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.setMultiselect('[data-cy=inspector-dataFormat]', 'Currency');
@@ -73,6 +79,7 @@ describe('Form Input', () => {
   });
   it('Validation rule', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=inspector-readonly]').click();
@@ -81,6 +88,7 @@ describe('Form Input', () => {
   });
   it('Placeholder', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=accordion-Configuration]').click();
@@ -90,6 +98,7 @@ describe('Form Input', () => {
   });
   it('Data type Percentage', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.setMultiselect('[data-cy=inspector-dataFormat]', 'Percentage');
@@ -102,6 +111,7 @@ describe('Form Input', () => {
   });
   it('Data type Datetime', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.setMultiselect('[data-cy=inspector-dataFormat]', 'Datetime');
@@ -114,6 +124,7 @@ describe('Form Input', () => {
   });
   it('Data type Date', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.setMultiselect('[data-cy=inspector-dataFormat]', 'Date', 1);
@@ -126,6 +137,7 @@ describe('Form Input', () => {
   });
   it('Data type password', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.setMultiselect('[data-cy=inspector-dataFormat]', 'Password');
diff --git a/tests/e2e/specs/FormSelectList.spec.js b/tests/e2e/specs/FormSelectList.spec.js
index dc45a03e9..706683f81 100644
--- a/tests/e2e/specs/FormSelectList.spec.js
+++ b/tests/e2e/specs/FormSelectList.spec.js
@@ -1,6 +1,7 @@
 describe('Form Select List', () => {
   beforeEach(() => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     // Add loop control
     cy.get('[data-cy=controls-FormSelectList]').drag('[data-cy=screen-drop-zone]', 'bottom'); 
     cy.get('[data-cy=screen-element-container]').click();
diff --git a/tests/e2e/specs/FormTextArea.spec.js b/tests/e2e/specs/FormTextArea.spec.js
index 576297cbb..5fcb88845 100644
--- a/tests/e2e/specs/FormTextArea.spec.js
+++ b/tests/e2e/specs/FormTextArea.spec.js
@@ -1,6 +1,7 @@
 describe('Form Text Area Field', () => {
   it('Default properties', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormTextArea]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=mode-preview]').click();
@@ -11,6 +12,7 @@ describe('Form Text Area Field', () => {
   });
   it('Variable properties', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormTextArea]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=inspector-name]').clear().type('comments');
@@ -24,6 +26,7 @@ describe('Form Text Area Field', () => {
   });
   it('Read Only', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormTextArea]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=inspector-name]').clear().type('comments');
@@ -37,6 +40,7 @@ describe('Form Text Area Field', () => {
   //Configuration
   it('Placeholder', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormTextArea]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=accordion-Configuration]').click();
@@ -46,6 +50,7 @@ describe('Form Text Area Field', () => {
   });
   it('Helper Text', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormTextArea]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=accordion-Configuration]').click();
@@ -55,6 +60,7 @@ describe('Form Text Area Field', () => {
   });
   it('Rich Text', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormTextArea]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=accordion-Configuration]').click();
@@ -67,6 +73,7 @@ describe('Form Text Area Field', () => {
   });
   it('Rows', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormTextArea]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=accordion-Configuration]').click();
@@ -76,6 +83,7 @@ describe('Form Text Area Field', () => {
   });
   it('Default Value', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormTextArea]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=accordion-Advanced]').click();
@@ -87,6 +95,7 @@ describe('Form Text Area Field', () => {
   });
   it('CSS Selector Name', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormTextArea]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=accordion-Advanced]').click();
@@ -96,6 +105,7 @@ describe('Form Text Area Field', () => {
   });
   it('Aria Label', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormTextArea]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=accordion-Advanced]').click();
@@ -105,6 +115,7 @@ describe('Form Text Area Field', () => {
   });
   it('Tab Order', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormTextArea]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=accordion-Advanced]').click();
diff --git a/tests/e2e/specs/Loop.spec.js b/tests/e2e/specs/Loop.spec.js
index c577a2b18..27e540040 100644
--- a/tests/e2e/specs/Loop.spec.js
+++ b/tests/e2e/specs/Loop.spec.js
@@ -1,6 +1,7 @@
 describe('Loop control', () => {
   it('Input inside loop', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-2");
     // Add loop control
     cy.get('[data-cy=controls-FormLoop]').drag('[data-cy=screen-drop-zone]', 'bottom'); 
     cy.get('[data-cy=screen-element-container]').click();
@@ -56,6 +57,7 @@ describe('Loop control', () => {
 
   it('Verify validation on visible fields', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-2");
     // Add loop control
     cy.get('[data-cy=controls-FormLoop]').drag('[data-cy=screen-drop-zone]', 'bottom'); 
     cy.get('[data-cy=screen-element-container]').click();
diff --git a/tests/e2e/specs/MediaQuery.spec.js b/tests/e2e/specs/MediaQuery.spec.js
index fa9a4e7e6..2fd1a60be 100644
--- a/tests/e2e/specs/MediaQuery.spec.js
+++ b/tests/e2e/specs/MediaQuery.spec.js
@@ -9,6 +9,7 @@ describe('Media Query CSS', () => {
   before(() => {
     // run these tests as if in a desktop
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=accordion-Advanced]').click();
diff --git a/tests/e2e/specs/MultiColumn.spec.js b/tests/e2e/specs/MultiColumn.spec.js
index e81070cae..0496e2850 100644
--- a/tests/e2e/specs/MultiColumn.spec.js
+++ b/tests/e2e/specs/MultiColumn.spec.js
@@ -2,6 +2,7 @@ describe('MultiColumns', () => {
 
   it('Configure using JSON', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-2");
     cy.get('[data-cy=controls-FormMultiColumn]').drag('[data-cy=screen-drop-zone]', 'bottom'); 
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-element-container] .column-draggable:empty');
@@ -30,6 +31,7 @@ describe('MultiColumns', () => {
 
   it('Configure using columns configuration', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-2");
     cy.get('[data-cy=controls-FormMultiColumn]').drag('[data-cy=screen-drop-zone]', 'bottom'); 
     cy.get('[data-cy=screen-element-container]').click();
 
diff --git a/tests/e2e/specs/MultiInstanceLoopContext.spec.js b/tests/e2e/specs/MultiInstanceLoopContext.spec.js
index 5d92d0948..18894843e 100644
--- a/tests/e2e/specs/MultiInstanceLoopContext.spec.js
+++ b/tests/e2e/specs/MultiInstanceLoopContext.spec.js
@@ -65,6 +65,7 @@ describe("FOUR-3375 FileUpload inside MultiInstance Task", () => {
         fileUploadId: 1
       })
     ).as("uploadMainFile");
+    cy.openAcordeon("collapse-4");
     cy.uploadFile(
       "[data-cy='screen-field-rootUpload'] input[type=file]",
       "avatar.jpeg",
diff --git a/tests/e2e/specs/NestedScreen.spec.js b/tests/e2e/specs/NestedScreen.spec.js
index af22ff80b..acbc3e1d4 100644
--- a/tests/e2e/specs/NestedScreen.spec.js
+++ b/tests/e2e/specs/NestedScreen.spec.js
@@ -78,6 +78,7 @@ describe('Nested screen', () => {
 
   it('Without a variable defined', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-2");
     cy.get('[data-cy=controls-FormNestedScreen]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=inspector-screen] div.multiselect').click();
diff --git a/tests/e2e/specs/Pages.spec.js b/tests/e2e/specs/Pages.spec.js
index 53c3b1cb8..8be102dc8 100644
--- a/tests/e2e/specs/Pages.spec.js
+++ b/tests/e2e/specs/Pages.spec.js
@@ -1,6 +1,7 @@
 describe('Pages and navigations', () => {
   it('Basic default value', () => {
     cy.visit('/');
+    cy.openAllAcordeon();
     cy.get('[data-cy=toolbar-add]').click();
     // Define Page 2
     cy.get('[data-cy=add-page-name]').clear().type('Page 2');
diff --git a/tests/e2e/specs/Pagination.spec.js b/tests/e2e/specs/Pagination.spec.js
index 2b103be2a..d7e892535 100644
--- a/tests/e2e/specs/Pagination.spec.js
+++ b/tests/e2e/specs/Pagination.spec.js
@@ -56,6 +56,7 @@ const data = {
 
 beforeEach(() => {
   cy.visit('/');
+  cy.openAcordeon("collapse-2");
   cy.get('[data-cy=controls-FormRecordList]').drag('[data-cy=screen-drop-zone]', 'bottom');
   cy.get('[data-cy=toolbar-add]').click({force: true});
   cy.get('[data-cy=add-page-name]').type('page2');
diff --git a/tests/e2e/specs/ResponsivePreview.spec.js b/tests/e2e/specs/ResponsivePreview.spec.js
index bc2c12cb3..8552f4c66 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.get(controlInputSelector).drag(screenDropZoneSelector, 'bottom');
     cy.get('[data-cy=controls-FormSelectList]').drag(screenContainerSelector, 'bottom');
   });
diff --git a/tests/e2e/specs/RichText.spec.js b/tests/e2e/specs/RichText.spec.js
index dd048a915..01e20225a 100644
--- a/tests/e2e/specs/RichText.spec.js
+++ b/tests/e2e/specs/RichText.spec.js
@@ -1,6 +1,7 @@
 describe('Rich Text control', () => {
   it('Rich text with mustache', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-2");
     cy.get('[data-cy=controls-FormHtmlViewer]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=inspector-content]').focus().clear().type('<p>Hello {{ name }}</p>', {parseSpecialCharSequences: false});
@@ -11,6 +12,7 @@ describe('Rich Text control', () => {
 
   it('Rich text render HTML from a Variable', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-2");
     cy.get('[data-cy=controls-FormHtmlViewer]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=inspector-content]').focus().clear().type('{{ name }}', {parseSpecialCharSequences: false});
diff --git a/tests/e2e/specs/ScreenWarnings.spec.js b/tests/e2e/specs/ScreenWarnings.spec.js
index bb1a9edf7..851692b69 100644
--- a/tests/e2e/specs/ScreenWarnings.spec.js
+++ b/tests/e2e/specs/ScreenWarnings.spec.js
@@ -13,6 +13,7 @@ describe('Screen Warnings', () => {
   });
 
   it('Use script warning', () => {
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy="topbar-watchers"]').click();
     cy.get('[data-cy="watchers-add-watcher"]').click();
diff --git a/tests/e2e/specs/SelectListDependentCollection.spec.js b/tests/e2e/specs/SelectListDependentCollection.spec.js
index b1848c445..0fb19e3a3 100644
--- a/tests/e2e/specs/SelectListDependentCollection.spec.js
+++ b/tests/e2e/specs/SelectListDependentCollection.spec.js
@@ -76,6 +76,7 @@ describe('select list dependent collection', () => {
   });
 
   it('Configure collection select list', () => {
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormSelectList]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=accordion-DataSource]').click();
diff --git a/tests/e2e/specs/UndoRedo.spec.js b/tests/e2e/specs/UndoRedo.spec.js
index 5b36a4bd1..2b456ebbd 100644
--- a/tests/e2e/specs/UndoRedo.spec.js
+++ b/tests/e2e/specs/UndoRedo.spec.js
@@ -1,6 +1,7 @@
 describe('Undo and Redo', () => {
   it('Can Undo', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=toolbar-undo]').click();
     cy.get('[data-cy=screen-drop-zone]').should('contain.text', 'Place your controls here.');
@@ -8,6 +9,7 @@ describe('Undo and Redo', () => {
 
   it('Can Redo', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=toolbar-undo]').click();
     cy.get('[data-cy=toolbar-redo]').click();
diff --git a/tests/e2e/specs/VariableNames.js b/tests/e2e/specs/VariableNames.js
index c0ecb12f2..3ade38388 100644
--- a/tests/e2e/specs/VariableNames.js
+++ b/tests/e2e/specs/VariableNames.js
@@ -1,6 +1,7 @@
 describe('Default values', () => {
   it('Variable names with dots 2 levels', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=inspector-name]').clear().type('user.address');
@@ -13,6 +14,7 @@ describe('Default values', () => {
   });
   it('Variable names with dots 3 levels', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=inspector-name]').clear().type('user.address.city');
@@ -28,6 +30,7 @@ describe('Default values', () => {
   });
   it('Variable names with dots and one attribute same as the name', () => {
     cy.visit('/');
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=inspector-name]').clear().type('address.address.city');
diff --git a/tests/e2e/specs/VisibilityRule.spec.js b/tests/e2e/specs/VisibilityRule.spec.js
index 2f1ae2add..f3e8ab92a 100644
--- a/tests/e2e/specs/VisibilityRule.spec.js
+++ b/tests/e2e/specs/VisibilityRule.spec.js
@@ -2,6 +2,7 @@ describe('Default values', () => {
   it('Check visible', () => {
     cy.visit('/');
     cy.setPreviewDataInput({name: 'world'});
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=accordion-Advanced]').click();
@@ -12,6 +13,7 @@ describe('Default values', () => {
   it('Check hidden', () => {
     cy.visit('/');
     cy.setPreviewDataInput({name: ''});
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=accordion-Advanced]').click();
@@ -22,6 +24,7 @@ describe('Default values', () => {
   it('Check dynamic visibility rule', () => {
     cy.visit('/');
     cy.setPreviewDataInput({name: ''});
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-drop-zone]', 'bottom');
     // Add a second input field
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-element-container]', 'bottom');
diff --git a/tests/e2e/specs/WrongConfigurationErrors.js b/tests/e2e/specs/WrongConfigurationErrors.js
index 0edfe7257..b053664ff 100644
--- a/tests/e2e/specs/WrongConfigurationErrors.js
+++ b/tests/e2e/specs/WrongConfigurationErrors.js
@@ -6,6 +6,7 @@ describe("Wrong Configuration Errors", () => {
         cy.stub(win.console, "error").as("consoleError");
       }
     });
+    cy.openAcordeon("collapse-1");
     cy.get("[data-cy=controls-FormInput]").drag(
       "[data-cy=screen-drop-zone]",
       "bottom"
@@ -20,13 +21,14 @@ describe("Wrong Configuration Errors", () => {
     );
   });
 
-  it("Screen with rendering problem in a component should not show a warning after the problematic component is deleted", () => {
+  it.only("Screen with rendering problem in a component should not show a warning after the problematic component is deleted", () => {
     cy.visit("/", {
       onBeforeLoad(win) {
         cy.stub(win.console, "warn").as("consoleWarn");
         cy.stub(win.console, "error").as("consoleError");
       }
     });
+    cy.openAcordeon("collapse-1");
     cy.get("[data-cy=controls-FormInput]").drag(
       "[data-cy=screen-drop-zone]",
       "bottom"
diff --git a/tests/e2e/support/commands.js b/tests/e2e/support/commands.js
index f8d6c49e7..4d9ee78f6 100644
--- a/tests/e2e/support/commands.js
+++ b/tests/e2e/support/commands.js
@@ -223,3 +223,18 @@ Cypress.Commands.add('showValidationOnLoad', () => {
     win.vueInstance.$children[0].$refs.renderer.showValidationOnLoad(true);
   });
 })
+
+Cypress.Commands.add("openAcordeon", (name) => {
+  cy.get(`button[aria-controls='${name}']`).should("be.visible");
+  cy.get(`div[id='${name}']`).invoke("attr", "style").should("eq", "display: none;");
+  cy.get(`button[aria-controls='${name}']`).click();
+  cy.get(`div[id='${name}']`).invoke("attr", "style").should("not.equal", "display: none;");
+});
+
+Cypress.Commands.add("openAllAcordeon", () => {
+  cy.openAcordeon("collapse-5");
+  cy.openAcordeon("collapse-4");
+  cy.openAcordeon("collapse-3");
+  cy.openAcordeon("collapse-2");
+  cy.openAcordeon("collapse-1");
+});

From 61065e1618fff40afa9e1c0abe65cb324946197d Mon Sep 17 00:00:00 2001
From: pmoskrojas <69815070+pmoskrojas@users.noreply.github.com>
Date: Fri, 1 Dec 2023 10:02:16 -0400
Subject: [PATCH 08/12] Fix draggable behavior

---
 src/components/vue-form-builder.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 0a7ac063e..46cd4315f 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -9,7 +9,9 @@
       >
         <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">
+            <span
+              class="input-group-text rounded-0 border-left-0 border-top-0 border-bottom-0"
+            >
               <i class="fas fa-search icon"></i>
             </span>
           </b-input-group-prepend>
@@ -53,7 +55,7 @@
                 <draggable
                   v-if="renderControls"
                   id="controls"
-                  v-model="filteredControls"
+                  v-model="filteredControlsGrouped[group.key]"
                   data-cy="controls"
                   v-bind="{
                     sort: false,

From 6d6ab6e138a1fb120c3fa3eaabbaebabab13b0bd Mon Sep 17 00:00:00 2001
From: pmoskrojas <69815070+pmoskrojas@users.noreply.github.com>
Date: Tue, 5 Dec 2023 09:17:47 -0400
Subject: [PATCH 09/12] Test XSS attack prevent

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

diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 46cd4315f..5e40774e2 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-v-html -->
 <!-- eslint-disable vue/valid-v-for -->
 <template>
   <b-row class="custom-row h-100 m-0">
@@ -81,7 +82,10 @@
                       v-if="element.config.icon"
                       :class="element.config.icon"
                     />
-                    <span class="svg-icon" v-html="element.config.svg"></span>
+                    <span
+                      class="svg-icon"
+                      v-html="sanitizeHtml(element.config.svg)"
+                    ></span>
                     {{ $t(element.label) }}
                   </b-list-group-item>
                   <li v-if="!filteredControls.length" class="list-group-item">
@@ -682,6 +686,12 @@ export default {
         { key: "Advanced", label: "Advanced" }
       ],
 
+      element: {
+        config: {
+          svg: '<svg><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>'
+        }
+      },
+
       isCollapsed: new Array(6).fill(true)
     };
   },
@@ -856,6 +866,15 @@ export default {
     });
   },
   methods: {
+    sanitizeHtml(html) {
+      const doc = new DOMParser().parseFromString(html, "text/html");
+      doc.body.querySelectorAll("*").forEach((node) => {
+        if (!["span", "svg"].includes(node.tagName.toLowerCase())) {
+          node.parentNode.removeChild(node);
+        }
+      });
+      return doc.body.innerHTML;
+    },
     toggleCollapse(index) {
       this.$set(this.isCollapsed, index, !this.isCollapsed[index]);
     },

From d0acd54ddb4c3620ae79a82b2e65b0363eafa1dc Mon Sep 17 00:00:00 2001
From: pmoskrojas <69815070+pmoskrojas@users.noreply.github.com>
Date: Tue, 5 Dec 2023 09:36:02 -0400
Subject: [PATCH 10/12] Fix v-html

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

diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 5e40774e2..6cc42afaa 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -82,10 +82,6 @@
                       v-if="element.config.icon"
                       :class="element.config.icon"
                     />
-                    <span
-                      class="svg-icon"
-                      v-html="sanitizeHtml(element.config.svg)"
-                    ></span>
                     {{ $t(element.label) }}
                   </b-list-group-item>
                   <li v-if="!filteredControls.length" class="list-group-item">
@@ -686,12 +682,6 @@ export default {
         { key: "Advanced", label: "Advanced" }
       ],
 
-      element: {
-        config: {
-          svg: '<svg><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>'
-        }
-      },
-
       isCollapsed: new Array(6).fill(true)
     };
   },
@@ -866,15 +856,6 @@ export default {
     });
   },
   methods: {
-    sanitizeHtml(html) {
-      const doc = new DOMParser().parseFromString(html, "text/html");
-      doc.body.querySelectorAll("*").forEach((node) => {
-        if (!["span", "svg"].includes(node.tagName.toLowerCase())) {
-          node.parentNode.removeChild(node);
-        }
-      });
-      return doc.body.innerHTML;
-    },
     toggleCollapse(index) {
       this.$set(this.isCollapsed, index, !this.isCollapsed[index]);
     },

From 5d75df7167451c94ef94e0b3f773571d317d0753 Mon Sep 17 00:00:00 2001
From: pmoskrojas <69815070+pmoskrojas@users.noreply.github.com>
Date: Tue, 5 Dec 2023 10:05:05 -0400
Subject: [PATCH 11/12] Fix main svg icon

---
 src/components/vue-form-builder.vue | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 6cc42afaa..925ca52ac 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -166,7 +166,18 @@
         data-cy="screen-drop-zone"
         class="d-flex justify-content-center align-items-center drag-placeholder text-center position-absolute rounded mt-4 flex-column"
       >
-        <span class="mb-3" v-html="dragElementIcon"></span>
+        <svg
+          width="81"
+          height="107"
+          viewBox="0 0 81 107"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M47.125 28.6562V0.5H5.71875C2.96523 0.5 0.75 2.71523 0.75 5.46875V101.531C0.75 104.285 2.96523 106.5 5.71875 106.5H75.2812C78.0348 106.5 80.25 104.285 80.25 101.531V33.625H52.0938C49.3609 33.625 47.125 31.3891 47.125 28.6562ZM60.375 77.5156C60.375 78.882 59.257 80 57.8906 80H23.1094C21.743 80 20.625 78.882 20.625 77.5156V75.8594C20.625 74.493 21.743 73.375 23.1094 73.375H57.8906C59.257 73.375 60.375 74.493 60.375 75.8594V77.5156ZM60.375 64.2656C60.375 65.632 59.257 66.75 57.8906 66.75H23.1094C21.743 66.75 20.625 65.632 20.625 64.2656V62.6094C20.625 61.243 21.743 60.125 23.1094 60.125H57.8906C59.257 60.125 60.375 61.243 60.375 62.6094V64.2656ZM60.375 49.3594V51.0156C60.375 52.382 59.257 53.5 57.8906 53.5H23.1094C21.743 53.5 20.625 52.382 20.625 51.0156V49.3594C20.625 47.993 21.743 46.875 23.1094 46.875H57.8906C59.257 46.875 60.375 47.993 60.375 49.3594ZM80.25 25.7371V27H53.75V0.5H55.0129C56.3379 0.5 57.6008 1.01758 58.5324 1.94922L78.8008 22.2383C79.7324 23.1699 80.25 24.4328 80.25 25.7371Z"
+            fill="#699CFF"
+          />
+        </svg>
         <h3>{{ $t("Place your controls here.") }}</h3>
         <p>
           {{
@@ -220,11 +231,6 @@
                 :class="element.config.icon"
                 class="mr-2 ml-1"
               />
-              <span
-                v-if="element.config.svg"
-                class="svg-icon mr-2 ml-1"
-                v-html="element.config.svg"
-              ></span>
               {{ element.config.name || element.label || $t("Field Name") }}
               <div class="ml-auto">
                 <button
@@ -642,9 +648,6 @@ export default {
     }
 
     return {
-      dragElementIcon: `<svg width="81" height="107" viewBox="0 0 81 107" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M47.125 28.6562V0.5H5.71875C2.96523 0.5 0.75 2.71523 0.75 5.46875V101.531C0.75 104.285 2.96523 106.5 5.71875 106.5H75.2812C78.0348 106.5 80.25 104.285 80.25 101.531V33.625H52.0938C49.3609 33.625 47.125 31.3891 47.125 28.6562ZM60.375 77.5156C60.375 78.882 59.257 80 57.8906 80H23.1094C21.743 80 20.625 78.882 20.625 77.5156V75.8594C20.625 74.493 21.743 73.375 23.1094 73.375H57.8906C59.257 73.375 60.375 74.493 60.375 75.8594V77.5156ZM60.375 64.2656C60.375 65.632 59.257 66.75 57.8906 66.75H23.1094C21.743 66.75 20.625 65.632 20.625 64.2656V62.6094C20.625 61.243 21.743 60.125 23.1094 60.125H57.8906C59.257 60.125 60.375 61.243 60.375 62.6094V64.2656ZM60.375 49.3594V51.0156C60.375 52.382 59.257 53.5 57.8906 53.5H23.1094C21.743 53.5 20.625 52.382 20.625 51.0156V49.3594C20.625 47.993 21.743 46.875 23.1094 46.875H57.8906C59.257 46.875 60.375 47.993 60.375 49.3594ZM80.25 25.7371V27H53.75V0.5H55.0129C56.3379 0.5 57.6008 1.01758 58.5324 1.94922L78.8008 22.2383C79.7324 23.1699 80.25 24.4328 80.25 25.7371Z" fill="#699CFF"/>
-      </svg>`,
       currentPage: 0,
       selected: null,
       display: "editor",

From 87d5e7c48aa9f469e52a22fcb4786e1508649c2b Mon Sep 17 00:00:00 2001
From: Carlos Camacho <carlosalbertocamachocapriles@gmail.com>
Date: Tue, 5 Dec 2023 22:43:56 -0400
Subject: [PATCH 12/12] Fix test cases

---
 tests/e2e/specs/DatePicker.spec.js                |  5 +----
 tests/e2e/specs/DeviceVisivilityInspector.spec.js |  3 +++
 tests/e2e/specs/Loop.spec.js                      | 10 +++++++++-
 tests/e2e/specs/MultiColumn.spec.js               |  3 ++-
 tests/e2e/specs/Pagination.spec.js                |  1 +
 5 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/tests/e2e/specs/DatePicker.spec.js b/tests/e2e/specs/DatePicker.spec.js
index fef38736f..92487bd61 100644
--- a/tests/e2e/specs/DatePicker.spec.js
+++ b/tests/e2e/specs/DatePicker.spec.js
@@ -342,17 +342,14 @@ describe('Date Picker', () => {
   });
   it("Date picker with Required validation shouldn't allow the user to submit the date if empty", () => {
     const date = moment(new Date()).format('MM/DD/YYYY');
-
-
     cy.showValidationOnLoad();
-
     cy.get('[data-cy=controls-FormDatePicker]').drag('[data-cy=screen-drop-zone]', 'bottom');
     cy.get('[data-cy=screen-element-container]').click();
     cy.setMultiselect('[data-cy=inspector-dataFormat]', 'Date');
     cy.get('[data-cy=add-rule]').click();
     cy.setMultiselect('[data-cy=select-rule]', 'Required');
     cy.get('[data-cy=save-rule]').click();
-    cy.get('[data-cy=controls-FormButton]').last().drag('[data-cy=screen-element-container]', 'bottom');
+    cy.get('[data-cy=controls-FormButton]').first().drag('[data-cy=screen-element-container]', 'bottom');
 
     cy.get('[data-cy=mode-preview]').click();
     cy.get('.invalid-feedback').contains('Field is required');
diff --git a/tests/e2e/specs/DeviceVisivilityInspector.spec.js b/tests/e2e/specs/DeviceVisivilityInspector.spec.js
index 8e5eb22f7..522b4fe7f 100644
--- a/tests/e2e/specs/DeviceVisivilityInspector.spec.js
+++ b/tests/e2e/specs/DeviceVisivilityInspector.spec.js
@@ -268,6 +268,7 @@ describe('Device Visiblility Inspector', () => {
     cy.visit('/');
     //Step 1: Add Loop
     addControl('Loop');
+    cy.openAcordeon("collapse-1");
 
     //Step 2: Add Line input inside the loop
     addControlInsideLoop(1,nodeControls.formInput);
@@ -329,6 +330,7 @@ describe('Device Visiblility Inspector', () => {
   it('Verify Device Visibility of controls inside a table', () => {
     cy.visit('/');
     cy.openAcordeon("collapse-2");
+    cy.openAcordeon("collapse-1");
     //Step 1: Add Loop
     addControl('Multicolumn / Table');
 
@@ -357,6 +359,7 @@ describe('Device Visiblility Inspector', () => {
   it('Verify Device Visibility of controls inside a table mobile', () => {
     cy.visit('/');
     cy.openAcordeon("collapse-2");
+    cy.openAcordeon("collapse-1");
     //Step 1: Add Table
     addControl('Multicolumn / Table');
 
diff --git a/tests/e2e/specs/Loop.spec.js b/tests/e2e/specs/Loop.spec.js
index 27e540040..d81aa84c7 100644
--- a/tests/e2e/specs/Loop.spec.js
+++ b/tests/e2e/specs/Loop.spec.js
@@ -10,6 +10,7 @@ describe('Loop control', () => {
     cy.get('[data-cy=inspector-add]').click();
 
     // Add input to loop
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-element-container] .column-draggable div', 'bottom');
 
     // Preview
@@ -65,6 +66,7 @@ describe('Loop control', () => {
     cy.get('[data-cy=inspector-source]').select('existing');
 
     // Add input to loop
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-element-container] .column-draggable div', 'bottom');
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-element-container] .column-draggable div', 'bottom');
 
@@ -127,6 +129,7 @@ describe('Loop control', () => {
     cy.on('window:alert', msg => alert = msg);
 
     // Add loop control
+    cy.openAcordeon("collapse-2");
     cy.get('[data-cy=controls-FormLoop]').drag('[data-cy=screen-drop-zone]', 'bottom'); 
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=inspector-name]');
@@ -141,6 +144,7 @@ describe('Loop control', () => {
     cy.get('[data-cy=inspector-conditionalHide]').clear().type('name != "foo"');
 
     // Add input to multicolumn
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormInput]').drag('.mb-1 > :nth-child(1) > .row > :nth-child(1)', 'bottom');
 
     // Configure Validation rule
@@ -177,7 +181,8 @@ describe('Loop control', () => {
     let alert = false;
     cy.on('window:alert', msg => alert = msg);
 
-    // Add loop control
+    // Add loop contro
+    cy.openAcordeon("collapse-2");
     cy.get('[data-cy=controls-FormLoop]').drag('[data-cy=screen-drop-zone]', 'bottom'); 
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=inspector-name]');
@@ -193,6 +198,7 @@ describe('Loop control', () => {
     cy.get('[data-cy=inspector-conditionalHide]').clear().type('name != "foo"');
 
     // Add input to nested loop
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormInput]').drag('.m-2 > .column-draggable > div', 'bottom');
 
     // Configure Input Validation rule
@@ -269,6 +275,7 @@ describe('Loop control', () => {
     cy.showValidationOnLoad();
     let alert = false;
     cy.on('window:alert', msg => alert = msg);
+    cy.openAcordeon("collapse-2");
 
     // Add loop control
     cy.get('[data-cy=controls-FormLoop]').drag('[data-cy=screen-drop-zone]', 'bottom'); 
@@ -286,6 +293,7 @@ describe('Loop control', () => {
     cy.get('[data-cy=inspector-conditionalHide]').clear().type('name != "foo"');
 
     // Add submit button
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormButton]').contains('Submit Button').drag('[data-cy=screen-element-container]', 'bottom');
 
     // Set preview data
diff --git a/tests/e2e/specs/MultiColumn.spec.js b/tests/e2e/specs/MultiColumn.spec.js
index 0496e2850..2d44b73a1 100644
--- a/tests/e2e/specs/MultiColumn.spec.js
+++ b/tests/e2e/specs/MultiColumn.spec.js
@@ -3,6 +3,7 @@ describe('MultiColumns', () => {
   it('Configure using JSON', () => {
     cy.visit('/');
     cy.openAcordeon("collapse-2");
+    cy.openAcordeon("collapse-1");
     cy.get('[data-cy=controls-FormMultiColumn]').drag('[data-cy=screen-drop-zone]', 'bottom'); 
     cy.get('[data-cy=screen-element-container]').click();
     cy.get('[data-cy=controls-FormInput]').drag('[data-cy=screen-element-container] .column-draggable:empty');
@@ -57,7 +58,7 @@ describe('MultiColumns', () => {
     cy.get('[data-cy=inspector-add-column-modal]').should('contain.text', 'The total size of the columns exceeds 12');
     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.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');
 
diff --git a/tests/e2e/specs/Pagination.spec.js b/tests/e2e/specs/Pagination.spec.js
index d7e892535..70282b119 100644
--- a/tests/e2e/specs/Pagination.spec.js
+++ b/tests/e2e/specs/Pagination.spec.js
@@ -57,6 +57,7 @@ const data = {
 beforeEach(() => {
   cy.visit('/');
   cy.openAcordeon("collapse-2");
+  cy.openAcordeon("collapse-1");
   cy.get('[data-cy=controls-FormRecordList]').drag('[data-cy=screen-drop-zone]', 'bottom');
   cy.get('[data-cy=toolbar-add]').click({force: true});
   cy.get('[data-cy=add-page-name]').type('page2');