3 files changed, 33 insertions, 25 deletions
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/help_state.js b/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue
index 19f74ad3c6d..825063d9ba6 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/help_state.js
+++ b/app/assets/javascripts/sidebar/components/time_tracking/help_state.vue
@@ -1,7 +1,8 @@
+<script>
 import { sprintf, s__ } from '../../../locale';
 
 export default {
-  name: 'time-tracking-help-state',
+  name: 'TimeTrackingHelpState',
   props: {
     rootPath: {
       type: String,
@@ -27,26 +28,28 @@ export default {
       );
     },
   },
-  template: `
-    <div class="time-tracking-help-state">
-      <div class="time-tracking-info">
-        <h4>
-          {{ __('Track time with quick actions') }}
-        </h4>
-        <p>
-          {{ __('Quick actions can be used in the issues description and comment boxes.') }}
-        </p>
-        <p v-html="estimateText">
-        </p>
-        <p v-html="spendText">
-        </p>
-        <a
-          class="btn btn-default learn-more-button"
-          :href="href"
-        >
-          {{ __('Learn more') }}
-        </a>
-      </div>
-    </div>
-  `,
 };
+</script>
+
+<template>
+  <div class="time-tracking-help-state">
+    <div class="time-tracking-info">
+      <h4>
+        {{ __('Track time with quick actions') }}
+      </h4>
+      <p>
+        {{ __('Quick actions can be used in the issues description and comment boxes.') }}
+      </p>
+      <p v-html="estimateText">
+      </p>
+      <p v-html="spendText">
+      </p>
+      <a
+        class="btn btn-default learn-more-button"
+        :href="href"
+      >
+        {{ __('Learn more') }}
+      </a>
+    </div>
+  </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 fb280f42a9e..71dca498b3d 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
@@ -1,5 +1,5 @@
 <script>
-import timeTrackingHelpState from './help_state';
+import TimeTrackingHelpState from './help_state.vue';
 import TimeTrackingCollapsedState from './collapsed_state.vue';
 import timeTrackingSpentOnlyPane from './spent_only_pane';
 import timeTrackingNoTrackingPane from './no_tracking_pane';
@@ -16,7 +16,7 @@ export default {
     'time-tracking-spent-only-pane': timeTrackingSpentOnlyPane,
     'time-tracking-no-tracking-pane': timeTrackingNoTrackingPane,
     TimeTrackingComparisonPane,
-    'time-tracking-help-state': timeTrackingHelpState,
+    TimeTrackingHelpState,
   },
   props: {
     time_estimate: {
diff --git a/changelogs/unreleased/move-help-state-vue-component.yml b/changelogs/unreleased/move-help-state-vue-component.yml
new file mode 100644
index 00000000000..6108368cde0
--- /dev/null
+++ b/changelogs/unreleased/move-help-state-vue-component.yml
@@ -0,0 +1,5 @@
+---
+title: Move TimeTrackingHelpState vue component
+merge_request: 18319
+author: George Tsiolis
+type: performance