Register timetracking components locally.

app/assets/javascripts/issuable/time_tracking/components/collapsed_state.js.es6

 //= require lib/utils/pretty_time
 
-((gl) => {
+((app) => {
   const PrettyTime = gl.PrettyTime;
 
-  Vue.component('time-tracking-collapsed-state', {
+  app.collapsedState = {
     name: 'time-tracking-collapsed-state',
     props: ['showComparisonState', 'showSpentOnlyState', 'showEstimateOnlyState', 'showNoTimeTrackingState', 'timeSpentHuman', 'timeEstimateHuman', 'stopwatchSvg'],
     methods: {
@@ -30,6 +30,6 @@
         </div>
       </div>
       `,
-  });
-})(window.gl || (window.gl = {}));
+  };
+})(gl.IssuableTimeTrackingApp || (gl.IssuableTimeTrackingApp = {}));
 

app/assets/javascripts/issuable/time_tracking/components/comparison_pane.js.es6

 //= require lib/utils/pretty_time
 
-((gl) => {
+((app) => {
   const PrettyTime = gl.PrettyTime;
 
-  Vue.component('time-tracking-comparison-pane', {
+  app.comparisonPane = {
     name: 'time-tracking-comparison-pane',
     props: ['timeSpent', 'timeEstimate', 'timeSpentHuman', 'timeEstimateHuman'],
     computed: {
@@ -60,5 +60,5 @@
         </div>
       </div>
     `,
-  });
-})(window.gl || (window.gl = {}));
+  };
+})(gl.IssuableTimeTrackingApp || (gl.IssuableTimeTrackingApp = {}));

app/assets/javascripts/issuable/time_tracking/components/estimate_only_pane.js.es6

-((gl) => {
-  Vue.component('time-tracking-estimate-only-pane', {
+((app) => {
+  app.estimateOnlyPane = {
     name: 'time-tracking-estimate-only-pane',
     props: ['timeEstimateHuman'],
     template: `
@@ -8,5 +8,5 @@
         {{ timeEstimateHuman }}
       </div>
     `,
-  });
-})(window.gl || (window.gl = {}));
+  };
+})(gl.IssuableTimeTrackingApp || (gl.IssuableTimeTrackingApp = {}));

app/assets/javascripts/issuable/time_tracking/components/help_state.js.es6

-(() => {
-  Vue.component('time-tracking-help-state', {
+((app) => {
+  app.helpState = {
     name: 'time-tracking-help-state',
     data() {
       return {
@@ -23,5 +23,5 @@
         </div>
       </div>
     `,
-  });
-})();
+  };
+})(gl.IssuableTimeTrackingApp || (gl.IssuableTimeTrackingApp = {}));

app/assets/javascripts/issuable/time_tracking/components/no_tracking_pane.js.es6

-((gl) => {
-  Vue.component('time-tracking-no-tracking-pane', {
+((app) => {
+  app.noTrackingPane = {
     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>
     `,
-  });
-})(window.gl || (window.gl = {}));
+  };
+})(gl.IssuableTimeTrackingApp || (gl.IssuableTimeTrackingApp = {}));

app/assets/javascripts/issuable/time_tracking/components/spent_only_pane.js.es6

-((gl) => {
-  Vue.component('time-tracking-spent-only-pane', {
+((app) => {
+  app.spentOnlyPane = {
     name: 'time-tracking-spent-only-pane',
     props: ['timeSpentHuman'],
     template: `
@@ -8,5 +8,5 @@
         {{ timeSpentHuman }}
       </div>
     `,
-  });
-})(window.gl || (window.gl = {}));
+  };
+})(gl.IssuableTimeTrackingApp || (gl.IssuableTimeTrackingApp = {}));

app/assets/javascripts/issuable/time_tracking/components/time_tracker.js.es6

-(() => {
+((app) => {
   gl.IssuableTimeTracker = Vue.component('issuable-time-tracker', {
     name: 'issuable-time-tracker',
     props: ['time_estimate', 'time_spent', 'human_time_estimate', 'human_time_spent', 'stopwatchSvg'],
@@ -7,6 +7,14 @@
         showHelp: false,
       };
     },
+    components: {
+      'time-tracking-spent-only-pane': app.spentOnlyPane,
+      'time-tracking-estimate-only-pane': app.estimateOnlyPane,
+      'time-tracking-comparison-pane': app.comparisonPane,
+      'time-tracking-no-tracking-pane': app.noTrackingPane,
+      'time-tracking-help-state': app.helpState,
+      'time-tracking-collapsed-state': app.collapsedState,
+    },
     computed: {
       timeSpent() {
         return this.time_spent;
@@ -99,4 +107,4 @@
       </div>
     `,
   });
-})();
+})(gl.IssuableTimeTrackingApp || (gl.IssuableTimeTrackingApp = {}));