4 files changed, 34 insertions, 28 deletions
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/no_tracking_pane.js b/app/assets/javascripts/sidebar/components/time_tracking/no_tracking_pane.js
deleted file mode 100644
index 38da76c6771..00000000000
--- a/app/assets/javascripts/sidebar/components/time_tracking/no_tracking_pane.js
+++ /dev/null
@@ -1,10 +0,0 @@
-export default {
-  name: 'time-tracking-no-tracking-pane',
-  template: `
-    <div class="time-tracking-no-tracking-pane">
-      <span class="no-value">
-        {{ __('No estimate or time spent') }}
-      </span>
-    </div>
-  `,
-};
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/no_tracking_pane.vue b/app/assets/javascripts/sidebar/components/time_tracking/no_tracking_pane.vue
new file mode 100644
index 00000000000..9228184df5b
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/time_tracking/no_tracking_pane.vue
@@ -0,0 +1,13 @@
+<script>
+export default {
+  name: 'TimeTrackingNoTrackingPane',
+};
+</script>
+
+<template>
+  <div class="time-tracking-no-tracking-pane">
+    <span class="no-value">
+      {{ __('No estimate or time spent') }}
+    </span>
+  </div>
+</template>
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/sidebar_time_tracking.js b/app/assets/javascripts/sidebar/components/time_tracking/sidebar_time_tracking.vue
index 5626cccc022..2e1d6e9643a 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/sidebar_time_tracking.js
+++ b/app/assets/javascripts/sidebar/components/time_tracking/sidebar_time_tracking.vue
@@ -1,3 +1,4 @@
+<script>
 import $ from 'jquery';
 import _ from 'underscore';
 
@@ -10,14 +11,17 @@ import Mediator from '../../sidebar_mediator';
 import eventHub from '../../event_hub';
 
 export default {
+  components: {
+    IssuableTimeTracker,
+  },
   data() {
     return {
       mediator: new Mediator(),
       store: new Store(),
     };
   },
-  components: {
-    IssuableTimeTracker,
+  mounted() {
+    this.listenForQuickActions();
   },
   methods: {
     listenForQuickActions() {
@@ -41,18 +45,17 @@ export default {
       }
     },
   },
-  mounted() {
-    this.listenForQuickActions();
-  },
-  template: `
-    <div class="block">
-      <issuable-time-tracker
-        :time_estimate="store.timeEstimate"
-        :time_spent="store.totalTimeSpent"
-        :human_time_estimate="store.humanTimeEstimate"
-        :human_time_spent="store.humanTotalTimeSpent"
-        :rootPath="store.rootPath"
-      />
-    </div>
-  `,
 };
+</script>
+
+<template>
+  <div class="block">
+    <issuable-time-tracker
+      :time_estimate="store.timeEstimate"
+      :time_spent="store.totalTimeSpent"
+      :human_time_estimate="store.humanTimeEstimate"
+      :human_time_spent="store.humanTotalTimeSpent"
+      :root-path="store.rootPath"
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
index 71dca498b3d..9c003aa9f8a 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
@@ -2,7 +2,7 @@
 import TimeTrackingHelpState from './help_state.vue';
 import TimeTrackingCollapsedState from './collapsed_state.vue';
 import timeTrackingSpentOnlyPane from './spent_only_pane';
-import timeTrackingNoTrackingPane from './no_tracking_pane';
+import TimeTrackingNoTrackingPane from './no_tracking_pane.vue';
 import TimeTrackingEstimateOnlyPane from './estimate_only_pane.vue';
 import TimeTrackingComparisonPane from './comparison_pane.vue';
 
@@ -14,7 +14,7 @@ export default {
     TimeTrackingCollapsedState,
     TimeTrackingEstimateOnlyPane,
     'time-tracking-spent-only-pane': timeTrackingSpentOnlyPane,
-    'time-tracking-no-tracking-pane': timeTrackingNoTrackingPane,
+    TimeTrackingNoTrackingPane,
     TimeTrackingComparisonPane,
     TimeTrackingHelpState,
   },