draft: Update ProactiveHelp to use a tooltip

app/frontend/src/components/admin/FormComponentsProactiveHelp.vue

@@ -36,8 +36,8 @@ function extractGroupComponents(groupName) {
     FormComponentProactiveHelpValues
   )) {
     if (title && title === groupName && components) {
-      for (let componentName of components) {
-        groupComponents.push({ componentName: componentName });
+      for (let [key, value] of Object.entries(components)) {
+        groupComponents.push({ key: key, componentName: value });
       }
     }
   }

app/frontend/src/components/designer/FormDesigner.vue

@@ -9,13 +9,12 @@ import FloatButton from '~/components/designer/FloatButton.vue';
 import ProactiveHelpPreviewDialog from '~/components/infolinks/ProactiveHelpPreviewDialog.vue';
 import formioIl8next from '~/internationalization/trans/formio/formio.json';
 import templateExtensions from '~/plugins/templateExtensions';
-import { formService } from '~/services';
+import { formService, userService } from '~/services';
 import { useAuthStore } from '~/store/auth';
 import { useFormStore } from '~/store/form';
 import { useNotificationStore } from '~/store/notification';
 import { IdentityMode } from '~/utils/constants';
 import { generateIdps } from '~/utils/transformUtils';
-import { userService } from '../../services';
 
 export default {
   components: {
@@ -77,6 +76,16 @@ export default {
         redoClicked: false,
         undoClicked: false,
       },
+      proactiveHelp: {
+        isHovering: false,
+        currentKey: '',
+        currentGroup: '',
+        tooltip: {
+          enabled: false,
+          closeDelay: 3000,
+          target: null,
+        },
+      },
       reRenderFormIo: 0,
       savedStatus: this.isSavedStatus,
       saving: false,
@@ -191,7 +200,7 @@ export default {
             },
           },
         },
-        language: this.lang ? this.lang : 'en',
+        language: this.locale ? this.locale : 'en',
         i18n: formioIl8next,
         templates: templateExtensions,
         evalContext: {
@@ -207,7 +216,7 @@ export default {
         this.reRenderFormIo += 1;
       }
     },
-    lang(value) {
+    locale(value) {
       if (value) {
         this.reRenderFormIo += 1;
       }
@@ -217,6 +226,46 @@ export default {
     if (this.formId) {
       Promise.all([this.fetchForm(this.formId), this.getFormSchema()]);
     }
+    document.addEventListener('mousemove', (e) => {
+      let target = e.target;
+      this.proactiveHelp.isHovering = false;
+      if (target) {
+        let parent = e.target.parentElement;
+        // iterate our proactive help groups
+        for (const [groupKey, groupValue] of Object.entries(
+          this.designerOptions.builder
+        )) {
+          if (parent && parent.id === `group-container-${groupKey}`) {
+            // check to see if we're hovering over something we have proactive help for
+            for (const [
+              proactiveGroupKey,
+              proactiveGroupValue,
+            ] of Object.entries(this.fcProactiveHelpGroupList)) {
+              if (proactiveGroupKey === groupValue.title) {
+                const dataKey = e.target.getAttribute('data-key');
+                const proactiveHelp = proactiveGroupValue.find(
+                  (pGV) => pGV.key === dataKey
+                );
+                // If the key of the hovered form component has a proactive help
+                if (proactiveHelp) {
+                  this.proactiveHelp.currentKey = dataKey;
+                  this.proactiveHelp.currentGroup = groupValue.title;
+                  this.proactiveHelp.tooltip.target = target;
+                  this.proactiveHelp.isHovering = true;
+                }
+              }
+            }
+          }
+        }
+      }
+    });
+
+    document.addEventListener('click', () => {
+      if (!this.proactiveHelp.isHovering) {
+        // If we click outside of the formio component
+        this.proactiveHelp.tooltip.enabled = false;
+      }
+    });
   },
   async mounted() {
     // load up headers for any External API calls
@@ -338,8 +387,6 @@ export default {
     // ---------------------------------------------------------------------------------------------------
     init() {
       this.setDirtyFlag(false);
-      // Since change is triggered during loading
-      this.onFormLoad();
     },
     onChangeMethod(changed, flags, modified) {
       // Don't call an unnecessary action if already dirty
@@ -365,44 +412,6 @@ export default {
       // Component remove start
       this.patch.componentRemovedStart = true;
     },
-
-    onFormLoad() {
-      // Contains the names of every category of components
-      let builder = this.$refs.formioForm.builder.instance.builder;
-      if (Object.keys(this.fcProactiveHelpGroupList).length > 0) {
-        for (const [groupName, elements] of Object.entries(
-          this.fcProactiveHelpGroupList
-        )) {
-          let extractedElementsNames = this.extractPublishedElement(elements);
-          for (const [key, builderElements] of Object.entries(builder)) {
-            if (groupName === builderElements.title) {
-              let containerId = `group-container-${key}`;
-              let containerEl = document.getElementById(containerId);
-              if (containerEl) {
-                for (let i = 0; i < containerEl.children.length; i++) {
-                  let elementName = containerEl.children[i].textContent.trim();
-                  if (extractedElementsNames.includes(elementName)) {
-                    // Append the info el
-                    let child = document.createElement('i');
-
-                    child.setAttribute(
-                      'class',
-                      'fa fa-info-circle info-helper'
-                    );
-                    child.style.float = 'right';
-                    child.style.fontSize = '14px';
-                    child.addEventListener('click', function () {
-                      this.showHelperClicked(elementName, groupName);
-                    });
-                    containerEl.children[i].appendChild(child);
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    },
     extractPublishedElement(elements) {
       let publishedComponentsNames = [];
       for (let element of elements) {
@@ -415,9 +424,7 @@ export default {
 
     async showHelperClicked(elementName, groupName) {
       const elements = this.fcProactiveHelpGroupList[groupName];
-      this.component = elements.find(
-        (element) => element.componentName === elementName
-      );
+      this.component = elements.find((element) => element.key === elementName);
       await this.getFCProactiveHelpImageUrl(this.component.id);
       this.onShowClosePreviewDialog();
     },
@@ -710,6 +717,17 @@ export default {
 
 <template>
   <div :class="{ 'dir-rtl': isRTL }">
+    <v-tooltip
+      v-model="proactiveHelp.tooltip.enabled"
+      :activator="proactiveHelp.tooltip.target"
+      :close-on-back="true"
+      :close-delay="proactiveHelp.tooltip.closeDelay"
+      @click="
+        showHelperClicked(proactiveHelp.currentKey, proactiveHelp.currentGroup)
+      "
+    >
+      <div class="contextual-help">Click here for more help</div>
+    </v-tooltip>
     <div
       class="mt-6 d-flex flex-md-row justify-space-between flex-sm-column-reverse flex-xs-column-reverse gapRow"
     >
@@ -788,6 +806,12 @@ export default {
         v-html="$t('trans.formDesigner.formDesignInfoB')"
       ></p>
     </BaseInfoCard>
+    <ProactiveHelpPreviewDialog
+      :show-dialog="showHelpLinkDialog"
+      :component="component"
+      :fc-proactive-help-image-url="fcProactiveHelpImageUrl"
+      @close-dialog="onShowClosePreviewDialog"
+    />
     <FormBuilder
       ref="formioForm"
       :key="reRenderFormIo"
@@ -800,13 +824,6 @@ export default {
       @initialized="init"
       @addComponent="onAddSchemaComponent"
       @removeComponent="onRemoveSchemaComponent"
-      @formLoad="onFormLoad"
-    />
-    <ProactiveHelpPreviewDialog
-      :show-dialog="showHelpLinkDialog"
-      :component="component"
-      :fc-proactive-help-image-url="fcProactiveHelpImageUrl"
-      @close-dialog="onShowClosePreviewDialog"
     />
     <FloatButton
       placement="bottom-right"
@@ -865,4 +882,19 @@ export default {
 
   position: -webkit-sticky;
 }
+
+.v-tooltip a.contextual-help {
+  color: white;
+}
+
+.v-tooltip *.contextual-help::after {
+  content: ' ';
+  position: absolute;
+  top: 50%;
+  right: 100%;
+  margin-top: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent black transparent transparent;
+}
 </style>

app/frontend/src/components/infolinks/GeneralLayout.vue

@@ -28,6 +28,7 @@ const properties = defineProps({
 });
 
 const component = ref({});
+const componentKey = ref('');
 const loading = ref(false);
 const publish = ref([]);
 const showEditProactiveHelpDialog = ref(false);
@@ -87,18 +88,18 @@ function isPreviewEnabled(compName) {
   );
 }
 
-function onOpenEditDialog(compName) {
-  setComponent(compName);
+function onOpenEditDialog(key, compName) {
+  setComponent(key, compName);
   toggleEditProactiveHelpDialog();
 }
 
-async function onOpenPreviewDialog(compName) {
+async function onOpenPreviewDialog(key, compName) {
   loading.value = true;
   const item = properties.formComponentData.find(
     (item) => item.componentName === compName
   );
   await adminStore.getFCProactiveHelpImageUrl(item.id);
-  setComponent(item.componentName);
+  setComponent(key, item.componentName);
   togglePreviewDialog();
   loading.value = false;
 }
@@ -108,11 +109,26 @@ async function onOpenPreviewDialog(compName) {
  *
  * @param compName The name of the component
  */
-function setComponent(compName) {
+function setComponent(key, compName) {
   if (compName) {
     component.value = properties.formComponentData.find((obj) => {
       return obj.componentName === compName;
     });
+    if (!component.value) {
+      // Proactive help doesn't exist for this component
+      component.value = {
+        key: key,
+        componentName: compName,
+        externalLink: '',
+        image: null,
+        imageName: '',
+        groupName: properties.groupName,
+        isLinkEnabled: false,
+        description: '',
+        status: false,
+      };
+    }
+    componentKey.value = key;
   }
 }
 
@@ -170,7 +186,7 @@ defineExpose({
               size="small"
               variant="text"
               :title="$t('trans.generalLayout.edit')"
-              @click="onOpenEditDialog(item.componentName)"
+              @click="onOpenEditDialog(item.key, item.componentName)"
             >
               <v-icon icon="mdi:mdi-pencil-box-outline"></v-icon>
               <span
@@ -189,7 +205,7 @@ defineExpose({
               size="small"
               :disabled="isPreviewEnabled(item.componentName)"
               :title="$t('trans.generalLayout.preview')"
-              @click="onOpenPreviewDialog(item.componentName)"
+              @click="onOpenPreviewDialog(item.key, item.componentName)"
             >
               <v-icon icon="mdi:mdi-eye"></v-icon>
               <span
@@ -230,6 +246,7 @@ defineExpose({
       v-if="showEditProactiveHelpDialog"
       :show-dialog="showEditProactiveHelpDialog"
       :group-name="groupName"
+      :component-key="component?.key ? component.key : componentKey"
       :component-name="component.componentName"
       :component="component"
       @close-dialog="toggleEditProactiveHelpDialog"

app/frontend/src/components/infolinks/ProactiveHelpDialog.vue

@@ -11,6 +11,7 @@ const { t, locale } = useI18n({ useScope: 'global' });
 const properties = defineProps({
   showDialog: { type: Boolean, required: true },
   component: { type: Object, default: () => {} },
+  componentKey: { type: String, require: true, default: '' },
   componentName: { type: String, require: true, default: '' },
   groupName: { type: String, required: true },
 });
@@ -25,6 +26,11 @@ const { isRTL } = storeToRefs(formStore);
 const componentId = ref(
   properties.component?.id ? properties.component.id : undefined
 );
+const componentKey = ref(
+  properties.component?.componentKey
+    ? properties.component.componentKey
+    : properties.componentKey
+);
 const componentName = ref(
   properties.component?.componentName
     ? properties.component.componentName
@@ -110,6 +116,7 @@ async function submit() {
     moreHelpInfoLink.value = !isLinkEnabled.value ? '' : moreHelpInfoLink.value;
     await adminStore.addFCProactiveHelp({
       componentId: componentId.value,
+      key: componentKey.value,
       componentName: componentName.value,
       image: image.value,
       externalLink: moreHelpInfoLink.value,