Move TimeTrackingSpentOnlyPane vue component

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

+<script>
 export default {
-  name: 'time-tracking-spent-only-pane',
+  name: 'TimeTrackingSpentOnlyPane',
   props: {
     timeSpentHumanReadable: {
       type: String,
       required: true,
     },
   },
-  template: `
-    <div class="time-tracking-spend-only-pane">
-      <span class="bold">Spent:</span>
-      {{ timeSpentHumanReadable }}
-    </div>
-  `,
 };
+</script>
+
+<template>
+  <div class="time-tracking-spend-only-pane">
+    <span class="bold">Spent:</span>
+    {{ timeSpentHumanReadable }}
+  </div>
+</template>

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

 <script>
 import TimeTrackingHelpState from './help_state.vue';
 import TimeTrackingCollapsedState from './collapsed_state.vue';
-import timeTrackingSpentOnlyPane from './spent_only_pane';
+import TimeTrackingSpentOnlyPane from './spent_only_pane.vue';
 import TimeTrackingNoTrackingPane from './no_tracking_pane.vue';
 import TimeTrackingEstimateOnlyPane from './estimate_only_pane.vue';
 import TimeTrackingComparisonPane from './comparison_pane.vue';
@@ -13,7 +13,7 @@ export default {
   components: {
     TimeTrackingCollapsedState,
     TimeTrackingEstimateOnlyPane,
-    'time-tracking-spent-only-pane': timeTrackingSpentOnlyPane,
+    TimeTrackingSpentOnlyPane,
     TimeTrackingNoTrackingPane,
     TimeTrackingComparisonPane,
     TimeTrackingHelpState,

changelogs/unreleased/move-time-tracking-spent-only-pane-vue-component.yml

+---
+title: Move TimeTrackingSpentOnlyPane vue component
+merge_request: 18710
+author: George Tsiolis
+type: performance