Move TimeTrackingComparisonPane vue component

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

+<script>
 import { parseSeconds, stringifyTime } from '../../../lib/utils/pretty_time';
 
 export default {
-  name: 'time-tracking-comparison-pane',
+  name: 'TimeTrackingComparisonPane',
   props: {
     timeSpent: {
       type: Number,
@@ -43,7 +44,10 @@ export default {
       return this.timeEstimate >= this.timeSpent ? 'within_estimate' : 'over_estimate';
     },
   },
-  template: `
+};
+</script>
+
+<template>
   <div class="time-tracking-comparison-pane">
     <div
       class="compare-meter"
@@ -63,7 +67,8 @@ export default {
         <div
           :style="{ width: timeRemainingPercent }"
           class="meter-fill"
-          />
+        >
+        </div>
       </div>
       <div class="compare-display-container">
         <div class="compare-display pull-left">
@@ -85,5 +90,4 @@ export default {
       </div>
     </div>
   </div>
-  `,
-};
+</template>

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

@@ -4,7 +4,7 @@ import TimeTrackingCollapsedState from './collapsed_state.vue';
 import timeTrackingSpentOnlyPane from './spent_only_pane';
 import timeTrackingNoTrackingPane from './no_tracking_pane';
 import timeTrackingEstimateOnlyPane from './estimate_only_pane';
-import timeTrackingComparisonPane from './comparison_pane';
+import TimeTrackingComparisonPane from './comparison_pane.vue';
 
 import eventHub from '../../event_hub';
 
@@ -15,7 +15,7 @@ export default {
     'time-tracking-estimate-only-pane': timeTrackingEstimateOnlyPane,
     'time-tracking-spent-only-pane': timeTrackingSpentOnlyPane,
     'time-tracking-no-tracking-pane': timeTrackingNoTrackingPane,
-    'time-tracking-comparison-pane': timeTrackingComparisonPane,
+    TimeTrackingComparisonPane,
     'time-tracking-help-state': timeTrackingHelpState,
   },
   props: {

changelogs/unreleased/refactor-move-time-tracking-comparison-pane-vue-component.yml

+---
+title: Move TimeTrackingComparisonPane vue component
+merge_request: 17931
+author: George Tsiolis
+type: performance