From b8af21b492a1eb05321538bc3a52df554551e335 Mon Sep 17 00:00:00 2001
From: Nolan Ehrstrom <github@nolanpro.com>
Date: Tue, 9 Jan 2024 12:54:33 -0800
Subject: [PATCH 01/16] Start on refactoring controls

---
 src/components/vue-form-builder.vue | 131 +++++++++-------------------
 src/form-builder-controls.js        |   7 ++
 2 files changed, 48 insertions(+), 90 deletions(-)

diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 4c88ad650..308ff5005 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -29,14 +29,8 @@
 
         <b-card-body no-body class="p-0 overflow-auto">
           <!-- Accordion Bootstrap -->
-          <template v-for="(group, index) in controlGroups">
+          <template v-for="(elements, group) in filteredControlsGrouped">
             <b-button
-              v-if="
-                !!filteredControlsGrouped &&
-                filteredControlsGrouped[group.key] &&
-                filteredControlsGrouped[group.key].length > 0
-              "
-              v-b-toggle="`collapse-${index}`"
               class="w-100 rounded-0 text-left"
               style="
                 font-size: smaller;
@@ -45,26 +39,20 @@
                 border-color: rgb(224, 224, 224);
                 background-color: rgb(235, 238, 242);
               "
-              @click="toggleCollapse(index)"
+              @click="toggleCollapse(groupId(group))"
             >
-              {{ $t(group.label)
-              }}<b-icon
-                :icon="isCollapsed[index] ? 'chevron-down' : 'chevron-up'"
+              {{ $t(group) }}
+              <b-icon
+                :icon="isCollapsed(groupId(group)) ? 'chevron-down' : 'chevron-up'"
                 class="float-right"
               />
             </b-button>
-            <b-collapse :id="`collapse-${index}`" class="mt-2">
-              <b-list-group
-                v-if="
-                  !!filteredControlsGrouped &&
-                  filteredControlsGrouped[group.key] &&
-                  filteredControlsGrouped[group.key].length > 0
-                "
-              >
+            <b-collapse v-model="collapse[groupId(group)]" class="mt-2">
+              <b-list-group>
                 <draggable
                   v-if="renderControls"
                   id="controls"
-                  v-model="filteredControlsGrouped[group.key]"
+                  v-model="filteredControlsGrouped[group]"
                   data-cy="controls"
                   v-bind="{
                     sort: false,
@@ -74,9 +62,7 @@
                   class="controls list-group w-auto list-group-flush"
                 >
                   <b-list-group-item
-                    v-for="(element, elementIndex) in filteredControlsGrouped[
-                      group.key
-                    ]"
+                    v-for="(element, elementIndex) in elements"
                     :key="elementIndex"
                     v-b-popover.hover.right="{
                       content: $t(element.popoverContent),
@@ -96,12 +82,6 @@
                     <span v-html="element.config.svg" class="svg-icon"></span>
                     {{ $t(element.label) }}
                   </b-list-group-item>
-                  <li
-                    v-if="!!filteredControls && filteredControls.length > 0"
-                    class="list-group-item"
-                  >
-                    <slot />
-                  </li>
                 </draggable>
               </b-list-group>
             </b-collapse>
@@ -536,9 +516,6 @@ const defaultConfig = [
   }
 ];
 
-function filterControlsByLabel(controls, labels) {
-  return controls.filter((control) => labels.includes(control.label));
-}
 
 const controlGroups = {
   AIAssistant: ["AI Generated"],
@@ -694,20 +671,7 @@ export default {
       collator: null,
       editorContentKey: 0,
       cancelledJobs: [],
-      filteredControlsGrouped: {},
-
-      controlGroups: [
-        { key: "AIAssistant", label: "AI Assistant" },
-        { key: "InputFields", label: "Input Fields" },
-        { key: "ContentFields", label: "Content Fields" },
-        { key: "Navigation", label: "Navigation" },
-        { key: "Dashboards", label: "Dashboards" },
-        { key: "Files", label: "Files" },
-        { key: "Advanced", label: "Advanced" }
-      ],
-      filteredControlsGrouped: {},
-
-      isCollapsed: new Array(7).fill(true)
+      collapse: {},
     };
   },
   computed: {
@@ -762,31 +726,30 @@ export default {
           .includes(this.filterQuery.toLowerCase());
       });
 
-      const included = filtered.filter((control) => {
-        return !excludedLabels.includes(control.label);
-      });
-
-      const prioritySorted = included.sort((a, b) => {
-        const indexA = priorityLabels.indexOf(a.label);
-        const indexB = priorityLabels.indexOf(b.label);
-
-        if (indexA !== -1 && indexB !== -1) {
-          return indexA - indexB;
-        }
-        if (indexA !== -1) {
-          return -1;
+      return filtered;
+    },
+    filteredControlsGrouped() {
+      const grouped = this.filteredControls.reduce((groups, control) => {
+        let group = control.group;
+        if (!group) {
+          group = "Advanced";
         }
-        if (indexB !== -1) {
-          return 1;
+        if (!groups[group]) {
+          groups[group] = [];
         }
-        return this.collator.compare(a.label, b.label);
-      });
-
-      const excluded = included.filter((control) => {
-        return excludedLabels.includes(control.label);
+        groups[group].push(control);
+        return groups;
+      }, {});
+
+      Object.keys(grouped).forEach((key) => {
+        grouped[key].sort((a, b) => {
+          const orderA = a.order !== undefined ? a.order : Number.POSITIVE_INFINITY;
+          const orderB = b.order !== undefined ? b.order : Number.POSITIVE_INFINITY;
+          return orderA - orderB;
+        })
       });
 
-      return [...prioritySorted, ...excluded];
+      return grouped;
     },
     isCurrentPageEmpty() {
       return this.config[this.currentPage].items.length === 0;
@@ -834,13 +797,6 @@ export default {
       }
     },
 
-    filteredControls: {
-      handler(newVal) {
-        this.groupFilteredControls(newVal);
-      },
-      deep: true,
-      immediate: true
-    }
   },
   created() {
     Validator.register(
@@ -885,24 +841,19 @@ export default {
     });
   },
   methods: {
-    toggleCollapse(index) {
-      this.$set(this.isCollapsed, index, !this.isCollapsed[index]);
-    },
-    groupFilteredControls(controls) {
-      for (const groupKey in controlGroups) {
-        this.filteredControlsGrouped[groupKey] = filterControlsByLabel(
-          controls,
-          controlGroups[groupKey]
-        );
-
-        this.filteredControlsGrouped[groupKey].forEach((control) => {
-          const popoverContent = this.$t(popoverContentMap[control.label]);
-          if (popoverContent) {
-            control.popoverContent = popoverContent;
-          }
-        });
+    toggleCollapse(groupId) {
+      if (this.collapse[groupId] && this.collapse[groupId] === true) {
+        this.collapse[groupId] = false;
+      } else {
+        this.collapse[groupId] = true;
       }
     },
+    isCollapsed(groupId) {
+      return this.collapse[groupId];
+    },
+    groupId(group) {
+      return 'collapse-' + group.replace(/\s/g, "-");
+    },
     refreshContent() {
       this.editorContentKey++;
     },
diff --git a/src/form-builder-controls.js b/src/form-builder-controls.js
index e565d0624..f2e21de06 100755
--- a/src/form-builder-controls.js
+++ b/src/form-builder-controls.js
@@ -51,6 +51,9 @@ export default [
     rendererComponent: FormHtmlEditor,
     rendererBinding: 'FormHtmlEditor',
     control: {
+      group: "Content Fields",
+      popoverContent: "Use a Rich Text Editor to add HTML-formatted",
+      order: 1.0,
       label: 'Rich Text',
       component: 'FormHtmlViewer',
       'editor-component': 'FormHtmlEditor',
@@ -356,6 +359,8 @@ export default [
     rendererBinding: 'FormMultiColumn',
     control: {
       label: 'Multicolumn / Table',
+      group: "Content Fields",
+      order: 2.0,
       component: 'FormMultiColumn',
       'editor-component': 'MultiColumn',
       'editor-control': 'MultiColumn',
@@ -491,6 +496,8 @@ export default [
     rendererBinding: 'FormImage',
     control: {
       label: 'Image',
+      order: 3.0,
+      group: "Content Fields",
       component: 'FormImage',
       'editor-component': 'FormImage',
       'editor-control': 'FormImage',

From d2776426b53db0f439ebd87edddea027443c4d3b Mon Sep 17 00:00:00 2001
From: Nolan Ehrstrom <github@nolanpro.com>
Date: Tue, 9 Jan 2024 17:19:47 -0800
Subject: [PATCH 02/16] Support for group ordering

---
 src/components/vue-form-builder.vue | 72 +++++++++++++++++++----------
 1 file changed, 47 insertions(+), 25 deletions(-)

diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 308ff5005..c0e7789e9 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -29,7 +29,7 @@
 
         <b-card-body no-body class="p-0 overflow-auto">
           <!-- Accordion Bootstrap -->
-          <template v-for="(elements, group) in filteredControlsGrouped">
+          <template v-for="({name, elements}, index) in filteredControlsGrouped">
             <b-button
               class="w-100 rounded-0 text-left"
               style="
@@ -39,20 +39,20 @@
                 border-color: rgb(224, 224, 224);
                 background-color: rgb(235, 238, 242);
               "
-              @click="toggleCollapse(groupId(group))"
+              @click="toggleCollapse(index)"
             >
-              {{ $t(group) }}
+              {{ $t(name) }}
               <b-icon
-                :icon="isCollapsed(groupId(group)) ? 'chevron-down' : 'chevron-up'"
+                :icon="isCollapsed(index) ? 'chevron-down' : 'chevron-up'"
                 class="float-right"
               />
             </b-button>
-            <b-collapse v-model="collapse[groupId(group)]" class="mt-2">
+            <b-collapse v-model="collapse[index]" class="mt-2">
               <b-list-group>
                 <draggable
                   v-if="renderControls"
                   id="controls"
-                  v-model="filteredControlsGrouped[group]"
+                  v-model="filteredControlsGrouped[index].elements"
                   data-cy="controls"
                   v-bind="{
                     sort: false,
@@ -516,6 +516,14 @@ const defaultConfig = [
   }
 ];
 
+const groupOrder = [
+  "AI Assistant",
+  "Input Fields",
+  "Content Fields",
+  "Navigation",
+  "Files",
+  "Advanced",
+];
 
 const controlGroups = {
   AIAssistant: ["AI Generated"],
@@ -730,23 +738,29 @@ export default {
     },
     filteredControlsGrouped() {
       const grouped = this.filteredControls.reduce((groups, control) => {
-        let group = control.group;
-        if (!group) {
-          group = "Advanced";
+        let name = control.group;
+        if (!name) {
+          name = "Advanced";
         }
-        if (!groups[group]) {
-          groups[group] = [];
+        let existingGroupIndex = groups.findIndex((group) => group.name === name);
+        if (existingGroupIndex === -1) {
+          groups.push({ name, order: this.getGroupOrder(control), elements: [] });
+          existingGroupIndex = groups.length - 1;
         }
-        groups[group].push(control);
+        groups[existingGroupIndex].elements.push(control);
         return groups;
-      }, {});
+      }, []);
+
+      // Sort the groups
+      grouped.sort((a, b) => a.order - b.order);
 
-      Object.keys(grouped).forEach((key) => {
-        grouped[key].sort((a, b) => {
+      // Sor the elements in each group
+      grouped.forEach((_, index) => {
+        grouped[index].elements.sort((a, b) => {
           const orderA = a.order !== undefined ? a.order : Number.POSITIVE_INFINITY;
           const orderB = b.order !== undefined ? b.order : Number.POSITIVE_INFINITY;
           return orderA - orderB;
-        })
+        });
       });
 
       return grouped;
@@ -841,18 +855,26 @@ export default {
     });
   },
   methods: {
-    toggleCollapse(groupId) {
-      if (this.collapse[groupId] && this.collapse[groupId] === true) {
-        this.collapse[groupId] = false;
-      } else {
-        this.collapse[groupId] = true;
+    getGroupOrder(control) {
+      let order = groupOrder.indexOf(control.group);
+      if (order === -1) {
+        if (control.groupOrder) {
+          order = control.groupOrder;
+        } else {
+          order = Number.POSITIVE_INFINITY;
+        }
       }
+      return order;
     },
-    isCollapsed(groupId) {
-      return this.collapse[groupId];
+    toggleCollapse(index) {
+      if (this.collapse[index] && this.collapse[index] === true) {
+        this.collapse[index] = false;
+      } else {
+        this.collapse[index] = true;
+      }
     },
-    groupId(group) {
-      return 'collapse-' + group.replace(/\s/g, "-");
+    isCollapsed(index) {
+      return this.collapse[index];
     },
     refreshContent() {
       this.editorContentKey++;

From 7dcd8334500e62bba147a1337648c849ce83f650 Mon Sep 17 00:00:00 2001
From: pmoskrojas <69815070+pmoskrojas@users.noreply.github.com>
Date: Wed, 10 Jan 2024 11:24:18 -0400
Subject: [PATCH 03/16] FOUR-13174: Support custom package form elements

---
 src/components/vue-form-builder.vue | 42 +++++++++++++------
 src/form-builder-controls.js        | 63 ++++++++++++++++++++++++++---
 2 files changed, 86 insertions(+), 19 deletions(-)

diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index c0e7789e9..f8e44989b 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -29,7 +29,9 @@
 
         <b-card-body no-body class="p-0 overflow-auto">
           <!-- Accordion Bootstrap -->
-          <template v-for="({name, elements}, index) in filteredControlsGrouped">
+          <template
+            v-for="({ name, elements }, index) in filteredControlsGrouped"
+          >
             <b-button
               class="w-100 rounded-0 text-left"
               style="
@@ -79,7 +81,11 @@
                       v-if="element.config && element.config.icon"
                       :class="element.config.icon"
                     />
-                    <span v-html="element.config.svg" class="svg-icon"></span>
+                    <span
+                      class="svg-icon"
+                      style="width: 12px; height: 12px"
+                      v-html="element.config.svg"
+                    ></span>
                     {{ $t(element.label) }}
                   </b-list-group-item>
                 </draggable>
@@ -332,7 +338,10 @@
         <b-card-body class="p-0 h-100 overflow-auto">
           <template v-for="accordion in accordions">
             <b-button
-              v-if="getInspectorFields(accordion) && getInspectorFields(accordion).length > 0"
+              v-if="
+                getInspectorFields(accordion) &&
+                getInspectorFields(accordion).length > 0
+              "
               :key="`${accordionName(accordion)}-button`"
               variant="outline"
               class="text-left card-header d-flex align-items-center w-100 outline-0 text-capitalize shadow-none"
@@ -522,7 +531,7 @@ const groupOrder = [
   "Content Fields",
   "Navigation",
   "Files",
-  "Advanced",
+  "Advanced"
 ];
 
 const controlGroups = {
@@ -679,7 +688,7 @@ export default {
       collator: null,
       editorContentKey: 0,
       cancelledJobs: [],
-      collapse: {},
+      collapse: {}
     };
   },
   computed: {
@@ -706,7 +715,7 @@ export default {
         "Checkbox",
         "Photo/Video",
         "Signature",
-        "Rich Text",
+        "",
         "Multicolumn / Table",
         "Image",
         "Record List",
@@ -742,9 +751,15 @@ export default {
         if (!name) {
           name = "Advanced";
         }
-        let existingGroupIndex = groups.findIndex((group) => group.name === name);
+        let existingGroupIndex = groups.findIndex(
+          (group) => group.name === name
+        );
         if (existingGroupIndex === -1) {
-          groups.push({ name, order: this.getGroupOrder(control), elements: [] });
+          groups.push({
+            name,
+            order: this.getGroupOrder(control),
+            elements: []
+          });
           existingGroupIndex = groups.length - 1;
         }
         groups[existingGroupIndex].elements.push(control);
@@ -757,8 +772,10 @@ export default {
       // Sor the elements in each group
       grouped.forEach((_, index) => {
         grouped[index].elements.sort((a, b) => {
-          const orderA = a.order !== undefined ? a.order : Number.POSITIVE_INFINITY;
-          const orderB = b.order !== undefined ? b.order : Number.POSITIVE_INFINITY;
+          const orderA =
+            a.order !== undefined ? a.order : Number.POSITIVE_INFINITY;
+          const orderB =
+            b.order !== undefined ? b.order : Number.POSITIVE_INFINITY;
           return orderA - orderB;
         });
       });
@@ -809,8 +826,7 @@ export default {
       ) {
         this.addDefaultAiControl();
       }
-    },
-
+    }
   },
   created() {
     Validator.register(
@@ -1015,7 +1031,7 @@ export default {
               : "");
           item.config = {
             content:
-              '<div style="' + style + '">' + item.config.label + "</div>",
+              "<div style=\"" + style + "\">" + item.config.label + "</div>",
             interactive: true
           };
         }
diff --git a/src/form-builder-controls.js b/src/form-builder-controls.js
index f2e21de06..e1e9f015a 100755
--- a/src/form-builder-controls.js
+++ b/src/form-builder-controls.js
@@ -51,9 +51,9 @@ export default [
     rendererComponent: FormHtmlEditor,
     rendererBinding: 'FormHtmlEditor',
     control: {
-      group: "Content Fields",
       popoverContent: "Use a Rich Text Editor to add HTML-formatted",
       order: 1.0,
+      groupOrder: 3.0,
       label: 'Rich Text',
       component: 'FormHtmlViewer',
       'editor-component': 'FormHtmlEditor',
@@ -93,6 +93,9 @@ export default [
     rendererComponent: FormMaskedInput,
     rendererBinding: 'FormMaskedInput',
     control: {
+      popoverContent: "Collect a string of text and format it as one of several data types",
+      order: 1.0,
+      groupOrder: 2.0,
       label: 'Line Input',
       component: 'FormInput',
       'editor-component': 'FormInput',
@@ -128,6 +131,9 @@ export default [
     rendererComponent: FormTextArea,
     rendererBinding: 'FormTextArea',
     control: {
+      popoverContent: "Collect a multi-line string of text, to allow for extensive, richly formatted responses",
+      order: 4.0,
+      groupOrder: 2.0,
       label: 'Textarea',
       component: 'FormTextArea',
       'editor-component': 'FormTextArea',
@@ -183,6 +189,9 @@ export default [
     rendererComponent: FormSelectList,
     rendererBinding: 'FormSelectList',
     control: {
+      popoverContent: "Collect options from a list, as radio butttons or dropdowns",
+      order: 2.0,
+      groupOrder: 2.0,
       label: 'Select List',
       component: 'FormSelectList',
       'editor-component': 'FormSelectList',
@@ -235,6 +244,9 @@ export default [
     rendererComponent: FormCheckbox,
     rendererBinding: 'FormCheckbox',
     control: {
+      popoverContent: "Add a checkbox or toggle for true/false responses",
+      order: 6.0,
+      groupOrder: 2.0,
       label: 'Checkbox',
       component: 'FormCheckbox',
       'editor-component': 'FormCheckbox',
@@ -274,6 +286,9 @@ export default [
     rendererComponent: FormDatePicker,
     rendererBinding: 'FormDatePicker',
     control: {
+      popoverContent: "Collect a date or date/time",
+      order: 5.0,
+      groupOrder: 2.0,
       label: 'Date Picker',
       component: 'FormDatePicker',
       'editor-component': 'FormDatePicker',
@@ -320,12 +335,14 @@ export default [
     },
   },
   {
-
     editorComponent: FormButton,
     editorBinding: 'FormButton',
     rendererComponent: FormButton,
     rendererBinding: 'FormButton',
     control: {
+      popoverContent: "Add and reuse another Form within this Form",
+      order: 1.0,
+      groupOrder: 4.0,
       label: 'Page Navigation',
       component: 'FormButton',
       'editor-component': 'FormButton',
@@ -358,9 +375,10 @@ export default [
     rendererComponent: FormMultiColumn,
     rendererBinding: 'FormMultiColumn',
     control: {
-      label: 'Multicolumn / Table',
-      group: "Content Fields",
+      popoverContent: "Organize and group your content in columns",
       order: 2.0,
+      groupOrder: 3.0,
+      label: 'Multicolumn / Table',
       component: 'FormMultiColumn',
       'editor-component': 'MultiColumn',
       'editor-control': 'MultiColumn',
@@ -402,6 +420,9 @@ export default [
     rendererComponent: FormLoop,
     rendererBinding: 'FormLoop',
     control: {
+      popoverContent: "Format content in a table structure and allow for adding rows",
+      order: 5.0,
+      groupOrder: 3.0,
       label: 'Loop',
       component: 'FormLoop',
       'editor-component': 'Loop',
@@ -435,6 +456,9 @@ export default [
     rendererComponent: FormRecordList,
     rendererBinding: 'FormRecordList',
     control: {
+      popoverContent: "Format content in a table structure",
+      order: 4.0,
+      groupOrder: 3.0,
       label: 'Record List',
       component: 'FormRecordList',
       'editor-component': 'FormText',
@@ -495,9 +519,10 @@ export default [
     rendererComponent: FormImage,
     rendererBinding: 'FormImage',
     control: {
-      label: 'Image',
+      popoverContent: "Upload an image to your screen",
       order: 3.0,
-      group: "Content Fields",
+      groupOrder: 3.0,
+      label: 'Image',
       component: 'FormImage',
       'editor-component': 'FormImage',
       'editor-control': 'FormImage',
@@ -561,6 +586,9 @@ export default [
     rendererComponent: FormButton,
     rendererBinding: 'FormButton',
     control: {
+      popoverContent: "Add an action to submit your form or update a field",
+      order: 3.0,
+      groupOrder: 2.0,
       label: 'Submit Button',
       component: 'FormButton',
       'editor-component': 'FormButton',
@@ -619,6 +647,9 @@ export default [
     rendererComponent: FormNestedScreen,
     rendererBinding: 'FormNestedScreen',
     control: {
+      popoverContent: "Add a repeatable section of content",
+      order: 6.0,
+      groupOrder: 3.0,
       label: 'Nested Screen',
       component: 'FormNestedScreen',
       'editor-component': 'FormNestedScreen',
@@ -650,6 +681,10 @@ export default [
     builderComponent: FileUpload,
     builderBinding: 'FileUpload',
     control: {
+      group: "Files",
+      popoverContent: "Add special buttons that link between subpages within this Form",
+      order: 1.0,
+      groupOrder: 5.0,
       label: 'File Upload',
       component: 'FileUpload',
       'editor-component': 'FileUpload',
@@ -700,6 +735,10 @@ export default [
     builderComponent: FileDownload,
     builderBinding: 'FileDownload',
     control: {
+      group: "Files",
+      popoverContent: "Collect files uploaded into the Form",
+      order: 2.0,
+      groupOrder: 5.0,
       label: 'File Download',
       component: 'FileDownload',
       'editor-component': 'FormText',
@@ -733,6 +772,9 @@ export default [
     builderComponent: BFormComponent,
     builderBinding: 'BFormComponent',
     control: {
+      popoverContent: "Add a Preview section that displays the content of a File",
+      order: 1.0,
+      groupOrder: 6.0,
       label: 'Bootstrap Component',
       component: 'BFormComponent',
       'editor-component': 'BFormComponent',
@@ -784,6 +826,9 @@ export default [
     builderComponent: BWrapperComponent,
     builderBinding: 'BWrapperComponent',
     control: {
+      popoverContent: "Wrap an existing subpage within this Form into a Bootstrap Vue component	",
+      order: 2.0,
+      groupOrder: 6.0,
       label: 'Bootstrap Wrapper',
       component: 'BWrapperComponent',
       'editor-component': 'BWrapperComponent',
@@ -842,6 +887,9 @@ export default [
     rendererComponent: FormListTable,
     rendererBinding: "FormListTable",
     control: {
+      popoverContent: "Create List Table",
+      order: 1.0,
+      groupOrder: 5.0,
       label: "List Table",
       component: "FormListTable",
       "editor-component": "FormListTable",
@@ -877,6 +925,9 @@ export default [
     rendererComponent: FormAnalyticsChart,
     rendererBinding: "FormAnalyticsChart",
     control: {
+      popoverContent: "Add a chart from the Analytics Reports",
+      order: 1.0,
+      groupOrder: 2.0,
       label: "Analytics Chart",
       component: "FormAnalyticsChart",
       "editor-component": "FormAnalyticsChart",

From a1da533495b1337656ab3c7e4d2558fcdbcae893 Mon Sep 17 00:00:00 2001
From: Nolan Ehrstrom <github@nolanpro.com>
Date: Wed, 10 Jan 2024 11:59:19 -0800
Subject: [PATCH 04/16] Allow packages to set group orders

---
 src/components/vue-form-builder.vue | 45 +++++++++++++++--------------
 1 file changed, 23 insertions(+), 22 deletions(-)

diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index c0e7789e9..5ddb29418 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -516,14 +516,13 @@ const defaultConfig = [
   }
 ];
 
-const groupOrder = [
-  "AI Assistant",
-  "Input Fields",
-  "Content Fields",
-  "Navigation",
-  "Files",
-  "Advanced",
-];
+const defaultGroupOrder = {
+  "Input Fields" : 1.0,
+  "Content Fields" : 2.0,
+  "Navigation" : 3.0,
+  "Files" : 4.0,
+  "Advanced" : 5.0,
+};
 
 const controlGroups = {
   AIAssistant: ["AI Generated"],
@@ -680,6 +679,7 @@ export default {
       editorContentKey: 0,
       cancelledJobs: [],
       collapse: {},
+      groupOrder: {},
     };
   },
   computed: {
@@ -738,13 +738,13 @@ export default {
     },
     filteredControlsGrouped() {
       const grouped = this.filteredControls.reduce((groups, control) => {
-        let name = control.group;
-        if (!name) {
-          name = "Advanced";
+        let groupName = _.get(control, 'group', null);
+        if (!groupName) {
+          groupName = "Advanced";
         }
-        let existingGroupIndex = groups.findIndex((group) => group.name === name);
+        let existingGroupIndex = groups.findIndex((group) => group.name === groupName);
         if (existingGroupIndex === -1) {
-          groups.push({ name, order: this.getGroupOrder(control), elements: [] });
+          groups.push({ name: groupName, order: this.getGroupOrder(groupName), elements: [] });
           existingGroupIndex = groups.length - 1;
         }
         groups[existingGroupIndex].elements.push(control);
@@ -753,6 +753,7 @@ export default {
 
       // Sort the groups
       grouped.sort((a, b) => a.order - b.order);
+      console.log('group sorted', grouped);
 
       // Sor the elements in each group
       grouped.forEach((_, index) => {
@@ -853,19 +854,19 @@ export default {
     this.$root.$on("ai-form-progress-updated", (progress, nonce) => {
       this.updateProgress(progress, nonce);
     });
+    console.log("Setting default group order");
+    this.setGroupOrder(defaultGroupOrder);
   },
   methods: {
-    getGroupOrder(control) {
-      let order = groupOrder.indexOf(control.group);
-      if (order === -1) {
-        if (control.groupOrder) {
-          order = control.groupOrder;
-        } else {
-          order = Number.POSITIVE_INFINITY;
-        }
-      }
+    getGroupOrder(groupName) {
+      let order = _.get(this.groupOrder, groupName, Number.POSITIVE_INFINITY);
+      console.log("Got group order", groupName, order);
       return order;
     },
+    setGroupOrder(orderConfig) {
+      console.log("Setting group order", orderConfig);
+      this.groupOrder = Object.assign({}, this.groupOrder, orderConfig);
+    },
     toggleCollapse(index) {
       if (this.collapse[index] && this.collapse[index] === true) {
         this.collapse[index] = false;

From 5bb1b5ac16b51f5fa8f3f46d13aa4ed4592e52fd Mon Sep 17 00:00:00 2001
From: Nolan Ehrstrom <github@nolanpro.com>
Date: Wed, 10 Jan 2024 13:19:27 -0800
Subject: [PATCH 05/16] Remove debugging

---
 src/components/vue-form-builder.vue |  6 +-----
 src/form-builder-controls.js        | 20 +-------------------
 2 files changed, 2 insertions(+), 24 deletions(-)

diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 5664f5f8f..9523018fb 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -765,14 +765,13 @@ export default {
           });
           existingGroupIndex = groups.length - 1;
         }
-        
+
         groups[existingGroupIndex].elements.push(control);
         return groups;
       }, []);
 
       // Sort the groups
       grouped.sort((a, b) => a.order - b.order);
-      console.log('group sorted', grouped);
 
       // Sor the elements in each group
       grouped.forEach((_, index) => {
@@ -874,17 +873,14 @@ export default {
     this.$root.$on("ai-form-progress-updated", (progress, nonce) => {
       this.updateProgress(progress, nonce);
     });
-    console.log("Setting default group order");
     this.setGroupOrder(defaultGroupOrder);
   },
   methods: {
     getGroupOrder(groupName) {
       let order = _.get(this.groupOrder, groupName, Number.POSITIVE_INFINITY);
-      console.log("Got group order", groupName, order);
       return order;
     },
     setGroupOrder(orderConfig) {
-      console.log("Setting group order", orderConfig);
       this.groupOrder = Object.assign({}, this.groupOrder, orderConfig);
     },
     toggleCollapse(index) {
diff --git a/src/form-builder-controls.js b/src/form-builder-controls.js
index e1e9f015a..80f119f5d 100755
--- a/src/form-builder-controls.js
+++ b/src/form-builder-controls.js
@@ -53,7 +53,6 @@ export default [
     control: {
       popoverContent: "Use a Rich Text Editor to add HTML-formatted",
       order: 1.0,
-      groupOrder: 3.0,
       label: 'Rich Text',
       component: 'FormHtmlViewer',
       'editor-component': 'FormHtmlEditor',
@@ -95,7 +94,6 @@ export default [
     control: {
       popoverContent: "Collect a string of text and format it as one of several data types",
       order: 1.0,
-      groupOrder: 2.0,
       label: 'Line Input',
       component: 'FormInput',
       'editor-component': 'FormInput',
@@ -133,7 +131,6 @@ export default [
     control: {
       popoverContent: "Collect a multi-line string of text, to allow for extensive, richly formatted responses",
       order: 4.0,
-      groupOrder: 2.0,
       label: 'Textarea',
       component: 'FormTextArea',
       'editor-component': 'FormTextArea',
@@ -191,7 +188,6 @@ export default [
     control: {
       popoverContent: "Collect options from a list, as radio butttons or dropdowns",
       order: 2.0,
-      groupOrder: 2.0,
       label: 'Select List',
       component: 'FormSelectList',
       'editor-component': 'FormSelectList',
@@ -246,7 +242,6 @@ export default [
     control: {
       popoverContent: "Add a checkbox or toggle for true/false responses",
       order: 6.0,
-      groupOrder: 2.0,
       label: 'Checkbox',
       component: 'FormCheckbox',
       'editor-component': 'FormCheckbox',
@@ -288,7 +283,6 @@ export default [
     control: {
       popoverContent: "Collect a date or date/time",
       order: 5.0,
-      groupOrder: 2.0,
       label: 'Date Picker',
       component: 'FormDatePicker',
       'editor-component': 'FormDatePicker',
@@ -342,7 +336,6 @@ export default [
     control: {
       popoverContent: "Add and reuse another Form within this Form",
       order: 1.0,
-      groupOrder: 4.0,
       label: 'Page Navigation',
       component: 'FormButton',
       'editor-component': 'FormButton',
@@ -376,8 +369,8 @@ export default [
     rendererBinding: 'FormMultiColumn',
     control: {
       popoverContent: "Organize and group your content in columns",
+      group: "Content Fields",
       order: 2.0,
-      groupOrder: 3.0,
       label: 'Multicolumn / Table',
       component: 'FormMultiColumn',
       'editor-component': 'MultiColumn',
@@ -422,7 +415,6 @@ export default [
     control: {
       popoverContent: "Format content in a table structure and allow for adding rows",
       order: 5.0,
-      groupOrder: 3.0,
       label: 'Loop',
       component: 'FormLoop',
       'editor-component': 'Loop',
@@ -458,7 +450,6 @@ export default [
     control: {
       popoverContent: "Format content in a table structure",
       order: 4.0,
-      groupOrder: 3.0,
       label: 'Record List',
       component: 'FormRecordList',
       'editor-component': 'FormText',
@@ -521,7 +512,6 @@ export default [
     control: {
       popoverContent: "Upload an image to your screen",
       order: 3.0,
-      groupOrder: 3.0,
       label: 'Image',
       component: 'FormImage',
       'editor-component': 'FormImage',
@@ -588,7 +578,6 @@ export default [
     control: {
       popoverContent: "Add an action to submit your form or update a field",
       order: 3.0,
-      groupOrder: 2.0,
       label: 'Submit Button',
       component: 'FormButton',
       'editor-component': 'FormButton',
@@ -649,7 +638,6 @@ export default [
     control: {
       popoverContent: "Add a repeatable section of content",
       order: 6.0,
-      groupOrder: 3.0,
       label: 'Nested Screen',
       component: 'FormNestedScreen',
       'editor-component': 'FormNestedScreen',
@@ -684,7 +672,6 @@ export default [
       group: "Files",
       popoverContent: "Add special buttons that link between subpages within this Form",
       order: 1.0,
-      groupOrder: 5.0,
       label: 'File Upload',
       component: 'FileUpload',
       'editor-component': 'FileUpload',
@@ -738,7 +725,6 @@ export default [
       group: "Files",
       popoverContent: "Collect files uploaded into the Form",
       order: 2.0,
-      groupOrder: 5.0,
       label: 'File Download',
       component: 'FileDownload',
       'editor-component': 'FormText',
@@ -774,7 +760,6 @@ export default [
     control: {
       popoverContent: "Add a Preview section that displays the content of a File",
       order: 1.0,
-      groupOrder: 6.0,
       label: 'Bootstrap Component',
       component: 'BFormComponent',
       'editor-component': 'BFormComponent',
@@ -828,7 +813,6 @@ export default [
     control: {
       popoverContent: "Wrap an existing subpage within this Form into a Bootstrap Vue component	",
       order: 2.0,
-      groupOrder: 6.0,
       label: 'Bootstrap Wrapper',
       component: 'BWrapperComponent',
       'editor-component': 'BWrapperComponent',
@@ -889,7 +873,6 @@ export default [
     control: {
       popoverContent: "Create List Table",
       order: 1.0,
-      groupOrder: 5.0,
       label: "List Table",
       component: "FormListTable",
       "editor-component": "FormListTable",
@@ -927,7 +910,6 @@ export default [
     control: {
       popoverContent: "Add a chart from the Analytics Reports",
       order: 1.0,
-      groupOrder: 2.0,
       label: "Analytics Chart",
       component: "FormAnalyticsChart",
       "editor-component": "FormAnalyticsChart",

From 0bd44103d07375cc62948a3df1e45a41daf57389 Mon Sep 17 00:00:00 2001
From: pmoskrojas <69815070+pmoskrojas@users.noreply.github.com>
Date: Thu, 11 Jan 2024 14:24:30 -0400
Subject: [PATCH 06/16] Adding groups to each package in Control Menu

---
 src/form-builder-controls.js | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/form-builder-controls.js b/src/form-builder-controls.js
index 80f119f5d..8b5ec5df0 100755
--- a/src/form-builder-controls.js
+++ b/src/form-builder-controls.js
@@ -53,6 +53,7 @@ export default [
     control: {
       popoverContent: "Use a Rich Text Editor to add HTML-formatted",
       order: 1.0,
+      group: 'Content Fields',
       label: 'Rich Text',
       component: 'FormHtmlViewer',
       'editor-component': 'FormHtmlEditor',
@@ -94,6 +95,7 @@ export default [
     control: {
       popoverContent: "Collect a string of text and format it as one of several data types",
       order: 1.0,
+      group: 'Input Fields',
       label: 'Line Input',
       component: 'FormInput',
       'editor-component': 'FormInput',
@@ -131,6 +133,7 @@ export default [
     control: {
       popoverContent: "Collect a multi-line string of text, to allow for extensive, richly formatted responses",
       order: 4.0,
+      group: 'Input Fields',
       label: 'Textarea',
       component: 'FormTextArea',
       'editor-component': 'FormTextArea',
@@ -188,6 +191,7 @@ export default [
     control: {
       popoverContent: "Collect options from a list, as radio butttons or dropdowns",
       order: 2.0,
+      group: 'Input Fields',
       label: 'Select List',
       component: 'FormSelectList',
       'editor-component': 'FormSelectList',
@@ -242,6 +246,7 @@ export default [
     control: {
       popoverContent: "Add a checkbox or toggle for true/false responses",
       order: 6.0,
+      group: 'Input Fields',
       label: 'Checkbox',
       component: 'FormCheckbox',
       'editor-component': 'FormCheckbox',
@@ -283,6 +288,7 @@ export default [
     control: {
       popoverContent: "Collect a date or date/time",
       order: 5.0,
+      group: 'Input Fields',
       label: 'Date Picker',
       component: 'FormDatePicker',
       'editor-component': 'FormDatePicker',
@@ -336,6 +342,7 @@ export default [
     control: {
       popoverContent: "Add and reuse another Form within this Form",
       order: 1.0,
+      group: 'Navigation',
       label: 'Page Navigation',
       component: 'FormButton',
       'editor-component': 'FormButton',
@@ -369,8 +376,8 @@ export default [
     rendererBinding: 'FormMultiColumn',
     control: {
       popoverContent: "Organize and group your content in columns",
-      group: "Content Fields",
       order: 2.0,
+      group: 'Content Fields',
       label: 'Multicolumn / Table',
       component: 'FormMultiColumn',
       'editor-component': 'MultiColumn',
@@ -415,6 +422,7 @@ export default [
     control: {
       popoverContent: "Format content in a table structure and allow for adding rows",
       order: 5.0,
+      group: 'Content Fields',
       label: 'Loop',
       component: 'FormLoop',
       'editor-component': 'Loop',
@@ -450,6 +458,7 @@ export default [
     control: {
       popoverContent: "Format content in a table structure",
       order: 4.0,
+      group: 'Content Fields',
       label: 'Record List',
       component: 'FormRecordList',
       'editor-component': 'FormText',
@@ -512,6 +521,7 @@ export default [
     control: {
       popoverContent: "Upload an image to your screen",
       order: 3.0,
+      group: 'Content Fields',
       label: 'Image',
       component: 'FormImage',
       'editor-component': 'FormImage',
@@ -578,6 +588,7 @@ export default [
     control: {
       popoverContent: "Add an action to submit your form or update a field",
       order: 3.0,
+      group: 'Input Fields',
       label: 'Submit Button',
       component: 'FormButton',
       'editor-component': 'FormButton',
@@ -638,6 +649,7 @@ export default [
     control: {
       popoverContent: "Add a repeatable section of content",
       order: 6.0,
+      group: 'Content Fields',
       label: 'Nested Screen',
       component: 'FormNestedScreen',
       'editor-component': 'FormNestedScreen',
@@ -672,6 +684,7 @@ export default [
       group: "Files",
       popoverContent: "Add special buttons that link between subpages within this Form",
       order: 1.0,
+      group: 'Files',
       label: 'File Upload',
       component: 'FileUpload',
       'editor-component': 'FileUpload',
@@ -722,9 +735,9 @@ export default [
     builderComponent: FileDownload,
     builderBinding: 'FileDownload',
     control: {
-      group: "Files",
       popoverContent: "Collect files uploaded into the Form",
       order: 2.0,
+      group: "Files",
       label: 'File Download',
       component: 'FileDownload',
       'editor-component': 'FormText',
@@ -760,6 +773,7 @@ export default [
     control: {
       popoverContent: "Add a Preview section that displays the content of a File",
       order: 1.0,
+      group: 'Advanced',
       label: 'Bootstrap Component',
       component: 'BFormComponent',
       'editor-component': 'BFormComponent',
@@ -813,6 +827,7 @@ export default [
     control: {
       popoverContent: "Wrap an existing subpage within this Form into a Bootstrap Vue component	",
       order: 2.0,
+      group: 'Advanced',
       label: 'Bootstrap Wrapper',
       component: 'BWrapperComponent',
       'editor-component': 'BWrapperComponent',
@@ -872,7 +887,8 @@ export default [
     rendererBinding: "FormListTable",
     control: {
       popoverContent: "Create List Table",
-      order: 1.0,
+      order: 3.0,
+      group: 'Files',
       label: "List Table",
       component: "FormListTable",
       "editor-component": "FormListTable",
@@ -909,7 +925,8 @@ export default [
     rendererBinding: "FormAnalyticsChart",
     control: {
       popoverContent: "Add a chart from the Analytics Reports",
-      order: 1.0,
+      order: 2.0,
+      group: 'Dashboards',
       label: "Analytics Chart",
       component: "FormAnalyticsChart",
       "editor-component": "FormAnalyticsChart",

From 2f3d2be9342559d53425c594e634099d9a6f30ad Mon Sep 17 00:00:00 2001
From: Nolan Ehrstrom <github@nolanpro.com>
Date: Fri, 12 Jan 2024 12:40:30 -0800
Subject: [PATCH 07/16] Ad aria-control for cypress tests

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

diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 9523018fb..d0a8fcd88 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -34,6 +34,7 @@
           >
             <b-button
               class="w-100 rounded-0 text-left"
+              :aria-controls="`collapse-${index + 1}`"
               style="
                 font-size: smaller;
                 height: 42px;

From d55ca1b01507345c10da011fb2ae3629f20f9b90 Mon Sep 17 00:00:00 2001
From: Oscar Rojas <69815070+pmoskrojas@users.noreply.github.com>
Date: Fri, 12 Jan 2024 16:57:52 -0400
Subject: [PATCH 08/16] Fix some issues related to Control Menu

---
 src/components/vue-form-builder.vue | 2 +-
 src/form-builder-controls.js        | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 9523018fb..4b3cb42e0 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -881,7 +881,7 @@ export default {
       return order;
     },
     setGroupOrder(orderConfig) {
-      this.groupOrder = Object.assign({}, this.groupOrder, orderConfig);
+      this.groupOrder = { ...orderConfig };
     },
     toggleCollapse(index) {
       if (this.collapse[index] && this.collapse[index] === true) {
diff --git a/src/form-builder-controls.js b/src/form-builder-controls.js
index 8b5ec5df0..d75000f35 100755
--- a/src/form-builder-controls.js
+++ b/src/form-builder-controls.js
@@ -684,7 +684,6 @@ export default [
       group: "Files",
       popoverContent: "Add special buttons that link between subpages within this Form",
       order: 1.0,
-      group: 'Files',
       label: 'File Upload',
       component: 'FileUpload',
       'editor-component': 'FileUpload',

From c45779cd5595b07547dcefabbde015db5621c0f7 Mon Sep 17 00:00:00 2001
From: Nolan Ehrstrom <github@nolanpro.com>
Date: Fri, 12 Jan 2024 15:32:59 -0800
Subject: [PATCH 09/16] Fix tests

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

diff --git a/tests/e2e/specs/DeviceVisivilityInspector.spec.js b/tests/e2e/specs/DeviceVisivilityInspector.spec.js
index ba81d98b7..b6e358cff 100644
--- a/tests/e2e/specs/DeviceVisivilityInspector.spec.js
+++ b/tests/e2e/specs/DeviceVisivilityInspector.spec.js
@@ -53,7 +53,7 @@ describe('Device Visiblility Inspector', () => {
   });
   it('Verify if a FileDownload has device visiblility settings', () => {
     cy.visit('/');
-    cy.openAcordeon("collapse-5");
+    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();
@@ -67,7 +67,7 @@ describe('Device Visiblility Inspector', () => {
   });
   it('Verify if a FileUpload has device visiblility settings', () => {
     cy.visit('/');
-    cy.openAcordeon("collapse-5");
+    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();
@@ -463,4 +463,4 @@ describe('Device Visiblility Inspector', () => {
     cy.get('[data-cy="screen-field-form_text_area_1"]').click().should('be.visible');
     cy.get('button[aria-label="New Submit"]').should('be.visible');
   });
-});
\ No newline at end of file
+});

From ce44df26251694002e5e167491f02ff40f2ffbd5 Mon Sep 17 00:00:00 2001
From: pmoskrojas <69815070+pmoskrojas@users.noreply.github.com>
Date: Wed, 17 Jan 2024 09:31:07 -0400
Subject: [PATCH 10/16] Fix Display Screen Dashboard group position

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

diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 4f8f566f1..b13a83791 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -529,6 +529,7 @@ const defaultConfig = [
 const defaultGroupOrder = {
   "Input Fields" : 1.0,
   "Content Fields" : 2.0,
+  "Dashboards" : 2.5,
   "Navigation" : 3.0,
   "Files" : 4.0,
   "Advanced" : 5.0,

From b20578cd53f37a4d68b0370396e79aa7ccb510e1 Mon Sep 17 00:00:00 2001
From: Nolan Ehrstrom <github@nolanpro.com>
Date: Wed, 17 Jan 2024 13:34:18 -0800
Subject: [PATCH 11/16] Fix group order

---
 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 b13a83791..cb28b7089 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -883,7 +883,7 @@ export default {
       return order;
     },
     setGroupOrder(orderConfig) {
-      this.groupOrder = { ...orderConfig };
+      this.groupOrder = { ...this.groupOrder, ...orderConfig };
     },
     toggleCollapse(index) {
       if (this.collapse[index] && this.collapse[index] === true) {

From b5b0b5106e8870b27890226fb293b60414cb2835 Mon Sep 17 00:00:00 2001
From: Nolan Ehrstrom <github@nolanpro.com>
Date: Wed, 17 Jan 2024 15:07:17 -0800
Subject: [PATCH 12/16] Fix tests

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

diff --git a/tests/e2e/specs/DeviceVisivilityInspector.spec.js b/tests/e2e/specs/DeviceVisivilityInspector.spec.js
index b6e358cff..c6710efb6 100644
--- a/tests/e2e/specs/DeviceVisivilityInspector.spec.js
+++ b/tests/e2e/specs/DeviceVisivilityInspector.spec.js
@@ -53,7 +53,7 @@ describe('Device Visiblility Inspector', () => {
   });
   it('Verify if a FileDownload has device visiblility settings', () => {
     cy.visit('/');
-    cy.openAcordeon("collapse-4");
+    cy.openAcordeon("collapse-5");
     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();
@@ -67,7 +67,7 @@ describe('Device Visiblility Inspector', () => {
   });
   it('Verify if a FileUpload has device visiblility settings', () => {
     cy.visit('/');
-    cy.openAcordeon("collapse-4");
+    cy.openAcordeon("collapse-5");
     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();

From d02246ffb1602388857eba21cba1afccdf282007 Mon Sep 17 00:00:00 2001
From: pmoskrojas <69815070+pmoskrojas@users.noreply.github.com>
Date: Thu, 18 Jan 2024 11:39:41 -0400
Subject: [PATCH 13/16] FOUR-13192 and FOUR-13193: Fix tooltip does not have a
 padding / Accordion title does not have bold style

---
 src/components/vue-form-builder.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index b13a83791..9d3730b30 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -44,7 +44,7 @@
               "
               @click="toggleCollapse(index)"
             >
-              {{ $t(name) }}
+              <strong>{{ $t(name) }}</strong>
               <b-icon
                 :icon="isCollapsed(index) ? 'chevron-down' : 'chevron-up'"
                 class="float-right"
@@ -69,7 +69,8 @@
                     :key="elementIndex"
                     v-b-popover.hover.right="{
                       content: $t(element.popoverContent),
-                      customClass: 'custom-popover'
+                      customClass: 'custom-popover',
+                      boundaryPadding: 16
                     }"
                     :boundary="'viewport'"
                     :data-cy="`controls-${element.component}`"
@@ -1390,10 +1391,14 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
 .custom-popover {
   margin-right: -400px;
+  padding: 16px;
 }
+</style>
+
+<style>
 .gray-text {
   color: gray;
 }

From 9fa3ec56ea9faadc04c381ed02ff2a233797f2fb Mon Sep 17 00:00:00 2001
From: Nolan Ehrstrom <github@nolanpro.com>
Date: Thu, 18 Jan 2024 11:54:12 -0800
Subject: [PATCH 14/16] Cleanup

---
 src/components/vue-form-builder.vue | 104 +---------------------------
 src/form-builder-controls.js        |   2 +-
 2 files changed, 2 insertions(+), 104 deletions(-)

diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 246738edc..881760bd8 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -536,79 +536,6 @@ const defaultGroupOrder = {
   "Advanced" : 5.0,
 };
 
-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"],
-  Dashboards: ["Saved Search Chart", "Analytics Chart"],
-  Files: ["File Upload", "File Download", "File Preview", "List Table"],
-  Advanced: [
-    "Bootstrap Component",
-    "Bootstrap Wrapper",
-    "Captcha",
-    "Google Places",
-    "Saved Search Chart",
-    "Plaid"
-  ]
-};
-
-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": "Format content in a table structure ",
-  // 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",
-  "Analytics Chart": "Add a chart from the Analytics Reports",
-  "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",
-  "List Table": "Create List Table",
-  "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":
-    "Add a Captcha box to your Form",
-  "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: {
@@ -708,35 +635,6 @@ 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",
-        "",
-        "Multicolumn / Table",
-        "Image",
-        "Record List",
-        "Loop",
-        "Nested Screen",
-        "Page Navigation",
-        "Saved Search Chart",
-        "Analytics Chart",
-        "File Upload",
-        "File Download",
-        "File Preview",
-        "List Table",
-        "Bootstrap Component",
-        "Bootstrap Wrapper",
-        "Captcha",
-        "Google Places",
-        "Saved Search Chart"
-      ];
 
       const excludedLabels = [""];
 
@@ -776,7 +674,7 @@ export default {
       // Sort the groups
       grouped.sort((a, b) => a.order - b.order);
 
-      // Sor the elements in each group
+      // Sort the elements in each group
       grouped.forEach((_, index) => {
         grouped[index].elements.sort((a, b) => {
           const orderA =
diff --git a/src/form-builder-controls.js b/src/form-builder-controls.js
index d75000f35..5ce1e5f37 100755
--- a/src/form-builder-controls.js
+++ b/src/form-builder-controls.js
@@ -924,7 +924,7 @@ export default [
     rendererBinding: "FormAnalyticsChart",
     control: {
       popoverContent: "Add a chart from the Analytics Reports",
-      order: 2.0,
+      order: 6.0,
       group: 'Dashboards',
       label: "Analytics Chart",
       component: "FormAnalyticsChart",

From d281333025b25b8457941500771ddd23fdf24ef0 Mon Sep 17 00:00:00 2001
From: Nolan Ehrstrom <github@nolanpro.com>
Date: Fri, 19 Jan 2024 09:44:50 -0800
Subject: [PATCH 15/16] Remove ai control background color

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

diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 881760bd8..5ea6618f7 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -74,10 +74,6 @@
                     }"
                     :boundary="'viewport'"
                     :data-cy="`controls-${element.component}`"
-                    :class="{
-                      'ai-control': element.component === 'AiSection',
-                      'gray-text': true
-                    }"
                   >
                     <i
                       v-if="element.config && element.config.icon"
@@ -1431,10 +1427,6 @@ $side-bar-font-size: 0.875rem;
   background: #cbdfff;
 }
 
-.ai-control {
-  background: #fff4d3;
-}
-
 .pulse {
   animation: pulse-animation 2s infinite;
 }

From 5786edd770cb2afa4d4eb3900628aee7b5f6305a Mon Sep 17 00:00:00 2001
From: Nolan Ehrstrom <github@nolanpro.com>
Date: Fri, 19 Jan 2024 10:29:02 -0800
Subject: [PATCH 16/16] Use const and fix icon color

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

diff --git a/src/components/vue-form-builder.vue b/src/components/vue-form-builder.vue
index 5ea6618f7..6b9c94772 100644
--- a/src/components/vue-form-builder.vue
+++ b/src/components/vue-form-builder.vue
@@ -74,6 +74,7 @@
                     }"
                     :boundary="'viewport'"
                     :data-cy="`controls-${element.component}`"
+                    class="gray-text"
                   >
                     <i
                       v-if="element.config && element.config.icon"
@@ -532,6 +533,7 @@ const defaultGroupOrder = {
   "Advanced" : 5.0,
 };
 
+const DEFAULT_GROUP = "Advanced";
 
 export default {
   components: {
@@ -647,7 +649,7 @@ export default {
         let groupName = _.get(control, 'group', null);
         
         if (!groupName) {
-          groupName = "Advanced";
+          groupName = DEFAULT_GROUP;
         }
         
         let existingGroupIndex = groups.findIndex((group) => {
@@ -1294,11 +1296,11 @@ export default {
 
 <style>
 .gray-text {
-  color: gray;
+  color: #556271;
 }
 
 .icon {
-  color: gray;
+  color: #6A7888;
 }
 .custom-row {
   height: 80vh;
@@ -1311,6 +1313,10 @@ export default {
 .svg-icon > svg {
   margin-bottom: 3px;
 }
+
+.svg-icon > svg > path {
+  fill: #6A7888;
+}
 </style>
 
 <style lang="scss" scoped>