From 751302a16e2adc85fe0647f51df5fad24e1f12b0 Mon Sep 17 00:00:00 2001
From: George Tsiolis <tsiolis.g@gmail.com>
Date: Wed, 2 May 2018 01:44:48 +0300
Subject: Move SidebarTimeTracking vue component

---
 .../time_tracking/sidebar_time_tracking.js         | 58 --------------------
 .../time_tracking/sidebar_time_tracking.vue        | 61 ++++++++++++++++++++++
 app/assets/javascripts/sidebar/mount_sidebar.js    |  2 +-
 ...or-move-sidebar-time-tracking-vue-component.yml |  5 ++
 4 files changed, 67 insertions(+), 59 deletions(-)
 delete mode 100644 app/assets/javascripts/sidebar/components/time_tracking/sidebar_time_tracking.js
 create mode 100644 app/assets/javascripts/sidebar/components/time_tracking/sidebar_time_tracking.vue
 create mode 100644 changelogs/unreleased/refactor-move-sidebar-time-tracking-vue-component.yml

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.js
deleted file mode 100644
index 5626cccc022..00000000000
--- a/app/assets/javascripts/sidebar/components/time_tracking/sidebar_time_tracking.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import $ from 'jquery';
-import _ from 'underscore';
-
-import '~/smart_interval';
-
-import IssuableTimeTracker from './time_tracker.vue';
-
-import Store from '../../stores/sidebar_store';
-import Mediator from '../../sidebar_mediator';
-import eventHub from '../../event_hub';
-
-export default {
-  data() {
-    return {
-      mediator: new Mediator(),
-      store: new Store(),
-    };
-  },
-  components: {
-    IssuableTimeTracker,
-  },
-  methods: {
-    listenForQuickActions() {
-      $(document).on('ajax:success', '.gfm-form', this.quickActionListened);
-      eventHub.$on('timeTrackingUpdated', (data) => {
-        this.quickActionListened(null, data);
-      });
-    },
-    quickActionListened(e, data) {
-      const subscribedCommands = ['spend_time', 'time_estimate'];
-      let changedCommands;
-      if (data !== undefined) {
-        changedCommands = data.commands_changes
-          ? Object.keys(data.commands_changes)
-          : [];
-      } else {
-        changedCommands = [];
-      }
-      if (changedCommands && _.intersection(subscribedCommands, changedCommands).length) {
-        this.mediator.fetch();
-      }
-    },
-  },
-  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>
-  `,
-};
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/sidebar_time_tracking.vue b/app/assets/javascripts/sidebar/components/time_tracking/sidebar_time_tracking.vue
new file mode 100644
index 00000000000..2e1d6e9643a
--- /dev/null
+++ b/app/assets/javascripts/sidebar/components/time_tracking/sidebar_time_tracking.vue
@@ -0,0 +1,61 @@
+<script>
+import $ from 'jquery';
+import _ from 'underscore';
+
+import '~/smart_interval';
+
+import IssuableTimeTracker from './time_tracker.vue';
+
+import Store from '../../stores/sidebar_store';
+import Mediator from '../../sidebar_mediator';
+import eventHub from '../../event_hub';
+
+export default {
+  components: {
+    IssuableTimeTracker,
+  },
+  data() {
+    return {
+      mediator: new Mediator(),
+      store: new Store(),
+    };
+  },
+  mounted() {
+    this.listenForQuickActions();
+  },
+  methods: {
+    listenForQuickActions() {
+      $(document).on('ajax:success', '.gfm-form', this.quickActionListened);
+      eventHub.$on('timeTrackingUpdated', (data) => {
+        this.quickActionListened(null, data);
+      });
+    },
+    quickActionListened(e, data) {
+      const subscribedCommands = ['spend_time', 'time_estimate'];
+      let changedCommands;
+      if (data !== undefined) {
+        changedCommands = data.commands_changes
+          ? Object.keys(data.commands_changes)
+          : [];
+      } else {
+        changedCommands = [];
+      }
+      if (changedCommands && _.intersection(subscribedCommands, changedCommands).length) {
+        this.mediator.fetch();
+      }
+    },
+  },
+};
+</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/mount_sidebar.js b/app/assets/javascripts/sidebar/mount_sidebar.js
index 26eb4cffba3..3086e7d0fc9 100644
--- a/app/assets/javascripts/sidebar/mount_sidebar.js
+++ b/app/assets/javascripts/sidebar/mount_sidebar.js
@@ -1,6 +1,6 @@
 import $ from 'jquery';
 import Vue from 'vue';
-import SidebarTimeTracking from './components/time_tracking/sidebar_time_tracking';
+import SidebarTimeTracking from './components/time_tracking/sidebar_time_tracking.vue';
 import SidebarAssignees from './components/assignees/sidebar_assignees.vue';
 import ConfidentialIssueSidebar from './components/confidential/confidential_issue_sidebar.vue';
 import SidebarMoveIssue from './lib/sidebar_move_issue';
diff --git a/changelogs/unreleased/refactor-move-sidebar-time-tracking-vue-component.yml b/changelogs/unreleased/refactor-move-sidebar-time-tracking-vue-component.yml
new file mode 100644
index 00000000000..4f578bfcf26
--- /dev/null
+++ b/changelogs/unreleased/refactor-move-sidebar-time-tracking-vue-component.yml
@@ -0,0 +1,5 @@
+---
+title: Move SidebarTimeTracking vue component
+merge_request: 18677
+author: George Tsiolis
+type: performance
-- 
cgit v1.2.3