Move IssuableTimeTracker vue component

app/assets/javascripts/sidebar/components/time_tracking/sidebar_time_tracking.js

@@ -2,7 +2,7 @@ import _ from 'underscore';
 
 import '~/smart_interval';
 
-import timeTracker from './time_tracker';
+import IssuableTimeTracker from './time_tracker.vue';
 
 import Store from '../../stores/sidebar_store';
 import Mediator from '../../sidebar_mediator';
@@ -16,7 +16,7 @@ export default {
     };
   },
   components: {
-    'issuable-time-tracker': timeTracker,
+    IssuableTimeTracker,
   },
   methods: {
     listenForQuickActions() {

app/assets/javascripts/sidebar/components/time_tracking/time_tracker.js → app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue

+<script>
 import timeTrackingHelpState from './help_state';
 import timeTrackingCollapsedState from './collapsed_state';
 import timeTrackingSpentOnlyPane from './spent_only_pane';
@@ -8,7 +9,15 @@ import timeTrackingComparisonPane from './comparison_pane';
 import eventHub from '../../event_hub';
 
 export default {
-  name: 'issuable-time-tracker',
+  name: 'IssuableTimeTracker',
+  components: {
+    'time-tracking-collapsed-state': timeTrackingCollapsedState,
+    'time-tracking-estimate-only-pane': timeTrackingEstimateOnlyPane,
+    'time-tracking-spent-only-pane': timeTrackingSpentOnlyPane,
+    'time-tracking-no-tracking-pane': timeTrackingNoTrackingPane,
+    'time-tracking-comparison-pane': timeTrackingComparisonPane,
+    'time-tracking-help-state': timeTrackingHelpState,
+  },
   props: {
     time_estimate: {
       type: Number,
@@ -38,14 +47,6 @@ export default {
       showHelp: false,
     };
   },
-  components: {
-    'time-tracking-collapsed-state': timeTrackingCollapsedState,
-    'time-tracking-estimate-only-pane': timeTrackingEstimateOnlyPane,
-    'time-tracking-spent-only-pane': timeTrackingSpentOnlyPane,
-    'time-tracking-no-tracking-pane': timeTrackingNoTrackingPane,
-    'time-tracking-comparison-pane': timeTrackingComparisonPane,
-    'time-tracking-help-state': timeTrackingHelpState,
-  },
   computed: {
     timeSpent() {
       return this.time_spent;
@@ -81,6 +82,9 @@ export default {
       return !!this.showHelp;
     },
   },
+  created() {
+    eventHub.$on('timeTracker:updateData', this.update);
+  },
   methods: {
     toggleHelpState(show) {
       this.showHelp = show;
@@ -92,10 +96,10 @@ export default {
       this.human_time_spent = data.human_time_spent;
     },
   },
-  created() {
-    eventHub.$on('timeTracker:updateData', this.update);
-  },
-  template: `
+};
+</script>
+
+<template>
   <div
     class="time_tracker time-tracking-component-wrap"
     v-cloak
@@ -119,7 +123,8 @@ export default {
         <i
           class="fa fa-question-circle"
           aria-hidden="true"
-            />
+        >
+        </i>
       </div>
       <div
         class="close-help-button pull-right"
@@ -129,7 +134,8 @@ export default {
         <i
           class="fa fa-close"
           aria-hidden="true"
-          />
+        >
+        </i>
       </div>
     </div>
     <div class="time-tracking-content hide-collapsed">
@@ -154,10 +160,9 @@ export default {
       <transition name="help-state-toggle">
         <time-tracking-help-state
           v-if="showHelpState"
-            :rootPath="rootPath"
+          :root-path="rootPath"
         />
       </transition>
     </div>
   </div>
-  `,
-};
+</template>

changelogs/unreleased/refactor-move-issuable-time-tracker-vue-component.yml

+---
+title: Move IssuableTimeTracker vue component
+merge_request: 16948
+author: George Tsiolis
+type: performance

spec/javascripts/issuable_time_tracker_spec.js

@@ -2,7 +2,7 @@
 
 import Vue from 'vue';
 
-import timeTracker from '~/sidebar/components/time_tracking/time_tracker';
+import timeTracker from '~/sidebar/components/time_tracking/time_tracker.vue';
 
 function initTimeTrackingComponent(opts) {
   setFixtures(`