FOUR-12891 / FOUR-12881 Fix Balloon position and improvement of Control Menu for Display Screen

src/components/vue-form-builder.vue

@@ -70,7 +70,10 @@
                       group.key
                     ]"
                     :key="elementIndex"
-                    v-b-popover.hover.top="element.popoverContent"
+                    v-b-popover.hover.right="{
+                      content: $t(element.popoverContent),
+                      customClass: 'custom-popover'
+                    }"
                     :boundary="'viewport'"
                     :data-cy="`controls-${element.component}`"
                     :class="{
@@ -546,7 +549,8 @@ const controlGroups = {
     "Nested Screen"
   ],
   Navigation: ["Page Navigation"],
-  Files: ["File Upload", "File Download", "File Preview"],
+  Dashboards: ["Saved Search Chart", "Analytics Chart"],
+  Files: ["File Upload", "File Download", "File Preview", "List Table"],
   Advanced: [
     "Bootstrap Component",
     "Bootstrap Wrapper",
@@ -580,10 +584,12 @@ const popoverContentMap = {
   "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":
@@ -681,11 +687,12 @@ export default {
         { 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" }
       ],
 
-      isCollapsed: new Array(6).fill(true)
+      isCollapsed: new Array(7).fill(true)
     };
   },
   computed: {
@@ -719,9 +726,12 @@ export default {
         "Loop",
         "Nested Screen",
         "Page Navigation",
+        "Saved Search Chart",
+        "Analytics Chart",
         "File Upload",
         "File Download",
         "File Preview",
+        "List Table",
         "Bootstrap Component",
         "Bootstrap Wrapper",
         "Captcha",
@@ -889,7 +899,7 @@ export default {
     },
     checkForCaptcha(items, insideLoop = false, nestedScreen = null) {
       items.forEach((item) => {
-        if (!item.items && item.component == "Captcha" && insideLoop) {
+        if (!item.items && item.component === "Captcha" && insideLoop) {
           if (nestedScreen && nestedScreen.config.screen) {
             this.$root.$emit("remove-nested", nestedScreen.config.screen);
             nestedScreen.config.screen = null;
@@ -1375,6 +1385,9 @@ export default {
 </script>
 
 <style>
+.custom-popover {
+  margin-right: -400px;
+}
 .gray-text {
   color: gray;
 }