[Vue] make sure transcluded content is processed before query selecto…

…rs in EnrichedHeadline (#18242)

* make sure transcluded content is processed before query selectors in EnrichedHeadline

* do not add map files in buildvue workflow

* built vue files

Co-authored-by: sgiehl <stefan@matomo.org>

.github/workflows/buildvue.yml

@@ -131,7 +131,7 @@ jobs:
           if [[ $( git diff --numstat plugins/*/vue/dist/*.js plugins/*/vue/dist/*.map ) ]]
           then
             cd $GITHUB_WORKSPACE
-            git add plugins/*/vue/dist/*.js plugins/*/vue/dist/*.map
+            git add plugins/*/vue/dist/*.js
             git commit -m "built vue files"
             git push
           fi

plugins/CoreHome/vue/src/EnrichedHeadline/EnrichedHeadline.vue

@@ -161,41 +161,44 @@ export default defineComponent({
   mounted() {
     const { root } = this.$refs;
 
-    if (!this.actualInlineHelp) {
-      let helpNode = root.querySelector('.title .inlineHelp');
-      if (!helpNode && root.parentElement.nextElementSibling) {
-        // hack for reports :(
-        helpNode = (root.parentElement.nextElementSibling as HTMLElement)
-          .querySelector('.reportDocumentation');
-      }
+    // timeout used since angularjs does not fill out the transclude at this point
+    setTimeout(() => {
+      if (!this.actualInlineHelp) {
+        let helpNode = root.querySelector('.title .inlineHelp');
+        if (!helpNode && root.parentElement.nextElementSibling) {
+          // hack for reports :(
+          helpNode = (root.parentElement.nextElementSibling as HTMLElement)
+            .querySelector('.reportDocumentation');
+        }
 
-      if (helpNode) {
-        // hackish solution to get binded html of p tag within the help node
-        // at this point the ng-bind-html is not yet converted into html when report is not
-        // initially loaded. Using $compile doesn't work. So get and set it manually
-        const helpDocs = helpNode.getAttribute('data-content').trim();
-        if (helpDocs.length) {
-          this.actualInlineHelp = `<p>${helpDocs}</p>`;
-          setTimeout(() => helpNode.remove(), 0);
+        if (helpNode) {
+          // hackish solution to get binded html of p tag within the help node
+          // at this point the ng-bind-html is not yet converted into html when report is not
+          // initially loaded. Using $compile doesn't work. So get and set it manually
+          const helpDocs = helpNode.getAttribute('data-content').trim();
+          if (helpDocs.length) {
+            this.actualInlineHelp = `<p>${helpDocs}</p>`;
+            setTimeout(() => helpNode.remove(), 0);
+          }
         }
       }
-    }
 
-    if (!this.actualFeatureName) {
-      this.actualFeatureName = root.querySelector('.title').textContent;
-    }
+      if (!this.actualFeatureName) {
+        this.actualFeatureName = root.querySelector('.title').textContent;
+      }
 
-    if (this.reportGenerated
-      && Periods.parse(Matomo.period, Matomo.currentDateString).containsToday()
-    ) {
-      window.$(root.querySelector('.report-generated')).tooltip({
-        track: true,
-        content: this.reportGenerated,
-        items: 'div',
-        show: false,
-        hide: false,
-      });
-    }
+      if (this.reportGenerated
+        && Periods.parse(Matomo.period, Matomo.currentDateString).containsToday()
+      ) {
+        window.$(root.querySelector('.report-generated')).tooltip({
+          track: true,
+          content: this.reportGenerated,
+          items: 'div',
+          show: false,
+          hide: false,
+        });
+      }
+    });
   },
 });
 </script>