Wrap components with a single element for Vue 2 compatibility

app/assets/javascripts/cycle_analytics/components/item_commit_component.js.es6

@@ -18,32 +18,34 @@
       commit: Object,
     },
     template: `
-      <div class="item-details item-conmmit-component">
-        <h5 class="item-title">
-          <a href="commit.url">{{ commit.title }}</a>
-        </h5>
-        <span>
-          First
-          <span class="commit-icon">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 40 40">
-              <path fill="#8F8F8F" fill-rule="evenodd" d="M28.7769836,18 C27.8675252,13.9920226 24.2831748,11 20,11 C15.7168252,11 12.1324748,13.9920226 11.2230164,18 L4.0085302,18 C2.90195036,18 2,18.8954305 2,20 C2,21.1122704 2.8992496,22 4.0085302,22 L11.2230164,22 C12.1324748,26.0079774 15.7168252,29 20,29 C24.2831748,29 27.8675252,26.0079774 28.7769836,22 L35.9914698,22 C37.0980496,22 38,21.1045695 38,20 C38,18.8877296 37.1007504,18 35.9914698,18 L28.7769836,18 L28.7769836,18 Z M20,25 C22.7614237,25 25,22.7614237 25,20 C25,17.2385763 22.7614237,15 20,15 C17.2385763,15 15,17.2385763 15,20 C15,22.7614237 17.2385763,25 20,25 L20,25 Z"/>
-            </svg>
+      <div>
+        <div class="item-details item-conmmit-component">
+          <h5 class="item-title">
+            <a href="commit.url">{{ commit.title }}</a>
+          </h5>
+          <span>
+            First
+            <span class="commit-icon">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 40 40">
+                <path fill="#8F8F8F" fill-rule="evenodd" d="M28.7769836,18 C27.8675252,13.9920226 24.2831748,11 20,11 C15.7168252,11 12.1324748,13.9920226 11.2230164,18 L4.0085302,18 C2.90195036,18 2,18.8954305 2,20 C2,21.1122704 2.8992496,22 4.0085302,22 L11.2230164,22 C12.1324748,26.0079774 15.7168252,29 20,29 C24.2831748,29 27.8675252,26.0079774 28.7769836,22 L35.9914698,22 C37.0980496,22 38,21.1045695 38,20 C38,18.8877296 37.1007504,18 35.9914698,18 L28.7769836,18 L28.7769836,18 Z M20,25 C22.7614237,25 25,22.7614237 25,20 C25,17.2385763 22.7614237,15 20,15 C17.2385763,15 15,17.2385763 15,20 C15,22.7614237 17.2385763,25 20,25 L20,25 Z"/>
+              </svg>
+            </span>
+            <a href="#" class="commit-hash-link monospace">{{ commit.hash }}</a>
+            pushed by
+            <a href="commit.profile" class="commit-author-link">{{ commit.author }}</a>
           </span>
-          <a href="#" class="commit-hash-link monospace">{{ commit.hash }}</a>
-          pushed by
-          <a href="commit.profile" class="commit-author-link">{{ commit.author }}</a>
-        </span>
-      </div>
-      <div class="item-time">
-        <span class="hours" v-if="commit.totalTime.hours">
-          {{ commit.totalTime.hours }}
-          <abbr title="Hours">hr</abbr>
-        </span>
-        <span class="minutes" v-if="commit.totalTime.minutes">
-          {{ commit.totalTime.minutes }}
-          <abbr title="Minutes">mins</abbr>
-        </span>
-      </div>
+        </div>
+        <div class="item-time">
+          <span class="hours" v-if="commit.totalTime.hours">
+            {{ commit.totalTime.hours }}
+            <abbr title="Hours">hr</abbr>
+          </span>
+          <span class="minutes" v-if="commit.totalTime.minutes">
+            {{ commit.totalTime.minutes }}
+            <abbr title="Minutes">mins</abbr>
+          </span>
+        </div>
+      <div>
     `,
   });
 }(window.gl || (window.gl = {})));

app/assets/javascripts/cycle_analytics/components/item_issue_component.js.es6

@@ -20,38 +20,40 @@
       issue: Object,
     },
     template: `
-      <div class="item-details">
-        <img class="avatar" src="https://secure.gravatar.com/avatar/3731e7dd4f2b4fa8ae184c0a7519dd58?s=64&amp;d=identicon">
-        <h5 class="item-title">
-          <a href="issue.url">
-            {{ issue.title }}
+      <div>
+        <div class="item-details">
+          <img class="avatar" src="https://secure.gravatar.com/avatar/3731e7dd4f2b4fa8ae184c0a7519dd58?s=64&amp;d=identicon">
+          <h5 class="item-title">
+            <a href="issue.url">
+              {{ issue.title }}
+            </a>
+          </h5>
+          <a href="issue.url" class="issue-link">
+            #{{issue.id}}
           </a>
-        </h5>
-        <a href="issue.url" class="issue-link">
-          #{{issue.id}}
-        </a>
-        <span>
-          Opened
-          <a href="issue.url" class="issue-date">
-            {{ issue.datetime }}
+          <span>
+            Opened
+            <a href="issue.url" class="issue-date">
+              {{ issue.datetime }}
+            </a>
+          </span>
+          <span>
+          by
+          <a href="issue.profile" class="issue-author-link">
+            {{ issue.author }}
           </a>
-        </span>
-        <span>
-        by
-        <a href="issue.profile" class="issue-author-link">
-          {{ issue.author }}
-        </a>
-        </span>
-      </div>
-      <div class="item-time">
-        <span class="hours" v-if="issue.totalTime.hours">
-          {{ issue.totalTime.hours }}
-          <abbr title="Hours">hr</abbr>
-        </span>
-        <span class="minutes" v-if="issue.totalTime.minutes">
-          {{ issue.totalTime.minutes }}
-          <abbr title="Minutes">mins</abbr>
-        </span>
+          </span>
+        </div>
+        <div class="item-time">
+          <span class="hours" v-if="issue.totalTime.hours">
+            {{ issue.totalTime.hours }}
+            <abbr title="Hours">hr</abbr>
+          </span>
+          <span class="minutes" v-if="issue.totalTime.minutes">
+            {{ issue.totalTime.minutes }}
+            <abbr title="Minutes">mins</abbr>
+          </span>
+        </div>
       </div>
     `,
   });