Replace issues time tracking progress bar with gitlab-ui's progress bar

3 files changed, 13 insertions, 11 deletions

diff --git a/app/assets/javascripts/commons/gitlab_ui.js b/app/assets/javascripts/commons/gitlab_ui.js
new file mode 100644
index 00000000000..923c036f5a4
--- /dev/null
+++ b/app/assets/javascripts/commons/gitlab_ui.js
@@ -0,0 +1,4 @@
+import Vue from 'vue';
+import progressBar from '@gitlab-org/gitlab-ui/dist/base/progress_bar';
+
+Vue.component('gl-progress-bar', progressBar);
diff --git a/app/assets/javascripts/commons/index.js b/app/assets/javascripts/commons/index.js
index 0d2fe2925d8..ea945cd3fa5 100644
--- a/app/assets/javascripts/commons/index.js
+++ b/app/assets/javascripts/commons/index.js
@@ -3,4 +3,5 @@ import './polyfills';
 import './jquery';
 import './bootstrap';
 import './vue';
+import './gitlab_ui';
 import '../lib/utils/axios_utils';
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue b/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue
index d335c3f55af..dc599e1b9fc 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/comparison_pane.vue
@@ -42,11 +42,14 @@ export default {
       return this.timeEstimate - this.timeSpent;
     },
     timeRemainingPercent() {
-      return `${Math.floor((this.timeSpent / this.timeEstimate) * 100)}%`;
+      return Math.floor((this.timeSpent / this.timeEstimate) * 100);
     },
     timeRemainingStatusClass() {
       return this.timeEstimate >= this.timeSpent ? 'within_estimate' : 'over_estimate';
     },
+    progressBarVariant() {
+      return this.timeRemainingPercent > 100 ? 'danger' : 'primary';
+    },
   },
 };
 </script>
@@ -62,16 +65,10 @@ export default {
       data-placement="top"
       role="timeRemainingDisplay"
     >
-      <div
-        :aria-valuenow="timeRemainingPercent"
-        class="meter-container"
-      >
-        <div
-          :style="{ width: timeRemainingPercent }"
-          class="meter-fill"
-        >
-        </div>
-      </div>
+      <gl-progress-bar
+        :value="timeRemainingPercent"
+        :variant="progressBarVariant"
+      />
       <div class="compare-display-container">
         <div class="compare-display float-left">
           <span class="compare-label">