Move TimeTrackingCollapsedState vue component

4 files changed, 109 insertions, 98 deletions

diff --git a/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.js b/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.js
deleted file mode 100644
index a9fbc7f1a2f..00000000000
--- a/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import stopwatchSvg from 'icons/_icon_stopwatch.svg';
-import { abbreviateTime } from '../../../lib/utils/pretty_time';
-
-export default {
-  name: 'time-tracking-collapsed-state',
-  props: {
-    showComparisonState: {
-      type: Boolean,
-      required: true,
-    },
-    showSpentOnlyState: {
-      type: Boolean,
-      required: true,
-    },
-    showEstimateOnlyState: {
-      type: Boolean,
-      required: true,
-    },
-    showNoTimeTrackingState: {
-      type: Boolean,
-      required: true,
-    },
-    timeSpentHumanReadable: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    timeEstimateHumanReadable: {
-      type: String,
-      required: false,
-      default: '',
-    },
-  },
-  computed: {
-    timeSpent() {
-      return this.abbreviateTime(this.timeSpentHumanReadable);
-    },
-    timeEstimate() {
-      return this.abbreviateTime(this.timeEstimateHumanReadable);
-    },
-    divClass() {
-      if (this.showComparisonState) {
-        return 'compare';
-      } else if (this.showEstimateOnlyState) {
-        return 'estimate-only';
-      } else if (this.showSpentOnlyState) {
-        return 'spend-only';
-      } else if (this.showNoTimeTrackingState) {
-        return 'no-tracking';
-      }
-
-      return '';
-    },
-    spanClass() {
-      if (this.showComparisonState) {
-        return '';
-      } else if (this.showEstimateOnlyState || this.showSpentOnlyState) {
-        return 'bold';
-      } else if (this.showNoTimeTrackingState) {
-        return 'no-value';
-      }
-
-      return '';
-    },
-    text() {
-      if (this.showComparisonState) {
-        return `${this.timeSpent} / ${this.timeEstimate}`;
-      } else if (this.showEstimateOnlyState) {
-        return `-- / ${this.timeEstimate}`;
-      } else if (this.showSpentOnlyState) {
-        return `${this.timeSpent} / --`;
-      } else if (this.showNoTimeTrackingState) {
-        return 'None';
-      }
-
-      return '';
-    },
-  },
-  methods: {
-    abbreviateTime(timeStr) {
-      return abbreviateTime(timeStr);
-    },
-  },
-  template: `
-    <div class="sidebar-collapsed-icon">
-      ${stopwatchSvg}
-      <div class="time-tracking-collapsed-summary">
-        <div :class="divClass">
-          <span :class="spanClass">
-            {{ text }}
-          </span>
-        </div>
-      </div>
-    </div>
-    `,
-};
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue b/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue
new file mode 100644
index 00000000000..3b86f1145d1
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/time_tracking/collapsed_state.vue
@@ -0,0 +1,102 @@
+<script>
+  import icon from '../../../vue_shared/components/icon.vue';
+  import { abbreviateTime } from '../../../lib/utils/pretty_time';
+
+  export default {
+    name: 'TimeTrackingCollapsedState',
+    components: {
+      icon,
+    },
+    props: {
+      showComparisonState: {
+        type: Boolean,
+        required: true,
+      },
+      showSpentOnlyState: {
+        type: Boolean,
+        required: true,
+      },
+      showEstimateOnlyState: {
+        type: Boolean,
+        required: true,
+      },
+      showNoTimeTrackingState: {
+        type: Boolean,
+        required: true,
+      },
+      timeSpentHumanReadable: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      timeEstimateHumanReadable: {
+        type: String,
+        required: false,
+        default: '',
+      },
+    },
+    computed: {
+      timeSpent() {
+        return this.abbreviateTime(this.timeSpentHumanReadable);
+      },
+      timeEstimate() {
+        return this.abbreviateTime(this.timeEstimateHumanReadable);
+      },
+      divClass() {
+        if (this.showComparisonState) {
+          return 'compare';
+        } else if (this.showEstimateOnlyState) {
+          return 'estimate-only';
+        } else if (this.showSpentOnlyState) {
+          return 'spend-only';
+        } else if (this.showNoTimeTrackingState) {
+          return 'no-tracking';
+        }
+
+        return '';
+      },
+      spanClass() {
+        if (this.showComparisonState) {
+          return '';
+        } else if (this.showEstimateOnlyState || this.showSpentOnlyState) {
+          return 'bold';
+        } else if (this.showNoTimeTrackingState) {
+          return 'no-value';
+        }
+
+        return '';
+      },
+      text() {
+        if (this.showComparisonState) {
+          return `${this.timeSpent} / ${this.timeEstimate}`;
+        } else if (this.showEstimateOnlyState) {
+          return `-- / ${this.timeEstimate}`;
+        } else if (this.showSpentOnlyState) {
+          return `${this.timeSpent} / --`;
+        } else if (this.showNoTimeTrackingState) {
+          return 'None';
+        }
+
+        return '';
+      },
+    },
+    methods: {
+      abbreviateTime(timeStr) {
+        return abbreviateTime(timeStr);
+      },
+    },
+  };
+</script>
+
+<template>
+  <div class="sidebar-collapsed-icon">
+    <icon name="timer" />
+    <div class="time-tracking-collapsed-summary">
+      <div :class="divClass">
+        <span :class="spanClass">
+          {{ text }}
+        </span>
+      </div>
+    </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 230736a56b8..28240468d2c 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
@@ -1,6 +1,6 @@
 <script>
 import timeTrackingHelpState from './help_state';
-import timeTrackingCollapsedState from './collapsed_state';
+import TimeTrackingCollapsedState from './collapsed_state.vue';
 import timeTrackingSpentOnlyPane from './spent_only_pane';
 import timeTrackingNoTrackingPane from './no_tracking_pane';
 import timeTrackingEstimateOnlyPane from './estimate_only_pane';
@@ -11,7 +11,7 @@ import eventHub from '../../event_hub';
 export default {
   name: 'IssuableTimeTracker',
   components: {
-    'time-tracking-collapsed-state': timeTrackingCollapsedState,
+    TimeTrackingCollapsedState,
     'time-tracking-estimate-only-pane': timeTrackingEstimateOnlyPane,
     'time-tracking-spent-only-pane': timeTrackingSpentOnlyPane,
     'time-tracking-no-tracking-pane': timeTrackingNoTrackingPane,
diff --git a/changelogs/unreleased/refactor-move-time-tracking-vue-components.yml b/changelogs/unreleased/refactor-move-time-tracking-vue-components.yml
new file mode 100644
index 00000000000..8151655250a
--- /dev/null
+++ b/changelogs/unreleased/refactor-move-time-tracking-vue-components.yml
@@ -0,0 +1,5 @@
+---
+title: Move TimeTrackingCollapsedState vue component
+merge_request: 17399
+author: George Tsiolis
+type: performance