Move TimeTrackingComparisonPane vue component

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

@@ -1,7 +1,8 @@
+<script>
 import { parseSeconds, stringifyTime } from '../../../lib/utils/pretty_time';
 
 export default {
-  name: 'time-tracking-comparison-pane',
+  name: 'TimeTrackingComparisonPane',
   props: {
     timeSpent: {
       type: Number,
@@ -43,47 +44,50 @@ export default {
       return this.timeEstimate >= this.timeSpent ? 'within_estimate' : 'over_estimate';
     },
   },
-  template: `
-    <div class="time-tracking-comparison-pane">
+};
+</script>
+
+<template>
+  <div class="time-tracking-comparison-pane">
+    <div
+      class="compare-meter"
+      data-toggle="tooltip"
+      data-placement="top"
+      role="timeRemainingDisplay"
+      :aria-valuenow="timeRemainingTooltip"
+      :title="timeRemainingTooltip"
+      :data-original-title="timeRemainingTooltip"
+      :class="timeRemainingStatusClass"
+    >
       <div
-        class="compare-meter"
-        data-toggle="tooltip"
-        data-placement="top"
-        role="timeRemainingDisplay"
-        :aria-valuenow="timeRemainingTooltip"
-        :title="timeRemainingTooltip"
-        :data-original-title="timeRemainingTooltip"
-        :class="timeRemainingStatusClass"
+        class="meter-container"
+        role="timeSpentPercent"
+        :aria-valuenow="timeRemainingPercent"
       >
         <div
-          class="meter-container"
-          role="timeSpentPercent"
-          :aria-valuenow="timeRemainingPercent"
+          :style="{ width: timeRemainingPercent }"
+          class="meter-fill"
         >
-          <div
-            :style="{ width: timeRemainingPercent }"
-            class="meter-fill"
-          />
         </div>
-        <div class="compare-display-container">
-          <div class="compare-display pull-left">
-            <span class="compare-label">
+      </div>
+      <div class="compare-display-container">
+        <div class="compare-display pull-left">
+          <span class="compare-label">
             {{ s__('TimeTracking|Spent') }}
-            </span>
-            <span class="compare-value spent">
-              {{ timeSpentHumanReadable }}
-            </span>
-          </div>
-          <div class="compare-display estimated pull-right">
-            <span class="compare-label">
-              {{ s__('TimeTrackingEstimated|Est') }}
-            </span>
-            <span class="compare-value">
-              {{ timeEstimateHumanReadable }}
-            </span>
-          </div>
+          </span>
+          <span class="compare-value spent">
+            {{ timeSpentHumanReadable }}
+          </span>
+        </div>
+        <div class="compare-display estimated pull-right">
+          <span class="compare-label">
+            {{ s__('TimeTrackingEstimated|Est') }}
+          </span>
+          <span class="compare-value">
+            {{ timeEstimateHumanReadable }}
+          </span>
         </div>
       </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

@@ -0,0 +1,5 @@
+---
+title: Move TimeTrackingComparisonPane vue component
+merge_request: 17931
+author: George Tsiolis
+type: performance