Backport timetracking frontend to CE.

17 files changed, 470 insertions, 5 deletions

diff --git a/app/assets/javascripts/diff_notes/diff_notes_bundle.js.es6 b/app/assets/javascripts/diff_notes/diff_notes_bundle.js.es6
index 840b5aa922e..1b3a57d0962 100644
--- a/app/assets/javascripts/diff_notes/diff_notes_bundle.js.es6
+++ b/app/assets/javascripts/diff_notes/diff_notes_bundle.js.es6
@@ -2,8 +2,6 @@
 /* global Vue */
 /* global ResolveCount */
 
-//= require vue
-//= require vue-resource
 //= require_directory ./models
 //= require_directory ./stores
 //= require_directory ./services
diff --git a/app/assets/javascripts/issuable/issuable_bundle.js.es6 b/app/assets/javascripts/issuable/issuable_bundle.js.es6
new file mode 100644
index 00000000000..7d0465aa8b4
--- /dev/null
+++ b/app/assets/javascripts/issuable/issuable_bundle.js.es6
@@ -0,0 +1 @@
+//= require ./time_tracking/time_tracking_bundle
diff --git a/app/assets/javascripts/issuable/time_tracking/components/collapsed_state.js.es6 b/app/assets/javascripts/issuable/time_tracking/components/collapsed_state.js.es6
new file mode 100644
index 00000000000..72433df2818
--- /dev/null
+++ b/app/assets/javascripts/issuable/time_tracking/components/collapsed_state.js.es6
@@ -0,0 +1,42 @@
+/* global Vue */
+//= require lib/utils/pretty_time
+
+(() => {
+  Vue.component('time-tracking-collapsed-state', {
+    name: 'time-tracking-collapsed-state',
+    props: [
+      'showComparisonState',
+      'showSpentOnlyState',
+      'showEstimateOnlyState',
+      'showNoTimeTrackingState',
+      'timeSpentHumanReadable',
+      'timeEstimateHumanReadable',
+      'stopwatchSvg',
+    ],
+    methods: {
+      abbreviateTime(timeStr) {
+        return gl.utils.prettyTime.abbreviateTime(timeStr);
+      },
+    },
+    template: `
+      <div class='sidebar-collapsed-icon'>
+        <div v-html='stopwatchSvg'></div>
+        <div class='time-tracking-collapsed-summary'>
+          <div class='compare' v-if='showComparisonState'>
+            <span>{{ abbreviateTime(timeSpentHumanReadable) }} / {{ abbreviateTime(timeEstimateHumanReadable) }}</span>
+          </div>
+          <div class='estimate-only' v-if='showEstimateOnlyState'>
+            <span class='bold'>-- / {{ abbreviateTime(timeEstimateHumanReadable) }}</span>
+          </div>
+          <div class='spend-only' v-if='showSpentOnlyState'>
+            <span class='bold'>{{ abbreviateTime(timeSpentHumanReadable) }} / --</span>
+          </div>
+          <div class='no-tracking' v-if='showNoTimeTrackingState'>
+            <span class='no-value'>None</span>
+          </div>
+        </div>
+      </div>
+      `,
+  });
+})();
+
diff --git a/app/assets/javascripts/issuable/time_tracking/components/comparison_pane.js.es6 b/app/assets/javascripts/issuable/time_tracking/components/comparison_pane.js.es6
new file mode 100644
index 00000000000..6abbd5dd167
--- /dev/null
+++ b/app/assets/javascripts/issuable/time_tracking/components/comparison_pane.js.es6
@@ -0,0 +1,69 @@
+/* global Vue */
+//= require lib/utils/pretty_time
+
+(() => {
+  const prettyTime = gl.utils.prettyTime;
+
+  Vue.component('time-tracking-comparison-pane', {
+    name: 'time-tracking-comparison-pane',
+    props: [
+      'timeSpent',
+      'timeEstimate',
+      'timeSpentHumanReadable',
+      'timeEstimateHumanReadable',
+    ],
+    computed: {
+      parsedRemaining() {
+        const diffSeconds = this.timeEstimate - this.timeSpent;
+        return prettyTime.parseSeconds(diffSeconds);
+      },
+      timeRemainingHumanReadable() {
+        return prettyTime.stringifyTime(this.parsedRemaining);
+      },
+      timeRemainingTooltip() {
+        const prefix = this.timeRemainingMinutes < 0 ? 'Over by' : 'Time remaining:';
+        return `${prefix} ${this.timeRemainingHumanReadable}`;
+      },
+      /* Diff values for comparison meter */
+      timeRemainingMinutes() {
+        return this.timeEstimate - this.timeSpent;
+      },
+      timeRemainingPercent() {
+        return `${Math.floor((this.timeSpent / this.timeEstimate) * 100)}%`;
+      },
+      timeRemainingStatusClass() {
+        return this.timeEstimate >= this.timeSpent ? 'within_estimate' : 'over_estimate';
+      },
+      /* Parsed time values */
+      parsedEstimate() {
+        return prettyTime.parseSeconds(this.timeEstimate);
+      },
+      parsedSpent() {
+        return prettyTime.parseSeconds(this.timeSpent);
+      },
+    },
+    template: `
+      <div class='time-tracking-comparison-pane'>
+        <div class='compare-meter' data-toggle='tooltip' data-placement='top' role='timeRemainingDisplay'
+          :aria-valuenow='timeRemainingTooltip'
+          :title='timeRemainingTooltip'
+          :data-original-title='timeRemainingTooltip'
+          :class='timeRemainingStatusClass'>
+          <div class='meter-container' role='timeSpentPercent' :aria-valuenow='timeRemainingPercent'>
+            <div :style='{ width: timeRemainingPercent }' class='meter-fill'></div>
+          </div>
+          <div class='compare-display-container'>
+            <div class='compare-display pull-left'>
+              <span class='compare-label'>Spent</span>
+              <span class='compare-value spent'>{{ timeSpentHumanReadable }}</span>
+            </div>
+            <div class='compare-display estimated pull-right'>
+              <span class='compare-label'>Est</span>
+              <span class='compare-value'>{{ timeEstimateHumanReadable }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/issuable/time_tracking/components/estimate_only_pane.js.es6 b/app/assets/javascripts/issuable/time_tracking/components/estimate_only_pane.js.es6
new file mode 100644
index 00000000000..309e9f2f9ef
--- /dev/null
+++ b/app/assets/javascripts/issuable/time_tracking/components/estimate_only_pane.js.es6
@@ -0,0 +1,13 @@
+/* global Vue */
+(() => {
+  Vue.component('time-tracking-estimate-only-pane', {
+    name: 'time-tracking-estimate-only-pane',
+    props: ['timeEstimateHumanReadable'],
+    template: `
+      <div class='time-tracking-estimate-only-pane'>
+        <span class='bold'>Estimated:</span>
+        {{ timeEstimateHumanReadable }}
+      </div>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/issuable/time_tracking/components/help_state.js.es6 b/app/assets/javascripts/issuable/time_tracking/components/help_state.js.es6
new file mode 100644
index 00000000000..d7ced6d7151
--- /dev/null
+++ b/app/assets/javascripts/issuable/time_tracking/components/help_state.js.es6
@@ -0,0 +1,24 @@
+/* global Vue */
+(() => {
+  Vue.component('time-tracking-help-state', {
+    name: 'time-tracking-help-state',
+    props: ['docsUrl'],
+    template: `
+      <div class='time-tracking-help-state'>
+        <div class='time-tracking-info'>
+          <h4>Track time with slash commands</h4>
+          <p>Slash commands can be used in the issues description and comment boxes.</p>
+          <p>
+            <code>/estimate</code>
+            will update the estimated time with the latest command.
+          </p>
+          <p>
+            <code>/spend</code>
+            will update the sum of the time spent.
+          </p>
+          <a class='btn btn-default learn-more-button' :href='docsUrl'>Learn more</a>
+        </div>
+      </div>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/issuable/time_tracking/components/no_tracking_pane.js.es6 b/app/assets/javascripts/issuable/time_tracking/components/no_tracking_pane.js.es6
new file mode 100644
index 00000000000..1d2ca643b5b
--- /dev/null
+++ b/app/assets/javascripts/issuable/time_tracking/components/no_tracking_pane.js.es6
@@ -0,0 +1,11 @@
+/* global Vue */
+(() => {
+  Vue.component('time-tracking-no-tracking-pane', {
+    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/issuable/time_tracking/components/spent_only_pane.js.es6 b/app/assets/javascripts/issuable/time_tracking/components/spent_only_pane.js.es6
new file mode 100644
index 00000000000..ed283fec3c3
--- /dev/null
+++ b/app/assets/javascripts/issuable/time_tracking/components/spent_only_pane.js.es6
@@ -0,0 +1,13 @@
+/* global Vue */
+(() => {
+  Vue.component('time-tracking-spent-only-pane', {
+    name: 'time-tracking-spent-only-pane',
+    props: ['timeSpentHumanReadable'],
+    template: `
+      <div class='time-tracking-spend-only-pane'>
+        <span class='bold'>Spent:</span>
+        {{ timeSpentHumanReadable }}
+      </div>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/issuable/time_tracking/components/time_tracker.js.es6 b/app/assets/javascripts/issuable/time_tracking/components/time_tracker.js.es6
new file mode 100644
index 00000000000..26563a7713b
--- /dev/null
+++ b/app/assets/javascripts/issuable/time_tracking/components/time_tracker.js.es6
@@ -0,0 +1,118 @@
+/* global Vue */
+//= require ./help_state
+//= require ./collapsed_state
+//= require ./spent_only_pane
+//= require ./no_tracking_pane
+//= require ./estimate_only_pane
+//= require ./comparison_pane
+
+(() => {
+  Vue.component('issuable-time-tracker', {
+    name: 'issuable-time-tracker',
+    props: [
+      'time_estimate',
+      'time_spent',
+      'human_time_estimate',
+      'human_time_spent',
+      'stopwatchSvg',
+      'docsUrl',
+    ],
+    data() {
+      return {
+        showHelp: false,
+      };
+    },
+    computed: {
+      timeSpent() {
+        return this.time_spent;
+      },
+      timeEstimate() {
+        return this.time_estimate;
+      },
+      timeEstimateHumanReadable() {
+        return this.human_time_estimate;
+      },
+      timeSpentHumanReadable() {
+        return this.human_time_spent;
+      },
+      hasTimeSpent() {
+        return !!this.timeSpent;
+      },
+      hasTimeEstimate() {
+        return !!this.timeEstimate;
+      },
+      showComparisonState() {
+        return this.hasTimeEstimate && this.hasTimeSpent;
+      },
+      showEstimateOnlyState() {
+        return this.hasTimeEstimate && !this.hasTimeSpent;
+      },
+      showSpentOnlyState() {
+        return this.hasTimeSpent && !this.hasTimeEstimate;
+      },
+      showNoTimeTrackingState() {
+        return !this.hasTimeEstimate && !this.hasTimeSpent;
+      },
+      showHelpState() {
+        return !!this.showHelp;
+      },
+    },
+    methods: {
+      toggleHelpState(show) {
+        this.showHelp = show;
+      },
+    },
+    template: `
+      <div class='time_tracker time-tracking-component-wrap' v-cloak>
+        <time-tracking-collapsed-state
+          :show-comparison-state='showComparisonState'
+          :show-help-state='showHelpState'
+          :show-spent-only-state='showSpentOnlyState'
+          :show-estimate-only-state='showEstimateOnlyState'
+          :time-spent-human-readable='timeSpentHumanReadable'
+          :time-estimate-human-readable='timeEstimateHumanReadable'
+          :stopwatch-svg='stopwatchSvg'>
+        </time-tracking-collapsed-state>
+        <div class='title hide-collapsed'>
+          Time tracking
+          <div class='help-button pull-right'
+            v-if='!showHelpState'
+            @click='toggleHelpState(true)'>
+            <i class='fa fa-question-circle'></i>
+          </div>
+          <div class='close-help-button pull-right'
+            v-if='showHelpState'
+            @click='toggleHelpState(false)'>
+            <i class='fa fa-close'></i>
+          </div>
+        </div>
+        <div class='time-tracking-content hide-collapsed'>
+          <time-tracking-estimate-only-pane
+            v-if='showEstimateOnlyState'
+            :time-estimate-human-readable='timeEstimateHumanReadable'>
+          </time-tracking-estimate-only-pane>
+          <time-tracking-spent-only-pane
+            v-if='showSpentOnlyState'
+            :time-spent-human-readable='timeSpentHumanReadable'>
+          </time-tracking-spent-only-pane>
+          <time-tracking-no-tracking-pane
+            v-if='showNoTimeTrackingState'>
+          </time-tracking-no-tracking-pane>
+          <time-tracking-comparison-pane
+            v-if='showComparisonState'
+            :time-estimate='timeEstimate'
+            :time-spent='timeSpent'
+            :time-spent-human-readable='timeSpentHumanReadable'
+            :time-estimate-human-readable='timeEstimateHumanReadable'>
+          </time-tracking-comparison-pane>
+          <transition name='help-state-toggle'>
+            <time-tracking-help-state
+              v-if='showHelpState'
+              :docs-url='docsUrl'>
+            </time-tracking-help-state>
+          </transition>
+        </div>
+      </div>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/issuable/time_tracking/time_tracking_bundle.js.es6 b/app/assets/javascripts/issuable/time_tracking/time_tracking_bundle.js.es6
new file mode 100644
index 00000000000..0b8da2b1f4f
--- /dev/null
+++ b/app/assets/javascripts/issuable/time_tracking/time_tracking_bundle.js.es6
@@ -0,0 +1,61 @@
+/* global Vue */
+//= require ./components/time_tracker
+//= require smart_interval
+//= require subbable_resource
+
+(() => {
+  /* This Vue instance represents what will become the parent instance for the
+    * sidebar. It will be responsible for managing `issuable` state and propagating
+    * changes to sidebar components. We will want to create a separate service to
+    * interface with the server at that point.
+   */
+
+  class IssuableTimeTracking {
+    constructor(issuableJSON) {
+      const parsedIssuable = JSON.parse(issuableJSON);
+      return this.initComponent(parsedIssuable);
+    }
+
+    initComponent(parsedIssuable) {
+      this.parentInstance = new Vue({
+        el: '#issuable-time-tracker',
+        data: {
+          issuable: parsedIssuable,
+        },
+        methods: {
+          fetchIssuable() {
+            return gl.IssuableResource.get.call(gl.IssuableResource, {
+              type: 'GET',
+              url: gl.IssuableResource.endpoint,
+            });
+          },
+          updateState(data) {
+            this.issuable = data;
+          },
+          subscribeToUpdates() {
+            gl.IssuableResource.subscribe(data => this.updateState(data));
+          },
+          listenForSlashCommands() {
+            $(document).on('ajax:success', '.gfm-form', (e, data) => {
+              const subscribedCommands = ['spend_time', 'time_estimate'];
+              const changedCommands = data.commands_changes;
+
+              if (changedCommands && _.intersection(subscribedCommands, changedCommands).length) {
+                this.fetchIssuable();
+              }
+            });
+          },
+        },
+        created() {
+          this.fetchIssuable();
+        },
+        mounted() {
+          this.subscribeToUpdates();
+          this.listenForSlashCommands();
+        },
+      });
+    }
+  }
+
+  gl.IssuableTimeTracking = IssuableTimeTracking;
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index cf9424ea5dd..4baf6ee781a 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -5,7 +5,7 @@ $sidebar_collapsed_width: 62px;
 $sidebar_width: 220px;
 $gutter_collapsed_width: 62px;
 $gutter_width: 290px;
-$gutter_inner_width: 258px;
+$gutter_inner_width: 250px;
 $sidebar-transition-duration: .15s;
 $sidebar-breakpoint: 1024px;
 
@@ -85,6 +85,7 @@ $warning-message-border: #f0e2bb;
  */
 $border-color: #e5e5e5;
 $focus-border-color: #3aabf0;
+$sidebar-collapsed-icon-color: #999;
 $well-expand-item: #e8f2f7;
 $well-inner-border: #eef0f2;
 $well-light-border: #f1f1f1;
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 3272a862b85..c9014ac2906 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -469,3 +469,102 @@
     }
   }
 }
+
+.time_tracker {
+  padding-bottom: 0;
+  border-bottom: 0;
+
+
+  .sidebar-collapsed-icon {
+
+    > .stopwatch-svg {
+      display: inline-block;
+    }
+
+    svg {
+      width: 16px;
+      height: 16px;
+      fill: $sidebar-collapsed-icon-color;
+    }
+
+    &:hover svg {
+      fill: $gl-gray;
+    }
+  }
+
+  .help-button,
+  .close-help-button {
+    cursor: pointer;
+  }
+
+  .compare-meter {
+    &.within_estimate {
+      .meter-fill {
+        background: $gl-primary;
+      }
+    }
+
+    &.over_estimate {
+      .meter-fill {
+        background: $red-light;
+      }
+
+      .time-remaining,
+      .compare-value.spent {
+        color: $red-light;
+      }
+    }
+  }
+
+  .meter-container {
+    background: $border-gray-light;
+    border-radius: 3px;
+
+    .meter-fill {
+      max-width: 100%;
+      height: 5px;
+      border-radius: 3px;
+      background: $gl-primary;
+    }
+  }
+
+  .compare-display-container {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 5px;
+
+    .compare-display {
+      font-size: 13px;
+      color: $gl-gray-light;
+
+      .compare-value {
+        color: $gl-gray;
+      }
+    }
+  }
+
+  .time-tracking-help-state {
+    background: $white-light;
+    margin: 16px -20px 0;
+    padding: 16px 20px;
+    border-top: 1px solid $border-gray-light;
+    border-bottom: 1px solid $border-gray-light;
+
+    a:hover {
+      color: $btn-white-active;
+    }
+  }
+
+  .help-state-toggle-enter-active {
+    transition: all .8s ease;
+  }
+
+  .help-state-toggle-leave-active {
+    transition: all .5s ease;
+  }
+
+  .help-state-toggle-enter,
+  .help-state-toggle-leave-active {
+    opacity: 0;
+  }
+}
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index 43141971231..9fa00811af0 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -2,6 +2,8 @@
 - page_title           "#{@issue.title} (#{@issue.to_reference})", "Issues"
 - page_description     @issue.description
 - page_card_attributes @issue.card_attributes
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_tag('lib/vue_resource.js')
 
 .clearfix.detail-page-header
   .issuable-header
diff --git a/app/views/projects/merge_requests/_show.html.haml b/app/views/projects/merge_requests/_show.html.haml
index 110dd11d1ce..0516801cdf3 100644
--- a/app/views/projects/merge_requests/_show.html.haml
+++ b/app/views/projects/merge_requests/_show.html.haml
@@ -3,6 +3,7 @@
 - page_description     @merge_request.description
 - page_card_attributes @merge_request.card_attributes
 - content_for :page_specific_javascripts do
+  = page_specific_javascript_tag('lib/vue_resource.js')
   = page_specific_javascript_tag('diff_notes/diff_notes_bundle.js')
 
 .merge-request{ 'data-url' => merge_request_path(@merge_request) }
diff --git a/app/views/projects/merge_requests/conflicts.html.haml b/app/views/projects/merge_requests/conflicts.html.haml
index b8b87dcdcaf..ebef2157d34 100644
--- a/app/views/projects/merge_requests/conflicts.html.haml
+++ b/app/views/projects/merge_requests/conflicts.html.haml
@@ -1,5 +1,6 @@
 - page_title "Merge Conflicts", "#{@merge_request.title} (#{@merge_request.to_reference}", "Merge Requests"
 - content_for :page_specific_javascripts do
+  = page_specific_javascript_tag('lib/vue_resource.js')
   = page_specific_javascript_tag('merge_conflicts/merge_conflicts_bundle.js')
   = page_specific_javascript_tag('lib/ace.js')
 = render "projects/merge_requests/show/mr_title"
diff --git a/app/views/shared/icons/_icon_stopwatch.svg b/app/views/shared/icons/_icon_stopwatch.svg
new file mode 100644
index 00000000000..f20de04538e
--- /dev/null
+++ b/app/views/shared/icons/_icon_stopwatch.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 14" enable-background="new 0 0 12 14"><path d="m11.5 2.4l-1.3-1.1-1 1.1 1.4 1.1.9-1.1"/><path d="m6.8 2v-.5h.5v-1.5h-2.6v1.5h.5v.5c-2.9.4-5.2 2.9-5.2 6 0 3.3 2.7 6 6 6s6-2.7 6-6c0-3-2.3-5.6-5.2-6m-.8 10.5c-2.5 0-4.5-2-4.5-4.5s2-4.5 4.5-4.5 4.5 2 4.5 4.5-2 4.5-4.5 4.5"/><path d="m6.2 8.9h-.5c-.1 0-.2-.1-.2-.2v-3.5c0-.1.1-.2.2-.2h.5c.1 0 .2.1.2.2v3.5c0 .1-.1.2-.2.2"/></svg>
\ No newline at end of file
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index a02b815e3cd..c46710af758 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -1,5 +1,7 @@
 - todo = issuable_todo(issuable)
-%aside.right-sidebar{ class: sidebar_gutter_collapsed_class }
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_tag('issuable/issuable_bundle.js')
+%aside.right-sidebar{ class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' }
   .issuable-sidebar
     - can_edit_issuable = can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
     .block.issuable-sidebar-header
@@ -72,7 +74,13 @@
         .selectbox.hide-collapsed
           = f.hidden_field 'milestone_id', value: issuable.milestone_id, id: nil
           = dropdown_tag('Milestone', options: { title: 'Assign milestone', toggle_class: 'js-milestone-select js-extra-options', filter: true, dropdown_class: 'dropdown-menu-selectable', placeholder: 'Search milestones', data: { show_no: true, field_name: "#{issuable.to_ability_name}[milestone_id]", project_id: @project.id, issuable_id: issuable.id, milestones: namespace_project_milestones_path(@project.namespace, @project, :json), ability_name: issuable.to_ability_name, issue_update: issuable_json_path(issuable), use_id: true }})
-
+      - if issuable.has_attribute?(:time_estimate)
+        #issuable-time-tracker.block
+          %issuable-time-tracker{ ':time_estimate' => 'issuable.time_estimate', ':time_spent' => 'issuable.total_time_spent', ':human_time_estimate' => 'issuable.human_time_estimate', ':human_time_spent' => 'issuable.human_total_time_spent', 'stopwatch-svg' => custom_icon('icon_stopwatch'), 'docs-url' => help_page_path('workflow/time_tracking.md')}
+            // Fallback while content is loading
+            .title.hide-collapsed
+              Time tracking
+              = icon('spinner spin')
       - if issuable.has_attribute?(:due_date)
         .block.due_date
           .sidebar-collapsed-icon
@@ -162,6 +170,8 @@
           = clipboard_button(clipboard_text: project_ref, title: "Copy reference to clipboard", placement: "left")
 
     :javascript
+      gl.IssuableResource = new gl.SubbableResource('#{issuable_json_path(issuable)}');
+      new gl.IssuableTimeTracking("#{escape_javascript(serialize_issuable(issuable))}");
       new MilestoneSelect('{"namespace":"#{@project.namespace.path}","path":"#{@project.path}"}');
       new LabelsSelect();
       new IssuableContext('#{escape_javascript(current_user.to_json(only: [:username, :id, :name]))}');